Merge branch 'hotfix/v2.10.3'

README.md

@@ -129,6 +129,10 @@ This project is licensed under the MIT License
 
 ## Change log
 
+### 2.10.3 (2022-01-06)
+ * Fixed [popover position in rtl pages](https://github.com/talkhabi/vue-persian-datetime-picker/issues/204)
+ * Fixed [keep the selected day in simple mode](https://github.com/talkhabi/vue-persian-datetime-picker/issues/207)
+
 ### 2.10.2 (2021-12-24)
  * Fixed [popover mode when using custom input](https://github.com/talkhabi/vue-persian-datetime-picker/issues/200)
  * Fixed [change jump-minute by muse wheel](https://github.com/talkhabi/vue-persian-datetime-picker/issues/198)

docs/config/README.md

@@ -324,14 +324,14 @@ Enable or disable multiple mode
 ## popover
 
 Enable or disable popover mode
-- Type: `Boolean` | `String`
+- Type: `Boolean` | `String` | `Object`
 - Default: `false`
 - Accepted: 
     * `true` | `false`
-    * `top-left` | `top-right`
-    * `bottom-right` | `bottom-left`
-    * `left-top` | `left-bottom`
-    * `right-top` | `right-bottom`
+    * `top` | `bottom` | `right` | `left`
+    * `top-left` | `top-right` | `bottom-right` | `bottom-left`
+    * `{ offsetX: Number, offsetY: Number }`
+    * `{ placement: String, offsetX: Number, offsetY: Number }`
 
 
 ## useRouter

docs/guide/popover.md

@@ -15,16 +15,30 @@
   <date-picker auto-submit popover="bottom-left" />
 </ClientOnly>
 
+```vue
+<date-picker
+  auto-submit
+  :popover="{
+    placement: 'right',
+    offsetX: 10,
+    offsetY: 10
+  }"
+/>
+```
+<ClientOnly>
+  <date-picker auto-submit :popover="{ placement: 'right', offsetX: 10, offsetY: 10 }" />
+</ClientOnly>
+
 
 accepted:
 
   `true` | `false`
-  
-  `top-left` | `top-right`
-  
-  `bottom-right` | `bottom-left`
-  
-  `top` | `bottom`
-  
-  `right` | `left`
+
+  `top` | `bottom` | `right` | `left`
+
+  `top-left` | `top-right` | `bottom-right` | `bottom-left`
+
+  `{ offsetX: Number, offsetY: Number }`
+
+  `{ placement: String, offsetX: Number, offsetY: Number }`
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-persian-datetime-picker",
   "description": "A vue plugin to select jalali date and time",
-  "version": "2.10.2",
+  "version": "2.10.3",
   "private": false,
   "author": "Mohammad Talkhabi",
   "license": "MIT",

src/VuePersianDatetimePicker.vue

@@ -841,13 +841,15 @@ export default {
      *    true | false
      *    top | bottom | right | left
      *    top-left | top-right | bottom-right | bottom-left
+     *    { offsetX: -10, offsetY: 10 }
+     *    { placement: 'right', offsetX: 10, offsetY: 10 }
      * @default false
      * @example <date-picker popover />
      * @example <date-picker popover="right" />
      * @example <date-picker popover="top-left" />
      * @version 2.6.0
      */
-    popover: { type: [Boolean, String], default: false },
+    popover: { type: [Boolean, String, Object], default: false },
 
     /**
      * If you want to change route address in open/close action,
@@ -1400,19 +1402,30 @@ export default {
     selectYear(year) {
       if (year.disabled) return
       this.date = this.date.clone().xYear(year.xYear())
-      if (['year', 'year-month'].indexOf(this.type) !== -1)
-        this.selectedDates = [this.date.clone()]
+      this.keepCurrentSelectedDay()
+      this.resetSelectedDates(this.date)
       this.$emit('year-change', year)
       this.nextStep('year')
     },
     selectMonth(month) {
       if (month.disabled) return
       this.date = this.date.clone().xMonth(month.xMonth())
-      if (['month', 'year-month'].indexOf(this.type) !== -1)
-        this.selectedDates = [this.date.clone()]
+      this.keepCurrentSelectedDay()
+      this.resetSelectedDates(this.date)
       this.$emit('month-change', month)
       this.nextStep('month')
     },
+    keepCurrentSelectedDay() {
+      if (!this.simple || this.multiple || this.range) return
+      let currentDay = this.selectedDate.xDate()
+      this.date.xDate(Math.min(currentDay, this.date.xDaysInMonth()))
+      this.selectedDates = [this.date.clone()]
+      this.autoSubmit && this.submit(false)
+    },
+    resetSelectedDates(date) {
+      if (['month', 'year-month'].indexOf(this.type) !== -1)
+        this.selectedDates = [date.clone()]
+    },
     submit(close = true) {
       let steps = this.steps.length - 1
       let selected = this.selectedDates
@@ -1789,9 +1802,15 @@ export default {
     },
     setPlacement() {
       if (!this.isPopover || !this.visible) return
-      const positionOptions = {
-        placement: this.popover
+      let positionOptions = {
+        placement: '',
+        offsetX: 0,
+        offsetY: 0
       }
+      if (typeof this.popover === 'object' && this.popover)
+        positionOptions.placement = this.popover
+      else if (typeof this.popover === 'string')
+        positionOptions.placement = this.popover
       popover.setPickerPosition(
         this.$refs.picker,
         this.$refs.container,

src/assets/scss/style.scss

@@ -582,6 +582,8 @@
   width: 100px;
   height: 0;
   z-index: 500;
+  right: unset;
+  bottom: unset;
   .#{$prefix}container {
     position: absolute;
     transform: none;

src/modules/core.js

@@ -129,6 +129,9 @@ const Core = function(defaultLocaleName, defaultOptions) {
       date.xAdd = function(amount, key) {
         return this.add(amount, methods[key])
       }
+      date.xDaysInMonth = function() {
+        return xDaysInMonth(this.xYear(), this.xMonth())
+      }
       date.clone = function() {
         return Instance.moment(this.toDate())
       }

src/modules/popover-util.js

@@ -26,8 +26,8 @@ const popover = {
   setPickerPosition(pickerWrapperEl, containerEl, inputWrapperEl, options) {
     if (!inputWrapperEl || !pickerWrapperEl) return
 
+    let { placement = '', offsetX = 0, offsetY = 0 } = options
     let dataPlacement = ''
-    const placement = options.placement
     let isOnTop = /top/.test(placement)
     let isOnLeft = /left/.test(placement)
     let isOnRight = /right/.test(placement)
@@ -52,13 +52,15 @@ const popover = {
     dataPlacement += isOnLeft ? '-left' : '-right'
 
     if (isOnTop) {
-      pickerWrapperEl.style.top = inputWrapperRect.top - distanceY + 'px'
+      pickerWrapperEl.style.top =
+        inputWrapperRect.top - distanceY - offsetY + 'px'
     } else {
-      pickerWrapperEl.style.top = top + distanceY + 'px'
+      pickerWrapperEl.style.top = top + distanceY + offsetY + 'px'
     }
 
+    offsetX *= isOnRight ? 1 : -1
     pickerWrapperEl.setAttribute('data-placement', dataPlacement)
-    pickerWrapperEl.style.left = inputWrapperRect.left + 'px'
+    pickerWrapperEl.style.left = inputWrapperRect.left + offsetX + 'px'
   }
 }