diff --git a/components/lib/accordion/Accordion.d.ts b/components/lib/accordion/Accordion.d.ts index d4be5837b..0191ad9cf 100755 --- a/components/lib/accordion/Accordion.d.ts +++ b/components/lib/accordion/Accordion.d.ts @@ -90,6 +90,7 @@ export interface AccordionPassThroughOptions { tab?: AccordionTabPassThroughOptionType; /** * Used to pass attributes to AccordionTab helper components. + * @deprecated since v4. Use new structure instead. */ accordiontab?: AccordionTabPassThroughOptionType; /** @@ -115,15 +116,20 @@ export interface AccordionState { */ id: string; /** - * Current active index state. + * Current active value state. */ - d_activeIndex: number | number[]; + d_value: string | string[]; } /** * Defines valid properties in Accordion component. */ export interface AccordionProps { + /** + * Value of the active panel or an array of values in multiple mode. + * @defaultValue null + */ + value?: string | string[] | null | undefined; /** * When enabled, multiple tabs can be activated at the same time. * @defaultValue false @@ -132,6 +138,7 @@ export interface AccordionProps { /** * Index of the active tab or an array of indexes in multiple mode. * @defaultValue null + * @deprecated since v4. Use value property instead. */ activeIndex?: number | number[] | null | undefined; /** @@ -200,24 +207,33 @@ export interface AccordionSlots { * Defines valid emits in Accordion component. */ export interface AccordionEmits { + /** + * Emitted when the active panel changes. + * @param {string | string[] | null | undefined} value - Value of new active panel. + */ + 'update:value'(value: string | string[] | null | undefined): void; /** * Emitted when the active tab changes. * @param {number | undefined} value - Index of new active tab. + * @deprecated since v4. Use update:value emit instead. */ 'update:activeIndex'(value: number | undefined): void; /** * Callback to invoke when a tab gets expanded. * @param {AccordionTabOpenEvent} event - Custom tab open event. + * @deprecated since v4. */ 'tab-open'(event: AccordionTabOpenEvent): void; /** * Callback to invoke when an active tab is collapsed by clicking on the header. * @param {AccordionTabCloseEvent} event - Custom tab close event. + * @deprecated since v4. */ 'tab-close'(event: AccordionTabCloseEvent): void; /** * Callback to invoke when an active tab is clicked. * @param {AccordionClickEvent} event - Custom tab click event. + * @deprecated since v4. */ 'tab-click'(event: AccordionClickEvent): void; } diff --git a/components/lib/accordion/Accordion.vue b/components/lib/accordion/Accordion.vue index e9fb3fa53..9b66452fb 100755 --- a/components/lib/accordion/Accordion.vue +++ b/components/lib/accordion/Accordion.vue @@ -1,63 +1,39 @@ diff --git a/components/lib/accordion/BaseAccordion.vue b/components/lib/accordion/BaseAccordion.vue index 3838578c3..fb6d33dbc 100644 --- a/components/lib/accordion/BaseAccordion.vue +++ b/components/lib/accordion/BaseAccordion.vue @@ -6,18 +6,26 @@ export default { name: 'BaseAccordion', extends: BaseComponent, props: { + value: { + type: [String, Array], + default: undefined + }, multiple: { type: Boolean, default: false }, - activeIndex: { - type: [Number, Array], - default: null - }, lazy: { type: Boolean, default: false }, + tabindex: { + type: Number, + default: 0 + }, + selectOnFocus: { + type: Boolean, + default: false + }, expandIcon: { type: String, default: undefined @@ -26,18 +34,16 @@ export default { type: String, default: undefined }, - tabindex: { - type: Number, - default: 0 - }, - selectOnFocus: { - type: Boolean, - default: false + // @deprecated since v4. + activeIndex: { + type: [Number, Array], + default: null } }, style: AccordionStyle, provide() { return { + $pcAccordion: this, $parentInstance: this }; } diff --git a/components/lib/accordion/style/AccordionStyle.js b/components/lib/accordion/style/AccordionStyle.js index 9b75728b1..99f53b986 100644 --- a/components/lib/accordion/style/AccordionStyle.js +++ b/components/lib/accordion/style/AccordionStyle.js @@ -1,27 +1,7 @@ import BaseStyle from 'primevue/base/style'; const classes = { - root: 'p-accordion p-component', - tab: { - root: ({ instance, index }) => [ - 'p-accordion-panel', - { - 'p-accordion-panel-active': instance.isTabActive(index) - } - ], - header: ({ instance, tab, index }) => [ - 'p-accordion-panel-header', - { - 'p-accordion-panel-header-active': instance.isTabActive(index), - 'p-disabled': instance.getTabProp(tab, 'disabled') - } - ], - headerAction: 'p-accordion-panel-header-content', - headerIcon: 'p-accordion-panel-toggle-icon', - headerTitle: 'p-accordion-panel-title', - toggleableContent: 'p-accordion-panel-content-container', - content: 'p-accordion-panel-content' - } + root: 'p-accordion p-component' }; export default BaseStyle.extend({ diff --git a/components/lib/accordioncontent/AccordionContent.d.ts b/components/lib/accordioncontent/AccordionContent.d.ts new file mode 100755 index 000000000..b45e7d6b6 --- /dev/null +++ b/components/lib/accordioncontent/AccordionContent.d.ts @@ -0,0 +1,147 @@ +/** + * + * AccordionContent is a helper component for Accordion component. + * + * [Live Demo](https://www.primevue.org/accordion/) + * + * @module accordioncontent + * + */ +import { VNode } from 'vue'; +import { ComponentHooks } from '../basecomponent'; +import { PassThroughOptions } from '../passthrough'; +import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; + +export declare type AccordionContentPassThroughOptionType = AccordionContentPassThroughAttributes | ((options: AccordionContentPassThroughMethodOptions) => AccordionContentPassThroughAttributes | string) | string | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface AccordionContentPassThroughMethodOptions { + /** + * Defines instance. + */ + instance: any; + /** + * Defines valid properties. + */ + props: AccordionContentProps; + /** + * Defines current options. + */ + context: AccordionContentContext; + /** + * Defines valid attributes. + */ + attrs: any; + /** + * Defines parent options. + */ + parent: any; + /** + * Defines passthrough(pt) options in global config. + */ + global: object | undefined; +} + +/** + * Custom passthrough(pt) options. + * @see {@link AccordionContentProps.pt} + */ +export interface AccordionContentPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: AccordionContentPassThroughOptionType; + /** + * Used to pass attributes to the transition's DOM element. + */ + transition?: AccordionContentPassThroughOptionType; + /** + * Used to pass attributes to the content's DOM element. + */ + content?: AccordionContentPassThroughOptionType; + /** + * Used to manage all lifecycle hooks. + * @see {@link BaseComponent.ComponentHooks} + */ + hooks?: ComponentHooks; +} + +export interface AccordionContentPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines valid properties in AccordionContent component. + */ +export interface AccordionContentProps { + /** + * Use to change the HTML tag of root element. + * @defaultValue DIV + */ + as?: string | undefined; + /** + * When enabled, it changes the default rendered element for the one passed as a child element. + * @defaultValue false + */ + asChild?: boolean | undefined; + /** + * It generates scoped CSS variables using design tokens for the component. + */ + dt?: DesignToken; + /** + * Used to pass attributes to DOM elements inside the component. + * @type {AccordionContentPassThroughOptions} + */ + pt?: PassThrough; + /** + * Used to configure passthrough(pt) options of the component. + * @type {PassThroughOptions} + */ + ptOptions?: PassThroughOptions; +} + +/** + * Defines current options in AccordionContent component. + */ +export interface AccordionContentContext { + /** + * Whether the item is active. + */ + active: boolean; +} + +/** + * Defines valid slots in AccordionContent slots. + */ +export interface AccordionContentSlots { + /** + * Custom content template. + */ + default(): VNode[]; +} + +export interface AccordionContentEmits {} + +/** + * **PrimeVue - AccordionContent** + * + * _AccordionContent is a helper component for Accordion component._ + * + * [Live Demo](https://www.primevue.org/accordion/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group Component + * + */ +declare class AccordionContent extends ClassComponent {} + +declare module 'vue' { + export interface GlobalComponents { + AccordionContent: GlobalComponentConstructor; + } +} + +export default AccordionContent; diff --git a/components/lib/accordioncontent/AccordionContent.vue b/components/lib/accordioncontent/AccordionContent.vue new file mode 100755 index 000000000..fe5043d95 --- /dev/null +++ b/components/lib/accordioncontent/AccordionContent.vue @@ -0,0 +1,52 @@ + + + diff --git a/components/lib/accordioncontent/BaseAccordionContent.vue b/components/lib/accordioncontent/BaseAccordionContent.vue new file mode 100644 index 000000000..0d921e894 --- /dev/null +++ b/components/lib/accordioncontent/BaseAccordionContent.vue @@ -0,0 +1,20 @@ + diff --git a/components/lib/accordioncontent/package.json b/components/lib/accordioncontent/package.json new file mode 100644 index 000000000..bf9265a28 --- /dev/null +++ b/components/lib/accordioncontent/package.json @@ -0,0 +1,9 @@ +{ + "main": "./accordioncontent.cjs.js", + "module": "./accordioncontent.esm.js", + "unpkg": "./accordioncontent.min.js", + "types": "./AccordionContent.d.ts", + "browser": { + "./sfc": "./AccordionContent.vue" + } +} diff --git a/components/lib/accordioncontent/style/AccordionContentStyle.d.ts b/components/lib/accordioncontent/style/AccordionContentStyle.d.ts new file mode 100644 index 000000000..2c2b8f7e2 --- /dev/null +++ b/components/lib/accordioncontent/style/AccordionContentStyle.d.ts @@ -0,0 +1,3 @@ +import { BaseStyle } from '../../base/style/BaseStyle'; + +export interface AccordionContentStyle extends BaseStyle {} diff --git a/components/lib/accordioncontent/style/AccordionContentStyle.js b/components/lib/accordioncontent/style/AccordionContentStyle.js new file mode 100644 index 000000000..f1c38e121 --- /dev/null +++ b/components/lib/accordioncontent/style/AccordionContentStyle.js @@ -0,0 +1,11 @@ +import BaseStyle from 'primevue/base/style'; + +const classes = { + root: 'p-accordioncontent', + content: 'p-accordioncontent-content' +}; + +export default BaseStyle.extend({ + name: 'accordioncontent', + classes +}); diff --git a/components/lib/accordioncontent/style/package.json b/components/lib/accordioncontent/style/package.json new file mode 100644 index 000000000..0501c872d --- /dev/null +++ b/components/lib/accordioncontent/style/package.json @@ -0,0 +1,6 @@ +{ + "main": "./accordioncontentstyle.cjs.js", + "module": "./accordioncontentstyle.esm.js", + "unpkg": "./accordioncontentstyle.min.js", + "types": "./AccordionContentStyle.d.ts" +} diff --git a/components/lib/accordionheader/AccordionHeader.d.ts b/components/lib/accordionheader/AccordionHeader.d.ts new file mode 100755 index 000000000..c8dafd282 --- /dev/null +++ b/components/lib/accordionheader/AccordionHeader.d.ts @@ -0,0 +1,147 @@ +/** + * + * AccordionHeader is a helper component for Accordion component. + * + * [Live Demo](https://www.primevue.org/accordion/) + * + * @module accordionheader + * + */ +import { VNode } from 'vue'; +import { ComponentHooks } from '../basecomponent'; +import { PassThroughOptions } from '../passthrough'; +import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; + +export declare type AccordionHeaderPassThroughOptionType = AccordionHeaderPassThroughAttributes | ((options: AccordionHeaderPassThroughMethodOptions) => AccordionHeaderPassThroughAttributes | string) | string | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface AccordionHeaderPassThroughMethodOptions { + /** + * Defines instance. + */ + instance: any; + /** + * Defines valid properties. + */ + props: AccordionHeaderProps; + /** + * Defines current options. + */ + context: AccordionHeaderContext; + /** + * Defines valid attributes. + */ + attrs: any; + /** + * Defines parent options. + */ + parent: any; + /** + * Defines passthrough(pt) options in global config. + */ + global: object | undefined; +} + +/** + * Custom passthrough(pt) options. + * @see {@link AccordionHeaderProps.pt} + */ +export interface AccordionHeaderPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: AccordionHeaderPassThroughOptionType; + /** + * Used to pass attributes to the root's DOM element. + */ + toggleicon?: AccordionHeaderPassThroughOptionType; + /** + * Used to manage all lifecycle hooks. + * @see {@link BaseComponent.ComponentHooks} + */ + hooks?: ComponentHooks; +} + +export interface AccordionHeaderPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines valid properties in AccordionHeader component. + */ +export interface AccordionHeaderProps { + /** + * Use to change the HTML tag of root element. + * @defaultValue BUTTON + */ + as?: string | undefined; + /** + * When enabled, it changes the default rendered element for the one passed as a child element. + * @defaultValue false + */ + asChild?: boolean | undefined; + /** + * It generates scoped CSS variables using design tokens for the component. + */ + dt?: DesignToken; + /** + * Used to pass attributes to DOM elements inside the component. + * @type {AccordionHeaderPassThroughOptions} + */ + pt?: PassThrough; + /** + * Used to configure passthrough(pt) options of the component. + * @type {PassThroughOptions} + */ + ptOptions?: PassThroughOptions; +} + +/** + * Defines current options in AccordionHeader component. + */ +export interface AccordionHeaderContext { + /** + * Whether the item is active. + */ + active: boolean; +} + +/** + * Defines valid slots in AccordionHeader slots. + */ +export interface AccordionHeaderSlots { + /** + * Custom content template. + */ + default(): VNode[]; + /** + * Custom toggleicon template. + */ + toggleicon(): VNode[]; +} + +export interface AccordionHeaderEmits {} + +/** + * **PrimeVue - AccordionHeader** + * + * _AccordionHeader is a helper component for Accordion component._ + * + * [Live Demo](https://www.primevue.org/accordion/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group Component + * + */ +declare class AccordionHeader extends ClassComponent {} + +declare module 'vue' { + export interface GlobalComponents { + AccordionHeader: GlobalComponentConstructor; + } +} + +export default AccordionHeader; diff --git a/components/lib/accordionheader/AccordionHeader.vue b/components/lib/accordionheader/AccordionHeader.vue new file mode 100644 index 000000000..3977094b7 --- /dev/null +++ b/components/lib/accordionheader/AccordionHeader.vue @@ -0,0 +1,171 @@ + + + diff --git a/components/lib/accordionheader/BaseAccordionHeader.vue b/components/lib/accordionheader/BaseAccordionHeader.vue new file mode 100644 index 000000000..c3b4e550c --- /dev/null +++ b/components/lib/accordionheader/BaseAccordionHeader.vue @@ -0,0 +1,25 @@ + diff --git a/components/lib/accordionheader/package.json b/components/lib/accordionheader/package.json new file mode 100644 index 000000000..cf60922fa --- /dev/null +++ b/components/lib/accordionheader/package.json @@ -0,0 +1,9 @@ +{ + "main": "./accordionheader.cjs.js", + "module": "./accordionheader.esm.js", + "unpkg": "./accordionheader.min.js", + "types": "./AccordionHeader.d.ts", + "browser": { + "./sfc": "./AccordionHeader.vue" + } +} diff --git a/components/lib/accordionheader/style/AccordionHeaderStyle.d.ts b/components/lib/accordionheader/style/AccordionHeaderStyle.d.ts new file mode 100644 index 000000000..06a633eae --- /dev/null +++ b/components/lib/accordionheader/style/AccordionHeaderStyle.d.ts @@ -0,0 +1,3 @@ +import { BaseStyle } from '../../base/style/BaseStyle'; + +export interface AccordionHeaderStyle extends BaseStyle {} diff --git a/components/lib/accordionheader/style/AccordionHeaderStyle.js b/components/lib/accordionheader/style/AccordionHeaderStyle.js new file mode 100644 index 000000000..f414cabe7 --- /dev/null +++ b/components/lib/accordionheader/style/AccordionHeaderStyle.js @@ -0,0 +1,11 @@ +import BaseStyle from 'primevue/base/style'; + +const classes = { + root: 'p-accordionheader', + toggleicon: 'p-accordionheader-toggle-icon' +}; + +export default BaseStyle.extend({ + name: 'accordionheader', + classes +}); diff --git a/components/lib/accordionheader/style/package.json b/components/lib/accordionheader/style/package.json new file mode 100644 index 000000000..6e3e2c114 --- /dev/null +++ b/components/lib/accordionheader/style/package.json @@ -0,0 +1,6 @@ +{ + "main": "./accordionheaderstyle.cjs.js", + "module": "./accordionheaderstyle.esm.js", + "unpkg": "./accordionheaderstyle.min.js", + "types": "./AccordionHeaderStyle.d.ts" +} diff --git a/components/lib/accordionpanel/AccordionPanel.d.ts b/components/lib/accordionpanel/AccordionPanel.d.ts new file mode 100755 index 000000000..a2b73844e --- /dev/null +++ b/components/lib/accordionpanel/AccordionPanel.d.ts @@ -0,0 +1,145 @@ +/** + * + * AccordionPanel is a helper component for Accordion component. + * + * [Live Demo](https://www.primevue.org/accordion/) + * + * @module accordionpanel + * + */ +import { VNode } from 'vue'; +import { ComponentHooks } from '../basecomponent'; +import { PassThroughOptions } from '../passthrough'; +import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; + +export declare type AccordionPanelPassThroughOptionType = AccordionPanelPassThroughAttributes | ((options: AccordionPanelPassThroughMethodOptions) => AccordionPanelPassThroughAttributes | string) | string | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface AccordionPanelPassThroughMethodOptions { + /** + * Defines instance. + */ + instance: any; + /** + * Defines valid properties. + */ + props: AccordionPanelProps; + /** + * Defines current options. + */ + context: AccordionPanelContext; + /** + * Defines valid attributes. + */ + attrs: any; + /** + * Defines parent options. + */ + parent: any; + /** + * Defines passthrough(pt) options in global config. + */ + global: object | undefined; +} + +/** + * Custom passthrough(pt) options. + * @see {@link AccordionPanelProps.pt} + */ +export interface AccordionPanelPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: AccordionPanelPassThroughOptionType; + /** + * Used to manage all lifecycle hooks. + * @see {@link BaseComponent.ComponentHooks} + */ + hooks?: ComponentHooks; +} + +export interface AccordionPanelPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines valid properties in AccordionPanel component. + */ +export interface AccordionPanelProps { + /** + * Unique value of item. + */ + value: string; + /** + * Whether the item is disabled. + * @defaultValue false + */ + disabled?: boolean | undefined; + /** + * Use to change the HTML tag of root element. + * @defaultValue DIV + */ + as?: string | undefined; + /** + * When enabled, it changes the default rendered element for the one passed as a child element. + * @defaultValue false + */ + asChild?: boolean | undefined; + /** + * It generates scoped CSS variables using design tokens for the component. + */ + dt?: DesignToken; + /** + * Used to pass attributes to DOM elements inside the component. + * @type {AccordionPanelPassThroughOptions} + */ + pt?: PassThrough; + /** + * Used to configure passthrough(pt) options of the component. + * @type {PassThroughOptions} + */ + ptOptions?: PassThroughOptions; +} + +/** + * Defines current options in AccordionPanel component. + */ +export interface AccordionPanelContext { + [key: string]: any; +} + +/** + * Defines valid slots in AccordionPanel slots. + */ +export interface AccordionPanelSlots { + /** + * Custom content template. + */ + default(): VNode[]; +} + +export interface AccordionPanelEmits {} + +/** + * **PrimeVue - AccordionPanel** + * + * _AccordionPanel is a helper component for Accordion component._ + * + * [Live Demo](https://www.primevue.org/accordion/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group Component + * + */ +declare class AccordionPanel extends ClassComponent {} + +declare module 'vue' { + export interface GlobalComponents { + AccordionPanel: GlobalComponentConstructor; + } +} + +export default AccordionPanel; diff --git a/components/lib/accordionpanel/AccordionPanel.vue b/components/lib/accordionpanel/AccordionPanel.vue new file mode 100644 index 000000000..70e4df961 --- /dev/null +++ b/components/lib/accordionpanel/AccordionPanel.vue @@ -0,0 +1,40 @@ + + + diff --git a/components/lib/accordionpanel/BaseAccordionPanel.vue b/components/lib/accordionpanel/BaseAccordionPanel.vue new file mode 100644 index 000000000..a8953859f --- /dev/null +++ b/components/lib/accordionpanel/BaseAccordionPanel.vue @@ -0,0 +1,34 @@ + diff --git a/components/lib/accordionpanel/package.json b/components/lib/accordionpanel/package.json new file mode 100644 index 000000000..c69fbb117 --- /dev/null +++ b/components/lib/accordionpanel/package.json @@ -0,0 +1,9 @@ +{ + "main": "./accordionpanel.cjs.js", + "module": "./accordionpanel.esm.js", + "unpkg": "./accordionpanel.min.js", + "types": "./AccordionPanel.d.ts", + "browser": { + "./sfc": "./AccordionPanel.vue" + } +} diff --git a/components/lib/accordionpanel/style/AccordionPanelStyle.d.ts b/components/lib/accordionpanel/style/AccordionPanelStyle.d.ts new file mode 100644 index 000000000..c7e655fa9 --- /dev/null +++ b/components/lib/accordionpanel/style/AccordionPanelStyle.d.ts @@ -0,0 +1,3 @@ +import { BaseStyle } from '../../base/style/BaseStyle'; + +export interface AccordionPanelStyle extends BaseStyle {} diff --git a/components/lib/accordionpanel/style/AccordionPanelStyle.js b/components/lib/accordionpanel/style/AccordionPanelStyle.js new file mode 100644 index 000000000..6c55b0aea --- /dev/null +++ b/components/lib/accordionpanel/style/AccordionPanelStyle.js @@ -0,0 +1,16 @@ +import BaseStyle from 'primevue/base/style'; + +const classes = { + root: ({ instance, props }) => [ + 'p-accordionpanel', + { + 'p-active': instance.active, + 'p-disabled': props.disabled + } + ] +}; + +export default BaseStyle.extend({ + name: 'accordionpanel', + classes +}); diff --git a/components/lib/accordionpanel/style/package.json b/components/lib/accordionpanel/style/package.json new file mode 100644 index 000000000..0af5fd385 --- /dev/null +++ b/components/lib/accordionpanel/style/package.json @@ -0,0 +1,6 @@ +{ + "main": "./accordionpanelstyle.cjs.js", + "module": "./accordionpanelstyle.esm.js", + "unpkg": "./accordionpanelstyle.min.js", + "types": "./AccordionPanelStyle.d.ts" +} diff --git a/components/lib/accordiontab/AccordionTab.d.ts b/components/lib/accordiontab/AccordionTab.d.ts index 24c3ccf4d..2099f021e 100755 --- a/components/lib/accordiontab/AccordionTab.d.ts +++ b/components/lib/accordiontab/AccordionTab.d.ts @@ -1,4 +1,5 @@ /** + * @deprecated since v4. Use the new structure of Accordion instead. * * AccordionTab is a helper component for Accordion. * @@ -218,7 +219,9 @@ export interface AccordionTabSlots { export interface AccordionTabEmits {} /** - * **PrimeVue - Accordion** + * @deprecated since v4. Use the new structure of Accordion instead. + * + * **PrimeVue - AccordionTab** * * _AccordionTab is a helper component for Accordion.._ * diff --git a/components/lib/accordiontab/AccordionTab.vue b/components/lib/accordiontab/AccordionTab.vue index 946b8a373..cc1b58a6e 100755 --- a/components/lib/accordiontab/AccordionTab.vue +++ b/components/lib/accordiontab/AccordionTab.vue @@ -8,6 +8,9 @@ import BaseAccordionTab from './BaseAccordionTab.vue'; export default { name: 'AccordionTab', extends: BaseAccordionTab, - inheritAttrs: false + inheritAttrs: false, + mounted() { + console.warn('Deprecated since v4. Use the new structure of Accordion instead.'); + } }; diff --git a/components/lib/themes/primeone/base/accordion/index.js b/components/lib/themes/primeone/base/accordion/index.js index f2076393e..08ef0b67b 100644 --- a/components/lib/themes/primeone/base/accordion/index.js +++ b/components/lib/themes/primeone/base/accordion/index.js @@ -1,13 +1,21 @@ export default { css: ({ dt }) => ` -.p-accordion-panel-header-content { +.p-accordionpanel { + display: flex; + flex-direction: column; + border-bottom: 1px solid ${dt('accordion.content.border.color')}; +} + +.p-accordionpanel:last-child { + border-bottom: 0 none; +} + +.p-accordionheader { + all: unset; cursor: pointer; display: flex; - flex-direction: row-reverse; - justify-content: space-between; align-items: center; - user-select: none; - text-decoration: none; + justify-content: space-between; padding: 1.125rem 1.125rem 1.125rem 1.125rem; color: ${dt('accordion.header.color')}; background: ${dt('accordion.header.background')}; @@ -17,43 +25,23 @@ export default { outline-color: transparent; } -.p-accordion-panel-header-text { - line-height: 1; -} - -.p-accordion-panel-header:not(.p-disabled) .p-accordion-panel-header-content:focus-visible { +.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible { outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline-offset: -2px; } -.p-accordion-panel-header:not(.p-accordion-panel-header-active):not(.p-disabled):hover .p-accordion-panel-header-content { +.p-accordionpanel:not(.p-active):not(.p-disabled):hover .p-accordionheader { color: ${dt('accordion.header.hover.color')} } -.p-accordion-panel-header:not(.p-disabled).p-accordion-panel-header-active .p-accordion-panel-header-content { +.p-accordionpanel:not(.p-disabled).p-active .p-accordionheader { color: ${dt('accordion.header.active.color')} } -.p-accordion-panel-toggle-icon { - transform: rotate(90deg); -} - -.p-accordion-panel-header-active .p-accordion-panel-toggle-icon { - transform: rotate(-180deg); -} - -.p-accordion-panel-content { +.p-accordioncontent-content { padding: 0 1.125rem 1.125rem 1.125rem; background: color: ${dt('accordion.content.background')} color: ${dt('accordion.content.color')} } - -.p-accordion-panel { - border-bottom: 1px solid ${dt('accordion.content.border.color')}; -} - -.p-accordion-panel:last-child { - border-bottom: 0 none -} ` }; diff --git a/modules/nuxt-primevue/runtime/core/components/index.js b/modules/nuxt-primevue/runtime/core/components/index.js index 00d4d6eca..24d0980ed 100644 --- a/modules/nuxt-primevue/runtime/core/components/index.js +++ b/modules/nuxt-primevue/runtime/core/components/index.js @@ -38,7 +38,30 @@ const button = ['Button', 'ButtonGroup', 'SpeedDial', 'SplitButton']; const data = ['Column', 'Row', 'ColumnGroup', 'DataTable', 'DataView', 'OrderList', 'OrganizationChart', 'Paginator', 'PickList', 'Tree', 'TreeTable', 'Timeline', 'VirtualScroller']; -const panel = ['Accordion', 'AccordionTab', 'Card', 'DeferredContent', 'Divider', 'Fieldset', 'Panel', 'ScrollPanel', 'Splitter', 'SplitterPanel', 'Stepper', 'StepperPanel', 'TabView', 'Tabs', 'TabList', 'Tab', 'TabPanels', 'TabPanel', 'Toolbar']; +const panel = [ + 'Accordion', + 'AccordionPanel', + 'AccordionHeader', + 'AccordionContent', + 'AccordionTab', + 'Card', + 'DeferredContent', + 'Divider', + 'Fieldset', + 'Panel', + 'ScrollPanel', + 'Splitter', + 'SplitterPanel', + 'Stepper', + 'StepperPanel', + 'TabView', + 'Tabs', + 'TabList', + 'Tab', + 'TabPanels', + 'TabPanel', + 'Toolbar' +]; const overlay = [ { name: 'ConfirmDialog', use: { as: 'ConfirmationService' } }, diff --git a/rollup.config.js b/rollup.config.js index 59a1bc99b..d404b0953 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -70,6 +70,9 @@ const CORE_STYLE_DEPENDENCIES = { 'primevue/base/style': 'primevue.base.style', 'primevue/basecomponent/style': 'primevue.basecomponent.style', 'primevue/accordion/style': 'primevue.accordion.style', + 'primevue/accordionpanel/style': 'primevue.accordionpanel.style', + 'primevue/accordionheader/style': 'primevue.accordionheader.style', + 'primevue/accordioncontent/style': 'primevue.accordioncontent.style', 'primevue/accordiontab/style': 'primevue.accordiontab.style', 'primevue/animateonscroll/style': 'primevue.animateonscroll.style', 'primevue/autocomplete/style': 'primevue.autocomplete.style', @@ -282,6 +285,9 @@ const CORE_DEPENDENCIES = { 'primevue/drawer': 'primevue.drawer', 'primevue/datepicker': 'primevue.datepicker', 'primevue/select': 'primevue.select', + 'primevue/accordionpanel': 'primevue.accordionpanel', + 'primevue/accordionheader': 'primevue.accordionheader', + 'primevue/accordioncontent': 'primevue.accordioncontent', ...CORE_PASSTHROUGH_DEPENDENCIES, ...CORE_THEME_DEPENDENCIES };