@indielayer/ui 0.0.0-dev-20240125104319

package/lib/components/badge/Badge.vue.js

@@ -0,0 +1,93 @@
+import { defineComponent as v, useSlots as z, computed as l, openBlock as o, createBlock as S, resolveDynamicComponent as B, normalizeStyle as n, unref as s, normalizeClass as i, withCtx as w, createElementVNode as r, renderSlot as a, createElementBlock as p, createCommentVNode as f } from "vue";
+import { useTheme as C } from "../../composables/useTheme.js";
+import { useCommon as m } from "../../composables/useCommon.js";
+import { useColors as k } from "../../composables/useColors.js";
+const N = { class: "relative inline-block" }, X = {
+  key: 0,
+  class: "animate-ping opacity-75 absolute top-0 left-0 rounded-full h-full w-full z-10 bg-[color:var(--x-badge-bg)]"
+}, x = ["left", "right"], Y = ["top", "bottom"], $ = {
+  ...m.props(),
+  ...k.props("primary"),
+  tag: {
+    type: String,
+    default: "div"
+  },
+  position: {
+    type: String,
+    default: "top"
+  },
+  align: {
+    type: String,
+    default: "right"
+  },
+  offsetX: [Number, String],
+  offsetY: [Number, String],
+  animated: Boolean,
+  outlined: Boolean,
+  icon: String,
+  show: {
+    type: Boolean,
+    default: !0
+  }
+}, E = {
+  name: "XBadge",
+  validators: {
+    ...m.validators(),
+    position: Y,
+    align: x
+  }
+}, D = /* @__PURE__ */ v({
+  ...E,
+  props: $,
+  setup(u) {
+    const t = u, d = z(), g = l(() => {
+      const e = [];
+      return t.position === "top" && e.push("top-0"), t.position === "bottom" && e.push("bottom-0"), t.align === "left" && e.push("left-0"), t.align === "right" && e.push("right-0"), d.content ? e.push("-m-[7.5%]") : t.outlined ? e.push("-m-[5%]") : e.push("-m-[3.5%]"), e;
+    }), c = l(() => {
+      const e = {};
+      return t.offsetX && (e[t.align === "left" ? "marginLeft" : "marginRight"] = t.offsetX + "px"), t.offsetY && (e[t.position === "top" ? "marginTop" : "marginBottom"] = t.offsetY + "px"), e;
+    }), { styles: h, classes: b, className: y } = C("Badge", {}, t);
+    return (e, P) => (o(), S(B(e.tag), {
+      style: n(s(h)),
+      class: i([
+        s(y),
+        s(b).wrapper
+      ])
+    }, {
+      default: w(() => [
+        r("div", N, [
+          a(e.$slots, "default"),
+          e.show ? (o(), p("div", {
+            key: 0,
+            class: i(["absolute rounded-full z-10 bg-[color:var(--x-badge-bg)]", [
+              g.value,
+              {
+                "border-2 border-gray-50 dark:border-gray-900": e.outlined
+              }
+            ]]),
+            style: n(c.value)
+          }, [
+            e.animated ? (o(), p("div", X)) : f("", !0),
+            r("div", {
+              class: i(["text-xs text-white overflow-hidden", [
+                e.$slots.content ? "flex items-center justify-center min-w-[1.25rem] h-5 px-1.5" : {
+                  "p-1": e.size === "xs",
+                  "p-[0.312rem]": e.size === "sm",
+                  "p-1.5": !e.size || !["xs", "sm", "lg", "xl"].includes(e.size),
+                  "p-2": e.size === "lg",
+                  "p-2.5": e.size === "xl"
+                }
+              ]])
+            }, [
+              a(e.$slots, "content")
+            ], 2)
+          ], 6)) : f("", !0)
+        ])
+      ]),
+      _: 3
+    }, 8, ["style", "class"]));
+  }
+});
+export {
+  D as default
+};

package/lib/components/badge/Badge.vue2.js

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

package/lib/components/badge/__tests__/Badge.spec.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default as XBadge } from './Badge.vue';
+export type { BadgeProps, BadgeAlign, BadgePosition, BadgeTheme } from './Badge.vue';

package/lib/components/badge/theme/Badge.base.theme.d.ts

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

package/lib/components/badge/theme/Badge.base.theme.js

