primevue 4.0.6 → 4.1.0

package/autocomplete/AutoComplete.vue

@@ -5,7 +5,7 @@
             ref="focusInput"
             :id="inputId"
             type="text"
-            :class="[cx('pcInput'), inputClass]"
+            :class="[cx('pcInputText'), inputClass]"
             :style="inputStyle"
             :value="inputValue"
             :placeholder="placeholder"
@@ -29,7 +29,7 @@
             @input="onInput"
             @change="onChange"
             :unstyled="unstyled"
-            :pt="ptm('pcInput')"
+            :pt="ptm('pcInputText')"
         />
         <ul
             v-if="multiple"
@@ -121,55 +121,55 @@
         </span>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
-                <div
-                    v-if="overlayVisible"
-                    :ref="overlayRef"
-                    :id="panelId"
-                    :class="[cx('overlay'), panelClass, overlayClass]"
-                    :style="{ ...panelStyle, ...overlayStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }"
-                    @click="onOverlayClick"
-                    @keydown="onOverlayKeyDown"
-                    v-bind="ptm('overlay')"
-                >
+                <div v-if="overlayVisible" :ref="overlayRef" :id="panelId" :class="[cx('overlay'), panelClass, overlayClass]" :style="{ ...panelStyle, ...overlayStyle }" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="ptm('overlay')">
                     <slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
-                    <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')">
-                                <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
-                                    <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" :class="cx('optionGroup')" role="option" v-bind="ptm('optionGroup')">
-                                        <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
+                    <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')">
+                                    <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
+                                        <li
+                                            v-if="isOptionGroup(option)"
+                                            :id="id + '_' + getOptionIndex(i, getItemOptions)"
+                                            :style="{ height: itemSize ? itemSize + 'px' : undefined }"
+                                            :class="cx('optionGroup')"
+                                            role="option"
+                                            v-bind="ptm('optionGroup')"
+                                        >
+                                            <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
+                                        </li>
+                                        <li
+                                            v-else
+                                            :id="id + '_' + getOptionIndex(i, getItemOptions)"
+                                            v-ripple
+                                            :style="{ height: itemSize ? itemSize + 'px' : undefined }"
+                                            :class="cx('option', { option, i, getItemOptions })"
+                                            role="option"
+                                            :aria-label="getOptionLabel(option)"
+                                            :aria-selected="isSelected(option)"
+                                            :aria-disabled="isOptionDisabled(option)"
+                                            :aria-setsize="ariaSetSize"
+                                            :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
+                                            @click="onOptionSelect($event, option)"
+                                            @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
+                                            :data-p-selected="isSelected(option)"
+                                            :data-p-focus="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
+                                            :data-p-disabled="isOptionDisabled(option)"
+                                            v-bind="getPTOptions(option, getItemOptions, i, 'option')"
+                                        >
+                                            <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
+                                        </li>
+                                    </template>
+                                    <li v-if="!items || (items && items.length === 0)" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')">
+                                        <slot name="empty">{{ searchResultMessageText }}</slot>
                                     </li>
-                                    <li
-                                        v-else
-                                        :id="id + '_' + getOptionIndex(i, getItemOptions)"
-                                        v-ripple
-                                        :style="{ height: itemSize ? itemSize + 'px' : undefined }"
-                                        :class="cx('option', { option, i, getItemOptions })"
-                                        role="option"
-                                        :aria-label="getOptionLabel(option)"
-                                        :aria-selected="isSelected(option)"
-                                        :aria-disabled="isOptionDisabled(option)"
-                                        :aria-setsize="ariaSetSize"
-                                        :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
-                                        @click="onOptionSelect($event, option)"
-                                        @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
-                                        :data-p-selected="isSelected(option)"
-                                        :data-p-focus="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
-                                        :data-p-disabled="isOptionDisabled(option)"
-                                        v-bind="getPTOptions(option, getItemOptions, i, 'option')"
-                                    >
-                                        <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
-                                    </li>
-                                </template>
-                                <li v-if="!items || (items && items.length === 0)" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')">
-                                    <slot name="empty">{{ searchResultMessageText }}</slot>
-                                </li>
-                            </ul>
-                        </template>
-                        <template v-if="$slots.loader" v-slot:loader="{ options }">
-                            <slot name="loader" :options="options"></slot>
-                        </template>
-                    </VirtualScroller>
+                                </ul>
+                            </template>
+                            <template v-if="$slots.loader" v-slot:loader="{ options }">
+                                <slot name="loader" :options="options"></slot>
+                            </template>
+                        </VirtualScroller>
+                    </div>
                     <slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
                     <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
                         {{ selectedMessageText }}
