@indielayer/ui 1.2.0 → 1.4.0

package/lib/components/label/Label.vue.js

@@ -0,0 +1,48 @@
+import { defineComponent as u, openBlock as o, createBlock as t, resolveDynamicComponent as s, normalizeStyle as f, unref as l, normalizeClass as r, withCtx as n, createTextVNode as b, toDisplayString as y, createCommentVNode as g, renderSlot as B } from "vue";
+import { useTheme as C } from "../../composables/useTheme.js";
+import { useCommon as i } from "../../composables/useCommon.js";
+const S = {
+  ...i.props(),
+  label: String,
+  disabled: Boolean,
+  required: Boolean,
+  block: Boolean,
+  isInsideForm: Boolean,
+  tag: {
+    type: String,
+    default: "label"
+  }
+}, k = {
+  name: "XLabel",
+  validators: {
+    ...i.validators()
+  }
+}, w = /* @__PURE__ */ u({
+  ...k,
+  props: S,
+  setup(m) {
+    const p = m, { styles: d, classes: a, className: c } = C("Label", {}, p);
+    return (e, _) => (o(), t(s(e.tag), {
+      style: f(l(d)),
+      class: r([l(c), l(a).wrapper])
+    }, {
+      default: n(() => [
+        e.label ? (o(), t(s(e.tag === "fieldset" ? "legend" : "p"), {
+          key: 0,
+          title: e.label,
+          class: r(l(a).label)
+        }, {
+          default: n(() => [
+            b(y(e.label), 1)
+          ]),
+          _: 1
+        }, 8, ["title", "class"])) : g("", !0),
+        B(e.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["style", "class"]));
+  }
+});
+export {
+  w as default
+};

package/lib/components/label/Label.vue2.js

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

package/lib/components/label/__tests__/Label.spec.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default as XLabel } from './Label.vue';
+export type { LabelProps, LabelTheme } from './Label.vue';

package/lib/components/label/theme/Label.base.theme.d.ts

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

package/lib/components/label/theme/Label.base.theme.js

@@ -0,0 +1,15 @@
+const s = {
+  classes: {
+    wrapper: ({ props: t }) => {
+      const e = ["block relative align-bottom focus:outline-none"];
+      return t.isInsideForm && e.push("mb-3"), t.block && e.push("w-full"), e;
+    },
+    label: ({ props: t }) => {
+      const e = "font-medium text-gray-800 dark:text-gray-200 mb-1";
+      return t.size === "xs" ? e + " text-xs" : t.size === "sm" ? e + " text-sm" : t.size === "lg" ? e + " text-lg" : t.size === "xl" ? e + " text-xl" : e;
+    }
+  }
+}, l = s;
+export {
+  l as default
+};

package/lib/components/label/theme/Label.carbon.theme.d.ts

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

package/lib/components/label/theme/Label.carbon.theme.js

@@ -0,0 +1,12 @@
+const s = {
+  classes: {
+    wrapper: ({ props: t }) => {
+      const e = ["block relative align-bottom focus:outline-none"];
+      return t.isInsideForm && e.push("mb-8"), t.block && e.push("w-full"), e;
+    },
+    label: "text-xs text-gray-500 dark:text-gray-200 mb-2"
+  }
+}, l = s;
+export {
+  l as default
+};

package/lib/components/link/Link.vue.d.ts

@@ -1,4 +1,5 @@
 import type { ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const linkProps: {
     tag: {
         type: StringConstructor;
@@ -14,6 +15,9 @@ declare const linkProps: {
     };
 };
 export type LinkProps = ExtractPublicPropTypes<typeof linkProps>;
+type InternalClasses = 'wrapper';
+export interface LinkTheme extends ThemeComponent<LinkProps, InternalClasses> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;
@@ -41,11 +45,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
 }>>, {
+    tag: string;
     color: string;
     shadow: boolean;
-    tag: string;
-    external: boolean;
     underline: boolean;
+    external: boolean;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/lib/components/link/Link.vue.js

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

package/lib/components/link/Link.vue2.js

@@ -1,14 +1,13 @@
-import { defineComponent as m, openBlock as n, createBlock as p, resolveDynamicComponent as u, normalizeStyle as d, unref as o, normalizeClass as f, withCtx as c, createElementBlock as k, renderSlot as t, createVNode as y } from "vue";
-import { useColors as h } from "../../composables/colors.js";
-import { useTheme as g } from "../../composables/theme.js";
+import { defineComponent as m, openBlock as n, createBlock as p, resolveDynamicComponent as u, normalizeStyle as d, unref as o, normalizeClass as c, withCtx as f, createElementBlock as k, renderSlot as t, createVNode as y } from "vue";
+import { useColors as h } from "../../composables/useColors.js";
+import { useTheme as g } from "../../composables/useTheme.js";
 import { externalIcon as B } from "../../common/icons.js";
 import w from "../icon/Icon.vue.js";
-import C from "./Link.theme.js";
-const $ = {
+const C = {
   key: 0,
   class: "inline-flex items-center"
-}, S = {
-  ...h.props(),
+}, $ = {
+  ...h.props("primary"),
   tag: {
     type: String,
     default: "a"
@@ -17,15 +16,15 @@ const $ = {
   shadow: Boolean,
   external: Boolean,
   underline: Boolean
-}, v = { name: "XLink" }, L = /* @__PURE__ */ m({
-  ...v,
-  props: S,
-  setup(l) {
-    const s = l, { styles: r, classes: a, className: i } = g("link", C, s);
-    return (e, z) => (n(), p(u(e.to ? e.tag !== "a" ? e.tag : "router-link" : e.tag), {
+}, S = { name: "XLink" }, D = /* @__PURE__ */ m({
+  ...S,
+  props: $,
+  setup(s) {
+    const l = s, { styles: r, classes: a, className: i } = g("Link", {}, l);
+    return (e, v) => (n(), p(u(e.to ? e.tag !== "a" ? e.tag : "router-link" : e.tag), {
       to: e.to,
       style: d(o(r)),
-      class: f([
+      class: c([
         o(i),
         e.$style.link,
         o(a).wrapper,
@@ -33,8 +32,8 @@ const $ = {
         { underline: e.underline }
       ])
     }, {
-      default: c(() => [
-        e.external ? (n(), k("span", $, [
+      default: f(() => [
+        e.external ? (n(), k("span", C, [
           t(e.$slots, "default", {}, void 0, !0),
           y(w, { icon: o(B) }, null, 8, ["icon"])
         ])) : t(e.$slots, "default", { key: 1 }, void 0, !0)
@@ -44,5 +43,5 @@ const $ = {
   }
 });
 export {
-  L as default
+  D as default
 };

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

@@ -1,3 +1,2 @@
 export { default as XLink } from './Link.vue';
-export type { LinkProps } from './Link.vue';
-export type { LinkTheme } from './Link.theme';
+export type { LinkProps, LinkTheme } from './Link.vue';

package/lib/components/link/theme/Link.base.theme.d.ts

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

package/lib/components/link/theme/Link.carbon.theme.d.ts

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

package/lib/components/link/theme/Link.carbon.theme.js

@@ -0,0 +1,25 @@
+const a = {
+  classes: {
+    wrapper: "transition duration-300 ease-in-out cursor-pointer inline-flex text-sm"
+  },
+  styles: ({ colors: o, props: e, css: r }) => {
+    const t = o.getPalette(e.color || "gray");
+    return r.variables({
+      text: e.color ? t[600] : "",
+      hover: {
+        text: e.shadow ? "" : t[700]
+      },
+      shadow: t[100],
+      dark: {
+        text: e.color ? t[400] : "",
+        hover: {
+          text: t[300]
+        },
+        shadow: t[900]
+      }
+    });
+  }
+}, s = a;
+export {
+  s as default
+};

package/lib/components/loader/Loader.vue.d.ts

@@ -0,0 +1,49 @@
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const loaderProps: {
+    status: {
+        type: PropType<LoaderStatus>;
+        default: string;
+    };
+    icon: StringConstructor;
+    label: StringConstructor;
+    size: {
+        readonly type: PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type LoaderStatus = 'active' | 'success' | 'error';
+export type LoaderProps = ExtractPublicPropTypes<typeof loaderProps>;
+type InternalClasses = 'wrapper' | 'iconSuccess' | 'iconError' | 'label';
+export interface LoaderTheme extends ThemeComponent<LoaderProps, InternalClasses> {
+}
+declare const _default: import("vue").DefineComponent<{
+    status: {
+        type: PropType<LoaderStatus>;
+        default: string;
+    };
+    icon: StringConstructor;
+    label: StringConstructor;
+    size: {
+        readonly type: PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    status: {
+        type: PropType<LoaderStatus>;
+        default: string;
+    };
+    icon: StringConstructor;
+    label: StringConstructor;
+    size: {
+        readonly type: PropType<import("../../composables/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}>>, {
+    size: import("../../composables/useCommon").Size;
+    status: LoaderStatus;
+}, {}>;
+export default _default;

package/lib/components/loader/Loader.vue.js

@@ -0,0 +1,54 @@
+import { defineComponent as d, openBlock as o, createElementBlock as t, normalizeClass as a, unref as e, normalizeStyle as z, createBlock as i, createCommentVNode as n, toDisplayString as y } from "vue";
+import { useCommon as l } from "../../composables/useCommon.js";
+import { useTheme as k } from "../../composables/useTheme.js";
+import c from "../icon/Icon.vue.js";
+import v from "../spinner/Spinner.vue.js";
+import { successIcon as S, errorIcon as b } from "../../common/icons.js";
+const g = {
+  ...l.props(),
+  status: {
+    type: String,
+    default: "active"
+  },
+  icon: String,
+  label: String
+}, C = {
+  name: "XLoader",
+  validators: {
+    ...l.validators(),
+    status: ["active", "success", "error"]
+  }
+}, $ = /* @__PURE__ */ d({
+  ...C,
+  props: g,
+  setup(m) {
+    const u = m, { styles: p, classes: r, className: f } = k("Loader", {}, u);
+    return (s, B) => (o(), t("div", {
+      class: a([e(f), e(r).wrapper]),
+      style: z(e(p))
+    }, [
+      s.status === "active" ? (o(), i(v, {
+        key: 0,
+        size: s.size,
+        icon: s.icon
+      }, null, 8, ["size", "icon"])) : s.status === "success" ? (o(), i(c, {
+        key: 1,
+        class: a(e(r).iconSuccess),
+        size: s.size,
+        icon: e(S)
+      }, null, 8, ["class", "size", "icon"])) : s.status === "error" ? (o(), i(c, {
+        key: 2,
+        class: a(e(r).iconError),
+        size: s.size,
+        icon: e(b)
+      }, null, 8, ["class", "size", "icon"])) : n("", !0),
+      s.label ? (o(), t("span", {
+        key: 3,
+        class: a(e(r).label)
+      }, y(s.label), 3)) : n("", !0)
+    ], 6));
+  }
+});
+export {
+  $ as default
+};

package/lib/components/loader/Loader.vue2.js

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

package/lib/components/loader/__tests__/Loader.spec.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default as XLoader } from './Loader.vue';
+export type { LoaderProps, LoaderTheme } from './Loader.vue';

package/lib/components/loader/theme/Loader.base.theme.d.ts

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

package/lib/components/loader/theme/Loader.base.theme.js

@@ -0,0 +1,11 @@
+const e = {
+  classes: {
+    wrapper: "inline-flex items-center justify-center",
+    iconSuccess: "text-green-500",
+    iconError: "text-red-500",
+    label: "mx-2 text-sm"
+  }
+}, t = e;
+export {
+  t as default
+};

package/lib/components/loader/theme/Loader.carbon.theme.d.ts

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

package/lib/components/loader/theme/Loader.carbon.theme.js

@@ -0,0 +1,11 @@
+const e = {
+  classes: {
+    wrapper: "inline-flex items-center justify-center",
+    iconSuccess: "text-green-500",
+    iconError: "text-red-500",
+    label: "mx-2 text-sm"
+  }
+}, t = e;
+export {
+  t as default
+};

package/lib/components/menu/Menu.vue.d.ts

@@ -1,5 +1,6 @@
 import type { ExtractPublicPropTypes, PropType } from 'vue';
-import { type Size } from '../../composables/common';
+import { type Size } from '../../composables/useCommon';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const menuProps: {
     items: PropType<MenuArrayItem[]>;
     collapsible: {
@@ -52,6 +53,9 @@ export type MenuArrayItem = {
     onClick?: (e: MouseEvent) => void;
 };
 export type MenuProps = ExtractPublicPropTypes<typeof menuProps>;
+type InternalClasses = 'wrapper';
+export interface MenuTheme extends ThemeComponent<MenuProps, InternalClasses> {
+}
 declare const _default: import("vue").DefineComponent<{
     items: PropType<MenuArrayItem[]>;
     collapsible: {
@@ -78,7 +82,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "expand"[], "expand", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("expand" | "item-click")[], "expand" | "item-click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     items: PropType<MenuArrayItem[]>;
     collapsible: {
         type: BooleanConstructor;
@@ -106,13 +110,14 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>> & {
     onExpand?: ((...args: any[]) => any) | undefined;
+    "onItem-click"?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
+    expanded: boolean;
     color: string;
-    size: Size;
     rounded: boolean;
+    size: Size;
     filled: boolean;
-    expanded: boolean;
     collapsible: boolean;
 }, {}>;
 export default _default;

package/lib/components/menu/Menu.vue.js

@@ -1,14 +1,13 @@
-import { defineComponent as B, resolveComponent as t, openBlock as o, createElementBlock as s, normalizeStyle as C, unref as p, normalizeClass as r, Fragment as n, renderList as g, createBlock as u, withCtx as b, createVNode as i, createCommentVNode as E } from "vue";
-import { useCommon as m } from "../../composables/common.js";
-import { useColors as w } from "../../composables/colors.js";
-import { useTheme as N } from "../../composables/theme.js";
+import { defineComponent as C, resolveComponent as B, openBlock as d, createElementBlock as n, normalizeStyle as g, unref as p, normalizeClass as i, Fragment as a, renderList as E, createBlock as u, withCtx as c, createVNode as r, createCommentVNode as w } from "vue";
+import { useCommon as m } from "../../composables/useCommon.js";
+import { useColors as M } from "../../composables/useColors.js";
+import { useTheme as N } from "../../composables/useTheme.js";
 import f from "./MenuItem.vue.js";
-import A from "../collapse/Collapse.vue.js";
-import M from "../divider/Divider.vue.js";
-import S from "./Menu.theme.js";
+import A from "../accordion/AccordionItem.vue.js";
+import S from "../divider/Divider.vue.js";
 const V = {
   ...m.props(),
-  ...w.props("primary"),
+  ...M.props("primary"),
   items: Array,
   collapsible: {
     type: Boolean,
@@ -30,48 +29,48 @@ const V = {
   validators: {
     ...m.validators()
   }
-}, J = /* @__PURE__ */ B({
+}, G = /* @__PURE__ */ C({
   ...X,
   props: V,
-  emits: ["expand"],
-  setup(y, { emit: F }) {
-    const z = y, { styles: k, classes: v, className: I } = N("menu", S, z);
-    return (e, d) => {
-      const c = t("x-menu");
-      return e.items ? (o(), s("div", {
+  emits: ["expand", "item-click"],
+  setup(y) {
+    const z = y, { styles: k, classes: v, className: $ } = N("Menu", {}, z);
+    return (e, o) => {
+      const b = B("x-menu");
+      return e.items ? (d(), n("div", {
         key: 0,
-        style: C(p(k)),
-        class: r([
+        style: g(p(k)),
+        class: i([
           "space-y-1",
-          p(I),
+          p($),
           p(v).wrapper
         ])
       }, [
-        (o(!0), s(n, null, g(e.items, (l, $) => (o(), s(n, { key: $ }, [
-          l.items ? (o(), s(n, { key: 0 }, [
-            l.collapsible !== !1 ? (o(), u(A, {
+        (d(!0), n(a, null, E(e.items, (l, t) => (d(), n(a, { key: t }, [
+          l.items ? (d(), n(a, { key: 0 }, [
+            l.collapsible !== !1 ? (d(), u(A, {
               key: 0,
               icon: l.collapseIcon || e.collapseIcon,
               expanded: l.expanded || e.expanded,
               disabled: e.disabled || l.disabled,
               "show-icon": !!(l.collapseIcon || e.collapseIcon),
               class: "x-menu-inner space-y-1",
-              onExpand: d[0] || (d[0] = (a) => e.$emit("expand"))
+              onExpand: o[1] || (o[1] = (s) => e.$emit("expand"))
             }, {
-              default: b(({}) => [
-                i(f, {
+              default: c(({}) => [
+                r(f, {
                   item: l,
                   rounded: e.rounded,
                   color: l.color || e.color,
                   filled: l.filled || e.filled,
                   size: l.size || e.size,
                   disabled: e.disabled || l.disabled,
-                  class: "pr-10 font-medium"
+                  class: "font-medium"
                 }, null, 8, ["item", "rounded", "color", "filled", "size", "disabled"])
               ]),
-              content: b(({ expand: a }) => [
-                i(c, {
-                  class: r(["border-l ml-4 border-gray-100 dark:border-gray-700", { "pl-1": e.filled }]),
+              content: c(({ expand: s }) => [
+                r(b, {
+                  class: i(["border-l ml-4 border-gray-100 dark:border-gray-700", { "pl-1": e.filled }]),
                   items: l.items,
                   color: l.color || e.color,
                   size: l.size || e.size,
@@ -81,12 +80,13 @@ const V = {
                   disabled: e.disabled || l.disabled,
                   rounded: e.rounded,
                   filled: e.filled,
-                  onExpand: (L) => a(!1)
+                  onExpand: (I) => s(!1),
+                  onItemClick: o[0] || (o[0] = (I) => e.$emit("item-click"))
                 }, null, 8, ["class", "items", "color", "size", "collapsible", "collapse-icon", "expanded", "disabled", "rounded", "filled", "onExpand"])
               ]),
               _: 2
-            }, 1032, ["icon", "expanded", "disabled", "show-icon"])) : (o(), s(n, { key: 1 }, [
-              i(f, {
+            }, 1032, ["icon", "expanded", "disabled", "show-icon"])) : (d(), n(a, { key: 1 }, [
+              r(f, {
                 item: l,
                 rounded: e.rounded,
                 color: l.color || e.color,
@@ -94,10 +94,11 @@ const V = {
                 size: l.size || e.size,
                 disabled: e.disabled || l.disabled,
                 class: "font-medium",
-                inactive: ""
+                inactive: "",
+                onClick: o[2] || (o[2] = (s) => e.$emit("item-click"))
               }, null, 8, ["item", "rounded", "color", "filled", "size", "disabled"]),
-              i(c, {
-                class: r(["x-menu-inner space-y-1 ml-4 border-l border-gray-100 dark:border-gray-700", { "pl-1": e.filled }]),
+              r(b, {
+                class: i(["x-menu-inner space-y-1 ml-4 border-l border-gray-100 dark:border-gray-700", { "pl-1": e.filled }]),
                 items: l.items,
                 color: l.color || e.color,
                 size: l.size || e.size,
@@ -107,11 +108,11 @@ const V = {
                 disabled: e.disabled || l.disabled,
                 rounded: e.rounded,
                 filled: e.filled,
-                onExpand: d[1] || (d[1] = (a) => e.$emit("expand"))
+                onExpand: o[3] || (o[3] = (s) => e.$emit("expand"))
               }, null, 8, ["class", "items", "color", "size", "collapsible", "collapse-icon", "expanded", "disabled", "rounded", "filled"])
             ], 64))
-          ], 64)) : (o(), s(n, { key: 1 }, [
-            l.divider ? (o(), u(M, { key: 0 })) : (o(), u(f, {
+          ], 64)) : (d(), n(a, { key: 1 }, [
+            l.divider ? (d(), u(S, { key: 0 })) : (d(), u(f, {
               key: 1,
               item: l,
               rounded: e.rounded,
@@ -119,15 +120,16 @@ const V = {
               filled: l.filled || e.filled,
               size: l.size || e.size,
               disabled: e.disabled || l.disabled,
-              class: r({ "my-2": l.divider }),
-              onActive: d[2] || (d[2] = (a) => e.$emit("expand"))
+              class: i({ "my-2": l.divider }),
+              onClick: o[4] || (o[4] = (s) => e.$emit("item-click")),
+              onActive: o[5] || (o[5] = (s) => e.$emit("expand"))
             }, null, 8, ["item", "rounded", "color", "filled", "size", "disabled", "class"]))
           ], 64))
         ], 64))), 128))
-      ], 6)) : E("", !0);
+      ], 6)) : w("", !0);
     };
   }
 });
 export {
-  J as default
+  G as default
 };