@db-ux/v-core-components 4.7.0-tabs-34782eb → 4.7.1

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # @db-ux/v-core-components
 
+## 4.7.1
+
+_version bump_
+
+
 ## 4.7.0
 
 ### Minor Changes

package/agent/Tabs.md

@@ -8,44 +8,41 @@
   <h2>1. Default Tabs</h2>
   <DBTabs
     ><DBTabList
-      ><DBTabItem>Def Tab 1</DBTabItem><DBTabItem>Def Tab 2</DBTabItem
-      ><DBTabItem>Def Tab 3</DBTabItem></DBTabList
-    ><DBTabPanel>Def Panel 1</DBTabPanel><DBTabPanel>Def Panel 2</DBTabPanel
-    ><DBTabPanel>Def Panel 3</DBTabPanel></DBTabs
+      ><DBTabItem>Tab 1</DBTabItem><DBTabItem>Tab 2</DBTabItem
+      ><DBTabItem>Tab 3</DBTabItem></DBTabList
+    ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
+    ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
   >
   <h2>2. Behavior Variants</h2>
   <DBTabs behavior="scrollbar"
     ><DBTabList
-      ><DBTabItem>Scroll Tab 1</DBTabItem><DBTabItem>Scroll Tab 2</DBTabItem
-      ><DBTabItem>Scroll Tab 3</DBTabItem></DBTabList
-    ><DBTabPanel>Scroll Panel 1</DBTabPanel
-    ><DBTabPanel>Scroll Panel 2</DBTabPanel
-    ><DBTabPanel>Scroll Panel 3</DBTabPanel></DBTabs
+      ><DBTabItem>Tab 1</DBTabItem><DBTabItem>Tab 2</DBTabItem
+      ><DBTabItem>Tab 3</DBTabItem></DBTabList
+    ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
+    ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
   >
   <DBTabs behavior="arrows"
     ><DBTabList
-      ><DBTabItem>Arrow Tab 1</DBTabItem><DBTabItem>Arrow Tab 2</DBTabItem
-      ><DBTabItem>Arrow Tab 3</DBTabItem></DBTabList
-    ><DBTabPanel>Arrow Panel 1</DBTabPanel><DBTabPanel>Arrow Panel 2</DBTabPanel
-    ><DBTabPanel>Arrow Panel 3</DBTabPanel></DBTabs
+      ><DBTabItem>Tab 1</DBTabItem><DBTabItem>Tab 2</DBTabItem
+      ><DBTabItem>Tab 3</DBTabItem></DBTabList
+    ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
+    ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
   >
   <h2>3. Initial Selected Index</h2>
   <DBTabs :initialSelectedIndex="1"
     ><DBTabList
-      ><DBTabItem>InitIdx Tab 1</DBTabItem><DBTabItem>InitIdx Tab 2</DBTabItem
-      ><DBTabItem>InitIdx Tab 3</DBTabItem></DBTabList
-    ><DBTabPanel>InitIdx Panel 1</DBTabPanel
-    ><DBTabPanel>InitIdx Panel 2</DBTabPanel
-    ><DBTabPanel>InitIdx Panel 3</DBTabPanel></DBTabs
+      ><DBTabItem>Tab 1</DBTabItem><DBTabItem>Tab 2</DBTabItem
+      ><DBTabItem>Tab 3</DBTabItem></DBTabList
+    ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
+    ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
   >
   <h2>4. Initial Selected Mode</h2>
   <DBTabs initialSelectedMode="manually"
     ><DBTabList
-      ><DBTabItem>Manually Tab 1</DBTabItem><DBTabItem>Manually Tab 2</DBTabItem
-      ><DBTabItem>Manually Tab 3</DBTabItem></DBTabList
-    ><DBTabPanel>Manually Panel 1</DBTabPanel
-    ><DBTabPanel>Manually Panel 2</DBTabPanel
-    ><DBTabPanel>Manually Panel 3</DBTabPanel></DBTabs
+      ><DBTabItem>Tab 1</DBTabItem><DBTabItem>Tab 2</DBTabItem
+      ><DBTabItem>Tab 3</DBTabItem></DBTabList
+    ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
+    ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
   >
 </template>
 

