primevue 3.45.0 → 3.47.0

package/togglebutton/ToggleButton.d.ts

@@ -7,7 +7,7 @@
  * @module togglebutton
  *
  */
-import { InputHTMLAttributes, VNode } from 'vue';
+import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@@ -58,21 +58,21 @@ export interface ToggleButtonPassThroughOptions {
      */
     root?: ToggleButtonPassThroughOptionType;
     /**
-     * Used to pass attributes to the icon's DOM element.
+     * Used to pass attributes to the input's DOM element.
      */
-    icon?: ToggleButtonPassThroughOptionType;
+    input?: ToggleButtonPassThroughOptionType;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the box's DOM element.
      */
-    label?: ToggleButtonPassThroughOptionType;
+    box?: ToggleButtonPassThroughOptionType;
     /**
-     * Used to pass attributes to the hidden input wrapper's DOM element.
+     * Used to pass attributes to the icon's DOM element.
      */
-    hiddenInputWrapper?: ToggleButtonPassThroughOptionType;
+    icon?: ToggleButtonPassThroughOptionType;
     /**
-     * Used to pass attributes to the hidden input's DOM element.
+     * Used to pass attributes to the label's DOM element.
      */
-    hiddenInput?: ToggleButtonPassThroughOptionType;
+    label?: ToggleButtonPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -91,10 +91,7 @@ export interface ToggleButtonPassThroughAttributes {
  * Defines current inline state in ToggleButton component.
  */
 export interface ToggleButtonState {
-    /**
-     * Focused state as a boolean.
-     */
-    focused: boolean;
+    [key: string]: any;
 }
 
 /**
@@ -102,20 +99,15 @@ export interface ToggleButtonState {
  */
 export interface ToggleButtonContext {
     /**
-     * Current focused state as a boolean.
+     * Current highlighted state as a boolean.
      * @defaultValue false
      */
-    focused: boolean;
+    active: boolean;
     /**
      * Current disabled state as a boolean.
      * @defaultValue false
      */
     disabled: boolean;
-    /**
-     * Current highlighted state as a boolean.
-     * @defaultValue false
-     */
-    highlighted: boolean;
 }
 
 /**
@@ -157,6 +149,11 @@ export interface ToggleButtonProps {
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @default false
+     */
+    readonly?: boolean | undefined;
     /**
      * Index of the element in tabbing order.
      */
@@ -173,10 +170,6 @@ export interface ToggleButtonProps {
      * Inline style of the input field.
      */
     inputStyle?: object | undefined;
-    /**
-     * Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
-     */
-    inputProps?: InputHTMLAttributes | undefined;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */

package/togglebutton/ToggleButton.vue

@@ -1,101 +1,75 @@
 <template>
-    <div ref="container" v-ripple :class="cx('root')" @click="onClick($event)" v-bind="ptm('root', getPTOptions)" :data-p-active="modelValue === true" data-pc-name="togglebutton">
-        <span class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
-            <input
-                :id="inputId"
-                type="checkbox"
-                role="switch"
-                :class="inputClass"
-                :style="inputStyle"
-                :checked="modelValue"
-                :value="modelValue"
-                :aria-labelledby="ariaLabelledby"
-                :aria-label="ariaLabel"
-                @focus="onFocus($event)"
-                @blur="onBlur($event)"
-                v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
-            />
-        </span>
-        <slot name="icon" :value="modelValue" :class="cx('icon')">
-            <span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="ptm('icon', getPTOptions)" />
-        </slot>
-        <span :class="cx('label')" v-bind="ptm('label', getPTOptions)">{{ label }}</span>
+    <div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="togglebutton" :data-p-highlight="active" :data-p-disabled="disabled">
+        <input
+            :id="inputId"
+            type="checkbox"
+            role="switch"
+            :class="[cx('input'), inputClass]"
+            :style="inputStyle"
+            :value="modelValue"
+            :checked="active"
+            :tabindex="tabindex"
+            :disabled="disabled"
+            :readonly="readonly"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            @focus="onFocus"
+            @blur="onBlur"
+            @change="onChange"
+            v-bind="getPTOptions('input')"
+        />
+        <div v-ripple :class="cx('box')" v-bind="getPTOptions('box')">
+            <slot name="icon" :value="modelValue" :class="cx('icon')">
+                <span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
+            </slot>
+            <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
+        </div>
     </div>
 </template>
 
 <script>
 import Ripple from 'primevue/ripple';
+import { ObjectUtils } from 'primevue/utils';
 import BaseToggleButton from './BaseToggleButton.vue';
 
 export default {
     name: 'ToggleButton',
     extends: BaseToggleButton,
-    emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
-    outsideClickListener: null,
-    data() {
-        return {
-            focused: false
-        };
-    },
-    mounted() {
-        this.bindOutsideClickListener();
-    },
-    beforeUnmount() {
-        this.unbindOutsideClickListener();
-    },
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
     methods: {
-        onClick(event) {
-            if (!this.disabled) {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.active,
+                    disabled: this.disabled
+                }
+            });
+        },
+        onChange(event) {
+            if (!this.disabled && !this.readonly) {
                 this.$emit('update:modelValue', !this.modelValue);
                 this.$emit('change', event);
-                this.$emit('click', event);
-                this.focused = true;
             }
         },
         onFocus(event) {
-            this.focused = true;
             this.$emit('focus', event);
         },
         onBlur(event) {
-            this.focused = false;
             this.$emit('blur', event);
-        },
-        bindOutsideClickListener() {
-            if (!this.outsideClickListener) {
-                this.outsideClickListener = (event) => {
-                    if (this.focused && !this.$refs.container.contains(event.target)) {
-                        this.focused = false;
-                    }
-                };
-
-                document.addEventListener('click', this.outsideClickListener);
-            }
-        },
-        unbindOutsideClickListener() {
-            if (this.outsideClickListener) {
-                document.removeEventListener('click', this.outsideClickListener);
-                this.outsideClickListener = null;
-            }
         }
     },
     computed: {
+        active() {
+            return this.modelValue === true;
+        },
         hasLabel() {
-            return this.onLabel && this.onLabel.length > 0 && this.offLabel && this.offLabel.length > 0;
+            return ObjectUtils.isNotEmpty(this.onLabel) && ObjectUtils.isNotEmpty(this.offLabel);
         },
         hasIcon() {
             return this.$slots.icon || (this.onIcon && this.offIcon);
         },
         label() {
             return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel) : '&nbsp;';
-        },
-        getPTOptions() {
-            return {
-                context: {
-                    focused: this.focused,
-                    disabled: this.disabled,
-                    highlighted: this.modelValue === true
-                }
-            };
         }
     },
     directives: {

package/togglebutton/style/togglebuttonstyle.cjs.js

@@ -6,20 +6,26 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var BaseStyle__default = /*#__PURE__*/_interopDefaultLegacy(BaseStyle);
 
+var css = "\n@layer primevue {\n    .p-togglebutton {\n        position: relative;\n        display: inline-flex;\n        user-select: none;\n        vertical-align: bottom;\n    }\n\n    .p-togglebutton-input {\n        cursor: pointer;\n    }\n\n    .p-togglebutton .p-button {\n        flex: 1 1 auto;\n    }\n}\n";
 var classes = {
   root: function root(_ref) {
     var instance = _ref.instance,
       props = _ref.props;
-    return ['p-button p-togglebutton p-component', {
-      'p-focus': instance.focused,
-      'p-button-icon-only': instance.hasIcon && !instance.hasLabel,
+    return ['p-togglebutton p-component', {
       'p-disabled': props.disabled,
-      'p-highlight': props.modelValue === true
+      'p-highlight': instance.active
     }];
   },
-  icon: function icon(_ref2) {
-    var instance = _ref2.instance,
-      props = _ref2.props;
+  input: 'p-togglebutton-input',
+  box: function box(_ref2) {
+    var instance = _ref2.instance;
+    return ['p-button p-component', {
+      'p-button-icon-only': instance.hasIcon && !instance.hasLabel
+    }];
+  },
+  icon: function icon(_ref3) {
+    var instance = _ref3.instance,
+      props = _ref3.props;
     return ['p-button-icon', {
       'p-button-icon-left': props.iconPos === 'left' && instance.label,
       'p-button-icon-right': props.iconPos === 'right' && instance.label
@@ -28,7 +34,8 @@ var classes = {
   label: 'p-button-label'
 };
 var ToggleButtonStyle = BaseStyle__default["default"].extend({
-  name: 'accordion',
+  name: 'togglebutton',
+  css: css,
   classes: classes
 });
 

package/togglebutton/style/togglebuttonstyle.cjs.min.js

@@ -1 +1 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var e=t(require("primevue/base/style")).default.extend({name:"accordion",classes:{root:function(t){var e=t.instance,o=t.props;return["p-button p-togglebutton p-component",{"p-focus":e.focused,"p-button-icon-only":e.hasIcon&&!e.hasLabel,"p-disabled":o.disabled,"p-highlight":!0===o.modelValue}]},icon:function(t){var e=t.instance,o=t.props;return["p-button-icon",{"p-button-icon-left":"left"===o.iconPos&&e.label,"p-button-icon-right":"right"===o.iconPos&&e.label}]},label:"p-button-label"}});module.exports=e;
+"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var t=n(require("primevue/base/style")).default.extend({name:"togglebutton",css:"\n@layer primevue {\n    .p-togglebutton {\n        position: relative;\n        display: inline-flex;\n        user-select: none;\n        vertical-align: bottom;\n    }\n\n    .p-togglebutton-input {\n        cursor: pointer;\n    }\n\n    .p-togglebutton .p-button {\n        flex: 1 1 auto;\n    }\n}\n",classes:{root:function(n){return["p-togglebutton p-component",{"p-disabled":n.props.disabled,"p-highlight":n.instance.active}]},input:"p-togglebutton-input",box:function(n){var t=n.instance;return["p-button p-component",{"p-button-icon-only":t.hasIcon&&!t.hasLabel}]},icon:function(n){var t=n.instance,e=n.props;return["p-button-icon",{"p-button-icon-left":"left"===e.iconPos&&t.label,"p-button-icon-right":"right"===e.iconPos&&t.label}]},label:"p-button-label"}});module.exports=t;

package/togglebutton/style/togglebuttonstyle.esm.js

@@ -1,19 +1,25 @@
 import BaseStyle from 'primevue/base/style';
 
+var css = "\n@layer primevue {\n    .p-togglebutton {\n        position: relative;\n        display: inline-flex;\n        user-select: none;\n        vertical-align: bottom;\n    }\n\n    .p-togglebutton-input {\n        cursor: pointer;\n    }\n\n    .p-togglebutton .p-button {\n        flex: 1 1 auto;\n    }\n}\n";
 var classes = {
   root: function root(_ref) {
     var instance = _ref.instance,
       props = _ref.props;
-    return ['p-button p-togglebutton p-component', {
-      'p-focus': instance.focused,
-      'p-button-icon-only': instance.hasIcon && !instance.hasLabel,
+    return ['p-togglebutton p-component', {
       'p-disabled': props.disabled,
-      'p-highlight': props.modelValue === true
+      'p-highlight': instance.active
     }];
   },
-  icon: function icon(_ref2) {
-    var instance = _ref2.instance,
-      props = _ref2.props;
+  input: 'p-togglebutton-input',
+  box: function box(_ref2) {
+    var instance = _ref2.instance;
+    return ['p-button p-component', {
+      'p-button-icon-only': instance.hasIcon && !instance.hasLabel
+    }];
+  },
+  icon: function icon(_ref3) {
+    var instance = _ref3.instance,
+      props = _ref3.props;
     return ['p-button-icon', {
       'p-button-icon-left': props.iconPos === 'left' && instance.label,
       'p-button-icon-right': props.iconPos === 'right' && instance.label
@@ -22,7 +28,8 @@ var classes = {
   label: 'p-button-label'
 };
 var ToggleButtonStyle = BaseStyle.extend({
-  name: 'accordion',
+  name: 'togglebutton',
+  css: css,
   classes: classes
 });
 

package/togglebutton/style/togglebuttonstyle.esm.min.js

@@ -1 +1 @@
-import o from"primevue/base/style";var t=o.extend({name:"accordion",classes:{root:function(o){var t=o.instance,n=o.props;return["p-button p-togglebutton p-component",{"p-focus":t.focused,"p-button-icon-only":t.hasIcon&&!t.hasLabel,"p-disabled":n.disabled,"p-highlight":!0===n.modelValue}]},icon:function(o){var t=o.instance,n=o.props;return["p-button-icon",{"p-button-icon-left":"left"===n.iconPos&&t.label,"p-button-icon-right":"right"===n.iconPos&&t.label}]},label:"p-button-label"}});export{t as default};
+import n from"primevue/base/style";var t=n.extend({name:"togglebutton",css:"\n@layer primevue {\n    .p-togglebutton {\n        position: relative;\n        display: inline-flex;\n        user-select: none;\n        vertical-align: bottom;\n    }\n\n    .p-togglebutton-input {\n        cursor: pointer;\n    }\n\n    .p-togglebutton .p-button {\n        flex: 1 1 auto;\n    }\n}\n",classes:{root:function(n){return["p-togglebutton p-component",{"p-disabled":n.props.disabled,"p-highlight":n.instance.active}]},input:"p-togglebutton-input",box:function(n){var t=n.instance;return["p-button p-component",{"p-button-icon-only":t.hasIcon&&!t.hasLabel}]},icon:function(n){var t=n.instance,o=n.props;return["p-button-icon",{"p-button-icon-left":"left"===o.iconPos&&t.label,"p-button-icon-right":"right"===o.iconPos&&t.label}]},label:"p-button-label"}});export{t as default};

package/togglebutton/style/togglebuttonstyle.js

@@ -7,20 +7,26 @@ this.primevue.togglebutton.style = (function (BaseStyle) {
 
     var BaseStyle__default = /*#__PURE__*/_interopDefaultLegacy(BaseStyle);
 
+    var css = "\n@layer primevue {\n    .p-togglebutton {\n        position: relative;\n        display: inline-flex;\n        user-select: none;\n        vertical-align: bottom;\n    }\n\n    .p-togglebutton-input {\n        cursor: pointer;\n    }\n\n    .p-togglebutton .p-button {\n        flex: 1 1 auto;\n    }\n}\n";
     var classes = {
       root: function root(_ref) {
         var instance = _ref.instance,
           props = _ref.props;
-        return ['p-button p-togglebutton p-component', {
-          'p-focus': instance.focused,
-          'p-button-icon-only': instance.hasIcon && !instance.hasLabel,
+        return ['p-togglebutton p-component', {
           'p-disabled': props.disabled,
-          'p-highlight': props.modelValue === true
+          'p-highlight': instance.active
         }];
       },
-      icon: function icon(_ref2) {
-        var instance = _ref2.instance,
-          props = _ref2.props;
+      input: 'p-togglebutton-input',
+      box: function box(_ref2) {
+        var instance = _ref2.instance;
+        return ['p-button p-component', {
+          'p-button-icon-only': instance.hasIcon && !instance.hasLabel
+        }];
+      },
+      icon: function icon(_ref3) {
+        var instance = _ref3.instance,
+          props = _ref3.props;
         return ['p-button-icon', {
           'p-button-icon-left': props.iconPos === 'left' && instance.label,
           'p-button-icon-right': props.iconPos === 'right' && instance.label
@@ -29,7 +35,8 @@ this.primevue.togglebutton.style = (function (BaseStyle) {
       label: 'p-button-label'
     };
     var ToggleButtonStyle = BaseStyle__default["default"].extend({
-      name: 'accordion',
+      name: 'togglebutton',
+      css: css,
       classes: classes
     });
 

package/togglebutton/style/togglebuttonstyle.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.togglebutton=this.primevue.togglebutton||{},this.primevue.togglebutton.style=function(t){"use strict";function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}return e(primevue.base.style).default.extend({name:"accordion",classes:{root:function(t){var e=t.instance,o=t.props;return["p-button p-togglebutton p-component",{"p-focus":e.focused,"p-button-icon-only":e.hasIcon&&!e.hasLabel,"p-disabled":o.disabled,"p-highlight":!0===o.modelValue}]},icon:function(t){var e=t.instance,o=t.props;return["p-button-icon",{"p-button-icon-left":"left"===o.iconPos&&e.label,"p-button-icon-right":"right"===o.iconPos&&e.label}]},label:"p-button-label"}})}();
+this.primevue=this.primevue||{},this.primevue.togglebutton=this.primevue.togglebutton||{},this.primevue.togglebutton.style=function(t){"use strict";function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}return n(primevue.base.style).default.extend({name:"togglebutton",css:"\n@layer primevue {\n    .p-togglebutton {\n        position: relative;\n        display: inline-flex;\n        user-select: none;\n        vertical-align: bottom;\n    }\n\n    .p-togglebutton-input {\n        cursor: pointer;\n    }\n\n    .p-togglebutton .p-button {\n        flex: 1 1 auto;\n    }\n}\n",classes:{root:function(t){return["p-togglebutton p-component",{"p-disabled":t.props.disabled,"p-highlight":t.instance.active}]},input:"p-togglebutton-input",box:function(t){var n=t.instance;return["p-button p-component",{"p-button-icon-only":n.hasIcon&&!n.hasLabel}]},icon:function(t){var n=t.instance,e=t.props;return["p-button-icon",{"p-button-icon-left":"left"===e.iconPos&&n.label,"p-button-icon-right":"right"===e.iconPos&&n.label}]},label:"p-button-label"}})}();

package/togglebutton/togglebutton.cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var Ripple = require('primevue/ripple');
+var utils = require('primevue/utils');
 var BaseComponent = require('primevue/basecomponent');
 var ToggleButtonStyle = require('primevue/togglebutton/style');
 var vue = require('vue');
@@ -34,6 +35,10 @@ var script$1 = {
       type: Boolean,
       "default": false
     },
+    readonly: {
+      type: Boolean,
+      "default": false
+    },
     tabindex: {
       type: Number,
       "default": null
@@ -50,10 +55,6 @@ var script$1 = {
       type: Object,
       "default": null
     },
-    inputProps: {
-      type: null,
-      "default": null
-    },
     ariaLabelledby: {
       type: String,
       "default": null
@@ -74,72 +75,41 @@ var script$1 = {
 var script = {
   name: 'ToggleButton',
   "extends": script$1,
-  emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
-  outsideClickListener: null,
-  data: function data() {
-    return {
-      focused: false
-    };
-  },
-  mounted: function mounted() {
-    this.bindOutsideClickListener();
-  },
-  beforeUnmount: function beforeUnmount() {
-    this.unbindOutsideClickListener();
-  },
+  emits: ['update:modelValue', 'change', 'focus', 'blur'],
   methods: {
-    onClick: function onClick(event) {
-      if (!this.disabled) {
+    getPTOptions: function getPTOptions(key) {
+      return this.ptm(key, {
+        context: {
+          active: this.active,
+          disabled: this.disabled
+        }
+      });
+    },
+    onChange: function onChange(event) {
+      if (!this.disabled && !this.readonly) {
         this.$emit('update:modelValue', !this.modelValue);
         this.$emit('change', event);
-        this.$emit('click', event);
-        this.focused = true;
       }
     },
     onFocus: function onFocus(event) {
-      this.focused = true;
       this.$emit('focus', event);
     },
     onBlur: function onBlur(event) {
-      this.focused = false;
       this.$emit('blur', event);
-    },
-    bindOutsideClickListener: function bindOutsideClickListener() {
-      var _this = this;
-      if (!this.outsideClickListener) {
-        this.outsideClickListener = function (event) {
-          if (_this.focused && !_this.$refs.container.contains(event.target)) {
-            _this.focused = false;
-          }
-        };
-        document.addEventListener('click', this.outsideClickListener);
-      }
-    },
-    unbindOutsideClickListener: function unbindOutsideClickListener() {
-      if (this.outsideClickListener) {
-        document.removeEventListener('click', this.outsideClickListener);
-        this.outsideClickListener = null;
-      }
     }
   },
   computed: {
+    active: function active() {
+      return this.modelValue === true;
+    },
     hasLabel: function hasLabel() {
-      return this.onLabel && this.onLabel.length > 0 && this.offLabel && this.offLabel.length > 0;
+      return utils.ObjectUtils.isNotEmpty(this.onLabel) && utils.ObjectUtils.isNotEmpty(this.offLabel);
     },
     hasIcon: function hasIcon() {
       return this.$slots.icon || this.onIcon && this.offIcon;
     },
     label: function label() {
       return this.hasLabel ? this.modelValue ? this.onLabel : this.offLabel : ' ';
-    },
-    getPTOptions: function getPTOptions() {
-      return {
-        context: {
-          focused: this.focused,
-          disabled: this.disabled,
-          highlighted: this.modelValue === true
-        }
-      };
     }
   },
   directives: {
@@ -147,56 +117,51 @@ var script = {
   }
 };
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var _hoisted_1 = ["data-p-active"];
-var _hoisted_2 = ["id", "checked", "value", "aria-labelledby", "aria-label"];
+var _hoisted_1 = ["data-p-highlight", "data-p-disabled"];
+var _hoisted_2 = ["id", "value", "checked", "tabindex", "disabled", "readonly", "aria-labelledby", "aria-label"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _directive_ripple = vue.resolveDirective("ripple");
-  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-    ref: "container",
-    "class": _ctx.cx('root'),
-    onClick: _cache[2] || (_cache[2] = function ($event) {
-      return $options.onClick($event);
-    })
-  }, _ctx.ptm('root', $options.getPTOptions), {
-    "data-p-active": _ctx.modelValue === true,
-    "data-pc-name": "togglebutton"
-  }), [vue.createElementVNode("span", vue.mergeProps({
-    "class": "p-hidden-accessible"
-  }, _ctx.ptm('hiddenInputWrapper'), {
-    "data-p-hidden-accessible": true
+  return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    "class": _ctx.cx('root')
+  }, $options.getPTOptions('root'), {
+    "data-pc-name": "togglebutton",
+    "data-p-highlight": $options.active,
+    "data-p-disabled": _ctx.disabled
   }), [vue.createElementVNode("input", vue.mergeProps({
     id: _ctx.inputId,
     type: "checkbox",
     role: "switch",
-    "class": _ctx.inputClass,
+    "class": [_ctx.cx('input'), _ctx.inputClass],
     style: _ctx.inputStyle,
-    checked: _ctx.modelValue,
     value: _ctx.modelValue,
+    checked: $options.active,
+    tabindex: _ctx.tabindex,
+    disabled: _ctx.disabled,
+    readonly: _ctx.readonly,
     "aria-labelledby": _ctx.ariaLabelledby,
     "aria-label": _ctx.ariaLabel,
-    onFocus: _cache[0] || (_cache[0] = function ($event) {
-      return $options.onFocus($event);
+    onFocus: _cache[0] || (_cache[0] = function () {
+      return $options.onFocus && $options.onFocus.apply($options, arguments);
+    }),
+    onBlur: _cache[1] || (_cache[1] = function () {
+      return $options.onBlur && $options.onBlur.apply($options, arguments);
     }),
-    onBlur: _cache[1] || (_cache[1] = function ($event) {
-      return $options.onBlur($event);
+    onChange: _cache[2] || (_cache[2] = function () {
+      return $options.onChange && $options.onChange.apply($options, arguments);
     })
-  }, _objectSpread(_objectSpread({}, _ctx.inputProps), _ctx.ptm('hiddenInput'))), null, 16, _hoisted_2)], 16), vue.renderSlot(_ctx.$slots, "icon", {
+  }, $options.getPTOptions('input')), null, 16, _hoisted_2), vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    "class": _ctx.cx('box')
+  }, $options.getPTOptions('box')), [vue.renderSlot(_ctx.$slots, "icon", {
     value: _ctx.modelValue,
     "class": vue.normalizeClass(_ctx.cx('icon'))
   }, function () {
     return [_ctx.onIcon || _ctx.offIcon ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
       key: 0,
       "class": [_ctx.cx('icon'), _ctx.modelValue ? _ctx.onIcon : _ctx.offIcon]
-    }, _ctx.ptm('icon', $options.getPTOptions)), null, 16)) : vue.createCommentVNode("", true)];
+    }, $options.getPTOptions('icon')), null, 16)) : vue.createCommentVNode("", true)];
   }), vue.createElementVNode("span", vue.mergeProps({
     "class": _ctx.cx('label')
-  }, _ctx.ptm('label', $options.getPTOptions)), vue.toDisplayString($options.label), 17)], 16, _hoisted_1)), [[_directive_ripple]]);
+  }, $options.getPTOptions('label')), vue.toDisplayString($options.label), 17)], 16)), [[_directive_ripple]])], 16, _hoisted_1);
 }
 
 script.render = render;

package/togglebutton/togglebutton.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/ripple"),t=require("primevue/basecomponent"),n=require("primevue/togglebutton/style"),i=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=o(e),l={name:"ToggleButton",extends:{name:"BaseToggleButton",extends:o(t).default,props:{modelValue:Boolean,onIcon:String,offIcon:String,onLabel:{type:String,default:"Yes"},offLabel:{type:String,default:"No"},iconPos:{type:String,default:"left"},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null}},style:o(n).default,provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","change","click","focus","blur"],outsideClickListener:null,data:function(){return{focused:!1}},mounted:function(){this.bindOutsideClickListener()},beforeUnmount:function(){this.unbindOutsideClickListener()},methods:{onClick:function(e){this.disabled||(this.$emit("update:modelValue",!this.modelValue),this.$emit("change",e),this.$emit("click",e),this.focused=!0)},onFocus:function(e){this.focused=!0,this.$emit("focus",e)},onBlur:function(e){this.focused=!1,this.$emit("blur",e)},bindOutsideClickListener:function(){var e=this;this.outsideClickListener||(this.outsideClickListener=function(t){e.focused&&!e.$refs.container.contains(t.target)&&(e.focused=!1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener:function(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)}},computed:{hasLabel:function(){return this.onLabel&&this.onLabel.length>0&&this.offLabel&&this.offLabel.length>0},hasIcon:function(){return this.$slots.icon||this.onIcon&&this.offIcon},label:function(){return this.hasLabel?this.modelValue?this.onLabel:this.offLabel:"&nbsp;"},getPTOptions:function(){return{context:{focused:this.focused,disabled:this.disabled,highlighted:!0===this.modelValue}}}},directives:{ripple:r.default}};function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function a(e,t,n){var i;return(t="symbol"==u(i=d(t,"string"))?i:String(i))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function d(e,t){if("object"!=u(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,t||"default");if("object"!=u(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var f=["data-p-active"],p=["id","checked","value","aria-labelledby","aria-label"];l.render=function(e,t,n,o,r,l){var u=i.resolveDirective("ripple");return i.withDirectives((i.openBlock(),i.createElementBlock("div",i.mergeProps({ref:"container",class:e.cx("root"),onClick:t[2]||(t[2]=function(e){return l.onClick(e)})},e.ptm("root",l.getPTOptions),{"data-p-active":!0===e.modelValue,"data-pc-name":"togglebutton"}),[i.createElementVNode("span",i.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenInputWrapper"),{"data-p-hidden-accessible":!0}),[i.createElementVNode("input",i.mergeProps({id:e.inputId,type:"checkbox",role:"switch",class:e.inputClass,style:e.inputStyle,checked:e.modelValue,value:e.modelValue,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=function(e){return l.onFocus(e)}),onBlur:t[1]||(t[1]=function(e){return l.onBlur(e)})},c(c({},e.inputProps),e.ptm("hiddenInput"))),null,16,p)],16),i.renderSlot(e.$slots,"icon",{value:e.modelValue,class:i.normalizeClass(e.cx("icon"))},(function(){return[e.onIcon||e.offIcon?(i.openBlock(),i.createElementBlock("span",i.mergeProps({key:0,class:[e.cx("icon"),e.modelValue?e.onIcon:e.offIcon]},e.ptm("icon",l.getPTOptions)),null,16)):i.createCommentVNode("",!0)]})),i.createElementVNode("span",i.mergeProps({class:e.cx("label")},e.ptm("label",l.getPTOptions)),i.toDisplayString(l.label),17)],16,f)),[[u]])},module.exports=l;
+"use strict";var e=require("primevue/ripple"),t=require("primevue/utils"),l=require("primevue/basecomponent"),n=require("primevue/togglebutton/style"),a=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e),r={name:"ToggleButton",extends:{name:"BaseToggleButton",extends:o(l).default,props:{modelValue:Boolean,onIcon:String,offIcon:String,onLabel:{type:String,default:"Yes"},offLabel:{type:String,default:"No"},iconPos:{type:String,default:"left"},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null}},style:o(n).default,provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","change","focus","blur"],methods:{getPTOptions:function(e){return this.ptm(e,{context:{active:this.active,disabled:this.disabled}})},onChange:function(e){this.disabled||this.readonly||(this.$emit("update:modelValue",!this.modelValue),this.$emit("change",e))},onFocus:function(e){this.$emit("focus",e)},onBlur:function(e){this.$emit("blur",e)}},computed:{active:function(){return!0===this.modelValue},hasLabel:function(){return t.ObjectUtils.isNotEmpty(this.onLabel)&&t.ObjectUtils.isNotEmpty(this.offLabel)},hasIcon:function(){return this.$slots.icon||this.onIcon&&this.offIcon},label:function(){return this.hasLabel?this.modelValue?this.onLabel:this.offLabel:"&nbsp;"}},directives:{ripple:i.default}},u=["data-p-highlight","data-p-disabled"],s=["id","value","checked","tabindex","disabled","readonly","aria-labelledby","aria-label"];r.render=function(e,t,l,n,o,i){var r=a.resolveDirective("ripple");return a.openBlock(),a.createElementBlock("div",a.mergeProps({class:e.cx("root")},i.getPTOptions("root"),{"data-pc-name":"togglebutton","data-p-highlight":i.active,"data-p-disabled":e.disabled}),[a.createElementVNode("input",a.mergeProps({id:e.inputId,type:"checkbox",role:"switch",class:[e.cx("input"),e.inputClass],style:e.inputStyle,value:e.modelValue,checked:i.active,tabindex:e.tabindex,disabled:e.disabled,readonly:e.readonly,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=function(){return i.onFocus&&i.onFocus.apply(i,arguments)}),onBlur:t[1]||(t[1]=function(){return i.onBlur&&i.onBlur.apply(i,arguments)}),onChange:t[2]||(t[2]=function(){return i.onChange&&i.onChange.apply(i,arguments)})},i.getPTOptions("input")),null,16,s),a.withDirectives((a.openBlock(),a.createElementBlock("div",a.mergeProps({class:e.cx("box")},i.getPTOptions("box")),[a.renderSlot(e.$slots,"icon",{value:e.modelValue,class:a.normalizeClass(e.cx("icon"))},(function(){return[e.onIcon||e.offIcon?(a.openBlock(),a.createElementBlock("span",a.mergeProps({key:0,class:[e.cx("icon"),e.modelValue?e.onIcon:e.offIcon]},i.getPTOptions("icon")),null,16)):a.createCommentVNode("",!0)]})),a.createElementVNode("span",a.mergeProps({class:e.cx("label")},i.getPTOptions("label")),a.toDisplayString(i.label),17)],16)),[[r]])],16,u)},module.exports=r;