primevue 4.3.1 → 4.3.3

package/accordionheader/AccordionHeader.vue

@@ -1,5 +1,5 @@
 <template>
-    <component v-if="!asChild" :is="as" v-ripple :class="cx('root')" @click="onClick" v-bind="attrs">
+    <component v-if="!asChild" :is="as" v-ripple :data-p="dataP" :class="cx('root')" @click="onClick" v-bind="attrs">
         <slot :active="$pcAccordionPanel.active"></slot>
         <slot name="toggleicon" :active="$pcAccordionPanel.active" :class="cx('toggleicon')">
             <component
@@ -22,7 +22,8 @@
 </template>
 
 <script>
-import { findSingle, getAttribute, focus } from '@primeuix/utils/dom';
+import { cn } from '@primeuix/utils';
+import { findSingle, focus, getAttribute } from '@primeuix/utils/dom';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import ChevronUpIcon from '@primevue/icons/chevronup';
 import Ripple from 'primevue/ripple';
@@ -158,6 +159,11 @@ export default {
                     active: this.$pcAccordionPanel.active
                 }
             };
+        },
+        dataP() {
+            return cn({
+                active: this.$pcAccordionPanel.active
+            });
         }
     },
     components: {

package/accordionheader/index.mjs

@@ -1,3 +1,4 @@
+import { cn } from '@primeuix/utils';
 import { focus, getAttribute, findSingle } from '@primeuix/utils/dom';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import ChevronUpIcon from '@primevue/icons/chevronup';
@@ -149,6 +150,11 @@ var script = {
           active: this.$pcAccordionPanel.active
         }
       };
+    },
+    dataP: function dataP() {
+      return cn({
+        active: this.$pcAccordionPanel.active
+      });
     }
   },
   components: {
@@ -164,6 +170,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _directive_ripple = resolveDirective("ripple");
   return !_ctx.asChild ? withDirectives((openBlock(), createBlock(resolveDynamicComponent(_ctx.as), mergeProps({
     key: 0,
+    "data-p": $options.dataP,
     "class": _ctx.cx('root'),
     onClick: $options.onClick
   }, $options.attrs), {
@@ -186,7 +193,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       })];
     }),
     _: 3
