From fd7245da44072e77dd5d053b42c4ae3788bf8c49 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Wed, 20 Mar 2024 10:02:27 +0300 Subject: [PATCH] Refactor #5437 - For DataViewLayoutOptions --- .../DataViewLayoutOptions.d.ts | 41 ++++++++----------- .../DataViewLayoutOptions.vue | 31 +++++--------- .../style/DataViewLayoutOptionsStyle.js | 14 +------ components/lib/selectbutton/SelectButton.d.ts | 14 +++---- components/lib/selectbutton/SelectButton.vue | 8 +++- nuxt-vite.config.js | 1 + 6 files changed, 44 insertions(+), 65 deletions(-) diff --git a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts index 27e2b3f415..05e50c072d 100755 --- a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts +++ b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts @@ -10,6 +10,7 @@ import { VNode } from 'vue'; import { ComponentHooks } from '../basecomponent'; import { PassThroughOptions } from '../passthrough'; +import { SelectButtonPassThroughOptions } from '../selectbutton'; import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; export declare type DataViewLayoutOptionsPassThroughOptionType = @@ -56,24 +57,9 @@ export interface DataViewLayoutOptionsPassThroughMethodOptions { export interface DataViewLayoutOptionsPassThroughOptions { /** * Used to pass attributes to the root's DOM element. + * @see {@link SelectButtonPassThroughOptions} */ - root?: DataViewLayoutOptionsPassThroughOptionType; - /** - * Used to pass attributes to the list button's DOM element. - */ - listButton?: DataViewLayoutOptionsPassThroughOptionType; - /** - * Used to pass attributes to the list icon's DOM element. - */ - listIcon?: DataViewLayoutOptionsPassThroughOptionType; - /** - * Used to pass attributes to the grid button's DOM element. - */ - gridButton?: DataViewLayoutOptionsPassThroughOptionType; - /** - * Used to pass attributes to the grid icon's DOM element. - */ - gridIcon?: DataViewLayoutOptionsPassThroughOptionType; + root?: SelectButtonPassThroughOptions; /** * Used to manage all lifecycle hooks. * @see {@link BaseComponent.ComponentHooks} @@ -93,15 +79,24 @@ export interface DataViewLayoutOptionsPassThroughAttributes { */ export interface DataViewLayoutOptionsState { /** - * Current list button pressed state as a boolean. - * @defaultValue false + * Default options of the component. + * @defaultValue ['list', 'grid'] + */ + options: string[]; +} + +/** + * Custom shared passthrough(pt) option method. + */ +export interface DataViewLayoutOptionsSharedPassThroughMethodOptions { + /** + * Defines valid properties. */ - isListButtonPressed: boolean; + props: DataViewLayoutOptionsProps; /** - * Current grid button pressed state as a boolean. - * @defaultValue false + * Defines current inline state. */ - isGridButtonPressed: boolean; + state: DataViewLayoutOptionsState; } /** diff --git a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue index ab5ee9633d..da76b5e3a3 100755 --- a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue +++ b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue @@ -1,21 +1,20 @@ diff --git a/components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.js b/components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.js index 17bfca4722..1ce569e3d2 100644 --- a/components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.js +++ b/components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.js @@ -1,19 +1,7 @@ import BaseStyle from 'primevue/base/style'; const classes = { - root: 'p-dataview-layout-options p-selectbutton p-button-group', - listButton: ({ props }) => [ - 'p-button p-button-icon-only', - { - 'p-highlight': props.modelValue === 'list' - } - ], - gridButton: ({ props }) => [ - 'p-button p-button-icon-only', - { - 'p-highlight': props.modelValue === 'grid' - } - ] + root: 'p-dataview-layout-options' }; export default BaseStyle.extend({ diff --git a/components/lib/selectbutton/SelectButton.d.ts b/components/lib/selectbutton/SelectButton.d.ts index 4b312005cf..482a0b2d33 100755 --- a/components/lib/selectbutton/SelectButton.d.ts +++ b/components/lib/selectbutton/SelectButton.d.ts @@ -12,12 +12,12 @@ import { ComponentHooks } from '../basecomponent'; import { PassThroughOptions } from '../passthrough'; import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; -export declare type SelectButtonPassThroughOptionType = SelectButtonPassThroughAttributes | ((options: SelectButtonPassThroughMethodOptions) => SelectButtonPassThroughAttributes | string) | string | null | undefined; +export declare type SelectButtonPassThroughOptionType = SelectButtonPassThroughAttributes | ((options: SelectButtonPassThroughMethodOptions) => SelectButtonPassThroughAttributes | string) | string | null | undefined; /** * Custom passthrough(pt) option method. */ -export interface SelectButtonPassThroughMethodOptions { +export interface SelectButtonPassThroughMethodOptions { /** * Defines instance. */ @@ -41,7 +41,7 @@ export interface SelectButtonPassThroughMethodOptions { /** * Defines parent options. */ - parent: any; + parent: T; /** * Defines passthrough(pt) options in global config. */ @@ -52,19 +52,19 @@ export interface SelectButtonPassThroughMethodOptions { * Custom passthrough(pt) options. * @see {@link SelectButtonProps.pt} */ -export interface SelectButtonPassThroughOptions { +export interface SelectButtonPassThroughOptions { /** * Used to pass attributes to the root's DOM element. */ - root?: SelectButtonPassThroughOptionType; + root?: SelectButtonPassThroughOptionType; /** * Used to pass attributes to the button's DOM element. */ - button?: SelectButtonPassThroughOptionType; + button?: SelectButtonPassThroughOptionType; /** * Used to pass attributes to the label's DOM element. */ - label?: SelectButtonPassThroughOptionType; + label?: SelectButtonPassThroughOptionType; /** * Used to manage all lifecycle hooks. * @see {@link BaseComponent.ComponentHooks} diff --git a/components/lib/selectbutton/SelectButton.vue b/components/lib/selectbutton/SelectButton.vue index b086ea5144..7defecf645 100755 --- a/components/lib/selectbutton/SelectButton.vue +++ b/components/lib/selectbutton/SelectButton.vue @@ -5,7 +5,7 @@ :key="getOptionRenderKey(option)" v-ripple :tabindex="findTabindex(option, i)" - :aria-label="getOptionLabel(option)" + :aria-label="getOptionLabel(option, i)" :role="multiple ? 'checkbox' : 'radio'" :aria-checked="isSelected(option)" :aria-disabled="isOptionDisabled(option)" @@ -54,7 +54,11 @@ export default { } } }, - getOptionLabel(option) { + getOptionLabel(option, index) { + if (this.$parent.$name === 'DataViewLayoutOptions') { + return index === 0 ? this.$parent.listViewAriaLabel : this.$parent.gridViewAriaLabel; + } + return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option; }, getOptionValue(option) { diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js index fb708c8a7f..f0d74d128c 100644 --- a/nuxt-vite.config.js +++ b/nuxt-vite.config.js @@ -296,6 +296,7 @@ export default { 'primevue/message': path.resolve(__dirname, './components/lib/message/Message.vue'), 'primevue/tree': path.resolve(__dirname, './components/lib/tree/Tree.vue'), 'primevue/badge': path.resolve(__dirname, './components/lib/badge/Badge.vue'), + 'primevue/selectbutton': path.resolve(__dirname, './components/lib/selectbutton/SelectButton.vue'), 'primevue/confirmationeventbus': path.resolve(__dirname, './components/lib/confirmationeventbus/ConfirmationEventBus.js'), 'primevue/toasteventbus': path.resolve(__dirname, './components/lib/toasteventbus/ToastEventBus.js'), 'primevue/overlayeventbus': path.resolve(__dirname, './components/lib/overlayeventbus/OverlayEventBus.js'),