@@ -501,7 +501,7 @@ export default {
         onContainerClick(event) {
             this.clicked = true;
 
-            if (this.disabled || this.searching || this.loading || this.isInputClicked(event) || this.isDropdownClicked(event)) {
+            if (this.disabled || this.searching || this.loading || this.isDropdownClicked(event)) {
                 return;
             }
 

package/autocomplete/index.d.ts

@@ -147,7 +147,7 @@ export interface AutoCompletePassThroughOptions {
      * Used to pass attributes to the InputText component.
      * @see {@link InputTextPassThroughOptions}
      */
-    pcInput?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
+    pcInputText?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the input multiple's DOM element.
      */
@@ -190,6 +190,10 @@ export interface AutoCompletePassThroughOptions {
      * @see {@link VirtualScrollerPassThroughOptionType}
      */
     virtualScroller?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the list container's DOM element.
+     */
+    listContainer?: AutoCompletePassThroughOptionType;
     /**
      * Used to pass attributes to the list's DOM element.
      */

package/autocomplete/index.mjs

@@ -481,7 +481,7 @@ var script = {
     },
     onContainerClick: function onContainerClick(event) {
       this.clicked = true;
-      if (this.disabled || this.searching || this.loading || this.isInputClicked(event) || this.isDropdownClicked(event)) {
+      if (this.disabled || this.searching || this.loading || this.isDropdownClicked(event)) {
         return;
       }
       if (!this.overlay || !this.overlay.contains(event.target)) {
@@ -1029,7 +1029,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "focusInput",
     id: _ctx.inputId,
     type: "text",
-    "class": normalizeClass([_ctx.cx('pcInput'), _ctx.inputClass]),
+    "class": normalizeClass([_ctx.cx('pcInputText'), _ctx.inputClass]),
     style: normalizeStyle(_ctx.inputStyle),
     value: $options.inputValue,
     placeholder: _ctx.placeholder,
@@ -1053,7 +1053,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onInput: $options.onInput,
     onChange: $options.onChange,
     unstyled: _ctx.unstyled,
-    pt: _ctx.ptm('pcInput')
+    pt: _ctx.ptm('pcInputText')
   }, null, 8, ["id", "class", "style", "value", "placeholder", "tabindex", "fluid", "disabled", "invalid", "variant", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "onFocus", "onBlur", "onKeydown", "onInput", "onChange", "unstyled", "pt"])) : createCommentVNode("", true), _ctx.multiple ? (openBlock(), createElementBlock("ul", mergeProps({
     key: 1,
     ref: "multiContainer",
@@ -1214,9 +1214,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ref: $options.overlayRef,
             id: $options.panelId,
             "class": [_ctx.cx('overlay'), _ctx.panelClass, _ctx.overlayClass],
-            style: _objectSpread(_objectSpread(_objectSpread({}, _ctx.panelStyle), _ctx.overlayStyle), {}, {
-              'max-height': $options.virtualScrollerDisabled ? _ctx.scrollHeight : ''
-            }),
+            style: _objectSpread(_objectSpread({}, _ctx.panelStyle), _ctx.overlayStyle),
             onClick: _cache[9] || (_cache[9] = function () {
               return $options.onOverlayClick && $options.onOverlayClick.apply($options, arguments);
             }),
@@ -1226,7 +1224,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, _ctx.ptm('overlay')), [renderSlot(_ctx.$slots, "header", {
             value: _ctx.modelValue,
             suggestions: $options.visibleOptions
-          }), createVNode(_component_VirtualScroller, mergeProps({
+          }), createElementVNode("div", mergeProps({
+            "class": _ctx.cx('listContainer'),
+            style: {
+              'max-height': $options.virtualScrollerDisabled ? _ctx.scrollHeight : ''
+            }
+          }, _ctx.ptm('listContainer')), [createVNode(_component_VirtualScroller, mergeProps({
             ref: $options.virtualScrollerRef
           }, _ctx.virtualScrollerOptions, {
             style: {
@@ -1321,7 +1324,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               })];
             }),
             key: "0"
-          } : undefined]), 1040, ["style", "items", "disabled", "pt"]), renderSlot(_ctx.$slots, "footer", {
+          } : undefined]), 1040, ["style", "items", "disabled", "pt"])], 16), renderSlot(_ctx.$slots, "footer", {
             value: _ctx.modelValue,
             suggestions: $options.visibleOptions
           }), createElementVNode("span", mergeProps({