From c80c3ad0eae1576cb812b113c71356bc02e9e902 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Fri, 19 Apr 2024 14:51:57 +0100 Subject: [PATCH] Fixed #5621 - New Component: Tabs --- assets/menu/menu.json | 4 + components/lib/tab/BaseTab.vue | 33 + components/lib/tab/Tab.d.ts | 148 ++ components/lib/tab/Tab.vue | 166 +++ components/lib/tab/package.json | 9 + components/lib/tab/style/TabStyle.d.ts | 3 + components/lib/tab/style/TabStyle.js | 16 + components/lib/tab/style/package.json | 6 + components/lib/tablist/BaseTabList.vue | 17 + components/lib/tablist/TabList.d.ts | 142 ++ components/lib/tablist/TabList.vue | 159 +++ components/lib/tablist/package.json | 9 + .../lib/tablist/style/TabListStyle.d.ts | 3 + components/lib/tablist/style/TabListStyle.js | 19 + components/lib/tablist/style/package.json | 6 + components/lib/tabpanel/BaseTabPanel.vue | 14 + components/lib/tabpanel/TabPanel.d.ts | 43 +- components/lib/tabpanel/TabPanel.vue | 48 +- .../lib/tabpanel/style/TabPanelStyle.js | 12 +- components/lib/tabpanels/BaseTabPanels.vue | 16 + components/lib/tabpanels/TabPanels.d.ts | 126 ++ components/lib/tabpanels/TabPanels.vue | 15 + components/lib/tabpanels/package.json | 9 + .../lib/tabpanels/style/TabPanelsStyle.d.ts | 3 + .../lib/tabpanels/style/TabPanelsStyle.js | 10 + components/lib/tabpanels/style/package.json | 6 + components/lib/tabs/BaseTabs.vue | 58 + components/lib/tabs/Tabs.d.ts | 202 +++ components/lib/tabs/Tabs.vue | 42 + components/lib/tabs/package.json | 9 + components/lib/tabs/style/TabsStyle.d.ts | 3 + components/lib/tabs/style/TabsStyle.js | 16 + components/lib/tabs/style/package.json | 6 + components/lib/themes/primeone/base/index.js | 2 + .../lib/themes/primeone/base/tabs/index.js | 94 ++ .../themes/primeone/base/tabs/package.json | 6 + .../lib/themes/primeone/presets/aura/index.js | 2 + .../primeone/presets/aura/tabs/index.js | 50 + .../primeone/presets/aura/tabs/package.json | 6 + doc/common/apidoc/index.json | 1223 ++++++++++++++++- doc/tabs/AccessibilityDoc.vue | 74 + doc/tabs/BasicDoc.vue | 149 ++ doc/tabs/ControlledDoc.vue | 182 +++ doc/tabs/DisabledDoc.vue | 151 ++ doc/tabs/DynamicDoc.vue | 102 ++ doc/tabs/ImportDoc.vue | 22 + doc/tabs/ScrollableDoc.vue | 98 ++ doc/tabs/TemplateDoc.vue | 195 +++ doc/tabs/pt/PTImage.vue | 8 + doc/tabs/pt/index.vue | 59 + doc/tabs/theming/StyledDoc.vue | 33 + doc/tabs/theming/TailwindDoc.vue | 6 + doc/tabs/theming/index.vue | 40 + .../runtime/core/components/index.js | 2 +- nuxt-vite.config.js | 6 +- pages/tabs/index.vue | 75 + rollup.config.js | 6 +- 57 files changed, 3934 insertions(+), 35 deletions(-) create mode 100644 components/lib/tab/BaseTab.vue create mode 100755 components/lib/tab/Tab.d.ts create mode 100644 components/lib/tab/Tab.vue create mode 100644 components/lib/tab/package.json create mode 100644 components/lib/tab/style/TabStyle.d.ts create mode 100644 components/lib/tab/style/TabStyle.js create mode 100644 components/lib/tab/style/package.json create mode 100644 components/lib/tablist/BaseTabList.vue create mode 100755 components/lib/tablist/TabList.d.ts create mode 100644 components/lib/tablist/TabList.vue create mode 100644 components/lib/tablist/package.json create mode 100644 components/lib/tablist/style/TabListStyle.d.ts create mode 100644 components/lib/tablist/style/TabListStyle.js create mode 100644 components/lib/tablist/style/package.json create mode 100644 components/lib/tabpanels/BaseTabPanels.vue create mode 100755 components/lib/tabpanels/TabPanels.d.ts create mode 100644 components/lib/tabpanels/TabPanels.vue create mode 100644 components/lib/tabpanels/package.json create mode 100644 components/lib/tabpanels/style/TabPanelsStyle.d.ts create mode 100644 components/lib/tabpanels/style/TabPanelsStyle.js create mode 100644 components/lib/tabpanels/style/package.json create mode 100644 components/lib/tabs/BaseTabs.vue create mode 100644 components/lib/tabs/Tabs.d.ts create mode 100644 components/lib/tabs/Tabs.vue create mode 100644 components/lib/tabs/package.json create mode 100644 components/lib/tabs/style/TabsStyle.d.ts create mode 100644 components/lib/tabs/style/TabsStyle.js create mode 100644 components/lib/tabs/style/package.json create mode 100644 components/lib/themes/primeone/base/tabs/index.js create mode 100644 components/lib/themes/primeone/base/tabs/package.json create mode 100644 components/lib/themes/primeone/presets/aura/tabs/index.js create mode 100644 components/lib/themes/primeone/presets/aura/tabs/package.json create mode 100644 doc/tabs/AccessibilityDoc.vue create mode 100644 doc/tabs/BasicDoc.vue create mode 100644 doc/tabs/ControlledDoc.vue create mode 100644 doc/tabs/DisabledDoc.vue create mode 100644 doc/tabs/DynamicDoc.vue create mode 100644 doc/tabs/ImportDoc.vue create mode 100644 doc/tabs/ScrollableDoc.vue create mode 100644 doc/tabs/TemplateDoc.vue create mode 100644 doc/tabs/pt/PTImage.vue create mode 100644 doc/tabs/pt/index.vue create mode 100644 doc/tabs/theming/StyledDoc.vue create mode 100644 doc/tabs/theming/TailwindDoc.vue create mode 100644 doc/tabs/theming/index.vue create mode 100755 pages/tabs/index.vue diff --git a/assets/menu/menu.json b/assets/menu/menu.json index 5437d765e..298e67de0 100644 --- a/assets/menu/menu.json +++ b/assets/menu/menu.json @@ -273,6 +273,10 @@ "name": "Stepper", "to": "/stepper" }, + { + "name": "Tabs", + "to": "/tabs" + }, { "name": "TabView", "to": "/tabview" diff --git a/components/lib/tab/BaseTab.vue b/components/lib/tab/BaseTab.vue new file mode 100644 index 000000000..069e88e62 --- /dev/null +++ b/components/lib/tab/BaseTab.vue @@ -0,0 +1,33 @@ + diff --git a/components/lib/tab/Tab.d.ts b/components/lib/tab/Tab.d.ts new file mode 100755 index 000000000..04a75c567 --- /dev/null +++ b/components/lib/tab/Tab.d.ts @@ -0,0 +1,148 @@ +/** + * + * Tab is a helper component for Tabs component. + * + * [Live Demo](https://www.primevue.org/tabs/) + * + * @module tab + * + */ +import { VNode } from 'vue'; +import { ComponentHooks } from '../basecomponent'; +import { PassThroughOptions } from '../passthrough'; +import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; + +export declare type TabPassThroughOptionType = TabPassThroughAttributes | ((options: TabPassThroughMethodOptions) => TabPassThroughAttributes | string) | string | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface TabPassThroughMethodOptions { + /** + * Defines instance. + */ + instance: any; + /** + * Defines valid properties. + */ + props: TabProps; + /** + * Defines current options. + */ + context: TabContext; + /** + * 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 TabProps.pt} + */ +export interface TabPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: TabPassThroughOptionType; + /** + * Used to manage all lifecycle hooks. + * @see {@link BaseComponent.ComponentHooks} + */ + hooks?: ComponentHooks; +} + +export interface TabPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines valid properties in Tab component. + */ +export interface TabProps { + /** + * Value of tab. + */ + value: string; + /** + * Whether the tab is disabled. + * @defaultValue false + */ + disabled?: boolean | undefined; + /** + * 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 {TabPassThroughOptions} + */ + pt?: PassThrough; + /** + * Used to configure passthrough(pt) options of the component. + * @type {PassThroughOptions} + */ + ptOptions?: PassThroughOptions; +} + +/** + * Defines current options in Tab component. + */ +export interface TabContext { + /** + * Whether the tab is active. + */ + active: boolean; +} + +/** + * Defines valid slots in Tab slots. + */ +export interface TabSlots { + /** + * Custom content template. + */ + default(): VNode[]; +} + +export interface TabEmits {} + +/** + * **PrimeVue - Tab** + * + * _Tab is a helper component for Tabs component._ + * + * [Live Demo](https://www.primevue.org/tabs/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group Component + * + */ +declare class Tab extends ClassComponent {} + +declare module 'vue' { + export interface GlobalComponents { + Tab: GlobalComponentConstructor; + } +} + +export default Tab; diff --git a/components/lib/tab/Tab.vue b/components/lib/tab/Tab.vue new file mode 100644 index 000000000..b6e23ca95 --- /dev/null +++ b/components/lib/tab/Tab.vue @@ -0,0 +1,166 @@ + + + diff --git a/components/lib/tab/package.json b/components/lib/tab/package.json new file mode 100644 index 000000000..6af6e5f60 --- /dev/null +++ b/components/lib/tab/package.json @@ -0,0 +1,9 @@ +{ + "main": "./tab.cjs.js", + "module": "./tab.esm.js", + "unpkg": "./tab.min.js", + "types": "./Tab.d.ts", + "browser": { + "./sfc": "./Tab.vue" + } +} diff --git a/components/lib/tab/style/TabStyle.d.ts b/components/lib/tab/style/TabStyle.d.ts new file mode 100644 index 000000000..8c45afb8a --- /dev/null +++ b/components/lib/tab/style/TabStyle.d.ts @@ -0,0 +1,3 @@ +import { BaseStyle } from '../../base/style'; + +export interface TabStyle extends BaseStyle {} diff --git a/components/lib/tab/style/TabStyle.js b/components/lib/tab/style/TabStyle.js new file mode 100644 index 000000000..4a670fa70 --- /dev/null +++ b/components/lib/tab/style/TabStyle.js @@ -0,0 +1,16 @@ +import BaseStyle from 'primevue/base/style'; + +const classes = { + root: ({ instance, props }) => [ + 'p-tab', + { + 'p-active': instance.active, + 'p-disabled': props.disabled + } + ] +}; + +export default BaseStyle.extend({ + name: 'tab', + classes +}); diff --git a/components/lib/tab/style/package.json b/components/lib/tab/style/package.json new file mode 100644 index 000000000..96a488e6e --- /dev/null +++ b/components/lib/tab/style/package.json @@ -0,0 +1,6 @@ +{ + "main": "./tabstyle.cjs.js", + "module": "./tabstyle.esm.js", + "unpkg": "./tabstyle.min.js", + "types": "./TabStyle.d.ts" +} diff --git a/components/lib/tablist/BaseTabList.vue b/components/lib/tablist/BaseTabList.vue new file mode 100644 index 000000000..5c8acd03a --- /dev/null +++ b/components/lib/tablist/BaseTabList.vue @@ -0,0 +1,17 @@ + diff --git a/components/lib/tablist/TabList.d.ts b/components/lib/tablist/TabList.d.ts new file mode 100755 index 000000000..8249b7e4f --- /dev/null +++ b/components/lib/tablist/TabList.d.ts @@ -0,0 +1,142 @@ +/** + * + * TabList is a helper component for Tabs component. + * + * [Live Demo](https://www.primevue.org/tabs/) + * + * @module tablist + * + */ +import { VNode } from 'vue'; +import { ComponentHooks } from '../basecomponent'; +import { PassThroughOptions } from '../passthrough'; +import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; + +export declare type TabListPassThroughOptionType = TabListPassThroughAttributes | ((options: TabListPassThroughMethodOptions) => TabListPassThroughAttributes | string) | string | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface TabListPassThroughMethodOptions { + /** + * Defines instance. + */ + instance: any; + /** + * Defines valid properties. + */ + props: TabListProps; + /** + * Defines current options. + */ + context: TabListContext; + /** + * 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 TabListProps.pt} + */ +export interface TabListPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: TabListPassThroughOptionType; + /** + * Used to pass attributes to the previous button component. + */ + previousButton?: TabListPassThroughOptionType; + /** + * Used to pass attributes to the next button component. + */ + nextButton?: TabListPassThroughOptionType; + /** + * Used to pass attributes to the list's DOM element. + */ + content?: TabListPassThroughOptionType; + /** + * Used to pass attributes to the inkbar's DOM element. + */ + inkbar?: TabListPassThroughOptionType; + /** + * Used to manage all lifecycle hooks. + * @see {@link BaseComponent.ComponentHooks} + */ + hooks?: ComponentHooks; +} + +export interface TabListPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines valid properties in TabList component. + */ +export interface TabListProps { + /** + * It generates scoped CSS variables using design tokens for the component. + */ + dt?: DesignToken; + /** + * Used to pass attributes to DOM elements inside the component. + * @type {TabListPassThroughOptions} + */ + pt?: PassThrough; + /** + * Used to configure passthrough(pt) options of the component. + * @type {PassThroughOptions} + */ + ptOptions?: PassThroughOptions; +} + +/** + * Defines current options in TabList component. + */ +export interface TabListContext { + [key: string]: any; +} + +/** + * Defines valid slots in TabList slots. + */ +export interface TabListSlots { + /** + * Custom content template. + */ + default(): VNode[]; +} + +export interface TabListEmits {} + +/** + * **PrimeVue - TabList** + * + * _TabList is a helper component for Tabs component._ + * + * [Live Demo](https://www.primevue.org/tabs/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group Component + * + */ +declare class TabList extends ClassComponent {} + +declare module 'vue' { + export interface GlobalComponents { + TabList: GlobalComponentConstructor; + } +} + +export default TabList; diff --git a/components/lib/tablist/TabList.vue b/components/lib/tablist/TabList.vue new file mode 100644 index 000000000..5c842c6da --- /dev/null +++ b/components/lib/tablist/TabList.vue @@ -0,0 +1,159 @@ + + + diff --git a/components/lib/tablist/package.json b/components/lib/tablist/package.json new file mode 100644 index 000000000..6af6e5f60 --- /dev/null +++ b/components/lib/tablist/package.json @@ -0,0 +1,9 @@ +{ + "main": "./tab.cjs.js", + "module": "./tab.esm.js", + "unpkg": "./tab.min.js", + "types": "./Tab.d.ts", + "browser": { + "./sfc": "./Tab.vue" + } +} diff --git a/components/lib/tablist/style/TabListStyle.d.ts b/components/lib/tablist/style/TabListStyle.d.ts new file mode 100644 index 000000000..bc782dda2 --- /dev/null +++ b/components/lib/tablist/style/TabListStyle.d.ts @@ -0,0 +1,3 @@ +import { BaseStyle } from '../../base/style'; + +export interface TabListStyle extends BaseStyle {} diff --git a/components/lib/tablist/style/TabListStyle.js b/components/lib/tablist/style/TabListStyle.js new file mode 100644 index 000000000..e06ddd208 --- /dev/null +++ b/components/lib/tablist/style/TabListStyle.js @@ -0,0 +1,19 @@ +import BaseStyle from 'primevue/base/style'; + +const classes = { + root: 'p-tablist', + content: ({ instance }) => [ + 'p-tablist-content', + { + 'p-tablist-scroll-container': instance.$pcTabs.scrollable + } + ], + inkbar: 'p-tablist-ink-bar', + previousButton: 'p-tablist-prev-button p-tablist-navigator', + nextButton: 'p-tablist-next-button p-tablist-navigator' +}; + +export default BaseStyle.extend({ + name: 'tablist', + classes +}); diff --git a/components/lib/tablist/style/package.json b/components/lib/tablist/style/package.json new file mode 100644 index 000000000..e9170a7df --- /dev/null +++ b/components/lib/tablist/style/package.json @@ -0,0 +1,6 @@ +{ + "main": "./tabliststyle.cjs.js", + "module": "./tabliststyle.esm.js", + "unpkg": "./tabliststyle.min.js", + "types": "./TabListStyle.d.ts" +} diff --git a/components/lib/tabpanel/BaseTabPanel.vue b/components/lib/tabpanel/BaseTabPanel.vue index 8c428a3ce..ad35956ac 100644 --- a/components/lib/tabpanel/BaseTabPanel.vue +++ b/components/lib/tabpanel/BaseTabPanel.vue @@ -6,6 +6,20 @@ export default { name: 'BaseTabPanel', extends: BaseComponent, props: { + // in Tabs + value: { + type: String, + default: undefined + }, + as: { + type: String, + default: 'DIV' + }, + asChild: { + type: Boolean, + default: false + }, + // in TabView header: null, headerStyle: null, headerClass: null, diff --git a/components/lib/tabpanel/TabPanel.d.ts b/components/lib/tabpanel/TabPanel.d.ts index c17411867..0c0875fb8 100755 --- a/components/lib/tabpanel/TabPanel.d.ts +++ b/components/lib/tabpanel/TabPanel.d.ts @@ -1,8 +1,8 @@ /** * - * TabPanel is a helper component for TabPanel component. + * TabPanel is a helper component for Tabs component. * - * [Live Demo](https://www.primevue.org/tabview/) + * [Live Demo](https://www.primevue.org/tabs/) * * @module tabpanel * @@ -55,18 +55,22 @@ export interface TabPanelPassThroughOptions { root?: TabPanelPassThroughOptionType; /** * Used to pass attributes to the header's DOM element. + * @deprecated since v4. Only supported by TabView. */ header?: TabPanelPassThroughOptionType; /** * Used to pass attributes to the header action's DOM element. + * @deprecated since v4. Only supported by TabView. */ headerAction?: TabPanelPassThroughOptionType; /** * Used to pass attributes to the title's DOM element. + * @deprecated since v4. Only supported by TabView. */ headerTitle?: TabPanelPassThroughOptionType; /** * Used to pass attributes to the list's DOM element. + * @deprecated since v4. Only supported by TabView. */ content?: TabPanelPassThroughOptionType; /** @@ -84,44 +88,64 @@ export interface TabPanelPassThroughAttributes { * Defines valid properties in TabPanel component. */ export interface TabPanelProps { + /** + * Value of tabpanel. + */ + value: string; + /** + * 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; /** * Orientation of tab headers. + * @deprecated since v4. Only supported by TabView. */ header?: string | undefined; /** * Inline style of the tab header. + * @deprecated since v4. Only supported by TabView. */ headerStyle?: any; /** * Style class of the tab header. + * @deprecated since v4. Only supported by TabView. */ headerClass?: any; /** * Used to pass all properties of the HTMLLiElement to the tab header. - * @deprecated since v3.26.0. Use 'pt' property instead. + * @deprecated since v4. Only supported by TabView. */ headerProps?: LiHTMLAttributes | undefined; /** * Used to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header. - * @deprecated since v3.26.0. Use 'pt' property instead. + * @deprecated since v4. Only supported by TabView. */ headerActionProps?: AnchorHTMLAttributes | undefined; /** * Inline style of the tab content. + * @deprecated since v4. Only supported by TabView. */ contentStyle?: any; /** * Style class of the tab content. + * @deprecated since v4. Only supported by TabView. */ contentClass?: any; /** * Used to pass all properties of the HTMLDivElement to the tab content. - * @deprecated since v3.26.0. Use 'pt' property instead. + * @deprecated since v4. Only supported by TabView. */ contentProps?: HTMLAttributes | undefined; /** * Whether the tab is disabled. * @defaultValue false + * @deprecated since v4. Only supported by TabView. */ disabled?: boolean | undefined; /** @@ -146,18 +170,22 @@ export interface TabPanelProps { export interface TabPanelContext { /** * Current index of the tab. + * @deprecated since v4. Only supported by TabView. */ index: number; /** * Count of tabs + * @deprecated since v4. Only supported by TabView. */ count: number; /** * Whether the tab is first. + * @deprecated since v4. Only supported by TabView. */ first: boolean; /** * Whether the tab is last. + * @deprecated since v4. Only supported by TabView. */ last: boolean; /** @@ -176,6 +204,7 @@ export interface TabPanelSlots { default(): VNode[]; /** * Custom header template. + * @deprecated since v4. Only supported by TabView. */ header(): VNode[]; } @@ -185,9 +214,9 @@ export interface TabPanelEmits {} /** * **PrimeVue - TabPanel** * - * _TabPanel is a helper component for TabView component._ + * _TabPanel is a helper component for Tabs component._ * - * [Live Demo](https://www.primevue.org/tabview/) + * [Live Demo](https://www.primevue.org/tabs/) * --- --- * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) * diff --git a/components/lib/tabpanel/TabPanel.vue b/components/lib/tabpanel/TabPanel.vue index 90790ba53..ba2cafc2b 100755 --- a/components/lib/tabpanel/TabPanel.vue +++ b/components/lib/tabpanel/TabPanel.vue @@ -1,12 +1,56 @@ diff --git a/components/lib/tabpanel/style/TabPanelStyle.js b/components/lib/tabpanel/style/TabPanelStyle.js index 012759215..724ea4281 100644 --- a/components/lib/tabpanel/style/TabPanelStyle.js +++ b/components/lib/tabpanel/style/TabPanelStyle.js @@ -1,5 +1,15 @@ import BaseStyle from 'primevue/base/style'; +const classes = { + root: ({ instance }) => [ + 'p-tabpanel', + { + 'p-active': instance.active + } + ] +}; + export default BaseStyle.extend({ - name: 'tabpanel' + name: 'tabpanel', + classes }); diff --git a/components/lib/tabpanels/BaseTabPanels.vue b/components/lib/tabpanels/BaseTabPanels.vue new file mode 100644 index 000000000..dd09b25bf --- /dev/null +++ b/components/lib/tabpanels/BaseTabPanels.vue @@ -0,0 +1,16 @@ + diff --git a/components/lib/tabpanels/TabPanels.d.ts b/components/lib/tabpanels/TabPanels.d.ts new file mode 100755 index 000000000..3288e1df2 --- /dev/null +++ b/components/lib/tabpanels/TabPanels.d.ts @@ -0,0 +1,126 @@ +/** + * + * TabPanels is a helper component for Tabs component. + * + * [Live Demo](https://www.primevue.org/tabview/) + * + * @module tabpanels + * + */ +import { VNode } from 'vue'; +import { ComponentHooks } from '../basecomponent'; +import { PassThroughOptions } from '../passthrough'; +import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; + +export declare type TabPanelsPassThroughOptionType = TabPanelsPassThroughAttributes | ((options: TabPanelsPassThroughMethodOptions) => TabPanelsPassThroughAttributes | string) | string | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface TabPanelsPassThroughMethodOptions { + /** + * Defines instance. + */ + instance: any; + /** + * Defines valid properties. + */ + props: TabPanelsProps; + /** + * Defines current options. + */ + context: TabPanelsContext; + /** + * 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 TabPanelsProps.pt} + */ +export interface TabPanelsPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: TabPanelsPassThroughOptionType; + /** + * Used to manage all lifecycle hooks. + * @see {@link BaseComponent.ComponentHooks} + */ + hooks?: ComponentHooks; +} + +export interface TabPanelsPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines valid properties in TabPanels component. + */ +export interface TabPanelsProps { + /** + * It generates scoped CSS variables using design tokens for the component. + */ + dt?: DesignToken; + /** + * Used to pass attributes to DOM elements inside the component. + * @type {TabPanelsPassThroughOptions} + */ + pt?: PassThrough; + /** + * Used to configure passthrough(pt) options of the component. + * @type {PassThroughOptions} + */ + ptOptions?: PassThroughOptions; +} + +/** + * Defines current options in TabPanels component. + */ +export interface TabPanelsContext { + [key: string]: any; +} + +/** + * Defines valid slots in TabPanels slots. + */ +export interface TabPanelsSlots { + /** + * Custom content template. + */ + default(): VNode[]; +} + +export interface TabPanelsEmits {} + +/** + * **PrimeVue - TabPanels** + * + * _TabPanels is a helper component for Tabs component._ + * + * [Live Demo](https://www.primevue.org/tabs/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group Component + * + */ +declare class TabPanels extends ClassComponent {} + +declare module 'vue' { + export interface GlobalComponents { + TabPanels: GlobalComponentConstructor; + } +} + +export default TabPanels; diff --git a/components/lib/tabpanels/TabPanels.vue b/components/lib/tabpanels/TabPanels.vue new file mode 100644 index 000000000..1eaf82091 --- /dev/null +++ b/components/lib/tabpanels/TabPanels.vue @@ -0,0 +1,15 @@ + + + diff --git a/components/lib/tabpanels/package.json b/components/lib/tabpanels/package.json new file mode 100644 index 000000000..96e599c0e --- /dev/null +++ b/components/lib/tabpanels/package.json @@ -0,0 +1,9 @@ +{ + "main": "./tabpanels.cjs.js", + "module": "./tabpanels.esm.js", + "unpkg": "./tabpanels.min.js", + "types": "./TabPanels.d.ts", + "browser": { + "./sfc": "./TabPanels.vue" + } +} diff --git a/components/lib/tabpanels/style/TabPanelsStyle.d.ts b/components/lib/tabpanels/style/TabPanelsStyle.d.ts new file mode 100644 index 000000000..1145d89f0 --- /dev/null +++ b/components/lib/tabpanels/style/TabPanelsStyle.d.ts @@ -0,0 +1,3 @@ +import { BaseStyle } from '../../base/style'; + +export interface TabPanelsStyle extends BaseStyle {} diff --git a/components/lib/tabpanels/style/TabPanelsStyle.js b/components/lib/tabpanels/style/TabPanelsStyle.js new file mode 100644 index 000000000..9a373a3d0 --- /dev/null +++ b/components/lib/tabpanels/style/TabPanelsStyle.js @@ -0,0 +1,10 @@ +import BaseStyle from 'primevue/base/style'; + +const classes = { + root: 'p-tabpanels' +}; + +export default BaseStyle.extend({ + name: 'tabpanels', + classes +}); diff --git a/components/lib/tabpanels/style/package.json b/components/lib/tabpanels/style/package.json new file mode 100644 index 000000000..a24af094b --- /dev/null +++ b/components/lib/tabpanels/style/package.json @@ -0,0 +1,6 @@ +{ + "main": "./tabpanelsstyle.cjs.js", + "module": "./tabpanelsstyle.esm.js", + "unpkg": "./tabpanelsstyle.min.js", + "types": "./TabPanelsStyle.d.ts" +} diff --git a/components/lib/tabs/BaseTabs.vue b/components/lib/tabs/BaseTabs.vue new file mode 100644 index 000000000..a206c9d09 --- /dev/null +++ b/components/lib/tabs/BaseTabs.vue @@ -0,0 +1,58 @@ + diff --git a/components/lib/tabs/Tabs.d.ts b/components/lib/tabs/Tabs.d.ts new file mode 100644 index 000000000..435850756 --- /dev/null +++ b/components/lib/tabs/Tabs.d.ts @@ -0,0 +1,202 @@ +/** + * + * Tabs facilitates seamless switching between different views. + * + * [Live Demo](https://www.primevue.org/tabs/) + * + * @module tabs + * + */ +import { VNode } from 'vue'; +import { ComponentHooks } from '../basecomponent'; +import { ButtonProps } from '../button'; +import { PassThroughOptions } from '../passthrough'; +import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; + +export declare type TabsPassThroughOptionType = TabsPassThroughAttributes | ((options: TabsPassThroughMethodOptions) => TabsPassThroughAttributes | string) | string | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface TabsPassThroughMethodOptions { + /** + * Defines instance. + */ + instance: any; + /** + * Defines valid properties. + */ + props: TabsProps; + /** + * Defines current inline state. + */ + state: TabsState; + /** + * 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 TabsProps.pt} + */ +export interface TabsPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: TabsPassThroughOptionType; + /** + * Used to manage all lifecycle hooks. + * @see {@link BaseComponent.ComponentHooks} + */ + hooks?: ComponentHooks; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface TabsPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines current inline state in Tabs component. + */ +export interface TabsState { + /** + * Current active value state. + */ + d_value: number; + /** + * Unique id for the Tabs component. + */ + id: string; +} + +/** + * Defines valid properties in Tabs component. + */ +export interface TabsProps { + /** + * Value of the active tab. + */ + value: string; + /** + * When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css. + * @defaultValue false + */ + lazy?: boolean | undefined; + /** + * Specifies the layout of the component, valid values are 'horizontal' and 'vertical'. + * @defaultValue horizontal + */ + orientation?: 'horizontal' | 'vertical' | undefined; + /** + * When specified, enables horizontal and/or vertical scrolling. + * @defaultValue false + */ + scrollable?: boolean | undefined; + /** + * Whether to display navigation buttons in container when scrollable is enabled. + * @defaultValue true + */ + showNavigators?: boolean | undefined; + /** + * Index of the element in tabbing order. + * @defaultValue 0 + */ + tabindex?: number | undefined; + /** + * When enabled, the focused tab is activated. + * @defaultValue false + */ + selectOnFocus?: boolean | undefined; + /** + * Used to pass all properties of the HTMLButtonElement to the previous button. + */ + previousButtonProps?: ButtonProps | undefined; + /** + * Used to pass all properties of the HTMLButtonElement to the next button. + */ + nextButtonProps?: ButtonProps | 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 {TabsPassThroughOptions} + */ + pt?: PassThrough; + /** + * Used to configure passthrough(pt) options of the component. + * @type {PassThroughOptions} + */ + ptOptions?: PassThroughOptions; + /** + * When enabled, it removes component related styles in the core. + * @defaultValue false + */ + unstyled?: boolean; +} + +/** + * Defines valid slots in Tabs slots. + */ +export interface TabsSlots { + /** + * Default slot to detect TabPanel components. + */ + default(): VNode[]; + /** + * Previous button icon template for the scrollable component. + */ + previousicon(): VNode[]; + /** + * Next button icon template for the scrollable component. + */ + nexticon(): VNode[]; +} + +/** + * Defines valid emits in Tabs component. + */ +export interface TabsEmits { + /** + * Emitted when the value changes. + * @param {string} value - Current value. + */ + 'update:value'(value: number): void; +} + +/** + * + * **PrimeVue - Tabs** + * + * _Tabs facilitates seamless switching between different views._ + * + * [Live Demo](https://www.primevue.org/tabs/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group Component + * + */ +declare class Tabs extends ClassComponent {} + +declare module 'vue' { + export interface GlobalComponents { + Tabs: GlobalComponentConstructor; + } +} + +export default Tabs; diff --git a/components/lib/tabs/Tabs.vue b/components/lib/tabs/Tabs.vue new file mode 100644 index 000000000..e1591e917 --- /dev/null +++ b/components/lib/tabs/Tabs.vue @@ -0,0 +1,42 @@ + + + diff --git a/components/lib/tabs/package.json b/components/lib/tabs/package.json new file mode 100644 index 000000000..4247dedf6 --- /dev/null +++ b/components/lib/tabs/package.json @@ -0,0 +1,9 @@ +{ + "main": "./tabs.cjs.js", + "module": "./tabs.esm.js", + "unpkg": "./tabs.min.js", + "types": "./Tabs.d.ts", + "browser": { + "./sfc": "./Tabs.vue" + } +} diff --git a/components/lib/tabs/style/TabsStyle.d.ts b/components/lib/tabs/style/TabsStyle.d.ts new file mode 100644 index 000000000..a15edfce2 --- /dev/null +++ b/components/lib/tabs/style/TabsStyle.d.ts @@ -0,0 +1,3 @@ +import { BaseStyle } from '../../base/style'; + +export interface TabsStyle extends BaseStyle {} diff --git a/components/lib/tabs/style/TabsStyle.js b/components/lib/tabs/style/TabsStyle.js new file mode 100644 index 000000000..0840c7a74 --- /dev/null +++ b/components/lib/tabs/style/TabsStyle.js @@ -0,0 +1,16 @@ +import BaseStyle from 'primevue/base/style'; + +const classes = { + root: ({ props }) => [ + 'p-tabs p-component', + { + 'p-tabs-scrollable': props.scrollable, + 'p-tabs-vertical': props.orientation === 'vertical' + } + ] +}; + +export default BaseStyle.extend({ + name: 'tabs', + classes +}); diff --git a/components/lib/tabs/style/package.json b/components/lib/tabs/style/package.json new file mode 100644 index 000000000..c1362299c --- /dev/null +++ b/components/lib/tabs/style/package.json @@ -0,0 +1,6 @@ +{ + "main": "./tabsstyle.cjs.js", + "module": "./tabsstyle.esm.js", + "unpkg": "./tabsstyle.min.js", + "types": "./TabsStyle.d.ts" +} diff --git a/components/lib/themes/primeone/base/index.js b/components/lib/themes/primeone/base/index.js index e05855290..1d139c184 100644 --- a/components/lib/themes/primeone/base/index.js +++ b/components/lib/themes/primeone/base/index.js @@ -69,6 +69,7 @@ import splitter from 'primevue/themes/primeone/base/splitter'; import stepper from 'primevue/themes/primeone/base/stepper'; import steps from 'primevue/themes/primeone/base/steps'; import tabmenu from 'primevue/themes/primeone/base/tabmenu'; +import tabs from 'primevue/themes/primeone/base/tabs'; import tabview from 'primevue/themes/primeone/base/tabview'; import tag from 'primevue/themes/primeone/base/tag'; import terminal from 'primevue/themes/primeone/base/terminal'; @@ -158,6 +159,7 @@ export default { steps, stepper, tabmenu, + tabs, tabview, textarea, tieredmenu, diff --git a/components/lib/themes/primeone/base/tabs/index.js b/components/lib/themes/primeone/base/tabs/index.js new file mode 100644 index 000000000..235b5a5da --- /dev/null +++ b/components/lib/themes/primeone/base/tabs/index.js @@ -0,0 +1,94 @@ +export default { + css: ({ dt }) => ` +.p-tabs { + display: flex; + flex-direction: column; +} + +.p-tablist-scroll-container { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; +} + +.p-tablist-scroll-container::-webkit-scrollbar { + display: none; +} + +.p-tablist { + position: relative; + background: ${dt('tabs.nav.background')}; +} + +.p-tablist-content { + position: relative; + display: flex; + border: 1px solid ${dt('tabs.nav.border.color')}; + border-width: 0 0 1px 0; +} + +.p-tablist-navigator.p-button { + position: absolute; + z-index: 2; +} + +.p-tablist-navigator.p-tablist-prev-button { + top: 0; + left: 0; +} + +.p-tablist-navigator.p-tablist-next-button { + top: 0; + right: 0; +} + +.p-tab { + cursor: pointer; + border-style: solid; + border-width: 0 0 1px 0; + border-color: transparent transparent ${dt('tabs.header.border.color')} transparent; + color: ${dt('tabs.header.color')}; + background: ${dt('tabs.nav.background')}; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: ${dt('rounded.base')}; + border-top-left-radius: ${dt('rounded.base')}; + transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + margin: 0 0 -1px 0; + outline-color: transparent; + line-height: 1; + white-space: nowrap; +} + +.p-tab:not(.p-disabled):focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: -1px; +} + +.p-tab:not(.p-active):not(.p-disabled):hover { + color: ${dt('tabs.header.hover.color')}; +} + +.p-tab.p-active { + color: ${dt('tabs.header.active.color')}; +} + +.p-tabpanels { + background: ${dt('tabs.navigator.content.background')}; + color: ${dt('tabs.navigator.content.color')}; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; +} + +.p-tablist-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: ${dt('tabs.header.active.border.color')}; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); +} +` +}; diff --git a/components/lib/themes/primeone/base/tabs/package.json b/components/lib/themes/primeone/base/tabs/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/primeone/base/tabs/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/primeone/presets/aura/index.js b/components/lib/themes/primeone/presets/aura/index.js index e5195b58c..a1c4d3625 100644 --- a/components/lib/themes/primeone/presets/aura/index.js +++ b/components/lib/themes/primeone/presets/aura/index.js @@ -68,6 +68,7 @@ import splitter from 'primevue/themes/primeone/presets/aura/splitter'; import stepper from 'primevue/themes/primeone/presets/aura/stepper'; import steps from 'primevue/themes/primeone/presets/aura/steps'; import tabmenu from 'primevue/themes/primeone/presets/aura/tabmenu'; +import tabs from 'primevue/themes/primeone/presets/aura/tabs'; import tabview from 'primevue/themes/primeone/presets/aura/tabview'; import tag from 'primevue/themes/primeone/presets/aura/tag'; import terminal from 'primevue/themes/primeone/presets/aura/terminal'; @@ -303,6 +304,7 @@ export default { stepper, steps, tabmenu, + tabs, tabview, textarea, tieredmenu, diff --git a/components/lib/themes/primeone/presets/aura/tabs/index.js b/components/lib/themes/primeone/presets/aura/tabs/index.js new file mode 100644 index 000000000..fd5331153 --- /dev/null +++ b/components/lib/themes/primeone/presets/aura/tabs/index.js @@ -0,0 +1,50 @@ +export default { + colorScheme: { + light: { + nav: { + background: '{surface.0}', + borderColor: '{surface.200}' + }, + header: { + borderColor: '{surface.200}', + activeBorderColor: '{primary.color}', + color: '{surface.500}', + hoverColor: '{surface.700}', + activeColor: '{primary.color}' + }, + navigatorIcon: { + background: '{surface.0}', + color: '{surface.500}', + hoverColor: '{surface.700}', + boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)' + }, + content: { + background: '{surface.0}', + color: '{surface.700}' + } + }, + dark: { + nav: { + background: '{surface.900}', + borderColor: '{surface.700}' + }, + header: { + borderColor: '{surface.700}', + activeBorderColor: '{primary.color}', + color: '{surface.400}', + hoverColor: '{surface.0}', + activeColor: '{primary.color}' + }, + navigatorIcon: { + background: '{surface.900}', + color: '{surface.400}', + hoverColor: '{surface.0}', + boxShadow: '0px 0px 10px 50px color-mix(in srgb, {surface.900}, transparent 50%)' + }, + content: { + background: '{surface.900}', + color: '{surface.0}' + } + } + } +}; diff --git a/components/lib/themes/primeone/presets/aura/tabs/package.json b/components/lib/themes/primeone/presets/aura/tabs/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/primeone/presets/aura/tabs/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json index 1fd2d82d1..f715a9551 100644 --- a/doc/common/apidoc/index.json +++ b/doc/common/apidoc/index.json @@ -5478,7 +5478,7 @@ } ], "methods": [], - "extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,ButtonGroupStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DatePickerStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DrawerStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,FileUploadStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputChipsStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputOtpStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PopoverStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectStyle,SelectButtonStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabMenuStyle,TabPanelStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToggleSwitchStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,VirtualScrollerStyle" + "extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,ButtonGroupStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DatePickerStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DrawerStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,FileUploadStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputChipsStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputOtpStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PopoverStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectStyle,SelectButtonStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabStyle,TabListStyle,TabMenuStyle,TabPanelStyle,TabPanelsStyle,TabsStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToggleSwitchStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,VirtualScrollerStyle" } } } @@ -56558,6 +56558,550 @@ } }, "styled/PrimeVueStyled": {}, + "tab": { + "description": "Tab is a helper component for Tabs component.\n\n[Live Demo](https://www.primevue.org/tabs/)", + "components": { + "default": { + "description": "Tab is a helper component for Tabs component.", + "methods": { + "description": "Defines methods that can be accessed by the component's reference.", + "values": [] + } + } + }, + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "eventDescription": "Defines the custom events used by the component's emit.", + "methodDescription": "Defines methods that can be accessed by the component's reference.", + "typeDescription": "Defines the custom types used by the module.", + "values": { + "TabPassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "instance", + "optional": false, + "readonly": false, + "type": "any", + "default": "", + "description": "Defines instance." + }, + { + "name": "props", + "optional": false, + "readonly": false, + "type": "TabProps", + "default": "", + "description": "Defines valid properties." + }, + { + "name": "context", + "optional": false, + "readonly": false, + "type": "TabContext", + "default": "", + "description": "Defines current options." + }, + { + "name": "attrs", + "optional": false, + "readonly": false, + "type": "any", + "default": "", + "description": "Defines valid attributes." + }, + { + "name": "parent", + "optional": false, + "readonly": false, + "type": "any", + "default": "", + "description": "Defines parent options." + }, + { + "name": "global", + "optional": false, + "readonly": false, + "type": "undefined | object", + "default": "", + "description": "Defines passthrough(pt) options in global config." + } + ], + "methods": [] + }, + "TabPassThroughOptions": { + "description": "Custom passthrough(pt) options.", + "relatedProp": "TabProps.pt", + "props": [ + { + "name": "root", + "optional": true, + "readonly": false, + "type": "TabPassThroughOptionType", + "default": "", + "description": "Used to pass attributes to the root's DOM element." + }, + { + "name": "hooks", + "optional": true, + "readonly": false, + "type": "ComponentHooks", + "default": "", + "description": "Used to manage all lifecycle hooks." + } + ], + "methods": [] + }, + "TabPassThroughAttributes": { + "relatedProp": "", + "props": [ + { + "name": "[key: string]", + "optional": false, + "readonly": false, + "type": "any" + } + ], + "methods": [] + }, + "TabProps": { + "description": "Defines valid properties in Tab component.", + "relatedProp": "", + "props": [ + { + "name": "value", + "optional": false, + "readonly": false, + "type": "string", + "default": "", + "description": "Value of tab." + }, + { + "name": "disabled", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Whether the tab is disabled." + }, + { + "name": "as", + "optional": true, + "readonly": false, + "type": "string", + "default": "BUTTON", + "description": "Use to change the HTML tag of root element." + }, + { + "name": "asChild", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "When enabled, it changes the default rendered element for the one passed as a child element." + }, + { + "name": "dt", + "optional": true, + "readonly": false, + "type": "any", + "default": "", + "description": "It generates scoped CSS variables using design tokens for the component." + }, + { + "name": "pt", + "optional": true, + "readonly": false, + "type": "PassThrough", + "default": "", + "description": "Used to pass attributes to DOM elements inside the component." + }, + { + "name": "ptOptions", + "optional": true, + "readonly": false, + "type": "PassThroughOptions", + "default": "", + "description": "Used to configure passthrough(pt) options of the component." + } + ], + "methods": [] + }, + "TabContext": { + "description": "Defines current options in Tab component.", + "relatedProp": "", + "props": [ + { + "name": "active", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "", + "description": "Whether the tab is active." + } + ], + "methods": [] + }, + "TabSlots": { + "description": "Defines valid slots in Tab slots.", + "relatedProp": "", + "props": [], + "methods": [ + { + "name": "default", + "parameters": [], + "returnType": "VNode[]", + "description": "Custom content template." + } + ] + }, + "TabEmits": { + "relatedProp": "", + "props": [], + "methods": [] + } + } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": { + "TabPassThroughOptionType": { + "values": "TabPassThroughAttributes | (options: TabPassThroughMethodOptions) => undefined | string | null | undefined" + } + } + } + }, + "tab/style/TabStyle": { + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "eventDescription": "Defines the custom events used by the component's emit.", + "methodDescription": "Defines methods that can be accessed by the component's reference.", + "typeDescription": "Defines the custom types used by the module.", + "values": { + "TabStyle": { + "relatedProp": "", + "props": [ + { + "name": "name", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "css", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "classes", + "optional": true, + "readonly": false, + "type": "object", + "default": "" + }, + { + "name": "inlineStyles", + "optional": true, + "readonly": false, + "type": "object", + "default": "" + }, + { + "name": "loadStyle", + "optional": true, + "readonly": false, + "type": "Function", + "default": "" + }, + { + "name": "getStyleSheet", + "optional": true, + "readonly": false, + "type": "Function", + "default": "" + } + ], + "methods": [], + "extendedTypes": "BaseStyle" + } + } + } + }, + "tablist": { + "description": "TabList is a helper component for Tabs component.\n\n[Live Demo](https://www.primevue.org/tabs/)", + "components": { + "default": { + "description": "TabList is a helper component for Tabs component.", + "methods": { + "description": "Defines methods that can be accessed by the component's reference.", + "values": [] + } + } + }, + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "eventDescription": "Defines the custom events used by the component's emit.", + "methodDescription": "Defines methods that can be accessed by the component's reference.", + "typeDescription": "Defines the custom types used by the module.", + "values": { + "TabListPassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "instance", + "optional": false, + "readonly": false, + "type": "any", + "default": "", + "description": "Defines instance." + }, + { + "name": "props", + "optional": false, + "readonly": false, + "type": "TabListProps", + "default": "", + "description": "Defines valid properties." + }, + { + "name": "context", + "optional": false, + "readonly": false, + "type": "TabListContext", + "default": "", + "description": "Defines current options." + }, + { + "name": "attrs", + "optional": false, + "readonly": false, + "type": "any", + "default": "", + "description": "Defines valid attributes." + }, + { + "name": "parent", + "optional": false, + "readonly": false, + "type": "any", + "default": "", + "description": "Defines parent options." + }, + { + "name": "global", + "optional": false, + "readonly": false, + "type": "undefined | object", + "default": "", + "description": "Defines passthrough(pt) options in global config." + } + ], + "methods": [] + }, + "TabListPassThroughOptions": { + "description": "Custom passthrough(pt) options.", + "relatedProp": "TabListProps.pt", + "props": [ + { + "name": "root", + "optional": true, + "readonly": false, + "type": "TabListPassThroughOptionType", + "default": "", + "description": "Used to pass attributes to the root's DOM element." + }, + { + "name": "previousButton", + "optional": true, + "readonly": false, + "type": "TabListPassThroughOptionType", + "default": "", + "description": "Used to pass attributes to the previous button component." + }, + { + "name": "nextButton", + "optional": true, + "readonly": false, + "type": "TabListPassThroughOptionType", + "default": "", + "description": "Used to pass attributes to the next button component." + }, + { + "name": "content", + "optional": true, + "readonly": false, + "type": "TabListPassThroughOptionType", + "default": "", + "description": "Used to pass attributes to the list's DOM element." + }, + { + "name": "inkbar", + "optional": true, + "readonly": false, + "type": "TabListPassThroughOptionType", + "default": "", + "description": "Used to pass attributes to the inkbar's DOM element." + }, + { + "name": "hooks", + "optional": true, + "readonly": false, + "type": "ComponentHooks", + "default": "", + "description": "Used to manage all lifecycle hooks." + } + ], + "methods": [] + }, + "TabListPassThroughAttributes": { + "relatedProp": "", + "props": [ + { + "name": "[key: string]", + "optional": false, + "readonly": false, + "type": "any" + } + ], + "methods": [] + }, + "TabListProps": { + "description": "Defines valid properties in TabList component.", + "relatedProp": "", + "props": [ + { + "name": "dt", + "optional": true, + "readonly": false, + "type": "any", + "default": "", + "description": "It generates scoped CSS variables using design tokens for the component." + }, + { + "name": "pt", + "optional": true, + "readonly": false, + "type": "PassThrough", + "default": "", + "description": "Used to pass attributes to DOM elements inside the component." + }, + { + "name": "ptOptions", + "optional": true, + "readonly": false, + "type": "PassThroughOptions", + "default": "", + "description": "Used to configure passthrough(pt) options of the component." + } + ], + "methods": [] + }, + "TabListContext": { + "description": "Defines current options in TabList component.", + "relatedProp": "", + "props": [ + { + "name": "[key: string]", + "optional": false, + "readonly": false, + "type": "any" + } + ], + "methods": [] + }, + "TabListSlots": { + "description": "Defines valid slots in TabList slots.", + "relatedProp": "", + "props": [], + "methods": [ + { + "name": "default", + "parameters": [], + "returnType": "VNode[]", + "description": "Custom content template." + } + ] + }, + "TabListEmits": { + "relatedProp": "", + "props": [], + "methods": [] + } + } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": { + "TabListPassThroughOptionType": { + "values": "TabListPassThroughAttributes | (options: TabListPassThroughMethodOptions) => undefined | string | null | undefined" + } + } + } + }, + "tablist/style/TabListStyle": { + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "eventDescription": "Defines the custom events used by the component's emit.", + "methodDescription": "Defines methods that can be accessed by the component's reference.", + "typeDescription": "Defines the custom types used by the module.", + "values": { + "TabListStyle": { + "relatedProp": "", + "props": [ + { + "name": "name", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "css", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "classes", + "optional": true, + "readonly": false, + "type": "object", + "default": "" + }, + { + "name": "inlineStyles", + "optional": true, + "readonly": false, + "type": "object", + "default": "" + }, + { + "name": "loadStyle", + "optional": true, + "readonly": false, + "type": "Function", + "default": "" + }, + { + "name": "getStyleSheet", + "optional": true, + "readonly": false, + "type": "Function", + "default": "" + } + ], + "methods": [], + "extendedTypes": "BaseStyle" + } + } + } + }, "tabmenu": { "description": "TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.\n\n[Live Demo](https://www.primevue.org/tabmenu/)", "components": { @@ -57018,10 +57562,10 @@ } }, "tabpanel": { - "description": "TabPanel is a helper component for TabPanel component.\n\n[Live Demo](https://www.primevue.org/tabview/)", + "description": "TabPanel is a helper component for Tabs component.\n\n[Live Demo](https://www.primevue.org/tabs/)", "components": { "default": { - "description": "TabPanel is a helper component for TabView component.", + "description": "TabPanel is a helper component for Tabs component.", "methods": { "description": "Defines methods that can be accessed by the component's reference.", "values": [] @@ -57107,7 +57651,8 @@ "readonly": false, "type": "TabPanelPassThroughOptionType", "default": "", - "description": "Used to pass attributes to the header's DOM element." + "description": "Used to pass attributes to the header's DOM element.", + "deprecated": "since v4. Only supported by TabView." }, { "name": "headerAction", @@ -57115,7 +57660,8 @@ "readonly": false, "type": "TabPanelPassThroughOptionType", "default": "", - "description": "Used to pass attributes to the header action's DOM element." + "description": "Used to pass attributes to the header action's DOM element.", + "deprecated": "since v4. Only supported by TabView." }, { "name": "headerTitle", @@ -57123,7 +57669,8 @@ "readonly": false, "type": "TabPanelPassThroughOptionType", "default": "", - "description": "Used to pass attributes to the title's DOM element." + "description": "Used to pass attributes to the title's DOM element.", + "deprecated": "since v4. Only supported by TabView." }, { "name": "content", @@ -57131,7 +57678,8 @@ "readonly": false, "type": "TabPanelPassThroughOptionType", "default": "", - "description": "Used to pass attributes to the list's DOM element." + "description": "Used to pass attributes to the list's DOM element.", + "deprecated": "since v4. Only supported by TabView." }, { "name": "hooks", @@ -57160,13 +57708,38 @@ "description": "Defines valid properties in TabPanel component.", "relatedProp": "", "props": [ + { + "name": "value", + "optional": false, + "readonly": false, + "type": "string", + "default": "", + "description": "Value of tabpanel." + }, + { + "name": "as", + "optional": true, + "readonly": false, + "type": "string", + "default": "DIV", + "description": "Use to change the HTML tag of root element." + }, + { + "name": "asChild", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "When enabled, it changes the default rendered element for the one passed as a child element." + }, { "name": "header", "optional": true, "readonly": false, "type": "string", "default": "", - "description": "Orientation of tab headers." + "description": "Orientation of tab headers.", + "deprecated": "since v4. Only supported by TabView." }, { "name": "headerStyle", @@ -57174,7 +57747,8 @@ "readonly": false, "type": "any", "default": "", - "description": "Inline style of the tab header." + "description": "Inline style of the tab header.", + "deprecated": "since v4. Only supported by TabView." }, { "name": "headerClass", @@ -57182,7 +57756,8 @@ "readonly": false, "type": "any", "default": "", - "description": "Style class of the tab header." + "description": "Style class of the tab header.", + "deprecated": "since v4. Only supported by TabView." }, { "name": "headerProps", @@ -57191,7 +57766,7 @@ "type": "LiHTMLAttributes", "default": "", "description": "Used to pass all properties of the HTMLLiElement to the tab header.", - "deprecated": "since v3.26.0. Use 'pt' property instead." + "deprecated": "since v4. Only supported by TabView." }, { "name": "headerActionProps", @@ -57200,7 +57775,7 @@ "type": "AnchorHTMLAttributes", "default": "", "description": "Used to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.", - "deprecated": "since v3.26.0. Use 'pt' property instead." + "deprecated": "since v4. Only supported by TabView." }, { "name": "contentStyle", @@ -57208,7 +57783,8 @@ "readonly": false, "type": "any", "default": "", - "description": "Inline style of the tab content." + "description": "Inline style of the tab content.", + "deprecated": "since v4. Only supported by TabView." }, { "name": "contentClass", @@ -57216,7 +57792,8 @@ "readonly": false, "type": "any", "default": "", - "description": "Style class of the tab content." + "description": "Style class of the tab content.", + "deprecated": "since v4. Only supported by TabView." }, { "name": "contentProps", @@ -57225,7 +57802,7 @@ "type": "HTMLAttributes", "default": "", "description": "Used to pass all properties of the HTMLDivElement to the tab content.", - "deprecated": "since v3.26.0. Use 'pt' property instead." + "deprecated": "since v4. Only supported by TabView." }, { "name": "disabled", @@ -57233,7 +57810,8 @@ "readonly": false, "type": "boolean", "default": "false", - "description": "Whether the tab is disabled." + "description": "Whether the tab is disabled.", + "deprecated": "since v4. Only supported by TabView." }, { "name": "dt", @@ -57272,7 +57850,8 @@ "readonly": false, "type": "number", "default": "", - "description": "Current index of the tab." + "description": "Current index of the tab.", + "deprecated": "since v4. Only supported by TabView." }, { "name": "count", @@ -57280,7 +57859,8 @@ "readonly": false, "type": "number", "default": "", - "description": "Count of tabs" + "description": "Count of tabs", + "deprecated": "since v4. Only supported by TabView." }, { "name": "first", @@ -57288,7 +57868,8 @@ "readonly": false, "type": "boolean", "default": "", - "description": "Whether the tab is first." + "description": "Whether the tab is first.", + "deprecated": "since v4. Only supported by TabView." }, { "name": "last", @@ -57296,7 +57877,8 @@ "readonly": false, "type": "boolean", "default": "", - "description": "Whether the tab is last." + "description": "Whether the tab is last.", + "deprecated": "since v4. Only supported by TabView." }, { "name": "active", @@ -57324,7 +57906,8 @@ "name": "header", "parameters": [], "returnType": "VNode[]", - "description": "Custom header template." + "description": "Custom header template.", + "deprecated": "since v4. Only supported by TabView." } ] }, @@ -57403,11 +57986,607 @@ } } }, + "tabpanels": { + "description": "TabPanels is a helper component for Tabs component.\n\n[Live Demo](https://www.primevue.org/tabview/)", + "components": { + "default": { + "description": "TabPanels is a helper component for Tabs component.", + "methods": { + "description": "Defines methods that can be accessed by the component's reference.", + "values": [] + } + } + }, + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "eventDescription": "Defines the custom events used by the component's emit.", + "methodDescription": "Defines methods that can be accessed by the component's reference.", + "typeDescription": "Defines the custom types used by the module.", + "values": { + "TabPanelsPassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "instance", + "optional": false, + "readonly": false, + "type": "any", + "default": "", + "description": "Defines instance." + }, + { + "name": "props", + "optional": false, + "readonly": false, + "type": "TabPanelsProps", + "default": "", + "description": "Defines valid properties." + }, + { + "name": "context", + "optional": false, + "readonly": false, + "type": "TabPanelsContext", + "default": "", + "description": "Defines current options." + }, + { + "name": "attrs", + "optional": false, + "readonly": false, + "type": "any", + "default": "", + "description": "Defines valid attributes." + }, + { + "name": "parent", + "optional": false, + "readonly": false, + "type": "any", + "default": "", + "description": "Defines parent options." + }, + { + "name": "global", + "optional": false, + "readonly": false, + "type": "undefined | object", + "default": "", + "description": "Defines passthrough(pt) options in global config." + } + ], + "methods": [] + }, + "TabPanelsPassThroughOptions": { + "description": "Custom passthrough(pt) options.", + "relatedProp": "TabPanelsProps.pt", + "props": [ + { + "name": "root", + "optional": true, + "readonly": false, + "type": "TabPanelsPassThroughOptionType", + "default": "", + "description": "Used to pass attributes to the root's DOM element." + }, + { + "name": "hooks", + "optional": true, + "readonly": false, + "type": "ComponentHooks", + "default": "", + "description": "Used to manage all lifecycle hooks." + } + ], + "methods": [] + }, + "TabPanelsPassThroughAttributes": { + "relatedProp": "", + "props": [ + { + "name": "[key: string]", + "optional": false, + "readonly": false, + "type": "any" + } + ], + "methods": [] + }, + "TabPanelsProps": { + "description": "Defines valid properties in TabPanels component.", + "relatedProp": "", + "props": [ + { + "name": "dt", + "optional": true, + "readonly": false, + "type": "any", + "default": "", + "description": "It generates scoped CSS variables using design tokens for the component." + }, + { + "name": "pt", + "optional": true, + "readonly": false, + "type": "PassThrough", + "default": "", + "description": "Used to pass attributes to DOM elements inside the component." + }, + { + "name": "ptOptions", + "optional": true, + "readonly": false, + "type": "PassThroughOptions", + "default": "", + "description": "Used to configure passthrough(pt) options of the component." + } + ], + "methods": [] + }, + "TabPanelsContext": { + "description": "Defines current options in TabPanels component.", + "relatedProp": "", + "props": [ + { + "name": "[key: string]", + "optional": false, + "readonly": false, + "type": "any" + } + ], + "methods": [] + }, + "TabPanelsSlots": { + "description": "Defines valid slots in TabPanels slots.", + "relatedProp": "", + "props": [], + "methods": [ + { + "name": "default", + "parameters": [], + "returnType": "VNode[]", + "description": "Custom content template." + } + ] + }, + "TabPanelsEmits": { + "relatedProp": "", + "props": [], + "methods": [] + } + } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": { + "TabPanelsPassThroughOptionType": { + "values": "TabPanelsPassThroughAttributes | (options: TabPanelsPassThroughMethodOptions) => undefined | string | null | undefined" + } + } + } + }, + "tabpanels/style/TabPanelsStyle": { + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "eventDescription": "Defines the custom events used by the component's emit.", + "methodDescription": "Defines methods that can be accessed by the component's reference.", + "typeDescription": "Defines the custom types used by the module.", + "values": { + "TabPanelsStyle": { + "relatedProp": "", + "props": [ + { + "name": "name", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "css", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "classes", + "optional": true, + "readonly": false, + "type": "object", + "default": "" + }, + { + "name": "inlineStyles", + "optional": true, + "readonly": false, + "type": "object", + "default": "" + }, + { + "name": "loadStyle", + "optional": true, + "readonly": false, + "type": "Function", + "default": "" + }, + { + "name": "getStyleSheet", + "optional": true, + "readonly": false, + "type": "Function", + "default": "" + } + ], + "methods": [], + "extendedTypes": "BaseStyle" + } + } + } + }, + "tabs": { + "description": "Tabs facilitates seamless switching between different views.\n\n[Live Demo](https://www.primevue.org/tabs/)", + "components": { + "default": { + "description": "Tabs facilitates seamless switching between different views.", + "methods": { + "description": "Defines methods that can be accessed by the component's reference.", + "values": [] + } + } + }, + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "eventDescription": "Defines the custom events used by the component's emit.", + "methodDescription": "Defines methods that can be accessed by the component's reference.", + "typeDescription": "Defines the custom types used by the module.", + "values": { + "TabsPassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "instance", + "optional": false, + "readonly": false, + "type": "any", + "default": "", + "description": "Defines instance." + }, + { + "name": "props", + "optional": false, + "readonly": false, + "type": "TabsProps", + "default": "", + "description": "Defines valid properties." + }, + { + "name": "state", + "optional": false, + "readonly": false, + "type": "TabsState", + "default": "", + "description": "Defines current inline state." + }, + { + "name": "attrs", + "optional": false, + "readonly": false, + "type": "any", + "default": "", + "description": "Defines valid attributes." + }, + { + "name": "parent", + "optional": false, + "readonly": false, + "type": "any", + "default": "", + "description": "Defines parent options." + }, + { + "name": "global", + "optional": false, + "readonly": false, + "type": "undefined | object", + "default": "", + "description": "Defines passthrough(pt) options in global config." + } + ], + "methods": [] + }, + "TabsPassThroughOptions": { + "description": "Custom passthrough(pt) options.", + "relatedProp": "TabsProps.pt", + "props": [ + { + "name": "root", + "optional": true, + "readonly": false, + "type": "TabsPassThroughOptionType", + "default": "", + "description": "Used to pass attributes to the root's DOM element." + }, + { + "name": "hooks", + "optional": true, + "readonly": false, + "type": "ComponentHooks", + "default": "", + "description": "Used to manage all lifecycle hooks." + } + ], + "methods": [] + }, + "TabsPassThroughAttributes": { + "description": "Custom passthrough attributes for each DOM elements", + "relatedProp": "", + "props": [ + { + "name": "[key: string]", + "optional": false, + "readonly": false, + "type": "any" + } + ], + "methods": [] + }, + "TabsState": { + "description": "Defines current inline state in Tabs component.", + "relatedProp": "", + "props": [ + { + "name": "d_value", + "optional": false, + "readonly": false, + "type": "number", + "default": "", + "description": "Current active value state." + }, + { + "name": "id", + "optional": false, + "readonly": false, + "type": "string", + "default": "", + "description": "Unique id for the Tabs component." + } + ], + "methods": [] + }, + "TabsProps": { + "description": "Defines valid properties in Tabs component.", + "relatedProp": "", + "props": [ + { + "name": "value", + "optional": false, + "readonly": false, + "type": "string", + "default": "", + "description": "Value of the active tab." + }, + { + "name": "lazy", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css." + }, + { + "name": "orientation", + "optional": true, + "readonly": false, + "type": "\"horizontal\" | \"vertical\"", + "default": "horizontal", + "description": "Specifies the layout of the component, valid values are 'horizontal' and 'vertical'." + }, + { + "name": "scrollable", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "When specified, enables horizontal and/or vertical scrolling." + }, + { + "name": "showNavigators", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "true", + "description": "Whether to display navigation buttons in container when scrollable is enabled." + }, + { + "name": "tabindex", + "optional": true, + "readonly": false, + "type": "number", + "default": "0", + "description": "Index of the element in tabbing order." + }, + { + "name": "selectOnFocus", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "When enabled, the focused tab is activated." + }, + { + "name": "previousButtonProps", + "optional": true, + "readonly": false, + "type": "ButtonProps", + "default": "", + "description": "Used to pass all properties of the HTMLButtonElement to the previous button." + }, + { + "name": "nextButtonProps", + "optional": true, + "readonly": false, + "type": "ButtonProps", + "default": "", + "description": "Used to pass all properties of the HTMLButtonElement to the next button." + }, + { + "name": "dt", + "optional": true, + "readonly": false, + "type": "any", + "default": "", + "description": "It generates scoped CSS variables using design tokens for the component." + }, + { + "name": "pt", + "optional": true, + "readonly": false, + "type": "PassThrough", + "default": "", + "description": "Used to pass attributes to DOM elements inside the component." + }, + { + "name": "ptOptions", + "optional": true, + "readonly": false, + "type": "PassThroughOptions", + "default": "", + "description": "Used to configure passthrough(pt) options of the component." + }, + { + "name": "unstyled", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "When enabled, it removes component related styles in the core." + } + ], + "methods": [] + }, + "TabsSlots": { + "description": "Defines valid slots in Tabs slots.", + "relatedProp": "", + "props": [], + "methods": [ + { + "name": "default", + "parameters": [], + "returnType": "VNode[]", + "description": "Default slot to detect TabPanel components." + }, + { + "name": "previousicon", + "parameters": [], + "returnType": "VNode[]", + "description": "Previous button icon template for the scrollable component." + }, + { + "name": "nexticon", + "parameters": [], + "returnType": "VNode[]", + "description": "Next button icon template for the scrollable component." + } + ] + }, + "TabsEmits": { + "description": "Defines valid emits in Tabs component.", + "relatedProp": "", + "props": [], + "methods": [ + { + "name": "update:value", + "parameters": [ + { + "name": "value", + "optional": false, + "type": "number", + "description": "Current value." + } + ], + "returnType": "void", + "description": "Emitted when the value changes." + } + ] + } + } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": { + "TabsPassThroughOptionType": { + "values": "TabsPassThroughAttributes | (options: TabsPassThroughMethodOptions) => undefined | string | null | undefined" + } + } + } + }, + "tabs/style/TabsStyle": { + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "eventDescription": "Defines the custom events used by the component's emit.", + "methodDescription": "Defines methods that can be accessed by the component's reference.", + "typeDescription": "Defines the custom types used by the module.", + "values": { + "TabsStyle": { + "relatedProp": "", + "props": [ + { + "name": "name", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "css", + "optional": true, + "readonly": false, + "type": "string", + "default": "" + }, + { + "name": "classes", + "optional": true, + "readonly": false, + "type": "object", + "default": "" + }, + { + "name": "inlineStyles", + "optional": true, + "readonly": false, + "type": "object", + "default": "" + }, + { + "name": "loadStyle", + "optional": true, + "readonly": false, + "type": "Function", + "default": "" + }, + { + "name": "getStyleSheet", + "optional": true, + "readonly": false, + "type": "Function", + "default": "" + } + ], + "methods": [], + "extendedTypes": "BaseStyle" + } + } + } + }, "tabview": { "description": "TabView is a container component to group content with tabs.\n\n[Live Demo](https://www.primevue.org/tabview/)", "components": { "default": { - "description": "TabView is a container component to group content with tabs.", + "description": "", "methods": { "description": "Defines methods that can be accessed by the component's reference.", "values": [] diff --git a/doc/tabs/AccessibilityDoc.vue b/doc/tabs/AccessibilityDoc.vue new file mode 100644 index 000000000..f21c70e91 --- /dev/null +++ b/doc/tabs/AccessibilityDoc.vue @@ -0,0 +1,74 @@ + diff --git a/doc/tabs/BasicDoc.vue b/doc/tabs/BasicDoc.vue new file mode 100644 index 000000000..7eab68f6f --- /dev/null +++ b/doc/tabs/BasicDoc.vue @@ -0,0 +1,149 @@ + + + diff --git a/doc/tabs/ControlledDoc.vue b/doc/tabs/ControlledDoc.vue new file mode 100644 index 000000000..7e93bab99 --- /dev/null +++ b/doc/tabs/ControlledDoc.vue @@ -0,0 +1,182 @@ + + + diff --git a/doc/tabs/DisabledDoc.vue b/doc/tabs/DisabledDoc.vue new file mode 100644 index 000000000..4fa332251 --- /dev/null +++ b/doc/tabs/DisabledDoc.vue @@ -0,0 +1,151 @@ + + + diff --git a/doc/tabs/DynamicDoc.vue b/doc/tabs/DynamicDoc.vue new file mode 100644 index 000000000..b8bd886f0 --- /dev/null +++ b/doc/tabs/DynamicDoc.vue @@ -0,0 +1,102 @@ + + + diff --git a/doc/tabs/ImportDoc.vue b/doc/tabs/ImportDoc.vue new file mode 100644 index 000000000..414f593b4 --- /dev/null +++ b/doc/tabs/ImportDoc.vue @@ -0,0 +1,22 @@ + + + diff --git a/doc/tabs/ScrollableDoc.vue b/doc/tabs/ScrollableDoc.vue new file mode 100644 index 000000000..56697026c --- /dev/null +++ b/doc/tabs/ScrollableDoc.vue @@ -0,0 +1,98 @@ + + + diff --git a/doc/tabs/TemplateDoc.vue b/doc/tabs/TemplateDoc.vue new file mode 100644 index 000000000..13b5cdb61 --- /dev/null +++ b/doc/tabs/TemplateDoc.vue @@ -0,0 +1,195 @@ + + + diff --git a/doc/tabs/pt/PTImage.vue b/doc/tabs/pt/PTImage.vue new file mode 100644 index 000000000..9ac50d6b4 --- /dev/null +++ b/doc/tabs/pt/PTImage.vue @@ -0,0 +1,8 @@ + diff --git a/doc/tabs/pt/index.vue b/doc/tabs/pt/index.vue new file mode 100644 index 000000000..ea02f0c6c --- /dev/null +++ b/doc/tabs/pt/index.vue @@ -0,0 +1,59 @@ + + + diff --git a/doc/tabs/theming/StyledDoc.vue b/doc/tabs/theming/StyledDoc.vue new file mode 100644 index 000000000..cd99082ba --- /dev/null +++ b/doc/tabs/theming/StyledDoc.vue @@ -0,0 +1,33 @@ + diff --git a/doc/tabs/theming/TailwindDoc.vue b/doc/tabs/theming/TailwindDoc.vue new file mode 100644 index 000000000..fe4aadc26 --- /dev/null +++ b/doc/tabs/theming/TailwindDoc.vue @@ -0,0 +1,6 @@ + diff --git a/doc/tabs/theming/index.vue b/doc/tabs/theming/index.vue new file mode 100644 index 000000000..997547116 --- /dev/null +++ b/doc/tabs/theming/index.vue @@ -0,0 +1,40 @@ + + + diff --git a/modules/nuxt-primevue/runtime/core/components/index.js b/modules/nuxt-primevue/runtime/core/components/index.js index da87b0bab..00d4d6eca 100644 --- a/modules/nuxt-primevue/runtime/core/components/index.js +++ b/modules/nuxt-primevue/runtime/core/components/index.js @@ -38,7 +38,7 @@ 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', 'TabPanel', 'Toolbar']; +const panel = ['Accordion', '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/nuxt-vite.config.js b/nuxt-vite.config.js index 4346d1e56..24e0c8055 100644 --- a/nuxt-vite.config.js +++ b/nuxt-vite.config.js @@ -101,6 +101,10 @@ const STYLE_ALIAS = { 'primevue/stepperpanel/style': path.resolve(__dirname, './components/lib/stepperpanel/style/StepperPanelStyle.js'), 'primevue/styleclass/style': path.resolve(__dirname, './components/lib/styleclass/style/StyleClassStyle.js'), 'primevue/tabmenu/style': path.resolve(__dirname, './components/lib/tabmenu/style/TabMenuStyle.js'), + 'primevue/tabs/style': path.resolve(__dirname, './components/lib/tabs/style/TabsStyle.js'), + 'primevue/tablist/style': path.resolve(__dirname, './components/lib/tablist/style/TabListStyle.js'), + 'primevue/tab/style': path.resolve(__dirname, './components/lib/tab/style/TabStyle.js'), + 'primevue/tabpanels/style': path.resolve(__dirname, './components/lib/tabpanels/style/TabPanelsStyle.js'), 'primevue/tabpanel/style': path.resolve(__dirname, './components/lib/tabpanel/style/TabPanelStyle.js'), 'primevue/tabview/style': path.resolve(__dirname, './components/lib/tabview/style/TabViewStyle.js'), 'primevue/tag/style': path.resolve(__dirname, './components/lib/tag/style/TagStyle.js'), @@ -170,7 +174,7 @@ const ICON_ALIAS = { }; // prettier-ignore -const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','card','carousel','cascadeselect','checkbox','chip','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','datepicker','dialog','divider','dock','drawer','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputchips','inputgroup','inputnumber','inputotp','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','paginator','panel','panelmenu','password','picklist','popover','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','select','selectbutton','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toggleswitch','toolbar','tooltip','tree','treeselect','treetable']; +const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','card','carousel','cascadeselect','checkbox','chip','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','datepicker','dialog','divider','dock','drawer','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputchips','inputgroup','inputnumber','inputotp','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','paginator','panel','panelmenu','password','picklist','popover','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','select','selectbutton','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabs','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toggleswitch','toolbar','tooltip','tree','treeselect','treetable']; const createThemeAlias = (design, presets) => { const baseAlias = THEME_COMPONENTS.reduce((acc, name) => { diff --git a/pages/tabs/index.vue b/pages/tabs/index.vue new file mode 100755 index 000000000..bd5ae18ae --- /dev/null +++ b/pages/tabs/index.vue @@ -0,0 +1,75 @@ + + + diff --git a/rollup.config.js b/rollup.config.js index e1adc9b2e..59a1bc99b 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -162,6 +162,10 @@ const CORE_STYLE_DEPENDENCIES = { 'primevue/steps/style': 'primevue.steps.style', 'primevue/styleclass/style': 'primevue.styleclass.style', 'primevue/tabmenu/style': 'primevue.tabmenu.style', + 'primevue/tabs/style': 'primevue.tabs.style', + 'primevue/tablist/style': 'primevue.tablist.style', + 'primevue/tab/style': 'primevue.tab.style', + 'primevue/tabpanels/style': 'primevue.tabpanels.style', 'primevue/tabpanel/style': 'primevue.tabpanel.style', 'primevue/tabview/style': 'primevue.tabview.style', 'primevue/tag/style': 'primevue.tag.style', @@ -181,7 +185,7 @@ const CORE_STYLE_DEPENDENCIES = { }; // prettier-ignore -const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','card','carousel','cascadeselect','checkbox','chip','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','datepicker','dialog','divider','dock','drawer','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputchips','inputgroup','inputnumber','inputotp','toggleswitch','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','overlaypanel','paginator','panel','panelmenu','password','picklist','popover','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','select','selectbutton','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toggleswitch','toolbar','tooltip','tree','treeselect','treetable']; +const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','card','carousel','cascadeselect','checkbox','chip','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','datepicker','dialog','divider','dock','drawer','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputchips','inputgroup','inputnumber','inputotp','toggleswitch','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','overlaypanel','paginator','panel','panelmenu','password','picklist','popover','progressbar','progressspinner','radiobutton','rating','scrollpanel','scrolltop','select','selectbutton','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu', 'tab', 'tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toggleswitch','toolbar','tooltip','tree','treeselect','treetable']; const createThemeDependencies = (design, presets) => { const baseDeps = THEME_COMPONENTS.reduce((acc, name) => {