@indielayer/ui 1.0.9 → 1.1.0

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

@@ -0,0 +1,127 @@
+import { defineComponent as T, ref as f, watch as k, openBlock as l, createBlock as h, Teleport as B, createElementBlock as n, normalizeStyle as z, unref as o, normalizeClass as i, createCommentVNode as r, createElementVNode as p, createVNode as S, renderSlot as c, withCtx as E } from "vue";
+import { onClickOutside as N, useEventListener as _ } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.4/node_modules/@vueuse/core/index.js";
+import { useTheme as I } from "../../composables/theme.js";
+import { closeIcon as O } from "../../common/icons.js";
+import R from "./Modal.theme.js";
+import X from "../scroll/Scroll.vue.js";
+import j from "../icon/Icon.vue.js";
+const D = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen" }, K = ["xs", "sm", "md", "lg", "xl", "full"], L = {
+  size: {
+    type: String,
+    default: "md"
+  },
+  modelValue: Boolean,
+  showClose: Boolean,
+  backdrop: Boolean
+}, M = {
+  name: "XModal",
+  validators: {
+    size: K
+  }
+}, Q = /* @__PURE__ */ T({
+  ...M,
+  props: L,
+  emits: ["update:modelValue"],
+  setup(b, { expose: g, emit: y }) {
+    const m = b, a = f(m.modelValue), t = f(!1), v = f(null);
+    let u;
+    k(a, (e) => {
+      u && (u(), u = void 0), e && setTimeout(() => {
+        u = N(v, d);
+      });
+    }), k(() => m.modelValue, (e) => {
+      e ? (a.value = e, setTimeout(() => {
+        t.value = e;
+      })) : (t.value = e, setTimeout(() => {
+        a.value = e;
+      }, 150));
+    }), typeof window < "u" && _(document, "keydown", w);
+    function w(e) {
+      e.key === "Escape" && a.value && d();
+    }
+    function d() {
+      t.value = !1, setTimeout(() => {
+        a.value = !1, y("update:modelValue", !1);
+      }, 150);
+    }
+    function C() {
+      a.value = !0, y("update:modelValue", !0), setTimeout(() => {
+        t.value = !0;
+      });
+    }
+    const { styles: V, classes: s, className: $ } = I("modal", R, m);
+    return g({ open: C, close: d }), (e, P) => (l(), h(B, { to: "body" }, [
+      a.value ? (l(), n("div", {
+        key: 0,
+        style: z(o(V)),
+        class: i([
+          o($),
+          o(s).wrapper,
+          t.value ? "visible" : "invisible ease-in duration-100"
+        ])
+      }, [
+        e.backdrop ? (l(), n("div", {
+          key: 0,
+          class: i([
+            o(s).backdrop,
+            t.value ? "ease-out duration-200 opacity-30 dark:opacity-70" : "ease-in duration-100 opacity-0"
+          ])
+        }, null, 2)) : r("", !0),
+        p("div", D, [
+          p("div", {
+            ref_key: "modalRef",
+            ref: v,
+            class: i([
+              o(s).modal,
+              t.value ? "ease-out duration-200 opacity-100 translate-y-0 sm:scale-100" : "ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            ]),
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "modal-headline"
+          }, [
+            e.showClose ? (l(), n("div", {
+              key: 0,
+              class: i([
+                o(s).closeIcon,
+                e.$slots.image ? "bg-gray-900 text-white" : "bg-gray-500 text-gray-800 dark:text-gray-300"
+              ]),
+              onClick: d
+            }, [
+              S(j, { icon: o(O) }, null, 8, ["icon"])
+            ], 2)) : r("", !0),
+            c(e.$slots, "image"),
+            e.$slots.header ? (l(), n("div", {
+              key: 1,
+              class: i(o(s).header)
+            }, [
+              c(e.$slots, "header")
+            ], 2)) : r("", !0),
+            e.$slots.default ? (l(), h(X, {
+              key: 2,
+              scrollbar: !1,
+              vertical: ""
+            }, {
+              default: E(() => [
+                p("div", {
+                  class: i(o(s).content)
+                }, [
+                  c(e.$slots, "default")
+                ], 2)
+              ]),
+              _: 3
+            })) : r("", !0),
+            e.$slots.actions ? (l(), n("div", {
+              key: 3,
+              class: i(o(s).actions)
+            }, [
+              c(e.$slots, "actions")
+            ], 2)) : r("", !0)
+          ], 2)
+        ])
+      ], 6)) : r("", !0)
+    ]));
+  }
+});
+export {
+  Q as default
+};

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

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

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

@@ -0,0 +1,3 @@
+export { default as XModal } from './Modal.vue';
+export type { ModalProps, ModalSize } from './Modal.vue';
+export type { ModalTheme } from './Modal.theme';

package/lib/components/notifications/Notifications.theme.d.ts

@@ -1,8 +1,10 @@
-declare const _default: {
-    classes: {
-        wrapper: string;
-        list: string;
-        item: string;
-    };
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { NotificationsProps } from './Notifications.vue';
+type InternalClasses = 'wrapper' | 'list' | 'item';
+interface InternalTheme extends ThemeComponent<NotificationsProps, InternalClasses> {
+}
+export interface NotificationsTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<NotificationsProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

package/lib/components/notifications/Notifications.theme.js

@@ -0,0 +1,10 @@
+const e = {
+  classes: {
+    wrapper: "fixed z-40 w-full sm:w-auto overflow-y-auto max-h-screen",
+    list: "flex flex-col items-end w-full sm:w-[520px] px-4",
+    item: "w-full flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900 border border-gray-700 dark:border-gray-100"
+  }
+}, r = e;
+export {
+  r as default
+};

package/lib/components/notifications/Notifications.vue.d.ts

@@ -1,32 +1,65 @@
-import { type PropType } from 'vue';
-export declare type NotificationAlign = 'left' | 'right';
-export declare type NotificationPosition = 'bottom' | 'top';
-export declare type NotificationAction = {
+import { type PropType, type ExtractPublicPropTypes } from 'vue';
+declare const notificationsProps: {
+    align: {
+        type: PropType<"left" | "right">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    position: {
+        type: PropType<"top" | "bottom">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    timeout: {
+        type: NumberConstructor;
+        default: number;
+    };
+    removable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    injectKey: {
+        type: (SymbolConstructor | StringConstructor)[];
+        default: import("vue").InjectionKey<any>;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+};
+declare const validators: {
+    align: readonly ["left", "right"];
+    position: readonly ["bottom", "top"];
+};
+export type NotificationsProps = ExtractPublicPropTypes<typeof notificationsProps>;
+export type NotificationsAlign = typeof validators.align[number];
+export type NotificationsPosition = typeof validators.position[number];
+export type NotificationsAction = {
     onClick: () => void;
     label: string;
     color?: string;
 };
-export declare type NotificationEvent = {
+export type NotificationEvent = {
     id?: number;
     icon?: string;
-    action?: NotificationAction;
+    action?: NotificationsAction;
     iconColor?: string;
     title?: string;
     style?: string;
     message?: string;
     timeout?: number;
     removable?: boolean;
-    align?: NotificationAlign;
-    position?: NotificationPosition;
+    align?: NotificationsAlign;
+    position?: NotificationsPosition;
 };
-declare const _default: import("vue").DefineComponent<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     align: {
-        type: PropType<NotificationAlign>;
+        type: PropType<"left" | "right">;
         default: string;
         validator: (value: string) => boolean;
     };
     position: {
-        type: PropType<NotificationPosition>;
+        type: PropType<"top" | "bottom">;
         default: string;
         validator: (value: string) => boolean;
     };
@@ -55,12 +88,12 @@ declare const _default: import("vue").DefineComponent<{
     error: (notification: NotificationEvent | string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     align: {
-        type: PropType<NotificationAlign>;
+        type: PropType<"left" | "right">;
         default: string;
         validator: (value: string) => boolean;
     };
     position: {
-        type: PropType<NotificationPosition>;
+        type: PropType<"top" | "bottom">;
         default: string;
         validator: (value: string) => boolean;
     };
@@ -81,11 +114,18 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: string | undefined;
     };
 }>>, {
-    removable: boolean;
     color: string;
-    position: NotificationPosition;
-    align: NotificationAlign;
+    align: "left" | "right";
+    removable: boolean;
+    position: "top" | "bottom";
     timeout: number;
     injectKey: string | symbol;
+}, {}>, {
+    default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/notifications/Notifications.vue.js

@@ -0,0 +1,234 @@
+import { defineComponent as I, ref as v, provide as O, watch as $, openBlock as a, createElementBlock as m, Fragment as K, renderSlot as q, createBlock as y, Teleport as J, createElementVNode as h, normalizeStyle as A, unref as l, normalizeClass as k, createVNode as D, TransitionGroup as Q, withCtx as U, renderList as W, createCommentVNode as f, toDisplayString as x } from "vue";
+import { injectNotificationKey as Y } from "../../composables/keys.js";
+import { useColors as H } from "../../composables/colors.js";
+import { useCSS as Z } from "../../composables/css.js";
+import { useTheme as ee } from "../../composables/theme.js";
+import { closeIcon as oe } from "../../common/icons.js";
+import E from "../icon/Icon.vue.js";
+import te from "../spacer/Spacer.js";
+import re from "./Notifications.theme.js";
+const se = { class: "flex items-center flex-wrap" }, ae = {
+  key: 0,
+  class: "font-semibold mr-2"
+}, le = ["onClick"], ne = {
+  ...H.props("primary"),
+  align: {
+    type: String,
+    default: "right",
+    validator: (n) => b.align.includes(n)
+  },
+  position: {
+    type: String,
+    default: "bottom",
+    validator: (n) => b.position.includes(n)
+  },
+  timeout: {
+    type: Number,
+    default: 3500
+  },
+  removable: {
+    type: Boolean,
+    default: !0
+  },
+  injectKey: {
+    type: [Symbol, String],
+    default: Y
+  }
+}, b = {
+  align: ["left", "right"],
+  position: ["bottom", "top"]
+}, ie = {
+  name: "XNotifications",
+  validators: b
+}, he = /* @__PURE__ */ I({
+  ...ie,
+  props: ne,
+  setup(n, { expose: L }) {
+    const r = n, i = v(r.align), s = v(r.position), u = v([]), C = v(null), R = Z("notification"), _ = H();
+    O(r.injectKey, {
+      log: z,
+      info: M,
+      warn: p,
+      error: S,
+      warning: p,
+      success: w
+    }), $(() => r.align, (o) => {
+      i.value = o;
+    }), $(() => r.position, (o) => {
+      s.value = o;
+    });
+    function z(o) {
+      const t = typeof o == "string", e = {
+        message: t ? o : void 0
+      };
+      c(t ? e : {
+        ...e,
+        ...o
+      });
+    }
+    function M(o) {
+      const t = typeof o == "string", e = {
+        icon: '<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />',
+        iconColor: "sky",
+        message: t ? o : void 0
+      };
+      c(t ? e : {
+        ...e,
+        ...o
+      });
+    }
+    function w(o) {
+      const t = typeof o == "string", e = {
+        icon: '<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />',
+        iconColor: "success",
+        message: t ? o : void 0
+      };
+      c(t ? e : {
+        ...e,
+        ...o
+      });
+    }
+    function p(o) {
+      const t = typeof o == "string", e = {
+        icon: '<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />',
+        iconColor: "warning",
+        message: t ? o : void 0
+      };
+      c(t ? e : {
+        ...e,
+        ...o
+      });
+    }
+    function S(o) {
+      const t = typeof o == "string", e = {
+        icon: '<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />',
+        iconColor: "error",
+        message: t ? o : void 0
+      };
+      c(t ? e : {
+        ...e,
+        ...o
+      });
+    }
+    function c(o) {
+      var V, j;
+      const e = {
+        ...{
+          id: Date.now(),
+          iconColor: r.color,
+          timeout: r.timeout,
+          align: i.value,
+          position: s.value,
+          removable: r.removable
+        },
+        ...o
+      };
+      i.value = e.align, s.value = e.position;
+      const P = _.getPalette(e.iconColor), d = _.getPalette(((V = e.action) == null ? void 0 : V.color) || "primary"), T = R.variables({
+        icon: P[400],
+        action: d[400],
+        hover: {
+          action: d[500]
+        },
+        dark: {
+          icon: P[500],
+          action: d[500],
+          hover: {
+            action: d[600]
+          }
+        }
+      });
+      e.style = Object.keys(T).map((B) => `${B}: ${T[B]}`).join(";"), u.value.push(e), (j = C.value) == null || j.scrollTo({ top: 0, behavior: "smooth" }), e.timeout && X(e, e.timeout);
+    }
+    function N(o) {
+      u.value = u.value.filter((t) => t.id !== o.id);
+    }
+    function X(o, t) {
+      setTimeout(() => {
+        N(o);
+      }, t);
+    }
+    const { styles: F, classes: g, className: G } = ee("notification", re, r);
+    return L({ log: z, info: M, success: w, warn: p, warning: p, error: S }), (o, t) => (a(), m(K, null, [
+      q(o.$slots, "default"),
+      (a(), y(J, { to: "body" }, [
+        h("div", {
+          ref_key: "listRef",
+          ref: C,
+          style: A(l(F)),
+          class: k([
+            l(G),
+            l(g).wrapper,
+            {
+              // align
+              "left-0": i.value === "left",
+              "right-0": i.value === "right",
+              // position
+              "top-0": s.value === "top",
+              "bottom-0": s.value === "bottom"
+            }
+          ])
+        }, [
+          D(Q, {
+            tag: "ul",
+            class: k([
+              l(g).list,
+              { "flex-col-reverse": s.value }
+            ]),
+            "enter-active-class": "transition ease-out duration-200",
+            "leave-active-class": "transition ease-out duration-100",
+            "enter-from-class": "transform translate-y-2 opacity-0",
+            "enter-to-class": "transform translate-y-0 opacity-100",
+            "leave-from-class": "transform translate-y-0 opacity-100",
+            "leave-to-class": "transform translate-y-2 opacity-0",
+            "move-class": "ease-in-out duration-200"
+          }, {
+            default: U(() => [
+              (a(!0), m(K, null, W(u.value, (e) => (a(), m("li", {
+                key: e.id,
+                class: k([
+                  l(g).item,
+                  {
+                    "mb-2": s.value === "bottom",
+                    "mt-2": s.value === "top"
+                  }
+                ]),
+                style: A(e.style)
+              }, [
+                e.icon ? (a(), y(E, {
+                  key: 0,
+                  filled: "",
+                  icon: e.icon,
+                  class: "mr-4 text-[color:var(--x-notification-icon)] dark:text-[color:var(--x-notification-dark-icon)]",
+                  viewBox: "0 0 20 20"
+                }, null, 8, ["icon"])) : f("", !0),
+                h("div", se, [
+                  e.title ? (a(), m("span", ae, x(e.title), 1)) : f("", !0),
+                  h("span", null, x(e.message), 1)
+                ]),
+                D(l(te)),
+                e.action ? (a(), m("div", {
+                  key: 1,
+                  class: "ml-3 font-semibold cursor-pointer text-[color:var(--x-notification-action)] hover:text-[color:var(--x-notification-action-hover)] dark:text-[color:var(--x-notification-dark-action)] dark:hover:text-[color:var(--x-notification-dark-action-hover)]",
+                  onClick: e.action.onClick
+                }, x(e.action.label), 9, le)) : f("", !0),
+                e.removable ? (a(), y(E, {
+                  key: 2,
+                  icon: l(oe),
+                  class: "text-gray-400 hover:text-gray-500 ml-3 cursor-pointer",
+                  onClick: () => {
+                    N(e);
+                  }
+                }, null, 8, ["icon", "onClick"])) : f("", !0)
+              ], 6))), 128))
+            ]),
+            _: 1
+          }, 8, ["class"])
+        ], 6)
+      ]))
+    ], 64));
+  }
+});
+export {
+  he as default
+};

package/lib/components/notifications/Notifications.vue2.js

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

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

@@ -0,0 +1,3 @@
+export { default as XNotifications } from './Notifications.vue';
+export type { NotificationsProps, NotificationEvent, NotificationsAction, NotificationsAlign, NotificationsPosition, } from './Notifications.vue';
+export type { NotificationsTheme } from './Notifications.theme';

package/lib/components/pagination/Pagination.theme.d.ts

@@ -1,9 +1,10 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper: ({ props }: ThemeParams) => "flex items-center" | "flex items-center space-x-2" | "flex space-x-6";
-        dots: ({ props }: ThemeParams) => "h-4 w-4" | "h-5 w-5" | "h-2 w-2" | "h-3 w-3";
-    };
-    styles: ({ props, css, colors }: ThemeParams) => string;
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { PaginationProps } from './Pagination.vue';
+type InternalClasses = 'wrapper' | 'dots';
+interface InternalTheme extends ThemeComponent<PaginationProps, InternalClasses> {
+}
+export interface PaginationTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<PaginationProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

package/lib/components/pagination/Pagination.theme.js

@@ -0,0 +1,13 @@
+const i = {
+  classes: {
+    wrapper: ({ props: e }) => e.variant === "simple" ? "flex items-center space-x-2" : e.variant === "dots" ? "flex space-x-6" : "flex items-center",
+    dots: ({ props: e }) => e.size === "xs" ? "h-2 w-2" : e.size === "sm" ? "h-3 w-3" : e.size === "lg" ? "h-4 w-4" : e.size === "xl" ? "h-5 w-5" : "h-3 w-3"
+  },
+  styles: ({ props: e, css: t, colors: r }) => {
+    const s = r.getPalette("primary");
+    return t.get("bg", s[500]);
+  }
+}, n = i;
+export {
+  n as default
+};

package/lib/components/pagination/Pagination.vue.d.ts

@@ -1,4 +1,27 @@
-import { type PropType } from 'vue';
+import { type PropType, type ExtractPublicPropTypes } from 'vue';
+declare const paginationVariant: readonly ["simple", "quick", "dots"];
+declare const paginationProps: {
+    links: BooleanConstructor;
+    totalPages: {
+        type: NumberConstructor;
+        default: number;
+    };
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    variant: {
+        type: PropType<"dots" | "simple" | "quick">;
+        default: string;
+    };
+    size: {
+        readonly type: PropType<import("../../composables/common").Size>;
+        readonly default: "md";
+        readonly validator: (value: string) => boolean;
+    };
+};
+export type PaginationVariant = typeof paginationVariant[number];
+export type PaginationProps = ExtractPublicPropTypes<typeof paginationProps>;
 declare const _default: import("vue").DefineComponent<{
     links: BooleanConstructor;
     totalPages: {
@@ -10,7 +33,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     variant: {
-        type: PropType<"simple" | "dots" | "quick">;
+        type: PropType<"dots" | "simple" | "quick">;
         default: string;
     };
     size: {
@@ -29,7 +52,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     variant: {
-        type: PropType<"simple" | "dots" | "quick">;
+        type: PropType<"dots" | "simple" | "quick">;
         default: string;
     };
     size: {
@@ -42,8 +65,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     size: import("../../composables/common").Size;
     modelValue: number;
+    variant: "dots" | "simple" | "quick";
     links: boolean;
     totalPages: number;
-    variant: "simple" | "dots" | "quick";
-}>;
+}, {}>;
 export default _default;