primevue 4.1.1 → 4.2.0

package/togglebutton/ToggleButton.vue

@@ -5,8 +5,9 @@
         :class="cx('root')"
         :tabindex="tabindex"
         :disabled="disabled"
-        :aria-pressed="modelValue"
+        :aria-pressed="d_value"
         @click="onChange"
+        @blur="onBlur"
         v-bind="getPTOptions('root')"
         :aria-labelledby="ariaLabelledby"
         :data-p-checked="active"
@@ -14,8 +15,8 @@
     >
         <span :class="cx('content')" v-bind="getPTOptions('content')">
             <slot>
-                <slot name="icon" :value="modelValue" :class="cx('icon')">
-                    <span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
+                <slot name="icon" :value="d_value" :class="cx('icon')">
+                    <span v-if="onIcon || offIcon" :class="[cx('icon'), d_value ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
                 </slot>
                 <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
             </slot>
@@ -32,7 +33,7 @@ export default {
     name: 'ToggleButton',
     extends: BaseToggleButton,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'change'],
+    emits: ['change'],
     methods: {
         getPTOptions(key) {
             const _ptm = key === 'root' ? this.ptmi : this.ptm;
@@ -46,20 +47,23 @@ export default {
         },
         onChange(event) {
             if (!this.disabled && !this.readonly) {
-                this.$emit('update:modelValue', !this.modelValue);
+                this.writeValue(!this.d_value, event);
                 this.$emit('change', event);
             }
+        },
+        onBlur(event) {
+            this.formField.onBlur?.(event);
         }
     },
     computed: {
         active() {
-            return this.modelValue === true;
+            return this.d_value === true;
         },
         hasLabel() {
             return isNotEmpty(this.onLabel) && isNotEmpty(this.offLabel);
         },
         label() {
-            return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel) : '&nbsp;';
+            return this.hasLabel ? (this.d_value ? this.onLabel : this.offLabel) : '&nbsp;';
         }
     },
     directives: {

package/togglebutton/index.d.ts

@@ -104,6 +104,14 @@ export interface ToggleButtonProps {
      * @defaultValue false
      */
     modelValue?: boolean | undefined;
+    /**
+     * The default value for the input when not controlled by `modelValue`.
+     */
+    defaultValue?: boolean | undefined;
+    /**
+     * The name attribute for the element, typically used in form submissions.
+     */
+    name?: string | undefined;
     /**
      * Icon for the on state.
      */
@@ -150,6 +158,14 @@ export interface ToggleButtonProps {
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
     ariaLabelledby?: string | undefined;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
+    /**
+     * Form control object, typically used for handling validation and form state.
+     */
+    formControl?: Record<string, any> | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
@@ -204,6 +220,11 @@ export interface ToggleButtonEmitsOptions {
      * @param {boolean} value - New value.
      */
     'update:modelValue'(value: boolean): void;
+    /**
+     * Emitted when the value changes in uncontrolled mode.
+     * @param {boolean} value - New value.
+     */
+    'value-change'(value: boolean): void;
     /**
      * Callback to invoke on value change.
      * @param {Event} event - Browser event.

package/togglebutton/index.mjs

@@ -1,14 +1,13 @@
 import { isNotEmpty } from '@primeuix/utils/object';
 import Ripple from 'primevue/ripple';
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseEditableHolder from '@primevue/core/baseeditableholder';
 import ToggleButtonStyle from 'primevue/togglebutton/style';
 import { resolveDirective, withDirectives, openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot, normalizeClass, createCommentVNode, toDisplayString } from 'vue';
 
 var script$1 = {
   name: 'BaseToggleButton',
-  "extends": BaseComponent,
+  "extends": BaseEditableHolder,
   props: {
-    modelValue: Boolean,
     onIcon: String,
     offIcon: String,
     onLabel: {
@@ -23,14 +22,6 @@ var script$1 = {
       type: String,
       "default": 'left'
     },
-    invalid: {
-      type: Boolean,
-      "default": false
-    },
-    disabled: {
-      type: Boolean,
-      "default": false
-    },
     readonly: {
       type: Boolean,
       "default": false
@@ -46,6 +37,10 @@ var script$1 = {
     ariaLabel: {
       type: String,
       "default": null
+    },
+    size: {
+      type: String,
+      "default": null
     }
   },
   style: ToggleButtonStyle,
@@ -61,7 +56,7 @@ var script = {
   name: 'ToggleButton',
   "extends": script$1,
   inheritAttrs: false,
-  emits: ['update:modelValue', 'change'],
+  emits: ['change'],
   methods: {
     getPTOptions: function getPTOptions(key) {
       var _ptm = key === 'root' ? this.ptmi : this.ptm;
@@ -74,20 +69,24 @@ var script = {
     },
     onChange: function onChange(event) {
       if (!this.disabled && !this.readonly) {
-        this.$emit('update:modelValue', !this.modelValue);
+        this.writeValue(!this.d_value, event);
         this.$emit('change', event);
       }
+    },
+    onBlur: function onBlur(event) {
+      var _this$formField$onBlu, _this$formField;
+      (_this$formField$onBlu = (_this$formField = this.formField).onBlur) === null || _this$formField$onBlu === void 0 || _this$formField$onBlu.call(_this$formField, event);
     }
   },
   computed: {
     active: function active() {
-      return this.modelValue === true;
+      return this.d_value === true;
     },
     hasLabel: function hasLabel() {
       return isNotEmpty(this.onLabel) && isNotEmpty(this.offLabel);
     },
     label: function label() {
-      return this.hasLabel ? this.modelValue ? this.onLabel : this.offLabel : ' ';
+      return this.hasLabel ? this.d_value ? this.onLabel : this.offLabel : ' ';
     }
   },
   directives: {
@@ -103,9 +102,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "class": _ctx.cx('root'),
     tabindex: _ctx.tabindex,
     disabled: _ctx.disabled,
-    "aria-pressed": _ctx.modelValue,
+    "aria-pressed": _ctx.d_value,
     onClick: _cache[0] || (_cache[0] = function () {
       return $options.onChange && $options.onChange.apply($options, arguments);
+    }),
+    onBlur: _cache[1] || (_cache[1] = function () {
+      return $options.onBlur && $options.onBlur.apply($options, arguments);
     })
   }, $options.getPTOptions('root'), {
     "aria-labelledby": _ctx.ariaLabelledby,
@@ -115,12 +117,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "class": _ctx.cx('content')
   }, $options.getPTOptions('content')), [renderSlot(_ctx.$slots, "default", {}, function () {
     return [renderSlot(_ctx.$slots, "icon", {
-      value: _ctx.modelValue,
+      value: _ctx.d_value,
       "class": normalizeClass(_ctx.cx('icon'))
     }, function () {
       return [_ctx.onIcon || _ctx.offIcon ? (openBlock(), createElementBlock("span", mergeProps({
         key: 0,
-        "class": [_ctx.cx('icon'), _ctx.modelValue ? _ctx.onIcon : _ctx.offIcon]
+        "class": [_ctx.cx('icon'), _ctx.d_value ? _ctx.onIcon : _ctx.offIcon]
       }, $options.getPTOptions('icon')), null, 16)) : createCommentVNode("", true)];
     }), createElementVNode("span", mergeProps({
       "class": _ctx.cx('label')

package/togglebutton/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/togglebutton/BaseToggleButton.vue","../../src/togglebutton/ToggleButton.vue","../../src/togglebutton/ToggleButton.vue?vue&type=template&id=d8d31a32&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport ToggleButtonStyle from 'primevue/togglebutton/style';\n\nexport default {\n    name: 'BaseToggleButton',\n    extends: BaseComponent,\n    props: {\n        modelValue: Boolean,\n        onIcon: String,\n        offIcon: String,\n        onLabel: {\n            type: String,\n            default: 'Yes'\n        },\n        offLabel: {\n            type: String,\n            default: 'No'\n        },\n        iconPos: {\n            type: String,\n            default: 'left'\n        },\n        invalid: {\n            type: Boolean,\n            default: false\n        },\n        disabled: {\n            type: Boolean,\n            default: false\n        },\n        readonly: {\n            type: Boolean,\n            default: false\n        },\n        tabindex: {\n            type: Number,\n            default: null\n        },\n        ariaLabelledby: {\n            type: String,\n            default: null\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        }\n    },\n    style: ToggleButtonStyle,\n    provide() {\n        return {\n            $pcToggleButton: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <button\n        v-ripple\n        type=\"button\"\n        :class=\"cx('root')\"\n        :tabindex=\"tabindex\"\n        :disabled=\"disabled\"\n        :aria-pressed=\"modelValue\"\n        @click=\"onChange\"\n        v-bind=\"getPTOptions('root')\"\n        :aria-labelledby=\"ariaLabelledby\"\n        :data-p-checked=\"active\"\n        :data-p-disabled=\"disabled\"\n    >\n        <span :class=\"cx('content')\" v-bind=\"getPTOptions('content')\">\n            <slot>\n                <slot name=\"icon\" :value=\"modelValue\" :class=\"cx('icon')\">\n                    <span v-if=\"onIcon || offIcon\" :class=\"[cx('icon'), modelValue ? onIcon : offIcon]\" v-bind=\"getPTOptions('icon')\" />\n                </slot>\n                <span :class=\"cx('label')\" v-bind=\"getPTOptions('label')\">{{ label }}</span>\n            </slot>\n        </span>\n    </button>\n</template>\n\n<script>\nimport { isNotEmpty } from '@primeuix/utils/object';\nimport Ripple from 'primevue/ripple';\nimport BaseToggleButton from './BaseToggleButton.vue';\n\nexport default {\n    name: 'ToggleButton',\n    extends: BaseToggleButton,\n    inheritAttrs: false,\n    emits: ['update:modelValue', 'change'],\n    methods: {\n        getPTOptions(key) {\n            const _ptm = key === 'root' ? this.ptmi : this.ptm;\n\n            return _ptm(key, {\n                context: {\n                    active: this.active,\n                    disabled: this.disabled\n                }\n            });\n        },\n        onChange(event) {\n            if (!this.disabled && !this.readonly) {\n                this.$emit('update:modelValue', !this.modelValue);\n                this.$emit('change', event);\n            }\n        }\n    },\n    computed: {\n        active() {\n            return this.modelValue === true;\n        },\n        hasLabel() {\n            return isNotEmpty(this.onLabel) && isNotEmpty(this.offLabel);\n        },\n        label() {\n            return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel) : '&nbsp;';\n        }\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <button\n        v-ripple\n        type=\"button\"\n        :class=\"cx('root')\"\n        :tabindex=\"tabindex\"\n        :disabled=\"disabled\"\n        :aria-pressed=\"modelValue\"\n        @click=\"onChange\"\n        v-bind=\"getPTOptions('root')\"\n        :aria-labelledby=\"ariaLabelledby\"\n        :data-p-checked=\"active\"\n        :data-p-disabled=\"disabled\"\n    >\n        <span :class=\"cx('content')\" v-bind=\"getPTOptions('content')\">\n            <slot>\n                <slot name=\"icon\" :value=\"modelValue\" :class=\"cx('icon')\">\n                    <span v-if=\"onIcon || offIcon\" :class=\"[cx('icon'), modelValue ? onIcon : offIcon]\" v-bind=\"getPTOptions('icon')\" />\n                </slot>\n                <span :class=\"cx('label')\" v-bind=\"getPTOptions('label')\">{{ label }}</span>\n            </slot>\n        </span>\n    </button>\n</template>\n\n<script>\nimport { isNotEmpty } from '@primeuix/utils/object';\nimport Ripple from 'primevue/ripple';\nimport BaseToggleButton from './BaseToggleButton.vue';\n\nexport default {\n    name: 'ToggleButton',\n    extends: BaseToggleButton,\n    inheritAttrs: false,\n    emits: ['update:modelValue', 'change'],\n    methods: {\n        getPTOptions(key) {\n            const _ptm = key === 'root' ? this.ptmi : this.ptm;\n\n            return _ptm(key, {\n                context: {\n                    active: this.active,\n                    disabled: this.disabled\n                }\n            });\n        },\n        onChange(event) {\n            if (!this.disabled && !this.readonly) {\n                this.$emit('update:modelValue', !this.modelValue);\n                this.$emit('change', event);\n            }\n        }\n    },\n    computed: {\n        active() {\n            return this.modelValue === true;\n        },\n        hasLabel() {\n            return isNotEmpty(this.onLabel) && isNotEmpty(this.offLabel);\n        },\n        label() {\n            return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel) : '&nbsp;';\n        }\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","modelValue","Boolean","onIcon","String","offIcon","onLabel","type","offLabel","iconPos","invalid","disabled","readonly","tabindex","Number","ariaLabelledby","ariaLabel","style","ToggleButtonStyle","provide","$pcToggleButton","$parentInstance","BaseToggleButton","inheritAttrs","emits","methods","getPTOptions","key","_ptm","ptmi","ptm","context","active","onChange","event","$emit","computed","hasLabel","isNotEmpty","label","directives","ripple","Ripple","_withDirectives","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","onClick","$options","apply","arguments","_createElementVNode","_renderSlot","$slots","value"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/togglebutton/BaseToggleButton.vue","../../src/togglebutton/ToggleButton.vue","../../src/togglebutton/ToggleButton.vue?vue&type=template&id=42e829fe&lang.js"],"sourcesContent":["<script>\nimport BaseEditableHolder from '@primevue/core/baseeditableholder';\nimport ToggleButtonStyle from 'primevue/togglebutton/style';\n\nexport default {\n    name: 'BaseToggleButton',\n    extends: BaseEditableHolder,\n    props: {\n        onIcon: String,\n        offIcon: String,\n        onLabel: {\n            type: String,\n            default: 'Yes'\n        },\n        offLabel: {\n            type: String,\n            default: 'No'\n        },\n        iconPos: {\n            type: String,\n            default: 'left'\n        },\n        readonly: {\n            type: Boolean,\n            default: false\n        },\n        tabindex: {\n            type: Number,\n            default: null\n        },\n        ariaLabelledby: {\n            type: String,\n            default: null\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        },\n        size: {\n            type: String,\n            default: null\n        }\n    },\n    style: ToggleButtonStyle,\n    provide() {\n        return {\n            $pcToggleButton: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <button\n        v-ripple\n        type=\"button\"\n        :class=\"cx('root')\"\n        :tabindex=\"tabindex\"\n        :disabled=\"disabled\"\n        :aria-pressed=\"d_value\"\n        @click=\"onChange\"\n        @blur=\"onBlur\"\n        v-bind=\"getPTOptions('root')\"\n        :aria-labelledby=\"ariaLabelledby\"\n        :data-p-checked=\"active\"\n        :data-p-disabled=\"disabled\"\n    >\n        <span :class=\"cx('content')\" v-bind=\"getPTOptions('content')\">\n            <slot>\n                <slot name=\"icon\" :value=\"d_value\" :class=\"cx('icon')\">\n                    <span v-if=\"onIcon || offIcon\" :class=\"[cx('icon'), d_value ? onIcon : offIcon]\" v-bind=\"getPTOptions('icon')\" />\n                </slot>\n                <span :class=\"cx('label')\" v-bind=\"getPTOptions('label')\">{{ label }}</span>\n            </slot>\n        </span>\n    </button>\n</template>\n\n<script>\nimport { isNotEmpty } from '@primeuix/utils/object';\nimport Ripple from 'primevue/ripple';\nimport BaseToggleButton from './BaseToggleButton.vue';\n\nexport default {\n    name: 'ToggleButton',\n    extends: BaseToggleButton,\n    inheritAttrs: false,\n    emits: ['change'],\n    methods: {\n        getPTOptions(key) {\n            const _ptm = key === 'root' ? this.ptmi : this.ptm;\n\n            return _ptm(key, {\n                context: {\n                    active: this.active,\n                    disabled: this.disabled\n                }\n            });\n        },\n        onChange(event) {\n            if (!this.disabled && !this.readonly) {\n                this.writeValue(!this.d_value, event);\n                this.$emit('change', event);\n            }\n        },\n        onBlur(event) {\n            this.formField.onBlur?.(event);\n        }\n    },\n    computed: {\n        active() {\n            return this.d_value === true;\n        },\n        hasLabel() {\n            return isNotEmpty(this.onLabel) && isNotEmpty(this.offLabel);\n        },\n        label() {\n            return this.hasLabel ? (this.d_value ? this.onLabel : this.offLabel) : '&nbsp;';\n        }\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <button\n        v-ripple\n        type=\"button\"\n        :class=\"cx('root')\"\n        :tabindex=\"tabindex\"\n        :disabled=\"disabled\"\n        :aria-pressed=\"d_value\"\n        @click=\"onChange\"\n        @blur=\"onBlur\"\n        v-bind=\"getPTOptions('root')\"\n        :aria-labelledby=\"ariaLabelledby\"\n        :data-p-checked=\"active\"\n        :data-p-disabled=\"disabled\"\n    >\n        <span :class=\"cx('content')\" v-bind=\"getPTOptions('content')\">\n            <slot>\n                <slot name=\"icon\" :value=\"d_value\" :class=\"cx('icon')\">\n                    <span v-if=\"onIcon || offIcon\" :class=\"[cx('icon'), d_value ? onIcon : offIcon]\" v-bind=\"getPTOptions('icon')\" />\n                </slot>\n                <span :class=\"cx('label')\" v-bind=\"getPTOptions('label')\">{{ label }}</span>\n            </slot>\n        </span>\n    </button>\n</template>\n\n<script>\nimport { isNotEmpty } from '@primeuix/utils/object';\nimport Ripple from 'primevue/ripple';\nimport BaseToggleButton from './BaseToggleButton.vue';\n\nexport default {\n    name: 'ToggleButton',\n    extends: BaseToggleButton,\n    inheritAttrs: false,\n    emits: ['change'],\n    methods: {\n        getPTOptions(key) {\n            const _ptm = key === 'root' ? this.ptmi : this.ptm;\n\n            return _ptm(key, {\n                context: {\n                    active: this.active,\n                    disabled: this.disabled\n                }\n            });\n        },\n        onChange(event) {\n            if (!this.disabled && !this.readonly) {\n                this.writeValue(!this.d_value, event);\n                this.$emit('change', event);\n            }\n        },\n        onBlur(event) {\n            this.formField.onBlur?.(event);\n        }\n    },\n    computed: {\n        active() {\n            return this.d_value === true;\n        },\n        hasLabel() {\n            return isNotEmpty(this.onLabel) && isNotEmpty(this.offLabel);\n        },\n        label() {\n            return this.hasLabel ? (this.d_value ? this.onLabel : this.offLabel) : '&nbsp;';\n        }\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n"],"names":["name","BaseEditableHolder","props","onIcon","String","offIcon","onLabel","type","offLabel","iconPos","readonly","Boolean","tabindex","Number","ariaLabelledby","ariaLabel","size","style","ToggleButtonStyle","provide","$pcToggleButton","$parentInstance","BaseToggleButton","inheritAttrs","emits","methods","getPTOptions","key","_ptm","ptmi","ptm","context","active","disabled","onChange","event","writeValue","d_value","$emit","onBlur","_this$formField$onBlu","_this$formField","formField","call","computed","hasLabel","isNotEmpty","label","directives","ripple","Ripple","_withDirectives","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","onClick","$options","apply","arguments","_createElementVNode","_renderSlot","$slots","value"],"mappings":"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"}

package/togglebutton/style/index.mjs

@@ -2,7 +2,7 @@ import BaseStyle from '@primevue/core/base/style';
 
 var theme = function theme(_ref) {
   var dt = _ref.dt;
-  return "\n.p-togglebutton {\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n    color: ".concat(dt('togglebutton.color'), ";\n    background: ").concat(dt('togglebutton.background'), ";\n    border: 1px solid ").concat(dt('togglebutton.border.color'), ";\n    padding: ").concat(dt('togglebutton.padding'), ";\n    font-size: 1rem;\n    font-family: inherit;\n    font-feature-settings: inherit;\n    transition: background ").concat(dt('togglebutton.transition.duration'), ", color ").concat(dt('togglebutton.transition.duration'), ", border-color ").concat(dt('togglebutton.transition.duration'), ",\n        outline-color ").concat(dt('togglebutton.transition.duration'), ", box-shadow ").concat(dt('togglebutton.transition.duration'), ";\n    border-radius: ").concat(dt('togglebutton.border.radius'), ";\n    outline-color: transparent;\n    font-weight: ").concat(dt('togglebutton.font.weight'), ";\n}\n\n.p-togglebutton-content {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: ").concat(dt('togglebutton.gap'), ";\n}\n\n.p-togglebutton-label,\n.p-togglebutton-icon {\n    position: relative;\n    transition: none;\n}\n\n.p-togglebutton::before {\n    content: \"\";\n    background: transparent;\n    transition: background ").concat(dt('togglebutton.transition.duration'), ", color ").concat(dt('togglebutton.transition.duration'), ", border-color ").concat(dt('togglebutton.transition.duration'), ",\n            outline-color ").concat(dt('togglebutton.transition.duration'), ", box-shadow ").concat(dt('togglebutton.transition.duration'), ";\n    position: absolute;\n    left: ").concat(dt('togglebutton.content.left'), ";\n    top: ").concat(dt('togglebutton.content.top'), ";\n    width: calc(100% - calc(2 *  ").concat(dt('togglebutton.content.left'), "));\n    height: calc(100% - calc(2 *  ").concat(dt('togglebutton.content.top'), "));\n    border-radius: ").concat(dt('togglebutton.border.radius'), ";\n}\n\n.p-togglebutton.p-togglebutton-checked::before {\n    background: ").concat(dt('togglebutton.content.checked.background'), ";\n    box-shadow: ").concat(dt('togglebutton.content.checked.shadow'), ";\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {\n    background: ").concat(dt('togglebutton.hover.background'), ";\n    color: ").concat(dt('togglebutton.hover.color'), ";\n}\n\n.p-togglebutton.p-togglebutton-checked {\n    background: ").concat(dt('togglebutton.checked.background'), ";\n    border-color: ").concat(dt('togglebutton.checked.border.color'), ";\n    color: ").concat(dt('togglebutton.checked.color'), ";\n}\n\n.p-togglebutton:focus-visible {\n    box-shadow: ").concat(dt('togglebutton.focus.ring.shadow'), ";\n    outline: ").concat(dt('togglebutton.focus.ring.width'), " ").concat(dt('togglebutton.focus.ring.style'), " ").concat(dt('togglebutton.focus.ring.color'), ";\n    outline-offset: ").concat(dt('togglebutton.focus.ring.offset'), ";\n}\n\n.p-togglebutton.p-invalid {\n    border-color: ").concat(dt('togglebutton.invalid.border.color'), ";\n}\n\n.p-togglebutton:disabled {\n    opacity: 1;\n    cursor: default;\n    background: ").concat(dt('togglebutton.disabled.background'), ";\n    border-color: ").concat(dt('togglebutton.disabled.border.color'), ";\n    color: ").concat(dt('togglebutton.disabled.color'), ";\n}\n\n.p-togglebutton-icon {\n    color: ").concat(dt('togglebutton.icon.color'), ";\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {\n    color: ").concat(dt('togglebutton.icon.hover.color'), ";\n}\n\n.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {\n    color: ").concat(dt('togglebutton.icon.checked.color'), ";\n}\n\n.p-togglebutton:disabled .p-togglebutton-icon {\n    color: ").concat(dt('togglebutton.icon.disabled.color'), ";\n}\n");
+  return "\n.p-togglebutton {\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n    color: ".concat(dt('togglebutton.color'), ";\n    background: ").concat(dt('togglebutton.background'), ";\n    border: 1px solid ").concat(dt('togglebutton.border.color'), ";\n    padding: ").concat(dt('togglebutton.padding'), ";\n    font-size: 1rem;\n    font-family: inherit;\n    font-feature-settings: inherit;\n    transition: background ").concat(dt('togglebutton.transition.duration'), ", color ").concat(dt('togglebutton.transition.duration'), ", border-color ").concat(dt('togglebutton.transition.duration'), ",\n        outline-color ").concat(dt('togglebutton.transition.duration'), ", box-shadow ").concat(dt('togglebutton.transition.duration'), ";\n    border-radius: ").concat(dt('togglebutton.border.radius'), ";\n    outline-color: transparent;\n    font-weight: ").concat(dt('togglebutton.font.weight'), ";\n}\n\n.p-togglebutton-content {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: ").concat(dt('togglebutton.gap'), ";\n}\n\n.p-togglebutton-label,\n.p-togglebutton-icon {\n    position: relative;\n    transition: none;\n}\n\n.p-togglebutton::before {\n    content: \"\";\n    background: transparent;\n    transition: background ").concat(dt('togglebutton.transition.duration'), ", color ").concat(dt('togglebutton.transition.duration'), ", border-color ").concat(dt('togglebutton.transition.duration'), ",\n            outline-color ").concat(dt('togglebutton.transition.duration'), ", box-shadow ").concat(dt('togglebutton.transition.duration'), ";\n    position: absolute;\n    inset-inline-start: ").concat(dt('togglebutton.content.left'), ";\n    inset-block-start: ").concat(dt('togglebutton.content.top'), ";\n    width: calc(100% - calc(2 * ").concat(dt('togglebutton.content.left'), "));\n    height: calc(100% - calc(2 * ").concat(dt('togglebutton.content.top'), "));\n    border-radius: ").concat(dt('togglebutton.border.radius'), ";\n}\n\n.p-togglebutton.p-togglebutton-checked::before {\n    background: ").concat(dt('togglebutton.content.checked.background'), ";\n    box-shadow: ").concat(dt('togglebutton.content.checked.shadow'), ";\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {\n    background: ").concat(dt('togglebutton.hover.background'), ";\n    color: ").concat(dt('togglebutton.hover.color'), ";\n}\n\n.p-togglebutton.p-togglebutton-checked {\n    background: ").concat(dt('togglebutton.checked.background'), ";\n    border-color: ").concat(dt('togglebutton.checked.border.color'), ";\n    color: ").concat(dt('togglebutton.checked.color'), ";\n}\n\n.p-togglebutton:focus-visible {\n    box-shadow: ").concat(dt('togglebutton.focus.ring.shadow'), ";\n    outline: ").concat(dt('togglebutton.focus.ring.width'), " ").concat(dt('togglebutton.focus.ring.style'), " ").concat(dt('togglebutton.focus.ring.color'), ";\n    outline-offset: ").concat(dt('togglebutton.focus.ring.offset'), ";\n}\n\n.p-togglebutton.p-invalid {\n    border-color: ").concat(dt('togglebutton.invalid.border.color'), ";\n}\n\n.p-togglebutton:disabled {\n    opacity: 1;\n    cursor: default;\n    background: ").concat(dt('togglebutton.disabled.background'), ";\n    border-color: ").concat(dt('togglebutton.disabled.border.color'), ";\n    color: ").concat(dt('togglebutton.disabled.color'), ";\n}\n\n.p-togglebutton-icon {\n    color: ").concat(dt('togglebutton.icon.color'), ";\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {\n    color: ").concat(dt('togglebutton.icon.hover.color'), ";\n}\n\n.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {\n    color: ").concat(dt('togglebutton.icon.checked.color'), ";\n}\n\n.p-togglebutton:disabled .p-togglebutton-icon {\n    color: ").concat(dt('togglebutton.icon.disabled.color'), ";\n}\n\n.p-togglebutton-sm {\n    padding: ").concat(dt('togglebutton.sm.padding'), ";\n    font-size: ").concat(dt('togglebutton.sm.font.size'), ";\n}\n\n.p-togglebutton-lg {\n    padding: ").concat(dt('togglebutton.lg.padding'), ";\n    font-size: ").concat(dt('togglebutton.lg.font.size'), ";\n}\n");
 };
 var classes = {
   root: function root(_ref2) {
@@ -10,7 +10,9 @@ var classes = {
       props = _ref2.props;
     return ['p-togglebutton p-component', {
       'p-togglebutton-checked': instance.active,
-      'p-invalid': props.invalid
+      'p-invalid': instance.$invalid,
+      'p-togglebutton-sm p-inputfield-sm': props.size === 'small',
+      'p-togglebutton-lg p-inputfield-lg': props.size === 'large'
     }];
   },
   content: 'p-togglebutton-content',

package/togglebutton/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/togglebutton/style/ToggleButtonStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-togglebutton {\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n    color: ${dt('togglebutton.color')};\n    background: ${dt('togglebutton.background')};\n    border: 1px solid ${dt('togglebutton.border.color')};\n    padding: ${dt('togglebutton.padding')};\n    font-size: 1rem;\n    font-family: inherit;\n    font-feature-settings: inherit;\n    transition: background ${dt('togglebutton.transition.duration')}, color ${dt('togglebutton.transition.duration')}, border-color ${dt('togglebutton.transition.duration')},\n        outline-color ${dt('togglebutton.transition.duration')}, box-shadow ${dt('togglebutton.transition.duration')};\n    border-radius: ${dt('togglebutton.border.radius')};\n    outline-color: transparent;\n    font-weight: ${dt('togglebutton.font.weight')};\n}\n\n.p-togglebutton-content {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: ${dt('togglebutton.gap')};\n}\n\n.p-togglebutton-label,\n.p-togglebutton-icon {\n    position: relative;\n    transition: none;\n}\n\n.p-togglebutton::before {\n    content: \"\";\n    background: transparent;\n    transition: background ${dt('togglebutton.transition.duration')}, color ${dt('togglebutton.transition.duration')}, border-color ${dt('togglebutton.transition.duration')},\n            outline-color ${dt('togglebutton.transition.duration')}, box-shadow ${dt('togglebutton.transition.duration')};\n    position: absolute;\n    left: ${dt('togglebutton.content.left')};\n    top: ${dt('togglebutton.content.top')};\n    width: calc(100% - calc(2 *  ${dt('togglebutton.content.left')}));\n    height: calc(100% - calc(2 *  ${dt('togglebutton.content.top')}));\n    border-radius: ${dt('togglebutton.border.radius')};\n}\n\n.p-togglebutton.p-togglebutton-checked::before {\n    background: ${dt('togglebutton.content.checked.background')};\n    box-shadow: ${dt('togglebutton.content.checked.shadow')};\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {\n    background: ${dt('togglebutton.hover.background')};\n    color: ${dt('togglebutton.hover.color')};\n}\n\n.p-togglebutton.p-togglebutton-checked {\n    background: ${dt('togglebutton.checked.background')};\n    border-color: ${dt('togglebutton.checked.border.color')};\n    color: ${dt('togglebutton.checked.color')};\n}\n\n.p-togglebutton:focus-visible {\n    box-shadow: ${dt('togglebutton.focus.ring.shadow')};\n    outline: ${dt('togglebutton.focus.ring.width')} ${dt('togglebutton.focus.ring.style')} ${dt('togglebutton.focus.ring.color')};\n    outline-offset: ${dt('togglebutton.focus.ring.offset')};\n}\n\n.p-togglebutton.p-invalid {\n    border-color: ${dt('togglebutton.invalid.border.color')};\n}\n\n.p-togglebutton:disabled {\n    opacity: 1;\n    cursor: default;\n    background: ${dt('togglebutton.disabled.background')};\n    border-color: ${dt('togglebutton.disabled.border.color')};\n    color: ${dt('togglebutton.disabled.color')};\n}\n\n.p-togglebutton-icon {\n    color: ${dt('togglebutton.icon.color')};\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {\n    color: ${dt('togglebutton.icon.hover.color')};\n}\n\n.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {\n    color: ${dt('togglebutton.icon.checked.color')};\n}\n\n.p-togglebutton:disabled .p-togglebutton-icon {\n    color: ${dt('togglebutton.icon.disabled.color')};\n}\n`;\n\nconst classes = {\n    root: ({ instance, props }) => [\n        'p-togglebutton p-component',\n        {\n            'p-togglebutton-checked': instance.active,\n            'p-invalid': props.invalid\n        }\n    ],\n    content: 'p-togglebutton-content',\n    icon: 'p-togglebutton-icon',\n    label: 'p-togglebutton-label'\n};\n\nexport default BaseStyle.extend({\n    name: 'togglebutton',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","_ref2","instance","props","active","invalid","content","icon","label","BaseStyle","extend","name"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/togglebutton/style/ToggleButtonStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-togglebutton {\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n    color: ${dt('togglebutton.color')};\n    background: ${dt('togglebutton.background')};\n    border: 1px solid ${dt('togglebutton.border.color')};\n    padding: ${dt('togglebutton.padding')};\n    font-size: 1rem;\n    font-family: inherit;\n    font-feature-settings: inherit;\n    transition: background ${dt('togglebutton.transition.duration')}, color ${dt('togglebutton.transition.duration')}, border-color ${dt('togglebutton.transition.duration')},\n        outline-color ${dt('togglebutton.transition.duration')}, box-shadow ${dt('togglebutton.transition.duration')};\n    border-radius: ${dt('togglebutton.border.radius')};\n    outline-color: transparent;\n    font-weight: ${dt('togglebutton.font.weight')};\n}\n\n.p-togglebutton-content {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: ${dt('togglebutton.gap')};\n}\n\n.p-togglebutton-label,\n.p-togglebutton-icon {\n    position: relative;\n    transition: none;\n}\n\n.p-togglebutton::before {\n    content: \"\";\n    background: transparent;\n    transition: background ${dt('togglebutton.transition.duration')}, color ${dt('togglebutton.transition.duration')}, border-color ${dt('togglebutton.transition.duration')},\n            outline-color ${dt('togglebutton.transition.duration')}, box-shadow ${dt('togglebutton.transition.duration')};\n    position: absolute;\n    inset-inline-start: ${dt('togglebutton.content.left')};\n    inset-block-start: ${dt('togglebutton.content.top')};\n    width: calc(100% - calc(2 * ${dt('togglebutton.content.left')}));\n    height: calc(100% - calc(2 * ${dt('togglebutton.content.top')}));\n    border-radius: ${dt('togglebutton.border.radius')};\n}\n\n.p-togglebutton.p-togglebutton-checked::before {\n    background: ${dt('togglebutton.content.checked.background')};\n    box-shadow: ${dt('togglebutton.content.checked.shadow')};\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {\n    background: ${dt('togglebutton.hover.background')};\n    color: ${dt('togglebutton.hover.color')};\n}\n\n.p-togglebutton.p-togglebutton-checked {\n    background: ${dt('togglebutton.checked.background')};\n    border-color: ${dt('togglebutton.checked.border.color')};\n    color: ${dt('togglebutton.checked.color')};\n}\n\n.p-togglebutton:focus-visible {\n    box-shadow: ${dt('togglebutton.focus.ring.shadow')};\n    outline: ${dt('togglebutton.focus.ring.width')} ${dt('togglebutton.focus.ring.style')} ${dt('togglebutton.focus.ring.color')};\n    outline-offset: ${dt('togglebutton.focus.ring.offset')};\n}\n\n.p-togglebutton.p-invalid {\n    border-color: ${dt('togglebutton.invalid.border.color')};\n}\n\n.p-togglebutton:disabled {\n    opacity: 1;\n    cursor: default;\n    background: ${dt('togglebutton.disabled.background')};\n    border-color: ${dt('togglebutton.disabled.border.color')};\n    color: ${dt('togglebutton.disabled.color')};\n}\n\n.p-togglebutton-icon {\n    color: ${dt('togglebutton.icon.color')};\n}\n\n.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {\n    color: ${dt('togglebutton.icon.hover.color')};\n}\n\n.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {\n    color: ${dt('togglebutton.icon.checked.color')};\n}\n\n.p-togglebutton:disabled .p-togglebutton-icon {\n    color: ${dt('togglebutton.icon.disabled.color')};\n}\n\n.p-togglebutton-sm {\n    padding: ${dt('togglebutton.sm.padding')};\n    font-size: ${dt('togglebutton.sm.font.size')};\n}\n\n.p-togglebutton-lg {\n    padding: ${dt('togglebutton.lg.padding')};\n    font-size: ${dt('togglebutton.lg.font.size')};\n}\n`;\n\nconst classes = {\n    root: ({ instance, props }) => [\n        'p-togglebutton p-component',\n        {\n            'p-togglebutton-checked': instance.active,\n            'p-invalid': instance.$invalid,\n            'p-togglebutton-sm p-inputfield-sm': props.size === 'small',\n            'p-togglebutton-lg p-inputfield-lg': props.size === 'large'\n        }\n    ],\n    content: 'p-togglebutton-content',\n    icon: 'p-togglebutton-icon',\n    label: 'p-togglebutton-label'\n};\n\nexport default BaseStyle.extend({\n    name: 'togglebutton',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","_ref2","instance","props","active","$invalid","size","content","icon","label","BaseStyle","extend","name"],"mappings":"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"}

package/toggleswitch/BaseToggleSwitch.vue

@@ -1,15 +1,11 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseEditableHolder from '@primevue/core/baseeditableholder';
 import ToggleSwitchStyle from 'primevue/toggleswitch/style';
 
 export default {
     name: 'BaseToggleSwitch',
-    extends: BaseComponent,
+    extends: BaseEditableHolder,
     props: {
-        modelValue: {
-            type: null,
-            default: false
-        },
         trueValue: {
             type: null,
             default: true
@@ -18,14 +14,6 @@ export default {
             type: null,
             default: false
         },
-        invalid: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
         readonly: {
             type: Boolean,
             default: false

package/toggleswitch/ToggleSwitch.vue

@@ -34,7 +34,7 @@ export default {
     name: 'ToggleSwitch',
     extends: BaseToggleSwitch,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'change', 'focus', 'blur'],
+    emits: ['change', 'focus', 'blur'],
     methods: {
         getPTOptions(key) {
             const _ptm = key === 'root' ? this.ptmi : this.ptm;
@@ -50,7 +50,7 @@ export default {
             if (!this.disabled && !this.readonly) {
                 const newValue = this.checked ? this.falseValue : this.trueValue;
 
-                this.$emit('update:modelValue', newValue);
+                this.writeValue(newValue, event);
                 this.$emit('change', event);
             }
         },
@@ -59,11 +59,12 @@ export default {
         },
         onBlur(event) {
             this.$emit('blur', event);
+            this.formField.onBlur?.(event);
         }
     },
     computed: {
         checked() {
-            return this.modelValue === this.trueValue;
+            return this.d_value === this.trueValue;
         }
     }
 };

package/toggleswitch/index.d.ts

@@ -88,6 +88,14 @@ export interface ToggleSwitchProps {
      * @defaultValue false
      */
     modelValue?: boolean | string | undefined;
+    /**
+     * The default value for the input when not controlled by `modelValue`.
+     */
+    defaultValue?: boolean | string | undefined;
+    /**
+     * The name attribute for the element, typically used in form submissions.
+     */
+    name?: string | undefined;
     /**
      * Value in checked state.
      * @defaultValue true
@@ -137,6 +145,10 @@ export interface ToggleSwitchProps {
      * Establishes a string value that labels the component.
      */
     ariaLabel?: string | undefined;
+    /**
+     * Form control object, typically used for handling validation and form state.
+     */
+    formControl?: Record<string, any> | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
@@ -196,6 +208,11 @@ export interface ToggleSwitchEmitsOptions {
      * @param {boolean} value - New value.
      */
     'update:modelValue'(value: boolean): void;
+    /**
+     * Emitted when the value changes in uncontrolled mode.
+     * @param {boolean} value - New value.
+     */
+    'value-change'(value: boolean): void;
     /**
      * Callback to invoke on value change.
      * @param {Event} event - Browser event.

package/toggleswitch/index.mjs

@@ -1,15 +1,11 @@
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseEditableHolder from '@primevue/core/baseeditableholder';
 import ToggleSwitchStyle from 'primevue/toggleswitch/style';
 import { openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot } from 'vue';
 
 var script$1 = {
   name: 'BaseToggleSwitch',
-  "extends": BaseComponent,
+  "extends": BaseEditableHolder,
   props: {
-    modelValue: {
-      type: null,
-      "default": false
-    },
     trueValue: {
       type: null,
       "default": true
@@ -18,14 +14,6 @@ var script$1 = {
       type: null,
       "default": false
     },
-    invalid: {
-      type: Boolean,
-      "default": false
-    },
-    disabled: {
-      type: Boolean,
-      "default": false
-    },
     readonly: {
       type: Boolean,
       "default": false
@@ -68,7 +56,7 @@ var script = {
   name: 'ToggleSwitch',
   "extends": script$1,
   inheritAttrs: false,
-  emits: ['update:modelValue', 'change', 'focus', 'blur'],
+  emits: ['change', 'focus', 'blur'],
   methods: {
     getPTOptions: function getPTOptions(key) {
       var _ptm = key === 'root' ? this.ptmi : this.ptm;
@@ -82,7 +70,7 @@ var script = {
     onChange: function onChange(event) {
       if (!this.disabled && !this.readonly) {
         var newValue = this.checked ? this.falseValue : this.trueValue;
-        this.$emit('update:modelValue', newValue);
+        this.writeValue(newValue, event);
         this.$emit('change', event);
       }
     },
@@ -90,12 +78,14 @@ var script = {
       this.$emit('focus', event);
     },
     onBlur: function onBlur(event) {
+      var _this$formField$onBlu, _this$formField;
       this.$emit('blur', event);
+      (_this$formField$onBlu = (_this$formField = this.formField).onBlur) === null || _this$formField$onBlu === void 0 || _this$formField$onBlu.call(_this$formField, event);
     }
   },
   computed: {
     checked: function checked() {
-      return this.modelValue === this.trueValue;
+      return this.d_value === this.trueValue;
     }
   }
 };

package/toggleswitch/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/toggleswitch/BaseToggleSwitch.vue","../../src/toggleswitch/ToggleSwitch.vue","../../src/toggleswitch/ToggleSwitch.vue?vue&type=template&id=f1ad7e36&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport ToggleSwitchStyle from 'primevue/toggleswitch/style';\n\nexport default {\n    name: 'BaseToggleSwitch',\n    extends: BaseComponent,\n    props: {\n        modelValue: {\n            type: null,\n            default: false\n        },\n        trueValue: {\n            type: null,\n            default: true\n        },\n        falseValue: {\n            type: null,\n            default: false\n        },\n        invalid: {\n            type: Boolean,\n            default: false\n        },\n        disabled: {\n            type: Boolean,\n            default: false\n        },\n        readonly: {\n            type: Boolean,\n            default: false\n        },\n        tabindex: {\n            type: Number,\n            default: null\n        },\n        inputId: {\n            type: String,\n            default: null\n        },\n        inputClass: {\n            type: [String, Object],\n            default: null\n        },\n        inputStyle: {\n            type: Object,\n            default: null\n        },\n        ariaLabelledby: {\n            type: String,\n            default: null\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        }\n    },\n    style: ToggleSwitchStyle,\n    provide() {\n        return {\n            $pcToggleSwitch: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" :style=\"sx('root')\" v-bind=\"getPTOptions('root')\" :data-p-checked=\"checked\" :data-p-disabled=\"disabled\">\n        <input\n            :id=\"inputId\"\n            type=\"checkbox\"\n            role=\"switch\"\n            :class=\"[cx('input'), inputClass]\"\n            :style=\"inputStyle\"\n            :checked=\"checked\"\n            :tabindex=\"tabindex\"\n            :disabled=\"disabled\"\n            :readonly=\"readonly\"\n            :aria-checked=\"checked\"\n            :aria-labelledby=\"ariaLabelledby\"\n            :aria-label=\"ariaLabel\"\n            :aria-invalid=\"invalid || undefined\"\n            @focus=\"onFocus\"\n            @blur=\"onBlur\"\n            @change=\"onChange\"\n            v-bind=\"getPTOptions('input')\"\n        />\n        <div :class=\"cx('slider')\" v-bind=\"getPTOptions('slider')\">\n            <div :class=\"cx('handle')\" v-bind=\"getPTOptions('handle')\">\n                <slot name=\"handle\" :checked=\"checked\" />\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport BaseToggleSwitch from './BaseToggleSwitch.vue';\n\nexport default {\n    name: 'ToggleSwitch',\n    extends: BaseToggleSwitch,\n    inheritAttrs: false,\n    emits: ['update:modelValue', 'change', 'focus', 'blur'],\n    methods: {\n        getPTOptions(key) {\n            const _ptm = key === 'root' ? this.ptmi : this.ptm;\n\n            return _ptm(key, {\n                context: {\n                    checked: this.checked,\n                    disabled: this.disabled\n                }\n            });\n        },\n        onChange(event) {\n            if (!this.disabled && !this.readonly) {\n                const newValue = this.checked ? this.falseValue : this.trueValue;\n\n                this.$emit('update:modelValue', newValue);\n                this.$emit('change', event);\n            }\n        },\n        onFocus(event) {\n            this.$emit('focus', event);\n        },\n        onBlur(event) {\n            this.$emit('blur', event);\n        }\n    },\n    computed: {\n        checked() {\n            return this.modelValue === this.trueValue;\n        }\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" :style=\"sx('root')\" v-bind=\"getPTOptions('root')\" :data-p-checked=\"checked\" :data-p-disabled=\"disabled\">\n        <input\n            :id=\"inputId\"\n            type=\"checkbox\"\n            role=\"switch\"\n            :class=\"[cx('input'), inputClass]\"\n            :style=\"inputStyle\"\n            :checked=\"checked\"\n            :tabindex=\"tabindex\"\n            :disabled=\"disabled\"\n            :readonly=\"readonly\"\n            :aria-checked=\"checked\"\n            :aria-labelledby=\"ariaLabelledby\"\n            :aria-label=\"ariaLabel\"\n            :aria-invalid=\"invalid || undefined\"\n            @focus=\"onFocus\"\n            @blur=\"onBlur\"\n            @change=\"onChange\"\n            v-bind=\"getPTOptions('input')\"\n        />\n        <div :class=\"cx('slider')\" v-bind=\"getPTOptions('slider')\">\n            <div :class=\"cx('handle')\" v-bind=\"getPTOptions('handle')\">\n                <slot name=\"handle\" :checked=\"checked\" />\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport BaseToggleSwitch from './BaseToggleSwitch.vue';\n\nexport default {\n    name: 'ToggleSwitch',\n    extends: BaseToggleSwitch,\n    inheritAttrs: false,\n    emits: ['update:modelValue', 'change', 'focus', 'blur'],\n    methods: {\n        getPTOptions(key) {\n            const _ptm = key === 'root' ? this.ptmi : this.ptm;\n\n            return _ptm(key, {\n                context: {\n                    checked: this.checked,\n                    disabled: this.disabled\n                }\n            });\n        },\n        onChange(event) {\n            if (!this.disabled && !this.readonly) {\n                const newValue = this.checked ? this.falseValue : this.trueValue;\n\n                this.$emit('update:modelValue', newValue);\n                this.$emit('change', event);\n            }\n        },\n        onFocus(event) {\n            this.$emit('focus', event);\n        },\n        onBlur(event) {\n            this.$emit('blur', event);\n        }\n    },\n    computed: {\n        checked() {\n            return this.modelValue === this.trueValue;\n        }\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","modelValue","type","trueValue","falseValue","invalid","Boolean","disabled","readonly","tabindex","Number","inputId","String","inputClass","Object","inputStyle","ariaLabelledby","ariaLabel","style","ToggleSwitchStyle","provide","$pcToggleSwitch","$parentInstance","BaseToggleSwitch","inheritAttrs","emits","methods","getPTOptions","key","_ptm","ptmi","ptm","context","checked","onChange","event","newValue","$emit","onFocus","onBlur","computed","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","sx","$options","_createElementVNode","id","role","undefined","apply","arguments","_hoisted_2","_renderSlot","$slots"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/toggleswitch/BaseToggleSwitch.vue","../../src/toggleswitch/ToggleSwitch.vue","../../src/toggleswitch/ToggleSwitch.vue?vue&type=template&id=082cdeb1&lang.js"],"sourcesContent":["<script>\nimport BaseEditableHolder from '@primevue/core/baseeditableholder';\nimport ToggleSwitchStyle from 'primevue/toggleswitch/style';\n\nexport default {\n    name: 'BaseToggleSwitch',\n    extends: BaseEditableHolder,\n    props: {\n        trueValue: {\n            type: null,\n            default: true\n        },\n        falseValue: {\n            type: null,\n            default: false\n        },\n        readonly: {\n            type: Boolean,\n            default: false\n        },\n        tabindex: {\n            type: Number,\n            default: null\n        },\n        inputId: {\n            type: String,\n            default: null\n        },\n        inputClass: {\n            type: [String, Object],\n            default: null\n        },\n        inputStyle: {\n            type: Object,\n            default: null\n        },\n        ariaLabelledby: {\n            type: String,\n            default: null\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        }\n    },\n    style: ToggleSwitchStyle,\n    provide() {\n        return {\n            $pcToggleSwitch: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" :style=\"sx('root')\" v-bind=\"getPTOptions('root')\" :data-p-checked=\"checked\" :data-p-disabled=\"disabled\">\n        <input\n            :id=\"inputId\"\n            type=\"checkbox\"\n            role=\"switch\"\n            :class=\"[cx('input'), inputClass]\"\n            :style=\"inputStyle\"\n            :checked=\"checked\"\n            :tabindex=\"tabindex\"\n            :disabled=\"disabled\"\n            :readonly=\"readonly\"\n            :aria-checked=\"checked\"\n            :aria-labelledby=\"ariaLabelledby\"\n            :aria-label=\"ariaLabel\"\n            :aria-invalid=\"invalid || undefined\"\n            @focus=\"onFocus\"\n            @blur=\"onBlur\"\n            @change=\"onChange\"\n            v-bind=\"getPTOptions('input')\"\n        />\n        <div :class=\"cx('slider')\" v-bind=\"getPTOptions('slider')\">\n            <div :class=\"cx('handle')\" v-bind=\"getPTOptions('handle')\">\n                <slot name=\"handle\" :checked=\"checked\" />\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport BaseToggleSwitch from './BaseToggleSwitch.vue';\n\nexport default {\n    name: 'ToggleSwitch',\n    extends: BaseToggleSwitch,\n    inheritAttrs: false,\n    emits: ['change', 'focus', 'blur'],\n    methods: {\n        getPTOptions(key) {\n            const _ptm = key === 'root' ? this.ptmi : this.ptm;\n\n            return _ptm(key, {\n                context: {\n                    checked: this.checked,\n                    disabled: this.disabled\n                }\n            });\n        },\n        onChange(event) {\n            if (!this.disabled && !this.readonly) {\n                const newValue = this.checked ? this.falseValue : this.trueValue;\n\n                this.writeValue(newValue, event);\n                this.$emit('change', event);\n            }\n        },\n        onFocus(event) {\n            this.$emit('focus', event);\n        },\n        onBlur(event) {\n            this.$emit('blur', event);\n            this.formField.onBlur?.(event);\n        }\n    },\n    computed: {\n        checked() {\n            return this.d_value === this.trueValue;\n        }\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" :style=\"sx('root')\" v-bind=\"getPTOptions('root')\" :data-p-checked=\"checked\" :data-p-disabled=\"disabled\">\n        <input\n            :id=\"inputId\"\n            type=\"checkbox\"\n            role=\"switch\"\n            :class=\"[cx('input'), inputClass]\"\n            :style=\"inputStyle\"\n            :checked=\"checked\"\n            :tabindex=\"tabindex\"\n            :disabled=\"disabled\"\n            :readonly=\"readonly\"\n            :aria-checked=\"checked\"\n            :aria-labelledby=\"ariaLabelledby\"\n            :aria-label=\"ariaLabel\"\n            :aria-invalid=\"invalid || undefined\"\n            @focus=\"onFocus\"\n            @blur=\"onBlur\"\n            @change=\"onChange\"\n            v-bind=\"getPTOptions('input')\"\n        />\n        <div :class=\"cx('slider')\" v-bind=\"getPTOptions('slider')\">\n            <div :class=\"cx('handle')\" v-bind=\"getPTOptions('handle')\">\n                <slot name=\"handle\" :checked=\"checked\" />\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport BaseToggleSwitch from './BaseToggleSwitch.vue';\n\nexport default {\n    name: 'ToggleSwitch',\n    extends: BaseToggleSwitch,\n    inheritAttrs: false,\n    emits: ['change', 'focus', 'blur'],\n    methods: {\n        getPTOptions(key) {\n            const _ptm = key === 'root' ? this.ptmi : this.ptm;\n\n            return _ptm(key, {\n                context: {\n                    checked: this.checked,\n                    disabled: this.disabled\n                }\n            });\n        },\n        onChange(event) {\n            if (!this.disabled && !this.readonly) {\n                const newValue = this.checked ? this.falseValue : this.trueValue;\n\n                this.writeValue(newValue, event);\n                this.$emit('change', event);\n            }\n        },\n        onFocus(event) {\n            this.$emit('focus', event);\n        },\n        onBlur(event) {\n            this.$emit('blur', event);\n            this.formField.onBlur?.(event);\n        }\n    },\n    computed: {\n        checked() {\n            return this.d_value === this.trueValue;\n        }\n    }\n};\n</script>\n"],"names":["name","BaseEditableHolder","props","trueValue","type","falseValue","readonly","Boolean","tabindex","Number","inputId","String","inputClass","Object","inputStyle","ariaLabelledby","ariaLabel","style","ToggleSwitchStyle","provide","$pcToggleSwitch","$parentInstance","BaseToggleSwitch","inheritAttrs","emits","methods","getPTOptions","key","_ptm","ptmi","ptm","context","checked","disabled","onChange","event","newValue","writeValue","$emit","onFocus","onBlur","_this$formField$onBlu","_this$formField","formField","call","computed","d_value","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","sx","$options","_createElementVNode","id","role","invalid","undefined","apply","arguments","_hoisted_2","_renderSlot","$slots"],"mappings":"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"}

package/toggleswitch/style/index.mjs

@@ -2,7 +2,7 @@ import BaseStyle from '@primevue/core/base/style';
 
 var theme = function theme(_ref) {
   var dt = _ref.dt;
-  return "\n.p-toggleswitch {\n    display: inline-block;\n    width: ".concat(dt('toggleswitch.width'), ";\n    height: ").concat(dt('toggleswitch.height'), ";\n}\n\n.p-toggleswitch-input {\n    cursor: pointer;\n    appearance: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: 1;\n    outline: 0 none;\n    border-radius: ").concat(dt('toggleswitch.border.radius'), ";\n}\n\n.p-toggleswitch-slider {\n    display: inline-block;\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    border-width: ").concat(dt('toggleswitch.border.width'), ";\n    border-style: solid;\n    border-color: ").concat(dt('toggleswitch.border.color'), ";\n    background: ").concat(dt('toggleswitch.background'), ";\n    transition: background ").concat(dt('toggleswitch.transition.duration'), ", color ").concat(dt('toggleswitch.transition.duration'), ", border-color ").concat(dt('toggleswitch.transition.duration'), ", outline-color ").concat(dt('toggleswitch.transition.duration'), ", box-shadow ").concat(dt('toggleswitch.transition.duration'), ";\n    border-radius: ").concat(dt('toggleswitch.border.radius'), ";\n    outline-color: transparent;\n    box-shadow: ").concat(dt('toggleswitch.shadow'), ";\n}\n\n.p-toggleswitch-handle {\n    position: absolute;\n    top: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: ").concat(dt('toggleswitch.handle.background'), ";\n    color: ").concat(dt('toggleswitch.handle.color'), ";\n    width: ").concat(dt('toggleswitch.handle.size'), ";\n    height: ").concat(dt('toggleswitch.handle.size'), ";\n    left: ").concat(dt('toggleswitch.gap'), ";\n    margin-top: calc(-1 * calc(").concat(dt('toggleswitch.handle.size'), " / 2));\n    border-radius: ").concat(dt('toggleswitch.handle.border.radius'), ";\n    transition: background ").concat(dt('toggleswitch.transition.duration'), ", color ").concat(dt('toggleswitch.transition.duration'), ", left ").concat(dt('toggleswitch.slide.duration'), ", box-shadow ").concat(dt('toggleswitch.slide.duration'), ";\n}\n\n.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {\n    background: ").concat(dt('toggleswitch.checked.background'), ";\n    border-color: ").concat(dt('toggleswitch.checked.border.color'), ";\n}\n\n.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle {\n    background: ").concat(dt('toggleswitch.handle.checked.background'), ";\n    color: ").concat(dt('toggleswitch.handle.checked.color'), ";\n    left: calc(").concat(dt('toggleswitch.width'), " - calc(").concat(dt('toggleswitch.handle.size'), " + ").concat(dt('toggleswitch.gap'), "));\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {\n    background: ").concat(dt('toggleswitch.hover.background'), ";\n    border-color: ").concat(dt('toggleswitch.hover.border.color'), ";\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle {\n    background: ").concat(dt('toggleswitch.handle.hover.background'), ";\n    color: ").concat(dt('toggleswitch.handle.hover.color'), ";\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {\n    background: ").concat(dt('toggleswitch.checked.hover.background'), ";\n    border-color: ").concat(dt('toggleswitch.checked.hover.border.color'), ";\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-handle {\n    background: ").concat(dt('toggleswitch.handle.checked.hover.background'), ";\n    color: ").concat(dt('toggleswitch.handle.checked.hover.color'), ";\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {\n    box-shadow: ").concat(dt('toggleswitch.focus.ring.shadow'), ";\n    outline: ").concat(dt('toggleswitch.focus.ring.width'), " ").concat(dt('toggleswitch.focus.ring.style'), " ").concat(dt('toggleswitch.focus.ring.color'), ";\n    outline-offset: ").concat(dt('toggleswitch.focus.ring.offset'), ";\n}\n\n.p-toggleswitch.p-invalid > .p-toggleswitch-slider {\n    border-color: ").concat(dt('toggleswitch.invalid.border.color'), ";\n}\n\n.p-toggleswitch.p-disabled {\n    opacity: 1;\n}\n\n.p-toggleswitch.p-disabled .p-toggleswitch-slider {\n    background: ").concat(dt('toggleswitch.disabled.background'), ";\n}\n\n.p-toggleswitch.p-disabled .p-toggleswitch-handle {\n    background: ").concat(dt('toggleswitch.handle.disabled.background'), ";\n}\n");
+  return "\n.p-toggleswitch {\n    display: inline-block;\n    width: ".concat(dt('toggleswitch.width'), ";\n    height: ").concat(dt('toggleswitch.height'), ";\n}\n\n.p-toggleswitch-input {\n    cursor: pointer;\n    appearance: none;\n    position: absolute;\n    top: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: 1;\n    outline: 0 none;\n    border-radius: ").concat(dt('toggleswitch.border.radius'), ";\n}\n\n.p-toggleswitch-slider {\n    display: inline-block;\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    border-width: ").concat(dt('toggleswitch.border.width'), ";\n    border-style: solid;\n    border-color: ").concat(dt('toggleswitch.border.color'), ";\n    background: ").concat(dt('toggleswitch.background'), ";\n    transition: background ").concat(dt('toggleswitch.transition.duration'), ", color ").concat(dt('toggleswitch.transition.duration'), ", border-color ").concat(dt('toggleswitch.transition.duration'), ", outline-color ").concat(dt('toggleswitch.transition.duration'), ", box-shadow ").concat(dt('toggleswitch.transition.duration'), ";\n    border-radius: ").concat(dt('toggleswitch.border.radius'), ";\n    outline-color: transparent;\n    box-shadow: ").concat(dt('toggleswitch.shadow'), ";\n}\n\n.p-toggleswitch-handle {\n    position: absolute;\n    top: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: ").concat(dt('toggleswitch.handle.background'), ";\n    color: ").concat(dt('toggleswitch.handle.color'), ";\n    width: ").concat(dt('toggleswitch.handle.size'), ";\n    height: ").concat(dt('toggleswitch.handle.size'), ";\n    inset-inline-start: ").concat(dt('toggleswitch.gap'), ";\n    margin-block-start: calc(-1 * calc(").concat(dt('toggleswitch.handle.size'), " / 2));\n    border-radius: ").concat(dt('toggleswitch.handle.border.radius'), ";\n    transition: background ").concat(dt('toggleswitch.transition.duration'), ", color ").concat(dt('toggleswitch.transition.duration'), ", inset-inline-start ").concat(dt('toggleswitch.slide.duration'), ", box-shadow ").concat(dt('toggleswitch.slide.duration'), ";\n}\n\n.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {\n    background: ").concat(dt('toggleswitch.checked.background'), ";\n    border-color: ").concat(dt('toggleswitch.checked.border.color'), ";\n}\n\n.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle {\n    background: ").concat(dt('toggleswitch.handle.checked.background'), ";\n    color: ").concat(dt('toggleswitch.handle.checked.color'), ";\n    inset-inline-start: calc(").concat(dt('toggleswitch.width'), " - calc(").concat(dt('toggleswitch.handle.size'), " + ").concat(dt('toggleswitch.gap'), "));\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {\n    background: ").concat(dt('toggleswitch.hover.background'), ";\n    border-color: ").concat(dt('toggleswitch.hover.border.color'), ";\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle {\n    background: ").concat(dt('toggleswitch.handle.hover.background'), ";\n    color: ").concat(dt('toggleswitch.handle.hover.color'), ";\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {\n    background: ").concat(dt('toggleswitch.checked.hover.background'), ";\n    border-color: ").concat(dt('toggleswitch.checked.hover.border.color'), ";\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-handle {\n    background: ").concat(dt('toggleswitch.handle.checked.hover.background'), ";\n    color: ").concat(dt('toggleswitch.handle.checked.hover.color'), ";\n}\n\n.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {\n    box-shadow: ").concat(dt('toggleswitch.focus.ring.shadow'), ";\n    outline: ").concat(dt('toggleswitch.focus.ring.width'), " ").concat(dt('toggleswitch.focus.ring.style'), " ").concat(dt('toggleswitch.focus.ring.color'), ";\n    outline-offset: ").concat(dt('toggleswitch.focus.ring.offset'), ";\n}\n\n.p-toggleswitch.p-invalid > .p-toggleswitch-slider {\n    border-color: ").concat(dt('toggleswitch.invalid.border.color'), ";\n}\n\n.p-toggleswitch.p-disabled {\n    opacity: 1;\n}\n\n.p-toggleswitch.p-disabled .p-toggleswitch-slider {\n    background: ").concat(dt('toggleswitch.disabled.background'), ";\n}\n\n.p-toggleswitch.p-disabled .p-toggleswitch-handle {\n    background: ").concat(dt('toggleswitch.handle.disabled.background'), ";\n}\n");
 };
 var inlineStyles = {
   root: {
@@ -16,7 +16,7 @@ var classes = {
     return ['p-toggleswitch p-component', {
       'p-toggleswitch-checked': instance.checked,
       'p-disabled': props.disabled,
-      'p-invalid': props.invalid
+      'p-invalid': instance.$invalid
     }];
   },
   input: 'p-toggleswitch-input',