@indielayer/ui 1.18.1 → 2.1.0

package/lib/components/tab/Tab.vue.d.ts

@@ -1,81 +1,161 @@
-import { type ExtractPublicPropTypes } from 'vue';
+import { type ExtractPublicPropTypes, type PropType } from 'vue';
 import { type Size } from '../../composables/useCommon';
 import { type ThemeComponent } from '../../composables/useTheme';
+import type { TooltipPosition } from '../tooltip/Tooltip.vue';
 import type { TabGroupInjection } from './TabGroup.vue';
 declare const tabProps: {
+    size: {
+        type: PropType<Size>;
+        validator: (value: string) => boolean;
+        description: string;
+    };
     value: {
         type: (StringConstructor | NumberConstructor)[];
+        description: string;
     };
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
-    to: (ObjectConstructor | StringConstructor)[];
-    label: StringConstructor;
-    icon: StringConstructor;
-    disabled: BooleanConstructor;
-    exact: BooleanConstructor;
-    removable: BooleanConstructor;
-    size: {
-        readonly type: import("vue").PropType<Size>;
-        readonly default: "md";
-        readonly validator: (value: string) => boolean;
+    to: {
+        type: (ObjectConstructor | StringConstructor)[];
+        description: string;
+    };
+    label: {
+        type: StringConstructor;
+        description: string;
+    };
+    icon: {
+        type: StringConstructor;
+        description: string;
+    };
+    tooltip: {
+        type: StringConstructor;
+        description: string;
+    };
+    tooltipPosition: {
+        type: PropType<TooltipPosition>;
+        default: string;
+        description: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    exact: {
+        type: BooleanConstructor;
+        description: string;
     };
+    removable: import("vue").Prop<boolean | undefined>;
 };
 export type TabProps = ExtractPublicPropTypes<typeof tabProps>;
 type InternalClasses = 'wrapper' | 'content' | 'label' | 'icon' | 'tabpanel';
 type InternalExtraData = {
     selected: boolean;
+    showLabel: boolean;
 } & Pick<TabGroupInjection, 'state'>['state'];
 export interface TabTheme extends ThemeComponent<TabProps, InternalClasses, InternalExtraData> {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    size: {
+        type: PropType<Size>;
+        validator: (value: string) => boolean;
+        description: string;
+    };
     value: {
         type: (StringConstructor | NumberConstructor)[];
+        description: string;
     };
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
-    to: (ObjectConstructor | StringConstructor)[];
-    label: StringConstructor;
-    icon: StringConstructor;
-    disabled: BooleanConstructor;
-    exact: BooleanConstructor;
-    removable: BooleanConstructor;
-    size: {
-        readonly type: import("vue").PropType<Size>;
-        readonly default: "md";
-        readonly validator: (value: string) => boolean;
+    to: {
+        type: (ObjectConstructor | StringConstructor)[];
+        description: string;
+    };
+    label: {
+        type: StringConstructor;
+        description: string;
+    };
+    icon: {
+        type: StringConstructor;
+        description: string;
     };
+    tooltip: {
+        type: StringConstructor;
+        description: string;
+    };
+    tooltipPosition: {
+        type: PropType<TooltipPosition>;
+        default: string;
+        description: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    exact: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    removable: import("vue").Prop<boolean | undefined>;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "remove"[], "remove", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: PropType<Size>;
+        validator: (value: string) => boolean;
+        description: string;
+    };
     value: {
         type: (StringConstructor | NumberConstructor)[];
+        description: string;
     };
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
-    to: (ObjectConstructor | StringConstructor)[];
-    label: StringConstructor;
-    icon: StringConstructor;
-    disabled: BooleanConstructor;
-    exact: BooleanConstructor;
-    removable: BooleanConstructor;
-    size: {
-        readonly type: import("vue").PropType<Size>;
-        readonly default: "md";
-        readonly validator: (value: string) => boolean;
+    to: {
+        type: (ObjectConstructor | StringConstructor)[];
+        description: string;
+    };
+    label: {
+        type: StringConstructor;
+        description: string;
+    };
+    icon: {
+        type: StringConstructor;
+        description: string;
+    };
+    tooltip: {
+        type: StringConstructor;
+        description: string;
+    };
+    tooltipPosition: {
+        type: PropType<TooltipPosition>;
+        default: string;
+        description: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        description: string;
+    };
+    exact: {
+        type: BooleanConstructor;
+        description: string;
     };
+    removable: import("vue").Prop<boolean | undefined>;
 }>> & Readonly<{
     onRemove?: ((...args: any[]) => any) | undefined;
 }>, {
     disabled: boolean;
     tag: string;
-    removable: boolean;
-    size: Size;
+    tooltipPosition: TooltipPosition;
     exact: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    tooltip?(_: {}): any;
     tab?(_: {
         label: string | undefined;
         value: string | number | undefined;

package/lib/components/tab/Tab.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,210 @@
+import { injectTabGroupKey as e } from "../../composables/keys.js";
+import { useResolvedComponentProps as t } from "../../composables/resolveComponentDefaults.js";
+import { useTheme as n } from "../../composables/useTheme.js";
+import { optionalBooleanProp as r } from "../../common/props.js";
+import { useCommon as i } from "../../composables/useCommon.js";
+import a from "../icon/Icon.js";
+import { closeIcon as o } from "../../common/icons.js";
+import s from "../link/Link.js";
+import c from "../tooltip/Tooltip.js";
+import { useMutationObserver as l } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.34_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { Teleport as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createSlots as g, createTextVNode as _, defineComponent as v, inject as y, normalizeClass as b, normalizeStyle as x, onBeforeUnmount as S, onMounted as C, openBlock as w, reactive as T, ref as E, renderSlot as D, resolveDynamicComponent as O, toDisplayString as k, unref as A, withCtx as j } from "vue";
+//#region src/components/tab/Tab.vue?vue&type=script&setup=true&lang.ts
+var M = {
+	...i.props(),
+	size: {
+		type: String,
+		validator: (e) => i.validators().size.includes(e),
+		description: "Tab size. Falls back to the parent tab group size when omitted."
+	},
+	value: {
+		type: [String, Number],
+		description: "Value used to select this tab in the group."
+	},
+	tag: {
+		type: String,
+		default: "button",
+		description: "Root element tag when not using `to`."
+	},
+	to: {
+		type: [String, Object],
+		description: "Vue Router location; renders as a link when set."
+	},
+	label: {
+		type: String,
+		description: "Visible label. Defaults to `value` when omitted."
+	},
+	icon: {
+		type: String,
+		description: "Icon name shown before the label."
+	},
+	tooltip: {
+		type: String,
+		description: "Tooltip text. Prefer the tooltip slot for custom content."
+	},
+	tooltipPosition: {
+		type: String,
+		default: "top",
+		description: "Tooltip placement relative to the tab."
+	},
+	disabled: {
+		type: Boolean,
+		description: "Prevents selecting this tab."
+	},
+	exact: {
+		type: Boolean,
+		description: "Requires exact route match when using `to`."
+	},
+	removable: r("Shows a remove control that emits `remove`.")
+}, N = /* @__PURE__ */ v({
+	name: "XTab",
+	validators: { ...i.validators() },
+	docs: {
+		slots: {
+			default: "Tab panel content shown when this tab is selected.",
+			tab: "Custom tab trigger content. Slot props: label, value, size, icon.",
+			tooltip: "Custom tooltip content; overrides the `tooltip` prop."
+		},
+		emits: { remove: "Emitted when the remove control is clicked." }
+	},
+	props: M,
+	emits: ["remove"],
+	setup(r) {
+		let i = r, v = t("Tab", i), M = d(() => L.value?.$el?.href || i.value), N = d(() => !(i.icon && (i.label === void 0 || i.label === ""))), P = d(() => i.label || i.value), F = d(() => {
+			if (!N.value) {
+				if (i.tooltip) return i.tooltip;
+				if (i.label) return i.label;
+				if (M.value !== void 0 && M.value !== null) return String(M.value);
+			}
+		}), I = E(null), L = E(null), R = y(e, {
+			tabsContentRef: E(null),
+			activateTab: () => {},
+			registerTab: () => {},
+			unregisterTab: () => {},
+			state: T({
+				active: void 0,
+				variant: "line",
+				ghost: !1,
+				grow: !1,
+				exact: !1,
+				size: "md",
+				color: "primary"
+			})
+		}), z = d(() => R.state.exact || i.exact), B = d(() => i.size ?? R.state.size ?? "md");
+		C(() => {
+			I.value = R.tabsContentRef.value, M.value !== void 0 && R.registerTab(M.value), i.to && L.value && (V(), l(L.value.$el, V, {
+				attributes: !0,
+				attributeFilter: ["class"]
+			}));
+		}), S(() => {
+			M.value !== void 0 && R.unregisterTab(M.value);
+		});
+		function V() {
+			L.value && L.value.$el && i.to && L.value.$el.classList.contains(z.value ? "router-link-exact-active" : "router-link-active") && R.activateTab(M.value);
+		}
+		let H = d(() => R.state.active === M.value), U = d(() => R.state.color);
+		function W(e) {
+			if (i.disabled) {
+				e.preventDefault(), e.stopPropagation();
+				return;
+			}
+			!i.to && M.value !== void 0 && R.activateTab(M.value);
+		}
+		let G = d(() => R.state.variant === "block" || R.state.variant === "compact"), { styles: K, classes: q, className: J } = n("Tab", {}, d(() => ({
+			...i,
+			size: B.value,
+			exact: z.value
+		})), {
+			...R.state,
+			selected: H,
+			showLabel: N
+		});
+		return (e, t) => (w(), f(c, {
+			position: e.tooltipPosition,
+			"data-value": M.value,
+			class: b(["shrink-0", { "flex-1": A(R).state.grow }])
+		}, g({
+			default: j(() => [(w(), f(O(e.to ? s : e.tag), {
+				ref_key: "elRef",
+				ref: L,
+				type: e.tag === "button" ? "button" : void 0,
+				to: e.to,
+				color: H.value ? U.value : void 0,
+				style: x([A(K), e.to && H.value && G.value ? "--x-link-text: var(--x-tab-group-text); --x-link-text-hover: var(--x-tab-group-text);" : ""]),
+				class: b([
+					A(J),
+					A(q).wrapper,
+					"flex items-center justify-center",
+					{
+						"w-full": A(R).state.grow,
+						"text-[color:var(--x-tab-group-text)] dark:text-[color:var(--x-tab-group-dark-text)]": H.value,
+						"cursor-pointer": !e.disabled,
+						"cursor-not-allowed": e.disabled,
+						"cursor-not-allowed text-secondary-500": e.disabled && !H.value
+					}
+				]),
+				"aria-label": F.value,
+				"aria-disabled": e.disabled ? "true" : void 0,
+				"aria-selected": H.value ? "true" : "false",
+				onClick: W
+			}, {
+				default: j(() => [D(e.$slots, "tab", {
+					label: e.label,
+					value: e.value,
+					size: B.value,
+					icon: e.icon
+				}, () => [h("div", { class: b(A(q).content) }, [
+					e.icon ? (w(), f(a, {
+						key: 0,
+						icon: e.icon,
+						size: B.value,
+						class: b(A(q).icon)
+					}, null, 8, [
+						"icon",
+						"size",
+						"class"
+					])) : p("", !0),
+					N.value ? (w(), m("div", {
+						key: 1,
+						class: b(A(q).label)
+					}, k(P.value), 3)) : p("", !0),
+					A(v).removable ? (w(), f(a, {
+						key: 2,
+						size: "sm",
+						icon: A(o),
+						class: "ml-2 cursor-pointer hover:text-secondary-700 dark:hover:text-secondary-500 transition-colors duration-150",
+						onClick: t[0] ||= (t) => e.$emit("remove", t)
+					}, null, 8, ["icon"])) : p("", !0)
+				], 2)]), H.value && I.value ? (w(), f(u, {
+					key: 0,
+					to: I.value
+				}, [e.$slots.default ? (w(), m("div", {
+					key: 0,
+					role: "tabpanel",
+					class: b(A(q).tabpanel)
+				}, [D(e.$slots, "default")], 2)) : p("", !0)], 8, ["to"])) : p("", !0)]),
+				_: 3
+			}, 8, [
+				"type",
+				"to",
+				"color",
+				"style",
+				"class",
+				"aria-label",
+				"aria-disabled",
+				"aria-selected"
+			]))]),
+			_: 2
+		}, [e.$slots.tooltip || e.tooltip ? {
+			name: "tooltip",
+			fn: j(() => [D(e.$slots, "tooltip", {}, () => [_(k(e.tooltip), 1)])]),
+			key: "0"
+		} : void 0]), 1032, [
+			"position",
+			"data-value",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { N as default };

package/lib/components/tab/TabGroup.js

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

package/lib/components/tab/TabGroup.vue.d.ts

@@ -2,40 +2,53 @@ import { type PropType, type ExtractPublicPropTypes, type Ref } from 'vue';
 import { type Size } from '../../composables/useCommon';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const validators: {
-    variant: readonly ["line", "block"];
+    variant: readonly ["line", "block", "compact"];
     align: readonly ["left", "center", "right"];
     size: string[];
 };
 declare const tabGroupProps: {
-    modelValue: (StringConstructor | NumberConstructor)[];
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        description: string;
+    };
     variant: {
-        type: PropType<"block" | "line">;
+        type: PropType<"block" | "line" | "compact">;
         default: string;
+        description: string;
     };
     align: {
         type: PropType<"left" | "right" | "center">;
         default: string;
+        description: string;
+    };
+    ghost: import("vue").Prop<boolean | undefined>;
+    grow: import("vue").Prop<boolean | undefined>;
+    exact: {
+        type: BooleanConstructor;
+        description: string;
     };
-    ghost: BooleanConstructor;
-    grow: BooleanConstructor;
-    exact: BooleanConstructor;
     fullWidth: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
     size: {
         readonly type: PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 };
 export type TabGroupInjection = {
     tabsContentRef: Ref<HTMLElement | null>;
-    activateTab: (tab: string | number) => void;
+    activateTab: (tab: string | number | null) => void;
+    registerTab: (tab: string | number) => void;
+    unregisterTab: (tab: string | number) => void;
     state: {
         active: string | number | undefined;
         variant: TabGroupVariant;
@@ -53,56 +66,78 @@ type InternalClasses = 'wrapper' | 'list' | 'tracker' | 'scroller';
 export interface TabGroupTheme extends ThemeComponent<TabGroupProps, InternalClasses> {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    modelValue: (StringConstructor | NumberConstructor)[];
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        description: string;
+    };
     variant: {
-        type: PropType<"block" | "line">;
+        type: PropType<"block" | "line" | "compact">;
         default: string;
+        description: string;
     };
     align: {
         type: PropType<"left" | "right" | "center">;
         default: string;
+        description: string;
+    };
+    ghost: import("vue").Prop<boolean | undefined>;
+    grow: import("vue").Prop<boolean | undefined>;
+    exact: {
+        type: BooleanConstructor;
+        description: string;
     };
-    ghost: BooleanConstructor;
-    grow: BooleanConstructor;
-    exact: BooleanConstructor;
     fullWidth: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
     size: {
         readonly type: PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: (StringConstructor | NumberConstructor)[];
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        description: string;
+    };
     variant: {
-        type: PropType<"block" | "line">;
+        type: PropType<"block" | "line" | "compact">;
         default: string;
+        description: string;
     };
     align: {
         type: PropType<"left" | "right" | "center">;
         default: string;
+        description: string;
+    };
+    ghost: import("vue").Prop<boolean | undefined>;
+    grow: import("vue").Prop<boolean | undefined>;
+    exact: {
+        type: BooleanConstructor;
+        description: string;
     };
-    ghost: BooleanConstructor;
-    grow: BooleanConstructor;
-    exact: BooleanConstructor;
     fullWidth: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
     size: {
         readonly type: PropType<Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -110,10 +145,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     color: string;
     size: Size;
     align: "left" | "right" | "center";
-    ghost: boolean;
     exact: boolean;
-    variant: "block" | "line";
-    grow: boolean;
+    variant: "block" | "line" | "compact";
     fullWidth: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;