@indielayer/ui 1.0.10 → 1.2.0

package/lib/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,9 @@
+const s = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+};
+export {
+  s as default
+};

package/lib/common/icons.js

@@ -0,0 +1,18 @@
+const c = '<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', n = '<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />', o = '<path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', t = '<path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />', a = '<path d="M6 18L18 6M6 6l12 12" />', h = '<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />', M = '<path d="M13 7l5 5m0 0l-5 5m5-5H6" />', s = '<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />', l = '<path d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />', p = '<path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />', e = '<path d="M15 19l-7-7 7-7" />', d = '<path d="M9 5l7 7-7 7" />', I = '<path d="M5 13l4 4L19 7" />', m = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />', r = '<line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" />';
+export {
+  M as arrowRightIcon,
+  h as avatarIcon,
+  I as checkIcon,
+  m as chevronDownIcon,
+  a as closeIcon,
+  p as dotsIcon,
+  o as errorIcon,
+  r as externalIcon,
+  s as eyeIcon,
+  l as eyeVisibleIcon,
+  c as infoIcon,
+  d as nextIcon,
+  e as prevIcon,
+  n as successIcon,
+  t as warningIcon
+};

package/lib/common/utils.d.ts

@@ -1,3 +1,6 @@
+export declare const isObject: (val: unknown) => val is object;
+export declare const isArray: (val: unknown) => val is [];
+export declare const isFunction: (val: unknown) => val is Function;
 /**
  * Deeply unref a value, recursing into objects and arrays.
  *
@@ -30,3 +33,4 @@ export declare const unrefArray: any;
  * @return {Object}
  */
 export declare const unrefObject: (obj: any) => any;
+export declare const mergeRightDeep: (source?: any, target?: any) => any;

package/lib/common/utils.js

@@ -0,0 +1,25 @@
+import { isRef as o, unref as f } from "vue";
+const s = (n) => n !== null && typeof n == "object", p = (n) => Array.isArray(n), h = (n) => typeof n == "function", b = (n) => {
+  const e = o(n) ? f(n) : n;
+  return s(e) ? p(e) ? j(e) : m(e) : e;
+}, i = (n) => n !== null && !o(n) && typeof n == "object" ? b(n) : f(n), j = (n) => n.map(i), m = (n) => {
+  const e = {};
+  return Object.keys(n).forEach((t) => {
+    e[t] = i(n[t]);
+  }), e;
+}, d = (n = {}, e = {}) => {
+  const t = Object.keys(n), u = Object.keys(e), c = { ...n };
+  return u.forEach((r) => {
+    t.includes(r) && s(n[r]) && s(e[r]) ? c[r] = d(n[r], e[r]) : c[r] = e[r];
+  }), c;
+};
+export {
+  b as deepUnref,
+  p as isArray,
+  h as isFunction,
+  s as isObject,
+  d as mergeRightDeep,
+  i as smartUnref,
+  j as unrefArray,
+  m as unrefObject
+};

package/lib/components/alert/Alert.theme.d.ts

@@ -1,8 +1,10 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper: string;
-    };
-    styles: ({ props, colors, css }: ThemeParams) => (string | object)[];
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { AlertProps } from './Alert.vue';
+type InternalClasses = 'wrapper';
+interface InternalTheme extends ThemeComponent<AlertProps, InternalClasses> {
+}
+export interface AlertTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<AlertProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

package/lib/components/alert/Alert.theme.js

@@ -0,0 +1,41 @@
+const l = {
+  classes: {
+    wrapper: "flex items-center rounded-md space-x-2 px-4 py-2 border"
+  },
+  styles: ({ props: t, colors: n, css: a }) => {
+    const e = n.getPalette(t.color), r = [];
+    return t.glow && r.push(a.get("glow", n.getColorOpacity(e[500], 0.5))), t.color ? (t.light ? r.push(a.variables({
+      bg: e[50],
+      text: e[600],
+      icon: e[600],
+      border: t.outlined ? e[600] : e[50],
+      dark: {
+        bg: e[200],
+        text: e[800],
+        icon: e[600],
+        border: t.outlined ? e[500] : e[200]
+      }
+    })) : r.push(a.variables({
+      bg: t.outlined ? "transparent" : e[600],
+      text: t.outlined ? e[600] : e[50],
+      icon: t.outlined ? e[600] : e[50],
+      border: e[600],
+      dark: {
+        border: e[400],
+        text: t.outlined ? e[400] : e[50]
+      }
+    })), r) : (r.push(a.variables({
+      bg: "transparent",
+      text: e[500],
+      border: e[300],
+      dark: {
+        bg: "transparent",
+        text: e[300],
+        border: e[500]
+      }
+    })), r);
+  }
+}, o = l;
+export {
+  o as default
+};

