@indielayer/ui 0.0.0-dev-20240125104319

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

@@ -0,0 +1,128 @@
+import { defineComponent as I, ref as c, openBlock as i, createElementBlock as d, createElementVNode as r, normalizeClass as s, unref as o, normalizeStyle as B, createVNode as u, withCtx as p, Fragment as R, renderList as V, createBlock as N, resolveDynamicComponent as z, toDisplayString as f, createCommentVNode as E, renderSlot as P } from "vue";
+import { useCommon as v } from "../../composables/useCommon.js";
+import { useColors as $ } from "../../composables/useColors.js";
+import { useTheme as D } from "../../composables/useTheme.js";
+import X from "../scroll/Scroll.vue.js";
+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"
+}, K = {
+  ...v.validators(),
+  variant: ["line"]
+}, M = {
+  ...v.props(),
+  ...$.props("primary"),
+  modelValue: [String, Number],
+  steps: {
+    type: Array,
+    default: () => []
+  },
+  variant: {
+    type: String,
+    default: "line"
+  },
+  grow: Boolean,
+  fullWidth: {
+    type: Boolean,
+    default: !0
+  },
+  interactive: {
+    type: Boolean,
+    default: !0
+  },
+  iconPristine: String,
+  iconComplete: String,
+  iconIncomplete: String,
+  iconCurrent: String,
+  iconError: String
+}, O = {
+  name: "XStepper",
+  validators: K
+}, se = /* @__PURE__ */ I({
+  ...O,
+  props: M,
+  emits: ["update:modelValue"],
+  setup(y, { emit: g }) {
+    const l = y, _ = g, b = c(null), S = c(null), h = c(null);
+    function k(t, a) {
+      t.disabled || !l.interactive || _("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;
+    }
+    const { styles: w, classes: n, className: x } = D("Stepper", {}, l);
+    return (t, a) => (i(), d("div", null, [
+      r("div", {
+        ref_key: "wrapperRef",
+        ref: S,
+        class: s(["relative", [
+          o(x),
+          o(n).wrapper
+        ]]),
+        style: B(o(w))
+      }, [
+        u(X, {
+          ref_key: "scrollRef",
+          ref: b,
+          scrollbar: !1,
+          horizontal: "",
+          mousewheel: "",
+          class: s(o(n).scroller)
+        }, {
+          default: p(() => [
+            r("div", {
+              ref_key: "stepperRef",
+              ref: h,
+              class: s(["relative", o(n).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, {
+                  "cursor-pointer": t.interactive && !e.disabled,
+                  "text-gray-400 dark:text-gray-600": e.disabled,
+                  "flex-1": t.grow
+                }]),
+                disabled: e.disabled || !t.interactive,
+                onClick: (Q) => k(e, m)
+              }, {
+                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"]])
+                    }, null, 2),
+                    r("div", q, [
+                      u(A, {
+                        icon: C(e),
+                        size: "sm",
+                        class: s([o(n).icon, {
+                          "text-primary-500": e.status === "complete" || e.status === "incomplete",
+                          "text-error-500": e.status === "error"
+                        }])
+                      }, null, 8, ["icon", "class"]),
+                      r("div", G, [
+                        r("div", H, f(e.label), 1),
+                        e.description ? (i(), d("div", J, f(e.description), 1)) : E("", !0)
+                      ])
+                    ])
+                  ])
+                ]),
+                _: 2
+              }, 1032, ["class", "disabled", "onClick"]))), 128))
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["class"])
+      ], 6),
+      r("div", {
+        class: s(o(n).content)
+      }, [
+        P(t.$slots, "default")
+      ], 2)
+    ]));
+  }
+});
+export {
+  se as default
+};

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

@@ -0,0 +1,4 @@
+import f from "./Stepper.vue.js";
+export {
+  f as default
+};

package/lib/components/stepper/__tests__/Stepper.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as XStepper } from './Stepper.vue';
+export type { StepperProps, StepperVariant, StepperTheme, } from './Stepper.vue';

package/lib/components/stepper/theme/Stepper.base.theme.d.ts

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

package/lib/components/stepper/theme/Stepper.base.theme.js

@@ -0,0 +1,20 @@
+const r = {
+  classes: {
+    wrapper: "",
+    scroller: ({ props: s }) => {
+      const t = [""];
+      return s.fullWidth || t.push("!w-fit"), t;
+    },
+    list: ({ props: s }) => ["flex min-w-full w-fit items-start"],
+    step: ({ props: s, data: t }) => {
+      const e = [""];
+      return s.grow || e.push("w-[8rem]"), e;
+    },
+    label: ({ props: s, data: t }) => [""],
+    icon: ({ props: s, data: t }) => ["mr-2 mt-0.5"],
+    content: "mt-2 mb-4"
+  }
+}, c = r;
+export {
+  c as default
+};

