primevue 4.2.5 → 4.3.0

package/autocomplete/AutoComplete.vue

@@ -49,7 +49,7 @@
             <li
                 v-for="(option, i) of d_value"
                 :key="`${i}_${getOptionLabel(option)}`"
-                :id="id + '_multiple_option_' + i"
+                :id="$id + '_multiple_option_' + i"
                 :class="cx('chipItem', { i })"
                 role="option"
                 :aria-label="getOptionLabel(option)"
@@ -84,7 +84,7 @@
                     aria-haspopup="listbox"
                     aria-autocomplete="list"
                     :aria-expanded="overlayVisible"
-                    :aria-controls="id + '_list'"
+                    :aria-controls="$id + '_list'"
                     :aria-activedescendant="focused ? focusedOptionId : undefined"
                     :aria-invalid="invalid || undefined"
                     @focus="onFocus"
@@ -128,11 +128,11 @@
                     <div :class="cx('listContainer')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('listContainer')">
                         <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
                             <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
-                                <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" :aria-label="listAriaLabel" v-bind="ptm('list')">
+                                <ul :ref="(el) => listRef(el, contentRef)" :id="$id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" :aria-label="listAriaLabel" v-bind="ptm('list')">
                                     <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
                                         <li
                                             v-if="isOptionGroup(option)"
-                                            :id="id + '_' + getOptionIndex(i, getItemOptions)"
+                                            :id="$id + '_' + getOptionIndex(i, getItemOptions)"
                                             :style="{ height: itemSize ? itemSize + 'px' : undefined }"
                                             :class="cx('optionGroup')"
                                             role="option"
@@ -142,7 +142,7 @@
                                         </li>
                                         <li
                                             v-else
-                                            :id="id + '_' + getOptionIndex(i, getItemOptions)"
+                                            :id="$id + '_' + getOptionIndex(i, getItemOptions)"
                                             v-ripple
                                             :style="{ height: itemSize ? itemSize + 'px' : undefined }"
                                             :class="cx('option', { option, i, getItemOptions })"
