primevue 4.1.1 → 4.2.0

package/select/BaseSelect.vue

@@ -1,12 +1,11 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import SelectStyle from 'primevue/select/style';
 
 export default {
     name: 'BaseSelect',
-    extends: BaseComponent,
+    extends: BaseInput,
     props: {
-        modelValue: null,
         options: Array,
         optionLabel: [String, Function],
         optionValue: [String, Function],
@@ -33,27 +32,11 @@ export default {
             type: String,
             default: null
         },
-        variant: {
-            type: String,
-            default: null
-        },
-        invalid: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
         dataKey: null,
         showClear: {
             type: Boolean,
             default: false
         },
-        fluid: {
-            type: Boolean,
-            default: null
-        },
         inputId: {
             type: String,
             default: null

package/select/Select.vue

@@ -46,7 +46,7 @@
             @keydown="onKeyDown"
             v-bind="ptm('label')"
         >
-            <slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label ?? 'empty' }}</slot>
+            <slot name="value" :value="d_value" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label ?? 'empty' }}</slot>
         </span>
         <slot v-if="isClearIconVisible" name="clearicon" :class="cx('clearIcon')" :clearCallback="onClearClick">
             <component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="ptm('clearIcon')" data-pc-section="clearicon" />
@@ -74,7 +74,7 @@
                         :data-p-hidden-accessible="true"
                         :data-p-hidden-focusable="true"
                     ></span>
-                    <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
+                    <slot name="header" :value="d_value" :options="visibleOptions"></slot>
                     <div v-if="filter" :class="cx('header')" v-bind="ptm('header')">
                         <IconField :unstyled="unstyled" :pt="ptm('pcFilterContainer')">
                             <InputText
@@ -165,7 +165,7 @@
                             </template>
                         </VirtualScroller>
                     </div>
-                    <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
+                    <slot name="footer" :value="d_value" :options="visibleOptions"></slot>
                     <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenEmptyMessage')" :data-p-hidden-accessible="true">
                         {{ emptyMessageText }}
                     </span>
@@ -191,7 +191,7 @@
 
 <script>
 import { absolutePosition, addStyle, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, getOuterWidth, isAndroid, isTouchDevice, isVisible, relativePosition } from '@primeuix/utils/dom';
