@quidgest/ui 0.17.9 → 0.19.0

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

@@ -0,0 +1,173 @@
+import { DEFAULT_TEXTS } from './constants';
+import { QTabProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        'title.prepend'?(_: {}): any;
+        title?(_: {}): any;
+        'title.append'?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {
+        tabBtn: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                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 onClick?: ((event: Event) => 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: "click", event: Event) => void;
+            $el: HTMLButtonElement;
+            $options: import('vue').ComponentOptionsBase<Readonly<import('..').QButtonProps> & Readonly<{
+                onClick?: ((event: Event) => any) | undefined;
+            }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+                click: (event: Event) => any;
+            }, string, {
+                size: import('..').QButtonSize;
+                variant: import('..').QButtonVariant;
+                color: string;
+                iconPos: import('..').QButtonIconPosition;
+            }, {}, 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<{
+            size: import('..').QButtonSize;
+            variant: import('..').QButtonVariant;
+            color: string;
+            iconPos: import('..').QButtonIconPosition;
+        }> & Omit<Readonly<import('..').QButtonProps> & Readonly<{
+            onClick?: ((event: Event) => any) | undefined;
+        }>, "size" | "variant" | "color" | "iconPos"> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+                append?(_: {}): any;
+            };
+        }) | null;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<QTabProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<QTabProps> & Readonly<{}>, {
+    texts: typeof DEFAULT_TEXTS;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    tabBtn: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            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 onClick?: ((event: Event) => 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: "click", event: Event) => void;
+        $el: HTMLButtonElement;
+        $options: import('vue').ComponentOptionsBase<Readonly<import('..').QButtonProps> & Readonly<{
+            onClick?: ((event: Event) => any) | undefined;
+        }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+            click: (event: Event) => any;
+        }, string, {
+            size: import('..').QButtonSize;
+            variant: import('..').QButtonVariant;
+            color: string;
+            iconPos: import('..').QButtonIconPosition;
+        }, {}, 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<{
+        size: import('..').QButtonSize;
+        variant: import('..').QButtonVariant;
+        color: string;
+        iconPos: import('..').QButtonIconPosition;
+    }> & Omit<Readonly<import('..').QButtonProps> & Readonly<{
+        onClick?: ((event: Event) => any) | undefined;
+    }>, "size" | "variant" | "color" | "iconPos"> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+            append?(_: {}): any;
+        };
+    }) | null;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=QTab.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,123 @@
+import { useGroupItem as e } from "../../composables/useGroup/index.js";
+import { DEFAULT_TEXTS as t } from "../__internal__/QRequiredIndicator/constants.js";
+import { QButton as n } from "../QButton/index.js";
+import { QRequiredIndicator as r } from "../__internal__/QRequiredIndicator/index.js";
+import { useId as i } from "../../composables/uid.js";
+import { TabsSymbol as a } from "./context.js";
+import { Fragment as o, Teleport as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, inject as h, normalizeClass as g, onBeforeMount as _, onBeforeUnmount as v, openBlock as y, renderSlot as b, toDisplayString as x, toRef as S, unref as C, useTemplateRef as w, vShow as T, withCtx as E, withDirectives as D } from "vue";
+//#region src/components/QTabs/QTab.vue?vue&type=script&setup=true&lang.ts
+var O = { class: "q-tab__title" }, k = { class: "q-tab__title-text" }, A = [
+	"id",
+	"aria-labelledby",
+	"tabindex"
+], j = /*@__PURE__*/ m({
+	__name: "QTab",
+	props: {
+		id: {},
+		class: {},
+		title: {},
+		required: { type: Boolean },
+		disabled: { type: Boolean },
+		value: {},
+		texts: { default: () => t }
+	},
+	setup(t) {
+		let m = t, j = h(a, void 0);
+		if (!j) throw Error("QTab: Failed to retrieve tabs context. Ensure the component is used within a QTabs context.");
+		let M = i(S(m, "value")), N = i(), P = i(), F = e(M);
+		if (!F) throw Error("QTab: Failed to retrieve group item. Ensure the component is used within a QTabs context.");
+		let I = w("tabBtn"), L = c(() => j.tabListEl.value), R = c(() => !!m.disabled), z = c(() => {
+			if (!R.value) return F.isActive.value ? 0 : -1;
+		}), B = c(() => [
+			"q-tab",
+			{
+				"q-tab--active": F.isActive.value,
+				"q-tab--disabled": R.value
+			},
+			m.class
+		]);
+		function V() {
+			(I.value?.$el)?.focus?.();
+		}
+		function H() {
+			R.value || F?.isActive.value || F?.toggle();
+		}
+		function U() {
+			H();
+		}
+		function W(e) {
+			let t = j?.direction.value === "horizontal";
+			if (t && e.key === "ArrowRight" || !t && e.key === "ArrowDown") {
+				e.preventDefault(), j?.focusAdjacent(M.value, 1);
+				return;
+			}
+			if (t && e.key === "ArrowLeft" || !t && e.key === "ArrowUp") {
+				e.preventDefault(), j?.focusAdjacent(M.value, -1);
+				return;
+			}
+			if (e.key === "Home") {
+				e.preventDefault(), j?.focusFirst();
+				return;
+			}
+			e.key === "End" && (e.preventDefault(), j?.focusLast());
+		}
+		return _(() => {
+			j.register({
+				value: M.value,
+				disabled: R,
+				tabRef: I,
+				focus: V,
+				select: H
+			});
+		}), v(() => {
+			j.unregister(M.value);
+		}), (e, t) => (y(), d(o, null, [L.value ? (y(), l(s, {
+			key: 0,
+			to: L.value
+		}, [p(C(n), {
+			id: C(N),
+			ref: "tabBtn",
+			borderless: "",
+			role: "tab",
+			variant: "text",
+			class: g(B.value),
+			disabled: R.value,
+			"data-value": C(M),
+			"aria-selected": C(F).isActive.value,
+			"aria-controls": C(P),
+			"aria-required": m.required || void 0,
+			tabindex: z.value,
+			onClick: U,
+			onKeydown: W
+		}, {
+			default: E(() => [f("span", O, [
+				b(e.$slots, "title.prepend"),
+				b(e.$slots, "title", {}, () => [f("span", k, x(m.title), 1)]),
+				m.required ? (y(), l(C(r), {
+					key: 0,
+					announce: "",
+					texts: m.texts
+				}, null, 8, ["texts"])) : u("v-if", !0),
+				b(e.$slots, "title.append")
+			])]),
+			_: 3
+		}, 8, [
+			"id",
+			"class",
+			"disabled",
+			"data-value",
+			"aria-selected",
+			"aria-controls",
+			"aria-required",
+			"tabindex"
+		])], 8, ["to"])) : u("v-if", !0), D(f("div", {
+			id: C(P),
+			class: "q-tabs__panel",
+			role: "tabpanel",
+			"aria-labelledby": C(N),
+			tabindex: C(F).isActive.value ? 0 : void 0
+		}, [b(e.$slots, "default")], 8, A), [[T, C(F).isActive.value]])], 64));
+	}
+});
+//#endregion
+export { j as default };

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

