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

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="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>

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