primevue 4.3.1 → 4.3.3

package/message/index.mjs

@@ -1,3 +1,4 @@
+import { cn } from '@primeuix/utils';
 import TimesIcon from '@primevue/icons/times';
 import Ripple from 'primevue/ripple';
 import BaseComponent from '@primevue/core/basecomponent';
@@ -50,6 +51,10 @@ var script$1 = {
   }
 };
 
+function _typeof$1(o) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$1(o); }
+function _defineProperty$1(e, r, t) { return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey$1(t) { var i = _toPrimitive$1(t, "string"); return "symbol" == _typeof$1(i) ? i : i + ""; }
+function _toPrimitive$1(t, r) { if ("object" != _typeof$1(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$1(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var script = {
   name: 'Message',
   "extends": script$1,
@@ -79,6 +84,12 @@ var script = {
   computed: {
     closeAriaLabel: function closeAriaLabel() {
       return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
+    },
+    dataP: function dataP() {
+      return cn(_defineProperty$1(_defineProperty$1({
+        outlined: this.variant === 'outlined',
+        simple: this.variant === 'simple'
+      }, this.severity, this.severity), this.size, this.size));
     }
   },
   directives: {
@@ -95,7 +106,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var _hoisted_1 = ["aria-label"];
+var _hoisted_1 = ["data-p"];
+var _hoisted_2 = ["data-p"];
+var _hoisted_3 = ["data-p"];
+var _hoisted_4 = ["aria-label", "data-p"];
+var _hoisted_5 = ["data-p"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_TimesIcon = resolveComponent("TimesIcon");
   var _directive_ripple = resolveDirective("ripple");
@@ -108,39 +123,46 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": _ctx.cx('root'),
         role: "alert",
         "aria-live": "assertive",
-        "aria-atomic": "true"
+        "aria-atomic": "true",
+        "data-p": $options.dataP
       }, _ctx.ptm('root')), [_ctx.$slots.container ? renderSlot(_ctx.$slots, "container", {
         key: 0,
         closeCallback: $options.close
       }) : (openBlock(), createElementBlock("div", mergeProps({
         key: 1,
-        "class": _ctx.cx('content')
+        "class": _ctx.cx('content'),
+        "data-p": $options.dataP
       }, _ctx.ptm('content')), [renderSlot(_ctx.$slots, "icon", {
         "class": normalizeClass(_ctx.cx('icon'))
       }, function () {
         return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.icon ? 'span' : null), mergeProps({
-          "class": [_ctx.cx('icon'), _ctx.icon]
-        }, _ctx.ptm('icon')), null, 16, ["class"]))];
+          "class": [_ctx.cx('icon'), _ctx.icon],
+          "data-p": $options.dataP
+        }, _ctx.ptm('icon')), null, 16, ["class", "data-p"]))];
       }), _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", mergeProps({
         key: 0,
-        "class": _ctx.cx('text')
-      }, _ctx.ptm('text')), [renderSlot(_ctx.$slots, "default")], 16)) : createCommentVNode("", true), _ctx.closable ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
+        "class": _ctx.cx('text'),
+        "data-p": $options.dataP
+      }, _ctx.ptm('text')), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_3)) : createCommentVNode("", true), _ctx.closable ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
         key: 1,
         "class": _ctx.cx('closeButton'),
         "aria-label": $options.closeAriaLabel,
         type: "button",
         onClick: _cache[0] || (_cache[0] = function ($event) {
           return $options.close($event);
-        })
+        }),
+        "data-p": $options.dataP
       }, _objectSpread(_objectSpread({}, _ctx.closeButtonProps), _ctx.ptm('closeButton'))), [renderSlot(_ctx.$slots, "closeicon", {}, function () {
         return [_ctx.closeIcon ? (openBlock(), createElementBlock("i", mergeProps({
           key: 0,
-          "class": [_ctx.cx('closeIcon'), _ctx.closeIcon]
-        }, _ctx.ptm('closeIcon')), null, 16)) : (openBlock(), createBlock(_component_TimesIcon, mergeProps({
+          "class": [_ctx.cx('closeIcon'), _ctx.closeIcon],
+          "data-p": $options.dataP
+        }, _ctx.ptm('closeIcon')), null, 16, _hoisted_5)) : (openBlock(), createBlock(_component_TimesIcon, mergeProps({
           key: 1,
-          "class": [_ctx.cx('closeIcon'), _ctx.closeIcon]
-        }, _ctx.ptm('closeIcon')), null, 16, ["class"]))];
-      })], 16, _hoisted_1)), [[_directive_ripple]]) : createCommentVNode("", true)], 16))], 16), [[vShow, $data.visible]])];
+          "class": [_ctx.cx('closeIcon'), _ctx.closeIcon],
+          "data-p": $options.dataP
+        }, _ctx.ptm('closeIcon')), null, 16, ["class", "data-p"]))];
+      })], 16, _hoisted_4)), [[_directive_ripple]]) : createCommentVNode("", true)], 16, _hoisted_2))], 16, _hoisted_1), [[vShow, $data.visible]])];
     }),
     _: 3
   }, 16);

