@quidgest/ui 0.18.0 → 0.19.0

package/esm/components/QSidebar/index.d.ts

@@ -1,7 +1,9 @@
 declare const QSidebar: {
     new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
         modelValue?: string;
-    } & import('./types').QSidebarAnchorProps & {
+    } & import('../../types/component').QBaseComponentProps & {
+        anchorWidth?: number;
+        showLabels?: boolean;
         position?: "left" | "right";
     }> & Readonly<{
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
@@ -19,7 +21,30 @@ declare const QSidebar: {
     }, import('vue').PublicProps, {
         position: "left" | "right";
         anchorWidth: number;
-    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        anchor: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+            anchorWidth?: number;
+            modelValue?: string;
+            items: import('./context').SidebarItemRegistration[];
+        }> & Readonly<{}>, {
+            itemsEl: Readonly<import('vue').ShallowRef<HTMLElement | null>>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+            items: HTMLDivElement;
+        }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            anchorWidth?: number;
+            modelValue?: string;
+            items: import('./context').SidebarItemRegistration[];
+        }> & Readonly<{}>, {
+            itemsEl: Readonly<import('vue').ShallowRef<HTMLElement | null>>;
+        }, {}, {}, {}, {}> | null;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -28,7 +53,9 @@ declare const QSidebar: {
         Defaults: {};
     }, Readonly<{
         modelValue?: string;
-    } & import('./types').QSidebarAnchorProps & {
+    } & import('../../types/component').QBaseComponentProps & {
+        anchorWidth?: number;
+        showLabels?: boolean;
         position?: "left" | "right";
     }> & Readonly<{
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
@@ -45,7 +72,9 @@ declare const QSidebar: {
     __isSuspense?: never;
 } & import('vue').ComponentOptionsBase<Readonly<{
     modelValue?: string;
-} & import('./types').QSidebarAnchorProps & {
+} & import('../../types/component').QBaseComponentProps & {
+    anchorWidth?: number;
+    showLabels?: boolean;
     position?: "left" | "right";
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
@@ -64,10 +93,139 @@ declare const QSidebar: {
     position: "left" | "right";
     anchorWidth: number;
 }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-    $slots: Partial<Record<`anchor:${string}`, (_: {
-        item: import('./types').QSidebarAnchorItemConfig;
-    }) => any>> & Partial<Record<`header.prepend:${string}`, (_: {}) => any>> & Partial<Record<`header:${string}`, (_: {}) => any>> & Partial<Record<`header.append:${string}`, (_: {}) => any>> & Partial<Record<`content:${string}`, (_: {}) => any>> & Partial<Record<`footer:${string}`, (_: {}) => any>>;
+    $slots: {
+        default?(_: {}): any;
+    };
 });
