Refactor datepicker to move calendar out

docs/.vuepress/components/Demo.vue

@@ -134,6 +134,40 @@
         <datepicker :calendar-button="true" :show-calendar-on-button-click="true"></datepicker>
       </code>
     </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>Fixed positions</h3>
+      <Datepicker
+        :fixed-position="fixedPosition"
+      />
+      <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>
 
@@ -146,6 +180,15 @@ export default {
       format: 'd MMMM yyyy',
       openDate: null,
       vModelExample: null,
+      fixedPositions: [
+        'bottom',
+        'bottom-left',
+        'bottom-right',
+        'top',
+        'top-left',
+        'top-right',
+      ],
+      fixedPosition: 'bottom',
     }
   },
 }

docs/.vuepress/components/style.css

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

docs/guide/Props/README.md

@@ -3,7 +3,7 @@
 
 | Prop                          | Type             | Default     | Description                                     |
 | ----------------------------- | -----------------| ----------- | ----------------------------------------------- |
-| append-to-body                | Boolean          |             | Append datepicker calendar to body              |
+| 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

@@ -310,6 +310,29 @@
         :initialView="'year'"></datepicker>
       </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>
 
@@ -385,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: {
@@ -515,7 +547,7 @@ h5 {
   font-size: 80%;
   display: block;
 }
-.overflow-scroll{
+.overflow-scroll {
   overflow:scroll
 }
 </style>

src/components/Datepicker.vue

@@ -29,6 +29,7 @@
       :visible="isOpen"
       :inline="inline"
       :fixed-position="fixedPosition"
+      :rtl="isRtl"
     >
       <Calendar
         v-if="isOpen"

src/components/Popup.vue

@@ -2,7 +2,7 @@
 import {
   getPopupElementSize,
   getRelativePosition,
-} from '../utils/dom'
+} from '~/utils/dom'
 
 export default {
   name: 'Popup',
@@ -23,6 +23,10 @@ export default {
       type: String,
       default: '',
     },
+    rtl: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -69,7 +73,15 @@ export default {
         this.popupRect = getPopupElementSize(popup)
       }
       const { width, height } = this.popupRect
-      const { left, top } = getRelativePosition(relativeElement, width, height, this.appendToBody)
+      const { left, top } = getRelativePosition({
+        el: popup,
+        elRelative: relativeElement,
+        targetWidth: width,
+        targetHeight: height,
+        fixed: this.appendToBody,
+        fixedPosition: this.fixedPosition,
+        rtl: this.rtl,
+      })
 
       this.$el.style.left = left
       this.$el.style.top = top

src/utils/dom.js

@@ -28,75 +28,96 @@ export function getPopupElementSize(element) {
 
 /**
  * get the popup position
- * @param {Element} el relative element
+ * @param {Element} el element
+ * @param {Element} elRelative relative element
  * @param {Number} targetWidth target element's width
  * @param {Number} targetHeight target element's height
  * @param {Boolean} fixed
+ * @param {String} fixedPosition
+ * @param {Boolean} rtl
  */
-export function getRelativePosition(el, targetWidth, targetHeight, fixed) {
+export function getRelativePosition({
+  el,
+  elRelative,
+  targetWidth,
+  targetHeight,
+  fixed,
+  fixedPosition,
+  rtl,
+}) {
   let left = 0
   let top = 0
   let offsetX = 0
   let offsetY = 0
-  const relativeRect = el.getBoundingClientRect()
-  const dw = document.documentElement.clientWidth
-  const dh = document.documentElement.clientHeight
+  const relativeRect = elRelative.getBoundingClientRect()
+  const documentWidth = document.documentElement.clientWidth
+  const documentHeight = document.documentElement.clientHeight
   if (fixed) {
     offsetX = window.pageXOffset + relativeRect.left
     offsetY = window.pageYOffset + relativeRect.top
   }
-  if (dw - relativeRect.left < targetWidth && relativeRect.right < targetWidth) {
-    left = offsetX - relativeRect.left + 1
-  } else if (relativeRect.left + relativeRect.width / 2 <= dw / 2) {
+
+  const calendarBounding = el.getBoundingClientRect()
+  const outOfBoundsRight = calendarBounding.right > window.innerWidth
+  const outOfBoundsBottom = calendarBounding.bottom > window.innerHeight
+
+  const fixedPositionRight = fixedPosition && fixedPosition.indexOf('right') !== -1
+  const fixedPositionTop = fixedPosition && fixedPosition.indexOf('top') !== -1
+
+  const setLeft = () => {
     left = offsetX
-  } else {
+  }
+  const setRight = () => {
     left = offsetX + relativeRect.width - targetWidth
   }
-  if (relativeRect.top <= targetHeight && dh - relativeRect.bottom <= targetHeight) {
-    top = offsetY + dh - relativeRect.top - targetHeight
-  } else if (relativeRect.top + relativeRect.height / 2 <= dh / 2) {
+  const setBottom = () => {
     top = offsetY + relativeRect.height
-  } else {
-    top = offsetY - targetHeight
   }
-  return {
-    left: `${left}px`,
-    top: `${top}px`,
+  const setTop = () => {
+    top = offsetY - targetHeight
   }
-}
-
-export const setPickerPosition = ({
-  element,
-  relativeElement,
-  fixedPosition,
-}) => {
-  const calendarBounding = element.getBoundingClientRect()
-  const outOfBoundsRight = calendarBounding.right > window.innerWidth
-  const outOfBoundsBottom = calendarBounding.bottom > window.innerHeight
-  const relativeElementHeight = `${relativeElement.getBoundingClientRect().height}px`
 
   if (fixedPosition === '') {
-    if (outOfBoundsRight) {
-      element.style.right = 0
+    if (outOfBoundsRight || rtl) {
+      setRight()
     } else {
-      element.style.right = 'unset'
+      setLeft()
     }
 
     if (outOfBoundsBottom) {
-      element.style.bottom = relativeElementHeight
+      setTop()
     } else {
-      element.style.bottom = 'unset'
+      setBottom()
+    }
+    const hasRelativWidth = documentWidth - relativeRect.left < targetWidth
+      && relativeRect.right < targetWidth
+
+    const hasRelativHeight = relativeRect.top <= targetHeight
+      && documentHeight - relativeRect.bottom <= targetHeight
+
+    if (hasRelativWidth) {
+      left = offsetX - relativeRect.left + 1
+    }
+
+    if (hasRelativHeight) {
+      top = offsetY + documentHeight - relativeRect.top - targetHeight
     }
   } else {
-    if (fixedPosition.indexOf('right') !== -1) {
-      element.style.right = 0
+    if (fixedPositionRight) {
+      setRight()
     } else {
-      element.style.right = 'unset'
+      setLeft()
     }
-    if (fixedPosition.indexOf('top') !== -1) {
-      element.style.bottom = relativeElementHeight
+
+    if (fixedPositionTop) {
+      setTop()
     } else {
-      element.style.bottom = 'unset'
+      setBottom()
     }
   }
+
+  return {
+    left: `${left}px`,
+    top: `${top}px`,
+  }
 }