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

2024-01-12 07:07:55 +00:00 · 2024-01-12 07:07:55 +00:00 · 99b1edd5ce
parent e7d3074af2
commit 99b1edd5ce
17 changed files with 355 additions and 355 deletions
--- a/components/lib/basecomponent/style/BaseComponentStyle.js
+++ b/components/lib/basecomponent/style/BaseComponentStyle.js
@ -71,26 +71,6 @@ const buttonCSS = `
 }
 `;

-const checkboxCSS = `
-.p-checkbox {
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    vertical-align: bottom;
-    position: relative;
-}
-
-.p-checkbox.p-checkbox-disabled {
-    cursor: default;
-}
-
-.p-checkbox-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-`;
-
 const inputTextCSS = `
 .p-fluid .p-inputtext {
    width: 100%;
@ -193,39 +173,6 @@ const inputTextCSS = `
 }
 `;

-const radioButtonCSS = `
-.p-radiobutton {
-    position: relative;
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    vertical-align: bottom;
-}
-
-.p-radiobutton.p-radiobutton-disabled {
-    cursor: default;
-}
-
-.p-radiobutton-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.p-radiobutton-icon {
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    transform: translateZ(0) scale(.1);
-    border-radius: 50%;
-    visibility: hidden;
-}
-
-.p-radiobutton-box.p-highlight .p-radiobutton-icon {
-    transform: translateZ(0) scale(1.0, 1.0);
-    visibility: visible;
-}
-`;
-
 const css = `
