primevue 4.3.0 → 4.3.2

package/selectbutton/SelectButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptmi('root')">
+    <div :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptmi('root')" :data-p="dataP">
         <template v-for="(option, index) of options" :key="getOptionRenderKey(option)">
             <ToggleButton
                 :modelValue="isSelected(option)"
@@ -8,7 +8,7 @@
                 :disabled="disabled || isOptionDisabled(option)"
                 :unstyled="unstyled"
                 :size="size"
-                :readonly="!allowEmpty && isSelected(option)"
+                :readonly="isOptionReadonly(option)"
                 @change="onOptionSelect($event, option, index)"
                 :pt="ptm('pcToggleButton')"
             >
@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { equals, resolveFieldData } from '@primeuix/utils/object';
 import Ripple from 'primevue/ripple';
 import ToggleButton from 'primevue/togglebutton';
@@ -46,24 +47,35 @@ export default {
         isOptionDisabled(option) {
             return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
         },
-        onOptionSelect(event, option, index) {
-            if (this.disabled || this.isOptionDisabled(option)) {
-                return;
-            }
+        isOptionReadonly(option) {
+            if (this.allowEmpty) return false;
 
             let selected = this.isSelected(option);
 
-            if (selected && !this.allowEmpty) {
+            if (this.multiple) {
+                return selected && this.d_value.length === 1;
+            } else {
+                return selected;
+            }
+        },
+        onOptionSelect(event, option, index) {
+            if (this.disabled || this.isOptionDisabled(option) || this.isOptionReadonly(option)) {
                 return;
             }
 
+            let selected = this.isSelected(option);
             let optionValue = this.getOptionValue(option);
             let newValue;
 
             if (this.multiple) {
-                if (selected) newValue = this.d_value.filter((val) => !equals(val, optionValue, this.equalityKey));
-                else newValue = this.d_value ? [...this.d_value, optionValue] : [optionValue];
+                if (selected) {
+                    newValue = this.d_value.filter((val) => !equals(val, optionValue, this.equalityKey));
+                    if (!this.allowEmpty && newValue.length === 0) return;
+                } else {
+                    newValue = this.d_value ? [...this.d_value, optionValue] : [optionValue];
+                }
             } else {
+                if (selected && !this.allowEmpty) return;
                 newValue = selected ? null : optionValue;
             }
 
@@ -93,6 +105,11 @@ export default {
     computed: {
         equalityKey() {
             return this.optionValue ? null : this.dataKey;
+        },
+        dataP() {
+            return cn({
+                invalid: this.$invalid
+            });
         }
     },
     directives: {

package/selectbutton/index.d.ts

@@ -11,7 +11,7 @@ import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { PassThroughOptions } from 'primevue/passthrough';
 import { VNode } from 'vue';
 // import { ToggleButtonPassThroughOptions } from 'primevue/togglebutton';
-import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, HintedString, PassThrough } from '@primevue/core';
 
 export declare type SelectButtonPassThroughOptionType = SelectButtonPassThroughAttributes | ((options: SelectButtonPassThroughMethodOptions) => SelectButtonPassThroughAttributes | string) | string | null | undefined;
 
@@ -184,7 +184,7 @@ export interface SelectButtonProps {
     /**
      * Defines the size of the component.
      */
-    size?: 'small' | 'large' | undefined;
+    size?: HintedString<'small' | 'large'> | undefined;
     /**
      * Form control object, typically used for handling validation and form state.
      */

package/selectbutton/index.mjs

@@ -1,3 +1,4 @@
+import { cn } from '@primeuix/utils';
 import { equals, resolveFieldData } from '@primeuix/utils/object';
 import Ripple from 'primevue/ripple';
 import ToggleButton from 'primevue/togglebutton';
@@ -62,22 +63,34 @@ var script = {
     isOptionDisabled: function isOptionDisabled(option) {
       return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
     },
+    isOptionReadonly: function isOptionReadonly(option) {
+      if (this.allowEmpty) return false;
+      var selected = this.isSelected(option);
+      if (this.multiple) {
+        return selected && this.d_value.length === 1;
+      } else {
+        return selected;
+      }
+    },
     onOptionSelect: function onOptionSelect(event, option, index) {
       var _this = this;
-      if (this.disabled || this.isOptionDisabled(option)) {
+      if (this.disabled || this.isOptionDisabled(option) || this.isOptionReadonly(option)) {
         return;
       }
       var selected = this.isSelected(option);
-      if (selected && !this.allowEmpty) {
-        return;
-      }
       var optionValue = this.getOptionValue(option);
       var newValue;
       if (this.multiple) {
-        if (selected) newValue = this.d_value.filter(function (val) {
-          return !equals(val, optionValue, _this.equalityKey);
-        });else newValue = this.d_value ? [].concat(_toConsumableArray(this.d_value), [optionValue]) : [optionValue];
+        if (selected) {
+          newValue = this.d_value.filter(function (val) {
+            return !equals(val, optionValue, _this.equalityKey);
+          });
+          if (!this.allowEmpty && newValue.length === 0) return;
+        } else {
+          newValue = this.d_value ? [].concat(_toConsumableArray(this.d_value), [optionValue]) : [optionValue];
+        }
       } else {
+        if (selected && !this.allowEmpty) return;
         newValue = selected ? null : optionValue;
       }
       this.writeValue(newValue, event);
@@ -116,6 +129,11 @@ var script = {
   computed: {
     equalityKey: function equalityKey() {
       return this.optionValue ? null : this.dataKey;
+    },
+    dataP: function dataP() {
+      return cn({
+        invalid: this.$invalid
+      });
     }
   },
   directives: {
@@ -126,14 +144,16 @@ var script = {
   }
 };
 
-var _hoisted_1 = ["aria-labelledby"];
+var _hoisted_1 = ["aria-labelledby", "data-p"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_ToggleButton = resolveComponent("ToggleButton");
   return openBlock(), createElementBlock("div", mergeProps({
     "class": _ctx.cx('root'),
     role: "group",
     "aria-labelledby": _ctx.ariaLabelledby
-  }, _ctx.ptmi('root')), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, function (option, index) {
+  }, _ctx.ptmi('root'), {
+    "data-p": $options.dataP
+  }), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, function (option, index) {
     return openBlock(), createBlock(_component_ToggleButton, {
       key: $options.getOptionRenderKey(option),
       modelValue: $options.isSelected(option),
@@ -142,7 +162,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       disabled: _ctx.disabled || $options.isOptionDisabled(option),
       unstyled: _ctx.unstyled,
       size: _ctx.size,
-      readonly: !_ctx.allowEmpty && $options.isSelected(option),
+      readonly: $options.isOptionReadonly(option),
       onChange: function onChange($event) {
         return $options.onOptionSelect($event, option, index);
       },

package/selectbutton/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/selectbutton/BaseSelectButton.vue","../../src/selectbutton/SelectButton.vue","../../src/selectbutton/SelectButton.vue?vue&type=template&id=5eb80134&lang.js"],"sourcesContent":["<script>\nimport BaseEditableHolder from '@primevue/core/baseeditableholder';\nimport SelectButtonStyle from 'primevue/selectbutton/style';\n\nexport default {\n    name: 'BaseSelectButton',\n    extends: BaseEditableHolder,\n    props: {\n        options: Array,\n        optionLabel: null,\n        optionValue: null,\n        optionDisabled: null,\n        multiple: Boolean,\n        allowEmpty: {\n            type: Boolean,\n            default: true\n        },\n        dataKey: null,\n        ariaLabelledby: {\n            type: String,\n            default: null\n        },\n        size: {\n            type: String,\n            default: null\n        }\n    },\n    style: SelectButtonStyle,\n    provide() {\n        return {\n            $pcSelectButton: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" role=\"group\" :aria-labelledby=\"ariaLabelledby\" v-bind=\"ptmi('root')\">\n        <template v-for=\"(option, index) of options\" :key=\"getOptionRenderKey(option)\">\n            <ToggleButton\n                :modelValue=\"isSelected(option)\"\n                :onLabel=\"getOptionLabel(option)\"\n                :offLabel=\"getOptionLabel(option)\"\n                :disabled=\"disabled || isOptionDisabled(option)\"\n                :unstyled=\"unstyled\"\n                :size=\"size\"\n                :readonly=\"!allowEmpty && isSelected(option)\"\n                @change=\"onOptionSelect($event, option, index)\"\n                :pt=\"ptm('pcToggleButton')\"\n            >\n                <template v-if=\"$slots.option\" #default>\n                    <slot name=\"option\" :option=\"option\" :index=\"index\">\n                        <span v-bind=\"ptm('pcToggleButton')['label']\">{{ getOptionLabel(option) }}</span>\n                    </slot>\n                </template>\n            </ToggleButton>\n        </template>\n    </div>\n</template>\n\n<script>\nimport { equals, resolveFieldData } from '@primeuix/utils/object';\nimport Ripple from 'primevue/ripple';\nimport ToggleButton from 'primevue/togglebutton';\nimport BaseSelectButton from './BaseSelectButton.vue';\n\nexport default {\n    name: 'SelectButton',\n    extends: BaseSelectButton,\n    inheritAttrs: false,\n    emits: ['change'],\n    methods: {\n        getOptionLabel(option) {\n            return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;\n        },\n        getOptionValue(option) {\n            return this.optionValue ? resolveFieldData(option, this.optionValue) : option;\n        },\n        getOptionRenderKey(option) {\n            return this.dataKey ? resolveFieldData(option, this.dataKey) : this.getOptionLabel(option);\n        },\n        isOptionDisabled(option) {\n            return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;\n        },\n        onOptionSelect(event, option, index) {\n            if (this.disabled || this.isOptionDisabled(option)) {\n                return;\n            }\n\n            let selected = this.isSelected(option);\n\n            if (selected && !this.allowEmpty) {\n                return;\n            }\n\n            let optionValue = this.getOptionValue(option);\n            let newValue;\n\n            if (this.multiple) {\n                if (selected) newValue = this.d_value.filter((val) => !equals(val, optionValue, this.equalityKey));\n                else newValue = this.d_value ? [...this.d_value, optionValue] : [optionValue];\n            } else {\n                newValue = selected ? null : optionValue;\n            }\n\n            this.writeValue(newValue, event);\n            this.$emit('change', { event: event, value: newValue });\n        },\n        isSelected(option) {\n            let selected = false;\n            let optionValue = this.getOptionValue(option);\n\n            if (this.multiple) {\n                if (this.d_value) {\n                    for (let val of this.d_value) {\n                        if (equals(val, optionValue, this.equalityKey)) {\n                            selected = true;\n                            break;\n                        }\n                    }\n                }\n            } else {\n                selected = equals(this.d_value, optionValue, this.equalityKey);\n            }\n\n            return selected;\n        }\n    },\n    computed: {\n        equalityKey() {\n            return this.optionValue ? null : this.dataKey;\n        }\n    },\n    directives: {\n        ripple: Ripple\n    },\n    components: {\n        ToggleButton\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" role=\"group\" :aria-labelledby=\"ariaLabelledby\" v-bind=\"ptmi('root')\">\n        <template v-for=\"(option, index) of options\" :key=\"getOptionRenderKey(option)\">\n            <ToggleButton\n                :modelValue=\"isSelected(option)\"\n                :onLabel=\"getOptionLabel(option)\"\n                :offLabel=\"getOptionLabel(option)\"\n                :disabled=\"disabled || isOptionDisabled(option)\"\n                :unstyled=\"unstyled\"\n                :size=\"size\"\n                :readonly=\"!allowEmpty && isSelected(option)\"\n                @change=\"onOptionSelect($event, option, index)\"\n                :pt=\"ptm('pcToggleButton')\"\n            >\n                <template v-if=\"$slots.option\" #default>\n                    <slot name=\"option\" :option=\"option\" :index=\"index\">\n                        <span v-bind=\"ptm('pcToggleButton')['label']\">{{ getOptionLabel(option) }}</span>\n                    </slot>\n                </template>\n            </ToggleButton>\n        </template>\n    </div>\n</template>\n\n<script>\nimport { equals, resolveFieldData } from '@primeuix/utils/object';\nimport Ripple from 'primevue/ripple';\nimport ToggleButton from 'primevue/togglebutton';\nimport BaseSelectButton from './BaseSelectButton.vue';\n\nexport default {\n    name: 'SelectButton',\n    extends: BaseSelectButton,\n    inheritAttrs: false,\n    emits: ['change'],\n    methods: {\n        getOptionLabel(option) {\n            return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;\n        },\n        getOptionValue(option) {\n            return this.optionValue ? resolveFieldData(option, this.optionValue) : option;\n        },\n        getOptionRenderKey(option) {\n            return this.dataKey ? resolveFieldData(option, this.dataKey) : this.getOptionLabel(option);\n        },\n        isOptionDisabled(option) {\n            return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;\n        },\n        onOptionSelect(event, option, index) {\n            if (this.disabled || this.isOptionDisabled(option)) {\n                return;\n            }\n\n            let selected = this.isSelected(option);\n\n            if (selected && !this.allowEmpty) {\n                return;\n            }\n\n            let optionValue = this.getOptionValue(option);\n            let newValue;\n\n            if (this.multiple) {\n                if (selected) newValue = this.d_value.filter((val) => !equals(val, optionValue, this.equalityKey));\n                else newValue = this.d_value ? [...this.d_value, optionValue] : [optionValue];\n            } else {\n                newValue = selected ? null : optionValue;\n            }\n\n            this.writeValue(newValue, event);\n            this.$emit('change', { event: event, value: newValue });\n        },\n        isSelected(option) {\n            let selected = false;\n            let optionValue = this.getOptionValue(option);\n\n            if (this.multiple) {\n                if (this.d_value) {\n                    for (let val of this.d_value) {\n                        if (equals(val, optionValue, this.equalityKey)) {\n                            selected = true;\n                            break;\n                        }\n                    }\n                }\n            } else {\n                selected = equals(this.d_value, optionValue, this.equalityKey);\n            }\n\n            return selected;\n        }\n    },\n    computed: {\n        equalityKey() {\n            return this.optionValue ? null : this.dataKey;\n        }\n    },\n    directives: {\n        ripple: Ripple\n    },\n    components: {\n        ToggleButton\n    }\n};\n</script>\n"],"names":["name","BaseEditableHolder","props","options","Array","optionLabel","optionValue","optionDisabled","multiple","Boolean","allowEmpty","type","dataKey","ariaLabelledby","String","size","style","SelectButtonStyle","provide","$pcSelectButton","$parentInstance","BaseSelectButton","inheritAttrs","emits","methods","getOptionLabel","option","resolveFieldData","getOptionValue","getOptionRenderKey","isOptionDisabled","onOptionSelect","event","index","_this","disabled","selected","isSelected","newValue","d_value","filter","val","equals","equalityKey","concat","_toConsumableArray","writeValue","$emit","value","_iterator","_createForOfIteratorHelper","_step","s","n","done","err","e","f","computed","directives","ripple","Ripple","components","ToggleButton","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","role","ptmi","_Fragment","_renderList","_createBlock","_component_ToggleButton","key","$options","modelValue","onLabel","offLabel","unstyled","readonly","onChange","$event","pt","ptm","$slots","_renderSlot","_createElementVNode","ref_for","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/selectbutton/BaseSelectButton.vue","../../src/selectbutton/SelectButton.vue","../../src/selectbutton/SelectButton.vue?vue&type=template&id=d83aac12&lang.js"],"sourcesContent":["<script>\nimport BaseEditableHolder from '@primevue/core/baseeditableholder';\nimport SelectButtonStyle from 'primevue/selectbutton/style';\n\nexport default {\n    name: 'BaseSelectButton',\n    extends: BaseEditableHolder,\n    props: {\n        options: Array,\n        optionLabel: null,\n        optionValue: null,\n        optionDisabled: null,\n        multiple: Boolean,\n        allowEmpty: {\n            type: Boolean,\n            default: true\n        },\n        dataKey: null,\n        ariaLabelledby: {\n            type: String,\n            default: null\n        },\n        size: {\n            type: String,\n            default: null\n        }\n    },\n    style: SelectButtonStyle,\n    provide() {\n        return {\n            $pcSelectButton: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" role=\"group\" :aria-labelledby=\"ariaLabelledby\" v-bind=\"ptmi('root')\" :data-p=\"dataP\">\n        <template v-for=\"(option, index) of options\" :key=\"getOptionRenderKey(option)\">\n            <ToggleButton\n                :modelValue=\"isSelected(option)\"\n                :onLabel=\"getOptionLabel(option)\"\n                :offLabel=\"getOptionLabel(option)\"\n                :disabled=\"disabled || isOptionDisabled(option)\"\n                :unstyled=\"unstyled\"\n                :size=\"size\"\n                :readonly=\"isOptionReadonly(option)\"\n                @change=\"onOptionSelect($event, option, index)\"\n                :pt=\"ptm('pcToggleButton')\"\n            >\n                <template v-if=\"$slots.option\" #default>\n                    <slot name=\"option\" :option=\"option\" :index=\"index\">\n                        <span v-bind=\"ptm('pcToggleButton')['label']\">{{ getOptionLabel(option) }}</span>\n                    </slot>\n                </template>\n            </ToggleButton>\n        </template>\n    </div>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport { equals, resolveFieldData } from '@primeuix/utils/object';\nimport Ripple from 'primevue/ripple';\nimport ToggleButton from 'primevue/togglebutton';\nimport BaseSelectButton from './BaseSelectButton.vue';\n\nexport default {\n    name: 'SelectButton',\n    extends: BaseSelectButton,\n    inheritAttrs: false,\n    emits: ['change'],\n    methods: {\n        getOptionLabel(option) {\n            return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;\n        },\n        getOptionValue(option) {\n            return this.optionValue ? resolveFieldData(option, this.optionValue) : option;\n        },\n        getOptionRenderKey(option) {\n            return this.dataKey ? resolveFieldData(option, this.dataKey) : this.getOptionLabel(option);\n        },\n        isOptionDisabled(option) {\n            return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;\n        },\n        isOptionReadonly(option) {\n            if (this.allowEmpty) return false;\n\n            let selected = this.isSelected(option);\n\n            if (this.multiple) {\n                return selected && this.d_value.length === 1;\n            } else {\n                return selected;\n            }\n        },\n        onOptionSelect(event, option, index) {\n            if (this.disabled || this.isOptionDisabled(option) || this.isOptionReadonly(option)) {\n                return;\n            }\n\n            let selected = this.isSelected(option);\n            let optionValue = this.getOptionValue(option);\n            let newValue;\n\n            if (this.multiple) {\n                if (selected) {\n                    newValue = this.d_value.filter((val) => !equals(val, optionValue, this.equalityKey));\n                    if (!this.allowEmpty && newValue.length === 0) return;\n                } else {\n                    newValue = this.d_value ? [...this.d_value, optionValue] : [optionValue];\n                }\n            } else {\n                if (selected && !this.allowEmpty) return;\n                newValue = selected ? null : optionValue;\n            }\n\n            this.writeValue(newValue, event);\n            this.$emit('change', { event: event, value: newValue });\n        },\n        isSelected(option) {\n            let selected = false;\n            let optionValue = this.getOptionValue(option);\n\n            if (this.multiple) {\n                if (this.d_value) {\n                    for (let val of this.d_value) {\n                        if (equals(val, optionValue, this.equalityKey)) {\n                            selected = true;\n                            break;\n                        }\n                    }\n                }\n            } else {\n                selected = equals(this.d_value, optionValue, this.equalityKey);\n            }\n\n            return selected;\n        }\n    },\n    computed: {\n        equalityKey() {\n            return this.optionValue ? null : this.dataKey;\n        },\n        dataP() {\n            return cn({\n                invalid: this.$invalid\n            });\n        }\n    },\n    directives: {\n        ripple: Ripple\n    },\n    components: {\n        ToggleButton\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" role=\"group\" :aria-labelledby=\"ariaLabelledby\" v-bind=\"ptmi('root')\" :data-p=\"dataP\">\n        <template v-for=\"(option, index) of options\" :key=\"getOptionRenderKey(option)\">\n            <ToggleButton\n                :modelValue=\"isSelected(option)\"\n                :onLabel=\"getOptionLabel(option)\"\n                :offLabel=\"getOptionLabel(option)\"\n                :disabled=\"disabled || isOptionDisabled(option)\"\n                :unstyled=\"unstyled\"\n                :size=\"size\"\n                :readonly=\"isOptionReadonly(option)\"\n                @change=\"onOptionSelect($event, option, index)\"\n                :pt=\"ptm('pcToggleButton')\"\n            >\n                <template v-if=\"$slots.option\" #default>\n                    <slot name=\"option\" :option=\"option\" :index=\"index\">\n                        <span v-bind=\"ptm('pcToggleButton')['label']\">{{ getOptionLabel(option) }}</span>\n                    </slot>\n                </template>\n            </ToggleButton>\n        </template>\n    </div>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport { equals, resolveFieldData } from '@primeuix/utils/object';\nimport Ripple from 'primevue/ripple';\nimport ToggleButton from 'primevue/togglebutton';\nimport BaseSelectButton from './BaseSelectButton.vue';\n\nexport default {\n    name: 'SelectButton',\n    extends: BaseSelectButton,\n    inheritAttrs: false,\n    emits: ['change'],\n    methods: {\n        getOptionLabel(option) {\n            return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;\n        },\n        getOptionValue(option) {\n            return this.optionValue ? resolveFieldData(option, this.optionValue) : option;\n        },\n        getOptionRenderKey(option) {\n            return this.dataKey ? resolveFieldData(option, this.dataKey) : this.getOptionLabel(option);\n        },\n        isOptionDisabled(option) {\n            return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;\n        },\n        isOptionReadonly(option) {\n            if (this.allowEmpty) return false;\n\n            let selected = this.isSelected(option);\n\n            if (this.multiple) {\n                return selected && this.d_value.length === 1;\n            } else {\n                return selected;\n            }\n        },\n        onOptionSelect(event, option, index) {\n            if (this.disabled || this.isOptionDisabled(option) || this.isOptionReadonly(option)) {\n                return;\n            }\n\n            let selected = this.isSelected(option);\n            let optionValue = this.getOptionValue(option);\n            let newValue;\n\n            if (this.multiple) {\n                if (selected) {\n                    newValue = this.d_value.filter((val) => !equals(val, optionValue, this.equalityKey));\n                    if (!this.allowEmpty && newValue.length === 0) return;\n                } else {\n                    newValue = this.d_value ? [...this.d_value, optionValue] : [optionValue];\n                }\n            } else {\n                if (selected && !this.allowEmpty) return;\n                newValue = selected ? null : optionValue;\n            }\n\n            this.writeValue(newValue, event);\n            this.$emit('change', { event: event, value: newValue });\n        },\n        isSelected(option) {\n            let selected = false;\n            let optionValue = this.getOptionValue(option);\n\n            if (this.multiple) {\n                if (this.d_value) {\n                    for (let val of this.d_value) {\n                        if (equals(val, optionValue, this.equalityKey)) {\n                            selected = true;\n                            break;\n                        }\n                    }\n                }\n            } else {\n                selected = equals(this.d_value, optionValue, this.equalityKey);\n            }\n\n            return selected;\n        }\n    },\n    computed: {\n        equalityKey() {\n            return this.optionValue ? null : this.dataKey;\n        },\n        dataP() {\n            return cn({\n                invalid: this.$invalid\n            });\n        }\n    },\n    directives: {\n        ripple: Ripple\n    },\n    components: {\n        ToggleButton\n    }\n};\n</script>\n"],"names":["name","BaseEditableHolder","props","options","Array","optionLabel","optionValue","optionDisabled","multiple","Boolean","allowEmpty","type","dataKey","ariaLabelledby","String","size","style","SelectButtonStyle","provide","$pcSelectButton","$parentInstance","BaseSelectButton","inheritAttrs","emits","methods","getOptionLabel","option","resolveFieldData","getOptionValue","getOptionRenderKey","isOptionDisabled","isOptionReadonly","selected","isSelected","d_value","length","onOptionSelect","event","index","_this","disabled","newValue","filter","val","equals","equalityKey","concat","_toConsumableArray","writeValue","$emit","value","_iterator","_createForOfIteratorHelper","_step","s","n","done","err","e","f","computed","dataP","cn","invalid","$invalid","directives","ripple","Ripple","components","ToggleButton","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","role","ptmi","$options","_Fragment","_renderList","_createBlock","_component_ToggleButton","key","modelValue","onLabel","offLabel","unstyled","readonly","onChange","$event","pt","ptm","$slots","_renderSlot","_createElementVNode","ref_for","_toDisplayString"],"mappings":"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"}

package/skeleton/Skeleton.vue

@@ -1,8 +1,9 @@
 <template>
-    <div :class="cx('root')" :style="[sx('root'), containerStyle]" aria-hidden="true" v-bind="ptmi('root')"></div>
+    <div :class="cx('root')" :style="[sx('root'), containerStyle]" aria-hidden="true" v-bind="ptmi('root')" :data-p="dataP"></div>
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import BaseSkeleton from './BaseSkeleton.vue';
 
 export default {
@@ -13,6 +14,11 @@ export default {
         containerStyle() {
             if (this.size) return { width: this.size, height: this.size, borderRadius: this.borderRadius };
             else return { width: this.width, height: this.height, borderRadius: this.borderRadius };
+        },
+        dataP() {
+            return cn({
+                [this.shape]: this.shape
+            });
         }
     }
 };

package/skeleton/index.d.ts

@@ -7,7 +7,7 @@
  * @module skeleton
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, HintedString, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { PassThroughOptions } from 'primevue/passthrough';
 
@@ -70,7 +70,7 @@ export interface SkeletonProps {
      * Shape of the element.
      * @defaultValue rectangle
      */
-    shape?: 'rectangle' | 'circle' | undefined;
+    shape?: HintedString<'rectangle' | 'circle'> | undefined;
     /**
      * Size of the Circle or Square.
      */
@@ -93,7 +93,7 @@ export interface SkeletonProps {
      * Type of the animation.
      * @defaultValue wave
      */
-    animation?: 'wave' | 'none' | undefined;
+    animation?: HintedString<'wave' | 'none'> | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

package/skeleton/index.mjs

@@ -1,3 +1,4 @@
+import { cn } from '@primeuix/utils';
 import BaseComponent from '@primevue/core/basecomponent';
 import SkeletonStyle from 'primevue/skeleton/style';
 import { createElementBlock, openBlock, mergeProps } from 'vue';
@@ -40,6 +41,10 @@ var script$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: 'Skeleton',
   "extends": script$1,
@@ -55,16 +60,22 @@ var script = {
         height: this.height,
         borderRadius: this.borderRadius
       };
+    },
+    dataP: function dataP() {
+      return cn(_defineProperty({}, this.shape, this.shape));
     }
   }
 };
 
+var _hoisted_1 = ["data-p"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", mergeProps({
     "class": _ctx.cx('root'),
     style: [_ctx.sx('root'), $options.containerStyle],
     "aria-hidden": "true"
-  }, _ctx.ptmi('root')), null, 16);
+  }, _ctx.ptmi('root'), {
+    "data-p": $options.dataP
+  }), null, 16, _hoisted_1);
 }
 
 script.render = render;

package/skeleton/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/skeleton/BaseSkeleton.vue","../../src/skeleton/Skeleton.vue","../../src/skeleton/Skeleton.vue?vue&type=template&id=c4ee700c&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport SkeletonStyle from 'primevue/skeleton/style';\n\nexport default {\n    name: 'BaseSkeleton',\n    extends: BaseComponent,\n    props: {\n        shape: {\n            type: String,\n            default: 'rectangle'\n        },\n        size: {\n            type: String,\n            default: null\n        },\n        width: {\n            type: String,\n            default: '100%'\n        },\n        height: {\n            type: String,\n            default: '1rem'\n        },\n        borderRadius: {\n            type: String,\n            default: null\n        },\n        animation: {\n            type: String,\n            default: 'wave'\n        }\n    },\n    style: SkeletonStyle,\n    provide() {\n        return {\n            $pcSkeleton: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" :style=\"[sx('root'), containerStyle]\" aria-hidden=\"true\" v-bind=\"ptmi('root')\"></div>\n</template>\n\n<script>\nimport BaseSkeleton from './BaseSkeleton.vue';\n\nexport default {\n    name: 'Skeleton',\n    extends: BaseSkeleton,\n    inheritAttrs: false,\n    computed: {\n        containerStyle() {\n            if (this.size) return { width: this.size, height: this.size, borderRadius: this.borderRadius };\n            else return { width: this.width, height: this.height, borderRadius: this.borderRadius };\n        }\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" :style=\"[sx('root'), containerStyle]\" aria-hidden=\"true\" v-bind=\"ptmi('root')\"></div>\n</template>\n\n<script>\nimport BaseSkeleton from './BaseSkeleton.vue';\n\nexport default {\n    name: 'Skeleton',\n    extends: BaseSkeleton,\n    inheritAttrs: false,\n    computed: {\n        containerStyle() {\n            if (this.size) return { width: this.size, height: this.size, borderRadius: this.borderRadius };\n            else return { width: this.width, height: this.height, borderRadius: this.borderRadius };\n        }\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","shape","type","String","size","width","height","borderRadius","animation","style","SkeletonStyle","provide","$pcSkeleton","$parentInstance","BaseSkeleton","inheritAttrs","computed","containerStyle","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","sx","$options","ptmi"],"mappings":";;;;AAIA,eAAe;AACXA,EAAAA,IAAI,EAAE,cAAc;AACpB,EAAA,SAAA,EAASC,aAAa;AACtBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAE;AACHC,MAAAA,IAAI,EAAEC,MAAM;MACZ,SAAS,EAAA;KACZ;AACDC,IAAAA,IAAI,EAAE;AACFF,MAAAA,IAAI,EAAEC,MAAM;MACZ,SAAS,EAAA;KACZ;AACDE,IAAAA,KAAK,EAAE;AACHH,MAAAA,IAAI,EAAEC,MAAM;MACZ,SAAS,EAAA;KACZ;AACDG,IAAAA,MAAM,EAAE;AACJJ,MAAAA,IAAI,EAAEC,MAAM;MACZ,SAAS,EAAA;KACZ;AACDI,IAAAA,YAAY,EAAE;AACVL,MAAAA,IAAI,EAAEC,MAAM;MACZ,SAAS,EAAA;KACZ;AACDK,IAAAA,SAAS,EAAE;AACPN,MAAAA,IAAI,EAAEC,MAAM;MACZ,SAAS,EAAA;AACb;GACH;AACDM,EAAAA,KAAK,EAAEC,aAAa;EACpBC,OAAO,EAAA,SAAPA,OAAOA,GAAG;IACN,OAAO;AACHC,MAAAA,WAAW,EAAE,IAAI;AACjBC,MAAAA,eAAe,EAAE;KACpB;AACL;AACJ,CAAC;;ACjCD,aAAe;AACXf,EAAAA,IAAI,EAAE,UAAU;AAChB,EAAA,SAAA,EAASgB,QAAY;AACrBC,EAAAA,YAAY,EAAE,KAAK;AACnBC,EAAAA,QAAQ,EAAE;IACNC,cAAc,EAAA,SAAdA,cAAcA,GAAG;AACb,MAAA,IAAI,IAAI,CAACb,IAAI,EAAE,OAAO;QAAEC,KAAK,EAAE,IAAI,CAACD,IAAI;QAAEE,MAAM,EAAE,IAAI,CAACF,IAAI;QAAEG,YAAY,EAAE,IAAI,CAACA;OAAc,CAAA,KACzF,OAAO;QAAEF,KAAK,EAAE,IAAI,CAACA,KAAK;QAAEC,MAAM,EAAE,IAAI,CAACA,MAAM;QAAEC,YAAY,EAAE,IAAI,CAACA;OAAc;AAC3F;AACJ;AACJ,CAAC;;;EChBG,OAAAW,SAAA,EAAA,EAAAC,kBAAA,CAA6G,OAA7GC,UAA6G,CAAA;AAAvG,IAAA,OAAA,EAAOC,IAAE,CAAAC,EAAA,CAAA,MAAA,CAAA;AAAWb,IAAAA,KAAK,EAAA,CAAGY,IAAE,CAAAE,EAAA,CAAA,MAAA,CAAA,EAAUC,QAAc,CAAAP,cAAA,CAAA;AAAG,IAAA,aAAW,EAAC;KAAeI,IAAI,CAAAI,IAAA,CAAA,MAAA,CAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/skeleton/BaseSkeleton.vue","../../src/skeleton/Skeleton.vue","../../src/skeleton/Skeleton.vue?vue&type=template&id=18eef55c&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport SkeletonStyle from 'primevue/skeleton/style';\n\nexport default {\n    name: 'BaseSkeleton',\n    extends: BaseComponent,\n    props: {\n        shape: {\n            type: String,\n            default: 'rectangle'\n        },\n        size: {\n            type: String,\n            default: null\n        },\n        width: {\n            type: String,\n            default: '100%'\n        },\n        height: {\n            type: String,\n            default: '1rem'\n        },\n        borderRadius: {\n            type: String,\n            default: null\n        },\n        animation: {\n            type: String,\n            default: 'wave'\n        }\n    },\n    style: SkeletonStyle,\n    provide() {\n        return {\n            $pcSkeleton: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" :style=\"[sx('root'), containerStyle]\" aria-hidden=\"true\" v-bind=\"ptmi('root')\" :data-p=\"dataP\"></div>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport BaseSkeleton from './BaseSkeleton.vue';\n\nexport default {\n    name: 'Skeleton',\n    extends: BaseSkeleton,\n    inheritAttrs: false,\n    computed: {\n        containerStyle() {\n            if (this.size) return { width: this.size, height: this.size, borderRadius: this.borderRadius };\n            else return { width: this.width, height: this.height, borderRadius: this.borderRadius };\n        },\n        dataP() {\n            return cn({\n                [this.shape]: this.shape\n            });\n        }\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" :style=\"[sx('root'), containerStyle]\" aria-hidden=\"true\" v-bind=\"ptmi('root')\" :data-p=\"dataP\"></div>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport BaseSkeleton from './BaseSkeleton.vue';\n\nexport default {\n    name: 'Skeleton',\n    extends: BaseSkeleton,\n    inheritAttrs: false,\n    computed: {\n        containerStyle() {\n            if (this.size) return { width: this.size, height: this.size, borderRadius: this.borderRadius };\n            else return { width: this.width, height: this.height, borderRadius: this.borderRadius };\n        },\n        dataP() {\n            return cn({\n                [this.shape]: this.shape\n            });\n        }\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","shape","type","String","size","width","height","borderRadius","animation","style","SkeletonStyle","provide","$pcSkeleton","$parentInstance","BaseSkeleton","inheritAttrs","computed","containerStyle","dataP","cn","_defineProperty","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","sx","$options","ptmi","_hoisted_1"],"mappings":";;;;;AAIA,eAAe;AACXA,EAAAA,IAAI,EAAE,cAAc;AACpB,EAAA,SAAA,EAASC,aAAa;AACtBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAE;AACHC,MAAAA,IAAI,EAAEC,MAAM;MACZ,SAAS,EAAA;KACZ;AACDC,IAAAA,IAAI,EAAE;AACFF,MAAAA,IAAI,EAAEC,MAAM;MACZ,SAAS,EAAA;KACZ;AACDE,IAAAA,KAAK,EAAE;AACHH,MAAAA,IAAI,EAAEC,MAAM;MACZ,SAAS,EAAA;KACZ;AACDG,IAAAA,MAAM,EAAE;AACJJ,MAAAA,IAAI,EAAEC,MAAM;MACZ,SAAS,EAAA;KACZ;AACDI,IAAAA,YAAY,EAAE;AACVL,MAAAA,IAAI,EAAEC,MAAM;MACZ,SAAS,EAAA;KACZ;AACDK,IAAAA,SAAS,EAAE;AACPN,MAAAA,IAAI,EAAEC,MAAM;MACZ,SAAS,EAAA;AACb;GACH;AACDM,EAAAA,KAAK,EAAEC,aAAa;EACpBC,OAAO,EAAA,SAAPA,OAAOA,GAAG;IACN,OAAO;AACHC,MAAAA,WAAW,EAAE,IAAI;AACjBC,MAAAA,eAAe,EAAE;KACpB;AACL;AACJ,CAAC;;;;;;AChCD,aAAe;AACXf,EAAAA,IAAI,EAAE,UAAU;AAChB,EAAA,SAAA,EAASgB,QAAY;AACrBC,EAAAA,YAAY,EAAE,KAAK;AACnBC,EAAAA,QAAQ,EAAE;IACNC,cAAc,EAAA,SAAdA,cAAcA,GAAG;AACb,MAAA,IAAI,IAAI,CAACb,IAAI,EAAE,OAAO;QAAEC,KAAK,EAAE,IAAI,CAACD,IAAI;QAAEE,MAAM,EAAE,IAAI,CAACF,IAAI;QAAEG,YAAY,EAAE,IAAI,CAACA;OAAc,CAAA,KACzF,OAAO;QAAEF,KAAK,EAAE,IAAI,CAACA,KAAK;QAAEC,MAAM,EAAE,IAAI,CAACA,MAAM;QAAEC,YAAY,EAAE,IAAI,CAACA;OAAc;KAC1F;IACDW,KAAK,EAAA,SAALA,KAAKA,GAAG;AACJ,MAAA,OAAOC,EAAE,CAAAC,eAAA,CAAA,EAAA,EACJ,IAAI,CAACnB,KAAK,EAAG,IAAI,CAACA,KAAI,CAC1B,CAAC;AACN;AACJ;AACJ,CAAC;;;;ECtBG,OAAAoB,SAAA,EAAA,EAAAC,kBAAA,CAA6H,OAA7HC,UAA6H,CAAA;AAAvH,IAAA,OAAA,EAAOC,IAAE,CAAAC,EAAA,CAAA,MAAA,CAAA;AAAWhB,IAAAA,KAAK,EAAA,CAAGe,IAAE,CAAAE,EAAA,CAAA,MAAA,CAAA,EAAUC,QAAc,CAAAV,cAAA,CAAA;AAAG,IAAA,aAAW,EAAC;KAAeO,IAAI,CAAAI,IAAA,CAAA,MAAA,CAAA,EAAA;IAAW,QAAM,EAAED,QAAK,CAAAT;AAAA,GAAA,CAAA,EAAA,IAAA,EAAA,EAAA,EAAAW,UAAA,CAAA;;;;;;;"}

package/slider/Slider.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="cx('root')" @click="onBarClick" v-bind="ptmi('root')" :data-p-sliding="false">
-        <span :class="cx('range')" :style="[sx('range'), rangeStyle()]" v-bind="ptm('range')"></span>
+    <div :class="cx('root')" @click="onBarClick" v-bind="ptmi('root')" :data-p-sliding="false" :data-p="dataP">
+        <span :class="cx('range')" :style="[sx('range'), rangeStyle()]" v-bind="ptm('range')" :data-p="dataP"></span>
         <span
             v-if="!range"
             :class="cx('handle')"
@@ -20,6 +20,7 @@
             :aria-label="ariaLabel"
             :aria-orientation="orientation"
             v-bind="ptm('handle')"
+            :data-p="dataP"
         ></span>
         <span
             v-if="range"
@@ -40,6 +41,7 @@
             :aria-label="ariaLabel"
             :aria-orientation="orientation"
             v-bind="ptm('startHandler')"
+            :data-p="dataP"
         ></span>
         <span
             v-if="range"
@@ -60,11 +62,13 @@
             :aria-label="ariaLabel"
             :aria-orientation="orientation"
             v-bind="ptm('endHandler')"
+            :data-p="dataP"
         ></span>
     </div>
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { getAttribute, getWindowScrollLeft, getWindowScrollTop, isRTL } from '@primeuix/utils/dom';
 import BaseSlider from './BaseSlider.vue';
 
@@ -359,6 +363,11 @@ export default {
                 if (this.value[1] > this.max) return 100;
                 else return ((this.value[1] - this.min) * 100) / (this.max - this.min);
             } else return 100;
+        },
+        dataP() {
+            return cn({
+                [this.orientation]: this.orientation
+            });
         }
     }
 };

package/slider/index.d.ts

@@ -7,7 +7,7 @@
  * @module slider
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, HintedString, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { PassThroughOptions } from 'primevue/passthrough';
 
@@ -123,7 +123,7 @@ export interface SliderProps {
      * Orientation of the slider.
      * @defaultValue horizontal
      */
-    orientation?: 'horizontal' | 'vertical' | undefined;
+    orientation?: HintedString<'horizontal' | 'vertical'> | undefined;
     /**
      * Step factor to increment/decrement the value.
      * @defaultValue 1

package/slider/index.mjs

@@ -1,3 +1,4 @@
+import { cn } from '@primeuix/utils';
 import { getAttribute, isRTL, getWindowScrollLeft, getWindowScrollTop } from '@primeuix/utils/dom';
 import BaseEditableHolder from '@primevue/core/baseeditableholder';
 import SliderStyle from 'primevue/slider/style';
@@ -49,6 +50,10 @@ var script$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); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -329,13 +334,18 @@ var script = {
       if (this.value && this.value.length === 2 && this.value[1] !== undefined) {
         if (this.value[1] > this.max) return 100;else return (this.value[1] - this.min) * 100 / (this.max - this.min);
       } else return 100;
+    },
+    dataP: function dataP() {
+      return cn(_defineProperty({}, this.orientation, this.orientation));
     }
   }
 };
 
-var _hoisted_1 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby", "aria-label", "aria-orientation"];
-var _hoisted_2 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby", "aria-label", "aria-orientation"];
-var _hoisted_3 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby", "aria-label", "aria-orientation"];
+var _hoisted_1 = ["data-p"];
+var _hoisted_2 = ["data-p"];
+var _hoisted_3 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby", "aria-label", "aria-orientation", "data-p"];
+var _hoisted_4 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby", "aria-label", "aria-orientation", "data-p"];
+var _hoisted_5 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby", "aria-label", "aria-orientation", "data-p"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", mergeProps({
     "class": _ctx.cx('root'),
@@ -343,11 +353,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return $options.onBarClick && $options.onBarClick.apply($options, arguments);
     })
   }, _ctx.ptmi('root'), {
-    "data-p-sliding": false
+    "data-p-sliding": false,
+    "data-p": $options.dataP
   }), [createElementVNode("span", mergeProps({
     "class": _ctx.cx('range'),
     style: [_ctx.sx('range'), $options.rangeStyle()]
-  }, _ctx.ptm('range')), null, 16), !_ctx.range ? (openBlock(), createElementBlock("span", mergeProps({
+  }, _ctx.ptm('range'), {
+    "data-p": $options.dataP
+  }), null, 16, _hoisted_2), !_ctx.range ? (openBlock(), createElementBlock("span", mergeProps({
     key: 0,
     "class": _ctx.cx('handle'),
     style: [_ctx.sx('handle'), $options.handleStyle()],
@@ -377,7 +390,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-labelledby": _ctx.ariaLabelledby,
     "aria-label": _ctx.ariaLabel,
     "aria-orientation": _ctx.orientation
-  }, _ctx.ptm('handle')), null, 16, _hoisted_1)) : createCommentVNode("", true), _ctx.range ? (openBlock(), createElementBlock("span", mergeProps({
+  }, _ctx.ptm('handle'), {
+    "data-p": $options.dataP
+  }), null, 16, _hoisted_3)) : createCommentVNode("", true), _ctx.range ? (openBlock(), createElementBlock("span", mergeProps({
     key: 1,
     "class": _ctx.cx('handle'),
     style: [_ctx.sx('handle'), $options.rangeStartHandleStyle()],
@@ -407,7 +422,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-labelledby": _ctx.ariaLabelledby,
     "aria-label": _ctx.ariaLabel,
     "aria-orientation": _ctx.orientation
-  }, _ctx.ptm('startHandler')), null, 16, _hoisted_2)) : createCommentVNode("", true), _ctx.range ? (openBlock(), createElementBlock("span", mergeProps({
+  }, _ctx.ptm('startHandler'), {
+    "data-p": $options.dataP
+  }), null, 16, _hoisted_4)) : createCommentVNode("", true), _ctx.range ? (openBlock(), createElementBlock("span", mergeProps({
     key: 2,
     "class": _ctx.cx('handle'),
     style: [_ctx.sx('handle'), $options.rangeEndHandleStyle()],
@@ -437,7 +454,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-labelledby": _ctx.ariaLabelledby,
     "aria-label": _ctx.ariaLabel,
     "aria-orientation": _ctx.orientation
-  }, _ctx.ptm('endHandler')), null, 16, _hoisted_3)) : createCommentVNode("", true)], 16);
+  }, _ctx.ptm('endHandler'), {
+    "data-p": $options.dataP
+  }), null, 16, _hoisted_5)) : createCommentVNode("", true)], 16, _hoisted_1);
 }
 
 script.render = render;