feat(datepicker): Add prop to append calendar to body (sumcumo#37)

* feat(datepicker): add popup to append calendar to body

* test(project): resolve test config

* chore(styles): adjust coding style

* refactor(project): order props alphabetic

Breaking-change: This will change the overall html structure of the datepicker

Author: MrWook

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" />
@@ -315,6 +331,29 @@
         <pre>yearPickerRange: {{ yearPickerRange }}</pre>
       </div>
     </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>
 
@@ -392,6 +431,15 @@ export default {
       languages: lang,
       language: 'en',
       yearPickerRange: 10,
+      fixedPositions: [
+        'bottom',
+        'bottom-left',
+        'bottom-right',
+        'top',
+        'top-left',
+        'top-right',
+      ],
+      fixedPosition: 'bottom',
     }
   },
   computed: {
@@ -522,4 +570,8 @@ h5 {
   font-size: 80%;
   display: block;
 }
+
+.overflow-scroll {
+  overflow: scroll
+}
 </style>

jest.conf.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',
+}

jest.config.js

@@ -33,8 +33,8 @@
     "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:watch": "jest --config test/unit/jest.conf.js --watch",
+    "test": "jest --coverage",
+    "test:watch": "jest --watch",
     "release": "standard-version",
     "prerelease": "standard-version --dry-run",
     "docs:dev": "vuepress dev docs",