@indielayer/ui 1.6.2 → 1.7.0

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

@@ -1,7 +1,13 @@
+<script setup lang="ts">
+function onChange(expanded: boolean) {
+  console.log(expanded)
+}
+</script>
+
 <template>
   <div class="space-y-8">
     <x-accordion>
-      <x-accordion-item>
+      <x-accordion-item @change="onChange">
         Hey
         <template #content>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti veritatis unde natus esse minima, quibusdam nesciunt atque id assumenda inventore numquam vel consectetur est illum ratione perferendis optio architecto sapiente fuga et commodi harum ea? Error doloribus illum tempora obcaecati quam voluptatum cumque magnam nemo, perspiciatis quas mollitia. Aliquid nulla corrupti sit mollitia dolor sequi nobis eveniet cumque cupiditate perspiciatis magnam laudantium in ducimus fuga quaerat, ipsam assumenda consequatur obcaecati atque? Sint asperiores labore quidem minima modi odio autem rerum eligendi, quisquam incidunt quae enim eos vitae dolores praesentium debitis, consequatur fuga hic nostrum, dolorem dicta quod ea assumenda. Expedita.

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

@@ -11,12 +11,9 @@ date.value = [startDate, endDate]
 <template>
   <x-datepicker
     v-model="date"
-    label="Select a date"
-    helper="Pick a date"
+    label="Date"
     tooltip="Use it to pick a date"
-    range
     multi-calendars
-    disable-year-select
-    :enable-time-picker="false"
+    range
   />
 </template>

package/lib/components/accordion/AccordionItem.vue.d.ts

@@ -47,7 +47,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     toggle: () => void;
     open: (anim?: boolean) => void;
     close: (anim?: boolean) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "expand"[], "expand", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "expand")[], "change" | "expand", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
@@ -64,6 +64,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
 }>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
     onExpand?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
@@ -73,11 +74,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     iconAlign: "left" | "right";
 }, {}>, {
     default?(_: {
+        expand: (anim?: boolean) => void;
+        collapsed: boolean;
+    }): any;
+    summary?(_: {
+        expand: (anim?: boolean) => void;
         collapsed: boolean;
     }): any;
-    summary?(_: {}): any;
     content?(_: {
-        expand: ((...args: any[]) => any) & ((anim?: boolean) => void);
+        expand: (anim?: boolean) => void;
         collapsed: boolean;
     }): any;
 }>;

package/lib/components/accordion/AccordionItem.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as V, inject as j, computed as z, reactive as D, ref as m, watch as H, openBlock as a, createBlock as v, resolveDynamicComponent as K, normalizeStyle as M, unref as s, normalizeClass as l, withCtx as h, createElementVNode as r, renderSlot as d, createElementBlock as g, createCommentVNode as y, createVNode as X, Transition as q, withDirectives as F, vShow as G } from "vue";
+import { defineComponent as j, inject as z, computed as D, reactive as H, ref as h, watch as g, openBlock as s, createBlock as y, resolveDynamicComponent as F, normalizeStyle as K, unref as a, normalizeClass as l, withCtx as A, createElementVNode as r, renderSlot as u, createElementBlock as x, createCommentVNode as _, createVNode as M, Transition as X, withDirectives as q, vShow as G } from "vue";
 import { useTheme as J } from "../../composables/useTheme.js";
 import O from "../icon/Icon.vue.js";
 import { injectAccordionKey as Q } from "../../composables/keys.js";
@@ -27,106 +27,115 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
     type: String,
     default: "right"
   }