-export { QSidebar };
+declare const QSidebarItem: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./types').QSidebarItemProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        showGrip: boolean;
+        initialWidth: import('./types').QSidebarPanelSize;
+        minWidth: import('./types').QSidebarPanelSize;
+        maxWidth: import('./types').QSidebarPanelSize;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        anchor: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly modelValue?: boolean | undefined;
+                readonly id?: string | undefined;
+                readonly class?: string | unknown[] | undefined;
+                readonly label?: string | undefined;
+                readonly variant?: import('..').QButtonVariant | undefined;
+                readonly color?: string | undefined;
+                readonly borderless?: boolean | undefined;
+                readonly elevated?: boolean | undefined;
+                readonly block?: boolean | undefined;
+                readonly size?: import('..').QButtonSize | undefined;
+                readonly iconPos?: import('..').QButtonIconPosition | undefined;
+                readonly pill?: boolean | undefined;
+                readonly disabled?: boolean | undefined;
+                readonly loading?: boolean | undefined;
+                readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: import('vue').Attrs;
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: "update:modelValue", value: boolean) => void;
+            $el: HTMLButtonElement;
+            $options: import('vue').ComponentOptionsBase<Readonly<{
+                modelValue?: boolean;
+            } & import('../../types/component').QBaseComponentProps & {
+                label?: string;
+                variant?: import('..').QButtonVariant;
+                color?: string;
+                borderless?: boolean;
+                elevated?: boolean;
+                block?: boolean;
+                size?: import('..').QButtonSize;
+                iconPos?: import('..').QButtonIconPosition;
+                pill?: boolean;
+                disabled?: boolean;
+                loading?: boolean;
+            }> & Readonly<{
+                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+            }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                "update:modelValue": (value: boolean) => any;
+            }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{}> & Omit<Readonly<{
+            modelValue?: boolean;
+        } & import('../../types/component').QBaseComponentProps & {
+            label?: string;
+            variant?: import('..').QButtonVariant;
+            color?: string;
+            borderless?: boolean;
+            elevated?: boolean;
+            block?: boolean;
+            size?: import('..').QButtonSize;
+            iconPos?: import('..').QButtonIconPosition;
+            pill?: boolean;
+            disabled?: boolean;
+            loading?: boolean;
+        }> & Readonly<{
+            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+        }>, never> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+            };
+        }) | null;
+    }, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('./types').QSidebarItemProps> & Readonly<{}>, {}, {}, {}, {}, {
+        showGrip: boolean;
+        initialWidth: import('./types').QSidebarPanelSize;
+        minWidth: import('./types').QSidebarPanelSize;
+        maxWidth: import('./types').QSidebarPanelSize;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('./types').QSidebarItemProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    showGrip: boolean;
+    initialWidth: import('./types').QSidebarPanelSize;
+    minWidth: import('./types').QSidebarPanelSize;
+    maxWidth: import('./types').QSidebarPanelSize;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        anchor?(_: {}): any;
+        'header.prepend'?(_: {}): any;
+        header?(_: {}): any;
+        'header.append'?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+});
+export { QSidebar, QSidebarItem };
 export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/esm/components/QSidebar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QSidebar/index.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA6B,CAAA;AAG3C,OAAO,EAAE,QAAQ,EAAE,CAAA;AAGnB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QSidebar/index.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA6B,CAAA;AAC3C,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAO0z0B,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAP/40B,CAAA;AAGnD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAA;AAGjC,cAAc,SAAS,CAAA"}

package/esm/components/QSidebar/index.js

@@ -1,6 +1,7 @@
 import { setupPropsProxy as e } from "../../utils/setupPropsProxy.js";
 import t from "./QSidebar2.vue.js";
+import n from "./QSidebarItem2.vue.js";
 //#region src/components/QSidebar/index.ts
-var n = e(t);
+var r = e(t), i = e(n);
 //#endregion
-export { n as QSidebar };
+export { r as QSidebar, i as QSidebarItem };

package/esm/components/QSidebar/types.d.ts

@@ -1,41 +1,31 @@
+import { QBaseComponentProps } from '../../types/component';
 import { Icon } from '../QIcon';
-/**
- * Defines the base properties for a sidebar anchor item.
- */
-type QSidebarAnchorItemBaseConfig = {
-    /** Unique identifier for the sidebar item. */
-    id: string;
-    /** Display title of the sidebar item. */
-    title: string;
-    /** Optional icon to be displayed alongside the title. */
-    icon?: Icon;
-};
 /**
  * Predefined panel size options for the sidebar.
- * These sizes help maintain a consistent and adjustable sidebar layout.
  */
-export type QSidebarPanelSize = 'small' | 'medium' | 'large';
+export type QSidebarPanelSize = 'small' | 'medium' | 'large' | 'xlarge' | 'block';
 /**
- * Properties for a sidebar item, extending the base item properties,
- * and adding options for resizability and panel dimensions.
+ * Internal panel properties used by {@link QSidebarPanel}.
  */
