@indielayer/ui 1.0.10 → 1.2.0

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

@@ -0,0 +1,133 @@
+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 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";
+const V = {
+  ...m.props(),
+  ...w.props("primary"),
+  items: Array,
+  collapsible: {
+    type: Boolean,
+    default: !0
+  },
+  collapseIcon: String,
+  expanded: Boolean,
+  disabled: Boolean,
+  rounded: {
+    type: Boolean,
+    default: !0
+  },
+  filled: {
+    type: Boolean,
+    default: !0
+  }
+}, X = {
+  name: "XMenu",
+  validators: {
+    ...m.validators()
+  }
+}, J = /* @__PURE__ */ B({
+  ...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", {
+        key: 0,
+        style: C(p(k)),
+        class: r([
+          "space-y-1",
+          p(I),
+          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, {
+              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"))
+            }, {
+              default: b(({}) => [
+                i(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"
+                }, 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 }]),
+                  items: l.items,
+                  color: l.color || e.color,
+                  size: l.size || e.size,
+                  collapsible: e.collapsible,
+                  "collapse-icon": l.collapseIcon || e.collapseIcon,
+                  expanded: l.expanded || e.expanded,
+                  disabled: e.disabled || l.disabled,
+                  rounded: e.rounded,
+                  filled: e.filled,
+                  onExpand: (L) => a(!1)
+                }, 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, {
+                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: "font-medium",
+                inactive: ""
+              }, 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 }]),
+                items: l.items,
+                color: l.color || e.color,
+                size: l.size || e.size,
+                collapsible: e.collapsible,
+                "collapse-icon": l.collapseIcon || e.collapseIcon,
+                expanded: l.expanded || e.expanded,
+                disabled: e.disabled || l.disabled,
+                rounded: e.rounded,
+                filled: e.filled,
+                onExpand: d[1] || (d[1] = (a) => 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, {
+              key: 1,
+              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: r({ "my-2": l.divider }),
+              onActive: d[2] || (d[2] = (a) => e.$emit("expand"))
+            }, null, 8, ["item", "rounded", "color", "filled", "size", "disabled", "class"]))
+          ], 64))
+        ], 64))), 128))
+      ], 6)) : E("", !0);
+    };
+  }
+});
+export {
+  J as default
+};

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

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

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

@@ -1,8 +1,14 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper: ({ props, data }: ThemeParams) => any[];
-    };
-    styles: ({ colors, props, css, data }: ThemeParams) => Record<string, string>;
+import type { Ref } from 'vue';
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { MenuItemProps } from './MenuItem.vue';
+type InternalClasses = 'wrapper';
+type InternalExtraData = {
+    isActive: Ref<boolean>;
 };
-export default _default;
+interface InternalTheme extends ThemeComponent<MenuItemProps, InternalClasses, InternalExtraData> {
+}
+export interface MenuItemTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<MenuItemProps, InternalClasses, InternalExtraData>>;
+}
+declare const theme: InternalTheme;
+export default theme;

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

@@ -0,0 +1,86 @@
+const x = {
+  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;
+    }
+  },
+  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({
+      text: t[300],
+      dark: {
+        text: t[600]
+      }
+    }) : a.filled ? l.isActive ? i.variables({
+      bg: a.selected ? e[100] : e[50],
+      text: e[500],
+      hover: {
+        bg: a.selected ? e[100] : e[50],
+        text: e[500]
+      },
+      dark: {
+        bg: a.selected ? e[800] : e[700],
+        text: e[100],
+        hover: {
+          bg: a.selected ? e[800] : e[700],
+          text: e[100]
+        }
+      }
+    }) : i.variables({
+      bg: a.selected ? t[50] : "transparent",
+      text: t[800],
+      hover: {
+        bg: t[50],
+        text: t[900]
+      },
+      dark: {
+        bg: a.selected ? t[800] : "transparent",
+        text: t[200],
+        hover: {
+          bg: t[800],
+          text: t[100]
+        }
+      }
+    }) : l.isActive ? i.variables({
+      text: e[500],
+      hover: {
+        text: e[500],
+        border: e[500]
+      },
+      dark: {
+        text: e[500],
+        hover: {
+          text: e[500],
+          border: e[500]
+        }
+      }
+    }) : i.variables({
+      text: t[800],
+      hover: {
+        text: t[900],
+        border: t[300]
+      },
+      dark: {
+        text: t[300],
+        hover: {
+          text: t[200],
+          border: t[800]
+        }
+      }
+    });
+  }
+}, d = x;
+export {
+  d as default
+};

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

