Refactor #5071 - Improve the structure of some components to comply with standards

components/lib/togglebutton/ToggleButton.vue

@@ -1,101 +1,73 @@
 <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>
+    <div v-ripple :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')"
+        />
         <slot name="icon" :value="modelValue" :class="cx('icon')">
-            <span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="ptm('icon', getPTOptions)" />
+            <span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
         </slot>
-        <span :class="cx('label')" v-bind="ptm('label', getPTOptions)">{{ label }}</span>
+        <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
     </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: {

components/lib/togglebutton/style/ToggleButtonStyle.js

@@ -1,15 +1,51 @@
 import BaseStyle from 'primevue/base/style';
 
+const css = `
+@layer primevue {
+    .p-togglebutton {
+        display: inline-flex;
+        user-select: none;
+        align-items: center;
+        vertical-align: bottom;
+        text-align: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-togglebutton-input {
+        cursor: pointer;
+    }
+
+    .p-button-label {
+        flex: 1 1 auto;
+    }
+
+    .p-button-icon-right {
+        order: 1;
+    }
+
+    .p-button-icon-only {
+        justify-content: center;
+    }
+
+    .p-button-icon-only .p-button-label {
+        visibility: hidden;
+        width: 0;
+        flex: 0 0 auto;
+    }
+}
+`;
+
 const classes = {
     root: ({ instance, props }) => [
-        'p-button p-togglebutton p-component',
+        'p-togglebutton p-button p-component',
         {
-            'p-focus': instance.focused,
             'p-button-icon-only': instance.hasIcon && !instance.hasLabel,
             'p-disabled': props.disabled,
-            'p-highlight': props.modelValue === true
+            'p-highlight': instance.active
         }
     ],
+    input: 'p-togglebutton-input',
     icon: ({ instance, props }) => [
         'p-button-icon',
         {
@@ -21,6 +57,7 @@ const classes = {
 };
 
 export default BaseStyle.extend({
-    name: 'accordion',
+    name: 'togglebutton',
+    css,
     classes
 });