@indielayer/ui 0.0.0-dev-20240125104319

package/lib/components/menu/theme/MenuItem.base.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[700]),
+        text: e[100],
+        hover: {
+          bg: (a.selected, 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/theme/MenuItem.carbon.theme.d.ts

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

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

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

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

@@ -0,0 +1,150 @@
+import { type PropType, type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+import { type FormError } from '../form/Form.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;
+    hasActions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: StringConstructor;
+    description: StringConstructor;
+    label: StringConstructor;
+    loading: BooleanConstructor;
+    loadingText: StringConstructor;
+    fluid: BooleanConstructor;
+    isForm: BooleanConstructor;
+    formDisabled: BooleanConstructor;
+    formDescription: StringConstructor;
+    formTitle: StringConstructor;
+    formAutoValidate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formErrors: {
+        type: PropType<[FormError[], FormError]>;
+        default: () => never[];
+    };
+};
+export type ModalSize = typeof modalSize[number];
+export type ModalProps = ExtractPublicPropTypes<typeof modalProps>;
+type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'closeIcon' | 'header' | 'content' | 'actions' | 'title' | 'description' | 'label';
+type InternaData = {
+    visible: boolean;
+};
+export interface ModalTheme extends ThemeComponent<ModalProps, InternalClasses, InternaData> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl" | "full">;
+        default: string;
+    };
+    modelValue: BooleanConstructor;
+    showClose: BooleanConstructor;
+    backdrop: BooleanConstructor;
+    hasActions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: StringConstructor;
+    description: StringConstructor;
+    label: StringConstructor;
+    loading: BooleanConstructor;
+    loadingText: StringConstructor;
+    fluid: BooleanConstructor;
+    isForm: BooleanConstructor;
+    formDisabled: BooleanConstructor;
+    formDescription: StringConstructor;
+    formTitle: StringConstructor;
+    formAutoValidate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formErrors: {
+        type: PropType<[FormError[], FormError]>;
+        default: () => never[];
+    };
+}, {
+    open: () => void;
+    close: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("submit" | "update:modelValue")[], "submit" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl" | "full">;
+        default: string;
+    };
+    modelValue: BooleanConstructor;
+    showClose: BooleanConstructor;
+    backdrop: BooleanConstructor;
+    hasActions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: StringConstructor;
+    description: StringConstructor;
+    label: StringConstructor;
+    loading: BooleanConstructor;
+    loadingText: StringConstructor;
+    fluid: BooleanConstructor;
+    isForm: BooleanConstructor;
+    formDisabled: BooleanConstructor;
+    formDescription: StringConstructor;
+    formTitle: StringConstructor;
+    formAutoValidate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formErrors: {
+        type: PropType<[FormError[], FormError]>;
+        default: () => never[];
+    };
+}>> & {
+    onSubmit?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+    loading: boolean;
+    modelValue: boolean;
+    backdrop: boolean;
+    showClose: boolean;
+    hasActions: boolean;
+    hasHeader: boolean;
+    fluid: boolean;
+    isForm: boolean;
+    formDisabled: boolean;
+    formAutoValidate: boolean;
+    formErrors: [FormError[], FormError];
+}, {}>, {
+    image?(_: {}): any;
+    header?(_: {}): any;
+    default?(_: {}): any;
+    actions?(_: {}): any;
+    "cancel-action"?(_: {}): any;
+    "tertiary-action"?(_: {}): any;
+    "secondary-action"?(_: {}): any;
+    "primary-action"?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,179 @@
+import { defineComponent as X, ref as f, watch as g, nextTick as B, useSlots as j, computed as H, openBlock as l, createBlock as p, Teleport as I, createElementBlock as i, normalizeStyle as M, unref as o, normalizeClass as a, createCommentVNode as s, createElementVNode as S, resolveDynamicComponent as P, withCtx as w, renderSlot as r, toDisplayString as v } from "vue";
+import { onClickOutside as W, useEventListener as K } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { useTheme as L } from "../../composables/useTheme.js";
+import { useFocusTrap as q } from "../../composables/useFocusTrap.js";
+import { closeIcon as G } from "../../common/icons.js";
+import J from "../button/Button.vue.js";
+import Q from "../scroll/Scroll.vue.js";
+import U from "../form/Form.vue.js";
+const Y = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen" }, Z = { key: 0 }, _ = ["xs", "sm", "md", "lg", "xl", "full"], x = {
+  size: {
+    type: String,
+    default: "xl"
+  },
+  modelValue: Boolean,
+  showClose: Boolean,
+  backdrop: Boolean,
+  hasActions: {
+    type: Boolean,
+    default: !0
+  },
+  hasHeader: {
+    type: Boolean,
+    default: !0
+  },
+  title: String,
+  description: String,
+  label: String,
+  loading: Boolean,
+  loadingText: String,
+  fluid: Boolean,
+  // form props
+  isForm: Boolean,
+  formDisabled: Boolean,
+  formDescription: String,
+  formTitle: String,
+  formAutoValidate: {
+    type: Boolean,
+    default: !0
+  },
+  formErrors: {
+    type: [Array, Object],
+    default: () => []
+  }
+}, ee = {
+  name: "XModal",
+  validators: {
+    size: _
+  }
+}, ue = /* @__PURE__ */ X({
+  ...ee,
+  props: x,
+  emits: ["update:modelValue", "submit"],
+  setup(V, { expose: $, emit: T }) {
+    const u = V, b = T, d = f(u.modelValue), n = f(!1), y = f(null), C = f(null), { initFocusTrap: D, clearFocusTrap: z } = q();
+    let m;
+    g(d, (e) => {
+      m && (m(), m = void 0), e && setTimeout(() => {
+        m = W(y, c);
+      });
+    }), g(() => u.modelValue, E, { immediate: !0 });
+    async function E() {
+      const e = u.modelValue;
+      e ? (d.value = e, await B(), n.value = e, await B(), D(y), document.body.style.overflow = "hidden") : (n.value = e, d.value = e, z(), document.body.style.overflow = "auto");
+    }
+    typeof window < "u" && K(document, "keydown", A);
+    function A(e) {
+      e.key === "Escape" && d.value && c();
+    }
+    function c() {
+      n.value = !1, setTimeout(() => {
+        b("update:modelValue", !1);
+      }, 150);
+    }
+    function F() {
+      b("update:modelValue", !0), n.value = !0;
+    }
+    const k = j(), R = H(() => !!(k["tertiary-action"] || k["cancel-action"])), { styles: N, classes: t, className: O } = L("Modal", {}, u, {
+      visible: n
+    });
+    return $({ open: F, close: c }), (e, h) => (l(), p(I, { to: "body" }, [
+      d.value ? (l(), i("div", {
+        key: 0,
+        ref_key: "modalWrapperRef",
+        ref: C,
+        style: M(o(N)),
+        class: a([
+          o(O),
+          o(t).wrapper,
+          n.value ? "visible" : "invisible ease-in duration-100"
+        ])
+      }, [
+        e.backdrop ? (l(), i("div", {
+          key: 0,
+          class: a(o(t).backdrop)
+        }, null, 2)) : s("", !0),
+        S("div", Y, [
+          (l(), p(P(e.isForm ? U : "div"), {
+            ref_key: "modalRef",
+            ref: y,
+            disabled: e.formDisabled,
+            "auto-validate": e.formAutoValidate,
+            title: e.formTitle,
+            description: e.formDescription,
+            errors: e.formErrors,
+            class: a(o(t).modal),
+            "auto-focus": "",
+            "has-footer": !1,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "modal-headline",
+            onSubmit: h[0] || (h[0] = (oe) => e.$emit("submit"))
+          }, {
+            default: w(() => [
+              r(e.$slots, "image"),
+              e.hasHeader ? (l(), i("div", {
+                key: 0,
+                class: a(o(t).header)
+              }, [
+                r(e.$slots, "header", {}, () => [
+                  e.label ? (l(), i("div", {
+                    key: 0,
+                    class: a(o(t).label)
+                  }, v(e.label), 3)) : s("", !0),
+                  e.title ? (l(), i("div", {
+                    key: 1,
+                    class: a(o(t).title)
+                  }, v(e.title), 3)) : s("", !0)
+                ])
+              ], 2)) : s("", !0),
+              e.$slots.default ? (l(), p(Q, {
+                key: 1,
+                scrollbar: !1,
+                vertical: ""
+              }, {
+                default: w(() => [
+                  S("div", {
+                    class: a(o(t).content)
+                  }, [
+                    e.description ? (l(), i("div", {
+                      key: 0,
+                      class: a(o(t).description)
+                    }, v(e.description), 3)) : s("", !0),
+                    r(e.$slots, "default")
+                  ], 2)
+                ]),
+                _: 3
+              })) : s("", !0),
+              e.showClose ? (l(), p(J, {
+                key: 2,
+                ghost: "",
+                size: "lg",
+                tabindex: "-1",
+                icon: o(G),
+                class: a(o(t).closeIcon),
+                onClick: c
+              }, null, 8, ["icon", "class"])) : s("", !0),
+              e.hasActions ? (l(), i("div", {
+                key: 3,
+                class: a(o(t).actions)
+              }, [
+                r(e.$slots, "actions", {}, () => [
+                  r(e.$slots, "cancel-action"),
+                  R.value ? (l(), i("div", Z)) : s("", !0),
+                  r(e.$slots, "tertiary-action"),
+                  r(e.$slots, "secondary-action"),
+                  r(e.$slots, "primary-action")
+                ])
+              ], 2)) : s("", !0)
+            ]),
+            _: 3
+          }, 40, ["disabled", "auto-validate", "title", "description", "errors", "class"]))
+        ])
+      ], 6)) : s("", !0)
+    ]));
+  }
+});
+export {
+  ue 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/__tests__/Modal.spec.d.ts

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+const a = {
+  classes: {
+    wrapper: "fixed z-40 inset-0 overflow-y-auto transition-all",
+    backdrop: ({ data: s }) => {
+      const t = ["fixed inset-0 bg-gray-500 dark:bg-black transition-opacity"];
+      return s.visible ? t.push("ease-out duration-200 opacity-30 dark:opacity-70") : t.push("ease-in duration-100 opacity-0"), t;
+    },
+    modal: ({ props: s, data: t }) => {
+      const 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 t.visible ? e.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : e.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), s.size === "xs" ? e.push("sm:max-w-xs") : s.size === "sm" ? e.push("sm:max-w-sm") : s.size === "lg" ? e.push("sm:max-w-xl") : s.size === "xl" ? e.push("sm:max-w-3xl") : e.push("sm:max-w-lg"), e;
+    },
+    closeIcon: "!absolute top-2 z-10 right-2",
+    header: "text-lg pl-6 py-4 border-b pr-12",
+    content: "px-6 py-4",
+    actions: "bg-slate-50 dark:bg-gray-800 p-4 grid grid-flow-col gap-4",
+    label: "text-xs text-gray-500 mb-1",
+    title: "text-xl font-semibold mb-4",
+    description: "text-sm"
+  }
+}, l = a;
+export {
+  l as default
+};

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

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

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