package/dist/components/tab-item/model.d.ts

@@ -1,5 +1,9 @@
-import { ActiveProps, ClickEventProps, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InitializedState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, WidthProps } from '../../shared/model';
+import { ActiveProps, ChangeEventProps, ChangeEventState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InitializedState, NameProps, NameState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps } from '../../shared/model';
 export type DBTabItemDefaultProps = {
+    /**
+     * To control the component
+     */
+    checked?: boolean | string;
     /**
      * The disabled attribute can be set to keep a user from clicking on the tab-item.
      */
@@ -12,33 +16,12 @@ export type DBTabItemDefaultProps = {
      * Define the text next to the icon specified via the icon Property to get hidden.
      */
     noText?: boolean | string;
-    /**
-     * Set the tabIndex manually (internal use for roving tabindex).
-     */
-    tabIndex?: number | string;
-    /**
-     * The id of the panel this tab controls (WAI-ARIA).
-     */
-    ariaControls?: string;
-    /**
-     * Semantic value of this tab item. When set, onIndexChange will emit this value
-     * (via the onValueChange event) instead of only the numeric index.
-     * Useful for form binding (e.g. Angular FormControl, React useState).
-     */
-    value?: string;
 };
-export type DBTabItemProps = DBTabItemDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & ShowIconProps & IconTrailingProps & IconLeadingProps & ShowIconTrailingProps & ShowIconLeadingProps & ActiveProps & WidthProps;
+export type DBTabItemProps = GlobalProps & DBTabItemDefaultProps & IconProps & IconTrailingProps & IconLeadingProps & ShowIconLeadingProps & ShowIconTrailingProps & ActiveProps & ChangeEventProps<HTMLInputElement> & ShowIconProps & NameProps;
 export type DBTabItemDefaultState = {
-    internalActive: boolean | undefined;
-    internalTabIndex: number;
-    getCurrentTabIndex: () => number;
-    _resizeObserver: ResizeObserver | null | undefined;
-    _ariaSelectedListener: {
-        fn: (event: any) => void;
-    } | null;
-    handleClick: (event: any) => void;
-    isTruncated: boolean;
-    checkTruncation: () => void;
-    tooltipText: string;
+    _selected: boolean;
+    _listenerAdded: boolean;
+    boundSetSelectedOnChange?: (event: any) => void;
+    setSelectedOnChange: (event: any) => void;
 };
-export type DBTabItemState = DBTabItemDefaultState & GlobalState & InitializedState;
+export type DBTabItemState = DBTabItemDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & InitializedState & NameState;

package/dist/components/tab-item/tab-item.vue.d.ts

@@ -3,13 +3,19 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<DBTabItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBTabItemProps> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<DBTabItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:checked": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<DBTabItemProps> & Readonly<{
+    "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
+}>, {
     id: string;
+    children: any;
     className: string;
+    propOverrides: import("../..").PropOverridesType;
+    name: string;
     label: string;
-    value: string;
     disabled: boolean | string;
-    onClick: (event: import("../..").ClickEvent<HTMLButtonElement>) => void;
+    onChange: (event: import("../..").ChangeEvent<HTMLInputElement>) => void;
     icon: import("@db-ux/core-foundations").IconTypes;
     showIcon: boolean | string;
     showIconLeading: boolean | string;
@@ -17,9 +23,8 @@ declare const __VLS_base: import("vue").DefineComponent<DBTabItemProps, {}, {},
     iconLeading: import("@db-ux/core-foundations").IconTypes;
     iconTrailing: import("@db-ux/core-foundations").IconTypes;
     noText: boolean | string;
-    tabIndex: number | string;
+    checked: boolean | string;
     active: boolean | string;
-    ariaControls: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/tab-list/model.d.ts

@@ -1,15 +1,5 @@
-import { GlobalProps, GlobalState, OrientationProps } from '../../shared/model';
-export type DBTabListDefaultProps = {
-    /**
-     * Defines a string value that labels the current element (WAI-ARIA).
-     */
-    ariaLabel?: string;
-    /**
-     * Identifies the element (or elements) that labels the current element (WAI-ARIA).
-     */
-    ariaLabelledby?: string;
-};
-export type DBTabListProps = DBTabListDefaultProps & GlobalProps & OrientationProps;
-export interface DBTabListState extends GlobalState {
-    _id?: string;
-}
+import { GlobalProps } from '../../shared/model';
+export type DBTabListDefaultProps = {};
+export type DBTabListProps = DBTabListDefaultProps & GlobalProps;
+export type DBTabListDefaultState = {};
+export type DBTabListState = DBTabListDefaultState;

package/dist/components/tab-list/tab-list.vue.d.ts

@@ -1,15 +1,12 @@
-import { DBTabListProps } from "./model";
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<DBTabListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBTabListProps> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<import("../..").GlobalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../..").GlobalProps> & Readonly<{}>, {
     id: string;
     children: any;
     className: string;
-    ariaLabel: string;
-    ariaLabelledby: string;
-    orientation: import("../..").OrientationType;
+    propOverrides: import("../..").PropOverridesType;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/tab-panel/model.d.ts

@@ -1,20 +1,10 @@
-import { GlobalProps } from '../../shared/model';
+import { GlobalProps, GlobalState } from '../../shared/model';
 export type DBTabPanelDefaultProps = {
     /**
      * The content if you don't want to use children.
      */
     content?: string;
-    /**
-     * If the panel is hidden.
-     */
-    hidden?: boolean;
-    /**
-     * The id of the tab that labels this panel (WAI-ARIA).
-     */
-    ariaLabelledby?: string;
-    /**
-     * Accessible label for the panel, overrides ariaLabelledby for the accessible name.
-     */
-    ariaLabel?: string;
 };
 export type DBTabPanelProps = DBTabPanelDefaultProps & GlobalProps;
+export type DBTabPanelDefaultState = {};
+export type DBTabPanelState = DBTabPanelDefaultState & GlobalState;

package/dist/components/tab-panel/tab-panel.vue.d.ts

@@ -3,7 +3,13 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<DBTabPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBTabPanelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<DBTabPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBTabPanelProps> & Readonly<{}>, {
+    id: string;
+    children: any;
+    className: string;
+    propOverrides: import("../..").PropOverridesType;
+    content: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/tabs/model.d.ts

@@ -1,4 +1,4 @@
-import { GlobalProps, InitializedState, OrientationProps, TabItemAlignmentProps, WidthType } from '../../shared/model';
+import { AlignmentProps, GlobalProps, InitializedState, InputEvent, OrientationProps, WidthProps } from '../../shared/model';
 import { DBTabItemProps } from '../tab-item/model';
 import { DBTabPanelProps } from '../tab-panel/model';
 export declare const TabsBehaviorList: readonly ["scrollbar", "arrows"];
@@ -19,12 +19,6 @@ export type DBTabsDefaultProps = {
      * Default behavior is auto selecting the first tab, change selected tab by index
      */
     initialSelectedIndex?: number | string;
-    /**
-     * Controlled active tab index. When set, the component becomes controlled:
-     * the consumer is responsible for updating this value in the onIndexChange handler.
-     * Takes precedence over initialSelectedIndex after mount.
-     */
-    activeIndex?: number | string;
     /**
      * Default behavior is auto selecting the first tab, disable it with 'manually'
      */
@@ -37,18 +31,6 @@ export type DBTabsDefaultProps = {
      * Provide simple tabs with label + text as content
      */
     tabs?: DBSimpleTabProps[] | string;
-    /**
-     * Width of the tab-items. Auto width based on tab-item size, full width based on parent elements width.
-     */
-    tabItemWidth?: WidthType | string;
-    /**
-     * Accessible label for the "scroll towards start" button (i18n). Only used with behavior="arrows".
-     */
-    scrollStartLabel?: string;
-    /**
-     * Accessible label for the "scroll towards end" button (i18n). Only used with behavior="arrows".
-     */
-    scrollEndLabel?: string;
 };
 export type DBTabsEventProps = {
     /**
@@ -60,42 +42,26 @@ export type DBTabsEventProps = {
      */
     onIndexChange?: (index?: number) => void;
     /**
-     * Fires when the active tab changes and a `value` prop is set on the tab items.
-     * Payload is the `value` string of the newly active tab item, or undefined
-     * if the tab item has no `value` prop set.
-     * Use this for form binding (e.g. Angular FormControl, React controlled state).
+     * Informs the user if another tab has been selected.
+     */
+    onTabSelect?: (event?: InputEvent<HTMLElement>) => void;
+    /**
+     * Informs the user if another tab has been selected.
      */
-    onValueChange?: (value?: string) => void;
+    tabSelect?: (event?: InputEvent<HTMLElement>) => void;
 };
-export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & TabItemAlignmentProps & DBTabsEventProps;
+export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & WidthProps & AlignmentProps & DBTabsEventProps;
 export type DBTabsDefaultState = {
-    _generatedId: string;
-    _generatedName: string;
-    _id: () => string;
-    _name: () => string;
-    _getScrollContainer: () => Element | null;
-    scroll: (toStart?: boolean) => void;
-    showScrollStart?: boolean;
-    showScrollEnd?: boolean;
-    _isRtl: () => boolean;
+    _name: string;
+    scrollContainer?: Element | null;
+    scroll: (left?: boolean) => void;
+    showScrollLeft?: boolean;
+    showScrollRight?: boolean;
     evaluateScrollButtons: (tabList: Element) => void;
-    _cachedTabs: DBSimpleTabProps[];
-    _updateCachedTabs: () => void;
+    convertTabs: () => DBSimpleTabProps[];
     initTabList: () => void;
-    initTabs: (activeIndex?: number) => void;
-    _resizeObserver?: ResizeObserver | null;
-    _observer?: MutationObserver | null;
-    _pendingRafId: number | null;
-    _scrollListener: {
-        fn: () => void;
-    } | null;
-    activeTabIndex: number;
-    activateTab: (index: number) => void;
-    getTabId: (index: number | string) => string;
-    getPanelId: (index: number | string) => string;
-    handleClick: (event: any) => void;
-    handleKeyDown: (event: any) => void;
-    isIndexActive: (index: number | string) => boolean;
-    getTabItemTabIndex: (index: number | string) => 0 | -1;
+    initTabs: (init?: boolean) => void;
+    handleChange: (event: InputEvent<HTMLElement>) => void;
+    _resizeObserver?: ResizeObserver;
 };
 export type DBTabsState = DBTabsDefaultState & InitializedState;

package/dist/components/tabs/tabs.vue.d.ts

@@ -1,27 +1,25 @@
+import { InputEvent } from "../../shared/model";
 import { DBSimpleTabProps, DBTabsProps } from "./model";
-declare var __VLS_24: {};
+declare var __VLS_30: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_24) => any;
+    default?: (props: typeof __VLS_30) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DBTabsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBTabsProps> & Readonly<{}>, {
     id: string;
     children: any;
     className: string;
-    propOverrides: import("../..").PropOverridesType;
+    propOverrides: import("../../shared/model").PropOverridesType;
     name: string;
     behavior: import("./model").TabsBehaviorType;
-    orientation: import("../..").OrientationType;
+    width: import("../../shared/model").WidthType | string;
+    alignment: import("../../shared/model").AlignmentType | string;
     arrowScrollDistance: number | string;
     initialSelectedIndex: number | string;
-    activeIndex: number | string;
     initialSelectedMode: import("./model").TabsInitialSelectedModeType;
     tabs: DBSimpleTabProps[] | string;
-    tabItemWidth: import("../..").WidthType | string;
-    scrollStartLabel: string;
-    scrollEndLabel: string;
-    tabItemAlignment: import("../..").TabItemAlignmentType | string;
+    orientation: import("../../shared/model").OrientationType;
     onIndexChange: (index?: number) => void;
-    onValueChange: (value?: string) => void;
+    onTabSelect: (event?: InputEvent<HTMLElement>) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;