@indielayer/ui 0.0.0-dev-20240125104319

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

@@ -0,0 +1,123 @@
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import { type Size } from '../../composables/useCommon';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const menuProps: {
+    items: PropType<MenuArrayItem[]>;
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    collapseIcon: StringConstructor;
+    expanded: BooleanConstructor;
+    disabled: BooleanConstructor;
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type MenuArrayItem = {
+    collapsible?: boolean;
+    collapseIcon?: string;
+    expanded?: boolean;
+    divider?: boolean;
+    items?: MenuArrayItem[];
+    value?: string | number;
+    to?: string | object;
+    href?: string;
+    target?: string;
+    exact?: boolean;
+    color?: string;
+    size?: Size;
+    label?: string;
+    icon?: string;
+    iconRight?: string;
+    loading?: boolean;
+    rounded?: boolean;
+    filled?: boolean;
+    disabled?: boolean;
+    active?: boolean;
+    attrs?: Record<string, unknown>;
+    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: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    collapseIcon: StringConstructor;
+    expanded: BooleanConstructor;
+    disabled: BooleanConstructor;
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}, {}, 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;
+        default: boolean;
+    };
+    collapseIcon: StringConstructor;
+    expanded: BooleanConstructor;
+    disabled: BooleanConstructor;
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}>> & {
+    onExpand?: ((...args: any[]) => any) | undefined;
+    "onItem-click"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    expanded: boolean;
+    color: string;
+    rounded: boolean;
+    size: Size;
+    filled: boolean;
+    collapsible: boolean;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,135 @@
+import { defineComponent as C, resolveComponent as B, openBlock as d, createElementBlock as n, normalizeStyle as g, unref as p, normalizeClass as r, Fragment as a, renderList as E, createBlock as u, withCtx as c, createVNode as i, 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 "../accordion/AccordionItem.vue.js";
+import S from "../divider/Divider.vue.js";
+const V = {
+  ...m.props(),
+  ...M.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()
+  }
+}, G = /* @__PURE__ */ C({
+  ...X,
+  props: V,
+  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: g(p(k)),
+        class: r([
+          "space-y-1",
+          p($),
+          p(v).wrapper
+        ])
+      }, [
+        (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: o[1] || (o[1] = (s) => e.$emit("expand"))
+            }, {
+              default: c(({}) => [
+                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: c(({ expand: s }) => [
+                i(b, {
+                  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: (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"])) : (d(), n(a, { 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: "",
+                onClick: o[2] || (o[2] = (s) => e.$emit("item-click"))
+              }, null, 8, ["item", "rounded", "color", "filled", "size", "disabled"]),
+              i(b, {
+                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: o[3] || (o[3] = (s) => e.$emit("expand"))
+              }, null, 8, ["class", "items", "color", "size", "collapsible", "collapse-icon", "expanded", "disabled", "rounded", "filled"])
+            ], 64))
+          ], 64)) : (d(), n(a, { key: 1 }, [
+            l.divider ? (d(), u(S, { key: 0 })) : (d(), 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 }),
+              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)) : w("", !0);
+    };
+  }
+});
+export {
+  G 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.vue.d.ts

@@ -0,0 +1,154 @@
+import { type ExtractPublicPropTypes, type PropType, type Ref } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+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/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type MenuItemProps = ExtractPublicPropTypes<typeof menuItemProps>;
+type InternalClasses = 'wrapper';
+type InternalExtraData = {
+    isActive: Ref<boolean>;
+};
+export interface MenuItemTheme extends ThemeComponent<MenuItemProps, InternalClasses, InternalExtraData> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    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/useCommon").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: 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/useCommon").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onActive?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    color: string;
+    rounded: boolean;
+    size: import("../../composables/useCommon").Size;
+    item: MenuArrayItem;
+    active: boolean;
+    loading: boolean;
+    filled: boolean;
+    attrs: Record<string, any>;
+    exact: boolean;
+    selected: boolean;
+}, {}>, {
+    prefix?(_: {}): any;
+    default?(_: {}): any;
+    suffix?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

@@ -0,0 +1,142 @@
+import { defineComponent as S, ref as m, computed as p, onMounted as x, watch as d, openBlock as l, createBlock as i, resolveDynamicComponent as N, mergeProps as R, unref as s, withCtx as I, createElementBlock as r, renderSlot as n, createCommentVNode as k, createElementVNode as g, createTextVNode as M, toDisplayString as P, Fragment as w } from "vue";
+import { useMutationObserver as D } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { useColors as F } from "../../composables/useColors.js";
+import { useCommon as y } from "../../composables/useCommon.js";
+import { useTheme as O } from "../../composables/useTheme.js";
+import h from "../icon/Icon.vue.js";
+import T from "../spinner/Spinner.vue.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(),
+  ...F.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()
+  }
+}, Y = /* @__PURE__ */ S({
+  ...X,
+  props: L,
+  emits: ["active", "click"],
+  setup($, { emit: _ }) {
+    const u = $, c = _, o = m(), a = m(!1), e = p(() => ({
+      ...u,
+      ...u.item
+    })), v = p(() => e.value.to ? "router-link" : e.value.href ? "a" : "div");
+    x(() => {
+      o.value && (f(), v.value === "router-link" && D(o.value.$el, f, {
+        attributes: !0,
+        attributeFilter: ["class"]
+      }));
+    });
+    function b(t) {
+      if (e.value.disabled) {
+        t.stopPropagation(), t.preventDefault();
+        return;
+      }
+      e.value.onClick && e.value.onClick(t), c("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 && c("active");
+    }), d(() => e.value.active, (t) => {
+      a.value = !!t;
+    });
+    const { styles: C, classes: B, className: z } = O("MenuItem", {}, e, { isActive: a });
+    return (t, q) => (l(), i(N(v.value), R({
+      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: s(C),
+      class: [
+        s(z),
+        t.$style["menu-item"],
+        [a.value ? t.$style["menu-item--active"] : ""],
+        s(B).wrapper,
+        {
+          "flex items-center": t.$slots.prefix || t.$slots.suffix
+        }
+      ],
+      title: e.value.label,
+      alt: e.value.label,
+      onClick: b
+    }), {
+      default: I(() => [
+        t.$slots.prefix ? (l(), r("span", V, [
+          n(t.$slots, "prefix", {}, void 0, !0)
+        ])) : e.value.icon ? (l(), i(h, {
+          key: 1,
+          size: e.value.size,
+          icon: e.value.icon,
+          class: "mr-2"
+        }, null, 8, ["size", "icon"])) : k("", !0),
+        g("span", j, [
+          n(t.$slots, "default", {}, () => [
+            M(P(e.value.label), 1)
+          ], !0)
+        ]),
+        g("span", E, [
+          e.value.loading ? (l(), i(T, {
+            key: 0,
+            size: e.value.size
+          }, null, 8, ["size"])) : (l(), r(w, { key: 1 }, [
+            t.$slots.suffix ? (l(), r("span", A, [
+              n(t.$slots, "suffix", {}, void 0, !0)
+            ])) : e.value.iconRight ? (l(), i(h, {
+              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 {
+  Y 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/__tests__/Menu.spec.d.ts

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

package/lib/components/menu/__tests__/MenuItem.spec.d.ts

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

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

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

package/lib/components/menu/theme/Menu.base.theme.d.ts

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

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

@@ -0,0 +1,8 @@
+const e = {
+  classes: {
+    wrapper: ""
+  }
+}, s = e;
+export {
+  s as default
+};

package/lib/components/menu/theme/Menu.carbon.theme.d.ts

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

package/lib/components/menu/theme/Menu.carbon.theme.js

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

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

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