@db-ux/v-core-components 4.14.0 → 5.0.0

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

@@ -1,12 +1,28 @@
-import type { AlignmentProps, GlobalProps, InitializedState, InputEvent, OrientationProps, OverflowScrollButtonProps, OverflowScrollButtonState, WidthProps } from '../../shared/model.js';
+import type { AlignmentType, GlobalProps, InitializedState, OrientationProps, WidthType } from '../../shared/model.js';
 import type { DBTabItemProps } from '../tab-item/model.js';
 import type { DBTabPanelProps } from '../tab-panel/model.js';
+export type TabItemAlignmentType = AlignmentType;
+export type TabItemAlignmentProps = {
+    /**
+     * Define the tab-item alignment in full width
+     */
+    tabItemAlignment?: TabItemAlignmentType | string;
+};
 export declare const TabsBehaviorList: readonly ["scrollbar", "arrows"];
 export type TabsBehaviorType = (typeof TabsBehaviorList)[number];
 export declare const TabsInitialSelectedModeList: readonly ["auto", "manually"];
 export type TabsInitialSelectedModeType = (typeof TabsInitialSelectedModeList)[number];
-export type DBSimpleTabProps = DBTabItemProps & DBTabPanelProps;
+export type DBSimpleTabProps = DBTabItemProps & DBTabPanelProps & {
+    /**
+     * Accessible label for icon-only tabs (rendered as aria-label on the tab button).
+     */
+    ariaLabel?: string;
+};
 export type DBTabsDefaultProps = {
+    /**
+     * Change amount of distance if you click on an arrow, only available with behavior="arrows"
+     */
+    arrowScrollDistance?: number | string;
     /**
      * Show a scrollbar or buttons with arrows to navigate for horizontal tabs with overflow visible
      */
@@ -15,45 +31,104 @@ 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'
      */
     initialSelectedMode?: TabsInitialSelectedModeType;
     /**
-     * The name of the tab bar, is required for grouping multiple tabs together. Will overwrite names from children.
+     * Accessible label for the tab bar (used as aria-label on the tablist).
      */
-    name?: string;
+    label?: string;
     /**
      * 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 = {
     /**
      * Informs the user if the current tab index has changed.
      */
-    indexChange?: (index?: number) => void;
+    indexChange?: (index: number) => void;
     /**
      * Informs the user if the current tab index has changed.
      */
-    onIndexChange?: (index?: number) => void;
+    onIndexChange?: (index: number) => void;
     /**
-     * Informs the user if another tab has been selected.
+     * 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).
      */
-    onTabSelect?: (event?: InputEvent<HTMLElement>) => void;
+    valueChange?: (value?: string) => void;
     /**
-     * Informs the user if another tab has been selected.
+     * 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).
      */
-    tabSelect?: (event?: InputEvent<HTMLElement>) => void;
+    onValueChange?: (value?: string) => void;
 };
-export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & WidthProps & AlignmentProps & OverflowScrollButtonProps & DBTabsEventProps;
+export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & TabItemAlignmentProps & DBTabsEventProps;
 export type DBTabsDefaultState = {
-    _name: string;
-    scrollContainer?: Element | null;
-    convertTabs: () => DBSimpleTabProps[];
+    _id?: string;
+    _appliedLabel?: string;
+    resetIds: () => void;
+    _getScrollContainer: () => Element | null;
+    scroll: (toStart?: boolean) => void;
+    showScrollStart?: boolean;
+    showScrollEnd?: boolean;
+    _isRtl: () => boolean;
+    evaluateScrollButtons: (tabList: Element) => void;
+    getTabs: () => DBSimpleTabProps[];
+    getInitialIndex: () => number;
+    getRenderIndex: () => number;
+    getRenderFocusIndex: () => number;
+    getActiveChildIndex: () => number;
+    shouldUseActiveChild: (hashApplied: boolean) => boolean;
+    moveRovingTabindex: (focusIndex: number) => void;
+    _isOwnedPanel: (panel: HTMLElement) => boolean;
     initTabList: () => void;
-    initTabs: (init?: boolean) => void;
-    handleChange: (event: InputEvent<HTMLElement>) => void;
-    _resizeObserverCallbackId?: string;
+    _teardownScrollHandlers: () => void;
+    _resolveHashIndex: () => {
+        startIndex: number;
+        hashApplied: boolean;
+    };
+    _setupObserver: () => void;
+    initTabs: () => void;
+    syncSelection: (activeIndex?: number) => void;
+    _tabButtons: HTMLElement[];
+    _tabPanels: HTMLElement[];
+    _resizeObserver?: ResizeObserver | null;
+    _observer?: MutationObserver | null;
+    _pendingRafId: number | null;
+    _scrollListener: {
+        fn: () => void;
+    } | null;
+    _focusgroupSupported: boolean;
+    _activeIndex: number;
+    activateTab: (index: number) => void;
+    getTabId: (index: number | string) => string | undefined;
+    getPanelId: (index: number | string) => string | undefined;
+    getBaseId: () => string | undefined;
+    handleClick: (event: any) => void;
+    handleKeyDown: (event: any) => void;
 };
-export type DBTabsState = DBTabsDefaultState & InitializedState & OverflowScrollButtonState;
+export type DBTabsState = DBTabsDefaultState & InitializedState;

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

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