@@ -0,0 +1,5 @@
+import e from "./QTab.vue.js";
+//#region src/components/QTabs/QTab.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,37 @@
+import { QTabsProps } from './types';
+type __VLS_Props = QTabsProps;
+type __VLS_PublicProps = {
+    modelValue?: string;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        tabListHost: HTMLDivElement;
+        tabListEl: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    variant: import('./types').QTabsVariant;
+    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"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=QTabs.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,162 @@
+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, 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 C = ["id"], w = {
+	ref: "tabListHost",
+	class: "q-tabs__list"
+}, T = ["aria-orientation"], E = { class: "q-tabs__panels" }, D = /*@__PURE__*/ s({
+	__name: "QTabs",
+	props: /*@__PURE__*/ c({
+		id: {},
+		class: {},
+		direction: { default: "horizontal" },
+		align: { default: "start" },
+		variant: { default: "line" },
+		disabled: { type: Boolean }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	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
+		});
+		S(P, (e) => {
+			D.value = e;
+		}), e({ QTab: { disabled: v(c, "disabled") } });
+		let F = r(() => [
+			"q-tabs",
+			`q-tabs--${c.direction}`,
+			`q-tabs--${c.variant}`,
+			`q-tabs--align-${c.align}`,
+			M.value ? "q-tabs--indicator-ready" : void 0,
+			c.class
+		]);
+		function I(e) {
+			let t = e.tabRef.value;
+			return t ? "$el" in t ? t.$el : t : null;
+		}
+		function L() {
+			M.value = !1, j.value = {
+				...j.value,
+				opacity: "0",
+				width: "0",
+				height: "0"
+			};
+		}
+		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 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 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 G() {
+			let e = B()[0];
+			e && (e.select(), e.focus());
+		}
+		function K() {
+			let e = B(), t = e[e.length - 1];
+			t && (t.select(), t.focus());
+		}
+		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: k,
+			class: "q-tabs__tablist",
+			role: "tablist",
+			"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 { D as default };

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

@@ -0,0 +1,5 @@
+import e from "./QTabs.vue.js";
+//#region src/components/QTabs/QTabs.vue
+var t = e;
+//#endregion
+export { t as default };