package/message/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/message/BaseMessage.vue","../../src/message/Message.vue","../../src/message/Message.vue?vue&type=template&id=2b547520&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport MessageStyle from 'primevue/message/style';\n\nexport default {\n    name: 'BaseMessage',\n    extends: BaseComponent,\n    props: {\n        severity: {\n            type: String,\n            default: 'info'\n        },\n        closable: {\n            type: Boolean,\n            default: false\n        },\n        life: {\n            type: Number,\n            default: null\n        },\n        icon: {\n            type: String,\n            default: undefined\n        },\n        closeIcon: {\n            type: String,\n            default: undefined\n        },\n        closeButtonProps: {\n            type: null,\n            default: null\n        },\n        size: {\n            type: String,\n            default: null\n        },\n        variant: {\n            type: String,\n            default: null\n        }\n    },\n    style: MessageStyle,\n    provide() {\n        return {\n            $pcMessage: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <transition name=\"p-message\" appear v-bind=\"ptmi('transition')\">\n        <div v-show=\"visible\" :class=\"cx('root')\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" v-bind=\"ptm('root')\">\n            <slot v-if=\"$slots.container\" name=\"container\" :closeCallback=\"close\"></slot>\n            <div v-else :class=\"cx('content')\" v-bind=\"ptm('content')\">\n                <slot name=\"icon\" :class=\"cx('icon')\">\n                    <component :is=\"icon ? 'span' : null\" :class=\"[cx('icon'), icon]\" v-bind=\"ptm('icon')\"></component>\n                </slot>\n                <div v-if=\"$slots.default\" :class=\"cx('text')\" v-bind=\"ptm('text')\">\n                    <slot></slot>\n                </div>\n                <button v-if=\"closable\" v-ripple :class=\"cx('closeButton')\" :aria-label=\"closeAriaLabel\" type=\"button\" @click=\"close($event)\" v-bind=\"{ ...closeButtonProps, ...ptm('closeButton') }\">\n                    <slot name=\"closeicon\">\n                        <i v-if=\"closeIcon\" :class=\"[cx('closeIcon'), closeIcon]\" v-bind=\"ptm('closeIcon')\" />\n                        <TimesIcon v-else :class=\"[cx('closeIcon'), closeIcon]\" v-bind=\"ptm('closeIcon')\" />\n                    </slot>\n                </button>\n            </div>\n        </div>\n    </transition>\n</template>\n\n<script>\nimport TimesIcon from '@primevue/icons/times';\nimport Ripple from 'primevue/ripple';\nimport BaseMessage from './BaseMessage.vue';\n\nexport default {\n    name: 'Message',\n    extends: BaseMessage,\n    inheritAttrs: false,\n    emits: ['close', 'life-end'],\n    timeout: null,\n    data() {\n        return {\n            visible: true\n        };\n    },\n    mounted() {\n        if (this.life) {\n            setTimeout(() => {\n                this.visible = false;\n                this.$emit('life-end');\n            }, this.life);\n        }\n    },\n    methods: {\n        close(event) {\n            this.visible = false;\n            this.$emit('close', event);\n        }\n    },\n    computed: {\n        closeAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;\n        }\n    },\n    directives: {\n        ripple: Ripple\n    },\n    components: {\n        TimesIcon\n    }\n};\n</script>\n","<template>\n    <transition name=\"p-message\" appear v-bind=\"ptmi('transition')\">\n        <div v-show=\"visible\" :class=\"cx('root')\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" v-bind=\"ptm('root')\">\n            <slot v-if=\"$slots.container\" name=\"container\" :closeCallback=\"close\"></slot>\n            <div v-else :class=\"cx('content')\" v-bind=\"ptm('content')\">\n                <slot name=\"icon\" :class=\"cx('icon')\">\n                    <component :is=\"icon ? 'span' : null\" :class=\"[cx('icon'), icon]\" v-bind=\"ptm('icon')\"></component>\n                </slot>\n                <div v-if=\"$slots.default\" :class=\"cx('text')\" v-bind=\"ptm('text')\">\n                    <slot></slot>\n                </div>\n                <button v-if=\"closable\" v-ripple :class=\"cx('closeButton')\" :aria-label=\"closeAriaLabel\" type=\"button\" @click=\"close($event)\" v-bind=\"{ ...closeButtonProps, ...ptm('closeButton') }\">\n                    <slot name=\"closeicon\">\n                        <i v-if=\"closeIcon\" :class=\"[cx('closeIcon'), closeIcon]\" v-bind=\"ptm('closeIcon')\" />\n                        <TimesIcon v-else :class=\"[cx('closeIcon'), closeIcon]\" v-bind=\"ptm('closeIcon')\" />\n                    </slot>\n                </button>\n            </div>\n        </div>\n    </transition>\n</template>\n\n<script>\nimport TimesIcon from '@primevue/icons/times';\nimport Ripple from 'primevue/ripple';\nimport BaseMessage from './BaseMessage.vue';\n\nexport default {\n    name: 'Message',\n    extends: BaseMessage,\n    inheritAttrs: false,\n    emits: ['close', 'life-end'],\n    timeout: null,\n    data() {\n        return {\n            visible: true\n        };\n    },\n    mounted() {\n        if (this.life) {\n            setTimeout(() => {\n                this.visible = false;\n                this.$emit('life-end');\n            }, this.life);\n        }\n    },\n    methods: {\n        close(event) {\n            this.visible = false;\n            this.$emit('close', event);\n        }\n    },\n    computed: {\n        closeAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;\n        }\n    },\n    directives: {\n        ripple: Ripple\n    },\n    components: {\n        TimesIcon\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","severity","type","String","closable","Boolean","life","Number","icon","undefined","closeIcon","closeButtonProps","size","variant","style","MessageStyle","provide","$pcMessage","$parentInstance","BaseMessage","inheritAttrs","emits","timeout","data","visible","mounted","_this","setTimeout","$emit","methods","close","event","computed","closeAriaLabel","$primevue","config","locale","aria","directives","ripple","Ripple","components","TimesIcon","_openBlock","_createBlock","_Transition","_mergeProps","appear","_ctx","ptmi","_withDirectives","_createElementVNode","cx","role","ptm","$slots","container","_renderSlot","closeCallback","$options","_createElementBlock","_resolveDynamicComponent","onClick","_cache","$event","_objectSpread","_component_TimesIcon","$data"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/message/BaseMessage.vue","../../src/message/Message.vue","../../src/message/Message.vue?vue&type=template&id=47f98d28&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport MessageStyle from 'primevue/message/style';\n\nexport default {\n    name: 'BaseMessage',\n    extends: BaseComponent,\n    props: {\n        severity: {\n            type: String,\n            default: 'info'\n        },\n        closable: {\n            type: Boolean,\n            default: false\n        },\n        life: {\n            type: Number,\n            default: null\n        },\n        icon: {\n            type: String,\n            default: undefined\n        },\n        closeIcon: {\n            type: String,\n            default: undefined\n        },\n        closeButtonProps: {\n            type: null,\n            default: null\n        },\n        size: {\n            type: String,\n            default: null\n        },\n        variant: {\n            type: String,\n            default: null\n        }\n    },\n    style: MessageStyle,\n    provide() {\n        return {\n            $pcMessage: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <transition name=\"p-message\" appear v-bind=\"ptmi('transition')\">\n        <div v-show=\"visible\" :class=\"cx('root')\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" :data-p=\"dataP\" v-bind=\"ptm('root')\">\n            <slot v-if=\"$slots.container\" name=\"container\" :closeCallback=\"close\"></slot>\n            <div v-else :class=\"cx('content')\" :data-p=\"dataP\" v-bind=\"ptm('content')\">\n                <slot name=\"icon\" :class=\"cx('icon')\">\n                    <component :is=\"icon ? 'span' : null\" :class=\"[cx('icon'), icon]\" :data-p=\"dataP\" v-bind=\"ptm('icon')\"></component>\n                </slot>\n                <div v-if=\"$slots.default\" :class=\"cx('text')\" :data-p=\"dataP\" v-bind=\"ptm('text')\">\n                    <slot></slot>\n                </div>\n                <button v-if=\"closable\" v-ripple :class=\"cx('closeButton')\" :aria-label=\"closeAriaLabel\" type=\"button\" @click=\"close($event)\" :data-p=\"dataP\" v-bind=\"{ ...closeButtonProps, ...ptm('closeButton') }\">\n                    <slot name=\"closeicon\">\n                        <i v-if=\"closeIcon\" :class=\"[cx('closeIcon'), closeIcon]\" :data-p=\"dataP\" v-bind=\"ptm('closeIcon')\" />\n                        <TimesIcon v-else :class=\"[cx('closeIcon'), closeIcon]\" :data-p=\"dataP\" v-bind=\"ptm('closeIcon')\" />\n                    </slot>\n                </button>\n            </div>\n        </div>\n    </transition>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport TimesIcon from '@primevue/icons/times';\nimport Ripple from 'primevue/ripple';\nimport BaseMessage from './BaseMessage.vue';\n\nexport default {\n    name: 'Message',\n    extends: BaseMessage,\n    inheritAttrs: false,\n    emits: ['close', 'life-end'],\n    timeout: null,\n    data() {\n        return {\n            visible: true\n        };\n    },\n    mounted() {\n        if (this.life) {\n            setTimeout(() => {\n                this.visible = false;\n                this.$emit('life-end');\n            }, this.life);\n        }\n    },\n    methods: {\n        close(event) {\n            this.visible = false;\n            this.$emit('close', event);\n        }\n    },\n    computed: {\n        closeAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;\n        },\n        dataP() {\n            return cn({\n                outlined: this.variant === 'outlined',\n                simple: this.variant === 'simple',\n                [this.severity]: this.severity,\n                [this.size]: this.size\n            });\n        }\n    },\n    directives: {\n        ripple: Ripple\n    },\n    components: {\n        TimesIcon\n    }\n};\n</script>\n","<template>\n    <transition name=\"p-message\" appear v-bind=\"ptmi('transition')\">\n        <div v-show=\"visible\" :class=\"cx('root')\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" :data-p=\"dataP\" v-bind=\"ptm('root')\">\n            <slot v-if=\"$slots.container\" name=\"container\" :closeCallback=\"close\"></slot>\n            <div v-else :class=\"cx('content')\" :data-p=\"dataP\" v-bind=\"ptm('content')\">\n                <slot name=\"icon\" :class=\"cx('icon')\">\n                    <component :is=\"icon ? 'span' : null\" :class=\"[cx('icon'), icon]\" :data-p=\"dataP\" v-bind=\"ptm('icon')\"></component>\n                </slot>\n                <div v-if=\"$slots.default\" :class=\"cx('text')\" :data-p=\"dataP\" v-bind=\"ptm('text')\">\n                    <slot></slot>\n                </div>\n                <button v-if=\"closable\" v-ripple :class=\"cx('closeButton')\" :aria-label=\"closeAriaLabel\" type=\"button\" @click=\"close($event)\" :data-p=\"dataP\" v-bind=\"{ ...closeButtonProps, ...ptm('closeButton') }\">\n                    <slot name=\"closeicon\">\n                        <i v-if=\"closeIcon\" :class=\"[cx('closeIcon'), closeIcon]\" :data-p=\"dataP\" v-bind=\"ptm('closeIcon')\" />\n                        <TimesIcon v-else :class=\"[cx('closeIcon'), closeIcon]\" :data-p=\"dataP\" v-bind=\"ptm('closeIcon')\" />\n                    </slot>\n                </button>\n            </div>\n        </div>\n    </transition>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport TimesIcon from '@primevue/icons/times';\nimport Ripple from 'primevue/ripple';\nimport BaseMessage from './BaseMessage.vue';\n\nexport default {\n    name: 'Message',\n    extends: BaseMessage,\n    inheritAttrs: false,\n    emits: ['close', 'life-end'],\n    timeout: null,\n    data() {\n        return {\n            visible: true\n        };\n    },\n    mounted() {\n        if (this.life) {\n            setTimeout(() => {\n                this.visible = false;\n                this.$emit('life-end');\n            }, this.life);\n        }\n    },\n    methods: {\n        close(event) {\n            this.visible = false;\n            this.$emit('close', event);\n        }\n    },\n    computed: {\n        closeAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;\n        },\n        dataP() {\n            return cn({\n                outlined: this.variant === 'outlined',\n                simple: this.variant === 'simple',\n                [this.severity]: this.severity,\n                [this.size]: this.size\n            });\n        }\n    },\n    directives: {\n        ripple: Ripple\n    },\n    components: {\n        TimesIcon\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","severity","type","String","closable","Boolean","life","Number","icon","undefined","closeIcon","closeButtonProps","size","variant","style","MessageStyle","provide","$pcMessage","$parentInstance","BaseMessage","inheritAttrs","emits","timeout","data","visible","mounted","_this","setTimeout","$emit","methods","close","event","computed","closeAriaLabel","$primevue","config","locale","aria","dataP","cn","_defineProperty","outlined","simple","directives","ripple","Ripple","components","TimesIcon","_openBlock","_createBlock","_Transition","_mergeProps","appear","_ctx","ptmi","_withDirectives","_createElementVNode","cx","role","$options","ptm","$slots","container","_renderSlot","closeCallback","_createElementBlock","_resolveDynamicComponent","onClick","_cache","$event","_objectSpread","_hoisted_5","_component_TimesIcon","$data"],"mappings":"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"}

package/metergroup/MeterGroup.vue

@@ -1,13 +1,13 @@
 <template>
-    <div :class="cx('root')" role="meter" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="totalPercent" v-bind="ptmi('root')">
+    <div :class="cx('root')" role="meter" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="totalPercent" :data-p="dataP" v-bind="ptmi('root')">
         <slot v-if="labelPosition === 'start'" name="label" :value="value" :totalPercent="totalPercent" :percentages="percentages">
             <MeterGroupLabel :value="value" :labelPosition="labelPosition" :labelOrientation="labelOrientation" :unstyled="unstyled" :pt="pt" />
         </slot>
         <slot name="start" :value="value" :totalPercent="totalPercent" :percentages="percentages" />
-        <div :class="cx('meters')" v-bind="ptm('meters')">
+        <div :class="cx('meters')" :data-p="dataP" v-bind="ptm('meters')">
             <template v-for="(val, index) in value" :key="index">
                 <slot name="meter" :value="val" :index="index" :class="cx('meter')" :orientation="orientation" :size="percentValue(val.value)" :totalPercent="totalPercent">
-                    <span v-if="percent(val.value)" :class="cx('meter')" :style="meterCalculatedStyles(val)" v-bind="getPTOptions('meter', val, index)" />
+                    <span v-if="percent(val.value)" :class="cx('meter')" :style="meterCalculatedStyles(val)" :data-p="dataP" v-bind="getPTOptions('meter', val, index)" />
                 </slot>
             </template>
         </div>
@@ -19,6 +19,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import BaseMeterGroup from './BaseMeterGroup.vue';
 import MeterGroupLabel from './MeterGroupLabel.vue';
 
@@ -65,6 +66,11 @@ export default {
             });
 
             return sumsArray;
+        },
+        dataP() {
+            return cn({
+                [this.orientation]: this.orientation
+            });
         }
     },
     components: {

package/metergroup/MeterGroupLabel.vue

@@ -1,5 +1,5 @@
 <template>
-    <ol :class="cx('labelList')" v-bind="ptm('labelList')">
+    <ol :class="cx('labelList')" :data-p="dataP" v-bind="ptm('labelList')">
         <li v-for="(val, index) in value" :key="index + '_label'" :class="cx('label')" v-bind="ptm('label')">
             <slot name="icon" :value="val" :class="cx('labelIcon')">
                 <i v-if="val.icon" :class="[val.icon, cx('labelIcon')]" :style="{ color: val.color }" v-bind="ptm('labelIcon')" />
@@ -11,6 +11,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import BaseComponent from '@primevue/core/basecomponent';
 
 export default {
@@ -18,6 +19,7 @@ export default {
     hostName: 'MeterGroup',
     extends: BaseComponent,
     inheritAttrs: false,
+    inject: ['$pcMeterGroup'],
     props: {
         value: {
             type: Array,
@@ -31,6 +33,13 @@ export default {
             type: String,
             default: 'horizontal'
         }
+    },
+    computed: {
+        dataP() {
+            return cn({
+                [this.$pcMeterGroup.labelOrientation]: this.$pcMeterGroup.labelOrientation
+            });
+        }
     }
 };
 </script>

package/metergroup/index.mjs

@@ -1,3 +1,4 @@
+import { cn } from '@primeuix/utils';
 import BaseComponent from '@primevue/core/basecomponent';
 import MeterGroupStyle from 'primevue/metergroup/style';
 import { createElementBlock, openBlock, mergeProps, Fragment, renderList, renderSlot, createElementVNode, normalizeClass, toDisplayString, resolveComponent, createCommentVNode, createVNode } from 'vue';
@@ -40,11 +41,16 @@ var script$2 = {
   }
 };
 
+function _typeof$1(o) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$1(o); }
+function _defineProperty$1(e, r, t) { return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey$1(t) { var i = _toPrimitive$1(t, "string"); return "symbol" == _typeof$1(i) ? i : i + ""; }
+function _toPrimitive$1(t, r) { if ("object" != _typeof$1(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$1(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var script$1 = {
   name: 'MeterGroupLabel',
   hostName: 'MeterGroup',
   "extends": BaseComponent,
   inheritAttrs: false,
+  inject: ['$pcMeterGroup'],
   props: {
     value: {
       type: Array,
@@ -58,12 +64,19 @@ var script$1 = {
       type: String,
       "default": 'horizontal'
     }
+  },
+  computed: {
+    dataP: function dataP() {
+      return cn(_defineProperty$1({}, this.$pcMeterGroup.labelOrientation, this.$pcMeterGroup.labelOrientation));
+    }
   }
 };
 
+var _hoisted_1$1 = ["data-p"];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("ol", mergeProps({
-    "class": _ctx.cx('labelList')
+    "class": _ctx.cx('labelList'),
+    "data-p": $options.dataP
   }, _ctx.ptm('labelList')), [(openBlock(true), createElementBlock(Fragment, null, renderList($props.value, function (val, index) {
     return openBlock(), createElementBlock("li", mergeProps({
       key: index + '_label',
@@ -92,11 +105,15 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       "class": _ctx.cx('labelText'),
       ref_for: true
     }, _ctx.ptm('labelText')), toDisplayString(val.label) + " (" + toDisplayString(_ctx.$parentInstance.percentValue(val.value)) + ")", 17)], 16);
-  }), 128))], 16);
+  }), 128))], 16, _hoisted_1$1);
 }
 
 script$1.render = render$1;
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var script = {
   name: 'MeterGroup',
   "extends": script$2,
@@ -140,6 +157,9 @@ var script = {
         sumsArray.push(sum);
       });
       return sumsArray;