package/lib/components/alert/Alert.vue.d.ts

@@ -1,20 +1,37 @@
-import { type PropType } from 'vue';
+import { type ExtractPublicPropTypes, type PropType } from 'vue';
+declare const alertType: readonly ["info", "success", "error", "warning"];
+declare const alertProps: {
+    type: PropType<"error" | "success" | "warning" | "info">;
+    glow: BooleanConstructor;
+    light: BooleanConstructor;
+    outlined: BooleanConstructor;
+    removable: BooleanConstructor;
+    closeLabel: StringConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+};
+export type AlertType = typeof alertType[number];
+export type AlertProps = ExtractPublicPropTypes<typeof alertProps>;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    type: PropType<"success" | "warning" | "error" | "info" | undefined>;
+    type: PropType<"error" | "success" | "warning" | "info">;
     glow: BooleanConstructor;
     light: BooleanConstructor;
     outlined: BooleanConstructor;
     removable: BooleanConstructor;
+    closeLabel: StringConstructor;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "remove"[], "remove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    type: PropType<"success" | "warning" | "error" | "info" | undefined>;
+    type: PropType<"error" | "success" | "warning" | "info">;
     glow: BooleanConstructor;
     light: BooleanConstructor;
     outlined: BooleanConstructor;
     removable: BooleanConstructor;
+    closeLabel: StringConstructor;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -23,9 +40,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onRemove?: ((...args: any[]) => any) | undefined;
 }, {
     color: string;
-    glow: boolean;
-    light: boolean;
     outlined: boolean;
+    light: boolean;
+    glow: boolean;
     removable: boolean;
 }, {}>, {
     icon?(_: {}): any;

package/lib/components/alert/Alert.vue.js

@@ -0,0 +1,9 @@
+import s from "./Alert.vue2.js";
+import o from "./Alert.vue3.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const r = {
+  $style: o
+}, f = /* @__PURE__ */ t(s, [["__cssModules", r]]);
+export {
+  f as default
+};

package/lib/components/alert/Alert.vue2.js

@@ -0,0 +1,62 @@
+import { defineComponent as v, computed as g, openBlock as l, createElementBlock as a, normalizeStyle as k, unref as r, normalizeClass as w, renderSlot as t, createBlock as b, createCommentVNode as i, createElementVNode as n, Fragment as B, createVNode as $ } from "vue";
+import { useColors as I } from "../../composables/colors.js";
+import { useTheme as h } from "../../composables/theme.js";
+import { infoIcon as C, successIcon as N, errorIcon as S, warningIcon as V, closeIcon as z } from "../../common/icons.js";
+import c from "../icon/Icon.vue.js";
+import E from "./Alert.theme.js";
+const L = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), T = ["aria-label"], _ = ["info", "success", "error", "warning"], A = {
+  ...I.props(),
+  type: String,
+  glow: Boolean,
+  light: Boolean,
+  outlined: Boolean,
+  removable: Boolean,
+  closeLabel: String
+}, F = {
+  name: "XAlert",
+  validators: {
+    type: _
+  }
+}, H = /* @__PURE__ */ v({
+  ...F,
+  props: A,
+  emits: ["remove"],
+  setup(m) {
+    const o = m, p = g(() => o.type === "info" ? C : o.type === "success" ? N : o.type === "error" ? S : o.type === "warning" ? V : ""), { styles: u, classes: f, className: d } = h("alert", E, o);
+    return (e, s) => (l(), a("div", {
+      style: k(r(u)),
+      class: w([
+        r(d),
+        e.$style.alert,
+        e.glow ? e.$style["alert--glow"] : "",
+        r(f).wrapper
+      ])
+    }, [
+      t(e.$slots, "icon", {}, () => [
+        e.type ? (l(), b(c, {
+          key: 0,
+          icon: p.value,
+          class: "text-[color:var(--x-alert-icon)] dark:text-[color:var(--x-alert-dark-icon)]"
+        }, null, 8, ["icon"])) : i("", !0)
+      ]),
+      n("div", null, [
+        t(e.$slots, "default")
+      ]),
+      e.removable ? (l(), a(B, { key: 0 }, [
+        L,
+        n("button", {
+          class: "shrink-0",
+          "aria-label": e.closeLabel,
+          onClick: s[0] || (s[0] = (y) => e.$emit("remove", y))
+        }, [
+          t(e.$slots, "removeIcon", {}, () => [
+            $(c, { icon: r(z) }, null, 8, ["icon"])
+          ])
+        ], 8, T)
+      ], 64)) : i("", !0)
+    ], 6));
+  }
+});
+export {
+  H as default
+};

