@indielayer/ui 1.4.0 → 1.5.0

package/lib/components/stepper/Stepper.vue.js

@@ -7,7 +7,7 @@ import A from "../icon/Icon.vue.js";
 import { stepperIncompleteIcon as F, errorIcon as L, successIcon as T, stepperPristineIcon as W } from "../../common/icons.js";
 const j = { class: "overflow-hidden" }, q = { class: "flex items-start pr-4" }, G = { class: "grid text-left" }, H = { class: "text-sm truncate" }, J = {
   key: 0,
-  class: "text-xs text-gray-500"
+  class: "text-xs text-secondary-500"
 }, K = {
   ...v.validators(),
   variant: ["line"]
@@ -44,22 +44,22 @@ const j = { class: "overflow-hidden" }, q = { class: "flex items-start pr-4" },
   ...O,
   props: M,
   emits: ["update:modelValue"],
-  setup(y, { emit: g }) {
-    const l = y, _ = g, b = c(null), S = c(null), h = c(null);
+  setup(y, { emit: _ }) {
+    const n = y, g = _, b = c(null), S = c(null), h = c(null);
     function k(t, a) {
-      t.disabled || !l.interactive || _("update:modelValue", a);
+      t.disabled || !n.interactive || g("update:modelValue", a);
     }
     function C(t, a) {
-      return t.status === "incomplete" ? l.iconIncomplete || F : t.status === "error" ? l.iconError || L : t.status === "complete" ? l.iconComplete || T : l.iconPristine || W;
+      return t.status === "incomplete" ? n.iconIncomplete || F : t.status === "error" ? n.iconError || L : t.status === "complete" ? n.iconComplete || T : n.iconPristine || W;
     }
-    const { styles: w, classes: n, className: x } = D("Stepper", {}, l);
+    const { styles: w, classes: l, className: x } = D("Stepper", {}, n);
     return (t, a) => (i(), d("div", null, [
       r("div", {
         ref_key: "wrapperRef",
         ref: S,
         class: s(["relative", [
           o(x),
-          o(n).wrapper
+          o(l).wrapper
         ]]),
         style: B(o(w))
       }, [
@@ -69,19 +69,19 @@ const j = { class: "overflow-hidden" }, q = { class: "flex items-start pr-4" },
           scrollbar: !1,
           horizontal: "",
           mousewheel: "",
-          class: s(o(n).scroller)
+          class: s(o(l).scroller)
         }, {
           default: p(() => [
             r("div", {
               ref_key: "stepperRef",
               ref: h,
-              class: s(["relative", o(n).list])
+              class: s(["relative", o(l).list])
             }, [
               (i(!0), d(R, null, V(t.steps, (e, m) => (i(), N(z(t.interactive ? "button" : "div"), {
                 key: m,
-                class: s([o(n).step, {
+                class: s([o(l).step, {
                   "cursor-pointer": t.interactive && !e.disabled,
-                  "text-gray-400 dark:text-gray-600": e.disabled,
+                  "text-secondary-400 dark:text-secondary-600": e.disabled,
                   "flex-1": t.grow
                 }]),
                 disabled: e.disabled || !t.interactive,
@@ -90,13 +90,13 @@ const j = { class: "overflow-hidden" }, q = { class: "flex items-start pr-4" },
                 default: p(() => [
                   r("div", j, [
                     r("div", {
-                      class: s(["h-0.5 w-full mb-2", [e.status === "complete" || e.status === "incomplete" ? "bg-primary-500" : "bg-gray-200 dark:bg-gray-700"]])
+                      class: s(["h-0.5 w-full mb-2", [e.status === "complete" || e.status === "incomplete" ? "bg-primary-500" : "bg-secondary-200 dark:bg-secondary-700"]])
                     }, null, 2),
                     r("div", q, [
                       u(A, {
                         icon: C(e),
                         size: "sm",
-                        class: s([o(n).icon, {
+                        class: s([o(l).icon, {
                           "text-primary-500": e.status === "complete" || e.status === "incomplete",
                           "text-error-500": e.status === "error"
                         }])
@@ -116,7 +116,7 @@ const j = { class: "overflow-hidden" }, q = { class: "flex items-start pr-4" },
         }, 8, ["class"])
       ], 6),
       r("div", {
-        class: s(o(n).content)
+        class: s(o(l).content)
       }, [
         P(t.$slots, "default")
       ], 2)

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

@@ -1,13 +1,13 @@
-import { defineComponent as R, computed as s, ref as v, inject as j, reactive as D, onMounted as L, openBlock as d, createBlock as m, resolveDynamicComponent as V, normalizeStyle as E, unref as o, normalizeClass as c, withCtx as M, renderSlot as x, createElementVNode as f, createCommentVNode as k, toDisplayString as O, Teleport as P } from "vue";
-import { useMutationObserver as X } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
-import { injectTabGroupKey as F } from "../../composables/keys.js";
-import { useCommon as C } from "../../composables/useCommon.js";
-import { useTheme as G } from "../../composables/useTheme.js";
-import z from "../icon/Icon.vue.js";
-import I from "../link/Link.vue.js";
-import { closeIcon as K } from "../../common/icons.js";
-const q = {
-  ...C.props(),
+import { defineComponent as R, computed as s, ref as d, inject as j, reactive as D, onMounted as E, openBlock as c, createBlock as m, resolveDynamicComponent as L, normalizeStyle as V, unref as o, normalizeClass as v, withCtx as M, renderSlot as g, createElementVNode as z, createCommentVNode as p, toDisplayString as O, Teleport as P, createElementBlock as X } from "vue";
+import { useMutationObserver as F } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { injectTabGroupKey as G } from "../../composables/keys.js";
+import { useCommon as x } from "../../composables/useCommon.js";
+import { useTheme as I } from "../../composables/useTheme.js";
+import C from "../icon/Icon.vue.js";
+import K from "../link/Link.vue.js";
+import { closeIcon as q } from "../../common/icons.js";
+const A = {
+  ...x.props(),
   value: {
     type: [String, Number]
   },
@@ -21,21 +21,21 @@ const q = {
   disabled: Boolean,
   exact: Boolean,
   removable: Boolean
-}, A = {
+}, H = {
   name: "XTab",
   validators: {
-    ...C.validators()
+    ...x.validators()
   }
-}, ee = /* @__PURE__ */ R({
-  ...A,
-  props: q,
+}, te = /* @__PURE__ */ R({
+  ...H,
+  props: A,
   emits: ["remove"],
   setup(T) {
     const t = T, i = s(() => {
       var e, u;
       return ((u = (e = l.value) == null ? void 0 : e.$el) == null ? void 0 : u.href) || t.value;
-    }), S = s(() => t.label || t.value), p = v(null), l = v(null), a = j(F, {
-      tabsContentRef: v(null),
+    }), S = s(() => t.label || t.value), b = d(null), l = d(null), a = j(G, {
+      tabsContentRef: d(null),
       activateTab: () => {
       },
       state: D({
@@ -47,43 +47,43 @@ const q = {
         size: "md",
         color: "primary"
       })
-    }), g = s(() => a.state.exact || t.exact), b = s(() => t.size || a.state.size);
-    L(() => {
-      p.value = a.tabsContentRef.value, t.to && l.value && (y(), X(l.value.$el, y, {
+    }), k = s(() => a.state.exact || t.exact), f = s(() => t.size || a.state.size);
+    E(() => {
+      b.value = a.tabsContentRef.value, t.to && l.value && (y(), F(l.value.$el, y, {
         attributes: !0,
         attributeFilter: ["class"]
       }));
     });
     function y() {
-      l.value && l.value.$el && t.to && l.value.$el.classList.contains(g.value ? "router-link-exact-active" : "router-link-active") && a.activateTab(i.value);
+      l.value && l.value.$el && t.to && l.value.$el.classList.contains(k.value ? "router-link-exact-active" : "router-link-active") && a.activateTab(i.value);
     }
-    const r = s(() => a.state.active === i.value), h = s(() => a.state.color);
-    function $(e) {
+    const r = s(() => a.state.active === i.value), $ = s(() => a.state.color);
+    function h(e) {
       if (t.disabled) {
         e.preventDefault(), e.stopPropagation();
         return;
       }
       !t.to && typeof i.value < "u" && a.activateTab(i.value);
     }
-    const { styles: w, classes: n, className: B } = G("Tab", {}, v({
+    const { styles: w, classes: n, className: B } = I("Tab", {}, d({
       ...t,
-      size: b.value,
-      exact: g.value
+      size: f.value,
+      exact: k.value
     }), {
       ...a.state,
       selected: r
     });
-    return (e, u) => (d(), m(V(e.to ? I : e.tag), {
+    return (e, u) => (c(), m(L(e.to ? K : e.tag), {
       ref_key: "elRef",
       ref: l,
       "data-value": i.value,
       to: e.to,
-      color: r.value ? h.value : void 0,
-      style: E([
+      color: r.value ? $.value : void 0,
+      style: V([
         o(w),
         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: c([
+      class: v([
         o(B),
         o(n).wrapper,
         "shrink-0",
@@ -92,57 +92,58 @@ const q = {
           "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 && !r.value
+          "cursor-not-allowed text-secondary-500": e.disabled && !r.value
         }
       ]),
       "aria-disabled": e.disabled ? "true" : void 0,
       "aria-selected": r.value ? "true" : "false",
-      onClick: $
+      onClick: h
     }, {
       default: M(() => [
-        x(e.$slots, "tab", {
+        g(e.$slots, "tab", {
           label: e.label,
           value: e.value,
-          size: b.value,
+          size: f.value,
           icon: e.icon
         }, () => [
-          f("div", {
-            class: c(o(n).content)
+          z("div", {
+            class: v(o(n).content)
           }, [
-            e.icon ? (d(), m(z, {
+            e.icon ? (c(), m(C, {
               key: 0,
               icon: e.icon,
-              size: b.value,
-              class: c(o(n).icon)
-            }, null, 8, ["icon", "size", "class"])) : k("", !0),
-            f("div", {
-              class: c(o(n).label)
+              size: f.value,
+              class: v(o(n).icon)
+            }, null, 8, ["icon", "size", "class"])) : p("", !0),
+            z("div", {
+              class: v(o(n).label)
             }, O(S.value), 3),
-            e.removable ? (d(), m(z, {
+            e.removable ? (c(), m(C, {
               key: 1,
               size: "sm",
-              icon: o(K),
-              class: "ml-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-500 transition-colors duration-150",
+              icon: o(q),
+              class: "ml-2 cursor-pointer hover:text-secondary-700 dark:hover:text-secondary-500 transition-colors duration-150",
               onClick: u[0] || (u[0] = (N) => e.$emit("remove", N))
-            }, null, 8, ["icon"])) : k("", !0)
+            }, null, 8, ["icon"])) : p("", !0)
           ], 2)
         ]),
-        r.value && p.value ? (d(), m(P, {
+        r.value && b.value ? (c(), m(P, {
           key: 0,
-          to: p.value
+          to: b.value
         }, [
-          f("div", {
+          e.$slots.default ? (c(), X("div", {
+            key: 0,
             role: "tabpanel",
-            class: c(o(n).tabpanel)
+            class: v(o(n).tabpanel)
           }, [
-            x(e.$slots, "default")
-          ], 2)
-        ], 8, ["to"])) : k("", !0)
+            g(e.$slots, "default")
+          ], 2)) : p("", !0)
+        ], 8, ["to"])) : p("", !0)
       ]),
       _: 3
     }, 8, ["data-value", "to", "color", "style", "class", "aria-disabled", "aria-selected"]));
   }
 });
 export {
-  ee as default
+  te as default
 };

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

@@ -1,31 +1,31 @@
-const l = {
+const o = {
   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;
+      const r = [""];
+      return t.fullWidth || r.push("!w-fit"), t.variant === "block" && r.push("rounded-md"), t.variant === "block" && !t.ghost && r.push("bg-secondary-100 dark:bg-secondary-800 p-1"), r;
     },
     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;
+      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 a = ["absolute transition-all duration-150"];
-      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;
+      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: a, css: e }) => {
-    const i = a.getPalette("gray"), r = a.getPalette(t.color);
+  styles: ({ props: t, colors: r, css: e }) => {
+    const n = r.getPalette("secondary"), a = r.getPalette(t.color);
     return e.variables({
-      text: r[600],
-      bg: t.ghost ? r[50] : "#fff",
+      text: a[600],
+      bg: t.ghost ? a[50] : "#fff",
       dark: {
-        text: r[400],
-        bg: t.ghost ? r[900] : i[700]
+        text: a[400],
+        bg: t.ghost ? a[900] : n[700]
       }
     });
   }
-}, n = l;
+}, i = o;
 export {
-  n as default
+  i as default
 };

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

@@ -1,31 +1,31 @@
-const l = {
+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-gray-200 dark:bg-gray-800"), 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-gray-200 dark:border-gray-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;
+      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-gray-100 dark:bg-gray-700"), r;
+      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 i = r.getPalette("gray"), a = r.getPalette(t.color);
+    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] : i[700]
+        bg: t.ghost ? a[900] : o[700]
       }
     });
   }
-}, o = l;
+}, i = n;
 export {
-  o as default
+  i as default
 };