+    },
+    dataP: function dataP() {
+      return cn(_defineProperty({}, this.orientation, this.orientation));
     }
   },
   components: {
@@ -147,7 +167,9 @@ var script = {
   }
 };
 
-var _hoisted_1 = ["aria-valuemin", "aria-valuemax", "aria-valuenow"];
+var _hoisted_1 = ["aria-valuemin", "aria-valuemax", "aria-valuenow", "data-p"];
+var _hoisted_2 = ["data-p"];
+var _hoisted_3 = ["data-p"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_MeterGroupLabel = resolveComponent("MeterGroupLabel");
   return openBlock(), createElementBlock("div", mergeProps({
@@ -155,7 +177,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     role: "meter",
     "aria-valuemin": _ctx.min,
     "aria-valuemax": _ctx.max,
-    "aria-valuenow": $options.totalPercent
+    "aria-valuenow": $options.totalPercent,
+    "data-p": $options.dataP
   }, _ctx.ptmi('root')), [_ctx.labelPosition === 'start' ? renderSlot(_ctx.$slots, "label", {
     key: 0,
     value: _ctx.value,
@@ -174,7 +197,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     totalPercent: $options.totalPercent,
     percentages: $options.percentages
   }), createElementVNode("div", mergeProps({
-    "class": _ctx.cx('meters')
+    "class": _ctx.cx('meters'),
+    "data-p": $options.dataP
   }, _ctx.ptm('meters')), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.value, function (val, index) {
     return renderSlot(_ctx.$slots, "meter", {
       key: index,
@@ -189,10 +213,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         "class": _ctx.cx('meter'),
         style: $options.meterCalculatedStyles(val),
+        "data-p": $options.dataP,
         ref_for: true
-      }, $options.getPTOptions('meter', val, index)), null, 16)) : createCommentVNode("", true)];
+      }, $options.getPTOptions('meter', val, index)), null, 16, _hoisted_3)) : createCommentVNode("", true)];
     });