package/lib/components/stepper/theme/Stepper.carbon.theme.d.ts

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

package/lib/components/stepper/theme/Stepper.carbon.theme.js

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

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

@@ -0,0 +1,92 @@
+import { type ExtractPublicPropTypes } from 'vue';
+import { type Size } from '../../composables/useCommon';
+import { type ThemeComponent } from '../../composables/useTheme';
+import type { TabGroupInjection } from './TabGroup.vue';
+declare const tabProps: {
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+    };
+    tag: {
+        type: StringConstructor;
+        default: 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;
+    };
+};
+export type TabProps = ExtractPublicPropTypes<typeof tabProps>;
+type InternalClasses = 'wrapper' | 'content' | 'label' | 'icon' | 'tabpanel';
+type InternalExtraData = {
+    selected: boolean;
+} & Pick<TabGroupInjection, 'state'>['state'];
+export interface TabTheme extends ThemeComponent<TabProps, InternalClasses, InternalExtraData> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+    };
+    tag: {
+        type: StringConstructor;
+        default: 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;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "remove"[], "remove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+    };
+    tag: {
+        type: StringConstructor;
+        default: 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;
+    };
+}>> & {
+    onRemove?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    tag: string;
+    removable: boolean;
+    size: Size;
+    exact: boolean;
+}, {}>, {
+    tab?(_: {
+        label: string | undefined;
+        value: string | number | undefined;
+        size: Size;
+        icon: string | undefined;
+    }): any;
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,148 @@
+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(),
+  value: {
+    type: [String, Number]
+  },
+  tag: {
+    type: String,
+    default: "button"
+  },
+  to: [String, Object],
+  label: String,
+  icon: String,
+  disabled: Boolean,
+  exact: Boolean,
+  removable: Boolean
+}, A = {
+  name: "XTab",
+  validators: {
+    ...C.validators()
+  }
+}, ee = /* @__PURE__ */ R({
+  ...A,
+  props: q,
+  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),
+      activateTab: () => {
+      },
+      state: D({
+        active: void 0,
+        variant: "line",
+        ghost: !1,
+        grow: !1,
+        exact: !1,
+        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, {
+        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);
+    }
+    const r = s(() => a.state.active === i.value), h = s(() => a.state.color);
+    function $(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({
+      ...t,
+      size: b.value,
+      exact: g.value
+    }), {
+      ...a.state,
+      selected: r
+    });
+    return (e, u) => (d(), m(V(e.to ? I : e.tag), {
+      ref_key: "elRef",
+      ref: l,
+      "data-value": i.value,
+      to: e.to,
+      color: r.value ? h.value : void 0,
+      style: E([
+        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([
+        o(B),
+        o(n).wrapper,
+        "shrink-0",
+        {
+          "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 && !r.value
+        }
+      ]),
+      "aria-disabled": e.disabled ? "true" : void 0,
+      "aria-selected": r.value ? "true" : "false",
+      onClick: $
+    }, {
+      default: M(() => [
+        x(e.$slots, "tab", {
+          label: e.label,
+          value: e.value,
+          size: b.value,
+          icon: e.icon
+        }, () => [
+          f("div", {
+            class: c(o(n).content)
+          }, [
+            e.icon ? (d(), m(z, {
+              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)
+            }, O(S.value), 3),
+            e.removable ? (d(), m(z, {
+              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",
+              onClick: u[0] || (u[0] = (N) => e.$emit("remove", N))
+            }, null, 8, ["icon"])) : k("", !0)
+          ], 2)
+        ]),
+        r.value && p.value ? (d(), m(P, {
+          key: 0,
+          to: p.value
+        }, [
+          f("div", {
+            role: "tabpanel",
+            class: c(o(n).tabpanel)
+          }, [
+            x(e.$slots, "default")
+          ], 2)
+        ], 8, ["to"])) : k("", !0)
+      ]),
+      _: 3
+    }, 8, ["data-value", "to", "color", "style", "class", "aria-disabled", "aria-selected"]));
+  }
+});
+export {
+  ee as default
+};

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

@@ -0,0 +1,4 @@
+import f from "./Tab.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,126 @@
+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"];
+    align: readonly ["left", "center", "right"];
+    size: string[];
+};
+declare const tabGroupProps: {
+    modelValue: (StringConstructor | NumberConstructor)[];
+    variant: {
+        type: PropType<"block" | "line">;
+        default: string;
+    };
+    align: {
+        type: PropType<"left" | "right" | "center">;
+        default: string;
+    };
+    ghost: BooleanConstructor;
+    grow: BooleanConstructor;
+    exact: BooleanConstructor;
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type TabGroupInjection = {
+    tabsContentRef: Ref<HTMLElement | null>;
+    activateTab: (tab: string | number) => void;
+    state: {
+        active: string | number | undefined;
+        variant: TabGroupVariant;
+        ghost: boolean;
+        grow: boolean;
+        exact: boolean;
+        size: Size;
+        color: string;
+    };
+};
+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<"block" | "line">;
+        default: string;
+    };
+    align: {
+        type: PropType<"left" | "right" | "center">;
+        default: string;
+    };
+    ghost: BooleanConstructor;
+    grow: BooleanConstructor;
+    exact: BooleanConstructor;
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}, {}, 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<"block" | "line">;
+        default: string;
+    };
+    align: {
+        type: PropType<"left" | "right" | "center">;
+        default: string;
+    };
+    ghost: BooleanConstructor;
+    grow: BooleanConstructor;
+    exact: BooleanConstructor;
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: string;
+    size: Size;
+    align: "left" | "right" | "center";
+    ghost: boolean;
+    exact: boolean;
+    variant: "block" | "line";
+    grow: boolean;
+    fullWidth: boolean;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,135 @@
+import { defineComponent as B, ref as r, watchEffect as z, reactive as E, computed as o, provide as V, watch as G, onMounted as N, openBlock as $, createElementBlock as q, 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 { injectTabGroupKey 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"]
+}, U = {
+  ...b.props(),
+  ...A.props("primary"),
+  modelValue: [String, Number],
+  variant: {
+    type: String,
+    default: "line"
+  },
+  align: {
+    type: String,
+    default: "left"
+  },
+  ghost: Boolean,
+  grow: Boolean,
+  exact: Boolean,
+  fullWidth: {
+    type: Boolean,
+    default: !0
+  }
+}, Y = {
+  name: "XTabGroup",
+  validators: Q
+}, ne = /* @__PURE__ */ B({
+  ...Y,
+  props: U,
+  emits: ["update: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 _ = 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 h(e) {
+      a.value = e, g("update:modelValue", e);
+    }
+    V(P, {
+      tabsContentRef: d,
+      activateTab: h,
+      state: _
+    });
+    const p = J(async (e) => {
+      var y;
+      if (typeof e > "u")
+        return;
+      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 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 = l.value) != null && e.querySelector(".router-link-active") ? m.value = !0 : (h(null), m.value = !1);
+    }
+    G(() => a.value, (e) => {
+      p(e);
+    }), N(() => {
+      var e;
+      (e = l.value) != null && e.querySelector(".x-link") && D(l.value, S, {
+        attributes: !0,
+        subtree: !0,
+        attributeFilter: ["class"]
+      }), p(a.value);
+    }), K(l, () => {
+      p(a.value);
+    });
+    const { styles: T, classes: c, className: x } = H("TabGroup", {}, t);
+    return (e, s) => ($(), q("div", null, [
+      f("div", {
+        ref_key: "wrapperRef",
+        ref: R,
+        class: v(["relative", [
+          n(x),
+          n(c).wrapper
+        ]]),
+        style: F(n(T))
+      }, [
+        L(I, {
+          ref_key: "scrollRef",
+          ref: u,
+          scrollbar: !1,
+          horizontal: "",
+          mousewheel: "",
+          class: v(n(c).scroller)
+        }, {
+          default: M(() => [
+            f("div", {
+              ref_key: "tabsRef",
+              ref: l,
+              class: v(["relative", n(c).list])
+            }, [
+              O(e.$slots, "default")
+            ], 2),
+            W(f("div", {
+              ref_key: "trackerRef",
+              ref: i,
+              class: v(n(c).tracker)
+            }, null, 2), [
+              [X, m.value]
+            ])
+          ]),
+          _: 3
+        }, 8, ["class"])
+      ], 6),
+      f("div", {
+        ref_key: "tabsContentRef",
+        ref: d
+      }, null, 512)
+    ]));
+  }
+});
+export {
+  ne as default
+};

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

@@ -0,0 +1,4 @@
+import f from "./TabGroup.vue.js";
+export {
+  f as default
+};