From bd5b3f7c6a6da97f0c2b2f994e3cfd13ebd6d7c3 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Sun, 14 Jan 2024 13:38:51 +0000 Subject: [PATCH] Refactor #5071 --- components/lib/checkbox/Checkbox.d.ts | 18 ++--- components/lib/checkbox/Checkbox.vue | 2 +- components/lib/column/Column.d.ts | 48 ++----------- components/lib/datatable/HeaderCheckbox.vue | 56 ++++----------- components/lib/datatable/RowCheckbox.vue | 62 +++-------------- components/lib/datatable/RowRadioButton.vue | 43 +++--------- .../lib/datatable/style/DataTableStyle.js | 49 ------------- components/lib/inputswitch/InputSwitch.d.ts | 63 +++++++++++------ components/lib/multiselect/MultiSelect.d.ts | 20 +----- components/lib/multiselect/MultiSelect.vue | 69 ++++++++----------- .../lib/multiselect/style/MultiSelectStyle.js | 18 ----- components/lib/radiobutton/RadioButton.d.ts | 67 +++++++++++------- components/lib/radiobutton/RadioButton.vue | 2 +- .../lib/togglebutton/BaseToggleButton.vue | 8 +-- components/lib/togglebutton/ToggleButton.d.ts | 37 ++++------ components/lib/tree/Tree.d.ts | 10 +-- components/lib/tree/TreeNode.vue | 24 ++++--- components/lib/tree/style/TreeStyle.js | 6 +- components/lib/treetable/BodyCell.vue | 47 +++++++------ .../lib/treetable/style/TreeTableStyle.js | 13 +--- .../tristatecheckbox/TriStateCheckbox.d.ts | 57 ++++++++------- nuxt-vite.config.js | 2 + 22 files changed, 258 insertions(+), 463 deletions(-) diff --git a/components/lib/checkbox/Checkbox.d.ts b/components/lib/checkbox/Checkbox.d.ts index 31356a51b..69cd7707d 100755 --- a/components/lib/checkbox/Checkbox.d.ts +++ b/components/lib/checkbox/Checkbox.d.ts @@ -61,18 +61,14 @@ export interface CheckboxPassThroughOptions { * Used to pass attributes to the input's DOM element. */ input?: CheckboxPassThroughOptionType; + /** + * Used to pass attributes to the box's DOM element. + */ + box?: CheckboxPassThroughOptionType; /** * Used to pass attributes to the icon's DOM element. */ icon?: CheckboxPassThroughOptionType; - /** - * Used to pass attributes to the hidden input wrapper's DOM element. - */ - hiddenInputWrapper?: CheckboxPassThroughOptionType; - /** - * Used to pass attributes to the hidden input's DOM element. - */ - hiddenInput?: CheckboxPassThroughOptionType; /** * Used to manage all lifecycle hooks. * @see {@link BaseComponent.ComponentHooks} @@ -222,10 +218,10 @@ export interface CheckboxSlots { */ export interface CheckboxEmits { /** - * Emitted when the page changes. - * @param {*} value - New page value. + * Emitted when the value changes. + * @param {*} value - New value. */ - 'update:page'(value: any): void; + 'update:modelValue'(value: any): void; /** * Callback to invoke on value change. * @param {Event} event - Browser event. diff --git a/components/lib/checkbox/Checkbox.vue b/components/lib/checkbox/Checkbox.vue index 6ca78f82e..dff28fb69 100755 --- a/components/lib/checkbox/Checkbox.vue +++ b/components/lib/checkbox/Checkbox.vue @@ -1,5 +1,5 @@ diff --git a/components/lib/datatable/RowCheckbox.vue b/components/lib/datatable/RowCheckbox.vue index 083c7c021..9d4c668f8 100755 --- a/components/lib/datatable/RowCheckbox.vue +++ b/components/lib/datatable/RowCheckbox.vue @@ -1,30 +1,16 @@ diff --git a/components/lib/datatable/RowRadioButton.vue b/components/lib/datatable/RowRadioButton.vue index 409b5a42e..9d4c075ee 100755 --- a/components/lib/datatable/RowRadioButton.vue +++ b/components/lib/datatable/RowRadioButton.vue @@ -1,24 +1,16 @@ diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js index e22fd5d81..70666a6aa 100644 --- a/components/lib/datatable/style/DataTableStyle.js +++ b/components/lib/datatable/style/DataTableStyle.js @@ -297,23 +297,6 @@ const classes = { headerTitle: 'p-column-title', sortIcon: 'p-sortable-column-icon', sortBadge: 'p-sortable-column-badge', - //headercheckbox - headerCheckboxWrapper: ({ instance }) => [ - 'p-checkbox p-component', - { - 'p-checkbox-focused': instance.focused, - 'p-disabled': instance.disabled - } - ], - headerCheckbox: ({ instance }) => [ - 'p-checkbox-box p-component', - { - 'p-highlight': instance.checked, - 'p-disabled': instance.disabled, - 'p-focus': instance.focused - } - ], - headerCheckboxIcon: 'p-checkbox-icon', // columnfilter columnFilter: ({ props }) => [ 'p-column-filter p-fluid', @@ -413,38 +396,6 @@ const classes = { rowEditorSaveIcon: 'p-row-editor-save-icon', rowEditorCancelButton: 'p-row-editor-cancel p-link', rowEditorCancelIcon: 'p-row-editor-cancel-icon', - //rowcheckbox - checkboxWrapper: ({ instance }) => [ - 'p-checkbox p-component', - { - 'p-checkbox-focused': instance.focused - } - ], - checkbox: ({ instance }) => [ - 'p-checkbox-box p-component', - { - 'p-highlight': instance.checked, - 'p-disabled': instance.$attrs.disabled, - 'p-focus': instance.focused - } - ], - checkboxIcon: 'p-checkbox-icon', - //rowradiobutton - radiobuttonWrapper: ({ instance }) => [ - 'p-radiobutton p-component', - { - 'p-radiobutton-focused': instance.focused - } - ], - radiobutton: ({ instance }) => [ - 'p-radiobutton-box p-component', - { - 'p-highlight': instance.checked, - 'p-disabled': instance.$attrs.disabled, - 'p-focus': instance.focused - } - ], - radiobuttonIcon: 'p-radiobutton-icon', //tablefooter tfoot: 'p-datatable-tfoot', //footercell diff --git a/components/lib/inputswitch/InputSwitch.d.ts b/components/lib/inputswitch/InputSwitch.d.ts index e9f095f5d..468c4e379 100755 --- a/components/lib/inputswitch/InputSwitch.d.ts +++ b/components/lib/inputswitch/InputSwitch.d.ts @@ -30,6 +30,10 @@ export interface InputSwitchPassThroughMethodOptions { * Defines current inline state. */ state: InputSwitchState; + /** + * Defines current options. + */ + context: InputSwitchContext; /** * Defines valid attributes. */ @@ -53,18 +57,14 @@ export interface InputSwitchPassThroughOptions { * Used to pass attributes to the root's DOM element. */ root?: InputSwitchPassThroughOptionType; + /** + * Used to pass attributes to the input's DOM element. + */ + input?: InputSwitchPassThroughOptionType; /** * Used to pass attributes to the slider's DOM element. */ slider?: InputSwitchPassThroughOptionType; - /** - * Used to pass attributes to the hidden input wrapper's DOM element. - */ - hiddenInputWrapper?: InputSwitchPassThroughOptionType; - /** - * Used to pass attributes to the hidden input's DOM element. - */ - hiddenInput?: InputSwitchPassThroughOptionType; /** * Used to manage all lifecycle hooks. * @see {@link BaseComponent.ComponentHooks} @@ -83,11 +83,7 @@ export interface InputSwitchPassThroughAttributes { * Defines current inline state in InputSwitch component. */ export interface InputSwitchState { - /** - * Current focus state as a boolean. - * @defaultValue false - */ - focused: boolean; + [key: string]: any; } /** @@ -114,6 +110,15 @@ export interface InputSwitchProps { * @defaultValue false */ disabled?: boolean | undefined; + /** + * When present, it specifies that an input field is read-only. + * @default false + */ + readonly?: boolean | undefined; + /** + * Index of the element in tabbing order. + */ + tabindex?: number | undefined; /** * Identifier of the underlying input element. */ @@ -155,6 +160,22 @@ export interface InputSwitchProps { unstyled?: boolean; } +/** + * Defines current options in InputSwitch component. + */ +export interface InputSwitchContext { + /** + * Current checked state of the item as a boolean. + * @defaultValue false + */ + checked: boolean; + /** + * Current disabled state of the item as a boolean. + * @defaultValue false + */ + disabled: boolean; +} + export interface InputSwitchSlots {} /** @@ -166,21 +187,21 @@ export interface InputSwitchEmits { * @param {boolean} value - New value. */ 'update:modelValue'(value: boolean): void; - /** - * Callback to invoke on click. - * @param {Event} event - Browser event. - */ - click(event: Event): 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; } /** diff --git a/components/lib/multiselect/MultiSelect.d.ts b/components/lib/multiselect/MultiSelect.d.ts index 9df096b73..1fd033573 100755 --- a/components/lib/multiselect/MultiSelect.d.ts +++ b/components/lib/multiselect/MultiSelect.d.ts @@ -145,10 +145,6 @@ export interface MultiSelectPassThroughOptions { * Used to pass attributes to the header's DOM element. */ header?: MultiSelectPassThroughOptionType; - /** - * Used to pass attributes to the header checkbox container's DOM element. - */ - headerCheckboxContainer?: MultiSelectPassThroughOptionType; /** * Used to pass attributes to the header checkbox's DOM element. */ @@ -195,17 +191,9 @@ export interface MultiSelectPassThroughOptions { */ item?: MultiSelectPassThroughOptionType; /** - * Used to pass attributes to the checkbox container's DOM element. + * Used to pass attributes to the item checkbox's DOM element. */ - checkboxContainer?: MultiSelectPassThroughOptionType; - /** - * Used to pass attributes to the checkbox's DOM element. - */ - checkbox?: MultiSelectPassThroughOptionType; - /** - * Used to pass attributes to the checkbox icon's DOM element. - */ - checkboxIcon?: MultiSelectPassThroughOptionType; + itemCheckbox?: MultiSelectPassThroughOptionType; /** * Used to pass attributes to the option's DOM element. */ @@ -214,10 +202,6 @@ export interface MultiSelectPassThroughOptions { * Used to pass attributes to the emptyMessage's DOM element. */ emptyMessage?: MultiSelectPassThroughOptionType; - /** - * Used to pass attributes to the hidden input wrapper's DOM element. - */ - hiddenInputWrapper?: MultiSelectPassThroughOptionType; /** * Used to pass attributes to the hidden input's DOM element. */ diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue index 3d7f8ef7c..1750a3f21 100755 --- a/components/lib/multiselect/MultiSelect.vue +++ b/components/lib/multiselect/MultiSelect.vue @@ -68,16 +68,12 @@ >
-
-
- -
-
- - - -
-
+ + +
-
-
- - - -
-
+ + + {{ getOptionLabel(option) }} @@ -191,6 +186,7 @@ diff --git a/components/lib/multiselect/style/MultiSelectStyle.js b/components/lib/multiselect/style/MultiSelectStyle.js index ee1ca89d0..ea29d859c 100644 --- a/components/lib/multiselect/style/MultiSelectStyle.js +++ b/components/lib/multiselect/style/MultiSelectStyle.js @@ -148,21 +148,6 @@ const classes = { } ], header: 'p-multiselect-header', - headerCheckboxContainer: ({ instance }) => [ - 'p-checkbox p-component', - { - 'p-checkbox-checked': instance.allSelected, - 'p-checkbox-focused': instance.headerCheckboxFocused - } - ], - headerCheckbox: ({ instance }) => [ - 'p-checkbox-box', - { - 'p-highlight': instance.allSelected, - 'p-focus': instance.headerCheckboxFocused - } - ], - headerCheckboxIcon: 'p-checkbox-icon', filterContainer: 'p-multiselect-filter-container', filterInput: 'p-multiselect-filter p-inputtext p-component', filterIcon: 'p-multiselect-filter-icon', @@ -179,9 +164,6 @@ const classes = { 'p-disabled': instance.isOptionDisabled(option) } ], - checkboxContainer: 'p-checkbox p-component', - checkbox: ({ instance, option }) => ['p-checkbox-box', { 'p-highlight': instance.isSelected(option) }], - checkboxIcon: 'p-checkbox-icon', emptyMessage: 'p-multiselect-empty-message' }; diff --git a/components/lib/radiobutton/RadioButton.d.ts b/components/lib/radiobutton/RadioButton.d.ts index 418fc67cd..855beec29 100755 --- a/components/lib/radiobutton/RadioButton.d.ts +++ b/components/lib/radiobutton/RadioButton.d.ts @@ -7,7 +7,6 @@ * @module radiobutton * */ -import { InputHTMLAttributes } from 'vue'; import { ComponentHooks } from '../basecomponent'; import { PassThroughOptions } from '../passthrough'; import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; @@ -30,6 +29,10 @@ export interface RadioButtonPassThroughMethodOptions { * Defines current inline state. */ state: RadioButtonState; + /** + * Defines current options. + */ + context: RadioButtonContext; /** * Defines valid attributes. */ @@ -57,18 +60,14 @@ export interface RadioButtonPassThroughOptions { * Used to pass attributes to the input's DOM element. */ input?: RadioButtonPassThroughOptionType; + /** + * Used to pass attributes to the box's DOM element. + */ + box?: RadioButtonPassThroughOptionType; /** * Used to pass attributes to the icon's DOM element. */ icon?: RadioButtonPassThroughOptionType; - /** - * Used to pass attributes to the hidden accessible DOM element wrapper. - */ - hiddenInputWrapper?: RadioButtonPassThroughOptionType; - /** - * Used to pass attributes to the hidden accessible DOM element. - */ - hiddenInput?: RadioButtonPassThroughOptionType; /** * Used to manage all lifecycle hooks. * @see {@link BaseComponent.ComponentHooks} @@ -87,11 +86,7 @@ export interface RadioButtonPassThroughAttributes { * Defines current inline state in RadioButton component. */ export interface RadioButtonState { - /** - * Current focused state as a boolean. - * @defaultValue false - */ - focused: boolean; + [key: string]: any; } /** @@ -115,6 +110,15 @@ export interface RadioButtonProps { * @defaultValue false */ disabled?: boolean | undefined; + /** + * When present, it specifies that an input field is read-only. + * @default false + */ + readonly?: boolean | undefined; + /** + * Index of the element in tabbing order. + */ + tabindex?: number | undefined; /** * Identifier of the underlying input element. */ @@ -127,10 +131,6 @@ export interface RadioButtonProps { * Style class of the input field. */ inputClass?: 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. */ @@ -156,6 +156,22 @@ export interface RadioButtonProps { unstyled?: boolean; } +/** + * Defines current options in RadioButton component. + */ +export interface RadioButtonContext { + /** + * Current checked state of the item as a boolean. + * @defaultValue false + */ + checked: boolean; + /** + * Current disabled state of the item as a boolean. + * @defaultValue false + */ + disabled: boolean; +} + export interface RadioButtonSlots {} /** @@ -167,16 +183,21 @@ export interface RadioButtonEmits { * @param {*} value - New value. */ 'update:modelValue'(value: any): void; - /** - * Callback to invoke on radio button click. - * @param {Event} event - Browser event. - */ - click(event: Event): void; /** * Callback to invoke on radio button value change. * @param {Event} event - Browser event. */ change(event: Event): void; + /** + * 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. + */ + blur(event: Event): void; } /** diff --git a/components/lib/radiobutton/RadioButton.vue b/components/lib/radiobutton/RadioButton.vue index 208cf602d..28fa93e3f 100755 --- a/components/lib/radiobutton/RadioButton.vue +++ b/components/lib/radiobutton/RadioButton.vue @@ -1,5 +1,5 @@ - + + + @@ -59,6 +59,7 @@