-  }), 128))], 16), renderSlot(_ctx.$slots, "end", {
+  }), 128))], 16, _hoisted_2), renderSlot(_ctx.$slots, "end", {
     value: _ctx.value,
     totalPercent: $options.totalPercent,
     percentages: $options.percentages

package/metergroup/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/metergroup/BaseMeterGroup.vue","../../src/metergroup/MeterGroupLabel.vue","../../src/metergroup/MeterGroupLabel.vue?vue&type=template&id=4d13db80&lang.js","../../src/metergroup/MeterGroup.vue","../../src/metergroup/MeterGroup.vue?vue&type=template&id=4050d94c&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport MeterGroupStyle from 'primevue/metergroup/style';\n\nexport default {\n    name: 'MeterGroup',\n    extends: BaseComponent,\n    props: {\n        value: {\n            type: Array,\n            default: null\n        },\n        min: {\n            type: Number,\n            default: 0\n        },\n        max: {\n            type: Number,\n            default: 100\n        },\n        orientation: {\n            type: String,\n            default: 'horizontal'\n        },\n        labelPosition: {\n            type: String,\n            default: 'end'\n        },\n        labelOrientation: {\n            type: String,\n            default: 'horizontal'\n        }\n    },\n    style: MeterGroupStyle,\n    provide() {\n        return {\n            $pcMeterGroup: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <ol :class=\"cx('labelList')\" v-bind=\"ptm('labelList')\">\n        <li v-for=\"(val, index) in value\" :key=\"index + '_label'\" :class=\"cx('label')\" v-bind=\"ptm('label')\">\n            <slot name=\"icon\" :value=\"val\" :class=\"cx('labelIcon')\">\n                <i v-if=\"val.icon\" :class=\"[val.icon, cx('labelIcon')]\" :style=\"{ color: val.color }\" v-bind=\"ptm('labelIcon')\" />\n                <span v-else :class=\"cx('labelMarker')\" :style=\"{ backgroundColor: val.color }\" v-bind=\"ptm('labelMarker')\" />\n            </slot>\n            <span :class=\"cx('labelText')\" v-bind=\"ptm('labelText')\">{{ val.label }} ({{ $parentInstance.percentValue(val.value) }})</span>\n        </li>\n    </ol>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\n\nexport default {\n    name: 'MeterGroupLabel',\n    hostName: 'MeterGroup',\n    extends: BaseComponent,\n    inheritAttrs: false,\n    props: {\n        value: {\n            type: Array,\n            default: null\n        },\n        labelPosition: {\n            type: String,\n            default: 'end'\n        },\n        labelOrientation: {\n            type: String,\n            default: 'horizontal'\n        }\n    }\n};\n</script>\n","<template>\n    <ol :class=\"cx('labelList')\" v-bind=\"ptm('labelList')\">\n        <li v-for=\"(val, index) in value\" :key=\"index + '_label'\" :class=\"cx('label')\" v-bind=\"ptm('label')\">\n            <slot name=\"icon\" :value=\"val\" :class=\"cx('labelIcon')\">\n                <i v-if=\"val.icon\" :class=\"[val.icon, cx('labelIcon')]\" :style=\"{ color: val.color }\" v-bind=\"ptm('labelIcon')\" />\n                <span v-else :class=\"cx('labelMarker')\" :style=\"{ backgroundColor: val.color }\" v-bind=\"ptm('labelMarker')\" />\n            </slot>\n            <span :class=\"cx('labelText')\" v-bind=\"ptm('labelText')\">{{ val.label }} ({{ $parentInstance.percentValue(val.value) }})</span>\n        </li>\n    </ol>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\n\nexport default {\n    name: 'MeterGroupLabel',\n    hostName: 'MeterGroup',\n    extends: BaseComponent,\n    inheritAttrs: false,\n    props: {\n        value: {\n            type: Array,\n            default: null\n        },\n        labelPosition: {\n            type: String,\n            default: 'end'\n        },\n        labelOrientation: {\n            type: String,\n            default: 'horizontal'\n        }\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" role=\"meter\" :aria-valuemin=\"min\" :aria-valuemax=\"max\" :aria-valuenow=\"totalPercent\" v-bind=\"ptmi('root')\">\n        <slot v-if=\"labelPosition === 'start'\" name=\"label\" :value=\"value\" :totalPercent=\"totalPercent\" :percentages=\"percentages\">\n            <MeterGroupLabel :value=\"value\" :labelPosition=\"labelPosition\" :labelOrientation=\"labelOrientation\" :unstyled=\"unstyled\" :pt=\"pt\" />\n        </slot>\n        <slot name=\"start\" :value=\"value\" :totalPercent=\"totalPercent\" :percentages=\"percentages\" />\n        <div :class=\"cx('meters')\" v-bind=\"ptm('meters')\">\n            <template v-for=\"(val, index) in value\" :key=\"index\">\n                <slot name=\"meter\" :value=\"val\" :index=\"index\" :class=\"cx('meter')\" :orientation=\"orientation\" :size=\"percentValue(val.value)\" :totalPercent=\"totalPercent\">\n                    <span v-if=\"percent(val.value)\" :class=\"cx('meter')\" :style=\"meterCalculatedStyles(val)\" v-bind=\"getPTOptions('meter', val, index)\" />\n                </slot>\n            </template>\n        </div>\n        <slot name=\"end\" :value=\"value\" :totalPercent=\"totalPercent\" :percentages=\"percentages\" />\n        <slot v-if=\"labelPosition === 'end'\" name=\"label\" :value=\"value\" :totalPercent=\"totalPercent\" :percentages=\"percentages\">\n            <MeterGroupLabel :value=\"value\" :labelPosition=\"labelPosition\" :labelOrientation=\"labelOrientation\" :unstyled=\"unstyled\" :pt=\"pt\" />\n        </slot>\n    </div>\n</template>\n\n<script>\nimport BaseMeterGroup from './BaseMeterGroup.vue';\nimport MeterGroupLabel from './MeterGroupLabel.vue';\n\nexport default {\n    name: 'MeterGroup',\n    extends: BaseMeterGroup,\n    inheritAttrs: false,\n    methods: {\n        getPTOptions(key, value, index) {\n            return this.ptm(key, {\n                context: {\n                    value,\n                    index\n                }\n            });\n        },\n        percent(meter = 0) {\n            const percentOfItem = ((meter - this.min) / (this.max - this.min)) * 100;\n\n            return Math.round(Math.max(0, Math.min(100, percentOfItem)));\n        },\n        percentValue(meter) {\n            return this.percent(meter) + '%';\n        },\n        meterCalculatedStyles(val) {\n            return {\n                backgroundColor: val.color,\n                width: this.orientation === 'horizontal' && this.percentValue(val.value),\n                height: this.orientation === 'vertical' && this.percentValue(val.value)\n            };\n        }\n    },\n    computed: {\n        totalPercent() {\n            return this.percent(this.value.reduce((total, val) => total + val.value, 0));\n        },\n        percentages() {\n            let sum = 0;\n            const sumsArray = [];\n\n            this.value.forEach((item) => {\n                sum += item.value;\n                sumsArray.push(sum);\n            });\n\n            return sumsArray;\n        }\n    },\n    components: {\n        MeterGroupLabel\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" role=\"meter\" :aria-valuemin=\"min\" :aria-valuemax=\"max\" :aria-valuenow=\"totalPercent\" v-bind=\"ptmi('root')\">\n        <slot v-if=\"labelPosition === 'start'\" name=\"label\" :value=\"value\" :totalPercent=\"totalPercent\" :percentages=\"percentages\">\n            <MeterGroupLabel :value=\"value\" :labelPosition=\"labelPosition\" :labelOrientation=\"labelOrientation\" :unstyled=\"unstyled\" :pt=\"pt\" />\n        </slot>\n        <slot name=\"start\" :value=\"value\" :totalPercent=\"totalPercent\" :percentages=\"percentages\" />\n        <div :class=\"cx('meters')\" v-bind=\"ptm('meters')\">\n            <template v-for=\"(val, index) in value\" :key=\"index\">\n                <slot name=\"meter\" :value=\"val\" :index=\"index\" :class=\"cx('meter')\" :orientation=\"orientation\" :size=\"percentValue(val.value)\" :totalPercent=\"totalPercent\">\n                    <span v-if=\"percent(val.value)\" :class=\"cx('meter')\" :style=\"meterCalculatedStyles(val)\" v-bind=\"getPTOptions('meter', val, index)\" />\n                </slot>\n            </template>\n        </div>\n        <slot name=\"end\" :value=\"value\" :totalPercent=\"totalPercent\" :percentages=\"percentages\" />\n        <slot v-if=\"labelPosition === 'end'\" name=\"label\" :value=\"value\" :totalPercent=\"totalPercent\" :percentages=\"percentages\">\n            <MeterGroupLabel :value=\"value\" :labelPosition=\"labelPosition\" :labelOrientation=\"labelOrientation\" :unstyled=\"unstyled\" :pt=\"pt\" />\n        </slot>\n    </div>\n</template>\n\n<script>\nimport BaseMeterGroup from './BaseMeterGroup.vue';\nimport MeterGroupLabel from './MeterGroupLabel.vue';\n\nexport default {\n    name: 'MeterGroup',\n    extends: BaseMeterGroup,\n    inheritAttrs: false,\n    methods: {\n        getPTOptions(key, value, index) {\n            return this.ptm(key, {\n                context: {\n                    value,\n                    index\n                }\n            });\n        },\n        percent(meter = 0) {\n            const percentOfItem = ((meter - this.min) / (this.max - this.min)) * 100;\n\n            return Math.round(Math.max(0, Math.min(100, percentOfItem)));\n        },\n        percentValue(meter) {\n            return this.percent(meter) + '%';\n        },\n        meterCalculatedStyles(val) {\n            return {\n                backgroundColor: val.color,\n                width: this.orientation === 'horizontal' && this.percentValue(val.value),\n                height: this.orientation === 'vertical' && this.percentValue(val.value)\n            };\n        }\n    },\n    computed: {\n        totalPercent() {\n            return this.percent(this.value.reduce((total, val) => total + val.value, 0));\n        },\n        percentages() {\n            let sum = 0;\n            const sumsArray = [];\n\n            this.value.forEach((item) => {\n                sum += item.value;\n                sumsArray.push(sum);\n            });\n\n            return sumsArray;\n        }\n    },\n    components: {\n        MeterGroupLabel\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","value","type","Array","min","Number","max","orientation","String","labelPosition","labelOrientation","style","MeterGroupStyle","provide","$pcMeterGroup","$parentInstance","hostName","inheritAttrs","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","ptm","_Fragment","_renderList","$props","val","index","key","_renderSlot","$slots","icon","color","backgroundColor","_createElementVNode","_toDisplayString","label","percentValue","BaseMeterGroup","methods","getPTOptions","context","percent","meter","arguments","length","undefined","percentOfItem","Math","round","meterCalculatedStyles","width","height","computed","totalPercent","reduce","total","percentages","sum","sumsArray","forEach","item","push","components","MeterGroupLabel","role","$options","ptmi","_createVNode","_component_MeterGroupLabel","unstyled","pt","size"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/metergroup/BaseMeterGroup.vue","../../src/metergroup/MeterGroupLabel.vue","../../src/metergroup/MeterGroupLabel.vue?vue&type=template&id=485edff9&lang.js","../../src/metergroup/MeterGroup.vue","../../src/metergroup/MeterGroup.vue?vue&type=template&id=5bb0f8ea&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport MeterGroupStyle from 'primevue/metergroup/style';\n\nexport default {\n    name: 'MeterGroup',\n    extends: BaseComponent,\n    props: {\n        value: {\n            type: Array,\n            default: null\n        },\n        min: {\n            type: Number,\n            default: 0\n        },\n        max: {\n            type: Number,\n            default: 100\n        },\n        orientation: {\n            type: String,\n            default: 'horizontal'\n        },\n        labelPosition: {\n            type: String,\n            default: 'end'\n        },\n        labelOrientation: {\n            type: String,\n            default: 'horizontal'\n        }\n    },\n    style: MeterGroupStyle,\n    provide() {\n        return {\n            $pcMeterGroup: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <ol :class=\"cx('labelList')\" :data-p=\"dataP\" v-bind=\"ptm('labelList')\">\n        <li v-for=\"(val, index) in value\" :key=\"index + '_label'\" :class=\"cx('label')\" v-bind=\"ptm('label')\">\n            <slot name=\"icon\" :value=\"val\" :class=\"cx('labelIcon')\">\n                <i v-if=\"val.icon\" :class=\"[val.icon, cx('labelIcon')]\" :style=\"{ color: val.color }\" v-bind=\"ptm('labelIcon')\" />\n                <span v-else :class=\"cx('labelMarker')\" :style=\"{ backgroundColor: val.color }\" v-bind=\"ptm('labelMarker')\" />\n            </slot>\n            <span :class=\"cx('labelText')\" v-bind=\"ptm('labelText')\">{{ val.label }} ({{ $parentInstance.percentValue(val.value) }})</span>\n        </li>\n    </ol>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport BaseComponent from '@primevue/core/basecomponent';\n\nexport default {\n    name: 'MeterGroupLabel',\n    hostName: 'MeterGroup',\n    extends: BaseComponent,\n    inheritAttrs: false,\n    inject: ['$pcMeterGroup'],\n    props: {\n        value: {\n            type: Array,\n            default: null\n        },\n        labelPosition: {\n            type: String,\n            default: 'end'\n        },\n        labelOrientation: {\n            type: String,\n            default: 'horizontal'\n        }\n    },\n    computed: {\n        dataP() {\n            return cn({\n                [this.$pcMeterGroup.labelOrientation]: this.$pcMeterGroup.labelOrientation\n            });\n        }\n    }\n};\n</script>\n","<template>\n    <ol :class=\"cx('labelList')\" :data-p=\"dataP\" v-bind=\"ptm('labelList')\">\n        <li v-for=\"(val, index) in value\" :key=\"index + '_label'\" :class=\"cx('label')\" v-bind=\"ptm('label')\">\n            <slot name=\"icon\" :value=\"val\" :class=\"cx('labelIcon')\">\n                <i v-if=\"val.icon\" :class=\"[val.icon, cx('labelIcon')]\" :style=\"{ color: val.color }\" v-bind=\"ptm('labelIcon')\" />\n                <span v-else :class=\"cx('labelMarker')\" :style=\"{ backgroundColor: val.color }\" v-bind=\"ptm('labelMarker')\" />\n            </slot>\n            <span :class=\"cx('labelText')\" v-bind=\"ptm('labelText')\">{{ val.label }} ({{ $parentInstance.percentValue(val.value) }})</span>\n        </li>\n    </ol>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport BaseComponent from '@primevue/core/basecomponent';\n\nexport default {\n    name: 'MeterGroupLabel',\n    hostName: 'MeterGroup',\n    extends: BaseComponent,\n    inheritAttrs: false,\n    inject: ['$pcMeterGroup'],\n    props: {\n        value: {\n            type: Array,\n            default: null\n        },\n        labelPosition: {\n            type: String,\n            default: 'end'\n        },\n        labelOrientation: {\n            type: String,\n            default: 'horizontal'\n        }\n    },\n    computed: {\n        dataP() {\n            return cn({\n                [this.$pcMeterGroup.labelOrientation]: this.$pcMeterGroup.labelOrientation\n            });\n        }\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" role=\"meter\" :aria-valuemin=\"min\" :aria-valuemax=\"max\" :aria-valuenow=\"totalPercent\" :data-p=\"dataP\" v-bind=\"ptmi('root')\">\n        <slot v-if=\"labelPosition === 'start'\" name=\"label\" :value=\"value\" :totalPercent=\"totalPercent\" :percentages=\"percentages\">\n            <MeterGroupLabel :value=\"value\" :labelPosition=\"labelPosition\" :labelOrientation=\"labelOrientation\" :unstyled=\"unstyled\" :pt=\"pt\" />\n        </slot>\n        <slot name=\"start\" :value=\"value\" :totalPercent=\"totalPercent\" :percentages=\"percentages\" />\n        <div :class=\"cx('meters')\" :data-p=\"dataP\" v-bind=\"ptm('meters')\">\n            <template v-for=\"(val, index) in value\" :key=\"index\">\n                <slot name=\"meter\" :value=\"val\" :index=\"index\" :class=\"cx('meter')\" :orientation=\"orientation\" :size=\"percentValue(val.value)\" :totalPercent=\"totalPercent\">\n                    <span v-if=\"percent(val.value)\" :class=\"cx('meter')\" :style=\"meterCalculatedStyles(val)\" :data-p=\"dataP\" v-bind=\"getPTOptions('meter', val, index)\" />\n                </slot>\n            </template>\n        </div>\n        <slot name=\"end\" :value=\"value\" :totalPercent=\"totalPercent\" :percentages=\"percentages\" />\n        <slot v-if=\"labelPosition === 'end'\" name=\"label\" :value=\"value\" :totalPercent=\"totalPercent\" :percentages=\"percentages\">\n            <MeterGroupLabel :value=\"value\" :labelPosition=\"labelPosition\" :labelOrientation=\"labelOrientation\" :unstyled=\"unstyled\" :pt=\"pt\" />\n        </slot>\n    </div>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport BaseMeterGroup from './BaseMeterGroup.vue';\nimport MeterGroupLabel from './MeterGroupLabel.vue';\n\nexport default {\n    name: 'MeterGroup',\n    extends: BaseMeterGroup,\n    inheritAttrs: false,\n    methods: {\n        getPTOptions(key, value, index) {\n            return this.ptm(key, {\n                context: {\n                    value,\n                    index\n                }\n            });\n        },\n        percent(meter = 0) {\n            const percentOfItem = ((meter - this.min) / (this.max - this.min)) * 100;\n\n            return Math.round(Math.max(0, Math.min(100, percentOfItem)));\n        },\n        percentValue(meter) {\n            return this.percent(meter) + '%';\n        },\n        meterCalculatedStyles(val) {\n            return {\n                backgroundColor: val.color,\n                width: this.orientation === 'horizontal' && this.percentValue(val.value),\n                height: this.orientation === 'vertical' && this.percentValue(val.value)\n            };\n        }\n    },\n    computed: {\n        totalPercent() {\n            return this.percent(this.value.reduce((total, val) => total + val.value, 0));\n        },\n        percentages() {\n            let sum = 0;\n            const sumsArray = [];\n\n            this.value.forEach((item) => {\n                sum += item.value;\n                sumsArray.push(sum);\n            });\n\n            return sumsArray;\n        },\n        dataP() {\n            return cn({\n                [this.orientation]: this.orientation\n            });\n        }\n    },\n    components: {\n        MeterGroupLabel\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" role=\"meter\" :aria-valuemin=\"min\" :aria-valuemax=\"max\" :aria-valuenow=\"totalPercent\" :data-p=\"dataP\" v-bind=\"ptmi('root')\">\n        <slot v-if=\"labelPosition === 'start'\" name=\"label\" :value=\"value\" :totalPercent=\"totalPercent\" :percentages=\"percentages\">\n            <MeterGroupLabel :value=\"value\" :labelPosition=\"labelPosition\" :labelOrientation=\"labelOrientation\" :unstyled=\"unstyled\" :pt=\"pt\" />\n        </slot>\n        <slot name=\"start\" :value=\"value\" :totalPercent=\"totalPercent\" :percentages=\"percentages\" />\n        <div :class=\"cx('meters')\" :data-p=\"dataP\" v-bind=\"ptm('meters')\">\n            <template v-for=\"(val, index) in value\" :key=\"index\">\n                <slot name=\"meter\" :value=\"val\" :index=\"index\" :class=\"cx('meter')\" :orientation=\"orientation\" :size=\"percentValue(val.value)\" :totalPercent=\"totalPercent\">\n                    <span v-if=\"percent(val.value)\" :class=\"cx('meter')\" :style=\"meterCalculatedStyles(val)\" :data-p=\"dataP\" v-bind=\"getPTOptions('meter', val, index)\" />\n                </slot>\n            </template>\n        </div>\n        <slot name=\"end\" :value=\"value\" :totalPercent=\"totalPercent\" :percentages=\"percentages\" />\n        <slot v-if=\"labelPosition === 'end'\" name=\"label\" :value=\"value\" :totalPercent=\"totalPercent\" :percentages=\"percentages\">\n            <MeterGroupLabel :value=\"value\" :labelPosition=\"labelPosition\" :labelOrientation=\"labelOrientation\" :unstyled=\"unstyled\" :pt=\"pt\" />\n        </slot>\n    </div>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport BaseMeterGroup from './BaseMeterGroup.vue';\nimport MeterGroupLabel from './MeterGroupLabel.vue';\n\nexport default {\n    name: 'MeterGroup',\n    extends: BaseMeterGroup,\n    inheritAttrs: false,\n    methods: {\n        getPTOptions(key, value, index) {\n            return this.ptm(key, {\n                context: {\n                    value,\n                    index\n                }\n            });\n        },\n        percent(meter = 0) {\n            const percentOfItem = ((meter - this.min) / (this.max - this.min)) * 100;\n\n            return Math.round(Math.max(0, Math.min(100, percentOfItem)));\n        },\n        percentValue(meter) {\n            return this.percent(meter) + '%';\n        },\n        meterCalculatedStyles(val) {\n            return {\n                backgroundColor: val.color,\n                width: this.orientation === 'horizontal' && this.percentValue(val.value),\n                height: this.orientation === 'vertical' && this.percentValue(val.value)\n            };\n        }\n    },\n    computed: {\n        totalPercent() {\n            return this.percent(this.value.reduce((total, val) => total + val.value, 0));\n        },\n        percentages() {\n            let sum = 0;\n            const sumsArray = [];\n\n            this.value.forEach((item) => {\n                sum += item.value;\n                sumsArray.push(sum);\n            });\n\n            return sumsArray;\n        },\n        dataP() {\n            return cn({\n                [this.orientation]: this.orientation\n            });\n        }\n    },\n    components: {\n        MeterGroupLabel\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","value","type","Array","min","Number","max","orientation","String","labelPosition","labelOrientation","style","MeterGroupStyle","provide","$pcMeterGroup","$parentInstance","hostName","inheritAttrs","inject","computed","dataP","cn","_defineProperty","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","$options","ptm","_Fragment","_renderList","$props","val","index","key","_renderSlot","$slots","icon","color","backgroundColor","_createElementVNode","_toDisplayString","label","percentValue","BaseMeterGroup","methods","getPTOptions","context","percent","meter","arguments","length","undefined","percentOfItem","Math","round","meterCalculatedStyles","width","height","totalPercent","reduce","total","percentages","sum","sumsArray","forEach","item","push","components","MeterGroupLabel","role","ptmi","_createVNode","_component_MeterGroupLabel","unstyled","pt","size","_hoisted_3"],"mappings":"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"}

package/multiselect/MultiSelect.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')">
         <div class="p-hidden-accessible" v-bind="ptm('hiddenInputContainer')" :data-p-hidden-accessible="true">
             <input
                 ref="focusInput"
@@ -24,7 +24,7 @@
             />
         </div>
         <div :class="cx('labelContainer')" v-bind="ptm('labelContainer')">
-            <div :class="cx('label')" v-bind="ptm('label')">
+            <div :class="cx('label')" :data-p="labelDataP" v-bind="ptm('label')">
                 <slot name="value" :value="d_value" :placeholder="placeholder">
                     <template v-if="display === 'comma'">
                         {{ label || 'empty' }}
@@ -59,12 +59,12 @@
                 <SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
             </slot>
             <slot v-else name="dropdownicon" :class="cx('dropdownIcon')">
-                <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('dropdownIcon'), dropdownIcon]" aria-hidden="true" v-bind="ptm('dropdownIcon')" />
+                <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('dropdownIcon'), dropdownIcon]" aria-hidden="true" :data-p="dropdownIconDataP" v-bind="ptm('dropdownIcon')" />
             </slot>
         </div>
         <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" :style="[panelStyle, overlayStyle]" :class="[cx('overlay'), panelClass, overlayClass]" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="ptm('overlay')">
+                <div v-if="overlayVisible" :ref="overlayRef" :style="[panelStyle, overlayStyle]" :class="[cx('overlay'), panelClass, overlayClass]" @click="onOverlayClick" @keydown="onOverlayKeyDown" :data-p="overlayDataP" v-bind="ptm('overlay')">
                     <span
                         ref="firstHiddenFocusableElementOnOverlay"
                         role="presentation"
@@ -223,6 +223,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { absolutePosition, addStyle, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
 import { equals, findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
@@ -733,11 +734,12 @@ 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();
             this.scrollInView();
 
             this.autoFilterFocus && focus(this.$refs.filterInput.$el);
+            this.autoUpdateModel();
         },
         onOverlayAfterEnter() {
             this.bindOutsideClickListener();
@@ -995,8 +997,11 @@ export default {
             });
         },
         autoUpdateModel() {
-            if (this.selectOnFocus && this.autoOptionFocus && !this.$filled) {
+            if (this.autoOptionFocus) {
                 this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
+            }
+
+            if (this.selectOnFocus && this.autoOptionFocus && !this.$filled) {
                 const value = this.getOptionValue(this.visibleOptions[this.focusedOptionIndex]);
 
                 this.updateModel(null, [value]);
@@ -1138,6 +1143,36 @@ export default {
         },
         isClearIconVisible() {
             return this.showClear && this.d_value && this.d_value.length && this.d_value != null && isNotEmpty(this.options);
+        },
+        containerDataP() {
+            return cn({
+                invalid: this.$invalid,
+                disabled: this.disabled,
+                focus: this.focused,
+                fluid: this.$fluid,
+                filled: this.$variant === 'filled',
+                [this.size]: this.size
+            });
+        },
+        labelDataP() {
+            return cn({
+                placeholder: this.label === this.placeholder,
+                clearable: this.showClear,
+                disabled: this.disabled,
+                [this.size]: this.size,
+                'has-chip': this.display === 'chip' && this.d_value && this.d_value.length && (this.maxSelectedLabels ? this.d_value.length <= this.maxSelectedLabels : true),
+                empty: !this.placeholder && !this.$filled
+            });
+        },
+        dropdownIconDataP() {
+            return cn({
+                [this.size]: this.size
+            });
+        },
+        overlayDataP() {
+            return cn({
+                ['portal-' + this.appendTo]: 'portal-' + this.appendTo
+            });
         }
     },
     directives: {

package/multiselect/index.d.ts

@@ -364,7 +364,7 @@ export interface MultiSelectProps {
     /**
      * 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
@@ -379,7 +379,7 @@ export interface MultiSelectProps {
      * Specifies the input variant of the component.
      * @defaultValue null
      */
-    variant?: 'outlined' | 'filled' | undefined | null;
+    variant?: HintedString<'outlined' | 'filled'> | undefined | null;
     /**
      * Spans 100% width of the container when enabled.
      * @defaultValue null
@@ -456,7 +456,7 @@ export interface MultiSelectProps {
      * Defines how the selected items are displayed.
      * @defaultValue comma
      */
-    display?: 'comma' | 'chip' | undefined;
+    display?: HintedString<'comma' | 'chip'> | undefined;
     /**
      * Label to display after exceeding max selected labels.
      * @defaultValue null