@@ -0,0 +1,29 @@
+const a = {
+  classes: {
+    wrapper: "fixed z-40 inset-0 overflow-y-auto transition-all",
+    backdrop: ({ data: t }) => {
+      const e = ["fixed inset-0 bg-gray-500 dark:bg-black transition-opacity"];
+      return t.visible ? e.push("ease-out duration-200 opacity-70 dark:opacity-70") : e.push("ease-in duration-100 opacity-0"), e;
+    },
+    modal: ({ props: t, data: e }) => {
+      const s = ["relative flex flex-col z-10 bg-gray-200 dark:bg-gray-900 shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
+      return e.visible ? s.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : s.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), t.size === "xs" ? s.push("sm:max-w-xs") : t.size === "sm" ? s.push("sm:max-w-sm") : t.size === "lg" ? s.push("sm:max-w-xl") : t.size === "xl" ? s.push("sm:max-w-3xl") : s.push("sm:max-w-lg"), s;
+    },
+    closeIcon: "!absolute top-0 z-10 right-0",
+    header: "text-lg pl-4 pt-4 pr-12",
+    content: ({ props: t }) => {
+      const e = ["pb-8"];
+      return t.fluid || e.push("px-4"), e;
+    },
+    actions: ({ props: t, slots: e }) => {
+      const s = ["grid grid-flow-col gap-[1px]"];
+      return e["tertiary-action"] || e["cancel-action"] ? s.push("grid-cols-4") : s.push("grid-cols-2"), s;
+    },
+    label: "text-xs text-gray-500 mb-1",
+    title: "text-xl mb-4",
+    description: "text-sm mb-4"
+  }
+}, l = a;
+export {
+  l as default
+};

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