@@ -0,0 +1,12 @@
+const l = {
+  classes: {
+    wrapper: "inline-block"
+  },
+  styles({ props: e, colors: t, css: s }) {
+    const o = t.getPalette(e.color);
+    return s.get("bg", o[500]);
+  }
+}, c = l;
+export {
+  c as default
+};

package/lib/components/badge/theme/Badge.carbon.theme.d.ts

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

package/lib/components/badge/theme/Badge.carbon.theme.js

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

package/lib/components/breadcrumbs/Breadcrumbs.vue.d.ts

@@ -0,0 +1,62 @@
+import { type ExtractPublicPropTypes, type PropType } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const breadcrumbsProps: {
+    items: PropType<BreadcrumbsItem[]>;
+    separator: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: StringConstructor;
+    shadow: BooleanConstructor;
+    underline: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+};
+export type BreadcrumbsItem = {
+    label: string;
+    to?: string | object;
+    href?: string;
+    color?: string;
+    icon?: string;
+    shadow?: boolean;
+    underline?: boolean;
+};
+export type BreadcrumbsProps = ExtractPublicPropTypes<typeof breadcrumbsProps>;
+type InternalClasses = 'wrapper' | 'item' | 'separator';
+export interface BreadcrumbsTheme extends ThemeComponent<BreadcrumbsProps, InternalClasses> {
+}
+declare const _default: import("vue").DefineComponent<{
+    items: PropType<BreadcrumbsItem[]>;
+    separator: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: StringConstructor;
+    shadow: BooleanConstructor;
+    underline: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    items: PropType<BreadcrumbsItem[]>;
+    separator: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: StringConstructor;
+    shadow: BooleanConstructor;
+    underline: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+}>>, {
+    color: string;
+    separator: string;
+    shadow: boolean;
+    underline: boolean;
+}, {}>;
+export default _default;

package/lib/components/breadcrumbs/Breadcrumbs.vue.js