@@ -1,16 +1,58 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+import { type ExtractPublicPropTypes, type PropType } from 'vue';
+import type { MenuArrayItem } from './Menu.vue';
+declare const menuItemProps: {
     item: {
+        type: PropType<MenuArrayItem>;
+        default: () => void;
+    };
+    active: BooleanConstructor;
+    attrs: {
         type: ObjectConstructor;
         default: () => void;
     };
+    onClick: FunctionConstructor;
+    value: (StringConstructor | NumberConstructor)[];
+    to: StringConstructor;
+    exact: BooleanConstructor;
+    href: StringConstructor;
+    target: StringConstructor;
+    label: StringConstructor;
+    icon: StringConstructor;
+    iconRight: StringConstructor;
+    loading: BooleanConstructor;
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selected: BooleanConstructor;
+    disabled: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<import("../../composables/common").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type MenuItemProps = ExtractPublicPropTypes<typeof menuItemProps>;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    item: {
+        type: PropType<MenuArrayItem>;
+        default: () => void;
+    };
     active: BooleanConstructor;
     attrs: {
         type: ObjectConstructor;
         default: () => void;
     };
     onClick: FunctionConstructor;
-    inactive: BooleanConstructor;
-    value: (NumberConstructor | StringConstructor)[];
+    value: (StringConstructor | NumberConstructor)[];
     to: StringConstructor;
     exact: BooleanConstructor;
     href: StringConstructor;
@@ -34,13 +76,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: PropType<import("../../composables/common").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("active" | "click")[], "active" | "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     item: {
-        type: ObjectConstructor;
+        type: PropType<MenuArrayItem>;
         default: () => void;
     };
     active: BooleanConstructor;
@@ -49,8 +91,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: () => void;
     };
     onClick: FunctionConstructor;
-    inactive: BooleanConstructor;
-    value: (NumberConstructor | StringConstructor)[];
+    value: (StringConstructor | NumberConstructor)[];
     to: StringConstructor;
     exact: BooleanConstructor;
     href: StringConstructor;
@@ -74,7 +115,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
     size: {
-        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly type: PropType<import("../../composables/common").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -83,16 +124,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onActive?: ((...args: any[]) => any) | undefined;
 }, {
     active: boolean;
-    size: import("../../composables/common").Size;
-    filled: boolean;
-    attrs: Record<string, any>;
+    disabled: boolean;
     color: string;
+    size: import("../../composables/common").Size;
+    exact: boolean;
     rounded: boolean;
-    item: Record<string, any>;
-    disabled: boolean;
     loading: boolean;
-    exact: boolean;
-    inactive: boolean;
+    filled: boolean;
+    attrs: Record<string, any>;
+    item: MenuArrayItem;
     selected: boolean;
 }, {}>, {
     prefix?(_: {}): any;

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

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

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

@@ -0,0 +1,143 @@
+import { defineComponent as z, ref as m, computed as p, onMounted as S, watch as d, openBlock as l, createBlock as r, resolveDynamicComponent as x, mergeProps as N, unref as i, withCtx as R, createElementBlock as s, renderSlot as n, createCommentVNode as k, createElementVNode as h, createTextVNode as P, toDisplayString as w, Fragment as D } from "vue";
+import { useMutationObserver as F } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.4/node_modules/@vueuse/core/index.js";
+import { useColors as I } from "../../composables/colors.js";
+import { useCommon as y } from "../../composables/common.js";
+import { useTheme as M } from "../../composables/theme.js";
+import g from "../icon/Icon.vue.js";
+import O from "../spinner/Spinner.vue.js";
+import T from "./MenuItem.theme.js";
+const V = {
+  key: 0,
+  class: "mr-2 shrink-0"
+}, j = { class: "flex-1 truncate" }, E = { class: "ml-1 shrink-0" }, A = { key: 0 }, L = {
+  ...y.props(),
+  ...I.props("primary"),
+  item: {
+    type: Object,
+    default: () => {
+    }
+  },
+  active: Boolean,
+  attrs: {
+    type: Object,
+    default: () => {
+    }
+  },
+  onClick: Function,
+  value: [Number, String],
+  to: String,
+  exact: Boolean,
+  href: String,
+  target: String,
+  label: String,
+  icon: String,
+  iconRight: String,
+  loading: Boolean,
+  rounded: {
+    type: Boolean,
+    default: !0
+  },
+  filled: {
+    type: Boolean,
+    default: !0
+  },
+  selected: Boolean,
+  disabled: Boolean
+}, X = {
+  name: "XMenuItem",
+  validators: {
+    ...y.validators()
+  }
+}, Z = /* @__PURE__ */ z({
+  ...X,
+  props: L,
+  emits: ["active", "click"],
+  setup($, { emit: u }) {
+    const c = $, o = m(), a = m(!1), e = p(() => ({
+      ...c,
+      ...c.item
+    })), v = p(() => e.value.to ? "router-link" : e.value.href ? "a" : "div");
+    S(() => {
+      o.value && (f(), v.value === "router-link" && F(o.value.$el, f, {
+        attributes: !0,
+        attributeFilter: ["class"]
+      }));
+    });
+    function _(t) {
+      if (e.value.disabled) {
+        t.stopPropagation(), t.preventDefault();
+        return;
+      }
+      e.value.onClick && e.value.onClick(t), u("click", t);
+    }
+    function f() {
+      if (o.value && o.value.$el && (e.value.href || e.value.to)) {
+        const t = o.value.$el.classList.contains(e.value.exact ? "router-link-exact-active" : "router-link-active") || !1;
+        a.value = t;
+      } else
+        a.value = !!e.value.active;
+    }
+    d(() => a.value, (t) => {
+      t && u("active");
+    }), d(() => e.value.active, (t) => {
+      a.value = !!t;
+    });
+    const { styles: b, classes: C, className: B } = M("menu-item", T, e, { isActive: a });
+    return (t, q) => (l(), r(x(v.value), N({
+      ref_key: "elRef",
+      ref: o
+    }, e.value.attrs, {
+      to: e.value.to,
+      href: e.value.href,
+      target: e.value.target,
+      color: e.value.color,
+      style: i(b),
+      class: [
+        i(B),
+        t.$style["menu-item"],
+        [a.value ? t.$style["menu-item--active"] : ""],
+        i(C).wrapper,
+        {
+          "flex items-center": t.$slots.prefix || t.$slots.suffix
+        }
+      ],
+      title: e.value.label,
+      alt: e.value.label,
+      onClick: _
+    }), {
+      default: R(() => [
+        t.$slots.prefix ? (l(), s("span", V, [
+          n(t.$slots, "prefix", {}, void 0, !0)
+        ])) : e.value.icon ? (l(), r(g, {
+          key: 1,
+          size: e.value.size,
+          icon: e.value.icon,
+          class: "mr-2"
+        }, null, 8, ["size", "icon"])) : k("", !0),
+        h("span", j, [
+          n(t.$slots, "default", {}, () => [
+            P(w(e.value.label), 1)
+          ], !0)
+        ]),
+        h("span", E, [
+          e.value.loading ? (l(), r(O, {
+            key: 0,
+            size: e.value.size
+          }, null, 8, ["size"])) : (l(), s(D, { key: 1 }, [
+            t.$slots.suffix ? (l(), s("span", A, [
+              n(t.$slots, "suffix", {}, void 0, !0)
+            ])) : e.value.iconRight ? (l(), r(g, {
+              key: 1,
+              size: e.value.size,
+              icon: e.value.iconRight
+            }, null, 8, ["size", "icon"])) : k("", !0)
+          ], 64))
+        ])
+      ]),
+      _: 3
+    }, 16, ["to", "href", "target", "color", "style", "class", "title", "alt"]));
+  }
+});
+export {
+  Z as default
+};

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

@@ -0,0 +1,7 @@
+const e = {
+  "menu-item": "_menu-item_eyhiv_2",
+  "menu-item--active": "_menu-item--active_eyhiv_1"
+};
+export {
+  e as default
+};

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

@@ -0,0 +1,6 @@
+export { default as XMenu } from './Menu.vue';
+export type { MenuProps, MenuArrayItem } from './Menu.vue';
+export type { MenuTheme } from './Menu.theme';
+export { default as XMenuItem } from './MenuItem.vue';
+export type { MenuItemProps } from './MenuItem.vue';
+export type { MenuItemTheme } from './MenuItem.theme';

package/lib/components/modal/Modal.theme.d.ts

@@ -1,13 +1,10 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper: string;
-        backdrop: string;
-        modal: ({ props }: ThemeParams) => string;
-        closeIcon: string;
-        header: string;
-        content: string;
-        actions: string;
-    };
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { ModalProps } from './Modal.vue';
+type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'closeIcon' | 'header' | 'content' | 'actions';
+interface InternalTheme extends ThemeComponent<ModalProps, InternalClasses> {
+}
+export interface ModalTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<ModalProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

