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

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

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

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 {
-    /**
+    [key: string]: any;
-     * Current focus state as a boolean.
-     * @defaultValue false
-     */
-    focused: boolean;
 }
 
 /**
@@ -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.
+     * Callback to invoke when the component receives focus.
-     * @param {boolean} value - New value.
+     * @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;
 }
 
 /**

components/lib/checkbox/Checkbox.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :class="cx('root')" @click="onClick($event)" v-bind="getPTOptions('root')" data-pc-name="checkbox">
+    <div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="checkbox" :data-p-highlight="checked" :data-p-disabled="disabled">
-        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
         <input
-                ref="input"
             :id="inputId"
             type="checkbox"
+            :class="[cx('input'), inputClass]"
+            :style="inputStyle"
             :value="value"
             :name="name"
             :checked="checked"
@@ -14,12 +14,12 @@
             :required="required"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
-                @focus="onFocus($event)"
+            @focus="onFocus"
-                @blur="onBlur($event)"
+            @blur="onBlur"
-                v-bind="ptm('hiddenInput')"
+            @change="onChange"
+            v-bind="getPTOptions('input')"
         />
-        </div>
+        <div :class="cx('box')" v-bind="getPTOptions('box')">
-        <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">
             <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'],
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
-    data() {
-        return {
-            focused: false
-        };
-    },
     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>

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-disabled': props.disabled
-            'p-focus': instance.focused
         }
     ],
+    box: 'p-checkbox-box',
+    input: 'p-checkbox-input',
     icon: 'p-checkbox-icon'
 };
 
 export default BaseStyle.extend({
     name: 'checkbox',
+    css,
     classes
 });

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

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="cx('root')" :style="sx('root')" v-bind="getPTOptions('root')" data-pc-name="inputswitch" :data-p-highlight="checked" :data-p-disabled="disabled">
-        <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"
+            :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($event)"
+            @focus="onFocus"
-                @blur="onBlur($event)"
+            @blur="onBlur"
-                v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
+            @change="onChange"
+            v-bind="getPTOptions('input')"
         />
-        </div>
+        <span :class="cx('slider')" v-bind="getPTOptions('slider')"></span>
-        <span :class="cx('slider')" v-bind="ptm('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'],
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
-    data() {
-        return {
-            focused: false
-        };
-    },
     methods: {
-        onClick(event) {
+        getPTOptions(key) {
-            if (!this.disabled) {
+            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);
         }
     },

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-highlight': instance.checked,
-            'p-disabled': props.disabled,
+            'p-disabled': props.disabled
-            'p-focus': instance.focused
         }
     ],
+    input: 'p-inputswitch-input',
     slider: 'p-inputswitch-slider'
 };
 

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

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="cx('root')" v-bind="getPTOptions('root')" data-pc-name="radiobutton" :data-p-highlight="checked" :data-p-disabled="disabled">
-        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <input
-            <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')" />
+            :id="inputId"
-        </div>
+            type="radio"
-        <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">
+            :class="[cx('input'), inputClass]"
-            <div :class="cx('icon')" v-bind="ptm('icon')"></div>
+            :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'],
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
-    data() {
-        return {
-            focused: false
-        };
-    },
     methods: {
-        onClick(event) {
+        getPTOptions(key) {
-            if (!this.disabled) {
+            return this.ptm(key, {
-                this.$emit('click', event);
+                context: {
-                this.$emit('update:modelValue', this.value);
+                    checked: this.checked,
-                this.$refs.input.focus();
+                    disabled: this.disabled
-
-                if (!this.checked) {
-                    this.$emit('change', event);
                 }
+            });
+        },
+        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);
         }
     },

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-disabled': props.disabled
-            'p-focus': instance.focused
         }
     ],
+    box: 'p-radiobutton-box',
+    input: 'p-radiobutton-input',
     icon: 'p-radiobutton-icon'
 };
 
 export default BaseStyle.extend({
     name: 'radiobutton',
+    css,
     classes
 });

components/lib/slider/Slider.vue

@@ -153,7 +153,6 @@ export default {
                 this.handleIndex = index;
             }
 
-            event.currentTarget.focus();
             event.preventDefault();
         },
         onDrag(event) {

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">
+    <div v-ripple :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="togglebutton" :data-p-highlight="active" :data-p-disabled="disabled">
-        <span class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
         <input
             :id="inputId"
             type="checkbox"
             role="switch"
-                :class="inputClass"
+            :class="[cx('input'), inputClass]"
             :style="inputStyle"
-                :checked="modelValue"
             :value="modelValue"
+            :checked="active"
+            :tabindex="tabindex"
+            :disabled="disabled"
+            :readonly="readonly"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
-                @focus="onFocus($event)"
+            @focus="onFocus"
-                @blur="onBlur($event)"
+            @blur="onBlur"
-                v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
+            @change="onChange"
+            v-bind="getPTOptions('input')"
         />
-        </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)" />
+            <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'],
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
-    outsideClickListener: null,
-    data() {
-        return {
-            focused: false
-        };
-    },
-    mounted() {
-        this.bindOutsideClickListener();
-    },
-    beforeUnmount() {
-        this.unbindOutsideClickListener();
-    },
     methods: {
-        onClick(event) {
+        getPTOptions(key) {
-            if (!this.disabled) {
+            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
 });

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,

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="cx('root')" v-bind="getPTOptions('root')" data-pc-name="tristatecheckbox" :data-p-highlight="active" :data-p-disabled="disabled">
-        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
         <input
-                ref="input"
             :id="inputId"
             type="checkbox"
-                :checked="modelValue === true"
+            :class="[cx('input'), inputClass]"
+            :style="inputStyle"
+            :value="modelValue"
+            :checked="checked"
             :tabindex="tabindex"
             :disabled="disabled"
+            :readonly="readonly"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
-                @keydown="onKeyDown($event)"
+            @focus="onFocus"
-                @focus="onFocus($event)"
+            @blur="onBlur"
-                @blur="onBlur($event)"
+            @change="onChange"
-                v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
+            v-bind="getPTOptions('input')"
         />
-        </div>
+        <span role="status" class="p-hidden-accessible" aria-live="polite" v-bind="getPTOptions('hiddenValueLabel')" :data-p-hidden-accessible="true">{{ ariaValueLabel }}</span>
-        <span role="status" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenValueLabel')" :data-p-hidden-accessible="true">{{ ariaValueLabel }}</span>
+        <div :class="cx('box')" v-bind="getPTOptions('box')">
-        <div ref="box" :class="cx('checkbox')" v-bind="getPTOptions('checkbox')" :data-p-highlight="modelValue != null" :data-p-disabled="disabled" :data-p-focused="focused">
             <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')" />
+                <TimesIcon :class="cx('uncheckIcon')" v-bind="getPTOptions('uncheckIcon')" />
-            </slot>
-            <slot v-else name="nullableicon" :class="cx('nullableIcon')">
-                <span :class="cx('nullableIcon')" v-bind="ptm('nullableIcon')"></span>
             </slot>
+            <slot v-else name="nullableicon" :class="cx('nullableIcon')" />
         </div>
     </div>
 </template>
@@ -39,24 +38,17 @@ import BaseTriStateCheckbox from './BaseTriStateCheckbox.vue';
 export default {
     name: 'TriStateCheckbox',
     extends: BaseTriStateCheckbox,
-    emits: ['click', 'update:modelValue', 'change', 'keydown', 'focus', 'blur'],
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
-    data() {
-        return {
-            focused: false
-        };
-    },
     methods: {
         getPTOptions(key) {
             return this.ptm(key, {
                 context: {
-                    active: this.modelValue !== null,
+                    active: this.active,
-                    focused: this.focused,
                     disabled: this.disabled
                 }
             });
         },
         updateModel() {
-            if (!this.disabled) {
             let newValue;
 
             switch (this.modelValue) {
@@ -74,38 +66,34 @@ export default {
             }
 
             this.$emit('update:modelValue', newValue);
-            }
         },
-        onClick(event) {
+        onChange(event) {
+            if (!this.disabled && !this.readonly) {
                 this.updateModel();
-            this.$emit('click', event);
                 this.$emit('change', event);
-            this.$refs.input.focus();
-        },
-        onKeyDown(event) {
-            if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-                this.updateModel();
-                this.$emit('keydown', event);
-                event.preventDefault();
             }
         },
         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,
+        CheckIcon,
-        TimesIcon: TimesIcon
+        TimesIcon
     }
 };
 </script>

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-highlight': instance.active,
-            'p-checkbox-disabled': props.disabled,
+            'p-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
         }
     ],
+    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
 });