primevue 4.3.9 → 4.4.1

package/autocomplete/AutoComplete.vue

@@ -23,7 +23,7 @@
             aria-haspopup="listbox"
             aria-autocomplete="list"
             :aria-expanded="overlayVisible"
-            :aria-controls="panelId"
+            :aria-controls="overlayVisible ? panelId : undefined"
             :aria-activedescendant="focused ? focusedOptionId : undefined"
             @focus="onFocus"
             @blur="onBlur"
@@ -34,6 +34,9 @@
             :data-p-has-dropdown="dropdown"
             :pt="ptm('pcInputText')"
         />
+        <slot v-if="isClearIconVisible" name="clearicon" :class="cx('clearIcon')" :clearCallback="onClearClick">
+            <TimesIcon :class="[cx('clearIcon')]" @click="onClearClick" v-bind="ptm('clearIcon')" />
+        </slot>
         <ul
             v-if="multiple"
             ref="multiContainer"
@@ -110,7 +113,7 @@
         </ul>
         <slot v-if="searching || loading" :class="cx('loader')" :name="$slots.loader ? 'loader' : 'loadingicon'">
             <i v-if="loader || loadingIcon" :class="['pi-spin', cx('loader'), loader, loadingIcon]" aria-hidden="true" :data-p-has-dropdown="dropdown" v-bind="ptm('loader')" />
-            <SpinnerIcon v-else :class="cx('loader')" spin aria-hidden="true" :data-p-has-dropdown="dropdown" v-bind="ptm('loader')" />
+            <SpinnerIcon v-else-if="loading" :class="cx('loader')" spin aria-hidden="true" :data-p-has-dropdown="dropdown" v-bind="ptm('loader')" />
         </slot>
         <slot :name="$slots.dropdown ? 'dropdown' : 'dropdownbutton'" :toggleCallback="(event) => onDropdownClick(event)">
             <button
@@ -212,6 +215,7 @@ import { ZIndex } from '@primeuix/utils/zindex';
 import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import SpinnerIcon from '@primevue/icons/spinner';
+import TimesIcon from '@primevue/icons/times';
 import Chip from 'primevue/chip';
 import InputText from 'primevue/inputtext';
 import OverlayEventBus from 'primevue/overlayeventbus';
@@ -453,6 +457,7 @@ export default {
                 }
 
                 if (query.length === 0) {
+                    this.searching = false;
                     this.hide();
                     this.$emit('clear');
                 } else {
@@ -463,6 +468,7 @@ export default {
                             this.search(event, query, 'input');
                         }, this.delay);
                     } else {
+                        this.searching = false;
                         this.hide();
                     }
                 }
@@ -592,11 +598,15 @@ export default {
                 const value = this.visibleOptions
                     .slice(rangeStart, rangeEnd + 1)
                     .filter((option) => this.isValidOption(option))
+                    .filter((option) => !this.isSelected(option))                    
                     .map((option) => this.getOptionValue(option));
 
-                this.updateModel(event, value);
+                this.updateModel(event, [...(this.d_value || []), ...value]);
             }
         },