package/lib/components/alert/Alert.vue3.js

@@ -0,0 +1,8 @@
+const l = "_alert_rqxly_2", t = {
+  alert: l,
+  "alert--glow": "_alert--glow_rqxly_1"
+};
+export {
+  l as alert,
+  t as default
+};

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

@@ -0,0 +1,3 @@
+export { default as XAlert } from './Alert.vue';
+export type { AlertProps, AlertType } from './Alert.vue';
+export type { AlertTheme } from './Alert.theme';

package/lib/components/avatar/Avatar.theme.d.ts

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

package/lib/components/avatar/Avatar.theme.js

@@ -0,0 +1,25 @@
+const n = {
+  classes: {
+    wrapper({ props: e }) {
+      const t = ["relative inline-flex items-center justify-center overflow-hidden align-middle border box-content"];
+      return t.push(e.rounded ? "rounded-full" : "rounded-md"), e.size === "xs" ? t.push("h-6 w-6 text-xs") : e.size === "sm" ? t.push("h-9 w-9 text-sm") : e.size === "lg" ? t.push("h-12 w-12 text-lg") : e.size === "xl" ? t.push("h-[3.75rem] w-[3.75rem] text-xl") : t.push("h-10 w-10"), t;
+    }
+  },
+  styles({ props: e, colors: t, css: r, data: l }) {
+    const s = t.getPalette(e.color);
+    return l.source ? r.variables({
+      bg: "transparent",
+      border: e.outlined ? s[500] : "transparent"
+    }) : r.variables({
+      bg: s[100],
+      text: s[500],
+      border: e.outlined ? s[500] : "transparent",
+      dark: {
+        bg: s[900]
+      }
+    });
+  }
+}, i = n;
+export {
+  i as default
+};

package/lib/components/avatar/Avatar.vue.d.ts

@@ -1,3 +1,25 @@
+import { type ExtractPublicPropTypes } from 'vue';
+declare const avatarProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: StringConstructor;
+    alt: StringConstructor;
+    image: StringConstructor;
+    outlined: BooleanConstructor;
+    rounded: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;
@@ -37,10 +59,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>>, {
-    size: import("../../composables/common").Size;
     color: string;
-    outlined: boolean;
+    size: import("../../composables/common").Size;
     tag: string;
+    outlined: boolean;
     rounded: boolean;
 }, {}>, {
     avatarIcon?(_: {}): any;

package/lib/components/avatar/Avatar.vue.js

@@ -0,0 +1,9 @@
+import s from "./Avatar.vue2.js";
+import o from "./Avatar.vue3.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const r = {
+  $style: o
+}, f = /* @__PURE__ */ t(s, [["__cssModules", r]]);
+export {
+  f as default
+};

package/lib/components/avatar/Avatar.vue2.js

@@ -0,0 +1,76 @@
+import { defineComponent as d, ref as f, computed as g, watch as v, openBlock as n, createBlock as y, resolveDynamicComponent as h, normalizeStyle as w, unref as r, normalizeClass as C, withCtx as S, createElementBlock as s, toDisplayString as _, renderSlot as k, createVNode as z, createCommentVNode as B } from "vue";
+import { useCommon as i } from "../../composables/common.js";
+import { useColors as I } from "../../composables/colors.js";
+import { useTheme as N } from "../../composables/theme.js";
+import { avatarIcon as $ } from "../../common/icons.js";
+import D from "../icon/Icon.vue.js";
+import V from "./Avatar.theme.js";
+const b = ["alt", "src"], A = {
+  key: 1,
+  class: "leading-none"
+}, E = {
+  ...i.props(),
+  ...I.props("primary"),
+  tag: {
+    type: String,
+    default: "div"
+  },
+  name: String,
+  alt: String,
+  image: String,
+  outlined: Boolean,
+  rounded: Boolean
+}, P = {
+  name: "XAvatar",
+  validators: i.validators()
+}, H = /* @__PURE__ */ d({
+  ...P,
+  props: E,
+  setup(l) {
+    const a = l, o = f(), m = g(() => {
+      if (a.name) {
+        const e = a.name.match(/\b\w/g) || [];
+        return ((e.shift() || "") + (e.pop() || "")).toUpperCase();
+      }
+      return "";
+    });
+    typeof window < "u" && Image && v(() => a.image, (e) => {
+      if (o.value = void 0, !e)
+        return;
+      const t = new Image();
+      t.onload = () => {
+        o.value = a.image;
+      }, t.onerror = () => {
+      }, t.src = e;
+    }, {
+      immediate: !0
+    });
+    const { styles: p, classes: c, className: u } = N("avatar", V, a, { source: o });
+    return (e, t) => (n(), y(h(e.tag), {
+      style: w(r(p)),
+      class: C([
+        r(u),
+        e.$style.avatar,
+        r(c).wrapper
+      ])
+    }, {
+      default: S(() => [
+        o.value ? (n(), s("img", {
+          key: 0,
+          alt: e.alt,
+          src: e.image,
+          class: "h-full w-full"
+        }, null, 8, b)) : e.name ? (n(), s("span", A, _(m.value), 1)) : e.name ? B("", !0) : k(e.$slots, "avatarIcon", { key: 2 }, () => [
+          z(D, {
+            size: e.size,
+            icon: r($)
+          }, null, 8, ["size", "icon"])
+        ])
+      ]),
+      _: 3
+    }, 8, ["style", "class"]));
+  }
+});
+export {
+  H as default
+};

