@scalar/components 0.12.53 → 0.12.55

package/dist/components/ScalarModal/ScalarModal.vue2.js

@@ -1,15 +1,23 @@
-import { defineComponent as p, openBlock as t, createBlock as o, unref as a, withCtx as s, createElementVNode as x, normalizeClass as l, createVNode as h, normalizeStyle as v, createTextVNode as f, toDisplayString as u, createCommentVNode as b, createElementBlock as y, renderSlot as d, reactive as g } from "vue";
-import { Dialog as w, DialogPanel as z, DialogTitle as k, DialogDescription as C } from "@headlessui/vue";
-import { cva as i, cx as m } from "../../cva.js";
-const B = () => g({
-  open: !1,
-  show() {
-    this.open = !0;
-  },
-  hide() {
-    this.open = !1;
-  }
-}), W = /* @__PURE__ */ p({
+import { defineComponent as v, openBlock as l, createBlock as r, unref as a, withCtx as o, createElementVNode as x, normalizeClass as s, createVNode as i, normalizeStyle as b, createTextVNode as g, toDisplayString as y, createCommentVNode as d, createElementBlock as n, renderSlot as m, reactive as w } from "vue";
+import { Dialog as z, DialogPanel as k, DialogTitle as C, DialogDescription as D } from "@headlessui/vue";
+import { cva as c, cx as p } from "../../cva.js";
+import S from "../ScalarIconButton/ScalarIconButton.vue.js";
+const $ = {
+  key: 0,
+  class: "close-button z-10 fixed right-2 top-2"
+};
+function E() {
+  return w({
+    open: !1,
+    show() {
+      this.open = !0;
+    },
+    hide() {
+      this.open = !1;
+    }
+  });
+}
+const M = /* @__PURE__ */ v({
   __name: "ScalarModal",
   props: {
     state: {},
@@ -19,11 +27,11 @@ const B = () => g({
     size: { default: "md" },
     variant: {}
   },
-  setup(D) {
-    const n = i({
+  setup(N) {
+    const f = c({
       base: [
         "scalar-modal",
-        "col relative mx-auto mb-0 mt-20 w-[calc(100vw-16px)] rounded-lg bg-b-2 p-0 text-left leading-snug text-c-1 opacity-0 lg:w-[calc(100vw-32px)]"
+        "col relative mx-auto mb-0 w-[calc(100vw-16px)] rounded-lg bg-b-2 p-0 text-left leading-snug text-c-1 opacity-0 lg:w-[calc(100vw-32px)]"
       ].join(" "),
       variants: {
         size: {
@@ -31,9 +39,9 @@ const B = () => g({
           xs: "mt-20 max-w-screen-xs",
           sm: "mt-20 max-w-screen-sm",
           md: "mt-20 max-w-screen-md",
-          lg: "mt-10 max-w-screen-lg",
-          xl: "mt-2 max-w-screen-xl",
-          full: "mt-0 overflow-hidden"
+          lg: "m-auto max-w-screen-lg",
+          xl: "m-auto max-w-screen-xl",
+          full: "full-size-styles mt-0 overflow-hidden lg:w-full"
         },
         variant: {
           form: "scalar-modal-form",
@@ -41,7 +49,7 @@ const B = () => g({
           search: "scalar-modal-search"
         }
       }
-    }), c = i({
+    }), u = c({
       base: [
         "scalar-modal-body",
         "relative m-1 max-h-[calc(100dvh-240px)] rounded-lg bg-b-1 p-3"
@@ -58,19 +66,19 @@ const B = () => g({
           sm: "max-h-[calc(100dvh-240px)]",
           md: "max-h-[calc(100dvh-240px)]",
           lg: "max-h-[calc(100dvh-180px)]",
-          xl: "max-h-[calc(100dvh-120px)]",
-          full: "max-h-dvh"
+          xl: "m-0 max-h-[calc(100dvh-120px)] p-0",
+          full: "max-h-dvh rounded-none bg-transparent"
         }
       }
     });
-    return (e, r) => (t(), o(a(w), {
+    return (e, t) => (l(), r(a(z), {
       open: e.state.open,
-      onClose: r[0] || (r[0] = (N) => e.state.hide())
+      onClose: t[1] || (t[1] = (h) => e.state.hide())
     }, {
-      default: s(() => [
+      default: o(() => [
         x("div", {
-          class: l(
-            a(m)(
+          class: s(
+            a(p)(
               "scalar-modal-layout fixed left-0 top-0 flex items-start justify-center",
               "z-[1001] h-[100dvh] w-[100dvw]",
               "bg-backdrop opacity-0 dark:bg-backdropdark",
@@ -78,37 +86,45 @@ const B = () => g({
             )
           )
         }, [
-          h(a(z), {
-            class: l(a(n)({ size: e.size, variant: e.variant })),
-            style: v({ maxWidth: e.maxWidth })
+          i(a(k), {
+            class: s(a(f)({ size: e.size, variant: e.variant })),
+            style: b({ maxWidth: e.maxWidth })
           }, {
-            default: s(() => [
-              e.title ? (t(), o(a(k), {
+            default: o(() => [
+              e.title ? (l(), r(a(C), {
                 key: 0,
-                class: l(["scalar-modal-header m-0 -mb-1 rounded-lg p-3 text-left text-sm font-medium text-c-1", { "pb-0 pt-6": e.variant === "history" }])
+                class: s(["scalar-modal-header m-0 -mb-1 rounded-lg p-3 text-left text-sm font-medium text-c-1", { "pb-0 pt-6": e.variant === "history" }])
               }, {
-                default: s(() => [
-                  f(u(e.title), 1)
+                default: o(() => [
+                  g(y(e.title), 1)
                 ]),
                 _: 1
-              }, 8, ["class"])) : b("", !0),
-              e.size === "full" ? (t(), y("div", {
+              }, 8, ["class"])) : d("", !0),
+              e.size === "full" ? (l(), n("div", {
                 key: 1,
-                class: l(e.bodyClass)
+                class: s(e.bodyClass)
               }, [
-                d(e.$slots, "default", {}, void 0, !0)
-              ], 2)) : (t(), o(a(C), {
+                m(e.$slots, "default", {}, void 0, !0)
+              ], 2)) : (l(), r(a(D), {
                 key: 2,
-                class: l(a(m)(e.bodyClass, a(c)({ size: e.size, variant: e.variant })))
+                class: s(a(p)(e.bodyClass, a(u)({ size: e.size, variant: e.variant })))
               }, {
-                default: s(() => [
-                  d(e.$slots, "default", {}, void 0, !0)
+                default: o(() => [
+                  m(e.$slots, "default", {}, void 0, !0)
                 ]),
                 _: 3
               }, 8, ["class"]))
             ]),
             _: 3
-          }, 8, ["class", "style"])
+          }, 8, ["class", "style"]),
+          e.size === "full" ? (l(), n("div", $, [
+            i(a(S), {
+              class: "hover:bg-b-2 focus:outline-none",
+              icon: "Close",
+              label: "Clear Search",
+              onClose: t[0] || (t[0] = (h) => e.state.hide())
+            })
+          ])) : d("", !0)
         ], 2)
       ]),
       _: 3
@@ -116,6 +132,6 @@ const B = () => g({
   }
 });
 export {
-  W as default,
-  B as useModal
+  M as default,
+  E as useModal
 };