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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @db-ux/v-core-components
 
+## 4.7.0
+
+### Minor Changes
+
+- DBSelect: correctly hiding empty `option` element for _placeholder_ or _floating label_ components with property `showEmptyOption=false` - [see commit ec01b5c](https://github.com/db-ux-design-system/core-web/commit/ec01b5cb56e1fc05911d33cbff0fc8f385644628)
+
+- refactor(notification): not enforcing a paragraph for it's contents anymore. You could set any block level elements now as children. - [see commit 3170b3a](https://github.com/db-ux-design-system/core-web/commit/3170b3a6ef57bb73fa32b3176b7b8cf651a38641) and [commit 2ebe315](https://github.com/db-ux-design-system/core-web/commit/2ebe3156cd45e3702cf4acdc4224cd34da31d907)
+
 ## 4.6.1
 
 ### Patch Changes

package/agent/Tabs.md

@@ -8,41 +8,44 @@
   <h2>1. Default Tabs</h2>
   <DBTabs
     ><DBTabList
-      ><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
+      ><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
   >
   <h2>2. Behavior Variants</h2>
   <DBTabs behavior="scrollbar"
     ><DBTabList
-      ><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
+      ><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
   >
   <DBTabs behavior="arrows"
     ><DBTabList
-      ><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
+      ><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
   >
   <h2>3. Initial Selected Index</h2>
   <DBTabs :initialSelectedIndex="1"
     ><DBTabList
-      ><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
+      ><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
   >
   <h2>4. Initial Selected Mode</h2>
   <DBTabs initialSelectedMode="manually"
     ><DBTabList
-      ><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
+      ><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
   >
 </template>
 

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

@@ -1,9 +1,5 @@
-import { ActiveProps, ChangeEventProps, ChangeEventState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InitializedState, NameProps, NameState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps } from '../../shared/model';
+import { ActiveProps, ClickEventProps, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InitializedState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, WidthProps } 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.
      */
@@ -16,12 +12,33 @@ 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 = GlobalProps & DBTabItemDefaultProps & IconProps & IconTrailingProps & IconLeadingProps & ShowIconLeadingProps & ShowIconTrailingProps & ActiveProps & ChangeEventProps<HTMLInputElement> & ShowIconProps & NameProps;
+export type DBTabItemProps = DBTabItemDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & ShowIconProps & IconTrailingProps & IconLeadingProps & ShowIconTrailingProps & ShowIconLeadingProps & ActiveProps & WidthProps;
 export type DBTabItemDefaultState = {
-    _selected: boolean;
-    _listenerAdded: boolean;
-    boundSetSelectedOnChange?: (event: any) => void;
-    setSelectedOnChange: (event: any) => void;
+    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;
 };
-export type DBTabItemState = DBTabItemDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & InitializedState & NameState;
+export type DBTabItemState = DBTabItemDefaultState & GlobalState & InitializedState;

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

@@ -3,19 +3,13 @@ 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, {
-    "update:checked": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<DBTabItemProps> & Readonly<{
-    "onUpdate:checked"?: ((...args: any[]) => any) | undefined;
-}>, {
+declare const __VLS_base: import("vue").DefineComponent<DBTabItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBTabItemProps> & Readonly<{}>, {
     id: string;
-    children: any;
     className: string;
-    propOverrides: import("../..").PropOverridesType;
-    name: string;
     label: string;
+    value: string;
     disabled: boolean | string;
-    onChange: (event: import("../..").ChangeEvent<HTMLInputElement>) => void;
+    onClick: (event: import("../..").ClickEvent<HTMLButtonElement>) => void;
     icon: import("@db-ux/core-foundations").IconTypes;
     showIcon: boolean | string;
     showIconLeading: boolean | string;
@@ -23,8 +17,9 @@ 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;
-    checked: boolean | string;
+    tabIndex: number | 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,5 +1,15 @@
-import { GlobalProps } from '../../shared/model';
-export type DBTabListDefaultProps = {};
-export type DBTabListProps = DBTabListDefaultProps & GlobalProps;
-export type DBTabListDefaultState = {};
-export type DBTabListState = DBTabListDefaultState;
+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;
+}

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

@@ -1,12 +1,15 @@
+import { DBTabListProps } from "./model";
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<import("../..").GlobalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../..").GlobalProps> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<DBTabListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBTabListProps> & Readonly<{}>, {
     id: string;
     children: any;
     className: string;
-    propOverrides: import("../..").PropOverridesType;
+    ariaLabel: string;
+    ariaLabelledby: string;
+    orientation: import("../..").OrientationType;
 }, {}, {}, {}, 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,10 +1,20 @@
-import { GlobalProps, GlobalState } from '../../shared/model';
+import { GlobalProps } 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,13 +3,7 @@ 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<{}>, {
-    id: string;
-    children: any;
-    className: string;
-    propOverrides: import("../..").PropOverridesType;
-    content: string;
-}, {}, {}, {}, 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<{}>, {}, {}, {}, {}, 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 { AlignmentProps, GlobalProps, InitializedState, InputEvent, OrientationProps, WidthProps } from '../../shared/model';
+import { GlobalProps, InitializedState, OrientationProps, TabItemAlignmentProps, WidthType } from '../../shared/model';
 import { DBTabItemProps } from '../tab-item/model';
 import { DBTabPanelProps } from '../tab-panel/model';
 export declare const TabsBehaviorList: readonly ["scrollbar", "arrows"];
@@ -19,6 +19,12 @@ 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'
      */
@@ -31,6 +37,18 @@ 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 = {
     /**
@@ -42,26 +60,42 @@ export type DBTabsEventProps = {
      */
     onIndexChange?: (index?: number) => void;
     /**
-     * Informs the user if another tab has been selected.
-     */
-    onTabSelect?: (event?: InputEvent<HTMLElement>) => 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 & DBTabsEventProps;
+export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & TabItemAlignmentProps & DBTabsEventProps;
 export type DBTabsDefaultState = {
-    _name: string;
-    scrollContainer?: Element | null;
-    scroll: (left?: boolean) => void;
-    showScrollLeft?: boolean;
-    showScrollRight?: boolean;
+    _generatedId: string;
+    _generatedName: string;
+    _id: () => string;
+    _name: () => string;
+    _getScrollContainer: () => Element | null;
+    scroll: (toStart?: boolean) => void;
+    showScrollStart?: boolean;
+    showScrollEnd?: boolean;
+    _isRtl: () => boolean;
     evaluateScrollButtons: (tabList: Element) => void;
-    convertTabs: () => DBSimpleTabProps[];
+    _cachedTabs: DBSimpleTabProps[];
+    _updateCachedTabs: () => void;
     initTabList: () => void;
-    initTabs: (init?: boolean) => void;
-    handleChange: (event: InputEvent<HTMLElement>) => void;
-    _resizeObserver?: ResizeObserver;
+    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;
 };
 export type DBTabsState = DBTabsDefaultState & InitializedState;

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

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