@robuust-digital/vue-components 2.0.0-rc.3 → 2.0.0-rc.5

package/dist/_shared/Modal-CsI5mZlJ.js

@@ -0,0 +1,202 @@
+import { ref as g, computed as y, createBlock as x, openBlock as B, unref as t, withCtx as d, createVNode as n, withModifiers as D, createElementVNode as a, normalizeClass as E, renderSlot as u, createCommentVNode as L, createTextVNode as T, toDisplayString as h } from "vue";
+import { TransitionRoot as F, Dialog as I, TransitionChild as $, DialogPanel as N, DialogTitle as C } from "@headlessui/vue";
+import { _ as S } from "./ButtonBase-CQjlJ85F.js";
+import { r as w } from "./XMarkIcon-90mcPzBs.js";
+function R(l) {
+  const c = g(null), s = g(!1), v = y(() => l.as === "form"), b = y(() => `${l.id}-title`), m = y(() => `${l.id}-content`), f = y(() => {
+    var r;
+    return (r = c.value) == null ? void 0 : r.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+  });
+  return {
+    contentRef: c,
+    ready: s,
+    isForm: v,
+    titleId: b,
+    descriptionId: m,
+    initialFocusElement: f
+  };
+}
+const V = {
+  role: "presentation",
+  class: "fixed inset-0 z-10 w-screen overflow-y-auto"
+}, q = { class: "flex min-h-full justify-center p-4 items-center sm:p-0" }, z = { class: "rvc-modal-header" }, j = { class: "flex items-center justify-between" }, M = { class: "ml-3 flex h-7 items-center" }, A = ["id"], P = { class: "rvc-modal-footer" }, O = {
+  __name: "Modal",
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    },
+    id: {
+      type: String,
+      required: !0
+    },
+    title: {
+      type: String,
+      required: !0
+    },
+    showClose: {
+      type: Boolean
+    },
+    spinning: {
+      type: Boolean
+    },
+    submitLabel: {
+      type: String,
+      default: "Confirm"
+    },
+    cancelLabel: {
+      type: String,
+      default: "Cancel"
+    },
+    panelClass: {
+      type: String,
+      default: "sm:max-w-lg"
+    }
+  },
+  emits: ["modal:open", "modal:close", "modal:save", "modal:closed"],
+  setup(l, { emit: c }) {
+    const s = c, v = l, {
+      contentRef: b,
+      ready: m,
+      isForm: f,
+      titleId: r,
+      descriptionId: p,
+      initialFocusElement: k
+    } = R(v);
+    return (i, e) => (B(), x(t(F), { as: "template" }, {
+      default: d(() => [
+        n(t(I), {
+          as: l.as,
+          class: "rvc-modal",
+          static: "",
+          "aria-modal": "true",
+          role: "dialog",
+          "initial-focus": t(k),
+          "aria-labelledby": t(r),
+          onClose: e[6] || (e[6] = (o) => i.$emit("modal:close")),
+          onSubmit: e[7] || (e[7] = D((o) => s("modal:save", o), ["prevent"]))
+        }, {
+          default: d(() => [
+            n(t($), {
+              as: "template",
+              enter: "ease-out duration-300",
+              "enter-from": "opacity-0",
+              "enter-to": "opacity-100",
+              leave: "ease-in duration-200",
+              "leave-from": "opacity-100",
+              "leave-to": "opacity-0",
+              onBeforeEnter: e[0] || (e[0] = (o) => s("modal:open"))
+            }, {
+              default: d(() => e[8] || (e[8] = [
+                a("div", {
+                  "aria-hidden": "true",
+                  class: "fixed inset-0 transition-opacity rvc-modal-backdrop"
+                }, null, -1)
+              ])),
+              _: 1
+            }),
+            a("div", V, [
+              a("div", q, [
+                n(t($), {
+                  as: "template",
+                  enter: "ease-out duration-300",
+                  "enter-from": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+                  "enter-to": "opacity-100 translate-y-0 sm:scale-100",
+                  leave: "ease-in duration-200",
+                  "leave-from": "opacity-100 translate-y-0 sm:scale-100",
+                  "leave-to": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+                  onBeforeEnter: e[4] || (e[4] = (o) => m.value = !0),
+                  onAfterLeave: e[5] || (e[5] = (o) => (m.value = !1, s("modal:closed")))
+                }, {
+                  default: d(() => [
+                    n(t(N), {
+                      class: E(["rvc-modal-panel", l.panelClass]),
+                      "aria-busy": l.spinning,
+                      "aria-describedby": t(p)
+                    }, {
+                      default: d(() => [
+                        a("header", z, [
+                          u(i.$slots, "header", { title: l.title }, () => [
+                            a("div", j, [
+                              u(i.$slots, "title", {
+                                id: t(r),
+                                dialogTitle: t(C),
+                                title: l.title
+                              }, () => [
+                                n(t(C), {
+                                  id: t(r),
+                                  class: "rvc-modal-title"
+                                }, {
+                                  default: d(() => [
+                                    T(h(l.title), 1)
+                                  ]),
+                                  _: 1
+                                }, 8, ["id"])
+                              ]),
+                              l.showClose ? u(i.$slots, "close", {
+                                key: 0,
+                                icon: t(w),
+                                emitClose: () => s("drawer:close")
+                              }, () => [
+                                a("div", M, [
+                                  a("button", {
+                                    type: "button",
+                                    class: "relative rvc-modal-close",
+                                    "aria-label": "Close panel",
+                                    onClick: e[1] || (e[1] = (o) => s("modal:close"))
+                                  }, [
+                                    n(t(w), {
+                                      class: "size-full",
+                                      "aria-hidden": "true"
+                                    })
+                                  ])
+                                ])
+                              ]) : L("", !0)
+                            ])
+                          ])
+                        ]),
+                        a("div", {
+                          id: t(p),
+                          ref_key: "contentRef",
+                          ref: b,
+                          class: "rvc-modal-content"
+                        }, [
+                          u(i.$slots, "default", { ready: t(m) })
+                        ], 8, A),
+                        a("footer", P, [
+                          u(i.$slots, "footer", { loading: l.spinning }, () => [
+                            n(S, {
+                              type: t(f) ? "submit" : "button",
+                              label: l.submitLabel,
+                              spinning: l.spinning,
+                              disabled: l.spinning,
+                              onClick: e[2] || (e[2] = (o) => !t(f) && i.$emit("modal:save"))
+                            }, null, 8, ["type", "label", "spinning", "disabled"]),
+                            n(S, {
+                              type: "button",
+                              color: "light",
+                              label: l.cancelLabel,
+                              onClick: e[3] || (e[3] = (o) => i.$emit("modal:close"))
+                            }, null, 8, ["label"])
+                          ])
+                        ])
+                      ]),
+                      _: 3
+                    }, 8, ["class", "aria-busy", "aria-describedby"])
+                  ]),
+                  _: 3
+                })
+              ])
+            ])
+          ]),
+          _: 3
+        }, 8, ["as", "initial-focus", "aria-labelledby"])
+      ]),
+      _: 3
+    }));
+  }
+};
+export {
+  O as _,
+  R as u
+};