@indielayer/ui 1.2.0 → 1.3.0

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

@@ -1,13 +1,12 @@
-import { defineComponent as j, computed as r, ref as n, inject as B, reactive as N, onMounted as R, openBlock as m, createBlock as f, resolveDynamicComponent as D, normalizeStyle as L, unref as l, normalizeClass as p, withCtx as V, renderSlot as y, createElementVNode as g, createCommentVNode as x, toDisplayString as E, Teleport as M } from "vue";
-import { useMutationObserver as O } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.4/node_modules/@vueuse/core/index.js";
+import { defineComponent as B, computed as s, ref as u, inject as N, reactive as R, onMounted as j, openBlock as f, createBlock as m, resolveDynamicComponent as D, normalizeStyle as L, unref as o, normalizeClass as c, withCtx as V, renderSlot as k, createElementVNode as y, createCommentVNode as x, toDisplayString as E, Teleport as M } from "vue";
+import { useMutationObserver as O } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
 import { injectTabKey as P } from "../../composables/keys.js";
-import { useCommon as h } from "../../composables/common.js";
-import { useTheme as X } from "../../composables/theme.js";
+import { useCommon as z } from "../../composables/useCommon.js";
+import { useTheme as X } from "../../composables/useTheme.js";
 import F from "../icon/Icon.vue.js";
 import K from "../link/Link.vue.js";