-  }, 16, ["class", "onClick"])), [[_directive_ripple]]) : renderSlot(_ctx.$slots, "default", {
+  }, 16, ["data-p", "class", "onClick"])), [[_directive_ripple]]) : renderSlot(_ctx.$slots, "default", {
     key: 1,
     "class": normalizeClass(_ctx.cx('root')),
     active: $options.$pcAccordionPanel.active,

package/accordionheader/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/accordionheader/BaseAccordionHeader.vue","../../src/accordionheader/AccordionHeader.vue","../../src/accordionheader/AccordionHeader.vue?vue&type=template&id=de1b1e4e&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport AccordionHeaderStyle from 'primevue/accordionheader/style';\n\nexport default {\n    name: 'BaseAccordionHeader',\n    extends: BaseComponent,\n    props: {\n        as: {\n            type: [String, Object],\n            default: 'BUTTON'\n        },\n        asChild: {\n            type: Boolean,\n            default: false\n        }\n    },\n    style: AccordionHeaderStyle,\n    provide() {\n        return {\n            $pcAccordionHeader: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <component v-if=\"!asChild\" :is=\"as\" v-ripple :class=\"cx('root')\" @click=\"onClick\" v-bind=\"attrs\">\n        <slot :active=\"$pcAccordionPanel.active\"></slot>\n        <slot name=\"toggleicon\" :active=\"$pcAccordionPanel.active\" :class=\"cx('toggleicon')\">\n            <component\n                v-if=\"$pcAccordionPanel.active\"\n                :is=\"$pcAccordion.$slots.collapseicon ? $pcAccordion.$slots.collapseicon : $pcAccordion.collapseIcon ? 'span' : 'ChevronUpIcon'\"\n                :class=\"[$pcAccordion.collapseIcon, cx('toggleicon')]\"\n                aria-hidden=\"true\"\n                v-bind=\"ptm('toggleicon', ptParams)\"\n            ></component>\n            <component\n                v-else\n                :is=\"$pcAccordion.$slots.expandicon ? $pcAccordion.$slots.expandicon : $pcAccordion.expandIcon ? 'span' : 'ChevronDownIcon'\"\n                :class=\"[$pcAccordion.expandIcon, cx('toggleicon')]\"\n                aria-hidden=\"true\"\n                v-bind=\"ptm('toggleicon', ptParams)\"\n            ></component>\n        </slot>\n    </component>\n    <slot v-else :class=\"cx('root')\" :active=\"$pcAccordionPanel.active\" :a11yAttrs=\"a11yAttrs\" :onClick=\"onClick\"></slot>\n</template>\n\n<script>\nimport { findSingle, getAttribute, focus } from '@primeuix/utils/dom';\nimport ChevronDownIcon from '@primevue/icons/chevrondown';\nimport ChevronUpIcon from '@primevue/icons/chevronup';\nimport Ripple from 'primevue/ripple';\nimport { mergeProps } from 'vue';\nimport BaseAccordionHeader from './BaseAccordionHeader.vue';\n\nexport default {\n    name: 'AccordionHeader',\n    extends: BaseAccordionHeader,\n    inheritAttrs: false,\n    inject: ['$pcAccordion', '$pcAccordionPanel'],\n    methods: {\n        onFocus() {\n            this.$pcAccordion.selectOnFocus && this.changeActiveValue();\n        },\n        onClick() {\n            this.changeActiveValue();\n        },\n        onKeydown(event) {\n            switch (event.code) {\n                case 'ArrowDown':\n                    this.onArrowDownKey(event);\n                    break;\n\n                case 'ArrowUp':\n                    this.onArrowUpKey(event);\n                    break;\n\n                case 'Home':\n                    this.onHomeKey(event);\n                    break;\n\n                case 'End':\n                    this.onEndKey(event);\n                    break;\n\n                case 'Enter':\n                case 'NumpadEnter':\n                case 'Space':\n                    this.onEnterKey(event);\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onArrowDownKey(event) {\n            const nextPanel = this.findNextPanel(this.findPanel(event.currentTarget));\n\n            nextPanel ? this.changeFocusedPanel(event, nextPanel) : this.onHomeKey(event);\n            event.preventDefault();\n        },\n        onArrowUpKey(event) {\n            const prevPanel = this.findPrevPanel(this.findPanel(event.currentTarget));\n\n            prevPanel ? this.changeFocusedPanel(event, prevPanel) : this.onEndKey(event);\n            event.preventDefault();\n        },\n        onHomeKey(event) {\n            const firstPanel = this.findFirstPanel();\n\n            this.changeFocusedPanel(event, firstPanel);\n            event.preventDefault();\n        },\n        onEndKey(event) {\n            const lastPanel = this.findLastPanel();\n\n            this.changeFocusedPanel(event, lastPanel);\n            event.preventDefault();\n        },\n        onEnterKey(event) {\n            this.changeActiveValue();\n            event.preventDefault();\n        },\n        findPanel(headerElement) {\n            return headerElement?.closest('[data-pc-name=\"accordionpanel\"]');\n        },\n        findHeader(panelElement) {\n            return findSingle(panelElement, '[data-pc-name=\"accordionheader\"]');\n        },\n        findNextPanel(panelElement, selfCheck = false) {\n            const element = selfCheck ? panelElement : panelElement.nextElementSibling;\n\n            return element ? (getAttribute(element, 'data-p-disabled') ? this.findNextPanel(element) : this.findHeader(element)) : null;\n        },\n        findPrevPanel(panelElement, selfCheck = false) {\n            const element = selfCheck ? panelElement : panelElement.previousElementSibling;\n\n            return element ? (getAttribute(element, 'data-p-disabled') ? this.findPrevPanel(element) : this.findHeader(element)) : null;\n        },\n        findFirstPanel() {\n            return this.findNextPanel(this.$pcAccordion.$el.firstElementChild, true);\n        },\n        findLastPanel() {\n            return this.findPrevPanel(this.$pcAccordion.$el.lastElementChild, true);\n        },\n        changeActiveValue() {\n            this.$pcAccordion.updateValue(this.$pcAccordionPanel.value);\n        },\n        changeFocusedPanel(event, element) {\n            focus(this.findHeader(element));\n        }\n    },\n    computed: {\n        id() {\n            return `${this.$pcAccordion.id}_accordionheader_${this.$pcAccordionPanel.value}`;\n        },\n        ariaControls() {\n            return `${this.$pcAccordion.id}_accordioncontent_${this.$pcAccordionPanel.value}`;\n        },\n        attrs() {\n            return mergeProps(this.asAttrs, this.a11yAttrs, this.ptmi('root', this.ptParams));\n        },\n        asAttrs() {\n            return this.as === 'BUTTON' ? { type: 'button', disabled: this.$pcAccordionPanel.disabled } : undefined;\n        },\n        a11yAttrs() {\n            return {\n                id: this.id,\n                tabindex: this.$pcAccordion.tabindex,\n                'aria-expanded': this.$pcAccordionPanel.active,\n                'aria-controls': this.ariaControls,\n                'data-pc-name': 'accordionheader',\n                'data-p-disabled': this.$pcAccordionPanel.disabled,\n                'data-p-active': this.$pcAccordionPanel.active,\n                onFocus: this.onFocus,\n                onKeydown: this.onKeydown\n            };\n        },\n        ptParams() {\n            return {\n                context: {\n                    active: this.$pcAccordionPanel.active\n                }\n            };\n        }\n    },\n    components: {\n        ChevronUpIcon,\n        ChevronDownIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <component v-if=\"!asChild\" :is=\"as\" v-ripple :class=\"cx('root')\" @click=\"onClick\" v-bind=\"attrs\">\n        <slot :active=\"$pcAccordionPanel.active\"></slot>\n        <slot name=\"toggleicon\" :active=\"$pcAccordionPanel.active\" :class=\"cx('toggleicon')\">\n            <component\n                v-if=\"$pcAccordionPanel.active\"\n                :is=\"$pcAccordion.$slots.collapseicon ? $pcAccordion.$slots.collapseicon : $pcAccordion.collapseIcon ? 'span' : 'ChevronUpIcon'\"\n                :class=\"[$pcAccordion.collapseIcon, cx('toggleicon')]\"\n                aria-hidden=\"true\"\n                v-bind=\"ptm('toggleicon', ptParams)\"\n            ></component>\n            <component\n                v-else\n                :is=\"$pcAccordion.$slots.expandicon ? $pcAccordion.$slots.expandicon : $pcAccordion.expandIcon ? 'span' : 'ChevronDownIcon'\"\n                :class=\"[$pcAccordion.expandIcon, cx('toggleicon')]\"\n                aria-hidden=\"true\"\n                v-bind=\"ptm('toggleicon', ptParams)\"\n            ></component>\n        </slot>\n    </component>\n    <slot v-else :class=\"cx('root')\" :active=\"$pcAccordionPanel.active\" :a11yAttrs=\"a11yAttrs\" :onClick=\"onClick\"></slot>\n</template>\n\n<script>\nimport { findSingle, getAttribute, focus } from '@primeuix/utils/dom';\nimport ChevronDownIcon from '@primevue/icons/chevrondown';\nimport ChevronUpIcon from '@primevue/icons/chevronup';\nimport Ripple from 'primevue/ripple';\nimport { mergeProps } from 'vue';\nimport BaseAccordionHeader from './BaseAccordionHeader.vue';\n\nexport default {\n    name: 'AccordionHeader',\n    extends: BaseAccordionHeader,\n    inheritAttrs: false,\n    inject: ['$pcAccordion', '$pcAccordionPanel'],\n    methods: {\n        onFocus() {\n            this.$pcAccordion.selectOnFocus && this.changeActiveValue();\n        },\n        onClick() {\n            this.changeActiveValue();\n        },\n        onKeydown(event) {\n            switch (event.code) {\n                case 'ArrowDown':\n                    this.onArrowDownKey(event);\n                    break;\n\n                case 'ArrowUp':\n                    this.onArrowUpKey(event);\n                    break;\n\n                case 'Home':\n                    this.onHomeKey(event);\n                    break;\n\n                case 'End':\n                    this.onEndKey(event);\n                    break;\n\n                case 'Enter':\n                case 'NumpadEnter':\n                case 'Space':\n                    this.onEnterKey(event);\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onArrowDownKey(event) {\n            const nextPanel = this.findNextPanel(this.findPanel(event.currentTarget));\n\n            nextPanel ? this.changeFocusedPanel(event, nextPanel) : this.onHomeKey(event);\n            event.preventDefault();\n        },\n        onArrowUpKey(event) {\n            const prevPanel = this.findPrevPanel(this.findPanel(event.currentTarget));\n\n            prevPanel ? this.changeFocusedPanel(event, prevPanel) : this.onEndKey(event);\n            event.preventDefault();\n        },\n        onHomeKey(event) {\n            const firstPanel = this.findFirstPanel();\n\n            this.changeFocusedPanel(event, firstPanel);\n            event.preventDefault();\n        },\n        onEndKey(event) {\n            const lastPanel = this.findLastPanel();\n\n            this.changeFocusedPanel(event, lastPanel);\n            event.preventDefault();\n        },\n        onEnterKey(event) {\n            this.changeActiveValue();\n            event.preventDefault();\n        },\n        findPanel(headerElement) {\n            return headerElement?.closest('[data-pc-name=\"accordionpanel\"]');\n        },\n        findHeader(panelElement) {\n            return findSingle(panelElement, '[data-pc-name=\"accordionheader\"]');\n        },\n        findNextPanel(panelElement, selfCheck = false) {\n            const element = selfCheck ? panelElement : panelElement.nextElementSibling;\n\n            return element ? (getAttribute(element, 'data-p-disabled') ? this.findNextPanel(element) : this.findHeader(element)) : null;\n        },\n        findPrevPanel(panelElement, selfCheck = false) {\n            const element = selfCheck ? panelElement : panelElement.previousElementSibling;\n\n            return element ? (getAttribute(element, 'data-p-disabled') ? this.findPrevPanel(element) : this.findHeader(element)) : null;\n        },\n        findFirstPanel() {\n            return this.findNextPanel(this.$pcAccordion.$el.firstElementChild, true);\n        },\n        findLastPanel() {\n            return this.findPrevPanel(this.$pcAccordion.$el.lastElementChild, true);\n        },\n        changeActiveValue() {\n            this.$pcAccordion.updateValue(this.$pcAccordionPanel.value);\n        },\n        changeFocusedPanel(event, element) {\n            focus(this.findHeader(element));\n        }\n    },\n    computed: {\n        id() {\n            return `${this.$pcAccordion.id}_accordionheader_${this.$pcAccordionPanel.value}`;\n        },\n        ariaControls() {\n            return `${this.$pcAccordion.id}_accordioncontent_${this.$pcAccordionPanel.value}`;\n        },\n        attrs() {\n            return mergeProps(this.asAttrs, this.a11yAttrs, this.ptmi('root', this.ptParams));\n        },\n        asAttrs() {\n            return this.as === 'BUTTON' ? { type: 'button', disabled: this.$pcAccordionPanel.disabled } : undefined;\n        },\n        a11yAttrs() {\n            return {\n                id: this.id,\n                tabindex: this.$pcAccordion.tabindex,\n                'aria-expanded': this.$pcAccordionPanel.active,\n                'aria-controls': this.ariaControls,\n                'data-pc-name': 'accordionheader',\n                'data-p-disabled': this.$pcAccordionPanel.disabled,\n                'data-p-active': this.$pcAccordionPanel.active,\n                onFocus: this.onFocus,\n                onKeydown: this.onKeydown\n            };\n        },\n        ptParams() {\n            return {\n                context: {\n                    active: this.$pcAccordionPanel.active\n                }\n            };\n        }\n    },\n    components: {\n        ChevronUpIcon,\n        ChevronDownIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","as","type","String","Object","asChild","Boolean","style","AccordionHeaderStyle","provide","$pcAccordionHeader","$parentInstance","BaseAccordionHeader","inheritAttrs","inject","methods","onFocus","$pcAccordion","selectOnFocus","changeActiveValue","onClick","onKeydown","event","code","onArrowDownKey","onArrowUpKey","onHomeKey","onEndKey","onEnterKey","nextPanel","findNextPanel","findPanel","currentTarget","changeFocusedPanel","preventDefault","prevPanel","findPrevPanel","firstPanel","findFirstPanel","lastPanel","findLastPanel","headerElement","closest","findHeader","panelElement","findSingle","selfCheck","element","nextElementSibling","getAttribute","previousElementSibling","$el","firstElementChild","lastElementChild","updateValue","$pcAccordionPanel","value","focus","computed","id","concat","ariaControls","attrs","mergeProps","asAttrs","a11yAttrs","ptmi","ptParams","disabled","undefined","tabindex","active","context","components","ChevronUpIcon","ChevronDownIcon","directives","ripple","Ripple","_ctx","_createBlock","_resolveDynamicComponent","_mergeProps","cx","$options","_renderSlot","$slots","_openBlock","collapseicon","collapseIcon","ptm","expandicon","expandIcon"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/accordionheader/BaseAccordionHeader.vue","../../src/accordionheader/AccordionHeader.vue","../../src/accordionheader/AccordionHeader.vue?vue&type=template&id=3b2aba2e&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport AccordionHeaderStyle from 'primevue/accordionheader/style';\n\nexport default {\n    name: 'BaseAccordionHeader',\n    extends: BaseComponent,\n    props: {\n        as: {\n            type: [String, Object],\n            default: 'BUTTON'\n        },\n        asChild: {\n            type: Boolean,\n            default: false\n        }\n    },\n    style: AccordionHeaderStyle,\n    provide() {\n        return {\n            $pcAccordionHeader: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <component v-if=\"!asChild\" :is=\"as\" v-ripple :data-p=\"dataP\" :class=\"cx('root')\" @click=\"onClick\" v-bind=\"attrs\">\n        <slot :active=\"$pcAccordionPanel.active\"></slot>\n        <slot name=\"toggleicon\" :active=\"$pcAccordionPanel.active\" :class=\"cx('toggleicon')\">\n            <component\n                v-if=\"$pcAccordionPanel.active\"\n                :is=\"$pcAccordion.$slots.collapseicon ? $pcAccordion.$slots.collapseicon : $pcAccordion.collapseIcon ? 'span' : 'ChevronUpIcon'\"\n                :class=\"[$pcAccordion.collapseIcon, cx('toggleicon')]\"\n                aria-hidden=\"true\"\n                v-bind=\"ptm('toggleicon', ptParams)\"\n            ></component>\n            <component\n                v-else\n                :is=\"$pcAccordion.$slots.expandicon ? $pcAccordion.$slots.expandicon : $pcAccordion.expandIcon ? 'span' : 'ChevronDownIcon'\"\n                :class=\"[$pcAccordion.expandIcon, cx('toggleicon')]\"\n                aria-hidden=\"true\"\n                v-bind=\"ptm('toggleicon', ptParams)\"\n            ></component>\n        </slot>\n    </component>\n    <slot v-else :class=\"cx('root')\" :active=\"$pcAccordionPanel.active\" :a11yAttrs=\"a11yAttrs\" :onClick=\"onClick\"></slot>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport { findSingle, focus, getAttribute } from '@primeuix/utils/dom';\nimport ChevronDownIcon from '@primevue/icons/chevrondown';\nimport ChevronUpIcon from '@primevue/icons/chevronup';\nimport Ripple from 'primevue/ripple';\nimport { mergeProps } from 'vue';\nimport BaseAccordionHeader from './BaseAccordionHeader.vue';\n\nexport default {\n    name: 'AccordionHeader',\n    extends: BaseAccordionHeader,\n    inheritAttrs: false,\n    inject: ['$pcAccordion', '$pcAccordionPanel'],\n    methods: {\n        onFocus() {\n            this.$pcAccordion.selectOnFocus && this.changeActiveValue();\n        },\n        onClick() {\n            this.changeActiveValue();\n        },\n        onKeydown(event) {\n            switch (event.code) {\n                case 'ArrowDown':\n                    this.onArrowDownKey(event);\n                    break;\n\n                case 'ArrowUp':\n                    this.onArrowUpKey(event);\n                    break;\n\n                case 'Home':\n                    this.onHomeKey(event);\n                    break;\n\n                case 'End':\n                    this.onEndKey(event);\n                    break;\n\n                case 'Enter':\n                case 'NumpadEnter':\n                case 'Space':\n                    this.onEnterKey(event);\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onArrowDownKey(event) {\n            const nextPanel = this.findNextPanel(this.findPanel(event.currentTarget));\n\n            nextPanel ? this.changeFocusedPanel(event, nextPanel) : this.onHomeKey(event);\n            event.preventDefault();\n        },\n        onArrowUpKey(event) {\n            const prevPanel = this.findPrevPanel(this.findPanel(event.currentTarget));\n\n            prevPanel ? this.changeFocusedPanel(event, prevPanel) : this.onEndKey(event);\n            event.preventDefault();\n        },\n        onHomeKey(event) {\n            const firstPanel = this.findFirstPanel();\n\n            this.changeFocusedPanel(event, firstPanel);\n            event.preventDefault();\n        },\n        onEndKey(event) {\n            const lastPanel = this.findLastPanel();\n\n            this.changeFocusedPanel(event, lastPanel);\n            event.preventDefault();\n        },\n        onEnterKey(event) {\n            this.changeActiveValue();\n            event.preventDefault();\n        },\n        findPanel(headerElement) {\n            return headerElement?.closest('[data-pc-name=\"accordionpanel\"]');\n        },\n        findHeader(panelElement) {\n            return findSingle(panelElement, '[data-pc-name=\"accordionheader\"]');\n        },\n        findNextPanel(panelElement, selfCheck = false) {\n            const element = selfCheck ? panelElement : panelElement.nextElementSibling;\n\n            return element ? (getAttribute(element, 'data-p-disabled') ? this.findNextPanel(element) : this.findHeader(element)) : null;\n        },\n        findPrevPanel(panelElement, selfCheck = false) {\n            const element = selfCheck ? panelElement : panelElement.previousElementSibling;\n\n            return element ? (getAttribute(element, 'data-p-disabled') ? this.findPrevPanel(element) : this.findHeader(element)) : null;\n        },\n        findFirstPanel() {\n            return this.findNextPanel(this.$pcAccordion.$el.firstElementChild, true);\n        },\n        findLastPanel() {\n            return this.findPrevPanel(this.$pcAccordion.$el.lastElementChild, true);\n        },\n        changeActiveValue() {\n            this.$pcAccordion.updateValue(this.$pcAccordionPanel.value);\n        },\n        changeFocusedPanel(event, element) {\n            focus(this.findHeader(element));\n        }\n    },\n    computed: {\n        id() {\n            return `${this.$pcAccordion.id}_accordionheader_${this.$pcAccordionPanel.value}`;\n        },\n        ariaControls() {\n            return `${this.$pcAccordion.id}_accordioncontent_${this.$pcAccordionPanel.value}`;\n        },\n        attrs() {\n            return mergeProps(this.asAttrs, this.a11yAttrs, this.ptmi('root', this.ptParams));\n        },\n        asAttrs() {\n            return this.as === 'BUTTON' ? { type: 'button', disabled: this.$pcAccordionPanel.disabled } : undefined;\n        },\n        a11yAttrs() {\n            return {\n                id: this.id,\n                tabindex: this.$pcAccordion.tabindex,\n                'aria-expanded': this.$pcAccordionPanel.active,\n                'aria-controls': this.ariaControls,\n                'data-pc-name': 'accordionheader',\n                'data-p-disabled': this.$pcAccordionPanel.disabled,\n                'data-p-active': this.$pcAccordionPanel.active,\n                onFocus: this.onFocus,\n                onKeydown: this.onKeydown\n            };\n        },\n        ptParams() {\n            return {\n                context: {\n                    active: this.$pcAccordionPanel.active\n                }\n            };\n        },\n        dataP() {\n            return cn({\n                active: this.$pcAccordionPanel.active\n            });\n        }\n    },\n    components: {\n        ChevronUpIcon,\n        ChevronDownIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <component v-if=\"!asChild\" :is=\"as\" v-ripple :data-p=\"dataP\" :class=\"cx('root')\" @click=\"onClick\" v-bind=\"attrs\">\n        <slot :active=\"$pcAccordionPanel.active\"></slot>\n        <slot name=\"toggleicon\" :active=\"$pcAccordionPanel.active\" :class=\"cx('toggleicon')\">\n            <component\n                v-if=\"$pcAccordionPanel.active\"\n                :is=\"$pcAccordion.$slots.collapseicon ? $pcAccordion.$slots.collapseicon : $pcAccordion.collapseIcon ? 'span' : 'ChevronUpIcon'\"\n                :class=\"[$pcAccordion.collapseIcon, cx('toggleicon')]\"\n                aria-hidden=\"true\"\n                v-bind=\"ptm('toggleicon', ptParams)\"\n            ></component>\n            <component\n                v-else\n                :is=\"$pcAccordion.$slots.expandicon ? $pcAccordion.$slots.expandicon : $pcAccordion.expandIcon ? 'span' : 'ChevronDownIcon'\"\n                :class=\"[$pcAccordion.expandIcon, cx('toggleicon')]\"\n                aria-hidden=\"true\"\n                v-bind=\"ptm('toggleicon', ptParams)\"\n            ></component>\n        </slot>\n    </component>\n    <slot v-else :class=\"cx('root')\" :active=\"$pcAccordionPanel.active\" :a11yAttrs=\"a11yAttrs\" :onClick=\"onClick\"></slot>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport { findSingle, focus, getAttribute } from '@primeuix/utils/dom';\nimport ChevronDownIcon from '@primevue/icons/chevrondown';\nimport ChevronUpIcon from '@primevue/icons/chevronup';\nimport Ripple from 'primevue/ripple';\nimport { mergeProps } from 'vue';\nimport BaseAccordionHeader from './BaseAccordionHeader.vue';\n\nexport default {\n    name: 'AccordionHeader',\n    extends: BaseAccordionHeader,\n    inheritAttrs: false,\n    inject: ['$pcAccordion', '$pcAccordionPanel'],\n    methods: {\n        onFocus() {\n            this.$pcAccordion.selectOnFocus && this.changeActiveValue();\n        },\n        onClick() {\n            this.changeActiveValue();\n        },\n        onKeydown(event) {\n            switch (event.code) {\n                case 'ArrowDown':\n                    this.onArrowDownKey(event);\n                    break;\n\n                case 'ArrowUp':\n                    this.onArrowUpKey(event);\n                    break;\n\n                case 'Home':\n                    this.onHomeKey(event);\n                    break;\n\n                case 'End':\n                    this.onEndKey(event);\n                    break;\n\n                case 'Enter':\n                case 'NumpadEnter':\n                case 'Space':\n                    this.onEnterKey(event);\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onArrowDownKey(event) {\n            const nextPanel = this.findNextPanel(this.findPanel(event.currentTarget));\n\n            nextPanel ? this.changeFocusedPanel(event, nextPanel) : this.onHomeKey(event);\n            event.preventDefault();\n        },\n        onArrowUpKey(event) {\n            const prevPanel = this.findPrevPanel(this.findPanel(event.currentTarget));\n\n            prevPanel ? this.changeFocusedPanel(event, prevPanel) : this.onEndKey(event);\n            event.preventDefault();\n        },\n        onHomeKey(event) {\n            const firstPanel = this.findFirstPanel();\n\n            this.changeFocusedPanel(event, firstPanel);\n            event.preventDefault();\n        },\n        onEndKey(event) {\n            const lastPanel = this.findLastPanel();\n\n            this.changeFocusedPanel(event, lastPanel);\n            event.preventDefault();\n        },\n        onEnterKey(event) {\n            this.changeActiveValue();\n            event.preventDefault();\n        },\n        findPanel(headerElement) {\n            return headerElement?.closest('[data-pc-name=\"accordionpanel\"]');\n        },\n        findHeader(panelElement) {\n            return findSingle(panelElement, '[data-pc-name=\"accordionheader\"]');\n        },\n        findNextPanel(panelElement, selfCheck = false) {\n            const element = selfCheck ? panelElement : panelElement.nextElementSibling;\n\n            return element ? (getAttribute(element, 'data-p-disabled') ? this.findNextPanel(element) : this.findHeader(element)) : null;\n        },\n        findPrevPanel(panelElement, selfCheck = false) {\n            const element = selfCheck ? panelElement : panelElement.previousElementSibling;\n\n            return element ? (getAttribute(element, 'data-p-disabled') ? this.findPrevPanel(element) : this.findHeader(element)) : null;\n        },\n        findFirstPanel() {\n            return this.findNextPanel(this.$pcAccordion.$el.firstElementChild, true);\n        },\n        findLastPanel() {\n            return this.findPrevPanel(this.$pcAccordion.$el.lastElementChild, true);\n        },\n        changeActiveValue() {\n            this.$pcAccordion.updateValue(this.$pcAccordionPanel.value);\n        },\n        changeFocusedPanel(event, element) {\n            focus(this.findHeader(element));\n        }\n    },\n    computed: {\n        id() {\n            return `${this.$pcAccordion.id}_accordionheader_${this.$pcAccordionPanel.value}`;\n        },\n        ariaControls() {\n            return `${this.$pcAccordion.id}_accordioncontent_${this.$pcAccordionPanel.value}`;\n        },\n        attrs() {\n            return mergeProps(this.asAttrs, this.a11yAttrs, this.ptmi('root', this.ptParams));\n        },\n        asAttrs() {\n            return this.as === 'BUTTON' ? { type: 'button', disabled: this.$pcAccordionPanel.disabled } : undefined;\n        },\n        a11yAttrs() {\n            return {\n                id: this.id,\n                tabindex: this.$pcAccordion.tabindex,\n                'aria-expanded': this.$pcAccordionPanel.active,\n                'aria-controls': this.ariaControls,\n                'data-pc-name': 'accordionheader',\n                'data-p-disabled': this.$pcAccordionPanel.disabled,\n                'data-p-active': this.$pcAccordionPanel.active,\n                onFocus: this.onFocus,\n                onKeydown: this.onKeydown\n            };\n        },\n        ptParams() {\n            return {\n                context: {\n                    active: this.$pcAccordionPanel.active\n                }\n            };\n        },\n        dataP() {\n            return cn({\n                active: this.$pcAccordionPanel.active\n            });\n        }\n    },\n    components: {\n        ChevronUpIcon,\n        ChevronDownIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","as","type","String","Object","asChild","Boolean","style","AccordionHeaderStyle","provide","$pcAccordionHeader","$parentInstance","BaseAccordionHeader","inheritAttrs","inject","methods","onFocus","$pcAccordion","selectOnFocus","changeActiveValue","onClick","onKeydown","event","code","onArrowDownKey","onArrowUpKey","onHomeKey","onEndKey","onEnterKey","nextPanel","findNextPanel","findPanel","currentTarget","changeFocusedPanel","preventDefault","prevPanel","findPrevPanel","firstPanel","findFirstPanel","lastPanel","findLastPanel","headerElement","closest","findHeader","panelElement","findSingle","selfCheck","element","nextElementSibling","getAttribute","previousElementSibling","$el","firstElementChild","lastElementChild","updateValue","$pcAccordionPanel","value","focus","computed","id","concat","ariaControls","attrs","mergeProps","asAttrs","a11yAttrs","ptmi","ptParams","disabled","undefined","tabindex","active","context","dataP","cn","components","ChevronUpIcon","ChevronDownIcon","directives","ripple","Ripple","_ctx","_createBlock","_resolveDynamicComponent","_mergeProps","$options","cx","_renderSlot","$slots","_openBlock","collapseicon","collapseIcon","ptm","expandicon","expandIcon"],"mappings":"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"}

package/autocomplete/AutoComplete.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" v-bind="ptmi('root')">
+    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" :data-p="containerDataP" v-bind="ptmi('root')">
         <InputText
             v-if="!multiple"
             ref="focusInput"
@@ -31,6 +31,7 @@
             @input="onInput"
             @change="onChange"
             :unstyled="unstyled"
+            :data-p-has-dropdown="dropdown"
             :pt="ptm('pcInputText')"
         />
         <ul
@@ -44,6 +45,8 @@
             @focus="onMultipleContainerFocus"
             @blur="onMultipleContainerBlur"
             @keydown="onMultipleContainerKeyDown"
+            :data-p-has-dropdown="dropdown"
+            :data-p="inputMultipleDataP"
             v-bind="ptm('inputMultiple')"
         >
             <li
@@ -60,7 +63,16 @@
             >
                 <slot name="chip" :class="cx('pcChip')" :value="option" :index="i" :removeCallback="(event) => removeOption(event, i)" v-bind="ptm('pcChip')">
                     <!-- TODO: removetokenicon and removeTokenIcon  deprecated since v4.0. Use chipicon slot and chipIcon prop-->
-                    <Chip :class="cx('pcChip')" :label="getOptionLabel(option)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('pcChip')">
+                    <Chip
+                        :class="cx('pcChip')"
+                        :label="getOptionLabel(option)"
+                        :removeIcon="chipIcon || removeTokenIcon"
+                        removable
+                        :unstyled="unstyled"
+                        @remove="removeOption($event, i)"
+                        :data-p-focused="focusedMultipleOptionIndex === i"
+                        :pt="ptm('pcChip')"
+                    >
                         <template #removeicon>
                             <slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :index="i" :removeCallback="(event) => removeOption(event, i)" />
                         </template>
@@ -97,8 +109,8 @@
             </li>
         </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" v-bind="ptm('loader')" />
-            <SpinnerIcon v-else :class="cx('loader')" spin aria-hidden="true" v-bind="ptm('loader')" />
+            <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')" />
         </slot>
         <slot :name="$slots.dropdown ? 'dropdown' : 'dropdownbutton'" :toggleCallback="(event) => onDropdownClick(event)">
             <button
@@ -118,12 +130,22 @@
                 </slot>
             </button>
         </slot>
-        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
+        <span v-if="typeahead" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
             {{ searchResultMessageText }}
         </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 }" @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"
+                    :data-p="overlayDataP"
+                    v-bind="ptm('overlay')"
+                >
                     <slot name="header" :value="d_value" :suggestions="visibleOptions"></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')">
@@ -155,7 +177,7 @@
                                             @click="onOptionSelect($event, option)"
                                             @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
                                             :data-p-selected="isSelected(option)"
-                                            :data-p-focus="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
+                                            :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
                                             :data-p-disabled="isOptionDisabled(option)"
                                             v-bind="getPTOptions(option, getItemOptions, i, 'option')"
                                         >
@@ -183,6 +205,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 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';
@@ -387,10 +410,13 @@ export default {
 
                 case 'Enter':
                 case 'NumpadEnter':
-                case 'Space':
                     this.onEnterKey(event);
                     break;
 
+                case 'Space':
+                    this.onSpaceKey(event);
+                    break;
+
                 case 'Escape':
                     this.onEscapeKey(event);
                     break;
@@ -448,7 +474,7 @@ export default {
 
                 // when forceSelection is on, prevent called twice onOptionSelect()
                 if (this.visibleOptions && !this.multiple) {
-                    let value = this.multiple ? this.$refs.focusInput.value : this.$refs.focusInput.$el.value;
+                    let value = this.multiple ? this.$refs.focusInput.value : this.$refs.focusInput?.$el?.value;
                     const matchedValue = this.visibleOptions.find((option) => this.isOptionMatched(option, value || ''));
 
                     if (matchedValue !== undefined) {
@@ -458,8 +484,12 @@ export default {
                 }
 
                 if (!valid) {
-                    if (this.multiple) this.$refs.focusInput.value = '';
-                    else this.$refs.focusInput.$el.value = '';
+                    if (this.multiple) {
+                        this.$refs.focusInput.value = '';
+                    } else {
+                        const inputEl = this.$refs.focusInput?.$el;
+                        inputEl && (inputEl.value = '');
+                    }
                     this.$emit('clear');
                     !this.multiple && this.updateModel(event, null);
                 }
@@ -682,8 +712,10 @@ export default {
         onEnterKey(event) {
             if (!this.typeahead) {
                 if (this.multiple) {
-                    this.updateModel(event, [...(this.d_value || []), event.target.value]);
-                    this.$refs.focusInput.value = '';
+                    if (event.target.value.trim()) {
+                        this.updateModel(event, [...(this.d_value || []), event.target.value.trim()]);
+                        this.$refs.focusInput.value = '';
+                    }
                 }
             } else {
                 if (!this.overlayVisible) {
@@ -702,8 +734,11 @@ export default {
                     this.hide();
                 }
             }
-
-            event.preventDefault();
+        },
+        onSpaceKey(event) {
+            if (this.focusedOptionIndex !== -1) {
+                this.onEnterKey(event);
+            }
         },
         onEscapeKey(event) {
             this.overlayVisible && this.hide(true);
@@ -752,7 +787,7 @@ export default {
         onOverlayEnter(el) {
             ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);
 
-            addStyle(el, { position: 'absolute', top: '0', left: '0' });
+            addStyle(el, { position: 'absolute', top: '0' });
             this.alignOverlay();
         },
         onOverlayAfterEnter() {
@@ -1052,6 +1087,27 @@ export default {
         },
         panelId() {
             return this.$id + '_panel';
+        },
+        containerDataP() {
+            return cn({
+                fluid: this.$fluid
+            });
+        },
+        overlayDataP() {
+            return cn({
+                ['portal-' + this.appendTo]: 'portal-' + this.appendTo
+            });
+        },
+        inputMultipleDataP() {
+            return cn({
+                invalid: this.$invalid,
+                disabled: this.disabled,
+                focus: this.focused,
+                fluid: this.$fluid,
+                filled: this.$variant === 'filled',
+                empty: !this.$filled,
+                [this.size]: this.size
+            });
         }
     },
     components: {

package/autocomplete/index.d.ts

@@ -360,7 +360,7 @@ export interface AutoCompleteProps {
      * Specifies the behavior dropdown button. Default 'blank' mode sends an empty string and 'current' mode sends the input value.
      * @defaultValue blank
      */
-    dropdownMode?: 'blank' | 'current' | undefined;
+    dropdownMode?: HintedString<'blank' | 'current'> | undefined;
     /**
      * Specifies if multiple values can be selected.
      * @defaultValue false
@@ -378,7 +378,7 @@ export interface AutoCompleteProps {
     /**
      * Defines the size of the component.
      */
-    size?: 'small' | 'large' | undefined;
+    size?: HintedString<'small' | 'large'> | undefined;
     /**
      * When present, it specifies that the component should have invalid state style.
      * @defaultValue false
@@ -393,7 +393,7 @@ export interface AutoCompleteProps {
      * Specifies the input variant of the component.
      * @defaultValue null
      */
-    variant?: 'outlined' | 'filled' | undefined | null;
+    variant?: HintedString<'outlined' | 'filled'> | undefined | null;
     /**
      * A property to uniquely identify an option.
      */