@indielayer/ui 1.3.0 → 1.5.0

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

@@ -1,8 +1,9 @@
-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 { defineComponent as f, openBlock as o, createBlock as t, resolveDynamicComponent as s, normalizeStyle as b, unref as l, normalizeClass as n, withCtx as r, createElementVNode as y, toDisplayString as g, createCommentVNode as i, 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(),
+import { useCommon as p } from "../../composables/useCommon.js";
+import S from "../tooltip/ToggleTip.vue.js";
+const k = {
+  ...p.props(),
   label: String,
   disabled: Boolean,
   required: Boolean,
@@ -11,32 +12,37 @@ const S = {
   tag: {
     type: String,
     default: "label"
-  }
-}, k = {
+  },
+  tooltip: String
+}, _ = {
   name: "XLabel",
   validators: {
-    ...i.validators()
+    ...p.validators()
   }
-}, w = /* @__PURE__ */ u({
-  ...k,
-  props: S,
+}, D = /* @__PURE__ */ f({
+  ..._,
+  props: k,
   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])
+    const d = m, { styles: c, classes: a, className: u } = C("Label", {}, d);
+    return (e, h) => (o(), t(s(e.tag), {
+      style: b(l(c)),
+      class: n([l(u), l(a).wrapper])
     }, {
-      default: n(() => [
+      default: r(() => [
         e.label ? (o(), t(s(e.tag === "fieldset" ? "legend" : "p"), {
           key: 0,
           title: e.label,
-          class: r(l(a).label)
+          class: n(l(a).label)
         }, {
-          default: n(() => [
-            b(y(e.label), 1)
+          default: r(() => [
+            y("span", null, g(e.label), 1),
+            e.tooltip ? (o(), t(S, {
+              key: 0,
+              content: e.tooltip
+            }, null, 8, ["content"])) : i("", !0)
           ]),
           _: 1
-        }, 8, ["title", "class"])) : g("", !0),
+        }, 8, ["title", "class"])) : i("", !0),
         B(e.$slots, "default")
       ]),
       _: 3
@@ -44,5 +50,5 @@ const S = {
   }
 });
 export {
-  w as default
+  D as default
 };

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

@@ -5,7 +5,7 @@ const s = {
       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";
+      const e = "flex items-center gap-2 font-medium text-secondary-800 dark:text-secondary-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;
     }
   }

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

@@ -1,11 +1,12 @@
-import t from "./Label.base.theme.js";
-var e;
-const a = {
+const s = {
   classes: {
-    wrapper: (e = t.classes) == null ? void 0 : e.wrapper,
-    label: "text-xs text-gray-500 dark:text-gray-200 mb-2"
+    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-secondary-500 dark:text-secondary-200 mb-2"
   }
-}, r = a;
+}, o = s;
 export {
-  r as default
+  o as default
 };

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

@@ -45,8 +45,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
 }>>, {
-    color: string;
     tag: string;
+    color: string;
     shadow: boolean;
     underline: boolean;
     external: boolean;

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-170b7443"]]);
+}, m = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-81a39d2b"]]);
 export {
   m as default
 };

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

@@ -1,4 +1,4 @@
-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 { defineComponent as m, openBlock as n, createBlock as p, resolveDynamicComponent as d, normalizeStyle as u, 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";
@@ -7,7 +7,7 @@ const C = {
   key: 0,
   class: "inline-flex items-center"
 }, $ = {
-  ...h.props(),
+  ...h.props("secondary"),
   tag: {
     type: String,
     default: "a"
@@ -21,9 +21,9 @@ const C = {
   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), {
+    return (e, v) => (n(), p(d(e.to ? e.tag !== "a" ? e.tag : "router-link" : e.tag), {
       to: e.to,
-      style: d(o(r)),
+      style: u(o(r)),
       class: c([
         o(i),
         e.$style.link,

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

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

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

@@ -1,5 +1,25 @@
-import e from "./Link.base.theme.js";
-const t = e, o = t;
+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 {
-  o as default
+  s as default
 };

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

@@ -2,7 +2,7 @@ const e = {
   classes: {
     wrapper: "inline-flex items-center justify-center",
     iconSuccess: "text-green-500",
-    iconError: "text-red-500",
+    iconError: "text-error-500",
     label: "mx-2 text-sm"
   }
 }, t = e;

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

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

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

@@ -82,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;
@@ -110,13 +110,14 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>> & {
     onExpand?: ((...args: any[]) => any) | undefined;
+    "onItem-click"?: ((...args: any[]) => any) | undefined;
 }, {
-    size: Size;
-    filled: boolean;
-    color: string;
-    rounded: boolean;
     disabled: boolean;
     expanded: boolean;
+    color: string;
+    rounded: boolean;
+    size: Size;
+    filled: boolean;
     collapsible: boolean;
 }, {}>;
 export default _default;

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

@@ -1,13 +1,13 @@
-import { defineComponent as B, resolveComponent as C, openBlock as o, createElementBlock as s, normalizeStyle as g, unref as p, normalizeClass as r, Fragment as n, renderList as E, createBlock as u, withCtx as b, createVNode as i, createCommentVNode as t } from "vue";
+import { defineComponent as C, resolveComponent as B, openBlock as d, createElementBlock as n, normalizeStyle as E, unref as p, normalizeClass as i, Fragment as a, renderList as w, createBlock as u, withCtx as b, createVNode as r, createCommentVNode as M } from "vue";
 import { useCommon as m } from "../../composables/useCommon.js";
-import { useColors as w } from "../../composables/useColors.js";
-import { useTheme as M } from "../../composables/useTheme.js";
-import f from "./MenuItem.vue.js";
-import N from "../collapse/Collapse.vue.js";
-import A from "../divider/Divider.vue.js";
-const S = {
+import { useColors as N } from "../../composables/useColors.js";
+import { useTheme as g } from "../../composables/useTheme.js";
+import c from "./MenuItem.vue.js";
+import A from "../accordion/AccordionItem.vue.js";
+import S from "../divider/Divider.vue.js";
+const V = {
   ...m.props(),
-  ...w.props("primary"),
+  ...N.props("secondary"),
   items: Array,
   collapsible: {
     type: Boolean,
@@ -24,53 +24,53 @@ const S = {
     type: Boolean,
     default: !0
   }
-}, V = {
+}, X = {
   name: "XMenu",
   validators: {
     ...m.validators()
   }
-}, G = /* @__PURE__ */ B({
-  ...V,
-  props: S,
-  emits: ["expand"],
+}, G = /* @__PURE__ */ C({
+  ...X,
+  props: V,
+  emits: ["expand", "item-click"],
   setup(y) {
-    const z = y, { styles: k, classes: v, className: I } = M("Menu", {}, z);
-    return (e, d) => {
-      const c = C("x-menu");
-      return e.items ? (o(), s("div", {
+    const z = y, { styles: k, classes: v, className: $ } = g("Menu", {}, z);
+    return (e, o) => {
+      const f = B("x-menu");
+      return e.items ? (d(), n("div", {
         key: 0,
-        style: g(p(k)),
-        class: r([
+        style: E(p(k)),
+        class: i([
           "space-y-1",
-          p(I),
+          p($),
           p(v).wrapper
         ])
       }, [
-        (o(!0), s(n, null, E(e.items, (l, $) => (o(), s(n, { key: $ }, [
-          l.items ? (o(), s(n, { key: 0 }, [
-            l.collapsible !== !1 ? (o(), u(N, {
+        (d(!0), n(a, null, w(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, {
+                r(c, {
                   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: b(({ expand: s }) => [
+                r(f, {
+                  class: i(["border-l ml-4 border-secondary-100 dark:border-secondary-700", { "pl-1": e.filled }]),
                   items: l.items,
                   color: l.color || e.color,
                   size: l.size || e.size,
@@ -80,12 +80,13 @@ const S = {
                   disabled: e.disabled || l.disabled,
                   rounded: e.rounded,
                   filled: e.filled,
-                  onExpand: (X) => 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(c, {
                 item: l,
                 rounded: e.rounded,
                 color: l.color || e.color,
@@ -93,10 +94,11 @@ const S = {
                 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(f, {
+                class: i(["x-menu-inner space-y-1 ml-4 border-l border-secondary-100 dark:border-secondary-700", { "pl-1": e.filled }]),
                 items: l.items,
                 color: l.color || e.color,
                 size: l.size || e.size,
@@ -106,11 +108,11 @@ const S = {
                 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(A, { key: 0 })) : (o(), u(f, {
+          ], 64)) : (d(), n(a, { key: 1 }, [
+            l.divider ? (d(), u(S, { key: 0 })) : (d(), u(c, {
               key: 1,
               item: l,
               rounded: e.rounded,
@@ -118,12 +120,13 @@ const S = {
               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)) : t("", !0);
+      ], 6)) : M("", !0);
     };
   }
 });

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

@@ -130,14 +130,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onClick?: ((...args: any[]) => any) | undefined;
     onActive?: ((...args: any[]) => any) | undefined;
 }, {
-    active: boolean;
-    size: import("../../composables/useCommon").Size;
-    filled: boolean;
+    disabled: boolean;
     color: string;
     rounded: boolean;
+    size: import("../../composables/useCommon").Size;
     item: MenuArrayItem;
-    disabled: boolean;
+    active: boolean;
     loading: boolean;
+    filled: boolean;
     attrs: Record<string, any>;
     exact: boolean;
     selected: boolean;

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

@@ -3,7 +3,7 @@ import o from "./MenuItem.vue3.js";
 import t from "../../_virtual/_plugin-vue_export-helper.js";
 const e = {
   $style: o
-}, c = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-458822a0"]]);
+}, _ = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-8614aac7"]]);
 export {
-  c as default
+  _ as default
 };

package/lib/components/menu/MenuItem.vue2.js

@@ -87,7 +87,7 @@ const V = {
       ref: o
     }, e.value.attrs, {
       to: e.value.to,
-      href: e.value.href,
+      href: e.value.href || e.value.to || "",
       target: e.value.target,
       color: e.value.color,
       style: s(C),

package/lib/components/menu/theme/MenuItem.base.theme.js

@@ -1,58 +1,48 @@
-const x = {
+const l = {
   classes: {
-    wrapper: ({ props: r, data: a }) => {
-      const i = ["relative !flex items-center whitespace-nowrap px-3"];
-      return i.push({
-        "font-medium": a.isActive,
-        "cursor-pointer": !r.disabled,
-        // size
-        "py-1 text-xs": r.size === "xs",
-        "py-2 text-sm": r.size === "sm",
-        "py-1.5": !r.size || !["xs", "sm", "lg", "xl"].includes(r.size),
-        "py-3": r.size === "lg",
-        "py-4 text-lg": r.size === "xl",
-        rounded: r.rounded
-      }), i;
+    wrapper: ({ props: i, data: s }) => {
+      const r = ["relative !flex items-center whitespace-nowrap px-3"];
+      return i.disabled || r.push("cursor-pointer"), s.isActive && r.push("font-medium"), i.rounded && r.push("rounded"), i.size === "xs" ? r.push("py-1 text-xs") : i.size === "sm" ? r.push("py-1.5 text-sm") : i.size === "lg" ? r.push("py-3") : i.size === "xl" ? r.push("py-4 text-lg") : r.push("py-1.5"), r;
     }
   },
-  styles: ({ colors: r, props: a, css: i, data: l }) => {
-    const e = r.getPalette(a.color || "gray"), t = r.getPalette("gray");
-    return a.disabled ? i.variables({
+  styles: ({ colors: i, props: s, css: r, data: a }) => {
+    const e = i.getPalette(s.color || "gray"), t = i.getPalette("secondary");
+    return s.disabled ? r.variables({
       text: t[300],
       dark: {
         text: t[600]
       }
-    }) : a.filled ? l.isActive ? i.variables({
-      bg: a.selected ? e[100] : e[50],
-      text: e[500],
+    }) : s.filled ? a.isActive ? r.variables({
+      bg: s.selected ? e[100] : e[200],
+      text: e[800],
       hover: {
-        bg: a.selected ? e[100] : e[50],
-        text: e[500]
+        bg: (s.selected, e[200]),
+        text: e[800]
       },
       dark: {
-        bg: a.selected ? e[800] : e[700],
+        bg: (s.selected, e[700]),
         text: e[100],
         hover: {
-          bg: a.selected ? e[800] : e[700],
+          bg: (s.selected, e[700]),
           text: e[100]
         }
       }
-    }) : i.variables({
-      bg: a.selected ? t[50] : "transparent",
+    }) : r.variables({
+      bg: s.selected ? t[100] : "transparent",
       text: t[800],
       hover: {
-        bg: t[50],
+        bg: t[100],
         text: t[900]
       },
       dark: {
-        bg: a.selected ? t[800] : "transparent",
+        bg: s.selected ? t[800] : "transparent",
         text: t[200],
         hover: {
-          bg: t[800],
+          bg: t[600],
           text: t[100]
         }
       }
-    }) : l.isActive ? i.variables({
+    }) : a.isActive ? r.variables({
       text: e[500],
       hover: {
         text: e[500],
@@ -65,7 +55,7 @@ const x = {
           border: e[500]
         }
       }
-    }) : i.variables({
+    }) : r.variables({
       text: t[800],
       hover: {
         text: t[900],
@@ -80,7 +70,7 @@ const x = {
       }
     });
   }
-}, d = x;
+}, d = l;
 export {
   d as default
 };