primevue 4.2.5 → 4.3.0

package/datepicker/DatePicker.vue

@@ -1,5 +1,5 @@
 <template>
-    <span ref="container" :id="d_id" :class="cx('root')" :style="sx('root')" v-bind="ptmi('root')">
+    <span ref="container" :id="$id" :class="cx('root')" :style="sx('root')" v-bind="ptmi('root')">
         <InputText
             v-if="!inline"
             :ref="inputRef"
@@ -392,6 +392,7 @@
                                 :class="cx('pcDecrementButton')"
                                 :aria-label="$primevue.config.locale.prevMinute"
                                 :disabled="disabled"
+                                :unstyled="unstyled"
                                 @mousedown="onTimePickerElementMouseDown($event, 1, -1)"
                                 @mouseup="onTimePickerElementMouseUp($event)"
                                 @keydown="onContainerButtonKeydown"
@@ -536,7 +537,7 @@
 import { absolutePosition, addStyle, find, findSingle, getAttribute, getFocusableElements, getIndex, getOuterWidth, isTouchDevice, relativePosition, setAttribute } from '@primeuix/utils/dom';
 import { localeComparator } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
-import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
+import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import CalendarIcon from '@primevue/icons/calendar';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import ChevronLeftIcon from '@primevue/icons/chevronleft';
@@ -563,6 +564,7 @@ export default {
     outsideClickListener: null,
     resizeListener: null,
     matchMediaListener: null,
+    matchMediaOrientationListener: null,
     overlay: null,
     input: null,
     previousButton: null,
@@ -572,7 +574,6 @@ export default {
     typeUpdate: false,
     data() {
         return {
-            d_id: this.id,
             currentMonth: null,
             currentYear: null,
             currentHour: null,
@@ -583,13 +584,11 @@ export default {
             overlayVisible: false,
             currentView: this.view,
             query: null,
-            queryMatches: false
+            queryMatches: false,
+            queryOrientation: null
         };
     },
     watch: {
-        id: function (newValue) {
-            this.d_id = newValue || UniqueComponentId();
-        },
         modelValue(newValue) {
             this.updateCurrentMetaData();
 
@@ -638,9 +637,9 @@ export default {
         this.updateCurrentMetaData();
     },
     mounted() {
-        this.d_id = this.d_id || UniqueComponentId();
         this.createResponsiveStyle();
         this.bindMatchMediaListener();
+        this.bindMatchMediaOrientationListener();
 
         if (this.inline) {
             if (!this.disabled) {
@@ -674,6 +673,7 @@ export default {
         this.unbindOutsideClickListener();
         this.unbindResizeListener();
         this.unbindMatchMediaListener();
+        this.unbindMatchMediaOrientationListener();
 
         if (this.scrollHandler) {
             this.scrollHandler.destroy();
@@ -1075,6 +1075,26 @@ export default {
                 this.matchMediaListener = null;
             }
         },
+        bindMatchMediaOrientationListener() {
+            if (!this.matchMediaOrientationListener) {
+                const query = matchMedia(`(orientation: portrait)`);
+
+                this.queryOrientation = query;
+
+                this.matchMediaOrientationListener = () => {
+                    this.alignOverlay();
+                };
+
+                this.queryOrientation.addEventListener('change', this.matchMediaOrientationListener);
+            }
+        },
+        unbindMatchMediaOrientationListener() {
+            if (this.matchMediaOrientationListener) {
+                this.queryOrientation.removeEventListener('change', this.matchMediaOrientationListener);
+                this.queryOrientation = null;
+                this.matchMediaOrientationListener = null;
+            }
+        },
         isOutsideClicked(event) {
             return !(this.$el.isSameNode(event.target) || this.isNavIconClicked(event) || this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
         },
@@ -1251,7 +1271,7 @@ export default {
         },
         formatValue(value) {
             if (typeof value === 'string') {
-                return this.dateFormat ? this.formatDate(new Date(value), this.dateFormat) : value;
+                return value;
             }
 
             let formattedValue = '';
@@ -1328,6 +1348,8 @@ export default {
                     if (lookAhead(match)) {
                         while (num.length < len) {
                             num = '0' + num;
+                            this.selectionStart = this.selectionStart + 1;
+                            this.selectionEnd = this.selectionEnd + 1;
                         }
                     }
 
@@ -2546,19 +2568,23 @@ export default {
                             if (this.timeOnly) {
                                 focusableElements[0].focus();
                             } else {
-                                let spanIndex = null;
+                                let elementIndex = focusableElements.findIndex((el) => el.tagName === 'SPAN');
 
-                                for (let i = 0; i < focusableElements.length; i++) {
-                                    if (focusableElements[i].tagName === 'SPAN') {
-                                        spanIndex = i;
-                                        break;
-                                    }
+                                if (elementIndex === -1) {
+                                    elementIndex = focusableElements.findIndex((el) => el.tagName === 'BUTTON');
                                 }
 
-                                focusableElements[spanIndex].focus();
+                                if (elementIndex !== -1) {
+                                    focusableElements[elementIndex].focus();
+                                } else {
+                                    focusableElements[0].focus();
+                                }
                             }
-                        } else if (focusedIndex === focusableElements.length - 1) focusableElements[0].focus();
-                        else focusableElements[focusedIndex + 1].focus();
+                        } else if (focusedIndex === focusableElements.length - 1) {
+                            focusableElements[0].focus();
+                        } else {
+                            focusableElements[focusedIndex + 1].focus();
+                        }
                     }
                 }
             }
@@ -2753,7 +2779,7 @@ export default {
 
             if (propValue && Array.isArray(propValue)) {
                 if (this.isRangeSelection()) {
-                    propValue = this.inline ? propValue[0] : propValue[1] || propValue[0];
+                    propValue = propValue[1] || propValue[0];
                 } else if (this.isMultipleSelection()) {
                     propValue = propValue[propValue.length - 1];
                 }
@@ -2955,7 +2981,7 @@ export default {
             return this.numberOfMonths > 1 || this.disabled;
         },
         panelId() {
-            return this.d_id + '_panel';
+            return this.$id + '_panel';
         }
     },
     components: {

package/datepicker/index.d.ts

@@ -719,9 +719,9 @@ export interface DatePickerProps {
     disabled?: boolean | undefined;
     /**
      * Specifies the input variant of the component.
-     * @defaultValue outlined
+     * @defaultValue null
      */
-    variant?: 'outlined' | 'filled' | undefined;
+    variant?: 'outlined' | 'filled' | undefined | null;
     /**
      * When present, it specifies that an input field is read-only.
      * @defaultValue false
@@ -736,10 +736,6 @@ export interface DatePickerProps {
      * @defaultValue body
      */
     appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
-    /**
-     * Identifier of the element.
-     */
-    id?: string | undefined;
     /**
      * Identifier of the underlying input element.
      */

package/datepicker/index.mjs

@@ -1,7 +1,7 @@
-import { addStyle, isTouchDevice, relativePosition, getOuterWidth, absolutePosition, find, getIndex, getAttribute, findSingle, getFocusableElements, setAttribute } from '@primeuix/utils/dom';
+import { setAttribute, getFocusableElements, find, findSingle, getIndex, getAttribute, relativePosition, getOuterWidth, absolutePosition, isTouchDevice, addStyle } from '@primeuix/utils/dom';
 import { localeComparator } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
-import { UniqueComponentId, ConnectedOverlayScrollHandler } from '@primevue/core/utils';
+import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import CalendarIcon from '@primevue/icons/calendar';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import ChevronLeftIcon from '@primevue/icons/chevronleft';
@@ -14,7 +14,7 @@ import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import BaseInput from '@primevue/core/baseinput';
 import DatePickerStyle from 'primevue/datepicker/style';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, createBlock, normalizeClass, normalizeStyle, createCommentVNode, renderSlot, createElementVNode, resolveDynamicComponent, Fragment, createVNode, withCtx, Transition, renderList, withDirectives, vShow, toDisplayString, createTextVNode, withKeys } from 'vue';
+import { resolveComponent, resolveDirective, createElementBlock, openBlock, mergeProps, createBlock, createCommentVNode, renderSlot, createVNode, normalizeStyle, normalizeClass, createElementVNode, resolveDynamicComponent, Fragment, withCtx, Transition, renderList, withDirectives, vShow, toDisplayString, createTextVNode, withKeys } from 'vue';
 
 var script$1 = {
   name: 'BaseDatePicker',
@@ -181,10 +181,6 @@ var script$1 = {
       type: String,
       "default": null
     },
-    id: {
-      type: String,
-      "default": null
-    },
     inputId: {
       type: String,
       "default": null
@@ -268,7 +264,7 @@ function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArra
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var script = {
@@ -287,6 +283,7 @@ var script = {
   outsideClickListener: null,
   resizeListener: null,
   matchMediaListener: null,
+  matchMediaOrientationListener: null,
   overlay: null,
   input: null,
   previousButton: null,
@@ -296,7 +293,6 @@ var script = {
   typeUpdate: false,
   data: function data() {
     return {
-      d_id: this.id,
       currentMonth: null,
       currentYear: null,
       currentHour: null,
@@ -307,13 +303,11 @@ var script = {
       overlayVisible: false,
       currentView: this.view,
       query: null,
-      queryMatches: false
+      queryMatches: false,
+      queryOrientation: null
     };
   },
   watch: {
-    id: function id(newValue) {
-      this.d_id = newValue || UniqueComponentId();
-    },
     modelValue: function modelValue(newValue) {
       this.updateCurrentMetaData();
       if (!this.typeUpdate && !this.inline && this.input) {
@@ -362,9 +356,9 @@ var script = {
     this.updateCurrentMetaData();
   },
   mounted: function mounted() {
-    this.d_id = this.d_id || UniqueComponentId();
     this.createResponsiveStyle();
     this.bindMatchMediaListener();
+    this.bindMatchMediaOrientationListener();
     if (this.inline) {
       if (!this.disabled) {
         this.preventFocus = true;
@@ -394,6 +388,7 @@ var script = {
     this.unbindOutsideClickListener();
     this.unbindResizeListener();
     this.unbindMatchMediaListener();
+    this.unbindMatchMediaOrientationListener();
     if (this.scrollHandler) {
       this.scrollHandler.destroy();
       this.scrollHandler = null;
@@ -790,6 +785,24 @@ var script = {
         this.matchMediaListener = null;
       }
     },
+    bindMatchMediaOrientationListener: function bindMatchMediaOrientationListener() {
+      var _this7 = this;
+      if (!this.matchMediaOrientationListener) {
+        var query = matchMedia("(orientation: portrait)");
+        this.queryOrientation = query;
+        this.matchMediaOrientationListener = function () {
+          _this7.alignOverlay();
+        };
+        this.queryOrientation.addEventListener('change', this.matchMediaOrientationListener);
+      }
+    },
+    unbindMatchMediaOrientationListener: function unbindMatchMediaOrientationListener() {
+      if (this.matchMediaOrientationListener) {
+        this.queryOrientation.removeEventListener('change', this.matchMediaOrientationListener);
+        this.queryOrientation = null;
+        this.matchMediaOrientationListener = null;
+      }
+    },
     isOutsideClicked: function isOutsideClicked(event) {
       return !(this.$el.isSameNode(event.target) || this.isNavIconClicked(event) || this.$el.contains(event.target) || this.overlay && this.overlay.contains(event.target));
     },
@@ -863,7 +876,7 @@ var script = {
       });
     },
     onDateSelect: function onDateSelect(event, dateMeta) {
-      var _this7 = this;
+      var _this8 = this;
       if (this.disabled || !dateMeta.selectable) {
         return;
       }
@@ -875,7 +888,7 @@ var script = {
       }
       if (this.isMultipleSelection() && this.isSelected(dateMeta)) {
         var newValue = this.d_value.filter(function (date) {
-          return !_this7.isDateEquals(date, dateMeta);
+          return !_this8.isDateEquals(date, dateMeta);
         });
         this.updateModel(newValue);
       } else {
@@ -894,12 +907,12 @@ var script = {
           this.input.focus();
         }
         setTimeout(function () {
-          _this7.overlayVisible = false;
+          _this8.overlayVisible = false;
         }, 150);
       }
     },
     selectDate: function selectDate(dateMeta) {
-      var _this8 = this;
+      var _this9 = this;
       var date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
       if (this.showTime) {
         this.hourFormat === '12' && this.currentHour !== 12 && this.pm ? date.setHours(this.currentHour + 12) : date.setHours(this.currentHour);
@@ -943,7 +956,7 @@ var script = {
       }
       if (this.isRangeSelection() && this.hideOnRangeSelection && modelVal[1] !== null) {
         setTimeout(function () {
-          _this8.overlayVisible = false;
+          _this9.overlayVisible = false;
         }, 150);
       }
       this.$emit('date-select', date);
@@ -965,7 +978,7 @@ var script = {
     },
     formatValue: function formatValue(value) {
       if (typeof value === 'string') {
-        return this.dateFormat ? this.formatDate(new Date(value), this.dateFormat) : value;
+        return value;
       }
       var formattedValue = '';
       if (value) {
@@ -1011,6 +1024,7 @@ var script = {
       return formattedValue;
     },
     formatDate: function formatDate(date, format) {
+      var _this10 = this;
       if (!date) {
         return '';
       }
@@ -1027,6 +1041,8 @@ var script = {
           if (lookAhead(match)) {
             while (num.length < len) {
               num = '0' + num;
+              _this10.selectionStart = _this10.selectionStart + 1;
+              _this10.selectionEnd = _this10.selectionEnd + 1;
             }
           }
           return num;
@@ -1149,11 +1165,11 @@ var script = {
       this.clearTimePickerTimer();
     },
     repeat: function repeat(event, interval, type, direction) {
-      var _this9 = this;
+      var _this11 = this;
       var i = interval || 500;
       this.clearTimePickerTimer();
       this.timePickerTimer = setTimeout(function () {
-        _this9.repeat(event, 100, type, direction);
+        _this11.repeat(event, 100, type, direction);
       }, i);
       switch (type) {
         case 0:
@@ -1283,7 +1299,7 @@ var script = {
       event.preventDefault();
     },
     updateModelTime: function updateModelTime() {
-      var _this10 = this;
+      var _this12 = this;
       this.timePickerChange = true;
       var value = this.isComparable() ? this.d_value : this.viewDate;
       if (this.isRangeSelection()) {
@@ -1309,7 +1325,7 @@ var script = {
       this.updateModel(value);
       this.$emit('date-select', value);
       setTimeout(function () {
-        return _this10.timePickerChange = false;
+        return _this12.timePickerChange = false;
       }, 0);
     },
     toggleAMPM: function toggleAMPM(event) {
@@ -1371,7 +1387,7 @@ var script = {
       }
     },
     isValidSelection: function isValidSelection(value) {
-      var _this11 = this;
+      var _this13 = this;
       if (value == null) {
         return true;
       }
@@ -1381,7 +1397,7 @@ var script = {
           isValid = false;
         }
       } else if (value.every(function (v) {
-        return _this11.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false);
+        return _this13.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false);
       })) {
         if (this.isRangeSelection()) {
           isValid = value.length > 1 && value[1] >= value[0];
@@ -2116,16 +2132,25 @@ var script = {
               if (this.timeOnly) {
                 focusableElements[0].focus();
               } else {
-                var spanIndex = null;
-                for (var i = 0; i < focusableElements.length; i++) {
-                  if (focusableElements[i].tagName === 'SPAN') {
-                    spanIndex = i;
-                    break;
-                  }
+                var elementIndex = focusableElements.findIndex(function (el) {
+                  return el.tagName === 'SPAN';
+                });
+                if (elementIndex === -1) {
+                  elementIndex = focusableElements.findIndex(function (el) {
+                    return el.tagName === 'BUTTON';
+                  });
+                }
+                if (elementIndex !== -1) {
+                  focusableElements[elementIndex].focus();
+                } else {
+                  focusableElements[0].focus();
                 }
-                focusableElements[spanIndex].focus();
               }
-            } else if (focusedIndex === focusableElements.length - 1) focusableElements[0].focus();else focusableElements[focusedIndex + 1].focus();
+            } else if (focusedIndex === focusableElements.length - 1) {
+              focusableElements[0].focus();
+            } else {
+              focusableElements[focusedIndex + 1].focus();
+            }
           }
         }
       }
@@ -2296,7 +2321,7 @@ var script = {
       var propValue = this.d_value;
       if (propValue && Array.isArray(propValue)) {
         if (this.isRangeSelection()) {
-          propValue = this.inline ? propValue[0] : propValue[1] || propValue[0];
+          propValue = propValue[1] || propValue[0];
         } else if (this.isMultipleSelection()) {
           propValue = propValue[propValue.length - 1];
         }
@@ -2416,20 +2441,20 @@ var script = {
       return this.dateFormat || this.$primevue.config.locale.dateFormat;
     },
     monthPickerValues: function monthPickerValues() {
-      var _this12 = this;
+      var _this14 = this;
       var monthPickerValues = [];
       var isSelectableMonth = function isSelectableMonth(baseMonth) {
-        if (_this12.minDate) {
-          var minMonth = _this12.minDate.getMonth();
-          var minYear = _this12.minDate.getFullYear();
-          if (_this12.currentYear < minYear || _this12.currentYear === minYear && baseMonth < minMonth) {
+        if (_this14.minDate) {
+          var minMonth = _this14.minDate.getMonth();
+          var minYear = _this14.minDate.getFullYear();
+          if (_this14.currentYear < minYear || _this14.currentYear === minYear && baseMonth < minMonth) {
             return false;
           }
         }
-        if (_this12.maxDate) {
-          var maxMonth = _this12.maxDate.getMonth();
-          var maxYear = _this12.maxDate.getFullYear();
-          if (_this12.currentYear > maxYear || _this12.currentYear === maxYear && baseMonth > maxMonth) {
+        if (_this14.maxDate) {
+          var maxMonth = _this14.maxDate.getMonth();
+          var maxYear = _this14.maxDate.getFullYear();
+          if (_this14.currentYear > maxYear || _this14.currentYear === maxYear && baseMonth > maxMonth) {
             return false;
           }
         }
@@ -2444,15 +2469,15 @@ var script = {
       return monthPickerValues;
     },
     yearPickerValues: function yearPickerValues() {
-      var _this13 = this;
+      var _this15 = this;
       var yearPickerValues = [];
       var base = this.currentYear - this.currentYear % 10;
       var isSelectableYear = function isSelectableYear(baseYear) {
-        if (_this13.minDate) {
-          if (_this13.minDate.getFullYear() > baseYear) return false;
+        if (_this15.minDate) {
+          if (_this15.minDate.getFullYear() > baseYear) return false;
         }
-        if (_this13.maxDate) {
-          if (_this13.maxDate.getFullYear() < baseYear) return false;
+        if (_this15.maxDate) {
+          if (_this15.maxDate.getFullYear() < baseYear) return false;
         }
         return true;
       };
@@ -2492,7 +2517,7 @@ var script = {
       return this.numberOfMonths > 1 || this.disabled;
     },
     panelId: function panelId() {
-      return this.d_id + '_panel';
+      return this.$id + '_panel';
     }
   },
   components: {
@@ -2531,7 +2556,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _directive_ripple = resolveDirective("ripple");
   return openBlock(), createElementBlock("span", mergeProps({
     ref: "container",
-    id: $data.d_id,
+    id: _ctx.$id,
     "class": _ctx.cx('root'),
     style: _ctx.sx('root')
   }, _ctx.ptmi('root')), [!_ctx.inline ? (openBlock(), createBlock(_component_InputText, {
@@ -3113,6 +3138,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "class": _ctx.cx('pcDecrementButton'),
             "aria-label": _ctx.$primevue.config.locale.prevMinute,
             disabled: _ctx.disabled,
+            unstyled: _ctx.unstyled,
             onMousedown: _cache[30] || (_cache[30] = function ($event) {
               return $options.onTimePickerElementMouseDown($event, 1, -1);
             }),
@@ -3146,7 +3172,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               })];
             }),
             _: 3
-          }, 16, ["class", "aria-label", "disabled", "onKeydown", "pt"])], 16), _ctx.showSeconds ? (openBlock(), createElementBlock("div", mergeProps({
+          }, 16, ["class", "aria-label", "disabled", "unstyled", "onKeydown", "pt"])], 16), _ctx.showSeconds ? (openBlock(), createElementBlock("div", mergeProps({
             key: 0,
             "class": _ctx.cx('separatorContainer')
           }, _ctx.ptm('separatorContainer'), {