primevue 4.1.1 → 4.2.0

package/dataview/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/dataview/style/DataViewStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-dataview {\n    border-color: ${dt('dataview.border.color')};\n    border-width: ${dt('dataview.border.width')};\n    border-style: solid;\n    border-radius: ${dt('dataview.border.radius')};\n    padding: ${dt('dataview.padding')};\n}\n\n.p-dataview-header {\n    background: ${dt('dataview.header.background')};\n    color: ${dt('dataview.header.color')};\n    border-color: ${dt('dataview.header.border.color')};\n    border-width: ${dt('dataview.header.border.width')};\n    border-style: solid;\n    padding: ${dt('dataview.header.padding')};\n    border-radius: ${dt('dataview.header.border.radius')};\n}\n\n.p-dataview-content {\n    background: ${dt('dataview.content.background')};\n    border-color: ${dt('dataview.content.border.color')};\n    border-width: ${dt('dataview.content.border.width')};\n    border-style: solid;\n    color: ${dt('dataview.content.color')};\n    padding: ${dt('dataview.content.padding')};\n    border-radius: ${dt('dataview.content.border.radius')};\n}\n\n.p-dataview-footer {\n    background: ${dt('dataview.footer.background')};\n    color: ${dt('dataview.footer.color')};\n    border-color: ${dt('dataview.footer.border.color')};\n    border-width: ${dt('dataview.footer.border.width')};\n    border-style: solid;\n    padding: ${dt('dataview.footer.padding')};\n    border-radius: ${dt('dataview.footer.border.radius')};\n}\n\n.p-dataview-paginator-top {\n    border-width: ${dt('dataview.paginator.top.border.width')};\n    border-color: ${dt('dataview.paginator.top.border.color')};\n    border-style: solid;\n}\n\n.p-dataview-paginator-bottom {\n    border-width: ${dt('dataview.paginator.bottom.border.width')};\n    border-color: ${dt('dataview.paginator.bottom.border.color')};\n    border-style: solid;\n}\n`;\n\nconst classes = {\n    root: ({ props }) => [\n        'p-dataview p-component',\n        {\n            'p-dataview-list': props.layout === 'list',\n            'p-dataview-grid': props.layout === 'grid'\n        }\n    ],\n    header: 'p-dataview-header',\n    pcPaginator: ({ position }) => 'p-dataview-paginator-' + position,\n    content: 'p-dataview-content',\n    emptyMessage: 'p-dataview-empty-message', // TODO: remove?\n    footer: 'p-dataview-footer'\n};\n\nexport default BaseStyle.extend({\n    name: 'dataview',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","_ref2","props","layout","header","pcPaginator","_ref3","position","content","emptyMessage","footer","BaseStyle","extend","name"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/dataview/style/DataViewStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-dataview {\n    border-color: ${dt('dataview.border.color')};\n    border-width: ${dt('dataview.border.width')};\n    border-style: solid;\n    border-radius: ${dt('dataview.border.radius')};\n    padding: ${dt('dataview.padding')};\n}\n\n.p-dataview-header {\n    background: ${dt('dataview.header.background')};\n    color: ${dt('dataview.header.color')};\n    border-color: ${dt('dataview.header.border.color')};\n    border-width: ${dt('dataview.header.border.width')};\n    border-style: solid;\n    padding: ${dt('dataview.header.padding')};\n    border-radius: ${dt('dataview.header.border.radius')};\n}\n\n.p-dataview-content {\n    background: ${dt('dataview.content.background')};\n    border-color: ${dt('dataview.content.border.color')};\n    border-width: ${dt('dataview.content.border.width')};\n    border-style: solid;\n    color: ${dt('dataview.content.color')};\n    padding: ${dt('dataview.content.padding')};\n    border-radius: ${dt('dataview.content.border.radius')};\n}\n\n.p-dataview-footer {\n    background: ${dt('dataview.footer.background')};\n    color: ${dt('dataview.footer.color')};\n    border-color: ${dt('dataview.footer.border.color')};\n    border-width: ${dt('dataview.footer.border.width')};\n    border-style: solid;\n    padding: ${dt('dataview.footer.padding')};\n    border-radius: ${dt('dataview.footer.border.radius')};\n}\n\n.p-dataview-paginator-top {\n    border-width: ${dt('dataview.paginator.top.border.width')};\n    border-color: ${dt('dataview.paginator.top.border.color')};\n    border-style: solid;\n}\n\n.p-dataview-paginator-bottom {\n    border-width: ${dt('dataview.paginator.bottom.border.width')};\n    border-color: ${dt('dataview.paginator.bottom.border.color')};\n    border-style: solid;\n}\n`;\n\nconst classes = {\n    root: ({ props }) => [\n        'p-dataview p-component',\n        {\n            'p-dataview-list': props.layout === 'list',\n            'p-dataview-grid': props.layout === 'grid'\n        }\n    ],\n    header: 'p-dataview-header',\n    pcPaginator: ({ position }) => 'p-dataview-paginator-' + position,\n    content: 'p-dataview-content',\n    emptyMessage: 'p-dataview-empty-message', // TODO: remove?\n    footer: 'p-dataview-footer'\n};\n\nexport default BaseStyle.extend({\n    name: 'dataview',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","_ref2","props","layout","header","pcPaginator","_ref3","position","content","emptyMessage","footer","BaseStyle","extend","name"],"mappings":"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"}

package/datepicker/BaseDatePicker.vue

@@ -1,12 +1,11 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import DatePickerStyle from 'primevue/datepicker/style';
 
 export default {
     name: 'BaseDatePicker',
-    extends: BaseComponent,
+    extends: BaseInput,
     props: {
-        modelValue: null,
         selectionMode: {
             type: String,
             default: 'single'
@@ -160,18 +159,6 @@ export default {
             type: [String, Object],
             default: 'body'
         },
-        variant: {
-            type: String,
-            default: null
-        },
-        invalid: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
         readonly: {
             type: Boolean,
             default: false
@@ -180,10 +167,6 @@ export default {
             type: String,
             default: null
         },
-        name: {
-            type: String,
-            default: null
-        },
         id: {
             type: String,
             default: null
@@ -232,10 +215,6 @@ export default {
                 return { severity: 'secondary', text: true, rounded: true };
             }
         },
-        fluid: {
-            type: Boolean,
-            default: null
-        },
         ariaLabelledby: {
             type: String,
             default: null

package/datepicker/DatePicker.vue

@@ -10,6 +10,7 @@
             :value="inputFieldValue"
             :placeholder="placeholder"
             :name="name"
+            :size="size"
             :invalid="invalid"
             :variant="variant"
             :fluid="fluid"
@@ -32,7 +33,7 @@
             @keydown="onKeyDown"
             :pt="ptm('pcInputText')"
         />
-        <slot v-if="showIcon && iconDisplay === 'button' && !inline" name="dropdownbutton">
+        <slot v-if="showIcon && iconDisplay === 'button' && !inline" name="dropdownbutton" :toggleCallback="onButtonClick">
             <button
                 :class="cx('dropdown')"
                 :disabled="disabled"
@@ -533,7 +534,7 @@
 
 <script>
 import { absolutePosition, addStyle, find, findSingle, getAttribute, getFocusableElements, getIndex, getOuterWidth, isTouchDevice, relativePosition, setAttribute } from '@primeuix/utils/dom';
-import { isEmpty, localeComparator } from '@primeuix/utils/object';
+import { localeComparator } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
 import CalendarIcon from '@primevue/icons/calendar';
@@ -552,7 +553,7 @@ export default {
     name: 'DatePicker',
     extends: BaseDatePicker,
     inheritAttrs: false,
-    emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click', 'focus', 'blur', 'keydown'],
+    emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'today-click', 'clear-click', 'focus', 'blur', 'keydown'],
     inject: {
         $pcFluid: { default: null }
     },
@@ -687,20 +688,20 @@ export default {
     },
     methods: {
         isComparable() {
-            return this.modelValue != null && typeof this.modelValue !== 'string';
+            return this.d_value != null && typeof this.d_value !== 'string';
         },
         isSelected(dateMeta) {
             if (!this.isComparable()) {
                 return false;
             }
 
-            if (this.modelValue) {
+            if (this.d_value) {
                 if (this.isSingleSelection()) {
-                    return this.isDateEquals(this.modelValue, dateMeta);
+                    return this.isDateEquals(this.d_value, dateMeta);
                 } else if (this.isMultipleSelection()) {
                     let selected = false;
 
-                    for (let date of this.modelValue) {
+                    for (let date of this.d_value) {
                         selected = this.isDateEquals(date, dateMeta);
 
                         if (selected) {
@@ -710,9 +711,9 @@ export default {
 
                     return selected;
                 } else if (this.isRangeSelection()) {
-                    if (this.modelValue[1]) return this.isDateEquals(this.modelValue[0], dateMeta) || this.isDateEquals(this.modelValue[1], dateMeta) || this.isDateBetween(this.modelValue[0], this.modelValue[1], dateMeta);
+                    if (this.d_value[1]) return this.isDateEquals(this.d_value[0], dateMeta) || this.isDateEquals(this.d_value[1], dateMeta) || this.isDateBetween(this.d_value[0], this.d_value[1], dateMeta);
                     else {
-                        return this.isDateEquals(this.modelValue[0], dateMeta);
+                        return this.isDateEquals(this.d_value[0], dateMeta);
                     }
                 }
             }
@@ -723,33 +724,33 @@ export default {
             if (!this.isComparable()) return false;
 
             if (this.isMultipleSelection()) {
-                return this.modelValue.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === this.currentYear);
+                return this.d_value.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === this.currentYear);
             } else if (this.isRangeSelection()) {
-                if (!this.modelValue[1]) {
-                    return this.modelValue[0]?.getFullYear() === this.currentYear && this.modelValue[0]?.getMonth() === month;
+                if (!this.d_value[1]) {
+                    return this.d_value[0]?.getFullYear() === this.currentYear && this.d_value[0]?.getMonth() === month;
                 } else {
                     const currentDate = new Date(this.currentYear, month, 1);
-                    const startDate = new Date(this.modelValue[0].getFullYear(), this.modelValue[0].getMonth(), 1);
-                    const endDate = new Date(this.modelValue[1].getFullYear(), this.modelValue[1].getMonth(), 1);
+                    const startDate = new Date(this.d_value[0].getFullYear(), this.d_value[0].getMonth(), 1);
+                    const endDate = new Date(this.d_value[1].getFullYear(), this.d_value[1].getMonth(), 1);
 
                     return currentDate >= startDate && currentDate <= endDate;
                 }
             } else {
-                return this.modelValue.getMonth() === month && this.modelValue.getFullYear() === this.currentYear;
+                return this.d_value.getMonth() === month && this.d_value.getFullYear() === this.currentYear;
             }
         },
         isYearSelected(year) {
             if (!this.isComparable()) return false;
 
             if (this.isMultipleSelection()) {
-                return this.modelValue.some((currentValue) => currentValue.getFullYear() === year);
+                return this.d_value.some((currentValue) => currentValue.getFullYear() === year);
             } else if (this.isRangeSelection()) {
-                const start = this.modelValue[0] ? this.modelValue[0].getFullYear() : null;
-                const end = this.modelValue[1] ? this.modelValue[1].getFullYear() : null;
+                const start = this.d_value[0] ? this.d_value[0].getFullYear() : null;
+                const end = this.d_value[1] ? this.d_value[1].getFullYear() : null;
 
                 return start === year || end === year || (start < year && end > year);
             } else {
-                return this.modelValue.getFullYear() === year;
+                return this.d_value.getFullYear() === year;
             }
         },
         isDateEquals(value, dateMeta) {
@@ -1148,7 +1149,7 @@ export default {
             }
 
             if (this.isMultipleSelection() && this.isSelected(dateMeta)) {
-                let newValue = this.modelValue.filter((date) => !this.isDateEquals(date, dateMeta));
+                let newValue = this.d_value.filter((date) => !this.isDateEquals(date, dateMeta));
 
                 this.updateModel(newValue);
             } else {
@@ -1202,11 +1203,11 @@ export default {
             if (this.isSingleSelection()) {
                 modelVal = date;
             } else if (this.isMultipleSelection()) {
-                modelVal = this.modelValue ? [...this.modelValue, date] : [date];
+                modelVal = this.d_value ? [...this.d_value, date] : [date];
             } else if (this.isRangeSelection()) {
-                if (this.modelValue && this.modelValue.length) {
-                    let startDate = this.modelValue[0];
-                    let endDate = this.modelValue[1];
+                if (this.d_value && this.d_value.length) {
+                    let startDate = this.d_value[0];
+                    let endDate = this.d_value[1];
 
                     if (!endDate && date.getTime() >= startDate.getTime()) {
                         endDate = date;
@@ -1234,10 +1235,10 @@ export default {
             this.$emit('date-select', date);
         },
         updateModel(value) {
-            this.$emit('update:modelValue', value);
+            this.writeValue(value);
         },
         shouldSelectDate() {
-            if (this.isMultipleSelection()) return this.maxDateCount != null ? this.maxDateCount > (this.modelValue ? this.modelValue.length : 0) : true;
+            if (this.isMultipleSelection()) return this.maxDateCount != null ? this.maxDateCount > (this.d_value ? this.d_value.length : 0) : true;
             else return true;
         },
         isSingleSelection() {
@@ -1499,15 +1500,15 @@ export default {
             return hours;
         },
         validateTime(hour, minute, second, pm) {
-            let value = this.isComparable() ? this.modelValue : this.viewDate;
+            let value = this.isComparable() ? this.d_value : this.viewDate;
             const convertedHour = this.convertTo24Hour(hour, pm);
 
             if (this.isRangeSelection()) {
-                value = this.modelValue[1] || this.modelValue[0];
+                value = this.d_value[1] || this.d_value[0];
             }
 
             if (this.isMultipleSelection()) {
-                value = this.modelValue[this.modelValue.length - 1];
+                value = this.d_value[this.d_value.length - 1];
             }
 
             const valueDateString = value ? value.toDateString() : null;
@@ -1635,14 +1636,14 @@ export default {
         },
         updateModelTime() {
             this.timePickerChange = true;
-            let value = this.isComparable() ? this.modelValue : this.viewDate;
+            let value = this.isComparable() ? this.d_value : this.viewDate;
 
             if (this.isRangeSelection()) {
-                value = this.modelValue[1] || this.modelValue[0];
+                value = this.d_value[1] || this.d_value[0];
             }
 
             if (this.isMultipleSelection()) {
-                value = this.modelValue[this.modelValue.length - 1];
+                value = this.d_value[this.d_value.length - 1];
             }
 
             value = value ? new Date(value.getTime()) : new Date();
@@ -1658,12 +1659,12 @@ export default {
             value.setSeconds(this.currentSecond);
 
             if (this.isRangeSelection()) {
-                if (this.modelValue[1]) value = [this.modelValue[0], value];
+                if (this.d_value[1]) value = [this.d_value[0], value];
                 else value = [value, null];
             }
 
             if (this.isMultipleSelection()) {
-                value = [...this.modelValue.slice(0, -1), value];
+                value = [...this.d_value.slice(0, -1), value];
             }
 
             this.updateModel(value);
@@ -2613,9 +2614,10 @@ export default {
         },
         onBlur(event) {
             this.$emit('blur', { originalEvent: event, value: event.target.value });
+            this.formField.onBlur?.();
 
             this.focused = false;
-            event.target.value = this.formatValue(this.modelValue);
+            event.target.value = this.formatValue(this.d_value);
         },
         onKeyDown(event) {
             if (event.code === 'ArrowDown' && this.overlay) {
@@ -2745,7 +2747,7 @@ export default {
     },
     computed: {
         viewDate() {
-            let propValue = this.modelValue;
+            let propValue = this.d_value;
 
             if (propValue && Array.isArray(propValue)) {
                 if (this.isRangeSelection()) {
@@ -2772,7 +2774,7 @@ export default {
             }
         },
         inputFieldValue() {
-            return this.formatValue(this.modelValue);
+            return this.formatValue(this.d_value);
         },
         months() {
             let months = [];
@@ -2948,9 +2950,6 @@ export default {
         },
         panelId() {
             return this.d_id + '_panel';
-        },
-        hasFluid() {
-            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     components: {

package/datepicker/index.d.ts

@@ -517,6 +517,14 @@ export interface DatePickerProps {
      * @defaultValue null
      */
     modelValue?: Date | Array<Date> | Array<Date | null> | undefined | null;
+    /**
+     * The default value for the input when not controlled by `modelValue`.
+     */
+    defaultValue?: Date | Array<Date> | Array<Date | null> | undefined | null;
+    /**
+     * The name attribute for the element, typically used in form submissions.
+     */
+    name?: string | undefined;
     /**
      * Defines the quantity of the selection.
      * @defaultValue single
@@ -695,6 +703,10 @@ export interface DatePickerProps {
      * @defaultValue true
      */
     manualInput?: boolean | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
@@ -719,10 +731,6 @@ export interface DatePickerProps {
      * Placeholder text for the input.
      */
     placeholder?: string | undefined;
-    /**
-     * Name of the element.
-     */
-    name?: string | undefined;
     /**
      * A valid query selector or an HTMLElement to specify where the overlay gets attached.
      * @defaultValue body
@@ -789,6 +797,10 @@ export interface DatePickerProps {
      * Establishes a string value that labels the component.
      */
     ariaLabel?: string | undefined;
+    /**
+     * Form control object, typically used for handling validation and form state.
+     */
+    formControl?: Record<string, any> | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
@@ -965,6 +977,11 @@ export interface DatePickerEmitsOptions {
      * @param {string | Date | string[] | Date[] | undefined} value - New value.
      */
     'update:modelValue'(value: Date | Array<Date> | Array<Date | null> | undefined | null): void;
+    /**
+     * Emitted when the value changes in uncontrolled mode.
+     * @param {string | Date | string[] | Date[] | undefined} value - New value.
+     */
+    'value-change'(value: Date | Array<Date> | Array<Date | null> | undefined | null): void;
     /**
      * Callback to invoke when input field is being typed.
      * @param {Event} event - Browser event