@indielayer/ui 1.7.2 → 1.7.4

package/docs/pages/component/modal/composed.vue

@@ -33,6 +33,7 @@ function onSubmit(isValid: boolean) {
     show-close
     backdrop
     is-form
+    size="full"
     title="Modal title"
     label="Modal label"
     description="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente, fugit."

package/docs/pages/component/modal/usage.vue

@@ -7,13 +7,16 @@ const show3 = ref(false)
 </script>
 
 <template>
-  <x-modal v-model="show" show-close backdrop>
+  <x-modal
+    v-model="show"
+    title="Header"
+    show-close
+    backdrop
+    size="sm"
+  >
     <template #image>
       <x-image src="https://images.unsplash.com/photo-1543352634-99a5d50ae78e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" alt=""/>
     </template>
-    <template #header>
-      Modal Header
-    </template>
 
     <div>
       Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure praesentium non id dolores vitae. Nam ratione veritatis ab cumque voluptas porro illum, voluptate perferendis ducimus dolorem optio magni assumenda dolore! Doloremque facere aliquid facilis distinctio accusamus, dolorum eligendi consequuntur molestias sapiente non rem vero sed eos minus itaque sunt officiis iste ea repellendus possimus earum maiores? Quo laudantium fuga odit tenetur sint fugit deleniti dolores placeat, accusamus magni consectetur unde totam sunt labore dolor rem consequatur quaerat! Iure temporibus voluptatem cumque, dolore maiores rerum neque vero, iusto veritatis repellat eligendi amet! Molestiae cumque officiis eius harum iste, fuga corporis molestias.
@@ -21,7 +24,7 @@ const show3 = ref(false)
 
     <template #actions>
       <div class="text-right space-x-4">
-        <x-button>Cancel</x-button>
+        <x-button @click="show = false">Cancel</x-button>
         <x-button color="success">Confirm</x-button>
       </div>
     </template>
@@ -46,7 +49,7 @@ const show3 = ref(false)
     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure praesentium non id dolores vitae. Nam ratione veritatis ab cumque voluptas porro illum, voluptate perferendis ducimus dolorem optio magni assumenda dolore! Doloremque facere aliquid facilis distinctio accusamus, dolorum eligendi consequuntur molestias sapiente non rem vero sed eos minus itaque sunt officiis iste ea repellendus possimus earum maiores? Quo laudantium fuga odit tenetur sint fugit deleniti dolores placeat, accusamus magni consectetur unde totam sunt labore dolor rem consequatur quaerat! Iure temporibus voluptatem cumque, dolore maiores rerum neque vero, iusto veritatis repellat eligendi amet! Molestiae cumque officiis eius harum iste, fuga corporis molestias.
 
     <template #actions>
-      <x-button>Cancel</x-button>
+      <x-button @click="show2 = false">Cancel</x-button>
       <x-button color="success">Confirm</x-button>
     </template>
   </x-modal>

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

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

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

@@ -6,12 +6,12 @@ const a = {
       return e.visible ? s.push("ease-out duration-200 opacity-30 dark:opacity-70") : s.push("ease-in duration-100 opacity-0"), s;
     },
     modalWrapper: ({ props: e }) => {
-      const s = ["flex justify-center p-4 sm:p-8 md:py-20 h-screen"];
+      const s = ["flex justify-center p-4 sm:p-8 h-screen"];
       return e.position === "top" ? s.push("items-start") : e.position === "bottom" ? s.push("items-end") : s.push("items-end sm:items-center"), s;
     },
     modal: ({ props: e, data: s }) => {
       const t = ["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 s.visible ? t.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : t.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), e.size === "xs" ? t.push("sm:max-w-xs") : e.size === "sm" ? t.push("sm:max-w-sm") : e.size === "md" ? t.push("sm:max-w-lg") : e.size === "lg" ? t.push("sm:max-w-3xl") : e.size === "xl" && t.push("sm:max-w-6xl"), t;
+      return s.visible ? t.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : t.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), e.size === "xs" ? t.push("sm:max-w-xs") : e.size === "sm" ? t.push("sm:max-w-sm") : e.size === "md" ? t.push("sm:max-w-lg") : e.size === "lg" ? t.push("sm:max-w-3xl") : e.size === "xl" ? t.push("sm:max-w-6xl") : e.size === "full" && t.push("h-full"), t;
     },
     closeIcon: "!absolute top-2 z-10 right-2",
     header: "text-lg pl-6 py-4 border-b pr-12",
@@ -21,7 +21,7 @@ const a = {
     title: "text-xl font-semibold",
     description: "text-sm mb-8"
   }
-}, i = a;
+}, l = a;
 export {
-  i as default
+  l as default
 };

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

@@ -1,29 +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-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;
+    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-70 dark:opacity-70") : t.push("ease-in duration-100 opacity-0"), t;
     },
-    modal: ({ props: t, data: e }) => {
+    modal: ({ props: e, data: t }) => {
       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 === "md" ? s.push("sm:max-w-lg") : t.size === "lg" ? s.push("sm:max-w-3xl") : t.size === "xl" && s.push("sm:max-w-6xl"), s;
+      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 === "md" ? s.push("sm:max-w-lg") : e.size === "lg" ? s.push("sm:max-w-3xl") : e.size === "xl" ? s.push("sm:max-w-6xl") : e.size === "full" && s.push("h-full"), 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;
+    content: ({ props: e }) => {
+      const t = ["pb-8"];
+      return e.fluid || t.push("px-4"), t;
     },
-    actions: ({ props: t, slots: e }) => {
+    actions: ({ props: e, slots: t }) => {
       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;
+      return t["tertiary-action"] || t["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"
   }
-}, i = a;
+}, l = a;
 export {
-  i as default
+  l as default
 };