-import { equals, findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
+import { equals, findLastIndex, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { FilterService } from '@primevue/core/api';
 import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
@@ -214,10 +214,7 @@ export default {
     name: 'Select',
     extends: BaseSelect,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter'],
-    inject: {
-        $pcFluid: { default: null }
-    },
+    emits: ['change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter'],
     outsideClickListener: null,
     scrollHandler: null,
     resizeListener: null,
@@ -358,6 +355,7 @@ export default {
             this.focusedOptionIndex = -1;
             this.searchValue = '';
             this.$emit('blur', event);
+            this.formField.onBlur?.(event);
         },
         onKeyDown(event) {
             if (this.disabled || isAndroid()) {
@@ -810,7 +808,7 @@ export default {
             return this.isValidOption(option) && this.isSelected(option);
         },
         isSelected(option) {
-            return equals(this.modelValue, this.getOptionValue(option), this.equalityKey);
+            return equals(this.d_value, this.getOptionValue(option), this.equalityKey);
         },
         findFirstOptionIndex() {
             return this.visibleOptions.findIndex((option) => this.isValidOption(option));
@@ -829,7 +827,7 @@ export default {
             return matchedOptionIndex > -1 ? matchedOptionIndex : index;
         },
         findSelectedOptionIndex() {
-            return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
+            return this.$filled ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
         },
         findFirstFocusedOptionIndex() {
             const selectedIndex = this.findSelectedOptionIndex();
@@ -902,13 +900,13 @@ export default {
             });
         },
         autoUpdateModel() {
-            if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
+            if (this.selectOnFocus && this.autoOptionFocus && !this.$filled) {
                 this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
                 this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex], false);
             }
         },
         updateModel(event, value) {
-            this.$emit('update:modelValue', value);
+            this.writeValue(value, event);
             this.$emit('change', { originalEvent: event, value });
         },
         flatOptions(options) {
@@ -959,8 +957,9 @@ export default {
 
             return options;
         },
+        // @deprecated use $filled instead
         hasSelectedOption() {
-            return isNotEmpty(this.modelValue);
+            return this.$filled;
         },
         label() {
             const selectedOptionIndex = this.findSelectedOptionIndex();
@@ -970,7 +969,7 @@ export default {
         editableInputValue() {
             const selectedOptionIndex = this.findSelectedOptionIndex();
 
-            return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions[selectedOptionIndex]) : this.modelValue || '';
+            return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions[selectedOptionIndex]) : this.d_value || '';
         },
         equalityKey() {
             return this.optionValue ? null : this.dataKey;
@@ -997,7 +996,7 @@ export default {
             return this.emptySelectionMessage || this.$primevue.config.locale.emptySelectionMessage || '';
         },
         selectedMessageText() {
-            return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
+            return this.$filled ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
         },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
@@ -1006,13 +1005,10 @@ export default {
             return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;
         },
         isClearIconVisible() {
-            return this.showClear && this.modelValue != null && isNotEmpty(this.options);
+            return this.showClear && this.d_value != null && isNotEmpty(this.options);
         },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;
-        },
-        hasFluid() {
-            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     directives: {

package/select/index.d.ts

@@ -291,6 +291,14 @@ export interface SelectProps {
      * Value of the component.
      */
     modelValue?: any;
+    /**
+     * The default value for the input when not controlled by `modelValue`.
+     */
+    defaultValue?: any;
+    /**
+     * The name attribute for the element, typically used in form submissions.
+     */
+    name?: string | undefined;
     /**
      * An array of select items to display as the available options.
      */
@@ -351,6 +359,10 @@ export interface SelectProps {
      * Default text to display when no option is selected.
      */
     placeholder?: string | 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
@@ -532,6 +544,10 @@ export interface SelectProps {
      * Identifier of the underlying input element.
      */
     ariaLabelledby?: 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.
      */
@@ -726,6 +742,11 @@ export interface SelectEmitsOptions {
      * @param {*} value - New value.
      */
     'update:modelValue'(value: any): void;
+    /**
+     * Emitted when the value changes in uncontrolled mode.
+     * @param {*} value - New value.
+     */
+    'value-change'(value: any): void;
     /**
      * Callback to invoke on value change.
      * @param {SelectChangeEvent} event - Custom change event.

package/select/index.mjs

@@ -1,5 +1,5 @@
 import { focus, isAndroid, getFirstFocusableElement, getLastFocusableElement, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice, isVisible, getFocusableElements, findSingle } from '@primeuix/utils/dom';
-import { resolveFieldData, isPrintableCharacter, isNotEmpty, equals, findLastIndex, isEmpty } from '@primeuix/utils/object';
+import { resolveFieldData, isPrintableCharacter, isNotEmpty, equals, findLastIndex } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { FilterService } from '@primevue/core/api';
 import { UniqueComponentId, ConnectedOverlayScrollHandler } from '@primevue/core/utils';
@@ -16,15 +16,14 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import VirtualScroller from 'primevue/virtualscroller';
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import SelectStyle from 'primevue/select/style';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, renderSlot, createTextVNode, toDisplayString, normalizeClass, createBlock, resolveDynamicComponent, createCommentVNode, createElementVNode, createVNode, withCtx, Transition, normalizeProps, createSlots, Fragment, renderList, withDirectives } from 'vue';
 
 var script$1 = {
   name: 'BaseSelect',
-  "extends": BaseComponent,
+  "extends": BaseInput,
   props: {
-    modelValue: null,
     options: Array,
     optionLabel: [String, Function],
     optionValue: [String, Function],
@@ -51,27 +50,11 @@ var script$1 = {
       type: String,
       "default": null
     },
-    variant: {
-      type: String,
-      "default": null
-    },
-    invalid: {
-      type: Boolean,
-      "default": false
-    },
-    disabled: {
-      type: Boolean,
-      "default": false
-    },
     dataKey: null,
     showClear: {
       type: Boolean,
       "default": false
     },
-    fluid: {
-      type: Boolean,
-      "default": null
-    },
     inputId: {
       type: String,
       "default": null
@@ -230,12 +213,7 @@ var script = {
   name: 'Select',
   "extends": script$1,
   inheritAttrs: false,
-  emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter'],
-  inject: {
-    $pcFluid: {
-      "default": null
-    }
-  },
+  emits: ['change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter'],
   outsideClickListener: null,
   scrollHandler: null,
   resizeListener: null,
@@ -367,10 +345,12 @@ var script = {
       this.$emit('focus', event);
     },
     onBlur: function onBlur(event) {
+      var _this$formField$onBlu, _this$formField;
       this.focused = false;
       this.focusedOptionIndex = -1;
       this.searchValue = '';
       this.$emit('blur', event);
+      (_this$formField$onBlu = (_this$formField = this.formField).onBlur) === null || _this$formField$onBlu === void 0 || _this$formField$onBlu.call(_this$formField, event);
     },
     onKeyDown: function onKeyDown(event) {
       if (this.disabled || isAndroid()) {
@@ -775,7 +755,7 @@ var script = {
       return this.isValidOption(option) && this.isSelected(option);
     },
     isSelected: function isSelected(option) {
-      return equals(this.modelValue, this.getOptionValue(option), this.equalityKey);
+      return equals(this.d_value, this.getOptionValue(option), this.equalityKey);
     },
     findFirstOptionIndex: function findFirstOptionIndex() {
       var _this9 = this;
@@ -805,7 +785,7 @@ var script = {
     },
     findSelectedOptionIndex: function findSelectedOptionIndex() {
       var _this13 = this;
-      return this.hasSelectedOption ? this.visibleOptions.findIndex(function (option) {
+      return this.$filled ? this.visibleOptions.findIndex(function (option) {
         return _this13.isValidSelectedOption(option);
       }) : -1;
     },
@@ -880,13 +860,13 @@ var script = {
       });
     },
     autoUpdateModel: function autoUpdateModel() {
-      if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
+      if (this.selectOnFocus && this.autoOptionFocus && !this.$filled) {
         this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
         this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex], false);
       }
     },
     updateModel: function updateModel(event, value) {
-      this.$emit('update:modelValue', value);
+      this.writeValue(value, event);
       this.$emit('change', {
         originalEvent: event,
         value: value
@@ -940,8 +920,9 @@ var script = {
       }
       return options;
     },
+    // @deprecated use $filled instead
     hasSelectedOption: function hasSelectedOption() {
-      return isNotEmpty(this.modelValue);
+      return this.$filled;
     },
     label: function label() {
       var selectedOptionIndex = this.findSelectedOptionIndex();
@@ -949,7 +930,7 @@ var script = {
     },
     editableInputValue: function editableInputValue() {
       var selectedOptionIndex = this.findSelectedOptionIndex();
-      return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions[selectedOptionIndex]) : this.modelValue || '';
+      return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions[selectedOptionIndex]) : this.d_value || '';
     },
     equalityKey: function equalityKey() {
       return this.optionValue ? null : this.dataKey;
@@ -976,7 +957,7 @@ var script = {
       return this.emptySelectionMessage || this.$primevue.config.locale.emptySelectionMessage || '';
     },
     selectedMessageText: function selectedMessageText() {
-      return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
+      return this.$filled ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
     },
     focusedOptionId: function focusedOptionId() {
       return this.focusedOptionIndex !== -1 ? "".concat(this.id, "_").concat(this.focusedOptionIndex) : null;
@@ -988,13 +969,10 @@ var script = {
       }).length;
     },
     isClearIconVisible: function isClearIconVisible() {
-      return this.showClear && this.modelValue != null && isNotEmpty(this.options);
+      return this.showClear && this.d_value != null && isNotEmpty(this.options);
     },
     virtualScrollerDisabled: function virtualScrollerDisabled() {
       return !this.virtualScrollerOptions;
-    },
-    hasFluid: function hasFluid() {
-      return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
     }
   },
   directives: {
@@ -1096,7 +1074,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return $options.onKeyDown && $options.onKeyDown.apply($options, arguments);
     })
   }, _ctx.ptm('label')), [renderSlot(_ctx.$slots, "value", {
-    value: _ctx.modelValue,
+    value: _ctx.d_value,
     placeholder: _ctx.placeholder
   }, function () {
     var _$options$label;
@@ -1173,7 +1151,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "data-p-hidden-accessible": true,
             "data-p-hidden-focusable": true
           }), null, 16), renderSlot(_ctx.$slots, "header", {
-            value: _ctx.modelValue,
+            value: _ctx.d_value,
             options: $options.visibleOptions
           }), _ctx.filter ? (openBlock(), createElementBlock("div", mergeProps({
             key: 0,
@@ -1351,7 +1329,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             key: "0"
           } : undefined]), 1040, ["items", "style", "disabled", "pt"])], 16), renderSlot(_ctx.$slots, "footer", {
-            value: _ctx.modelValue,
+            value: _ctx.d_value,
             options: $options.visibleOptions
           }), !_ctx.options || _ctx.options && _ctx.options.length === 0 ? (openBlock(), createElementBlock("span", mergeProps({
             key: 1,