primevue 4.1.0 → 4.2.0

package/togglebutton/BaseToggleButton.vue

@@ -1,12 +1,11 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseEditableHolder from '@primevue/core/baseeditableholder';
 import ToggleButtonStyle from 'primevue/togglebutton/style';
 
 export default {
     name: 'BaseToggleButton',
-    extends: BaseComponent,
+    extends: BaseEditableHolder,
     props: {
-        modelValue: Boolean,
         onIcon: String,
         offIcon: String,
         onLabel: {
@@ -21,14 +20,6 @@ export default {
             type: String,
             default: 'left'
         },
-        invalid: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
         readonly: {
             type: Boolean,
             default: false
@@ -44,6 +35,10 @@ export default {
         ariaLabel: {
             type: String,
             default: null
+        },
+        size: {
+            type: String,
+            default: null
         }
     },
     style: ToggleButtonStyle,

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

@@ -7,7 +7,7 @@
  * @module togglebutton
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { PassThroughOptions } from 'primevue/passthrough';
 import { VNode } from 'vue';
@@ -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.
@@ -239,7 +260,7 @@ declare const ToggleButton: DefineComponent<ToggleButtonProps, ToggleButtonSlots
 
 declare module 'vue' {
     export interface GlobalComponents {
-        ToggleButton: GlobalComponentConstructor<ToggleButtonProps, ToggleButtonSlots, ToggleButtonEmits>;
+        ToggleButton: DefineComponent<ToggleButtonProps, ToggleButtonSlots, ToggleButtonEmits>;
     }
 }
 

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

@@ -7,7 +7,7 @@
  * @module toggleswitch
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { PassThroughOptions } from 'primevue/passthrough';
 import { VNode } from 'vue';
@@ -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.
@@ -231,7 +248,7 @@ declare const ToggleSwitch: DefineComponent<ToggleSwitchProps, ToggleSwitchSlots
 
 declare module 'vue' {
     export interface GlobalComponents {
-        ToggleSwitch: GlobalComponentConstructor<ToggleSwitchProps, ToggleSwitchSlots, ToggleSwitchEmits>;
+        ToggleSwitch: DefineComponent<ToggleSwitchProps, ToggleSwitchSlots, ToggleSwitchEmits>;
     }
 }
 

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;
     }
   }
 };