@@ -0,0 +1,69 @@
+import { defineComponent as y, openBlock as o, createElementBlock as s, normalizeClass as n, unref as a, normalizeStyle as k, createElementVNode as B, Fragment as b, renderList as w, createVNode as g, withCtx as C, createBlock as i, createCommentVNode as l, createTextVNode as N, toDisplayString as m } from "vue";
+import { useTheme as S } from "../../composables/useTheme.js";
+import { useColors as V } from "../../composables/useColors.js";
+import u from "../icon/Icon.vue.js";
+import z from "../link/Link.vue.js";
+const v = { key: 1 }, E = {
+  ...V.props(),
+  items: Array,
+  separator: {
+    type: String,
+    default: "/"
+  },
+  icon: String,
+  shadow: Boolean,
+  underline: Boolean
+}, L = { name: "XBreadcrumbs" }, P = /* @__PURE__ */ y({
+  ...L,
+  props: E,
+  setup(d) {
+    const p = d, { styles: f, classes: t, className: h } = S("Breadcrumbs", {}, p);
+    return (e, T) => e.items && e.items.length > 0 ? (o(), s("nav", {
+      key: 0,
+      "aria-label": "Breadcrumb",
+      class: n(a(h)),
+      style: k(a(f))
+    }, [
+      B("ul", {
+        class: n(a(t).wrapper)
+      }, [
+        (o(!0), s(b, null, w(e.items, (r, c) => (o(), s("li", {
+          key: c,
+          class: n(a(t).item)
+        }, [
+          g(z, {
+            to: r.to,
+            href: r.href,
+            color: r.color || e.color,
+            shadow: r.shadow || e.shadow,
+            underline: r.underline || e.underline,
+            class: "flex items-center"
+          }, {
+            default: C(() => [
+              r.icon ? (o(), i(u, {
+                key: 0,
+                icon: r.icon,
+                class: "mr-1.5"
+              }, null, 8, ["icon"])) : l("", !0),
+              N(" " + m(r.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["to", "href", "color", "shadow", "underline"]),
+          c !== e.items.length - 1 ? (o(), s("div", {
+            key: 0,
+            class: n(a(t).separator)
+          }, [
+            e.icon ? (o(), i(u, {
+              key: 0,
+              icon: e.icon,
+              size: "sm"
+            }, null, 8, ["icon"])) : e.separator ? (o(), s("span", v, m(e.separator), 1)) : l("", !0)
+          ], 2)) : l("", !0)
+        ], 2))), 128))
+      ], 2)
+    ], 6)) : l("", !0);
+  }
+});
+export {
+  P as default
+};

package/lib/components/breadcrumbs/Breadcrumbs.vue2.js

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

package/lib/components/breadcrumbs/__tests__/Breadcrumbs.spec.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default as XBreadcrumbs } from './Breadcrumbs.vue';
+export type { BreadcrumbsProps, BreadcrumbsItem, BreadcrumbsTheme } from './Breadcrumbs.vue';

package/lib/components/breadcrumbs/theme/Breadcrumbs.base.theme.d.ts

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

package/lib/components/breadcrumbs/theme/Breadcrumbs.base.theme.js

@@ -0,0 +1,10 @@
+const e = {
+  classes: {
+    wrapper: "flex items-center flex-wrap",
+    item: "flex items-center last-of-type:font-semibold",
+    separator: "text-gray-400 mx-1.5"
+  }
+}, t = e;
+export {
+  t as default
+};

package/lib/components/breadcrumbs/theme/Breadcrumbs.carbon.theme.d.ts

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

package/lib/components/breadcrumbs/theme/Breadcrumbs.carbon.theme.js

@@ -0,0 +1,10 @@
+import e from "./Breadcrumbs.base.theme.js";
+const s = {
+  classes: {
+    ...e.classes,
+    wrapper: "flex items-center flex-wrap text-sm"
+  }
+}, a = s;
+export {
+  a as default
+};

package/lib/components/button/Button.vue.d.ts

@@ -0,0 +1,145 @@
+import { type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const buttonProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: StringConstructor;
+    iconLeft: StringConstructor;
+    iconRight: StringConstructor;
+    to: StringConstructor;
+    outlined: BooleanConstructor;
+    rounded: BooleanConstructor;
+    glow: BooleanConstructor;
+    ghost: BooleanConstructor;
+    light: BooleanConstructor;
+    block: BooleanConstructor;
+    flat: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type ButtonProps = ExtractPublicPropTypes<typeof buttonProps>;
+type InternalClasses = 'wrapper' | 'iconLeft' | 'iconRight';
+type InternalExtraData = {
+    isButtonGroup: boolean;
+};
+export interface ButtonTheme extends ThemeComponent<ButtonProps, InternalClasses, InternalExtraData> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: StringConstructor;
+    iconLeft: StringConstructor;
+    iconRight: StringConstructor;
+    to: StringConstructor;
+    outlined: BooleanConstructor;
+    rounded: BooleanConstructor;
+    glow: BooleanConstructor;
+    ghost: BooleanConstructor;
+    light: BooleanConstructor;
+    block: BooleanConstructor;
+    flat: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}, {
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: StringConstructor;
+    iconLeft: StringConstructor;
+    iconRight: StringConstructor;
+    to: StringConstructor;
+    outlined: BooleanConstructor;
+    rounded: BooleanConstructor;
+    glow: BooleanConstructor;
+    ghost: BooleanConstructor;
+    light: BooleanConstructor;
+    block: BooleanConstructor;
+    flat: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: StringConstructor;
+    loadingStatus: {
+        readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
+        readonly default: "active";
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}>>, {
+    disabled: boolean;
+    flat: boolean;
+    type: string;
+    tag: string;
+    glow: boolean;
+    light: boolean;
+    outlined: boolean;
+    color: string;
+    rounded: boolean;
+    size: import("../../composables/useCommon").Size;
+    ghost: boolean;
+    block: boolean;
+    loading: boolean;
+    loadingStatus: import("../loader/Loader.vue").LoaderStatus;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/button/Button.vue.js

@@ -0,0 +1,9 @@
+import o from "./Button.vue2.js";
+import s from "./Button.vue3.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const c = {
+  $style: s
+}, m = /* @__PURE__ */ t(o, [["__cssModules", c], ["__scopeId", "data-v-46c0001b"]]);
+export {
+  m as default
+};

package/lib/components/button/Button.vue2.js

@@ -0,0 +1,117 @@
+import { defineComponent as D, ref as I, inject as T, computed as l, useAttrs as V, unref as e, openBlock as a, createBlock as r, resolveDynamicComponent as A, normalizeClass as u, normalizeStyle as E, withCtx as F, createCommentVNode as d, createElementVNode as m, renderSlot as K } from "vue";
+import { useTheme as O } from "../../composables/useTheme.js";
+import { useColors as X } from "../../composables/useColors.js";
+import { useCommon as b } from "../../composables/useCommon.js";
+import { useInteractive as h } from "../../composables/useInteractive.js";
+import { injectButtonGroupKey as q } from "../../composables/keys.js";
+import H from "../loader/Loader.vue.js";
+import f from "../icon/Icon.vue.js";
+const J = {
+  ...b.props(),
+  ...X.props(),
+  ...h.props(),
+  tag: {
+    type: String,
+    default: "button"
+  },
+  type: {
+    type: String,
+    default: "button"
+  },
+  icon: String,
+  iconLeft: String,
+  iconRight: String,
+  to: String,
+  outlined: Boolean,
+  rounded: Boolean,
+  glow: Boolean,
+  ghost: Boolean,
+  light: Boolean,
+  block: Boolean,
+  flat: Boolean
+}, M = {
+  name: "XButton",
+  validators: {
+    ...b.validators()
+  }
+}, eo = /* @__PURE__ */ D({
+  ...M,
+  props: J,
+  setup(y, { expose: v }) {
+    const t = y, g = I(null), s = T(q, {
+      isButtonGroup: !1,
+      groupProps: {}
+    }), { isButtonGroup: B } = s, n = l(() => s.groupProps.size || t.size), z = l(() => s.groupProps.flat || t.flat), k = l(() => t.color || s.groupProps.color), P = l(() => t.ghost || s.groupProps.ghost), S = l(() => t.light || s.groupProps.light), w = l(() => t.outlined || s.groupProps.outlined), i = l(() => t.disabled || s.groupProps.disabled), p = l(() => t.icon || t.iconLeft), C = V(), R = l(() => C.href ? "a" : t.to ? "router-link" : t.tag), L = l(() => ({
+      size: e(n),
+      flat: e(z),
+      color: e(k),
+      ghost: e(P),
+      light: e(S),
+      outlined: e(w),
+      disabled: e(i),
+      loading: t.loading,
+      block: t.block,
+      glow: t.glow,
+      iconLeft: e(p),
+      iconRight: t.iconRight,
+      rounded: t.rounded
+    })), { className: G, classes: c, styles: $ } = O("Button", {}, L, {
+      isButtonGroup: B
+    }), { focus: N, blur: j } = h(g);
+    return v({ focus: N, blur: j }), (o, Q) => (a(), r(A(R.value), {
+      ref_key: "elRef",
+      ref: g,
+      to: o.to,
+      class: u([
+        e(G),
+        o.$style.button,
+        o.glow && !i.value && !o.loading ? o.$style["button--glow"] : "",
+        e(c).wrapper,
+        { "w-full": o.block }
+      ]),
+      style: E(e($)),
+      "aria-busy": o.loading ? "true" : null,
+      "aria-disabled": o.tag !== "button" && i.value ? "true" : null,
+      disabled: i.value || o.loading,
+      type: o.tag === "button" ? o.type : null
+    }, {
+      default: F(() => [
+        o.loading ? (a(), r(H, {
+          key: 0,
+          class: "absolute",
+          size: n.value,
+          label: o.loadingLabel,
+          status: o.loadingStatus
+        }, null, 8, ["size", "label", "status"])) : d("", !0),
+        m("div", {
+          class: u({ invisible: o.loading })
+        }, [
+          p.value ? (a(), r(f, {
+            key: 0,
+            size: n.value,
+            icon: p.value,
+            class: u([
+              e(c).iconLeft
+            ])
+          }, null, 8, ["size", "icon", "class"])) : d("", !0),
+          m("span", null, [
+            K(o.$slots, "default", {}, void 0, !0)
+          ])
+        ], 2),
+        o.iconRight ? (a(), r(f, {
+          key: 1,
+          size: n.value,
+          icon: o.iconRight,
+          class: u([
+            e(c).iconRight,
+            { invisible: o.loading }
+          ])
+        }, null, 8, ["size", "icon", "class"])) : d("", !0)
+      ]),
+      _: 3
+    }, 8, ["to", "class", "style", "aria-busy", "aria-disabled", "disabled", "type"]));
+  }
+});
+export {
+  eo as default
+};

package/lib/components/button/Button.vue3.js

@@ -0,0 +1,8 @@
+const t = "_button_1liag_2", o = {
+  button: t,
+  "button--glow": "_button--glow_1liag_1"
+};
+export {
+  t as button,
+  o as default
+};