Add prop to append calendar to body

docs/.vuepress/components/style.css

@@ -38,3 +38,7 @@
 .error {
  color: red;
 }
+
+.overflow-scroll {
+ overflow: scroll
+}

docs/guide/Props/README.md

@@ -3,6 +3,7 @@
 
 | Prop | Type | Default | Description |
 | ----------------------------- | -----------------| ----------- | ----------------------------------------------- |
+| append-to-body | Boolean | false | Append datepicker calendar to body |
 | autofocus | String | | Sets html `autofocus` attribute on input |
 | bootstrap-styling | Boolean | false | Use bootstrap v4 styling classes. |
 | calendar-button | Boolean | false | Show an icon that that can be clicked |

docs/guide/README.md

@@ -55,6 +55,6 @@ If you use [SASS](https://sass-lang.com/) you can directly import the src file.
 
 ```vue
 <style lang="scss">
-@import '~@sumcumo/vue-datepicker/src/styles/style.scss';
+@import '~@sum.cumo/vue-datepicker/src/styles/style.scss';
 </style>
 ```

example/Demo.vue

@@ -3,7 +3,10 @@
  <h1>Datepicker Examples</h1>
  <div class="example">
  <h3>Default datepicker...</h3>
- <Datepicker placeholder="Select Date" />
+ <Datepicker
+ placeholder="Select Date"
+ :append-to-body="true"
+ />
  <code>
  &lt;datepicker placeholder="Select Date"&gt;&lt;/datepicker&gt;
  </code>
@@ -37,6 +40,7 @@
  <Datepicker
  v-model="vModelExample"
  placeholder="Select Date"
+ :append-to-body="true"
  />
  <code>
  &lt;datepicker placeholder="Select Date" v-model="vmodelexample"&gt;&lt;/datepicker&gt;
@@ -45,6 +49,18 @@
  <p>{{ vModelExample }}</p>
  </div>
 
+ <div class="example overflow-scroll">
+ <h3>Append datepicker to body</h3>
+ <Datepicker
+ :append-to-body="true"
+ />
+ <h3>Don't append datepicker to body</h3>
+ <Datepicker />
+ <code>
+ &lt;datepicker :append-to-body="true"&gt;&lt;/datepicker&gt;
+ </code>
+ </div>
+
  <div class="example">
  <h3>Format datepicker</h3>
  <Datepicker :format="format" />
@@ -294,6 +310,29 @@
  :initialView="'year'"&gt;&lt;/datepicker&gt;
  </code>
  </div>
+
+ <div class="example">
+ <h3>Fixed positions</h3>
+ <Datepicker
+ :fixed-position="fixedPosition"
+ :append-to-body="true"
+ />
+ <code>
+ &lt;datepicker :fixed-position="fixedPosition"&gt;&lt;/datepicker&gt;
+ </code>
+ <div class="settings">
+ <h5>Settings</h5>
+ <select v-model="fixedPosition">
+ <option
+ v-for="(position) in fixedPositions"
+ :key="position"
+ :value="position"
+ >
+ {{ position }}
+ </option>
+ </select>
+ </div>
+ </div>
  </div>
 </template>
 
@@ -369,6 +408,15 @@ export default {
  vModelExample: null,
  languages: lang,
  language: 'en',
+ fixedPositions: [
+ 'bottom',
+ 'bottom-left',
+ 'bottom-right',
+ 'top',
+ 'top-left',
+ 'top-right',
+ ],
+ fixedPosition: 'bottom',
  }
  },
  computed: {
@@ -499,4 +547,8 @@ h5 {
  font-size: 80%;
  display: block;
 }
+
+.overflow-scroll {
+ overflow: scroll
+}
 </style>

jest.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+ rootDir: './',
+ moduleFileExtensions: [
+ 'js',
+ 'json',
+ 'vue',
+ ],
+ moduleNameMapper: {
+ '^~(.*)$': '<rootDir>/src/$1',
+ },
+ transform: {
+ '^.+.js$': 'babel-jest',
+ '^.+.vue': 'vue-jest',
+ },
+ setupFiles: ['<rootDir>/test/unit/setup.js'],
+ coverageDirectory: '<rootDir>/test/unit/coverage',
+ collectCoverageFrom: [
+ './src/**/*.{js,vue}',
+ '!./src/locale/translations/**/*.js',
+ ],
+ verbose: false,
+ testURL: 'http://localhost',
+}

package.json

@@ -33,7 +33,7 @@
  "audit": "npm audit --registry=https://registry.npmjs.org",
  "serve": "rollup -c scripts/serve.js --watch",
  "lint": "eslint --ext .js,.vue src test/unit/specs",
- "test": "jest --config test/unit/jest.conf.js --coverage",
+ "test": "jest --coverage",
  "release": "standard-version",
  "prerelease": "standard-version --dry-run",
  "docs:dev": "vuepress dev docs",