primevue 4.1.1 → 4.2.0

package/treeselect/BaseTreeSelect.vue

@@ -1,12 +1,11 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import TreeSelectStyle from 'primevue/treeselect/style';
 
 export default {
     name: 'BaseTreeSelect',
-    extends: BaseComponent,
+    extends: BaseInput,
     props: {
-        modelValue: null,
         options: Array,
         scrollHeight: {
             type: String,
@@ -16,18 +15,6 @@ export default {
             type: String,
             default: null
         },
-        invalid: {
-            type: Boolean,
-            default: false
-        },
-        variant: {
-            type: String,
-            default: null
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
         tabindex: {
             type: Number,
             default: null
@@ -36,6 +23,14 @@ export default {
             type: String,
             default: 'single'
         },
+        selectedItemsLabel: {
+            type: String,
+            default: null
+        },
+        maxSelectedLabels: {
+            type: Number,
+            default: null
+        },
         appendTo: {
             type: [String, Object],
             default: 'body'
@@ -52,10 +47,6 @@ export default {
             type: Boolean,
             default: false
         },
-        fluid: {
-            type: Boolean,
-            default: null
-        },
         loading: {
             type: Boolean,
             default: false
@@ -68,6 +59,14 @@ export default {
             type: String,
             default: 'mask'
         },
+        showClear: {
+            type: Boolean,
+            default: false
+        },
+        clearIcon: {
+            type: String,
+            default: undefined
+        },
         filter: {
             type: Boolean,
             default: false

package/treeselect/TreeSelect.vue

@@ -29,14 +29,22 @@
                         {{ label || 'empty' }}
                     </template>
                     <template v-else-if="display === 'chip'">
-                        <div v-for="node of selectedNodes" :key="node.key" :class="cx('chipItem')" v-bind="ptm('chipItem')">
-                            <Chip :class="cx('pcChip')" :label="node.label" :unstyled="unstyled" :pt="ptm('pcChip')" />
-                        </div>
-                        <template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
+                        <template v-if="chipSelectedItems">
+                            <span>{{ label }}</span>
+                        </template>
+                        <template v-else>
+                            <div v-for="node of selectedNodes" :key="node.key" :class="cx('chipItem')" v-bind="ptm('chipItem')">
+                                <Chip :class="cx('pcChip')" :label="node.label" :unstyled="unstyled" :pt="ptm('pcChip')" />
+                            </div>
+                            <template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
+                        </template>
                     </template>
                 </slot>
             </div>
         </div>
+        <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" />
+        </slot>
         <div :class="cx('dropdown')" role="button" aria-haspopup="tree" :aria-expanded="overlayVisible" v-bind="ptm('dropdown')">
             <!-- TODO: triggericon is deprecated since v4.0 -->
             <slot :name="$slots.dropdownicon ? 'dropdownicon' : 'triggericon'" :class="cx('dropdownIcon')">
@@ -56,7 +64,7 @@
                         :data-p-hidden-accessible="true"
                         :data-p-hidden-focusable="true"
                     ></span>
-                    <slot name="header" :value="modelValue" :options="options"></slot>
+                    <slot name="header" :value="d_value" :options="options"></slot>
                     <div :class="cx('treeContainer')" :style="{ 'max-height': scrollHeight }" v-bind="ptm('treeContainer')">
                         <TSTree
                             ref="tree"
@@ -72,7 +80,7 @@
                             :filterPlaceholder="filterPlaceholder"
                             :filterLocale="filterLocale"
                             @update:selectionKeys="onSelectionChange"
-                            :selectionKeys="modelValue"
+                            :selectionKeys="d_value"
                             :expandedKeys="d_expandedKeys"
                             @update:expandedKeys="onNodeToggle"
                             :metaKeySelection="metaKeySelection"
@@ -102,7 +110,7 @@
                             <slot name="empty">{{ emptyMessageText }}</slot>
                         </div>
                     </div>
-                    <slot name="footer" :value="modelValue" :options="options"></slot>
+                    <slot name="footer" :value="d_value" :options="options"></slot>
                     <span
                         ref="lastHiddenFocusableElementOnOverlay"
                         role="presentation"
@@ -121,7 +129,7 @@
 
 <script>
 import { absolutePosition, addStyle, find, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
-import { isEmpty } from '@primeuix/utils/object';
+import { isEmpty, isNotEmpty } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
@@ -131,12 +139,13 @@ import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import Tree from 'primevue/tree';
 import BaseTreeSelect from './BaseTreeSelect.vue';
+import TimesIcon from '@primevue/icons/times';
 
 export default {
     name: 'TreeSelect',
     extends: BaseTreeSelect,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur', 'update:expandedKeys'],
+    emits: ['before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur', 'update:expandedKeys'],
     inject: {
         $pcFluid: { default: null }
     },
@@ -210,22 +219,28 @@ export default {
         onBlur(event) {
             this.focused = false;
             this.$emit('blur', event);
+            this.formField.onBlur?.();
         },
         onClick(event) {
             if (this.disabled) {
                 return;
             }
 
-            if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target))) {
+            if (event.target.tagName === 'INPUT' || event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.closest('[data-pc-section="clearicon"]')) {
+                return;
+            } else if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target))) {
                 if (this.overlayVisible) this.hide();
                 else this.show();
 
                 focus(this.$refs.focusInput);
             }
         },
+        onClearClick(event) {
+            this.onSelectionChange(null);
+        },
         onSelectionChange(keys) {
             this.selfChange = true;
-            this.$emit('update:modelValue', keys);
+            this.writeValue(keys);
             this.$emit('change', keys);
         },
         onNodeSelect(node) {
@@ -243,6 +258,16 @@ export default {
 
             this.$emit('update:expandedKeys', this.d_expandedKeys);
         },
+        getSelectedItemsLabel() {
+            let pattern = /{(.*?)}/;
+            const selectedItemsLabel = this.selectedItemsLabel || this.$primevue.config.locale.selectionMessage;
+
+            if (pattern.test(selectedItemsLabel)) {
+                return selectedItemsLabel.replace(selectedItemsLabel.match(pattern)[0], Object.keys(this.d_value).length + '');
+            }
+
+            return selectedItemsLabel;
+        },
         onFirstHiddenFocus(event) {
             const focusableEl = event.relatedTarget === this.$refs.focusInput ? getFirstFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput;
 
@@ -448,7 +473,7 @@ export default {
             return this.selectionMode === 'checkbox' ? keys[node.key] && keys[node.key].checked : keys[node.key];
         },
         updateTreeState() {
-            let keys = { ...this.modelValue };
+            let keys = { ...this.d_value };
 
             if (keys && this.options) {
                 this.updateTreeBranchState(null, null, keys);
@@ -497,8 +522,8 @@ export default {
         selectedNodes() {
             let selectedNodes = [];
 
-            if (this.modelValue && this.options) {
-                let keys = { ...this.modelValue };
+            if (this.d_value && this.options) {
+                let keys = { ...this.d_value };
 
                 this.findSelectedNodes(null, keys, selectedNodes);
             }
@@ -507,14 +532,28 @@ export default {
         },
         label() {
             let value = this.selectedNodes;
+            let label;
 
-            return value.length ? value.map((node) => node.label).join(', ') : this.placeholder;
+            if (value.length) {
+                if (isNotEmpty(this.maxSelectedLabels) && value.length > this.maxSelectedLabels) {
+                    label = this.getSelectedItemsLabel();
+                } else {
+                    label = value.map((node) => node.label).join(', ');
+                }
+            } else {
+                label = this.placeholder;
+            }
+
+            return label;
+        },
+        chipSelectedItems() {
+            return isNotEmpty(this.maxSelectedLabels) && this.d_value && Object.keys(this.d_value).length > this.maxSelectedLabels;
         },
         emptyMessageText() {
             return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
         },
         emptyValue() {
-            return !this.modelValue || Object.keys(this.modelValue).length === 0;
+            return !this.$filled;
         },
         emptyOptions() {
             return !this.options || this.options.length === 0;
@@ -524,13 +563,17 @@ export default {
         },
         hasFluid() {
             return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
+        },
+        isClearIconVisible() {
+            return this.showClear && this.d_value != null && isNotEmpty(this.options);
         }
     },
     components: {
         TSTree: Tree,
         Chip,
-        Portal: Portal,
-        ChevronDownIcon: ChevronDownIcon
+        Portal,
+        ChevronDownIcon,
+        TimesIcon
     },
     directives: {
         ripple: Ripple

package/treeselect/index.d.ts

@@ -80,6 +80,10 @@ export interface TreeSelectPassThroughOptions {
      * Used to pass attributes to the label's DOM element.
      */
     label?: TreeSelectPassThroughOptionType;
+    /**
+     * Used to pass attributes to the clear icon's DOM element.
+     */
+    clearIcon?: TreeSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the chip's DOM element.
      */
@@ -174,41 +178,35 @@ export interface TreeSelectProps {
      */
     modelValue?: TreeNode | any;
     /**
-     * An array of treenodes.
-     */
-    options?: TreeNode[] | undefined;
-    /**
-     * A map of keys to represent the expansion state in controlled mode.
+     * The default value for the input when not controlled by `modelValue`.
      */
-    expandedKeys?: TreeExpandedKeys;
+    defaultValue?: TreeNode | any;
     /**
-     * Height of the viewport, a scrollbar is defined if height of list exceeds this value.
-     * @defaultValue 20rem
+     * The name attribute for the element, typically used in form submissions.
      */
-    scrollHeight?: string | undefined;
+    name?: string | undefined;
     /**
-     * Label to display when there are no selections.
+     * An array of treenodes.
      */
-    placeholder?: string | undefined;
+    options?: TreeNode[] | undefined;
     /**
-     * When present, it specifies that the component should have invalid state style.
-     * @defaultValue false
+     * A map of keys to represent the expansion state in controlled mode.
      */
-    invalid?: boolean | undefined;
+    expandedKeys?: TreeExpandedKeys;
     /**
-     * When present, it specifies that the component should be disabled.
+     * When enabled, a clear icon is displayed to clear the value.
      * @defaultValue false
      */
-    disabled?: boolean | undefined;
+    showClear?: boolean | undefined;
     /**
-     * Specifies the input variant of the component.
-     * @defaultValue outlined
+     * Icon to display in clear button.
      */
-    variant?: 'outlined' | 'filled' | undefined;
+    clearIcon?: string | undefined;
     /**
-     * Index of the element in tabbing order.
+     * Height of the viewport, a scrollbar is defined if height of list exceeds this value.
+     * @defaultValue 20rem
      */
-    tabindex?: string | undefined;
+    scrollHeight?: string | undefined;
     /**
      * Defines the selection mode.
      */
@@ -223,16 +221,20 @@ export interface TreeSelectProps {
      * @defaultValue body
      */
     appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
-    /**
-     * Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.
-     * @defaultValue No available options
-     */
-    emptyMessage?: string | undefined;
     /**
      * Defines how the selected items are displayed.
      * @defaultValue comma
      */
     display?: 'comma' | 'chip' | undefined;
+    /**
+     * Label to display after exceeding max selected labels.
+     * @defaultValue null
+     */
+    selectedItemsLabel?: string | undefined;
+    /**
+     * Decides how many selected item labels to show at most.
+     */
+    maxSelectedLabels?: number | undefined;
     /**
      * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually.
      * On touch enabled devices, metaKeySelection is turned off automatically.
@@ -276,6 +278,38 @@ export interface TreeSelectProps {
      * Locale to use in filtering. The default locale is the host environment's current locale.
      */
     filterLocale?: string | undefined;
+    /**
+     * Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.
+     * @defaultValue No available options
+     */
+    emptyMessage?: string | undefined;
+    /**
+     * Label to display when there are no selections.
+     */
+    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
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: string | undefined;
     /**
      * 	Identifier of the underlying input element.
      */
@@ -304,6 +338,10 @@ export interface TreeSelectProps {
      * 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.
      */
@@ -457,6 +495,17 @@ export interface TreeSelectSlots {
          */
         partialChecked: boolean;
     }): VNode[];
+    /**
+     * Custom clear icon template.
+     * @param {Object} scope - clear icon slot's params.
+     */
+    clearicon(scope: {
+        /**
+         * Clear icon click function.
+         * @param {Event} event - Browser event
+         */
+        clearCallback: (event: Event) => void;
+    }): VNode[];
 }
 
 /**
@@ -468,6 +517,11 @@ export interface TreeSelectEmitsOptions {
      * @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;
     /**
      * Emitted when the expanded keys change.
      * @param {TreeNode} value - New expanded keys.