Refactor #5071 - Improve the structure of some components to comply w…

…ith standards
primefaces · Jan 12, 2024 · 99b1edd · 99b1edd
1 parent e7d3074
commit 99b1edd
Show file tree

Hide file tree

Showing 17 changed files with 355 additions and 355 deletions.
diff --git 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}
 }
 `;
 

diff --git 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

diff --git 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.
+     */
+    focus(event: Event): void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
      */
-    input(value: boolean): void;
+    blur(event: Event): void;
 }
 
 /**

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