+        onClearClick(event) {
+            this.updateModel(event, null);
+        },
         onOverlayClick(event) {
             OverlayEventBus.emit('overlay-click', {
                 originalEvent: event,
@@ -941,6 +951,7 @@ export default {
             }
 
             this.searching = true;
+            this.show();
             this.$emit('complete', { originalEvent: event, query });
         },
         removeOption(event, index) {
@@ -1084,6 +1095,9 @@ export default {
         focusedMultipleOptionId() {
             return this.focusedMultipleOptionIndex !== -1 ? `${this.$id}_multiple_option_${this.focusedMultipleOptionIndex}` : null;
         },
+        isClearIconVisible() {
+            return this.showClear && this.$filled && !this.disabled && !this.loading;
+        },
         ariaSetSize() {
             return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;
         },
@@ -1119,9 +1133,10 @@ export default {
         InputText,
         VirtualScroller,
         Portal,
+        Chip,
         ChevronDownIcon,
         SpinnerIcon,
-        Chip
+        TimesIcon
     },
     directives: {
         ripple: Ripple

package/autocomplete/BaseAutoComplete.vue

@@ -62,6 +62,10 @@ export default {
             type: Boolean,
             default: false
         },
+        showClear: {
+            type: Boolean,
+            default: false
+        },
         inputId: {
             type: String,
             default: null

package/autocomplete/index.d.ts

@@ -177,6 +177,10 @@ export interface AutoCompletePassThroughOptions {
      * Used to pass attributes to the loader's DOM element.
      */
     loader?: AutoCompletePassThroughOptionType;
+    /**
+     * Used to pass attributes to the clear icon's DOM element.
+     */
+    clearIcon?: AutoCompletePassThroughOptionType;
     /**
      * Used to pass attributes to the dropdown's DOM element.
      */
@@ -370,6 +374,11 @@ export interface AutoCompleteProps {
      * @defaultValue false
      */
     multiple?: boolean | undefined;
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     * @defaultValue false
+     */
+    showClear?: boolean | undefined;
     /**
      * Default text to display when no option is selected.
      */
@@ -779,6 +788,17 @@ export interface AutoCompleteSlots {
          */
         toggleCallback: (event: Event) => void;
     }): 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[];
 }
 
 /**

package/autocomplete/index.mjs

@@ -5,6 +5,7 @@ import { ZIndex } from '@primeuix/utils/zindex';
 import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import SpinnerIcon from '@primevue/icons/spinner';
+import TimesIcon from '@primevue/icons/times';
 import Chip from 'primevue/chip';
 import InputText from 'primevue/inputtext';
 import OverlayEventBus from 'primevue/overlayeventbus';
@@ -75,6 +76,10 @@ var script$1 = {
       type: Boolean,
       "default": false
     },
+    showClear: {
+      type: Boolean,
+      "default": false
+    },
     inputId: {
       type: String,
       "default": null
@@ -414,6 +419,7 @@ var script = {
           this.updateModel(event, query);
         }
         if (query.length === 0) {
+          this.searching = false;
           this.hide();
           this.$emit('clear');
         } else {
@@ -423,6 +429,7 @@ var script = {
               _this3.search(event, query, 'input');
             }, this.delay);
           } else {
+            this.searching = false;
             this.hide();
           }
         }
@@ -547,12 +554,17 @@ var script = {
         var rangeEnd = Math.max(start, end);
         var value = this.visibleOptions.slice(rangeStart, rangeEnd + 1).filter(function (option) {
           return _this5.isValidOption(option);
+        }).filter(function (option) {
+          return !_this5.isSelected(option);
         }).map(function (option) {
           return _this5.getOptionValue(option);
         });
-        this.updateModel(event, value);
+        this.updateModel(event, [].concat(_toConsumableArray(this.d_value || []), _toConsumableArray(value)));
       }
     },
+    onClearClick: function onClearClick(event) {
+      this.updateModel(event, null);
+    },
     onOverlayClick: function onOverlayClick(event) {
       OverlayEventBus.emit('overlay-click', {
         originalEvent: event,
@@ -887,6 +899,7 @@ var script = {
         return;
       }
       this.searching = true;
+      this.show();
       this.$emit('complete', {
         originalEvent: event,
         query: query
@@ -1055,6 +1068,9 @@ var script = {
     focusedMultipleOptionId: function focusedMultipleOptionId() {
       return this.focusedMultipleOptionIndex !== -1 ? "".concat(this.$id, "_multiple_option_").concat(this.focusedMultipleOptionIndex) : null;
     },
+    isClearIconVisible: function isClearIconVisible() {
+      return this.showClear && this.$filled && !this.disabled && !this.loading;
+    },
     ariaSetSize: function ariaSetSize() {
       var _this18 = this;
       return this.visibleOptions.filter(function (option) {
@@ -1090,9 +1106,10 @@ var script = {
     InputText: InputText,
     VirtualScroller: VirtualScroller,
     Portal: Portal,
+    Chip: Chip,
     ChevronDownIcon: ChevronDownIcon,
     SpinnerIcon: SpinnerIcon,
-    Chip: Chip
+    TimesIcon: TimesIcon
   },
   directives: {
     ripple: Ripple
@@ -1117,6 +1134,7 @@ var _hoisted_9 = ["id"];
 var _hoisted_10 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove", "data-p-selected", "data-p-focused", "data-p-disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_InputText = resolveComponent("InputText");
+  var _component_TimesIcon = resolveComponent("TimesIcon");
   var _component_Chip = resolveComponent("Chip");
   var _component_SpinnerIcon = resolveComponent("SpinnerIcon");
   var _component_VirtualScroller = resolveComponent("VirtualScroller");
@@ -1153,7 +1171,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-haspopup": "listbox",
     "aria-autocomplete": "list",
     "aria-expanded": $data.overlayVisible,
-    "aria-controls": $options.panelId,
+    "aria-controls": $data.overlayVisible ? $options.panelId : undefined,
     "aria-activedescendant": $data.focused ? $options.focusedOptionId : undefined,
     onFocus: $options.onFocus,
     onBlur: $options.onBlur,
@@ -1163,8 +1181,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     unstyled: _ctx.unstyled,
     "data-p-has-dropdown": _ctx.dropdown,
     pt: _ctx.ptm('pcInputText')
-  }, null, 8, ["id", "name", "class", "style", "defaultValue", "placeholder", "tabindex", "fluid", "disabled", "size", "invalid", "variant", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "onFocus", "onBlur", "onKeydown", "onInput", "onChange", "unstyled", "data-p-has-dropdown", "pt"])) : createCommentVNode("", true), _ctx.multiple ? (openBlock(), createElementBlock("ul", mergeProps({
+  }, null, 8, ["id", "name", "class", "style", "defaultValue", "placeholder", "tabindex", "fluid", "disabled", "size", "invalid", "variant", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "onFocus", "onBlur", "onKeydown", "onInput", "onChange", "unstyled", "data-p-has-dropdown", "pt"])) : createCommentVNode("", true), $options.isClearIconVisible ? renderSlot(_ctx.$slots, "clearicon", {
     key: 1,
+    "class": normalizeClass(_ctx.cx('clearIcon')),
+    clearCallback: $options.onClearClick
+  }, function () {
+    return [createVNode(_component_TimesIcon, mergeProps({
+      "class": [_ctx.cx('clearIcon')],
+      onClick: $options.onClearClick
+    }, _ctx.ptm('clearIcon')), null, 16, ["class", "onClick"])];
+  }) : createCommentVNode("", true), _ctx.multiple ? (openBlock(), createElementBlock("ul", mergeProps({
+    key: 2,
     ref: "multiContainer",
     "class": _ctx.cx('inputMultiple'),
     tabindex: "-1",
@@ -1268,7 +1295,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return $options.onChange && $options.onChange.apply($options, arguments);
     })
   }, _ctx.ptm('input')), null, 16, _hoisted_4)], 16)], 16, _hoisted_2)) : createCommentVNode("", true), $data.searching || _ctx.loading ? renderSlot(_ctx.$slots, _ctx.$slots.loader ? 'loader' : 'loadingicon', {
-    key: 2,
+    key: 3,
     "class": normalizeClass(_ctx.cx('loader'))
   }, function () {
     return [_ctx.loader || _ctx.loadingIcon ? (openBlock(), createElementBlock("i", mergeProps({
@@ -1276,13 +1303,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "class": ['pi-spin', _ctx.cx('loader'), _ctx.loader, _ctx.loadingIcon],
       "aria-hidden": "true",
       "data-p-has-dropdown": _ctx.dropdown
-    }, _ctx.ptm('loader')), null, 16, _hoisted_5)) : (openBlock(), createBlock(_component_SpinnerIcon, mergeProps({
+    }, _ctx.ptm('loader')), null, 16, _hoisted_5)) : _ctx.loading ? (openBlock(), createBlock(_component_SpinnerIcon, mergeProps({
       key: 1,
       "class": _ctx.cx('loader'),
       spin: "",
       "aria-hidden": "true",
       "data-p-has-dropdown": _ctx.dropdown
-    }, _ctx.ptm('loader')), null, 16, ["class", "data-p-has-dropdown"]))];
+    }, _ctx.ptm('loader')), null, 16, ["class", "data-p-has-dropdown"])) : createCommentVNode("", true)];
   }) : createCommentVNode("", true), renderSlot(_ctx.$slots, _ctx.$slots.dropdown ? 'dropdown' : 'dropdownbutton', {
     toggleCallback: function toggleCallback(event) {
       return $options.onDropdownClick(event);
@@ -1308,7 +1335,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, _ctx.ptm('dropdownIcon')), null, 16, ["class"]))];
     })], 16, _hoisted_6)) : createCommentVNode("", true)];
   }), _ctx.typeahead ? (openBlock(), createElementBlock("span", mergeProps({
-    key: 3,
+    key: 4,
     role: "status",
     "aria-live": "polite",
     "class": "p-hidden-accessible"