@indielayer/ui 1.3.0 → 1.5.0

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

@@ -1,5 +1,6 @@
 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: {
@@ -9,11 +10,41 @@ declare const modalProps: {
     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[];
+    };
+    persistent: BooleanConstructor;
 };
 export type ModalSize = typeof modalSize[number];
 export type ModalProps = ExtractPublicPropTypes<typeof modalProps>;
-type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'closeIcon' | 'header' | 'content' | 'actions';
-export interface ModalTheme extends ThemeComponent<ModalProps, InternalClasses> {
+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: {
@@ -23,10 +54,37 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     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[];
+    };
+    persistent: BooleanConstructor;
 }, {
     open: () => void;
     close: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, 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;
@@ -34,18 +92,59 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     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[];
+    };
+    persistent: BooleanConstructor;
 }>> & {
+    onSubmit?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     size: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+    loading: boolean;
     modelValue: boolean;
+    fluid: boolean;
     backdrop: boolean;
     showClose: boolean;
+    hasActions: boolean;
+    hasHeader: boolean;
+    isForm: boolean;
+    formDisabled: boolean;
+    formAutoValidate: boolean;
+    formErrors: [FormError[], FormError];
+    persistent: boolean;
 }, {}>, {
     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 & {

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

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

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

@@ -1,17 +1,23 @@
 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;
+    backdrop: ({ data: e }) => {
+      const t = ["fixed inset-0 bg-secondary-500 dark:bg-black transition-opacity"];
+      return e.visible ? t.push("ease-out duration-200 opacity-30 dark:opacity-70") : t.push("ease-in duration-100 opacity-0"), t;
     },
-    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",
+    modal: ({ props: e, data: t }) => {
+      const s = ["relative flex flex-col z-10 bg-white dark:bg-secondary-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
+      return t.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"), e.size === "xs" ? s.push("sm:max-w-xs") : e.size === "sm" ? s.push("sm:max-w-sm") : e.size === "lg" ? s.push("sm:max-w-xl") : e.size === "xl" ? s.push("sm:max-w-3xl") : s.push("sm:max-w-lg"), s;
+    },
+    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"
+    actions: ({ props: e, slots: t }) => ["flex gap-4 bg-secondary-50 dark:bg-secondary-800 p-4 justify-end"],
+    label: "text-xs text-secondary-500 mb-1",
+    title: "text-xl font-semibold",
+    description: "text-sm mb-8"
   }
-}, s = a;
+}, l = a;
 export {
-  s as default
+  l as default
 };

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

@@ -1,5 +1,29 @@
-import e from "./Modal.base.theme.js";
-const t = e, o = t;
+const a = {
+  classes: {
+    wrapper: "fixed z-40 inset-0 overflow-y-auto transition-all",
+    backdrop: ({ data: t }) => {
+      const e = ["fixed inset-0 bg-secondary-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-secondary-200 dark:bg-secondary-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-secondary-500 mb-1",
+    title: "text-xl mb-4",
+    description: "text-sm mb-4"
+  }
+}, l = a;
 export {
-  o as default
+  l as default
 };