package/lib/components/avatar/Avatar.vue3.js

@@ -0,0 +1,7 @@
+const a = "_avatar_7u83c_2", t = {
+  avatar: a
+};
+export {
+  a as avatar,
+  t as default
+};

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

@@ -0,0 +1,3 @@
+export { default as XAvatar } from './Avatar.vue';
+export type { AvatarProps } from './Avatar.vue';
+export type { AvatarTheme } from './Avatar.theme';

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

@@ -1,8 +1,10 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper: string;
-    };
-    styles({ props, colors, css }: ThemeParams): string;
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { BadgeProps } from './Badge.vue';
+type InternalClasses = 'wrapper';
+interface InternalTheme extends ThemeComponent<BadgeProps, InternalClasses> {
+}
+export interface BadgeTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<BadgeProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

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

@@ -0,0 +1,12 @@
+const l = {
+  classes: {
+    wrapper: "inline-block"
+  },
+  styles({ props: e, colors: t, css: o }) {
+    const s = t.getPalette(e.color);
+    return o.get("bg", s[500]);
+  }
+}, c = l;
+export {
+  c as default
+};

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

@@ -1,4 +1,41 @@
-import { type PropType } from 'vue';
+import { type PropType, type ExtractPublicPropTypes } from 'vue';
+declare const badgeAlign: readonly ["left", "right"];
+declare const badgePosition: readonly ["top", "bottom"];
+declare const badgeProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    position: {
+        type: PropType<"top" | "bottom">;
+        default: string;
+    };
+    align: {
+        type: PropType<"left" | "right">;
+        default: string;
+    };
+    offsetX: (StringConstructor | NumberConstructor)[];
+    offsetY: (StringConstructor | NumberConstructor)[];
+    animated: BooleanConstructor;
+    outlined: BooleanConstructor;
+    icon: StringConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    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 BadgePosition = typeof badgePosition[number];
+export type BadgeAlign = typeof badgeAlign[number];
+export type BadgeProps = ExtractPublicPropTypes<typeof badgeProps>;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;
@@ -12,8 +49,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<"left" | "right">;
         default: string;
     };
-    offsetX: (NumberConstructor | StringConstructor)[];
-    offsetY: (NumberConstructor | StringConstructor)[];
+    offsetX: (StringConstructor | NumberConstructor)[];
+    offsetY: (StringConstructor | NumberConstructor)[];
     animated: BooleanConstructor;
     outlined: BooleanConstructor;
     icon: StringConstructor;
@@ -43,8 +80,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<"left" | "right">;
         default: string;
     };
-    offsetX: (NumberConstructor | StringConstructor)[];
-    offsetY: (NumberConstructor | StringConstructor)[];
+    offsetX: (StringConstructor | NumberConstructor)[];
+    offsetY: (StringConstructor | NumberConstructor)[];
     animated: BooleanConstructor;
     outlined: BooleanConstructor;
     icon: StringConstructor;
@@ -62,12 +99,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>>, {
-    size: import("../../composables/common").Size;
     color: string;
-    outlined: boolean;
+    size: import("../../composables/common").Size;
+    align: "left" | "right";
     tag: string;
+    outlined: boolean;
     position: "top" | "bottom";
-    align: "left" | "right";
     animated: boolean;
     show: boolean;
 }, {}>, {