@layer primevue {
 .p-component, .p-component * {
@ -348,9 +295,7 @@ const css = `
    transition: max-height 1s ease-in-out;
 }
 ${buttonCSS}
-${checkboxCSS}
 ${inputTextCSS}
-${radioButtonCSS}
 }
 `;

--- a/components/lib/checkbox/BaseCheckbox.vue
+++ b/components/lib/checkbox/BaseCheckbox.vue
@ -49,10 +49,6 @@ export default {
            type: Object,
            default: null
        },
-        inputProps: {
-            type: null,
-            default: null
-        },
        ariaLabelledby: {
            type: String,
            default: null
--- a/components/lib/checkbox/Checkbox.d.ts
+++ b/components/lib/checkbox/Checkbox.d.ts
@ -7,7 +7,7 @@
 * @module checkbox
 *
 */
-import { InputHTMLAttributes, VNode } from 'vue';
+import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -91,11 +91,7 @@ export interface CheckboxPassThroughAttributes {
 * Defines current inline state in Checkbox component.
 */
 export interface CheckboxState {
-    /**
-     * Current focus state as a boolean.
-     * @defaultValue false
-     */
-    focused: boolean;
+    [key: string]: any;
 }

 /**
@ -160,10 +156,6 @@ export interface CheckboxProps {
     * Inline style of the input field.
     */
    inputStyle?: string | 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.
     */
@ -198,11 +190,6 @@ export interface CheckboxContext {
     * @defaultValue false
     */
    checked: boolean;
-    /**
-     * Current focus state of the item as a boolean.
-     * @defaultValue false
-     */
-    focused: boolean;
    /**
     * Current disabled state of the item as a boolean.
     * @defaultValue false
@ -239,21 +226,21 @@ export interface CheckboxEmits {
     * @param {*} value - New page value.
     */
    'update:page'(value: any): void;
-    /**
-     * Callback to invoke on value click.
-     * @param {MouseEvent} event - Browser event.
-     */
-    click(event: MouseEvent): void;
    /**
     * Callback to invoke on value change.
     * @param {Event} event - Browser event.
     */
    change(event: Event): void;
    /**
-     * Callback to invoke on value change.
-     * @param {boolean} value - New value.
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
     */
-    input(value: boolean): void;
+    focus(event: Event): void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    blur(event: Event): void;
 }

 /**
--- a/components/lib/checkbox/Checkbox.vue
+++ b/components/lib/checkbox/Checkbox.vue
@ -1,25 +1,25 @@
 <template>
-    <div :class="cx('root')" @click="onClick($event)" v-bind="getPTOptions('root')" data-pc-name="checkbox">
-        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
-            <input
-                ref="input"
-                :id="inputId"
-                type="checkbox"
-                :value="value"
-                :name="name"
-                :checked="checked"
-                :tabindex="tabindex"
-                :disabled="disabled"
-                :readonly="readonly"
-                :required="required"
-                :aria-labelledby="ariaLabelledby"
-                :aria-label="ariaLabel"
-                @focus="onFocus($event)"
-                @blur="onBlur($event)"
-                v-bind="ptm('hiddenInput')"
-            />
-        </div>
-        <div ref="box" :class="[cx('input'), inputClass]" :style="inputStyle" v-bind="{ ...inputProps, ...getPTOptions('input') }" :data-p-highlight="checked" :data-p-disabled="disabled" :data-p-focused="focused">
+    <div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="checkbox" :data-p-highlight="checked" :data-p-disabled="disabled">
+        <input
+            :id="inputId"
+            type="checkbox"
+            :class="[cx('input'), inputClass]"
+            :style="inputStyle"
+            :value="value"
+            :name="name"
+            :checked="checked"
+            :tabindex="tabindex"
+            :disabled="disabled"
+            :readonly="readonly"
+            :required="required"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            @focus="onFocus"
+            @blur="onBlur"
+            @change="onChange"
+            v-bind="getPTOptions('input')"
+        />
+        <div :class="cx('box')" v-bind="getPTOptions('box')">
            <slot name="icon" :checked="checked" :class="cx('icon')">
                <CheckIcon v-if="checked" :class="cx('icon')" v-bind="getPTOptions('icon')" />
            </slot>
@ -35,23 +35,17 @@ import BaseCheckbox from './BaseCheckbox.vue';
 export default {
    name: 'Checkbox',
    extends: BaseCheckbox,
-    emits: ['click', 'update:modelValue', 'change', 'input', 'focus', 'blur'],
-    data() {
-        return {
-            focused: false
-        };
-    },
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
    methods: {
        getPTOptions(key) {
            return this.ptm(key, {
                context: {
                    checked: this.checked,
-                    focused: this.focused,
                    disabled: this.disabled
                }
            });
        },
-        onClick(event) {
+        onChange(event) {
            if (!this.disabled && !this.readonly) {
                let newModelValue;

@ -62,19 +56,14 @@ export default {
                    else newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
                }

-                this.$emit('click', event);
                this.$emit('update:modelValue', newModelValue);
                this.$emit('change', event);
-                this.$emit('input', newModelValue);
-                this.$refs.input.focus();
            }
        },
        onFocus(event) {
-            this.focused = true;
            this.$emit('focus', event);
        },
        onBlur(event) {
-            this.focused = false;
            this.$emit('blur', event);
        }
    },
@ -84,7 +73,7 @@ export default {
        }
    },
    components: {
-        CheckIcon: CheckIcon
+        CheckIcon
    }
 };
 </script>
--- a/components/lib/checkbox/style/CheckboxStyle.js
+++ b/components/lib/checkbox/style/CheckboxStyle.js
@ -1,26 +1,41 @@
 import BaseStyle from 'primevue/base/style';

+const css = `
+@layer primevue {
+    .p-checkbox {
+        position: relative;
+        display: inline-flex;
+        user-select: none;
+        vertical-align: bottom;
+    }
+
+    .p-checkbox-input {
+        cursor: pointer;
+    }
+
+    .p-checkbox-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+`;
+
 const classes = {
    root: ({ instance, props }) => [
        'p-checkbox p-component',
-        {
-            'p-checkbox-checked': instance.checked,
-            'p-checkbox-disabled': props.disabled,
-            'p-checkbox-focused': instance.focused
-        }
-    ],
-    input: ({ instance, props }) => [
-        'p-checkbox-box',
        {
            'p-highlight': instance.checked,
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused
+            'p-disabled': props.disabled
        }
    ],
+    box: 'p-checkbox-box',
+    input: 'p-checkbox-input',
    icon: 'p-checkbox-icon'
 };

 export default BaseStyle.extend({
    name: 'checkbox',
+    css,
    classes
 });
--- a/components/lib/inputswitch/BaseInputSwitch.vue
+++ b/components/lib/inputswitch/BaseInputSwitch.vue
@ -22,6 +22,14 @@ export default {
            type: Boolean,
            default: false
        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        tabindex: {
+            type: Number,
+            default: null
+        },
        inputId: {
            type: String,
            default: null
@ -34,10 +42,6 @@ export default {
            type: Object,
            default: null
        },
-        inputProps: {
-            type: null,
-            default: null
-        },
        ariaLabelledby: {
            type: String,
            default: null
--- a/components/lib/inputswitch/InputSwitch.vue
+++ b/components/lib/inputswitch/InputSwitch.vue
@ -1,24 +1,24 @@
 <template>
-    <div :class="cx('root')" :style="sx('root')" @click="onClick($event)" v-bind="ptm('root')" data-pc-name="inputswitch">
-        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
-            <input
-                ref="input"
-                :id="inputId"
-                type="checkbox"
-                role="switch"
-                :class="inputClass"
-                :style="inputStyle"
-                :checked="checked"
-                :disabled="disabled"
-                :aria-checked="checked"
-                :aria-labelledby="ariaLabelledby"
-                :aria-label="ariaLabel"
-                @focus="onFocus($event)"
-                @blur="onBlur($event)"
-                v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
-            />
-        </div>
-        <span :class="cx('slider')" v-bind="ptm('slider')"></span>
+    <div :class="cx('root')" :style="sx('root')" v-bind="getPTOptions('root')" data-pc-name="inputswitch" :data-p-highlight="checked" :data-p-disabled="disabled">
+        <input
+            :id="inputId"
+            type="checkbox"
+            role="switch"
+            :class="[cx('input'), inputClass]"
+            :style="inputStyle"
+            :checked="checked"
+            :tabindex="tabindex"
+            :disabled="disabled"
+            :readonly="readonly"
+            :aria-checked="checked"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            @focus="onFocus"
+            @blur="onBlur"
+            @change="onChange"
+            v-bind="getPTOptions('input')"
+        />
+        <span :class="cx('slider')" v-bind="getPTOptions('slider')"></span>
    </div>
 </template>

@ -28,30 +28,28 @@ import BaseInputSwitch from './BaseInputSwitch.vue';
 export default {
    name: 'InputSwitch',
    extends: BaseInputSwitch,
-    emits: ['click', 'update:modelValue', 'change', 'input', 'focus', 'blur'],
-    data() {
-        return {
-            focused: false
-        };
-    },
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
    methods: {
-        onClick(event) {
-            if (!this.disabled) {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    checked: this.checked,
+                    disabled: this.disabled
+                }
+            });
+        },
+        onChange(event) {
+            if (!this.disabled && !this.readonly) {
                const newValue = this.checked ? this.falseValue : this.trueValue;

-                this.$emit('click', event);
                this.$emit('update:modelValue', newValue);
                this.$emit('change', event);
-                this.$emit('input', newValue);
-                this.$refs.input.focus();
            }
        },
        onFocus(event) {
-            this.focused = true;
            this.$emit('focus', event);
        },
        onBlur(event) {
-            this.focused = false;
            this.$emit('blur', event);
        }
    },
--- a/components/lib/inputswitch/style/InputSwitchStyle.js
+++ b/components/lib/inputswitch/style/InputSwitchStyle.js
@ -6,6 +6,10 @@ const css = `
        display: inline-block;
    }

+    .p-inputswitch-input {
+        cursor: pointer;
+    }
+
    .p-inputswitch-slider {
        position: absolute;
        cursor: pointer;
@ -32,11 +36,11 @@ const classes = {
    root: ({ instance, props }) => [
        'p-inputswitch p-component',
        {
-            'p-inputswitch-checked': instance.checked,
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused
+            'p-highlight': instance.checked,
+            'p-disabled': props.disabled
        }
    ],
+    input: 'p-inputswitch-input',
    slider: 'p-inputswitch-slider'
 };

--- a/components/lib/radiobutton/BaseRadioButton.vue
+++ b/components/lib/radiobutton/BaseRadioButton.vue
@ -16,6 +16,14 @@ export default {
            type: Boolean,
            default: false
        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        tabindex: {
+            type: Number,
+            default: null
+        },
        inputId: {
            type: String,
            default: null
@ -28,10 +36,6 @@ export default {
            type: Object,
            default: null
        },
-        inputProps: {
-            type: null,
-            default: null
-        },
        ariaLabelledby: {
            type: String,
            default: null
--- a/components/lib/radiobutton/RadioButton.vue
+++ b/components/lib/radiobutton/RadioButton.vue
@ -1,10 +1,25 @@
 <template>
-    <div :class="cx('root')" @click="onClick($event)" v-bind="ptm('root')" data-pc-name="radiobutton">
-        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
-            <input ref="input" :id="inputId" type="radio" :name="name" :checked="checked" :disabled="disabled" :value="value" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" @focus="onFocus" @blur="onBlur" v-bind="ptm('hiddenInput')" />
-        </div>
-        <div ref="box" :class="[cx('input'), inputClass]" :style="inputStyle" v-bind="{ ...inputProps, ...ptm('input') }" :data-p-highlight="checked" :data-p-disabled="disabled" :data-p-focused="focused">
-            <div :class="cx('icon')" v-bind="ptm('icon')"></div>
+    <div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="radiobutton" :data-p-highlight="checked" :data-p-disabled="disabled">
+        <input
+            :id="inputId"
+            type="radio"
+            :class="[cx('input'), inputClass]"
+            :style="inputStyle"
+            :value="value"
+            :name="name"
+            :checked="checked"
+            :tabindex="tabindex"
+            :disabled="disabled"
+            :readonly="readonly"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            @focus="onFocus"
+            @blur="onBlur"
+            @change="onChange"
+            v-bind="getPTOptions('input')"
+        />
+        <div :class="cx('box')" v-bind="getPTOptions('box')">
+            <div :class="cx('icon')" v-bind="getPTOptions('icon')"></div>
        </div>
    </div>
 </template>
@ -16,30 +31,26 @@ import BaseRadioButton from './BaseRadioButton.vue';
 export default {
    name: 'RadioButton',
    extends: BaseRadioButton,
-    emits: ['click', 'update:modelValue', 'change', 'focus', 'blur'],
-    data() {
-        return {
-            focused: false
-        };
-    },
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
    methods: {
-        onClick(event) {
-            if (!this.disabled) {
-                this.$emit('click', event);
-                this.$emit('update:modelValue', this.value);
-                this.$refs.input.focus();
-
-                if (!this.checked) {
-                    this.$emit('change', event);
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    checked: this.checked,
+                    disabled: this.disabled
                }
+            });
+        },
+        onChange(event) {
+            if (!this.disabled && !this.readonly) {
+                this.$emit('update:modelValue', this.value);
+                this.$emit('change', event);
            }
        },
        onFocus(event) {
-            this.focused = true;
            this.$emit('focus', event);
        },
        onBlur(event) {
-            this.focused = false;
            this.$emit('blur', event);
        }
    },
--- a/components/lib/radiobutton/style/RadioButtonStyle.js
+++ b/components/lib/radiobutton/style/RadioButtonStyle.js
@ -1,26 +1,54 @@
 import BaseStyle from 'primevue/base/style';

+const css = `
+@layer primevue {
+    .p-radiobutton {
+        position: relative;
+        display: inline-flex;
+        user-select: none;
+        vertical-align: bottom;
+    }
+
+    .p-radiobutton-input {
+        cursor: pointer;
+    }
+
+    .p-radiobutton-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .p-radiobutton-icon {
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        transform: translateZ(0) scale(.1);
+        border-radius: 50%;
+        visibility: hidden;
+    }
+
+    .p-radiobutton.p-highlight .p-radiobutton-icon {
+        transform: translateZ(0) scale(1.0, 1.0);
+        visibility: visible;
+    }
+}
+`;
+
 const classes = {
    root: ({ instance, props }) => [
        'p-radiobutton p-component',
-        {
-            'p-radiobutton-checked': instance.checked,
-            'p-radiobutton-disabled': props.disabled,
-            'p-radiobutton-focused': instance.focused
-        }
-    ],
-    input: ({ instance, props }) => [
-        'p-radiobutton-box',
        {
            'p-highlight': instance.checked,
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused
+            'p-disabled': props.disabled
        }
    ],
+    box: 'p-radiobutton-box',
+    input: 'p-radiobutton-input',
    icon: 'p-radiobutton-icon'
 };

 export default BaseStyle.extend({
    name: 'radiobutton',
+    css,
    classes
 });
--- a/components/lib/slider/Slider.vue
+++ b/components/lib/slider/Slider.vue
@ -153,7 +153,6 @@ export default {
                this.handleIndex = index;
            }

-            event.currentTarget.focus();
            event.preventDefault();
        },
        onDrag(event) {
--- a/components/lib/togglebutton/ToggleButton.vue
+++ b/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: {
--- a/components/lib/togglebutton/style/ToggleButtonStyle.js
+++ b/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
 });
--- a/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue
+++ b/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue
@ -7,21 +7,29 @@ export default {
    extends: BaseComponent,
    props: {
        modelValue: null,
-        inputId: {
-            type: String,
-            default: null
-        },
-        inputProps: {
-            type: null,
-            default: null
-        },
        disabled: {
            type: Boolean,
            default: false
        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
        tabindex: {
            type: Number,
-            default: 0
+            default: null
+        },
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: [String, Object],
+            default: null
+        },
+        inputStyle: {
+            type: Object,
+            default: null
        },
        ariaLabelledby: {
            type: String,
--- a/components/lib/tristatecheckbox/TriStateCheckbox.vue
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.vue
@ -1,32 +1,31 @@
 <template>
-    <div :class="cx('root')" @click="onClick($event)" v-bind="ptm('root')" data-pc-name="tristatecheckbox">
-        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
-            <input
-                ref="input"
-                :id="inputId"
-                type="checkbox"
-                :checked="modelValue === true"
-                :tabindex="tabindex"
-                :disabled="disabled"
-                :aria-labelledby="ariaLabelledby"
-                :aria-label="ariaLabel"
-                @keydown="onKeyDown($event)"
-                @focus="onFocus($event)"
-                @blur="onBlur($event)"
-                v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
-            />
-        </div>
-        <span role="status" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenValueLabel')" :data-p-hidden-accessible="true">{{ ariaValueLabel }}</span>
-        <div ref="box" :class="cx('checkbox')" v-bind="getPTOptions('checkbox')" :data-p-highlight="modelValue != null" :data-p-disabled="disabled" :data-p-focused="focused">
+    <div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="tristatecheckbox" :data-p-highlight="active" :data-p-disabled="disabled">
+        <input
+            :id="inputId"
+            type="checkbox"
+            :class="[cx('input'), inputClass]"
+            :style="inputStyle"
+            :value="modelValue"
+            :checked="checked"
+            :tabindex="tabindex"
+            :disabled="disabled"
+            :readonly="readonly"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            @focus="onFocus"
+            @blur="onBlur"
+            @change="onChange"
+            v-bind="getPTOptions('input')"
+        />
+        <span role="status" class="p-hidden-accessible" aria-live="polite" v-bind="getPTOptions('hiddenValueLabel')" :data-p-hidden-accessible="true">{{ ariaValueLabel }}</span>
+        <div :class="cx('box')" v-bind="getPTOptions('box')">
            <slot v-if="modelValue === true" name="checkicon" :class="cx('checkIcon')">
-                <component :is="'CheckIcon'" :class="cx('checkIcon')" v-bind="ptm('checkIcon')" />
+                <CheckIcon :class="cx('checkIcon')" v-bind="getPTOptions('checkIcon')" />
            </slot>
            <slot v-else-if="modelValue === false" name="uncheckicon" :class="cx('uncheckIcon')">
-                <component :is="'TimesIcon'" :class="cx('uncheckIcon')" v-bind="ptm('uncheckIcon')" />
-            </slot>
-            <slot v-else name="nullableicon" :class="cx('nullableIcon')">
-                <span :class="cx('nullableIcon')" v-bind="ptm('nullableIcon')"></span>
+                <TimesIcon :class="cx('uncheckIcon')" v-bind="getPTOptions('uncheckIcon')" />
            </slot>
+            <slot v-else name="nullableicon" :class="cx('nullableIcon')" />
        </div>
    </div>
 </template>
@ -39,73 +38,62 @@ import BaseTriStateCheckbox from './BaseTriStateCheckbox.vue';
 export default {
    name: 'TriStateCheckbox',
    extends: BaseTriStateCheckbox,
-    emits: ['click', 'update:modelValue', 'change', 'keydown', 'focus', 'blur'],
-    data() {
-        return {
-            focused: false
-        };
-    },
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
    methods: {
        getPTOptions(key) {
            return this.ptm(key, {
                context: {
-                    active: this.modelValue !== null,
-                    focused: this.focused,
+                    active: this.active,
                    disabled: this.disabled
                }
            });
        },
        updateModel() {
-            if (!this.disabled) {
-                let newValue;
+            let newValue;

-                switch (this.modelValue) {
-                    case true:
-                        newValue = false;
-                        break;
+            switch (this.modelValue) {
+                case true:
+                    newValue = false;
+                    break;

-                    case false:
-                        newValue = null;
-                        break;
+                case false:
+                    newValue = null;
+                    break;

-                    default:
-                        newValue = true;
-                        break;
-                }
-
-                this.$emit('update:modelValue', newValue);
+                default:
+                    newValue = true;
+                    break;
            }
+
+            this.$emit('update:modelValue', newValue);
        },
-        onClick(event) {
-            this.updateModel();
-            this.$emit('click', event);
-            this.$emit('change', event);
-            this.$refs.input.focus();
-        },
-        onKeyDown(event) {
-            if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+        onChange(event) {
+            if (!this.disabled && !this.readonly) {
                this.updateModel();
-                this.$emit('keydown', event);
-                event.preventDefault();
+                this.$emit('change', event);
            }
        },
        onFocus(event) {
-            this.focused = true;
            this.$emit('focus', event);
        },
        onBlur(event) {
-            this.focused = false;
            this.$emit('blur', event);
        }
    },
    computed: {
+        active() {
+            return this.modelValue != null;
+        },
+        checked() {
+            return this.modelValue === true;
+        },
        ariaValueLabel() {
            return this.modelValue ? this.$primevue.config.locale.aria.trueLabel : this.modelValue === false ? this.$primevue.config.locale.aria.falseLabel : this.$primevue.config.locale.aria.nullLabel;
        }
    },
    components: {
-        CheckIcon: CheckIcon,
-        TimesIcon: TimesIcon
+        CheckIcon,
+        TimesIcon
    }
 };
 </script>
--- a/components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js
+++ b/components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js
@ -1,22 +1,36 @@
 import BaseStyle from 'primevue/base/style';

+const css = `
+@layer primevue {
+    .p-checkbox {
+        position: relative;
+        display: inline-flex;
+        user-select: none;
+        vertical-align: bottom;
+    }
+
+    .p-checkbox-input {
+        cursor: pointer;
+    }
+
+    .p-checkbox-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+`;
+
 const classes = {
    root: ({ instance, props }) => [
-        'p-checkbox p-component',
+        'p-tristatecheckbox p-checkbox p-component',
        {
-            'p-checkbox-checked': props.modelValue === true,
-            'p-checkbox-disabled': props.disabled,
-            'p-checkbox-focused': instance.focused
-        }
-    ],
-    checkbox: ({ instance, props }) => [
-        'p-checkbox-box',
-        {
-            'p-highlight': props.modelValue != null,
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused
+            'p-highlight': instance.active,
+            'p-disabled': props.disabled
        }
    ],
+    box: 'p-checkbox-box',
+    input: 'p-checkbox-input',
    checkIcon: 'p-checkbox-icon',
    uncheckIcon: 'p-checkbox-icon',
    nullableIcon: 'p-checkbox-icon'
@ -24,5 +38,6 @@ const classes = {

 export default BaseStyle.extend({
    name: 'tristatecheckbox',
+    css,
    classes
 });