-export type QSidebarAnchorItemConfig = QSidebarAnchorItemBaseConfig & {
-    /** Whether the panel is resizable by the user. */
+export type QSidebarPanelProps = {
+    /**
+     * Display title of the panel header.
+     *
+     * @category Content
+     */
+    title?: string;
+    /**
+     * Whether the panel is resizable by the user.
+     *
+     * @category Behavior
+     */
     resizable?: boolean;
-    /** Whether to display the resize grip. Only applies if `resizable` is true. */
+    /**
+     * Whether to display the resize grip. Only applies if `resizable` is true.
+     *
+     * @category Presentation
+     */
     showGrip?: boolean;
-    /** Initial panel width using predefined size options. */
-    initialWidth?: QSidebarPanelSize;
-    /** Minimum allowed width for the panel (by predefined size). */
-    minWidth?: QSidebarPanelSize;
-    /** Maximum allowed width for the panel (by predefined size). */
-    maxWidth?: QSidebarPanelSize;
-};
-/**
- * Extended panel properties used internally for rendering active panel views.
- * Inherits from `QSidebarAnchorItemProps` with adjustments for resize position.
- */
-export type QSidebarPanelProps = Omit<QSidebarAnchorItemConfig, 'id'> & {
     /**
      * Position of the resize grip relative to the panel.
      *
@@ -44,16 +34,68 @@ export type QSidebarPanelProps = Omit<QSidebarAnchorItemConfig, 'id'> & {
     resizePosition?: 'left' | 'right';
 };
 /**
- * Properties for configuring the anchor section of the sidebar.
- * Includes the width of the anchor section and panel configurations.
+ * Props for the {@link QSidebarItem} component.
+ *
+ * @extends QBaseComponentProps
  */
-export type QSidebarAnchorProps = {
+export type QSidebarItemProps = QBaseComponentProps & {
     /**
-     * List of panels that can be anchored in the sidebar.
+     * Display title of the sidebar item.
      *
      * @category Content
      */
-    panels?: QSidebarAnchorItemConfig[];
+    title?: string;
+    /**
+     * Optional icon to be displayed alongside the title.
+     *
+     * @category Content
+     */
+    icon?: Icon;
+    /**
+     * Identity used by `v-model` on `QSidebar`.
+     *
+     * Auto-generated when omitted; prefer an explicit value for controlled usage.
+     *
+     * @category Identification
+     */
+    value?: string;
+    /**
+     * Whether the panel is resizable by the user.
+     *
+     * @category Behavior
+     */
+    resizable?: boolean;
+    /**
+     * Whether to display the resize grip. Only applies if `resizable` is true.
+     *
+     * @category Presentation
+     */
+    showGrip?: boolean;
+    /**
+     * Initial panel width using predefined size options.
+     *
+     * @category Presentation
+     */
+    initialWidth?: QSidebarPanelSize;
+    /**
+     * Minimum allowed width for the panel (by predefined size).
+     *
+     * @category Presentation
+     */
+    minWidth?: QSidebarPanelSize;
+    /**
+     * Maximum allowed width for the panel (by predefined size).
+     *
+     * @category Presentation
+     */
+    maxWidth?: QSidebarPanelSize;
+};
+/**
+ * Props for the {@link QSidebar} component.
+ *
+ * @extends QBaseComponentProps
+ */
+export type QSidebarProps = QBaseComponentProps & {
     /**
      * Width of the anchor section (in pixels).
      *
@@ -66,12 +108,6 @@ export type QSidebarAnchorProps = {
      * @category Presentation
      */
     showLabels?: boolean;
-};
-/**
- * Complete set of props for the `QSidebar` component, combining anchor section props
- * with additional sidebar position configuration.
- */
-export type QSidebarProps = QSidebarAnchorProps & {
     /**
      * Position of the sidebar on the screen. Can be either 'left' or 'right'.
      *
@@ -79,5 +115,4 @@ export type QSidebarProps = QSidebarAnchorProps & {
      */
     position?: 'left' | 'right';
 };
-export {};
 //# sourceMappingURL=types.d.ts.map

package/esm/components/QSidebar/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QSidebar/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAEpC;;GAEG;AACH,KAAK,4BAA4B,GAAG;IACnC,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAA;IACV,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,IAAI,CAAC,EAAE,IAAI,CAAA;CACX,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE5D;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG,4BAA4B,GAAG;IACrE,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yDAAyD;IACzD,YAAY,CAAC,EAAE,iBAAiB,CAAA;IAChC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,iBAAiB,CAAA;CAC5B,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,wBAAwB,EAAE,IAAI,CAAC,GAAG;IACvE;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CACjC,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,wBAAwB,EAAE,CAAA;IAEnC;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG;IACjD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC3B,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QSidebar/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAChE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAEpC;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEjF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAChC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CACjC,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG,mBAAmB,GAAG;IACrD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAA;IAEX;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAA;IAEhC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAA;CAC5B,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG;IACjD;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC3B,CAAA"}

package/esm/components/QTabs/QTab.d.ts

@@ -4,6 +4,7 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         'title.prepend'?(_: {}): any;
+        title?(_: {}): any;
         'title.append'?(_: {}): any;
         default?(_: {}): any;
     };

package/esm/components/QTabs/QTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QTab.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QTabs/QTab.vue"],"names":[],"mappings":"AAyCA;AAqMC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAW3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAiJzC,iBAAS,cAAc;WAoHT,OAAO,IAA6B;;iCAbZ,GAAG;gCACJ,GAAG;yBACV,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAmEqnX,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;EAnD3wX;AAqBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA6BioX,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;OArB1wX,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"QTab.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QTabs/QTab.vue"],"names":[],"mappings":"AA6CA;AA0MC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAW3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAkJzC,iBAAS,cAAc;WAwHT,OAAO,IAA6B;;iCAdZ,GAAG;uBACb,GAAG;gCACM,GAAG;yBACV,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAmEy8W,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;EAnD/lX;AAqBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA6Bq9W,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;OArB9lX,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/esm/components/QTabs/QTab.vue.js

@@ -65,6 +65,7 @@ var O = { class: "q-tab__title" }, k = { class: "q-tab__title-text" }, A = [
 			j.register({
 				value: M.value,
 				disabled: R,
+				tabRef: I,
 				focus: V,
 				select: H
 			});
@@ -91,7 +92,7 @@ var O = { class: "q-tab__title" }, k = { class: "q-tab__title-text" }, A = [
 		}, {
 			default: E(() => [f("span", O, [
 				b(e.$slots, "title.prepend"),
-				f("span", k, x(m.title), 1),
+				b(e.$slots, "title", {}, () => [f("span", k, x(m.title), 1)]),
 				m.required ? (y(), l(C(r), {
 					key: 0,
 					announce: "",

package/esm/components/QTabs/QTabs.d.ts

@@ -9,6 +9,7 @@ declare function __VLS_template(): {
         default?(_: {}): any;
     };
     refs: {
+        tabListHost: HTMLDivElement;
         tabListEl: HTMLDivElement;
     };
     rootEl: HTMLDivElement;
@@ -23,6 +24,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     direction: import('./types').QTabsDirection;
     align: import('./types').QTabsAlign;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    tabListHost: HTMLDivElement;
     tabListEl: HTMLDivElement;
 }, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/esm/components/QTabs/QTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QTabs.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QTabs/QTabs.vue"],"names":[],"mappings":"AAcA;AA6KC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAMzC,KAAK,WAAW,GAAG,UAAU,CAAC;AAkJ/B,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAqCT,OAAO,IAA6B;;yBAXrB,GAAG;;;;;;EAgB/B;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;kBAUnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"QTabs.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QTabs/QTabs.vue"],"names":[],"mappings":"AAuBA;AAyVC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAiBzC,KAAK,WAAW,GAAG,UAAU,CAAC;AA0S/B,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAmDT,OAAO,IAA6B;;yBAZrB,GAAG;;;;;;;EAiB/B;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;kBAUnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/esm/components/QTabs/QTabs.vue.js

@@ -1,11 +1,14 @@
 import { provideDefaults as e } from "../../composables/defaults.js";
 import { useGroup as t } from "../../composables/useGroup/index.js";
 import { TabsSymbol as n } from "./context.js";
-import { computed as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, openBlock as l, provide as u, renderSlot as d, shallowRef as f, toRef as p, unref as m, useModel as h, useTemplateRef as g, watch as _ } from "vue";
+import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeModels as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, openBlock as p, provide as m, ref as h, renderSlot as g, shallowRef as _, toRef as v, unref as y, useModel as b, useTemplateRef as x, watch as S } from "vue";
 //#region src/components/QTabs/QTabs.vue?vue&type=script&setup=true&lang.ts
-var v = ["id"], y = ["aria-orientation"], b = { class: "q-tabs__panels" }, x = /*@__PURE__*/ o({
+var C = ["id"], w = {
+	ref: "tabListHost",
+	class: "q-tabs__list"
+}, T = ["aria-orientation"], E = { class: "q-tabs__panels" }, D = /*@__PURE__*/ s({
 	__name: "QTabs",
-	props: /*@__PURE__*/ s({
+	props: /*@__PURE__*/ c({
 		id: {},
 		class: {},
 		direction: { default: "horizontal" },
@@ -17,67 +20,143 @@ var v = ["id"], y = ["aria-orientation"], b = { class: "q-tabs__panels" }, x = /
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(o) {
-		let s = o, x = h(o, "modelValue"), S = g("tabListEl"), C = f([]), { active: w } = t({
-			active: x,
+	setup(s) {
+		let c = s, D = b(s, "modelValue"), O = x("tabListHost"), k = x("tabListEl"), A = _([]), j = h({
+			width: "0",
+			height: "0",
+			transform: "translate(0, 0)",
+			opacity: "0"
+		}), M = h(!1), N = null, { active: P } = t({
+			active: D,
 			required: !0
 		});
-		_(w, (e) => {
-			x.value = e;
-		}), e({ QTab: { disabled: p(s, "disabled") } });
-		let T = r(() => [
+		S(P, (e) => {
+			D.value = e;
+		}), e({ QTab: { disabled: v(c, "disabled") } });
+		let F = r(() => [
 			"q-tabs",
-			`q-tabs--${s.direction}`,
-			`q-tabs--${s.variant}`,
-			`q-tabs--align-${s.align}`,
-			s.class
+			`q-tabs--${c.direction}`,
+			`q-tabs--${c.variant}`,
+			`q-tabs--align-${c.align}`,
+			M.value ? "q-tabs--indicator-ready" : void 0,
+			c.class
 		]);
-		function E() {
-			return C.value.filter((e) => !m(e.disabled));
+		function I(e) {
+			let t = e.tabRef.value;
+			return t ? "$el" in t ? t.$el : t : null;
 		}
-		function D() {
-			let e = E();
-			e.length && (e.some((e) => e.value === x.value) || (x.value = e[0].value));
+		function L() {
+			M.value = !1, j.value = {
+				...j.value,
+				opacity: "0",
+				width: "0",
+				height: "0"
+			};
 		}
-		function O(e) {
-			C.value = [...C.value, e], D();
+		function R() {
+			if (c.variant !== "line" || !D.value) {
+				L();
+				return;
+			}
+			let e = A.value.find((e) => e.value === D.value);
+			if (!e) {
+				L();
+				return;
+			}
+			let t = I(e);
+			if (!t) {
+				L();
+				return;
+			}
+			let n = c.direction === "horizontal", r = M.value;
+			n ? j.value = {
+				width: `${t.offsetWidth}px`,
+				height: "4px",
+				transform: `translate(${t.offsetLeft}px, 0)`,
+				opacity: "1"
+			} : j.value = {
+				width: "4px",
+				height: `${t.offsetHeight}px`,
+				transform: `translate(0, ${t.offsetTop}px)`,
+				opacity: "1"
+			}, r || l(() => {
+				j.value.opacity === "1" && (M.value = !0);
+			});
 		}
-		function k(e) {
-			C.value = C.value.filter((t) => t.value !== e);
+		function z() {
+			if (c.variant !== "line") {
+				N?.disconnect();
+				return;
+			}
+			N ? N.disconnect() : N = new ResizeObserver(() => {
+				R();
+			});
+			let e = O.value;
+			e && N.observe(e);
+			for (let e of A.value) {
+				let t = I(e);
+				t && N.observe(t);
+			}
 		}
-		function A(e, t) {
-			let n = E();
+		function B() {
+			return A.value.filter((e) => !y(e.disabled));
+		}
+		function V() {
+			let e = B();
+			e.length && (e.some((e) => e.value === D.value) || (D.value = e[0].value));
+		}
+		function H(e) {
+			A.value = [...A.value, e], V();
+		}
+		function U(e) {
+			A.value = A.value.filter((t) => t.value !== e);
+		}
+		function W(e, t) {
+			let n = B();
 			if (!n.length) return;
 			let r = n.findIndex((t) => t.value === e), i = n[r === -1 ? 0 : (r + t + n.length) % n.length];
 			i.select(), i.focus();
 		}
-		function j() {
-			let e = E()[0];
+		function G() {
+			let e = B()[0];
 			e && (e.select(), e.focus());
 		}
-		function M() {
-			let e = E(), t = e[e.length - 1];
+		function K() {
+			let e = B(), t = e[e.length - 1];
 			t && (t.select(), t.focus());
 		}
-		return _(() => C.value.map((e) => [e.value, m(e.disabled)]), () => D()), u(n, {
-			tabListEl: S,
-			direction: r(() => s.direction),
-			register: O,
-			unregister: k,
-			focusAdjacent: A,
-			focusFirst: j,
-			focusLast: M
-		}), (e, t) => (l(), i("div", {
-			id: s.id,
-			class: c(T.value)
-		}, [a("div", {
+		return S(() => A.value.map((e) => [e.value, y(e.disabled)]), () => V()), S(() => [
+			D.value,
+			A.value.length,
+			c.direction,
+			c.variant,
+			c.align
+		], () => l(R), { immediate: !0 }), S(() => [A.value.length, c.variant], () => l(z), { immediate: !0 }), f(() => {
+			N?.disconnect(), N = null;
+		}), m(n, {
+			tabListEl: k,
+			direction: r(() => c.direction),
+			register: H,
+			unregister: U,
+			focusAdjacent: W,
+			focusFirst: G,
+			focusLast: K
+		}), (e, t) => (p(), a("div", {
+			id: c.id,
+			class: u(F.value)
+		}, [o("div", w, [o("div", {
 			ref_key: "tabListEl",
-			ref: S,
-			class: "q-tabs__list",
+			ref: k,
+			class: "q-tabs__tablist",
 			role: "tablist",
-			"aria-orientation": s.direction
-		}, null, 8, y), a("div", b, [d(e.$slots, "default")])], 10, v));
+			"aria-orientation": c.direction
+		}, null, 8, T), c.variant === "line" ? (p(), a("div", {
+			key: 0,
+			class: "q-tabs__indicator",
+			"aria-hidden": "true",
+			style: d(j.value)
+		}, null, 4)) : i("v-if", !0)], 512), o("div", E, [g(e.$slots, "default")])], 10, C));
 	}
 });
 //#endregion
-export { x as default };
+export { D as default };