@indielayer/ui 1.2.0 → 1.4.0

package/lib/components/badge/Badge.vue.d.ts

@@ -1,4 +1,5 @@
 import { type PropType, type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const badgeAlign: readonly ["left", "right"];
 declare const badgePosition: readonly ["top", "bottom"];
 declare const badgeProps: {
@@ -28,7 +29,7 @@ declare const badgeProps: {
         readonly default: string | undefined;
     };
     size: {
-        readonly type: PropType<import("../../composables/common").Size>;
+        readonly type: PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -36,6 +37,9 @@ declare const badgeProps: {
 export type BadgePosition = typeof badgePosition[number];
 export type BadgeAlign = typeof badgeAlign[number];
 export type BadgeProps = ExtractPublicPropTypes<typeof badgeProps>;
+type InternalClasses = 'wrapper';
+export interface BadgeTheme extends ThemeComponent<BadgeProps, InternalClasses> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;
@@ -63,7 +67,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
     size: {
-        readonly type: PropType<import("../../composables/common").Size>;
+        readonly type: PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -94,17 +98,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
     size: {
-        readonly type: PropType<import("../../composables/common").Size>;
+        readonly type: PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 }>>, {
-    color: string;
-    size: import("../../composables/common").Size;
-    align: "left" | "right";
     tag: string;
     outlined: boolean;
+    color: string;
+    size: import("../../composables/useCommon").Size;
     position: "top" | "bottom";
+    align: "left" | "right";
     animated: boolean;
     show: boolean;
 }, {}>, {

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

@@ -1,12 +1,11 @@
-import { defineComponent as v, useSlots as z, computed as l, openBlock as o, createBlock as S, resolveDynamicComponent as w, normalizeStyle as n, unref as s, normalizeClass as i, withCtx as B, createElementVNode as r, renderSlot as a, createElementBlock as p, createCommentVNode as f } from "vue";
-import { useTheme as C } from "../../composables/theme.js";
-import { useCommon as m } from "../../composables/common.js";
-import { useColors as k } from "../../composables/colors.js";
-import N from "./Badge.theme.js";
-const X = { class: "relative inline-block" }, x = {
+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)]"
-}, Y = ["left", "right"], $ = ["top", "bottom"], E = {
+}, x = ["left", "right"], Y = ["top", "bottom"], $ = {
   ...m.props(),
   ...k.props("primary"),
   tag: {
@@ -30,16 +29,16 @@ const X = { class: "relative inline-block" }, x = {
     type: Boolean,
     default: !0
   }
-}, P = {
+}, E = {
   name: "XBadge",
   validators: {
     ...m.validators(),
-    position: $,
-    align: Y
+    position: Y,
+    align: x
   }
-}, R = /* @__PURE__ */ v({
-  ...P,
-  props: E,
+}, D = /* @__PURE__ */ v({
+  ...E,
+  props: $,
   setup(u) {
     const t = u, d = z(), g = l(() => {
       const e = [];
@@ -47,16 +46,16 @@ const X = { class: "relative inline-block" }, x = {
     }), 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", N, t);
-    return (e, T) => (o(), S(w(e.tag), {
+    }), { 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: B(() => [
-        r("div", X, [
+      default: w(() => [
+        r("div", N, [
           a(e.$slots, "default"),
           e.show ? (o(), p("div", {
             key: 0,
@@ -68,7 +67,7 @@ const X = { class: "relative inline-block" }, x = {
             ]]),
             style: n(c.value)
           }, [
-            e.animated ? (o(), p("div", x)) : f("", !0),
+            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" : {
@@ -90,5 +89,5 @@ const X = { class: "relative inline-block" }, x = {
   }
 });
 export {
-  R as default
+  D as default
 };

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

@@ -1,3 +1,2 @@
 export { default as XBadge } from './Badge.vue';
-export type { BadgeProps, BadgeAlign, BadgePosition } from './Badge.vue';
-export type { BadgeTheme } from './Badge.theme';
+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

@@ -1,10 +1,12 @@
 import { type ExtractPublicPropTypes, type PropType } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const breadcrumbsProps: {
     items: PropType<BreadcrumbsItem[]>;
-    icon: {
+    separator: {
         type: StringConstructor;
         default: string;
     };
+    icon: StringConstructor;
     shadow: BooleanConstructor;
     underline: BooleanConstructor;
     color: {
@@ -22,12 +24,16 @@ export type BreadcrumbsItem = {
     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[]>;
-    icon: {
+    separator: {
         type: StringConstructor;
         default: string;
     };
+    icon: StringConstructor;
     shadow: BooleanConstructor;
     underline: BooleanConstructor;
     color: {
@@ -36,10 +42,11 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     items: PropType<BreadcrumbsItem[]>;
-    icon: {
+    separator: {
         type: StringConstructor;
         default: string;
     };
+    icon: StringConstructor;
     shadow: BooleanConstructor;
     underline: BooleanConstructor;
     color: {
@@ -48,8 +55,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     color: string;
+    separator: string;
     shadow: boolean;
-    icon: string;
     underline: boolean;
 }, {}>;
 export default _default;

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

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

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

@@ -1,3 +1,2 @@
 export { default as XBreadcrumbs } from './Breadcrumbs.vue';
-export type { BreadcrumbsProps, BreadcrumbsItem } from './Breadcrumbs.vue';
-export type { BreadcrumbsTheme } from './Breadcrumbs.theme';
+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/{Breadcrumbs.theme.js → theme/Breadcrumbs.base.theme.js}

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

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

@@ -1,4 +1,5 @@
 import { type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const buttonProps: {
     tag: {
         type: StringConstructor;
@@ -21,17 +22,28 @@ declare const buttonProps: {
     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/common").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;
@@ -54,12 +66,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     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/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -88,12 +105,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     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/common").Size>;
+        readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -101,16 +123,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     disabled: boolean;
     flat: boolean;
     type: string;
-    color: string;
-    size: import("../../composables/common").Size;
-    block: boolean;
-    ghost: boolean;
     tag: string;
+    glow: boolean;
+    light: boolean;
     outlined: boolean;
+    color: string;
     rounded: boolean;
-    light: boolean;
+    size: import("../../composables/useCommon").Size;
+    ghost: boolean;
+    block: boolean;
     loading: boolean;
-    glow: boolean;
+    loadingStatus: import("../loader/Loader.vue").LoaderStatus;
 }, {}>, {
     default?(_: {}): any;
 }>;

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

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