-}, te = {
+}, oe = {
   name: "XAccordionItem",
   validators: {
     iconAlign: Z
   }
-}, ae = /* @__PURE__ */ V({
-  ...te,
+}, se = /* @__PURE__ */ j({
+  ...oe,
   props: ee,
-  emits: ["expand"],
-  setup(A, { expose: x, emit: _ }) {
-    const n = A, k = _, u = j(Q, {
+  emits: ["expand", "change"],
+  setup(k, { expose: w, emit: I }) {
+    const i = k, p = I, f = z(Q, {
       isInsideAccordion: !1
-    }), w = z(() => u.iconAlign || n.iconAlign), I = D({
-      iconAlign: w
-    }), t = m(!n.expanded), o = m(!0);
-    H(() => n.expanded, () => {
-      t.value = !n.expanded;
+    }), B = D(() => f.iconAlign || i.iconAlign), b = H({
+      iconAlign: B
+    }), o = h(!i.expanded), t = h(!0);
+    g(() => i.expanded, () => {
+      o.value = !i.expanded;
+    }), g(o, (e, n) => {
+      p("change", !e);
     });
-    function B(e) {
-      o.value && (e.style.height = "0px");
+    function C(e) {
+      t.value && (e.style.height = "0px");
     }
-    function E(e, i) {
-      o.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
+    function E(e, n) {
+      t.value ? (e.addEventListener("transitionend", n), setTimeout(() => {
         e.style.height = `${e.scrollHeight}px`;
-      }, 1)) : i();
+      }, 1)) : n();
     }
-    function b(e) {
-      o.value ? e.style.removeProperty("height") : o.value = !0;
+    function $(e) {
+      t.value ? e.style.removeProperty("height") : t.value = !0;
     }
-    function C(e) {
-      o.value && (e.style.height = `${e.scrollHeight}px`);
+    function S(e) {
+      t.value && (e.style.height = `${e.scrollHeight}px`);
     }
-    function $(e, i) {
-      o.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
+    function L(e, n) {
+      t.value ? (e.addEventListener("transitionend", n), setTimeout(() => {
         e.style.height = "0px";
-      }, 1)) : i();
+      }, 1)) : n();
     }
-    function S(e) {
-      o.value ? e.style.removeProperty("height") : o.value = !0;
+    function P(e) {
+      t.value ? e.style.removeProperty("height") : t.value = !0;
     }
-    function p(e = !0) {
-      o.value = e, t.value = !1;
+    function m(e = !0) {
+      t.value = e, o.value = !1;
     }
-    function L(e = !0) {
-      o.value = e, t.value = !0;
+    function N(e = !0) {
+      t.value = e, o.value = !0;
     }
-    function f() {
-      n.disabled || (t.value = !t.value);
+    function v() {
+      i.disabled || (o.value = !o.value);
     }
-    function P(e = !0) {
-      p(e), k("expand");
+    function c(e = !0) {
+      m(e), p("expand");
     }
-    const { styles: N, classes: c, className: T } = J("AccordionItem", {}, {
-      ...n,
-      ...I
-    }, { collapsed: t, isInsideAccordion: u.isInsideAccordion });
-    return x({ toggle: f, open: p, close: L }), (e, i) => (a(), v(K(e.tag), {
-      style: M(s(N)),
-      class: l(s(T)),
+    const { styles: T, classes: d, className: V } = J("AccordionItem", {}, {
+      ...i,
+      ...b
+    }, { collapsed: o, isInsideAccordion: f.isInsideAccordion });
+    return w({ toggle: v, open: m, close: N }), (e, n) => (s(), y(F(e.tag), {
+      style: K(a(T)),
+      class: l(a(V)),
       "aria-disabled": e.disabled,
-      "aria-expanded": t.value ? "false" : "true"
+      "aria-expanded": o.value ? "false" : "true"
     }, {
-      default: h(() => [
+      default: A(() => [
         r("button", {
           type: "button",
-          class: l(s(c).wrapper),
-          onClick: f
+          class: l(a(d).wrapper),
+          onClick: v
         }, [
           r("div", R, [
-            d(e.$slots, "default", { collapsed: t.value })
+            u(e.$slots, "default", {
+              expand: c,
+              collapsed: o.value
+            })
           ]),
-          e.showIcon ? (a(), g("div", {
+          e.showIcon ? (s(), x("div", {
             key: 0,
-            class: l(s(c).icon)
+            class: l(a(d).icon)
           }, [
-            e.icon ? (a(), v(O, {
+            e.icon ? (s(), y(O, {
               key: 0,
               icon: e.icon
-            }, null, 8, ["icon"])) : (a(), g("svg", U, Y))
-          ], 2)) : y("", !0)
+            }, null, 8, ["icon"])) : (s(), x("svg", U, Y))
+          ], 2)) : _("", !0)
         ], 2),
-        e.$slots.summary ? d(e.$slots, "summary", { key: 0 }) : y("", !0),
-        X(q, {
-          onBeforeEnter: B,
+        e.$slots.summary ? u(e.$slots, "summary", {
+          key: 0,
+          expand: c,
+          collapsed: o.value
+        }) : _("", !0),
+        M(X, {
+          onBeforeEnter: C,
           onEnter: E,
-          onAfterEnter: b,
-          onBeforeLeave: C,
-          onLeave: $,
-          onAfterLeave: S
+          onAfterEnter: $,
+          onBeforeLeave: S,
+          onLeave: L,
+          onAfterLeave: P
         }, {
-          default: h(() => [
-            F(r("div", {
-              class: l(s(c).content)
+          default: A(() => [
+            q(r("div", {
+              class: l(a(d).content)
             }, [
-              d(e.$slots, "content", {
-                expand: P,
-                collapsed: t.value
+              u(e.$slots, "content", {
+                expand: c,
+                collapsed: o.value
               })
             ], 2), [
-              [G, !t.value]
+              [G, !o.value]
             ])
           ]),
           _: 3
@@ -137,5 +146,5 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
   }
 });
 export {
-  ae as default
+  se as default
 };

package/lib/components/accordion/theme/AccordionItem.base.theme.js

@@ -2,7 +2,7 @@ const i = {
   classes: {
     wrapper: ({ props: t, slots: r, data: e }) => {
       const s = ["relative flex items-center w-full text-left rounded"];
-      return e.isInsideAccordion && (r.default && (t.iconAlign === "left" ? s.push("pl-8 pr-4") : s.push("pr-8 pl-4"), s.push("py-2"), t.disabled || s.push("hover:bg-secondary-100 dark:hover:bg-secondary-600")), t.disabled || s.push("cursor-pointer")), s;
+      return e.isInsideAccordion && (r.default && (t.iconAlign === "left" ? s.push("pl-8 pr-3") : s.push("pr-8 pl-3"), s.push("py-2"), t.disabled || s.push("hover:bg-secondary-100 dark:hover:bg-secondary-600")), t.disabled || s.push("cursor-pointer")), s;
     },
     icon: ({ props: t, data: r }) => {
       const e = ["absolute flex transform transition-transform duration-150"];

package/lib/components/datepicker/Datepicker.vue.d.ts

@@ -87,6 +87,7 @@ declare const datepickerProps: {
             day?: (({ value }: {
                 value: Date;
             }) => string) | undefined;
+            weekDay?: ((day: number) => string) | undefined;
         } | undefined>>;
         default: () => {};
     };
@@ -99,7 +100,13 @@ declare const datepickerProps: {
         default: () => never[];
     };
     timezone: {
-        type: PropType<string | undefined>;
+        type: PropType<string | {
+            timezone?: string | undefined;
+            exactMatch?: boolean | undefined;
+            dateInTz?: string | undefined;
+            emitTimezone?: string | undefined;
+            convertModel?: boolean | undefined;
+        } | undefined>;
         default: null;
     };
     emitTimezone: {
@@ -646,6 +653,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
             day?: (({ value }: {
                 value: Date;
             }) => string) | undefined;
+            weekDay?: ((day: number) => string) | undefined;
         } | undefined>>;
         default: () => {};
     };
@@ -658,7 +666,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: () => never[];
     };
     timezone: {
-        type: PropType<string | undefined>;
+        type: PropType<string | {
+            timezone?: string | undefined;
+            exactMatch?: boolean | undefined;
+            dateInTz?: string | undefined;
+            emitTimezone?: string | undefined;
+            convertModel?: boolean | undefined;
+        } | undefined>;
         default: null;
     };
     emitTimezone: {
@@ -1204,6 +1218,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
             day?: (({ value }: {
                 value: Date;
             }) => string) | undefined;
+            weekDay?: ((day: number) => string) | undefined;
         } | undefined>>;
         default: () => {};
     };
@@ -1216,7 +1231,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: () => never[];
     };
     timezone: {
-        type: PropType<string | undefined>;
+        type: PropType<string | {
+            timezone?: string | undefined;
+            exactMatch?: boolean | undefined;
+            dateInTz?: string | undefined;
+            emitTimezone?: string | undefined;
+            convertModel?: boolean | undefined;
+        } | undefined>;
         default: null;
     };
     emitTimezone: {
@@ -1731,10 +1752,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         day?: (({ value }: {
             value: Date;
         }) => string) | undefined;
+        weekDay?: ((day: number) => string) | undefined;
     } | undefined>;
     hideNavigation: ("month" | "year" | "calendar" | "time" | "minutes" | "hours" | "seconds")[] | undefined;
     calendar: ((weeks: import("@vuepic/vue-datepicker").CalendarWeek[]) => import("@vuepic/vue-datepicker").CalendarWeek[]) | undefined;
-    timezone: string | undefined;
+    timezone: string | {
+        timezone?: string | undefined;
+        exactMatch?: boolean | undefined;
+        dateInTz?: string | undefined;
+        emitTimezone?: string | undefined;
+        convertModel?: boolean | undefined;
+    } | undefined;
     disabledDates: string[] | Date[] | ((date: Date) => boolean) | undefined;
     startTime: import("@vuepic/vue-datepicker").PartialTimeObj | import("@vuepic/vue-datepicker").PartialTimeObj[] | undefined;
     markers: import("@vuepic/vue-datepicker").DatePickerMarker[] | undefined;

package/lib/components/datepicker/Datepicker.vue.js

@@ -5,8 +5,8 @@ import { useInputtable as m } from "../../composables/useInputtable.js";
 import { useInteractive as G } from "../../composables/useInteractive.js";
 import { useTheme as Y } from "../../composables/useTheme.js";
 import W from "../input/Input.vue.js";
-import E from "../../node_modules/.pnpm/@vuepic_vue-datepicker@8.0.0_vue@3.3.9/node_modules/@vuepic/vue-datepicker/dist/vue-datepicker.js";
-import "../../node_modules/.pnpm/@vuepic_vue-datepicker@8.0.0_vue@3.3.9/node_modules/@vuepic/vue-datepicker/dist/main.css.js";
+import E from "../../node_modules/.pnpm/@vuepic_vue-datepicker@8.3.2_vue@3.3.9/node_modules/@vuepic/vue-datepicker/dist/vue-datepicker.js";
+import "../../node_modules/.pnpm/@vuepic_vue-datepicker@8.3.2_vue@3.3.9/node_modules/@vuepic/vue-datepicker/dist/main.css.js";
 const K = {
   multiCalendars: { type: [Boolean, Number, String, Object], default: void 0 },
   modelValue: { type: [String, Date, Array, Object, Number], default: null },
@@ -100,7 +100,7 @@ const K = {
   maxTime: { type: Object, default: null },
   placeholder: { type: String, default: "" },
   hideInputIcon: { type: Boolean, default: !1 },
-  clearable: { type: Boolean, default: !0 },
+  clearable: { type: Boolean, default: !1 },
   state: { type: Boolean, default: null },
   required: { type: Boolean, default: !1 },
   autocomplete: { type: String, default: "off" },
@@ -285,6 +285,7 @@ const K = {
         config: e.config,
         "quarter-picker": e.quarterPicker,
         "year-first": e.yearFirst,
+        "is-24": e.is24,
         "onUpdate:modelValue": b
       }, {
         "dp-input": d(({ value: B, onEnter: N, onTab: O }) => [
@@ -319,7 +320,7 @@ const K = {
           ]), 1032, ["model-value", "label", "size", "disabled", "helper", "loading", "name", "rules", "tooltip", "placeholder", "required", "hide-footer", "onKeydown"])
         ]),
         _: 3
-      }, 8, ["model-value", "multi-calendars", "model-type", "position", "dark", "format", "auto-position", "alt-position", "transitions", "format-locale", "utc", "aria-labels", "offset", "hide-navigation", "timezone", "emit-timezone", "vertical", "disable-month-year-select", "disable-year-select", "menu-class-name", "day-class", "year-range", "calendar-cell-class-name", "enable-time-picker", "auto-apply", "disabled-dates", "month-name-format", "start-date", "start-time", "hide-offset-dates", "auto-range", "no-today", "disabled-week-days", "allowed-dates", "now-button-label", "markers", "esc-close", "space-confirm", "month-change-on-arrows", "preset-dates", "flow", "partial-flow", "prevent-min-max-navigation", "min-range", "max-range", "multi-dates-limit", "reverse-years", "week-picker", "filters", "arrow-navigation", "disable-time-range-validation", "highlight", "teleport", "teleport-center", "locale", "week-num-name", "week-start", "week-numbers", "calendar-class-name", "month-change-on-scroll", "day-names", "month-picker", "custom-props", "year-picker", "model-auto", "select-text", "cancel-text", "preview-format", "multi-dates", "partial-range", "ignore-time-validation", "min-date", "max-date", "placeholder", "hide-input-icon", "clearable", "state", "required", "autocomplete", "input-class-name", "fixed-start", "fixed-end", "time-picker", "enable-seconds", "no-hours-overlay", "no-minutes-overlay", "no-seconds-overlay", "hours-grid-increment", "minutes-grid-increment", "seconds-grid-increment", "hours-increment", "minutes-increment", "seconds-increment", "range", "uid", "inline", "text-input", "no-disabled-range", "six-weeks", "action-row", "focus-start-date", "disabled-times", "show-last-in-range", "time-picker-inline", "calendar", "config", "quarter-picker", "year-first"])
+      }, 8, ["model-value", "multi-calendars", "model-type", "position", "dark", "format", "auto-position", "alt-position", "transitions", "format-locale", "utc", "aria-labels", "offset", "hide-navigation", "timezone", "emit-timezone", "vertical", "disable-month-year-select", "disable-year-select", "menu-class-name", "day-class", "year-range", "calendar-cell-class-name", "enable-time-picker", "auto-apply", "disabled-dates", "month-name-format", "start-date", "start-time", "hide-offset-dates", "auto-range", "no-today", "disabled-week-days", "allowed-dates", "now-button-label", "markers", "esc-close", "space-confirm", "month-change-on-arrows", "preset-dates", "flow", "partial-flow", "prevent-min-max-navigation", "min-range", "max-range", "multi-dates-limit", "reverse-years", "week-picker", "filters", "arrow-navigation", "disable-time-range-validation", "highlight", "teleport", "teleport-center", "locale", "week-num-name", "week-start", "week-numbers", "calendar-class-name", "month-change-on-scroll", "day-names", "month-picker", "custom-props", "year-picker", "model-auto", "select-text", "cancel-text", "preview-format", "multi-dates", "partial-range", "ignore-time-validation", "min-date", "max-date", "placeholder", "hide-input-icon", "clearable", "state", "required", "autocomplete", "input-class-name", "fixed-start", "fixed-end", "time-picker", "enable-seconds", "no-hours-overlay", "no-minutes-overlay", "no-seconds-overlay", "hours-grid-increment", "minutes-grid-increment", "seconds-grid-increment", "hours-increment", "minutes-increment", "seconds-increment", "range", "uid", "inline", "text-input", "no-disabled-range", "six-weeks", "action-row", "focus-start-date", "disabled-times", "show-last-in-range", "time-picker-inline", "calendar", "config", "quarter-picker", "year-first", "is-24"])
     ], 6));
   }
 });

package/lib/components/form/Form.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as E, provide as I, onMounted as S, watch as $, nextTick as A, openBlock as c, createElementBlock as m, normalizeStyle as C, unref as i, normalizeClass as n, renderSlot as r, toDisplayString as p, createCommentVNode as f, createElementVNode as y } from "vue";
+import { defineComponent as E, provide as I, onMounted as S, watch as $, nextTick as A, openBlock as c, createElementBlock as m, normalizeStyle as C, unref as i, normalizeClass as a, renderSlot as r, toDisplayString as p, createCommentVNode as f, createElementVNode as y } from "vue";
 import { injectFormKey as N } from "../../composables/keys.js";
 import { useTheme as T } from "../../composables/useTheme.js";
 const j = {
@@ -66,12 +66,12 @@ const j = {
       e.preventDefault(), e.stopPropagation();
       const t = l.autoValidate ? g() : !0;
       F("submit", t);
-    }, { styles: k, classes: a, className: v } = T("Form", {}, l);
+    }, { styles: k, classes: n, className: v } = T("Form", {}, l);
     return (e, t) => (c(), m("form", {
       style: C(i(k)),
-      class: n([
+      class: a([
         i(v),
-        i(a).wrapper
+        i(n).wrapper
       ]),
       onSubmit: V
     }, [
@@ -79,23 +79,23 @@ const j = {
         e.title || e.description ? (c(), m("div", j, [
           e.title ? (c(), m("p", {
             key: 0,
-            class: n(i(a).title)
+            class: a(i(n).title)
           }, p(e.title), 3)) : f("", !0),
           e.description ? (c(), m("p", {
             key: 1,
-            class: n(i(a).description)
+            class: a(i(n).description)
           }, p(e.description), 3)) : f("", !0)
         ])) : f("", !0)
       ]),
       y("fieldset", {
         disabled: e.disabled,
-        class: n(i(a).content)
+        class: a([i(n).content, "contents"])
       }, [
         r(e.$slots, "default")
       ], 10, w),
       e.hasFooter ? r(e.$slots, "footer", { key: 0 }, () => [
         y("div", {
-          class: n(i(a).footer)
+          class: a(i(n).footer)
         }, [
           r(e.$slots, "primary-action"),
           r(e.$slots, "secondary-action")

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

@@ -55,16 +55,16 @@ const _ = { key: 0 }, x = ["xs", "sm", "md", "lg", "xl", "full"], ee = ["top", "
     size: x,
     position: ee
   }
-}, ce = /* @__PURE__ */ X({
+}, me = /* @__PURE__ */ X({
   ...te,
   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 c;
+    let m;
     g(u, (e) => {
-      c && (c(), c = void 0), e && setTimeout(() => {
-        c = L(y, F, {
+      m && (m(), m = void 0), e && setTimeout(() => {
+        m = L(y, F, {
           ignore: [".v-popper__popper"]
         });
       });
@@ -75,12 +75,12 @@ const _ = { key: 0 }, x = ["xs", "sm", "md", "lg", "xl", "full"], ee = ["top", "
     }
     typeof window < "u" && q(document, "keydown", A);
     function A(e) {
-      e.key === "Escape" && u.value && !n.persistent && m();
+      e.key === "Escape" && u.value && !n.persistent && c();
     }
     function F() {
-      n.persistent || m();
+      n.persistent || c();
     }
-    function m() {
+    function c() {
       d.value = !1, setTimeout(() => {
         b("update:modelValue", !1);
       }, 150);
@@ -91,7 +91,7 @@ const _ = { key: 0 }, x = ["xs", "sm", "md", "lg", "xl", "full"], ee = ["top", "
     const k = H(), R = I(() => !!(k["tertiary-action"] || k["cancel-action"])), { styles: N, classes: l, className: P } = G("Modal", {}, n, {
       visible: d
     });
-    return V({ open: O, close: m }), (e, h) => (t(), p(M, { to: "body" }, [
+    return V({ open: O, close: c }), (e, h) => (t(), p(M, { to: "body" }, [
       u.value ? (t(), r("div", {
         key: 0,
         ref_key: "modalWrapperRef",
@@ -113,12 +113,12 @@ const _ = { key: 0 }, x = ["xs", "sm", "md", "lg", "xl", "full"], ee = ["top", "
           (t(), p(K(e.isForm ? Z : "div"), {
             ref_key: "modalRef",
             ref: y,
+            class: a(["max-h-full", o(l).modal]),
             disabled: e.formDisabled,
             "auto-validate": e.formAutoValidate,
             title: e.formTitle,
             description: e.formDescription,
             errors: e.formErrors,
-            class: a(o(l).modal),
             "auto-focus": "",
             "has-footer": !1,
             role: "dialog",
@@ -170,7 +170,7 @@ const _ = { key: 0 }, x = ["xs", "sm", "md", "lg", "xl", "full"], ee = ["top", "
                 tabindex: "-1",
                 icon: o(Q),
                 class: a(o(l).closeIcon),
-                onClick: m
+                onClick: c
               }, null, 8, ["icon", "class"])) : s("", !0),
               i(e.$slots, "footer", {}, () => [
                 e.hasActions ? (t(), r("div", {
@@ -195,5 +195,5 @@ const _ = { key: 0 }, x = ["xs", "sm", "md", "lg", "xl", "full"], ee = ["top", "
   }
 });
 export {
-  ce as default
+  me as default
 };

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

@@ -7,7 +7,7 @@ const a = {
     },
     modalWrapper: ({ props: e }) => {
       const s = ["flex justify-center p-4 sm:p-8 md:py-20 h-screen"];
-      return e.position === "top" ? s.push("items-start") : e.position === "bottom" ? s.push("items-end") : s.push("sm:items-end items-center"), s;
+      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"];