@stachelock/ui 0.8.2 → 0.8.4

package/dist/UiSlideOver.vue_vue_type_script_setup_true_lang-CjSduy9N.js

@@ -0,0 +1,191 @@
+import { defineComponent as T, ref as y, computed as r, createBlock as p, openBlock as i, unref as l, withCtx as o, createVNode as u, createCommentVNode as f, createElementVNode as e, normalizeClass as d, normalizeStyle as E, createElementBlock as g, renderSlot as x, createTextVNode as R, toDisplayString as D } from "vue";
+import { TransitionRoot as N, Dialog as $, TransitionChild as b, DialogPanel as q, DialogTitle as A } from "@headlessui/vue";
+import { XMarkIcon as L } from "@heroicons/vue/24/outline";
+const M = { class: "sl-fixed sl-inset-0 sl-overflow-hidden" }, F = { class: "sl-absolute sl-inset-0 sl-overflow-hidden" }, P = { class: "sl-flex sl-items-center sl-justify-between sl-gap-3" }, j = { class: "sl-flex-1 sl-min-w-0" }, I = {
+  key: 0,
+  class: "sl-flex sl-h-7 sl-items-center"
+}, O = "sl-transform sl-transition sl-ease-in-out sl-duration-500 sm:sl-duration-700", U = "sl-transform sl-transition sl-ease-in-out sl-duration-500 sm:sl-duration-700", X = "sl-translate-x-0", G = "sl-translate-x-0", Q = /* @__PURE__ */ T({
+  __name: "UiSlideOver",
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: !0
+    },
+    position: {
+      type: String,
+      default: "right",
+      validator: (s) => ["left", "right"].includes(s)
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator: (s) => ["sm", "md", "lg", "xl", "2xl", "full"].includes(s)
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    showBackdrop: {
+      type: Boolean,
+      default: !0
+    },
+    preventAutoClose: {
+      type: Boolean,
+      default: !1
+    },
+    compact: {
+      type: Boolean,
+      default: !1
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["update:modelValue", "close", "close-requested"],
+  setup(s, { expose: h, emit: k }) {
+    const a = s, c = k, w = y(null), v = y(null), C = r(() => a.position === "left" ? "sl-left-0 sl-pr-10" : "sl-right-0 sl-pl-10"), B = r(() => ({
+      sm: "sl-max-w-sm",
+      // 384px
+      md: "sl-max-w-md",
+      // 448px
+      lg: "sl-max-w-lg",
+      // 512px
+      xl: "sl-max-w-xl",
+      // 576px
+      "2xl": "sl-max-w-2xl",
+      // 672px
+      full: "sl-max-w-full"
+      // 100%
+    })[a.size]), z = r(
+      () => a.position === "left" ? "sl--translate-x-full" : "sl-translate-x-full"
+    ), V = r(
+      () => a.position === "left" ? "sl--translate-x-full" : "sl-translate-x-full"
+    ), S = r(() => ({
+      paddingTop: "env(safe-area-inset-top, 0px)",
+      paddingBottom: "env(safe-area-inset-bottom, 0px)"
+    })), m = () => {
+      a.preventAutoClose ? c("close-requested") : (c("update:modelValue", !1), c("close"));
+    };
+    return h({
+      close: m,
+      contentRef: v
+    }), (n, t) => (i(), p(l(N), {
+      as: "template",
+      show: s.modelValue
+    }, {
+      default: o(() => [
+        u(l($), {
+          as: "div",
+          class: "sl-relative sl-z-50",
+          onClose: m
+        }, {
+          default: o(() => [
+            s.showBackdrop ? (i(), p(l(b), {
+              key: 0,
+              as: "template",
+              enter: "sl-ease-in-out sl-duration-500",
+              "enter-from": "sl-opacity-0",
+              "enter-to": "sl-opacity-100",
+              leave: "sl-ease-in-out sl-duration-500",
+              "leave-from": "sl-opacity-100",
+              "leave-to": "sl-opacity-0"
+            }, {
+              default: o(() => [...t[0] || (t[0] = [
+                e("div", { class: "sl-fixed sl-inset-0 sl-bg-black/30 dark:sl-bg-black/50 sl-transition-opacity" }, null, -1)
+              ])]),
+              _: 1
+            })) : f("", !0),
+            e("div", M, [
+              e("div", F, [
+                e("div", {
+                  class: d(["sl-pointer-events-none sl-fixed sl-inset-y-0 sl-flex sl-max-w-full", C.value])
+                }, [
+                  u(l(b), {
+                    as: "template",
+                    enter: O,
+                    "enter-from": z.value,
+                    "enter-to": X,
+                    leave: U,
+                    "leave-from": G,
+                    "leave-to": V.value
+                  }, {
+                    default: o(() => [
+                      u(l(q), {
+                        class: d(["sl-pointer-events-auto sl-w-screen sl-flex sl-flex-col", B.value])
+                      }, {
+                        default: o(() => [
+                          e("div", {
+                            class: "sl-flex sl-h-full sl-flex-col sl-bg-white dark:sl-bg-slate-800 sl-shadow-xl",
+                            style: E(S.value)
+                          }, [
+                            e("div", {
+                              class: d(["sl-sticky sl-top-0 sl-z-10 sl-border-b sl-border-gray-200 dark:sl-border-slate-700 sl-bg-white dark:sl-bg-slate-800", s.compact ? "sl-px-3 sl-py-3" : "sl-px-4 sm:sl-px-6 sl-py-4"])
+                            }, [
+                              e("div", P, [
+                                e("div", j, [
+                                  x(n.$slots, "header", {}, () => [
+                                    s.title ? (i(), p(l(A), {
+                                      key: 0,
+                                      class: "sl-text-base sl-font-semibold sl-leading-6 sl-text-gray-900 dark:sl-text-white sl-truncate"
+                                    }, {
+                                      default: o(() => [
+                                        R(D(s.title), 1)
+                                      ]),
+                                      _: 1
+                                    })) : f("", !0)
+                                  ])
+                                ]),
+                                s.showCloseButton ? (i(), g("div", I, [
+                                  e("button", {
+                                    ref_key: "closeButtonRef",
+                                    ref: w,
+                                    type: "button",
+                                    class: "sl-relative sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-text-gray-400 hover:sl-text-gray-500 dark:sl-text-slate-400 dark:hover:sl-text-slate-300 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-primary-500 focus:sl-ring-offset-2",
+                                    onClick: m
+                                  }, [
+                                    t[1] || (t[1] = e("span", { class: "sl-absolute sl--inset-2.5" }, null, -1)),
+                                    t[2] || (t[2] = e("span", { class: "sl-sr-only" }, "Close panel", -1)),
+                                    u(l(L), {
+                                      class: "sl-h-6 sl-w-6",
+                                      "aria-hidden": "true"
+                                    })
+                                  ], 512)
+                                ])) : f("", !0)
+                              ])
+                            ], 2),
+                            e("div", {
+                              ref_key: "contentRef",
+                              ref: v,
+                              class: d(["sl-relative sl-flex-1 sl-overflow-y-auto sl-min-h-0", s.compact ? "sl-px-3 sl-py-3" : "sl-px-4 sm:sl-px-6 sl-py-4"]),
+                              tabindex: "-1"
+                            }, [
+                              x(n.$slots, "default")
+                            ], 2),
+                            n.$slots.footer ? (i(), g("div", {
+                              key: 0,
+                              class: d(["sl-sticky sl-bottom-0 sl-border-t sl-border-gray-200 dark:sl-border-slate-700 sl-bg-gray-50 dark:sl-bg-slate-800/50", s.compact ? "sl-px-3 sl-py-3" : "sl-px-4 sm:sl-px-6 sl-py-4"])
+                            }, [
+                              x(n.$slots, "footer")
+                            ], 2)) : f("", !0)
+                          ], 4)
+                        ]),
+                        _: 3
+                      }, 8, ["class"])
+                    ]),
+                    _: 3
+                  }, 8, ["enter-from", "leave-to"])
+                ], 2)
+              ])
+            ])
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["show"]));
+  }
+});
+export {
+  Q as _
+};