-import q from "./Tab.theme.js";
-const A = { class: "flex items-center justify-center" }, G = {
-  ...h.props(),
+const q = {
+  ...z.props(),
   value: {
     type: [String, Number]
   },
@@ -20,23 +19,23 @@ const A = { class: "flex items-center justify-center" }, G = {
   icon: String,
   disabled: Boolean,
   exact: Boolean
-}, H = {
+}, A = {
   name: "XTab",
   validators: {
-    ...h.validators()
+    ...z.validators()
   }
-}, ee = /* @__PURE__ */ j({
-  ...H,
-  props: G,
-  setup(z) {
-    const t = z, i = r(() => {
-      var e, d;
-      return ((d = (e = o.value) == null ? void 0 : e.$el) == null ? void 0 : d.href) || t.value;
-    }), C = r(() => t.label || t.value), c = n(null), o = n(null), a = B(P, {
-      tabsContentRef: n(null),
+}, Y = /* @__PURE__ */ B({
+  ...A,
+  props: q,
+  setup(C) {
+    const t = C, i = s(() => {
+      var e, p;
+      return ((p = (e = l.value) == null ? void 0 : e.$el) == null ? void 0 : p.href) || t.value;
+    }), T = s(() => t.label || t.value), v = u(null), l = u(null), a = N(P, {
+      tabsContentRef: u(null),
       activateTab: () => {
       },
-      state: N({
+      state: R({
         active: void 0,
         variant: "line",
         ghost: !1,
@@ -45,79 +44,84 @@ const A = { class: "flex items-center justify-center" }, G = {
         size: "md",
         color: "primary"
       })
-    }), b = r(() => a.state.exact || t.exact), u = r(() => t.size || a.state.size);
-    R(() => {
-      c.value = a.tabsContentRef.value, t.to && o.value && (k(), O(o.value.$el, k, {
+    }), b = s(() => a.state.exact || t.exact), d = s(() => t.size || a.state.size);
+    j(() => {
+      v.value = a.tabsContentRef.value, t.to && l.value && (g(), O(l.value.$el, g, {
         attributes: !0,
         attributeFilter: ["class"]
       }));
     });
-    function k() {
-      o.value && o.value.$el && t.to && o.value.$el.classList.contains(b.value ? "router-link-exact-active" : "router-link-active") && a.activateTab(i.value);
+    function g() {
+      l.value && l.value.$el && t.to && l.value.$el.classList.contains(b.value ? "router-link-exact-active" : "router-link-active") && a.activateTab(i.value);
     }
-    const s = r(() => a.state.active === i.value), S = r(() => a.state.color);
-    function T(e) {
+    const r = s(() => a.state.active === i.value), S = s(() => a.state.color);
+    function h(e) {
       if (t.disabled) {
         e.preventDefault(), e.stopPropagation();
         return;
       }
       !t.to && i.value && a.activateTab(i.value);
     }
-    const { styles: $, classes: v, className: w } = X("tab", q, n({
+    const { styles: $, classes: n, className: w } = X("Tab", {}, u({
       ...t,
-      size: u.value,
+      size: d.value,
       exact: b.value
-    }), a.state);
-    return (e, d) => (m(), f(D(e.to ? K : e.tag), {
+    }), {
+      ...a.state,
+      selected: r
+    });
+    return (e, p) => (f(), m(D(e.to ? K : e.tag), {
       ref_key: "elRef",
-      ref: o,
+      ref: l,
       "data-value": i.value,
       to: e.to,
-      color: s.value ? S.value : void 0,
+      color: r.value ? S.value : void 0,
       style: L([
-        l($),
-        e.to && s.value && l(a).state.variant === "block" ? "--x-link-text: var(--x-tabs-text); --x-link-text-hover: var(--x-tabs-text);" : ""
+        o($),
+        e.to && r.value && o(a).state.variant === "block" ? "--x-link-text: var(--x-tab-group-text); --x-link-text-hover: var(--x-tab-group-text);" : ""
       ]),
-      class: p([
-        l(w),
-        l(v).wrapper,
-        "shrink-0 font-medium",
+      class: c([
+        o(w),
+        o(n).wrapper,
+        "shrink-0",
         {
-          "flex-1": l(a).state.grow,
-          "text-[color:var(--x-tabs-text)] dark:text-[color:var(--x-tabs-dark-text)]": s.value,
+          "flex-1": o(a).state.grow,
+          "text-[color:var(--x-tab-group-text)] dark:text-[color:var(--x-tab-group-dark-text)]": r.value,
           "cursor-pointer": !e.disabled,
           "cursor-not-allowed": e.disabled,
-          "cursor-not-allowed text-gray-500": e.disabled && !s.value
+          "cursor-not-allowed text-gray-500": e.disabled && !r.value
         }
       ]),
       "aria-disabled": e.disabled ? "true" : void 0,
-      "aria-selected": s.value ? "true" : "false",
-      onClick: T
+      "aria-selected": r.value ? "true" : "false",
+      onClick: h
     }, {
       default: V(() => [
-        y(e.$slots, "tab", {
+        k(e.$slots, "tab", {
           label: e.label,
           value: e.value,
-          size: u.value,
+          size: d.value,
           icon: e.icon
         }, () => [
-          g("div", A, [
-            e.icon ? (m(), f(F, {
+          y("div", {
+            class: c(o(n).content)
+          }, [
+            e.icon ? (f(), m(F, {
               key: 0,
               icon: e.icon,
-              size: u.value,
-              class: p(l(v).icon)
+              size: d.value,
+              class: c(o(n).icon)
             }, null, 8, ["icon", "size", "class"])) : x("", !0),
-            g("div", {
-              class: p(l(v).label)
-            }, E(C.value), 3)
-          ])
+            y("div", {
+              class: c(o(n).label)
+            }, E(T.value), 3)
+          ], 2)
         ]),
-        s.value && c.value ? (m(), f(M, {
+        r.value && v.value ? (f(), m(M, {
           key: 0,
-          to: c.value
+          to: v.value
         }, [
-          y(e.$slots, "default")
+          k(e.$slots, "default")
         ], 8, ["to"])) : x("", !0)
       ]),
       _: 3
@@ -125,5 +129,5 @@ const A = { class: "flex items-center justify-center" }, G = {
   }
 });
 export {
-  ee as default
+  Y as default
 };

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

@@ -1,5 +1,6 @@
 import { type PropType, type ExtractPublicPropTypes, type Ref } from 'vue';
-import { type Size } from '../../composables/common';
+import { type Size } from '../../composables/useCommon';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const validators: {
     variant: readonly ["line", "block"];
     align: readonly ["left", "center", "right"];
@@ -8,7 +9,7 @@ declare const validators: {
 declare const tabGroupProps: {
     modelValue: (StringConstructor | NumberConstructor)[];
     variant: {
-        type: PropType<"line" | "block">;
+        type: PropType<"block" | "line">;
         default: string;
     };
     align: {
@@ -18,6 +19,10 @@ declare const tabGroupProps: {
     ghost: BooleanConstructor;
     grow: BooleanConstructor;
     exact: BooleanConstructor;
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -44,10 +49,13 @@ export type TabGroupInjection = {
 export type TabGroupVariant = typeof validators.variant[number];
 export type TabGroupAlign = typeof validators.align[number];
 export type TabGroupProps = ExtractPublicPropTypes<typeof tabGroupProps>;
+type InternalClasses = 'wrapper' | 'list' | 'tracker' | 'scroller';
+export interface TabGroupTheme extends ThemeComponent<TabGroupProps, InternalClasses> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: (StringConstructor | NumberConstructor)[];
     variant: {
-        type: PropType<"line" | "block">;
+        type: PropType<"block" | "line">;
         default: string;
     };
     align: {
@@ -57,6 +65,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     ghost: BooleanConstructor;
     grow: BooleanConstructor;
     exact: BooleanConstructor;
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -69,7 +81,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: (StringConstructor | NumberConstructor)[];
     variant: {
-        type: PropType<"line" | "block">;
+        type: PropType<"block" | "line">;
         default: string;
     };
     align: {
@@ -79,6 +91,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     ghost: BooleanConstructor;
     grow: BooleanConstructor;
     exact: BooleanConstructor;
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -91,13 +107,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    color: string;
     size: Size;
-    variant: "line" | "block";
+    color: string;
     align: "left" | "right" | "center";
     ghost: boolean;
-    grow: boolean;
     exact: boolean;
+    variant: "block" | "line";
+    grow: boolean;
+    fullWidth: boolean;
 }, {}>, {
     default?(_: {}): any;
 }>;

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

@@ -1,19 +1,18 @@
-import { defineComponent as B, ref as l, watchEffect as x, reactive as E, computed as a, provide as V, watch as z, onMounted as N, openBlock as $, createElementBlock as q, createElementVNode as c, normalizeClass as f, unref as n, normalizeStyle as F, createVNode as G, withCtx as L, renderSlot as M, withDirectives as X, vShow as j, nextTick as D } from "vue";
-import { useMutationObserver as K } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.4/node_modules/@vueuse/core/index.js";
-import { injectTabKey as O } from "../../composables/keys.js";
-import { useCommon as g } from "../../composables/common.js";
-import { useColors as P } from "../../composables/colors.js";
-import { useTheme as W } from "../../composables/theme.js";
-import A from "../scroll/Scroll.vue.js";
-import H from "./TabGroup.theme.js";
-import { useThrottleFn as I } from "../../node_modules/.pnpm/@vueuse_shared@10.2.0_vue@3.3.4/node_modules/@vueuse/shared/index.js";
-const J = {
-  ...g.validators(),
+import { defineComponent as B, ref as r, watchEffect as z, reactive as E, computed as o, provide as V, watch as N, onMounted as $, openBlock as q, createElementBlock as G, createElementVNode as f, normalizeClass as v, unref as n, normalizeStyle as F, createVNode as L, withCtx as M, renderSlot as O, withDirectives as W, vShow as X, nextTick as j } from "vue";
+import { useMutationObserver as D, useResizeObserver as K } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { injectTabKey as P } from "../../composables/keys.js";
+import { useCommon as b } from "../../composables/useCommon.js";
+import { useColors as A } from "../../composables/useColors.js";
+import { useTheme as H } from "../../composables/useTheme.js";
+import I from "../scroll/Scroll.vue.js";
+import { useThrottleFn as J } from "../../node_modules/.pnpm/@vueuse_shared@10.2.0_vue@3.3.9/node_modules/@vueuse/shared/index.js";
+const Q = {
+  ...b.validators(),
   variant: ["line", "block"],
   align: ["left", "center", "right"]
-}, Q = {
-  ...g.props(),
-  ...P.props("primary"),
+}, U = {
+  ...b.props(),
+  ...A.props("primary"),
   modelValue: [String, Number],
   variant: {
     type: String,
@@ -25,105 +24,108 @@ const J = {
   },
   ghost: Boolean,
   grow: Boolean,
-  exact: Boolean
-}, U = {
+  exact: Boolean,
+  fullWidth: {
+    type: Boolean,
+    default: !0
+  }
+}, Y = {
   name: "XTabGroup",
-  validators: J
+  validators: Q
 }, ne = /* @__PURE__ */ B({
-  ...U,
-  props: Q,
+  ...Y,
+  props: U,
   emits: ["update:modelValue"],
-  setup(k, { emit: y }) {
-    const t = k, i = l(null), w = l(null), u = l(null), r = l(null), m = l(null), s = l();
-    x(() => {
-      s.value = t.modelValue;
+  setup(k, { emit: w }) {
+    const t = k, g = w, u = r(null), R = r(null), i = r(null), l = r(null), d = r(null), a = r();
+    z(() => {
+      a.value = t.modelValue;
     });
-    const R = E({
-      active: a(() => s.value),
-      variant: a(() => t.variant),
-      ghost: a(() => t.ghost),
-      grow: a(() => t.grow),
-      exact: a(() => t.exact),
-      size: a(() => t.size),
-      color: a(() => t.color)
+    const _ = E({
+      active: o(() => a.value),
+      variant: o(() => t.variant),
+      ghost: o(() => t.ghost),
+      grow: o(() => t.grow),
+      exact: o(() => t.exact),
+      size: o(() => t.size),
+      color: o(() => t.color)
     });
-    function d(e) {
-      s.value = e, y("update:modelValue", e);
+    function h(e) {
+      a.value = e, g("update:modelValue", e);
     }
-    V(O, {
-      tabsContentRef: m,
-      activateTab: d,
-      state: R
+    V(P, {
+      tabsContentRef: d,
+      activateTab: h,
+      state: _
     });
-    const h = I(async (e) => {
-      var b;
+    const p = J(async (e) => {
+      var y;
       if (typeof e > "u")
         return;
-      await D();
-      const o = (b = r.value) == null ? void 0 : b.querySelector(`[data-value="${e}"]`);
-      if (!o || !u.value || (u.value.style.left = `${o.offsetLeft}px`, u.value.style.width = `${o.offsetWidth}px`, !r.value || !i.value))
+      await j();
+      const s = (y = l.value) == null ? void 0 : y.querySelector(`[data-value="${e}"]`);
+      if (!s || !i.value || (i.value.style.left = `${s.offsetLeft}px`, i.value.style.width = `${s.offsetWidth}px`, !l.value || !u.value))
         return;
-      const T = o.offsetLeft - (r.value.getBoundingClientRect().width - o.getBoundingClientRect().width) / 2;
-      i.value.scrollEl && i.value.scrollEl.scrollTo({ left: T, behavior: "smooth" });
-    }, 100), v = l(!0);
+      const C = s.offsetLeft - (l.value.getBoundingClientRect().width - s.getBoundingClientRect().width) / 2;
+      u.value.scrollEl && u.value.scrollEl.scrollTo({ left: C, behavior: "smooth" });
+    }, 100, !0), m = r(!0);
     function S() {
       var e;
-      (e = r.value) != null && e.querySelector(".router-link-active") ? v.value = !0 : (d(null), v.value = !1);
+      (e = l.value) != null && e.querySelector(".router-link-active") ? m.value = !0 : (h(null), m.value = !1);
     }
-    z(() => s.value, (e) => {
-      h(e);
-    }), N(() => {
+    N(() => a.value, (e) => {
+      p(e);
+    }), $(() => {
       var e;
-      (e = r.value) != null && e.querySelector(".x-link") && K(r.value, S, {
+      (e = l.value) != null && e.querySelector(".x-link") && D(l.value, S, {
         attributes: !0,
         subtree: !0,
         attributeFilter: ["class"]
-      }), h(s.value);
+      }), p(a.value);
+    }), K(l, () => {
+      p(a.value);
     });
-    const { styles: _, classes: p, className: C } = W("tabs", H, t);
-    return (e, o) => ($(), q("div", null, [
-      c("div", {
+    const { styles: T, classes: c, className: x } = H("TabGroup", {}, t);
+    return (e, s) => (q(), G("div", null, [
+      f("div", {
         ref_key: "wrapperRef",
-        ref: w,
-        class: f(["relative", [
-          n(C),
-          n(p).wrapper
+        ref: R,
+        class: v(["relative", [
+          n(x),
+          n(c).wrapper
         ]]),
-        style: F(n(_))
+        style: F(n(T))
       }, [
-        G(A, {
+        L(I, {
           ref_key: "scrollRef",
-          ref: i,
+          ref: u,
           scrollbar: !1,
           horizontal: "",
           mousewheel: "",
-          class: f({
-            "rounded-md": e.variant === "block",
-            "bg-slate-100 dark:bg-gray-800 p-1": e.variant === "block" && !e.ghost
-          })
+          class: v(n(c).scroller)
         }, {
-          default: L(() => [
-            c("div", {
+          default: M(() => [
+            f("div", {
               ref_key: "tabsRef",
-              ref: r,
-              class: f(["relative", n(p).list])
+              ref: l,
+              class: v(["relative", n(c).list])
             }, [
-              M(e.$slots, "default")
+              O(e.$slots, "default")
             ], 2),
-            X(c("div", {
+            W(f("div", {
               ref_key: "trackerRef",
-              ref: u,
-              class: f(n(p).tracker)
+              ref: i,
+              class: v(n(c).tracker)
             }, null, 2), [
-              [j, v.value]
+              [X, m.value]
             ])
           ]),
           _: 3
         }, 8, ["class"])
       ], 6),
-      c("div", {
+      f("div", {
         ref_key: "tabsContentRef",
-        ref: m
+        ref: d
       }, null, 512)
     ]));
   }

package/lib/components/tab/index.d.ts

@@ -1,4 +1,4 @@
 export { default as XTab } from './Tab.vue';
-export type { TabProps } from './Tab.vue';
+export type { TabProps, TabTheme } from './Tab.vue';
 export { default as XTabGroup } from './TabGroup.vue';
-export type { TabGroupProps, TabGroupAlign, TabGroupInjection, TabGroupVariant } from './TabGroup.vue';
+export type { TabGroupProps, TabGroupAlign, TabGroupInjection, TabGroupVariant, TabGroupTheme, } from './TabGroup.vue';

package/lib/components/tab/theme/Tab.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { TabTheme } from '../Tab.vue';
+declare const theme: TabTheme;
+export default theme;

package/lib/components/tab/{Tab.theme.js → theme/Tab.base.theme.js}

@@ -4,10 +4,11 @@ const i = {
       const e = ["py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-center"];
       return s.variant === "block" && e.push("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;
     },
-    label: "",
+    content: "flex items-center justify-center",
+    label: "font-medium",
     icon: "mr-1.5"
   }
-}, l = i;
+}, n = i;
 export {
-  l as default
+  n as default
 };

package/lib/components/tab/theme/Tab.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { TabTheme } from '../Tab.vue';
+declare const theme: TabTheme;
+export default theme;

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

@@ -0,0 +1,17 @@
+const n = {
+  classes: {
+    wrapper: ({ props: t, data: s }) => {
+      const e = ["py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-left min-w-[8rem]"];
+      return s.variant === "block" ? e.push("px-8") : 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"
+  }
+}, i = n;
+export {
+  i as default
+};

package/lib/components/tab/theme/TabGroup.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { TabGroupTheme } from '../TabGroup.vue';
+declare const theme: TabGroupTheme;
+export default theme;

package/lib/components/tab/{TabGroup.theme.js → theme/TabGroup.base.theme.js}

@@ -1,13 +1,17 @@
 const l = {
   classes: {
     wrapper: "",
+    scroller: ({ props: t }) => {
+      const a = [""];
+      return t.fullWidth || a.push("!w-fit"), t.variant === "block" && a.push("rounded-md"), t.variant === "block" && !t.ghost && a.push("bg-slate-100 dark:bg-gray-800 p-1"), a;
+    },
     list: ({ props: t }) => {
       const a = ["flex min-w-full w-fit"];
       return t.variant === "line" && a.push("border-b border-gray-200 dark:border-gray-700"), t.variant === "line" && !t.grow && a.push("space-x-8"), t.variant === "block" && a.push("z-[1]"), t.align === "center" && a.push("justify-center"), t.align === "right" && a.push("justify-end"), a;
     },
     tracker: ({ props: t }) => {
       const a = ["absolute transition-all duration-150"];
-      return t.variant === "line" && a.push("h-[2px] -mt-[2px] bg-[color:var(--x-tabs-text)] dark:bg-[color:var(--x-tabs-dark-text)]"), t.variant === "block" && a.push("rounded-md h-full top-0 bg-[color:var(--x-tabs-bg)] dark:bg-[color:var(--x-tabs-dark-bg)]"), a;
+      return t.variant === "line" && a.push("h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]"), t.variant === "block" && a.push("rounded-md h-full top-0 bg-[color:var(--x-tab-group-bg)] dark:bg-[color:var(--x-tab-group-dark-bg)]"), a;
     }
   },
   styles: ({ props: t, colors: a, css: e }) => {

package/lib/components/tab/theme/TabGroup.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { TabGroupTheme } from '../TabGroup.vue';
+declare const theme: TabGroupTheme;
+export default theme;

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

@@ -0,0 +1,5 @@
+import e from "./TabGroup.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};