@@ -0,0 +1,143 @@
+import { type PropType, type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+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<NotificationInjection>;
+    };
+    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 type NotificationEvent = {
+    id?: number;
+    icon?: string;
+    action?: NotificationsAction;
+    iconColor?: string;
+    title?: string;
+    style?: string;
+    message?: string;
+    timeout?: number;
+    removable?: boolean;
+    align?: NotificationsAlign;
+    position?: NotificationsPosition;
+};
+export type NotificationInjection = {
+    log: (notification: NotificationEvent | string) => void;
+    info: (notification: NotificationEvent | string) => void;
+    warn: (notification: NotificationEvent | string) => void;
+    error: (notification: NotificationEvent | string) => void;
+    warning: (notification: NotificationEvent | string) => void;
+    success: (notification: NotificationEvent | string) => void;
+};
+type InternalClasses = 'wrapper' | 'list' | 'item';
+export interface NotificationsTheme extends ThemeComponent<NotificationsProps, InternalClasses> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    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<NotificationInjection>;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+}, {
+    log: (notification: NotificationEvent | string) => void;
+    info: (notification: NotificationEvent | string) => void;
+    success: (notification: NotificationEvent | string) => void;
+    warn: (notification: NotificationEvent | string) => void;
+    warning: (notification: NotificationEvent | string) => void;
+    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<"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<NotificationInjection>;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+}>>, {
+    removable: boolean;
+    color: string;
+    position: "top" | "bottom";
+    align: "left" | "right";
+    timeout: number;
+    injectKey: string | symbol;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};