@indielayer/ui 1.18.1 → 2.0.0

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

@@ -0,0 +1,122 @@
+import { injectTabGroupKey as e } from "../../composables/keys.js";
+import { useResolvedComponentProps as t } from "../../composables/resolveComponentDefaults.js";
+import { useColors as n } from "../../composables/useColors.js";
+import { useTheme as r } from "../../composables/useTheme.js";
+import { optionalBooleanProp as i } from "../../common/props.js";
+import { useCommon as a } from "../../composables/useCommon.js";
+import { useThrottleFn as o } from "../../node_modules/.pnpm/@vueuse_shared@11.1.0_vue@3.5.34_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
+import { useMutationObserver as s, useResizeObserver as c } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.34_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import l from "../scroll/Scroll.js";
+import { computed as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, nextTick as h, normalizeClass as g, normalizeStyle as _, onMounted as v, openBlock as y, provide as b, reactive as x, ref as S, renderSlot as C, unref as w, vShow as T, watch as E, watchEffect as D, withCtx as O, withDirectives as k } from "vue";
+//#region src/components/tab/TabGroup.vue?vue&type=script&setup=true&lang.ts
+var A = /* @__PURE__ */ m({
+	name: "XTabGroup",
+	validators: {
+		...a.validators(),
+		variant: ["line", "block"],
+		align: [
+			"left",
+			"center",
+			"right"
+		]
+	},
+	props: {
+		...a.props(),
+		...n.props("primary"),
+		modelValue: [String, Number],
+		variant: {
+			type: String,
+			default: "line"
+		},
+		align: {
+			type: String,
+			default: "left"
+		},
+		ghost: i(),
+		grow: i(),
+		exact: Boolean,
+		fullWidth: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(n, { emit: i }) {
+		let a = n, m = t("TabGroup", a), A = i, j = S(null), M = S(null), N = S(null), P = S(null), F = S(null), I = S();
+		D(() => {
+			I.value = a.modelValue;
+		});
+		let L = x({
+			active: u(() => I.value),
+			variant: u(() => a.variant),
+			ghost: u(() => m.value.ghost ?? !1),
+			grow: u(() => m.value.grow ?? !1),
+			exact: u(() => a.exact),
+			size: u(() => a.size),
+			color: u(() => a.color)
+		});
+		function R(e) {
+			I.value = e, A("update:modelValue", e);
+		}
+		b(e, {
+			tabsContentRef: F,
+			activateTab: R,
+			state: L
+		});
+		let z = o(async (e) => {
+			if (e === void 0) return;
+			await h();
+			let t = P.value?.querySelector(`[data-value="${e}"]`);
+			if (!t || !N.value || (N.value.style.left = `${t.offsetLeft}px`, N.value.style.width = `${t.offsetWidth}px`, !P.value || !j.value)) return;
+			let n = t.offsetLeft - (P.value.getBoundingClientRect().width - t.getBoundingClientRect().width) / 2;
+			j.value.scrollEl && j.value.scrollEl.scrollTo({
+				left: n,
+				behavior: "smooth"
+			});
+		}, 100, !0), B = S(!0);
+		function V() {
+			P.value?.querySelector(".router-link-active") ? B.value = !0 : (R(null), B.value = !1);
+		}
+		E(() => I.value, (e) => {
+			z(e);
+		}), v(() => {
+			P.value?.querySelector(".x-link") && s(P.value, V, {
+				attributes: !0,
+				subtree: !0,
+				attributeFilter: ["class"]
+			}), z(I.value);
+		}), c(P, () => {
+			z(I.value);
+		});
+		let { styles: H, classes: U, className: W } = r("TabGroup", {}, a);
+		return (e, t) => (y(), d("div", null, [f("div", {
+			ref_key: "wrapperRef",
+			ref: M,
+			class: g(["relative", [w(W), w(U).wrapper]]),
+			style: _(w(H))
+		}, [p(l, {
+			ref_key: "scrollRef",
+			ref: j,
+			scrollbar: !1,
+			horizontal: "",
+			mousewheel: "",
+			class: g(w(U).scroller)
+		}, {
+			default: O(() => [f("div", {
+				ref_key: "tabsRef",
+				ref: P,
+				class: g(["relative", w(U).list])
+			}, [C(e.$slots, "default")], 2), k(f("div", {
+				ref_key: "trackerRef",
+				ref: N,
+				class: g(w(U).tracker)
+			}, null, 2), [[T, B.value]])]),
+			_: 3
+		}, 8, ["class"])], 6), f("div", {
+			ref_key: "tabsContentRef",
+			ref: F
+		}, null, 512)]));
+	}
+});
+//#endregion
+export { A as default };

package/lib/components/tab/theme/Tab.base.theme.js

@@ -1,15 +1,13 @@
-const i = {
-  classes: {
-    wrapper: ({ props: t, data: s }) => {
-      const e = ["transition-colors duration-150 ease-in-out whitespace-nowrap text-center"];
-      return s.variant === "line" && e.push("py-2"), s.variant === "block" && e.push("py-1 px-8"), t.size === "xs" ? e.push("text-xs") : t.size === "sm" ? e.push("text-sm") : t.size === "lg" ? e.push("text-lg") : t.size === "xl" && e.push("text-xl"), e;
-    },
-    content: "flex items-center justify-center",
-    label: "font-medium",
-    icon: "mr-1.5",
-    tabpanel: "py-2"
-  }
-}, n = i;
-export {
-  n as default
-};
+//#region src/components/tab/theme/Tab.base.theme.ts
+var e = { classes: {
+	wrapper: ({ props: e, data: t }) => {
+		let n = ["transition-colors duration-150 ease-in-out whitespace-nowrap text-center"];
+		return t.variant === "line" && n.push("py-2"), t.variant === "block" && n.push("py-1 px-8"), e.size === "xs" ? n.push("text-xs") : e.size === "sm" ? n.push("text-sm") : e.size === "lg" ? n.push("text-lg") : e.size === "xl" && n.push("text-xl"), n;
+	},
+	content: "flex items-center justify-center",
+	label: "font-medium",
+	icon: "mr-1.5",
+	tabpanel: "py-2"
+} };
+//#endregion
+export { e as default };

package/lib/components/tab/theme/Tab.carbon.theme.js

@@ -1,18 +1,16 @@
-const n = {
-  classes: {
-    wrapper: ({ props: t, data: s }) => {
-      const e = ["py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-left"];
-      return s.variant, e.push("px-4"), t.size === "lg" ? e.push("text-lg") : t.size === "xl" ? e.push("text-xl") : e.push("text-sm"), e;
-    },
-    content: "flex items-center justify-start",
-    label: ({ data: t }) => {
-      const s = [""];
-      return t.selected && s.push("font-medium"), s;
-    },
-    icon: "mr-1.5",
-    tabpanel: "py-4"
-  }
-}, l = n;
-export {
-  l as default
-};
+//#region src/components/tab/theme/Tab.carbon.theme.ts
+var e = { classes: {
+	wrapper: ({ props: e, data: t }) => {
+		let n = ["py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-left"];
+		return t.variant, n.push("px-4"), e.size === "lg" ? n.push("text-lg") : e.size === "xl" ? n.push("text-xl") : n.push("text-sm"), n;
+	},
+	content: "flex items-center justify-start",
+	label: ({ data: e }) => {
+		let t = [""];
+		return e.selected && t.push("font-medium"), t;
+	},
+	icon: "mr-1.5",
+	tabpanel: "py-4"
+} };
+//#endregion
+export { e as default };

package/lib/components/tab/theme/TabGroup.base.theme.js

@@ -1,31 +1,31 @@
-const o = {
-  classes: {
-    wrapper: "",
-    scroller: ({ props: t }) => {
-      const r = [""];
-      return t.fullWidth || r.push("!w-fit"), t.variant === "block" && r.push("rounded-lg"), t.variant === "block" && !t.ghost && r.push("bg-secondary-100 dark:bg-secondary-800 p-1"), r;
-    },
-    list: ({ props: t }) => {
-      const r = ["flex min-w-full w-fit"];
-      return t.variant === "line" && r.push("border-b border-secondary-200 dark:border-secondary-700"), t.variant === "line" && !t.grow && r.push("space-x-8"), t.variant === "block" && r.push("z-[1]"), t.align === "center" && r.push("justify-center"), t.align === "right" && r.push("justify-end"), r;
-    },
-    tracker: ({ props: t }) => {
-      const r = ["absolute transition-all duration-150"];
-      return t.variant === "line" && r.push("h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]"), t.variant === "block" && r.push("rounded-md h-full top-0 bg-[color:var(--x-tab-group-bg)] dark:bg-[color:var(--x-tab-group-dark-bg)]"), r;
-    }
-  },
-  styles: ({ props: t, colors: r, css: e }) => {
-    const n = r.getPalette("secondary"), a = r.getPalette(t.color);
-    return e.variables({
-      text: a[600],
-      bg: t.ghost ? a[50] : "#fff",
-      dark: {
-        text: a[400],
-        bg: t.ghost ? a[900] : n[700]
-      }
-    });
-  }
-}, i = o;
-export {
-  i as default
+//#region src/components/tab/theme/TabGroup.base.theme.ts
+var e = {
+	classes: {
+		wrapper: "",
+		scroller: ({ props: e }) => {
+			let t = [""];
+			return e.fullWidth || t.push("!w-fit"), e.variant === "block" && t.push("rounded-lg"), e.variant === "block" && !e.ghost && t.push("bg-secondary-100 dark:bg-secondary-800 p-1"), t;
+		},
+		list: ({ props: e }) => {
+			let t = ["flex min-w-full w-fit"];
+			return e.variant === "line" && t.push("border-b border-secondary-200 dark:border-secondary-700"), e.variant === "line" && !e.grow && t.push("space-x-8"), e.variant === "block" && t.push("z-[1]"), e.align === "center" && t.push("justify-center"), e.align === "right" && t.push("justify-end"), t;
+		},
+		tracker: ({ props: e }) => {
+			let t = ["absolute transition-all duration-150"];
+			return e.variant === "line" && t.push("h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]"), e.variant === "block" && t.push("rounded-md h-full top-0 bg-[color:var(--x-tab-group-bg)] dark:bg-[color:var(--x-tab-group-dark-bg)]"), t;
+		}
+	},
+	styles: ({ props: e, colors: t, css: n }) => {
+		let r = t.getPalette("secondary"), i = t.getPalette(e.color);
+		return n.variables({
+			text: i[600],
+			bg: e.ghost ? i[50] : "#fff",
+			dark: {
+				text: i[400],
+				bg: e.ghost ? i[900] : r[700]
+			}
+		});
+	}
 };
+//#endregion
+export { e as default };

package/lib/components/tab/theme/TabGroup.carbon.theme.js

@@ -1,31 +1,31 @@
-const n = {
-  classes: {
-    wrapper: "",
-    scroller: ({ props: t }) => {
-      const r = [""];
-      return t.fullWidth || r.push("!w-fit"), t.variant === "block" && r.push(""), t.variant === "block" && !t.ghost && r.push("bg-secondary-200 dark:bg-secondary-800"), r;
-    },
-    list: ({ props: t }) => {
-      const r = ["flex min-w-full w-fit"];
-      return t.variant === "line" && r.push("border-b border-secondary-200 dark:border-secondary-700"), t.variant === "line" && !t.grow && r.push(""), t.variant === "block" && r.push("z-[1] py-1.5"), t.align === "center" && r.push("justify-center"), t.align === "right" && r.push("justify-end"), r;
-    },
-    tracker: ({ props: t }) => {
-      const r = ["absolute transition-all duration-150"];
-      return t.variant === "line" && r.push("h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]"), t.variant === "block" && r.push("border-t-2 border-solid border-[color:var(--x-tab-group-text)] dark:border-[color:var(--x-tab-group-dark-text)] h-full top-0 bg-secondary-100 dark:bg-secondary-700"), r;
-    }
-  },
-  styles: ({ props: t, colors: r, css: e }) => {
-    const o = r.getPalette("gray"), a = r.getPalette(t.color);
-    return e.variables({
-      text: a[600],
-      bg: t.ghost ? a[50] : "#fff",
-      dark: {
-        text: a[400],
-        bg: t.ghost ? a[900] : o[700]
-      }
-    });
-  }
-}, i = n;
-export {
-  i as default
+//#region src/components/tab/theme/TabGroup.carbon.theme.ts
+var e = {
+	classes: {
+		wrapper: "",
+		scroller: ({ props: e }) => {
+			let t = [""];
+			return e.fullWidth || t.push("!w-fit"), e.variant === "block" && t.push(""), e.variant === "block" && !e.ghost && t.push("bg-secondary-200 dark:bg-secondary-800"), t;
+		},
+		list: ({ props: e }) => {
+			let t = ["flex min-w-full w-fit"];
+			return e.variant === "line" && t.push("border-b border-secondary-200 dark:border-secondary-700"), e.variant === "line" && !e.grow && t.push(""), e.variant === "block" && t.push("z-[1] py-1.5"), e.align === "center" && t.push("justify-center"), e.align === "right" && t.push("justify-end"), t;
+		},
+		tracker: ({ props: e }) => {
+			let t = ["absolute transition-all duration-150"];
+			return e.variant === "line" && t.push("h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]"), e.variant === "block" && t.push("border-t-2 border-solid border-[color:var(--x-tab-group-text)] dark:border-[color:var(--x-tab-group-dark-text)] h-full top-0 bg-secondary-100 dark:bg-secondary-700"), t;
+		}
+	},
+	styles: ({ props: e, colors: t, css: n }) => {
+		let r = t.getPalette("gray"), i = t.getPalette(e.color);
+		return n.variables({
+			text: i[600],
+			bg: e.ghost ? i[50] : "#fff",
+			dark: {
+				text: i[400],
+				bg: e.ghost ? i[900] : r[700]
+			}
+		});
+	}
 };
+//#endregion
+export { e as default };

package/lib/components/table/Table.js

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