@wishbone-media/spark 0.1.2 → 0.1.3

package/dist/index.js

@@ -1,7 +1,122 @@
-import { ref as y, createBlock as c, openBlock as f, unref as a, withCtx as o, createVNode as n, createElementVNode as u, normalizeClass as v, resolveDynamicComponent as d, normalizeProps as m, guardReactiveProps as x, reactive as g, markRaw as b } from "vue";
-import { TransitionRoot as h, Dialog as V, TransitionChild as p, DialogPanel as w } from "@headlessui/vue";
-const C = { class: "fixed inset-0 flex" }, O = {
-  __name: "AppOverlay",
+import { computed as b, createBlock as u, openBlock as r, unref as s, withCtx as a, createVNode as o, createElementVNode as l, normalizeClass as y, createElementBlock as v, createCommentVNode as p, renderSlot as d, ref as k, resolveDynamicComponent as $, normalizeProps as _, guardReactiveProps as C, reactive as z, markRaw as S } from "vue";
+import { TransitionRoot as x, Dialog as g, TransitionChild as f, DialogPanel as w, DialogTitle as V } from "@headlessui/vue";
+const R = { class: "fixed inset-0 z-10 w-screen overflow-y-auto" }, B = { class: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0" }, D = { key: 0 }, I = { class: "text-center sm:mt-5" }, O = {
+  key: 0,
+  class: "mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3"
+}, T = {
+  __name: "SparkModal",
+  props: {
+    open: {
+      type: Boolean,
+      required: !0
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => ["sm", "md", "lg", "xl", "2xl"].includes(e)
+    },
+    icon: {
+      type: String
+    },
+    iconColor: {
+      type: String
+    }
+  },
+  emits: ["close"],
+  setup(e) {
+    const n = e, c = b(() => ({
+      sm: "sm:max-w-sm",
+      md: "sm:max-w-lg",
+      lg: "sm:max-w-2xl",
+      xl: "sm:max-w-4xl",
+      "2xl": "sm:max-w-6xl"
+    })[n.size]);
+    return (t, i) => (r(), u(s(x), {
+      as: "template",
+      show: e.open
+    }, {
+      default: a(() => [
+        o(s(g), {
+          class: "relative z-50",
+          onClose: i[0] || (i[0] = (h) => t.$emit("close"))
+        }, {
+          default: a(() => [
+            o(s(f), {
+              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"
+            }, {
+              default: a(() => i[1] || (i[1] = [
+                l("div", { class: "fixed inset-0 bg-gray-500/75 transition-opacity" }, null, -1)
+              ])),
+              _: 1,
+              __: [1]
+            }),
+            l("div", R, [
+              l("div", B, [
+                o(s(f), {
+                  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"
+                }, {
+                  default: a(() => [
+                    o(s(w), {
+                      class: y([
+                        "relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:p-6",
+                        c.value
+                      ])
+                    }, {
+                      default: a(() => [
+                        l("div", null, [
+                          t.$slots.icon ? (r(), v("div", D, [
+                            d(t.$slots, "icon")
+                          ])) : p("", !0),
+                          l("div", I, [
+                            t.$slots.title ? (r(), u(s(V), {
+                              key: 0,
+                              as: "div",
+                              class: "text-base font-semibold text-gray-900"
+                            }, {
+                              default: a(() => [
+                                d(t.$slots, "title")
+                              ]),
+                              _: 3
+                            })) : p("", !0),
+                            l("div", {
+                              class: y({ "mt-2": t.$slots.title })
+                            }, [
+                              d(t.$slots, "default")
+                            ], 2)
+                          ])
+                        ]),
+                        t.$slots.actions ? (r(), v("div", O, [
+                          d(t.$slots, "actions")
+                        ])) : p("", !0)
+                      ]),
+                      _: 3
+                    }, 8, ["class"])
+                  ]),
+                  _: 3
+                })
+              ])
+            ])
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["show"]));
+  }
+}, q = { class: "fixed inset-0 flex" }, j = {
+  __name: "SparkOverlay",
   props: {
     position: {
       type: String,
@@ -14,19 +129,19 @@ const C = { class: "fixed inset-0 flex" }, O = {
     }
   },
   setup(e) {
-    const i = y(null);
-    return (s, t) => (f(), c(a(h), {
+    const n = k(null);
+    return (c, t) => (r(), u(s(x), {
       show: e.overlayInstance.state.isVisible,
       as: "template"
     }, {
-      default: o(() => [
-        n(a(V), {
-          initialFocus: i.value,
+      default: a(() => [
+        o(s(g), {
+          initialFocus: n.value,
           class: "relative z-200",
           onClose: e.overlayInstance.close
         }, {
-          default: o(() => [
-            n(a(p), {
+          default: a(() => [
+            o(s(f), {
               as: "template",
               enter: "transition-opacity ease-linear duration-150",
               "enter-from": "opacity-0",
@@ -35,14 +150,14 @@ const C = { class: "fixed inset-0 flex" }, O = {
               "leave-from": "opacity-100",
               "leave-to": "opacity-0"
             }, {
-              default: o(() => t[0] || (t[0] = [
-                u("div", { class: "fixed inset-0 bg-gray-600/30" }, null, -1)
+              default: a(() => t[0] || (t[0] = [
+                l("div", { class: "fixed inset-0 bg-gray-600/30" }, null, -1)
               ])),
               _: 1,
               __: [0]
             }),
-            u("div", C, [
-              n(a(p), {
+            l("div", q, [
+              o(s(f), {
                 as: "template",
                 enter: "transition ease-in-out duration-150 transform",
                 "enter-from": e.position === "left" ? "-translate-x-full opacity-0" : "translate-x-full opacity-0",
@@ -51,17 +166,17 @@ const C = { class: "fixed inset-0 flex" }, O = {
                 "leave-from": "translate-x-0 opacity-100",
                 "leave-to": e.position === "left" ? "-translate-x-full opacity-0" : "translate-x-full opacity-0"
               }, {
-                default: o(() => [
-                  n(a(w), {
+                default: a(() => [
+                  o(s(w), {
                     ref_key: "panelRef",
-                    ref: i,
-                    class: v([
+                    ref: n,
+                    class: y([
                       "flex w-[400px] py-2.5",
                       e.position === "left" ? "relative left-[10px]" : "absolute right-[10px] h-full"
                     ])
                   }, {
-                    default: o(() => [
-                      (f(), c(d(e.overlayInstance.state.content), m(x(s.$attrs)), null, 16))
+                    default: a(() => [
+                      (r(), u($(e.overlayInstance.state.content), _(C(c.$attrs)), null, 16))
                     ]),
                     _: 1
                   }, 8, ["class"])
@@ -77,31 +192,32 @@ const C = { class: "fixed inset-0 flex" }, O = {
     }, 8, ["show"]));
   }
 };
-function z() {
-  const e = g({
+function E() {
+  const e = z({
     isVisible: !1,
     content: null
-  }), i = () => {
+  }), n = () => {
     e.isVisible = !e.isVisible;
-  }, s = () => {
+  }, c = () => {
     e.isVisible = !1;
   }, t = () => {
     e.isVisible = !0;
-  }, r = (l) => {
-    e.content = b(l);
+  }, i = (m) => {
+    e.content = S(m);
   };
   return {
     state: e,
-    toggle: i,
-    close: s,
+    toggle: n,
+    close: c,
     open: t,
-    setContent: r,
-    show: (l) => {
-      l && r(l), t();
+    setContent: i,
+    show: (m) => {
+      m && i(m), t();
     }
   };
 }
 export {
-  O as AppOverlay,
-  z as useOverlay
+  T as SparkModal,
+  j as SparkOverlay,
+  E as useSparkOverlay
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/components/SparkModal.vue

@@ -0,0 +1,109 @@
+<template>
+  <TransitionRoot as="template" :show="open">
+    <Dialog class="relative z-50" @close="$emit('close')">
+      <TransitionChild
+        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"
+      >
+        <div class="fixed inset-0 bg-gray-500/75 transition-opacity" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div
+          class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+        >
+          <TransitionChild
+            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"
+          >
+            <DialogPanel
+              :class="[
+                'relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:p-6',
+                sizeClasses,
+              ]"
+            >
+              <div>
+                <!-- Icon -->
+                <div v-if="$slots.icon">
+                  <slot name="icon" />
+                </div>
+
+                <div class="text-center sm:mt-5">
+                  <!-- Header with title -->
+                  <template v-if="$slots.title">
+                    <DialogTitle as="div" class="text-base font-semibold text-gray-900">
+                      <slot name="title" />
+                    </DialogTitle>
+                  </template>
+
+                  <!-- Main content -->
+                  <div :class="{ 'mt-2': $slots.title }">
+                    <slot />
+                  </div>
+                </div>
+              </div>
+
+              <!-- Actions/Buttons -->
+              <div
+                v-if="$slots.actions"
+                class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3"
+              >
+                <slot name="actions" />
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    required: true,
+  },
+
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['sm', 'md', 'lg', 'xl', '2xl'].includes(value),
+  },
+
+  icon: {
+    type: String,
+  },
+
+  iconColor: {
+    type: String,
+  },
+})
+
+defineEmits(['close'])
+
+const sizeClasses = computed(() => {
+  const sizes = {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-lg',
+    lg: 'sm:max-w-2xl',
+    xl: 'sm:max-w-4xl',
+    '2xl': 'sm:max-w-6xl',
+  }
+
+  return sizes[props.size]
+})
+</script>

package/src/components/index.js

@@ -1,7 +1,4 @@
-import AppOverlay from './AppOverlay.vue'
+import SparkModal from './SparkModal.vue'
+import SparkOverlay from './SparkOverlay.vue'
 
-export { AppOverlay }
-
-// import Modal from './Modal.vue'
-// import Dropdown from './Dropdown.vue'
-// export { AppOverlay, Modal, Dropdown }
+export { SparkModal, SparkOverlay }

package/src/composables/index.js

@@ -1 +1 @@
-export { useOverlay } from './useOverlay.js'
+export { useSparkOverlay } from './useSparkOverlay.js'

package/src/composables/{useOverlay.js → useSparkOverlay.js}

@@ -1,6 +1,6 @@
 import { markRaw, reactive } from 'vue'
 
-export function useOverlay() {
+export function useSparkOverlay() {
   const state = reactive({
     isVisible: false,
     content: null,