@@ -186,7 +186,7 @@
 import { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
 import { equals, findLastIndex, isEmpty, isNotEmpty, resolveFieldData } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
-import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
+import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import SpinnerIcon from '@primevue/icons/spinner';
 import Chip from 'primevue/chip';
@@ -212,9 +212,9 @@ export default {
     virtualScroller: null,
     searchTimeout: null,
     dirty: false,
+    startRangeIndex: -1,
     data() {
         return {
-            id: this.$attrs.id,
             clicked: false,
             focused: false,
             focusedOptionIndex: -1,
@@ -224,9 +224,6 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        },
         suggestions() {
             if (this.searching) {
                 this.show();
@@ -239,7 +236,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
         this.autoUpdateModel();
     },
     updated() {
@@ -277,6 +273,8 @@ export default {
         getPTOptions(option, itemOptions, index, key) {
             return this.ptm(key, {
                 context: {
+                    option,
+                    index,
                     selected: this.isSelected(option),
                     focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),
                     disabled: this.isOptionDisabled(option)
@@ -389,6 +387,7 @@ export default {
 
                 case 'Enter':
                 case 'NumpadEnter':
+                case 'Space':
                     this.onEnterKey(event);
                     break;
 
@@ -400,13 +399,13 @@ export default {
                     this.onTabKey(event);
                     break;
 
-                case 'Backspace':
-                    this.onBackspaceKey(event);
-                    break;
-
                 case 'ShiftLeft':
                 case 'ShiftRight':
-                    //NOOP
+                    this.onShiftKey(event);
+                    break;
+
+                case 'Backspace':
+                    this.onBackspaceKey(event);
                     break;
 
                 default:
@@ -553,6 +552,21 @@ export default {
                 this.changeFocusedOptionIndex(event, index);
             }
         },
+        onOptionSelectRange(event, start = -1, end = -1) {
+            start === -1 && (start = this.findNearestSelectedOptionIndex(end, true));
+            end === -1 && (end = this.findNearestSelectedOptionIndex(start));
+
+            if (start !== -1 && end !== -1) {
+                const rangeStart = Math.min(start, end);
+                const rangeEnd = Math.max(start, end);
+                const value = this.visibleOptions
+                    .slice(rangeStart, rangeEnd + 1)
+                    .filter((option) => this.isValidOption(option))
+                    .map((option) => this.getOptionValue(option));
+
+                this.updateModel(event, value);
+            }
+        },
         onOverlayClick(event) {
             OverlayEventBus.emit('overlay-click', {
                 originalEvent: event,
@@ -576,6 +590,10 @@ export default {
 
             const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.clicked ? this.findFirstOptionIndex() : this.findFirstFocusedOptionIndex();
 
+            if (this.multiple && event.shiftKey) {
+                this.onOptionSelectRange(event, this.startRangeIndex, optionIndex);
+            }
+
             this.changeFocusedOptionIndex(event, optionIndex);
 
             event.preventDefault();
@@ -595,6 +613,10 @@ export default {
             } else {
                 const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.clicked ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();
 
+                if (this.multiple && event.shiftKey) {
+                    this.onOptionSelectRange(event, optionIndex, this.startRangeIndex);
+                }
+
                 this.changeFocusedOptionIndex(event, optionIndex);
 
                 event.preventDefault();
@@ -622,6 +644,12 @@ export default {
         onHomeKey(event) {
             const { currentTarget } = event;
             const len = currentTarget.value.length;
+            const metaKey = event.metaKey || event.ctrlKey;
+            const optionIndex = this.findFirstOptionIndex();
+
+            if (this.multiple && event.shiftKey && metaKey) {
+                this.onOptionSelectRange(event, optionIndex, this.startRangeIndex);
+            }
 
             currentTarget.setSelectionRange(0, event.shiftKey ? len : 0);
             this.focusedOptionIndex = -1;
@@ -631,6 +659,12 @@ export default {
         onEndKey(event) {
             const { currentTarget } = event;
             const len = currentTarget.value.length;
+            const metaKey = event.metaKey || event.ctrlKey;
+            const optionIndex = this.findLastOptionIndex();
+
+            if (this.multiple && event.shiftKey && metaKey) {
+                this.onOptionSelectRange(event, this.startRangeIndex, optionIndex);
+            }
 
             currentTarget.setSelectionRange(event.shiftKey ? 0 : len, len);
             this.focusedOptionIndex = -1;
@@ -657,7 +691,12 @@ export default {
                     this.onArrowDownKey(event);
                 } else {
                     if (this.focusedOptionIndex !== -1) {
-                        this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+                        if (this.multiple && event.shiftKey) {
+                            this.onOptionSelectRange(event, this.focusedOptionIndex);
+                            event.preventDefault();
+                        } else {
+                            this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+                        }
                     }
 
                     this.hide();
@@ -677,6 +716,9 @@ export default {
 
             this.overlayVisible && this.hide();
         },
+        onShiftKey() {
+            this.startRangeIndex = this.focusedOptionIndex;
+        },
         onBackspaceKey(event) {
             if (this.multiple) {
                 if (isNotEmpty(this.d_value) && !this.$refs.focusInput.value) {
@@ -749,12 +791,12 @@ export default {
                     }
                 };
 
-                document.addEventListener('click', this.outsideClickListener);
+                document.addEventListener('click', this.outsideClickListener, true);
             }
         },
         unbindOutsideClickListener() {
             if (this.outsideClickListener) {
-                document.removeEventListener('click', this.outsideClickListener);
+                document.removeEventListener('click', this.outsideClickListener, true);
                 this.outsideClickListener = null;
             }
         },
@@ -883,7 +925,7 @@ export default {
         },
         scrollInView(index = -1) {
             this.$nextTick(() => {
-                const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
+                const id = index !== -1 ? `${this.$id}_${index}` : this.focusedOptionId;
                 const element = findSingle(this.list, `li[id="${id}"]`);
 
                 if (element) {
@@ -923,6 +965,31 @@ export default {
         },
         virtualScrollerRef(el) {
             this.virtualScroller = el;
+        },
+        findNextSelectedOptionIndex(index) {
+            const matchedOptionIndex = this.$filled && index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidSelectedOption(option)) : -1;
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
+        },
+        findPrevSelectedOptionIndex(index) {
+            const matchedOptionIndex = this.$filled && index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidSelectedOption(option)) : -1;
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
+        },
+        findNearestSelectedOptionIndex(index, firstCheckUp = false) {
+            let matchedOptionIndex = -1;
+
+            if (this.$filled) {
+                if (firstCheckUp) {
+                    matchedOptionIndex = this.findPrevSelectedOptionIndex(index);
+                    matchedOptionIndex = matchedOptionIndex === -1 ? this.findNextSelectedOptionIndex(index) : matchedOptionIndex;
+                } else {
+                    matchedOptionIndex = this.findNextSelectedOptionIndex(index);
+                    matchedOptionIndex = matchedOptionIndex === -1 ? this.findPrevSelectedOptionIndex(index) : matchedOptionIndex;
+                }
+            }
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex : index;
         }
     },
     computed: {
@@ -972,10 +1039,10 @@ export default {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listLabel : undefined;
         },
         focusedOptionId() {
-            return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
+            return this.focusedOptionIndex !== -1 ? `${this.$id}_${this.focusedOptionIndex}` : null;
         },
         focusedMultipleOptionId() {
-            return this.focusedMultipleOptionIndex !== -1 ? `${this.id}_multiple_option_${this.focusedMultipleOptionIndex}` : null;
+            return this.focusedMultipleOptionIndex !== -1 ? `${this.$id}_multiple_option_${this.focusedMultipleOptionIndex}` : null;
         },
         ariaSetSize() {
             return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;
@@ -984,7 +1051,7 @@ export default {
             return !this.virtualScrollerOptions;
         },
         panelId() {
-            return this.id + '_panel';
+            return this.$id + '_panel';
         }
     },
     components: {

package/autocomplete/index.d.ts

@@ -280,6 +280,14 @@ export interface AutoCompleteState {
  * Defines current options in AutoComplete component.
  */
 export interface AutoCompleteContext {
+    /**
+     * Current option.
+     */
+    option?: any;
+    /**
+     * Index of the current option.
+     */
+    index: number;
     /**
      * Current selection state of the item as a boolean.
      * @defaultValue false
@@ -383,9 +391,9 @@ export interface AutoCompleteProps {
     disabled?: boolean | undefined;
     /**
      * Specifies the input variant of the component.
-     * @defaultValue outlined
+     * @defaultValue null
      */
-    variant?: 'outlined' | 'filled' | undefined;
+    variant?: 'outlined' | 'filled' | undefined | null;
     /**
      * A property to uniquely identify an option.
      */
@@ -574,6 +582,15 @@ export interface AutoCompleteSlots {
          * A value in the selection
          */
         value: any;
+        /**
+         * Index of the token.
+         */
+        index: number;
+        /**
+         * Remove token icon function.
+         * @param {Event} event - Browser event
+         */
+        removeCallback: (event: Event) => void;
     }): VNode[];
     /**
      * Custom header template of panel.