primevue 4.0.7 → 4.1.1

package/README.md

@@ -5,98 +5,6 @@
 
 [![PrimeVue Hero](https://www.primefaces.org/static/social/primevue-preview.jpg)](https://primevue.org/)
 
-# PrimeVue
+# PrimeVue Website
 
-PrimeVue is a rich set of open source UI Components for Vue. See [PrimeVue homepage](https://primevue.org/) for live showcase and documentation.
-
-## Download
-
-PrimeVue is available at [npm](https://www.npmjs.com/package/primevue).
-
-```bash
-# Using npm
-npm install primevue
-
-# Using yarn
-yarn add primevue
-
-# Using pnpm
-pnpm add primevue
-```
-
-## Plugin
-
-PrimeVue plugin is required to be installed as an application plugin to set up the default [configuration](https://primevue.org/configuration). The plugin is lightweight, only sets up the configuration object without affecting your application. PrimeVue has two styling modes; Styled and Unstyled. If you are just getting started, we suggest to using the styled mode.
-
-```javascript
-import { createApp } from 'vue';
-import PrimeVue from 'primevue/config';
-const app = createApp(App);
-
-app.use(PrimeVue);
-```
-
-## Theming
-
-PrimeVue has two theming has modes; styled or unstyled.
-
-**Styled Mode**
-
-Styled mode provides pre-skinned components, default theme is Aura with emerald as the primary color.
-
-```javascript
-import { createApp } from 'vue';
-import PrimeVueStyled from 'primevue/config';
-const app = createApp(App);
-
-app.use(PrimeVueStyled);
-```
-
-**Unstyled Mode**
-
-In unstyled mode, the components do not include any CSS so you'd need to style the components on your end. If you are using Tailwind CSS, visit the [Tailwind Presets](https://tailwind.primevue.org) project to get you started with styling the components with Tailwind utility classes.
-
-```javascript
-import { createApp } from 'vue';
-import PrimeVueUnstyled from 'primevue/config';
-const app = createApp(App);
-
-app.use(PrimeVueUnstyled);
-```
-
-## Usage
-
-Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.
-
-```javascript
-import Button from 'primevue/button';
-
-const app = createApp(App);
-app.component('Button', Button);
-```
-
-## Prop Cases
-
-Component prop names are described as camel case throughout the documentation however kebab-case is also fully supported. Events on the other hand should always be kebab-case.
-
-```vue
-<Dialog :showHeader="false"></Dialog>
-
-<!-- can be written as -->
-
-<Dialog :show-header="false"></Dialog>
-```
-
-## Nuxt Integration
-
-The [nuxt-primevue](https://www.npmjs.com/package/nuxt-primevue) package is the official module by PrimeTek. See the nuxt documentation for details. [information](https://primevue.org/nuxt)
-
-## Example
-
-We've created various samples for the popular options in the Vue ecosystem. Visit the [primevue-examples](https://github.com/primefaces/primevue-examples) repository for the samples.
-
-## Contributors
-
-<a href="https://github.com/primefaces/primevue/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=primefaces/primevue" />
-</a>
+PrimeVue is a rich set of open source UI Components for Vue. Visit the [PrimeVue website](https://primevue.org/) for interactive demos, comprehensive documentation and additional resources.

package/accordion/index.d.ts

@@ -7,7 +7,7 @@
  * @module accordion
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { PassThroughOptions } from 'primevue/passthrough';
 import { VNode } from 'vue';
@@ -245,7 +245,7 @@ declare const Accordion: DefineComponent<AccordionProps, AccordionSlots, Accordi
 
 declare module 'vue' {
     export interface GlobalComponents {
-        Accordion: GlobalComponentConstructor<AccordionProps, AccordionSlots, AccordionEmits>;
+        Accordion: DefineComponent<AccordionProps, AccordionSlots, AccordionEmits>;
     }
 }
 

package/accordioncontent/index.d.ts

@@ -7,7 +7,7 @@
  * @module accordioncontent
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { PassThroughOptions } from 'primevue/passthrough';
 import type { Component, VNode } from 'vue';
@@ -142,7 +142,7 @@ declare const AccordionContent: DefineComponent<AccordionContentProps, Accordion
 
 declare module 'vue' {
     export interface GlobalComponents {
-        AccordionContent: GlobalComponentConstructor<AccordionContentProps, AccordionContentSlots, AccordionContentEmits>;
+        AccordionContent: DefineComponent<AccordionContentProps, AccordionContentSlots, AccordionContentEmits>;
     }
 }
 

package/accordionheader/index.d.ts

@@ -7,7 +7,7 @@
  * @module accordionheader
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { PassThroughOptions } from 'primevue/passthrough';
 import type { Component, VNode } from 'vue';
@@ -142,7 +142,7 @@ declare const AccordionHeader: DefineComponent<AccordionHeaderProps, AccordionHe
 
 declare module 'vue' {
     export interface GlobalComponents {
-        AccordionHeader: GlobalComponentConstructor<AccordionHeaderProps, AccordionHeaderSlots, AccordionHeaderEmits>;
+        AccordionHeader: DefineComponent<AccordionHeaderProps, AccordionHeaderSlots, AccordionHeaderEmits>;
     }
 }
 

package/accordionpanel/index.d.ts

@@ -7,7 +7,7 @@
  * @module accordionpanel
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { PassThroughOptions } from 'primevue/passthrough';
 import type { Component, VNode } from 'vue';
@@ -140,7 +140,7 @@ declare const AccordionPanel: DefineComponent<AccordionPanelProps, AccordionPane
 
 declare module 'vue' {
     export interface GlobalComponents {
-        AccordionPanel: GlobalComponentConstructor<AccordionPanelProps, AccordionPanelSlots, AccordionPanelEmits>;
+        AccordionPanel: DefineComponent<AccordionPanelProps, AccordionPanelSlots, AccordionPanelEmits>;
     }
 }
 

package/accordiontab/index.d.ts

@@ -8,7 +8,7 @@
  * @module accordiontab
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
 import type { PassThroughOptions } from 'primevue/passthrough';
 import { AnchorHTMLAttributes, HTMLAttributes, TransitionProps, VNode } from 'vue';
 
@@ -229,7 +229,7 @@ declare const AccordionTab: DefineComponent<AccordionTabProps, AccordionTabSlots
 
 declare module 'vue' {
     export interface GlobalComponents {
-        AccordionTab: GlobalComponentConstructor<AccordionTabProps, AccordionTabSlots, AccordionTabEmits>;
+        AccordionTab: DefineComponent<AccordionTabProps, AccordionTabSlots, AccordionTabEmits>;
     }
 }
 

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

@@ -7,7 +7,7 @@
  * @module autocomplete
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, HintedString, Nullable, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, HintedString, Nullable, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { ChipPassThroughOptions } from 'primevue/chip';
 import type { InputTextPassThroughOptions } from 'primevue/inputtext';
@@ -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.
      */
@@ -831,7 +835,7 @@ declare const AutoComplete: DefineComponent<AutoCompleteProps, AutoCompleteSlots
 
 declare module 'vue' {
     export interface GlobalComponents {
-        AutoComplete: GlobalComponentConstructor<AutoCompleteProps, AutoCompleteSlots, AutoCompleteEmits>;
+        AutoComplete: DefineComponent<AutoCompleteProps, AutoCompleteSlots, AutoCompleteEmits>;
     }
 }
 

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({