package/lib/components/modal/Modal.theme.js

@@ -0,0 +1,17 @@
+const a = {
+  classes: {
+    wrapper: "fixed z-40 inset-0 overflow-y-auto transition-all",
+    backdrop: "fixed inset-0 bg-gray-500 dark:bg-black transition-opacity",
+    modal: ({ props: l }) => {
+      let e = "relative flex flex-col z-10 bg-white dark:bg-gray-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full";
+      return l.size === "xs" ? e += " sm:max-w-xs" : l.size === "sm" ? e += " sm:max-w-sm" : l.size === "lg" ? e += " sm:max-w-xl" : l.size === "xl" ? e += " sm:max-w-3xl" : e += " sm:max-w-lg", e;
+    },
+    closeIcon: "flex absolute p-1 top-4 z-10 right-4 rounded-full bg-opacity-10 hover:bg-opacity-30 cursor-pointer",
+    header: "text-lg font-semibold px-6 py-4 border-b",
+    content: "px-6 py-4",
+    actions: "bg-slate-50 dark:bg-gray-800 p-4"
+  }
+}, t = a;
+export {
+  t as default
+};

package/lib/components/modal/Modal.vue.d.ts

@@ -1,4 +1,16 @@
-import { type PropType } from 'vue';
+import { type PropType, type ExtractPublicPropTypes } from 'vue';
+declare const modalSize: readonly ["xs", "sm", "md", "lg", "xl", "full"];
+declare const modalProps: {
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl" | "full">;
+        default: string;
+    };
+    modelValue: BooleanConstructor;
+    showClose: BooleanConstructor;
+    backdrop: BooleanConstructor;
+};
+export type ModalSize = typeof modalSize[number];
+export type ModalProps = ExtractPublicPropTypes<typeof modalProps>;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     size: {
         type: PropType<"xs" | "sm" | "md" | "lg" | "xl" | "full">;