@knime/kds-components 0.18.3 → 0.19.0

package/dist/layouts/TabBar/KdsTabBar.vue.d.ts

@@ -0,0 +1,18 @@
+import { KdsTabBarProps } from './types';
+type __VLS_Props = KdsTabBarProps;
+type __VLS_PublicProps = {
+    modelValue?: string | number;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {
+    size: import('./types').KdsTabBarSize;
+    disabled: boolean;
+    fullWidth: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    availableWidthContainer: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=KdsTabBar.vue.d.ts.map

package/dist/layouts/TabBar/KdsTabBar.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KdsTabBar.vue.d.ts","sourceRoot":"","sources":["../../../src/layouts/TabBar/KdsTabBar.vue"],"names":[],"mappings":"AA0UA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,SAAS,CAAC;AAG7D,KAAK,WAAW,GAAG,cAAc,CAAC;AAoJlC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B,GAAG,WAAW,CAAC;;;;;;;;;;;;AAoIhB,wBAUG"}

package/dist/layouts/TabBar/TabBarItemAccessory.vue.d.ts

@@ -0,0 +1,10 @@
+import { KdsIconSize } from '../../accessories/Icon/types';
+import { KdsTabBarItemAccessory } from './types';
+type __VLS_Props = {
+    accessory: KdsTabBarItemAccessory;
+    iconSize?: KdsIconSize;
+    disabled?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=TabBarItemAccessory.vue.d.ts.map

package/dist/layouts/TabBar/TabBarItemAccessory.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBarItemAccessory.vue.d.ts","sourceRoot":"","sources":["../../../src/layouts/TabBar/TabBarItemAccessory.vue"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAGhE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,sBAAsB,CAAC;IAClC,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;AAqEF,wBAMG"}

package/dist/layouts/TabBar/enums.d.ts

@@ -0,0 +1,6 @@
+export declare const kdsTabBarSize: {
+    readonly SMALL: "small";
+    readonly LARGE: "large";
+};
+export declare const kdsTabBarSizes: ("small" | "large")[];
+//# sourceMappingURL=enums.d.ts.map

package/dist/layouts/TabBar/enums.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enums.d.ts","sourceRoot":"","sources":["../../../src/layouts/TabBar/enums.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;CAGhB,CAAC;AAEX,eAAO,MAAM,cAAc,uBAA+B,CAAC"}

package/dist/layouts/TabBar/index.d.ts

@@ -0,0 +1,4 @@
+export { default as KdsTabBar } from './KdsTabBar.vue';
+export { kdsTabBarSize, kdsTabBarSizes } from './enums';
+export type * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/layouts/TabBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/TabBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAGvD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGxD,mBAAmB,SAAS,CAAC"}

package/dist/layouts/TabBar/types.d.ts

@@ -0,0 +1,40 @@
+import { KdsIconName } from '../../accessories/Icon/types';
+import { KdsLiveStatusStatus } from '../../accessories/LiveStatus/types';
+import { kdsTabBarSize } from './enums';
+export type KdsTabBarSize = (typeof kdsTabBarSize)[keyof typeof kdsTabBarSize];
+export type KdsTabBarIconAccessory = {
+    type: "icon";
+    name: KdsIconName;
+};
+export type KdsTabBarLiveStatusAccessory = {
+    type: "liveStatus";
+    status: KdsLiveStatusStatus;
+};
+export type KdsTabBarItemAccessory = KdsTabBarIconAccessory | KdsTabBarLiveStatusAccessory;
+export type KdsTabBarItem = {
+    /** Unique HTML id attribute for the tab button element that should be linked to the panel by `aria-labelledby`. */
+    id: string;
+    /** Unique value used to identify the tab and to track the selected tab via v-model. */
+    value: string | number;
+    /** Visible text label displayed inside the tab. */
+    label: string;
+    /** The id of the associated tab panel element, used for `aria-controls`. */
+    panelId: string;
+    /** Optional accessory (icon or live status) displayed before the label. Icon accessories are hidden automatically when the container is too narrow. */
+    accessory?: KdsTabBarItemAccessory;
+    /** Optional tooltip text. Falls back to `label` when not provided. */
+    title?: string;
+    /** Whether this individual tab is disabled. */
+    disabled?: boolean;
+};
+export type KdsTabBarProps = {
+    /** The list of tabs to render. */
+    tabs: KdsTabBarItem[];
+    /** The size variant of the tab bar. @default "small" */
+    size?: KdsTabBarSize;
+    /** Whether tabs should stretch to fill the full available width. @default false */
+    fullWidth?: boolean;
+    /** Whether the entire tab bar is disabled. Overrides individual tab `disabled` states. @default false */
+    disabled?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/layouts/TabBar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/layouts/TabBar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAE9E,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAE/E,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,EAAE,mBAAmB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAC9B,sBAAsB,GACtB,4BAA4B,CAAC;AAEjC,MAAM,MAAM,aAAa,GAAG;IAC1B,mHAAmH;IACnH,EAAE,EAAE,MAAM,CAAC;IACX,uFAAuF;IACvF,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,OAAO,EAAE,MAAM,CAAC;IAChB,uJAAuJ;IACvJ,SAAS,CAAC,EAAE,sBAAsB,CAAC;IACnC,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,kCAAkC;IAClC,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,wDAAwD;IACxD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yGAAyG;IACzG,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

package/dist/layouts/TabBar/useTabBarAdaptiveLayout.d.ts

@@ -0,0 +1,37 @@
+import { Ref } from 'vue';
+import { KdsTabBarItem } from './types';
+/**
+ * Adapts the tab bar layout when space is constrained:
+ *
+ * 1. **Icon hiding**: icons are removed first to free up space for labels.
+ * 2. **Ellipsis**: labels shrink down to `min(natural label width, minTabWidth)`,
+ *    showing an ellipsis when they are larger.
+ */
+export declare const useTabBarAdaptiveLayout: ({ width, tabs, containerEl, fullWidth, minTabWidth, }: {
+    /**
+     * Potentially available width to render tabs
+     */
+    width: Ref<number>;
+    tabs: Ref<readonly KdsTabBarItem[]>;
+    /**
+     * Container element that holds the tab items.
+     * Used to determine whether the tab bar overflows horizontally.
+     */
+    containerEl: Ref<HTMLElement | null>;
+    /**
+     * Whether the tab bar is in full-width mode.
+     * When true, per-tab min-width adjustments are skipped.
+     */
+    fullWidth?: Ref<boolean>;
+    /**
+     * CSS custom property name for the minimum tab width (e.g. "--kds-dimension-component-width-4x").
+     * Used both for CSS min-width (via v-bind) and as the measurement floor.
+     * When omitted, per-tab min-width adjustments are skipped.
+     */
+    minTabWidth?: string;
+}) => {
+    shouldHideIcons: import('vue').ComputedRef<boolean>;
+    setItemEl: (key: string | number, el: unknown) => void;
+    minTabWidth: string | undefined;
+};
+//# sourceMappingURL=useTabBarAdaptiveLayout.d.ts.map

package/dist/layouts/TabBar/useTabBarAdaptiveLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabBarAdaptiveLayout.d.ts","sourceRoot":"","sources":["../../../src/layouts/TabBar/useTabBarAdaptiveLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAY/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAAI,uDAMrC;IACD;;OAEG;IACH,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACnB,IAAI,EAAE,GAAG,CAAC,SAAS,aAAa,EAAE,CAAC,CAAC;IACpC;;;OAGG;IACH,WAAW,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;;qBASyB,MAAM,GAAG,MAAM,MAAM,OAAO;;CAmIrD,CAAC"}

package/dist/layouts/index.d.ts

@@ -2,4 +2,6 @@ export * from './EmptyState';
 export type * from './EmptyState';
 export * from './KdsCardClickable';
 export type * from './KdsCardClickable';
+export * from './TabBar';
+export type * from './TabBar';
 //# sourceMappingURL=index.d.ts.map

package/dist/layouts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,mBAAmB,cAAc,CAAC;AAElC,cAAc,oBAAoB,CAAC;AACnC,mBAAmB,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,mBAAmB,cAAc,CAAC;AAElC,cAAc,oBAAoB,CAAC;AACnC,mBAAmB,oBAAoB,CAAC;AAExC,cAAc,UAAU,CAAC;AACzB,mBAAmB,UAAU,CAAC"}

package/dist/overlays/Modal/KdsModal.vue.d.ts

@@ -4,7 +4,7 @@ declare function __VLS_template(): {
     slots: {
         default?(_: {
             headline: string;
-            leadingIcon: "replace" | "search" | "bold" | "link" | "filter" | "time" | "stop" | "text" | "add-user" | "ai-general" | "annotation-mode" | "arrow-down" | "arrow-up" | "arrows-expand" | "arrows-move" | "arrows-order" | "back" | "calendar" | "case-sensitive" | "center-aligned" | "checkmark" | "chevron-down" | "chevron-left-double" | "chevron-left" | "chevron-right-double" | "chevron-right" | "chevron-up" | "circle-error" | "circle-info" | "circle-question" | "circle-success" | "cloud-download" | "cloud-knime" | "cloud-pending-changes" | "cloud-synced" | "cloud-upload" | "cloud-workflow" | "code-block" | "color-picker" | "comment" | "component" | "connection" | "copy" | "cursor" | "data-app" | "data-value-view" | "date-time" | "db-database" | "db-schema" | "db-table-view" | "db-table" | "deploy" | "detect" | "divider" | "duration" | "edit" | "education" | "error-panel" | "execute-all" | "execute" | "expand-panel" | "extension-community" | "extension" | "external-link" | "eye" | "file-export" | "file-text" | "file" | "flow-variable-default" | "flow-variable-in-out" | "flow-variable-in" | "flow-variable-out" | "folder-plus" | "folder-workflow" | "folder" | "forum" | "function-catalog" | "home" | "import" | "info" | "interval" | "italic" | "key" | "layout-editor" | "left-aligned" | "like" | "limit" | "linked-metanode" | "list-bulletpoint" | "list-number" | "list-thumbs" | "list" | "local-filesystem" | "lock" | "metanode" | "mini-map" | "minimize-dialog" | "minimize-side-panel" | "minus" | "more-actions" | "node-stack" | "nodes-align-horiz" | "nodes-align-vert" | "open-in-new-window" | "pan-mode" | "parameter" | "pending-changes" | "placeholder" | "plus" | "quote" | "re-execution" | "redo" | "regex" | "reload" | "rename" | "reset-all" | "resume-execution" | "right-aligned" | "rocket" | "save-as" | "save" | "schedule" | "secret-store" | "selected-cancel" | "selected-execution" | "selected-reset" | "send" | "server-rack-workflow" | "service" | "settings" | "share" | "shortcuts" | "sort-ascending" | "sort-descending" | "space-local" | "space-private" | "space" | "stepwise-execution" | "strikethrough" | "team" | "textstyles" | "thumbs-down" | "thumbs-up" | "to-bottom" | "to-top" | "trash" | "trigger" | "underline" | "undo" | "unlink" | "user" | "version" | "view-cards" | "warning" | "workflow" | "x-close";
+            leadingIcon: "replace" | "search" | "bold" | "link" | "filter" | "time" | "stop" | "text" | "add-user" | "ai-general" | "annotation-mode" | "arrow-down" | "arrow-up" | "arrows-expand" | "arrows-move" | "arrows-order" | "back" | "calendar" | "case-sensitive" | "center-aligned" | "checkmark" | "chevron-down" | "chevron-left-double" | "chevron-left" | "chevron-right-double" | "chevron-right" | "chevron-up" | "circle-error" | "circle-info" | "circle-question" | "circle-success" | "cloud-download" | "cloud-knime" | "cloud-pending-changes" | "cloud-synced" | "cloud-upload" | "cloud-workflow" | "code-block" | "color-picker" | "comment" | "component" | "connection" | "copy" | "cursor" | "data-app" | "data-value-view" | "date-time" | "db-browse" | "db-database" | "db-fetch" | "db-schema" | "db-table-view" | "db-table" | "deploy" | "detect" | "divider" | "duration" | "edit" | "education" | "error-panel" | "execute-all" | "execute" | "expand-panel" | "extension-community" | "extension" | "external-link" | "eye" | "file-export" | "file-text" | "file" | "flow-variable-default" | "flow-variable-in-out" | "flow-variable-in" | "flow-variable-out" | "folder-plus" | "folder-workflow" | "folder" | "forum" | "function-catalog" | "home" | "import" | "info" | "interval" | "italic" | "key" | "layout-editor" | "left-aligned" | "like" | "limit" | "linked-metanode" | "list-bulletpoint" | "list-number" | "list-thumbs" | "list" | "local-filesystem" | "lock" | "metanode" | "mini-map" | "minimize-dialog" | "minimize-side-panel" | "minus" | "more-actions" | "node-stack" | "nodes-align-horiz" | "nodes-align-vert" | "open-in-new-window" | "pan-mode" | "parameter" | "pending-changes" | "placeholder" | "plus" | "quote" | "re-execution" | "redo" | "regex" | "reload" | "rename" | "reset-all" | "resume-execution" | "right-aligned" | "rocket" | "save-as" | "save" | "schedule" | "secret-store" | "selected-cancel" | "selected-execution" | "selected-reset" | "send" | "server-rack-workflow" | "service" | "settings" | "share" | "shortcuts" | "sort-ascending" | "sort-descending" | "space-local" | "space-private" | "space" | "stepwise-execution" | "strikethrough" | "team" | "textstyles" | "thumbs-down" | "thumbs-up" | "to-bottom" | "to-top" | "trash" | "trigger" | "underline" | "undo" | "unlink" | "user" | "version" | "view-cards" | "warning" | "workflow" | "x-close";
             variant: import('./types').KdsModalVariant;
             overflow: "auto" | "hidden" | "visible";
             onClose: (event?: Event) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-components",
-  "version": "0.18.3",
+  "version": "0.19.0",
   "description": "Package containing basic Vue components of the KNIME Design System",
   "repository": {
     "type": "git",
@@ -36,7 +36,7 @@
   "dependencies": {
     "@knime/utils": "^1.9.2",
     "consola": "^3.4.2",
-    "@knime/kds-styles": "^0.18.3"
+    "@knime/kds-styles": "^0.19.0"
   },
   "devDependencies": {
     "@storybook/vue3-vite": "^10.3.1",