@leaflink/stash 53.4.7 → 53.4.9

package/dist/AppSidebar.js

@@ -1,96 +1,98 @@
-import { defineComponent as B, useSlots as C, computed as h, ref as O, watchEffect as V, createElementBlock as s, openBlock as a, normalizeClass as _, createVNode as o, Transition as b, withCtx as g, withDirectives as x, withModifiers as $, vShow as y, createElementVNode as d, createCommentVNode as p, renderSlot as i, unref as c } from "vue";
-import { a as z } from "./index-t9tXBnql.js";
-import N from "./Backdrop.js";
-import j from "./Divider.js";
-import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const D = {
+import { defineComponent as B, useSlots as C, computed as h, ref as O, watchEffect as $, createElementBlock as t, openBlock as a, normalizeClass as _, createVNode as o, Transition as b, withCtx as g, withDirectives as y, withModifiers as M, vShow as x, createElementVNode as p, createCommentVNode as d, renderSlot as i, unref as c } from "vue";
+import { a as V } from "./index-t9tXBnql.js";
+import z from "./Backdrop.js";
+import N from "./Divider.js";
+import { _ as j } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const A = {
   key: 0,
   class: "px-3 pt-6"
-}, M = {
+}, D = {
   key: 1,
   class: "px-3 pt-6"
 }, P = {
   key: 2,
   class: "pt-6"
-}, I = {
+}, L = {
   role: "menubar",
   "aria-orientation": "vertical"
-}, L = /* @__PURE__ */ B({
+}, Q = /* @__PURE__ */ B({
   __name: "AppSidebar",
   props: {
     isOpen: { type: Boolean, default: !1 }
   },
   emits: ["dismiss", "update:is-open"],
   setup(k, { emit: w }) {
-    const u = k, n = C(), v = w, r = z("screen and (min-width: 1321px)"), t = h(() => u.isOpen && !r.value), l = O({ height: "", overflow: "" }), f = h(() => u.isOpen || r.value);
+    const u = k, n = C(), f = w, l = V("screen and (min-width: 1321px)"), s = h(() => u.isOpen && !l.value), r = O({ height: "", overflow: "" }), m = h(() => u.isOpen || l.value);
     function S() {
-      v("dismiss"), v("update:is-open", !1);
+      f("dismiss"), f("update:is-open", !1);
     }
     function E() {
       return typeof document > "u" ? null : document.scrollingElement || document.body;
     }
-    return V(() => {
-      if (r.value) return;
+    return $(() => {
+      if (l.value) return;
       const e = E();
-      e && (t.value && Object.assign(l.value, {
+      e && (s.value && Object.assign(r.value, {
         overflow: e.style.overflow,
         height: e.style.height
       }), Object.assign(e.style, {
-        overflow: t.value ? "hidden" : l.value.overflow,
+        overflow: s.value ? "hidden" : r.value.overflow,
         // Prevents page from scrolling when AppSidebar is open
-        height: t.value ? "100%" : l.value.height
+        height: s.value ? "100%" : r.value.height
         // Ensures the backdrop covers the entire page when AppSidebar is open
       }));
-    }), (e, m) => (a(), s("div", {
+    }), (e, v) => (a(), t("div", {
       id: "stash-app-sidebar",
       class: _(["stash-app-sidebar relative", {
-        "stash-app-sidebar--is-open": f.value,
-        "z-modal": t.value,
-        "z-[301]": !t.value
+        "stash-app-sidebar--is-open": m.value,
+        "z-modal": s.value,
+        "z-[301]": !s.value
       }]),
       "data-test": "stash-app-sidebar"
     }, [
       o(b, { name: "backdrop" }, {
         default: g(() => [
-          x(o(N, {
+          y(o(z, {
             class: "stash-app-sidebar__backdrop",
-            onClick: $(S, ["stop"])
+            onClick: M(S, ["stop"])
           }, null, 512), [
-            [y, t.value]
+            [x, s.value]
           ])
         ]),
         _: 1
       }),
       o(b, { name: "aside" }, {
         default: g(() => [
-          x(d("aside", {
-            class: _(["stash-app-sidebar__aside fixed flex h-screen flex-col bg-purple-500", { "shadow-3xl": t.value }]),
+          y(p("aside", {
+            class: _(["stash-app-sidebar__aside fixed flex h-screen flex-col bg-purple-500", { "shadow-3xl": s.value }]),
             "data-test": "stash-app-sidebar__aside"
           }, [
-            o(j, { class: "stash-app-sidebar__divider" }),
-            c(n)["app-context"] ? (a(), s("div", D, [
-              i(e.$slots, "app-context", {}, void 0, !0)
-            ])) : p("", !0),
-            c(n)["company-context"] ? (a(), s("div", M, [
-              i(e.$slots, "company-context", {}, void 0, !0)
-            ])) : p("", !0),
-            c(n).navigation ? (a(), s("nav", P, [
-              d("ul", I, [
-                i(e.$slots, "navigation", {}, void 0, !0)
+            o(N, { class: "stash-app-sidebar__divider" }),
+            c(n)["app-context"] ? (a(), t("div", A, [
+              i(e.$slots, "app-context")
+            ])) : d("", !0),
+            c(n)["company-context"] ? (a(), t("div", D, [
+              i(e.$slots, "company-context")
+            ])) : d("", !0),
+            c(n).navigation ? (a(), t("nav", P, [
+              p("ul", L, [
+                i(e.$slots, "navigation")
               ])
-            ])) : p("", !0),
-            m[0] || (m[0] = d("div", { class: "flex-1" }, null, -1)),
-            i(e.$slots, "footer", {}, void 0, !0)
+            ])) : d("", !0),
+            v[0] || (v[0] = p("div", { class: "flex-1" }, null, -1)),
+            i(e.$slots, "footer")
           ], 2), [
-            [y, f.value]
+            [x, m.value]
           ])
         ]),
         _: 3
       })
     ], 2));
   }
-}), H = /* @__PURE__ */ A(L, [["__scopeId", "data-v-430707c9"]]);
+}), T = {}, q = {
+  $style: T
+}, K = /* @__PURE__ */ j(Q, [["__cssModules", q]]);
 export {
-  H as default
+  K as default
 };
 //# sourceMappingURL=AppSidebar.js.map

package/dist/AppSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppSidebar.js","sources":["../src/components/AppSidebar/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useSlots, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Divider from '../Divider/Divider.vue';\n\n  export interface AppSidebarProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    isOpen?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AppSidebarProps>(), {\n    isOpen: false,\n  });\n\n  const slots = useSlots();\n\n  const emit = defineEmits<{\n    /**\n     * @deprecated Use the `update:is-open` event instead\n     */\n    (e: 'dismiss'): void;\n    (e: 'update:is-open', isOpen: boolean): void;\n  }>();\n\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n  const isBackdropVisible = computed(() => props.isOpen && !isExtraLargeScreen.value);\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const isSidebarOpen = computed(() => props.isOpen || isExtraLargeScreen.value);\n\n  function onBackdropClick() {\n    emit('dismiss');\n    emit('update:is-open', false);\n  }\n\n  function getPageScrollingElement(): HTMLElement | null {\n    if (typeof document === 'undefined') return null;\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watchEffect(() => {\n    if (isExtraLargeScreen.value) return;\n\n    const el = getPageScrollingElement();\n    if (!el) return;\n\n    if (isBackdropVisible.value) {\n      Object.assign(initialPageScrollingElementStyle.value, {\n        overflow: el.style.overflow,\n        height: el.style.height,\n      });\n    }\n\n    Object.assign(el.style, {\n      overflow: isBackdropVisible.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when AppSidebar is open\n      height: isBackdropVisible.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when AppSidebar is open\n    });\n  });\n</script>\n\n<template>\n  <div\n    id=\"stash-app-sidebar\"\n    class=\"stash-app-sidebar relative\"\n    :class=\"{\n      'stash-app-sidebar--is-open': isSidebarOpen,\n      'z-modal': isBackdropVisible,\n      'z-[301]': !isBackdropVisible,\n    }\"\n    data-test=\"stash-app-sidebar\"\n  >\n    <Transition name=\"backdrop\">\n      <Backdrop v-show=\"isBackdropVisible\" class=\"stash-app-sidebar__backdrop\" @click.stop=\"onBackdropClick\" />\n    </Transition>\n    <Transition name=\"aside\">\n      <aside\n        v-show=\"isSidebarOpen\"\n        class=\"stash-app-sidebar__aside fixed flex h-screen flex-col bg-purple-500\"\n        :class=\"{ 'shadow-3xl': isBackdropVisible }\"\n        data-test=\"stash-app-sidebar__aside\"\n      >\n        <Divider class=\"stash-app-sidebar__divider\" />\n        <div v-if=\"slots['app-context']\" class=\"px-3 pt-6\">\n          <!-- @slot App Context component slot, ideally for rendering the context switcher -->\n          <slot name=\"app-context\"></slot>\n        </div>\n        <div v-if=\"slots['company-context']\" class=\"px-3 pt-6\">\n          <!-- @slot Company Context component slot, ideally for rendering the company picker -->\n          <slot name=\"company-context\"></slot>\n        </div>\n        <nav v-if=\"slots['navigation']\" class=\"pt-6\">\n          <ul role=\"menubar\" aria-orientation=\"vertical\">\n            <!-- @slot Navigation component slot, for rendering navigation items -->\n            <slot name=\"navigation\"></slot>\n          </ul>\n        </nav>\n        <div class=\"flex-1\"></div>\n        <!-- @slot Footer component slot, for rendering version/environment notes -->\n        <slot name=\"footer\"></slot>\n      </aside>\n    </Transition>\n  </div>\n</template>\n\n<style scoped>\n  @layer utilities {\n    .stash-app-sidebar__aside {\n      padding-top: calc(var(--height-topbar) - 1px); /* -1px to compensate for the border height */\n      width: var(--width-sidebar);\n    }\n\n    .stash-app-sidebar__divider::before,\n    .stash-app-sidebar__divider::after {\n      border-bottom: 1px solid rgb(255 255 255 / 12%);\n    }\n\n    .backdrop-enter-active,\n    .backdrop-leave-active {\n      transition: opacity 200ms ease-in-out;\n    }\n\n    .backdrop-enter-from,\n    .backdrop-leave-to {\n      opacity: 0;\n    }\n\n    .aside-enter-active,\n    .aside-leave-active {\n      transition:\n        opacity 200ms ease-in-out,\n        transform 200ms ease-in-out;\n    }\n\n    .aside-enter-from,\n    .aside-leave-to {\n      opacity: 0;\n      transform: translateX(-20%);\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","emit","__emit","isExtraLargeScreen","useMediaQuery","isBackdropVisible","computed","initialPageScrollingElementStyle","ref","isSidebarOpen","onBackdropClick","getPageScrollingElement","watchEffect","el","_createElementBlock","_createVNode","_Transition","Backdrop","_createElementVNode","_normalizeClass","Divider","_unref","_openBlock","_hoisted_1","_renderSlot","_ctx","_hoisted_2","_hoisted_3","_hoisted_4"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAIRC,IAAQC,EAAA,GAERC,IAAOC,GAQPC,IAAqBC,EAAc,gCAAgC,GACnEC,IAAoBC,EAAS,MAAMT,EAAM,UAAU,CAACM,EAAmB,KAAK,GAC5EI,IAAmCC,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEC,IAAgBH,EAAS,MAAMT,EAAM,UAAUM,EAAmB,KAAK;AAE7E,aAASO,IAAkB;AACzB,MAAAT,EAAK,SAAS,GACdA,EAAK,kBAAkB,EAAK;AAAA,IAC9B;AAEA,aAASU,IAA8C;AACrD,aAAI,OAAO,WAAa,MAAoB,OACpC,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,WAAAC,EAAY,MAAM;AAChB,UAAIT,EAAmB,MAAO;AAE9B,YAAMU,IAAKF,EAAA;AACX,MAAKE,MAEDR,EAAkB,SACpB,OAAO,OAAOE,EAAiC,OAAO;AAAA,QACpD,UAAUM,EAAG,MAAM;AAAA,QACnB,QAAQA,EAAG,MAAM;AAAA,MAAA,CAClB,GAGH,OAAO,OAAOA,EAAG,OAAO;AAAA,QACtB,UAAUR,EAAkB,QAAQ,WAAWE,EAAiC,MAAM;AAAA;AAAA,QACtF,QAAQF,EAAkB,QAAQ,SAASE,EAAiC,MAAM;AAAA;AAAA,MAAA,CACnF;AAAA,IACH,CAAC,mBAIDO,EAwCM,OAAA;AAAA,MAvCJ,IAAG;AAAA,MACH,UAAM,8BAA4B;AAAA,sCACYL,EAAA;AAAA,mBAAgCJ,EAAA;AAAA,oBAAqCA,EAAA;AAAA,MAAA;MAKnH,aAAU;AAAA,IAAA;MAEVU,EAEaC,GAAA,EAFD,MAAK,cAAU;AAAA,mBACzB,MAAyG;AAAA,YAAzGD,EAAyGE,GAAA;AAAA,YAApE,OAAM;AAAA,YAA+B,WAAYP,GAAe,CAAA,MAAA,CAAA;AAAA,UAAA;gBAAnFL,EAAA,KAAiB;AAAA,UAAA;;;;MAErCU,EA0BaC,GAAA,EA1BD,MAAK,WAAO;AAAA,mBACtB,MAwBQ;AAAA,YAxBRE,EAwBQ,SAAA;AAAA,YAtBN,OAAKC,EAAA,CAAC,uEAAqE,EAAA,cACnDd,EAAA,MAAA,CAAiB,CAAA;AAAA,YACzC,aAAU;AAAA,UAAA;YAEVU,EAA8CK,GAAA,EAArC,OAAM,8BAA4B;AAAA,YAChCC,EAAAtB,CAAA,EAAK,aAAA,KAAhBuB,EAAA,GAAAR,EAGM,OAHNS,GAGM;AAAA,cADJC,EAAgCC,EAAA,QAAA,eAAA,CAAA,GAAA,QAAA,EAAA;AAAA,YAAA;YAEvBJ,EAAAtB,CAAA,EAAK,iBAAA,KAAhBuB,EAAA,GAAAR,EAGM,OAHNY,GAGM;AAAA,cADJF,EAAoCC,EAAA,QAAA,mBAAA,CAAA,GAAA,QAAA,EAAA;AAAA,YAAA;YAE3BJ,EAAAtB,CAAA,EAAK,cAAhBuB,EAAA,GAAAR,EAKM,OALNa,GAKM;AAAA,cAJJT,EAGK,MAHLU,GAGK;AAAA,gBADHJ,EAA+BC,EAAA,QAAA,cAAA,CAAA,GAAA,QAAA,EAAA;AAAA,cAAA;;4BAGnCP,EAA0B,OAAA,EAArB,OAAM,SAAA,GAAQ,MAAA,EAAA;AAAA,YAEnBM,EAA2BC,EAAA,QAAA,UAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;gBAtBnBhB,EAAA,KAAa;AAAA,UAAA;;;;;;;"}
+{"version":3,"file":"AppSidebar.js","sources":["../src/components/AppSidebar/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useSlots, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Divider from '../Divider/Divider.vue';\n\n  export interface AppSidebarProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    isOpen?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AppSidebarProps>(), {\n    isOpen: false,\n  });\n\n  const slots = useSlots();\n\n  const emit = defineEmits<{\n    /**\n     * @deprecated Use the `update:is-open` event instead\n     */\n    (e: 'dismiss'): void;\n    (e: 'update:is-open', isOpen: boolean): void;\n  }>();\n\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n  const isBackdropVisible = computed(() => props.isOpen && !isExtraLargeScreen.value);\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const isSidebarOpen = computed(() => props.isOpen || isExtraLargeScreen.value);\n\n  function onBackdropClick() {\n    emit('dismiss');\n    emit('update:is-open', false);\n  }\n\n  function getPageScrollingElement(): HTMLElement | null {\n    if (typeof document === 'undefined') return null;\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watchEffect(() => {\n    if (isExtraLargeScreen.value) return;\n\n    const el = getPageScrollingElement();\n    if (!el) return;\n\n    if (isBackdropVisible.value) {\n      Object.assign(initialPageScrollingElementStyle.value, {\n        overflow: el.style.overflow,\n        height: el.style.height,\n      });\n    }\n\n    Object.assign(el.style, {\n      overflow: isBackdropVisible.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when AppSidebar is open\n      height: isBackdropVisible.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when AppSidebar is open\n    });\n  });\n</script>\n\n<template>\n  <div\n    id=\"stash-app-sidebar\"\n    class=\"stash-app-sidebar relative\"\n    :class=\"{\n      'stash-app-sidebar--is-open': isSidebarOpen,\n      'z-modal': isBackdropVisible,\n      'z-[301]': !isBackdropVisible,\n    }\"\n    data-test=\"stash-app-sidebar\"\n  >\n    <Transition name=\"backdrop\">\n      <Backdrop v-show=\"isBackdropVisible\" class=\"stash-app-sidebar__backdrop\" @click.stop=\"onBackdropClick\" />\n    </Transition>\n    <Transition name=\"aside\">\n      <aside\n        v-show=\"isSidebarOpen\"\n        class=\"stash-app-sidebar__aside fixed flex h-screen flex-col bg-purple-500\"\n        :class=\"{ 'shadow-3xl': isBackdropVisible }\"\n        data-test=\"stash-app-sidebar__aside\"\n      >\n        <Divider class=\"stash-app-sidebar__divider\" />\n        <div v-if=\"slots['app-context']\" class=\"px-3 pt-6\">\n          <!-- @slot App Context component slot, ideally for rendering the context switcher -->\n          <slot name=\"app-context\"></slot>\n        </div>\n        <div v-if=\"slots['company-context']\" class=\"px-3 pt-6\">\n          <!-- @slot Company Context component slot, ideally for rendering the company picker -->\n          <slot name=\"company-context\"></slot>\n        </div>\n        <nav v-if=\"slots['navigation']\" class=\"pt-6\">\n          <ul role=\"menubar\" aria-orientation=\"vertical\">\n            <!-- @slot Navigation component slot, for rendering navigation items -->\n            <slot name=\"navigation\"></slot>\n          </ul>\n        </nav>\n        <div class=\"flex-1\"></div>\n        <!-- @slot Footer component slot, for rendering version/environment notes -->\n        <slot name=\"footer\"></slot>\n      </aside>\n    </Transition>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    :global(:where(.stash-app-sidebar) .stash-app-sidebar__aside) {\n      padding-top: calc(var(--height-topbar) - 1px); /* -1px to compensate for the border height */\n      width: var(--width-sidebar);\n    }\n\n    :global(:where(.stash-app-sidebar) .stash-app-sidebar__divider::before),\n    :global(:where(.stash-app-sidebar) .stash-app-sidebar__divider::after) {\n      border-bottom: 1px solid rgb(255 255 255 / 12%);\n    }\n\n    :global(:where(.stash-app-sidebar) .backdrop-enter-active),\n    :global(:where(.stash-app-sidebar) .backdrop-leave-active) {\n      transition: opacity 200ms ease-in-out;\n    }\n\n    :global(:where(.stash-app-sidebar) .backdrop-enter-from),\n    :global(:where(.stash-app-sidebar) .backdrop-leave-to) {\n      opacity: 0;\n    }\n\n    :global(:where(.stash-app-sidebar) .aside-enter-active),\n    :global(:where(.stash-app-sidebar) .aside-leave-active) {\n      transition:\n        opacity 200ms ease-in-out,\n        transform 200ms ease-in-out;\n    }\n\n    :global(:where(.stash-app-sidebar) .aside-enter-from),\n    :global(:where(.stash-app-sidebar) .aside-leave-to) {\n      opacity: 0;\n      transform: translateX(-20%);\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","emit","__emit","isExtraLargeScreen","useMediaQuery","isBackdropVisible","computed","initialPageScrollingElementStyle","ref","isSidebarOpen","onBackdropClick","getPageScrollingElement","watchEffect","el","_createElementBlock","_createVNode","_Transition","Backdrop","_createElementVNode","_normalizeClass","Divider","_unref","_openBlock","_hoisted_1","_renderSlot","_ctx","_hoisted_2","_hoisted_3","_hoisted_4"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAIRC,IAAQC,EAAA,GAERC,IAAOC,GAQPC,IAAqBC,EAAc,gCAAgC,GACnEC,IAAoBC,EAAS,MAAMT,EAAM,UAAU,CAACM,EAAmB,KAAK,GAC5EI,IAAmCC,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEC,IAAgBH,EAAS,MAAMT,EAAM,UAAUM,EAAmB,KAAK;AAE7E,aAASO,IAAkB;AACzB,MAAAT,EAAK,SAAS,GACdA,EAAK,kBAAkB,EAAK;AAAA,IAC9B;AAEA,aAASU,IAA8C;AACrD,aAAI,OAAO,WAAa,MAAoB,OACpC,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,WAAAC,EAAY,MAAM;AAChB,UAAIT,EAAmB,MAAO;AAE9B,YAAMU,IAAKF,EAAA;AACX,MAAKE,MAEDR,EAAkB,SACpB,OAAO,OAAOE,EAAiC,OAAO;AAAA,QACpD,UAAUM,EAAG,MAAM;AAAA,QACnB,QAAQA,EAAG,MAAM;AAAA,MAAA,CAClB,GAGH,OAAO,OAAOA,EAAG,OAAO;AAAA,QACtB,UAAUR,EAAkB,QAAQ,WAAWE,EAAiC,MAAM;AAAA;AAAA,QACtF,QAAQF,EAAkB,QAAQ,SAASE,EAAiC,MAAM;AAAA;AAAA,MAAA,CACnF;AAAA,IACH,CAAC,mBAIDO,EAwCM,OAAA;AAAA,MAvCJ,IAAG;AAAA,MACH,UAAM,8BAA4B;AAAA,sCACYL,EAAA;AAAA,mBAAgCJ,EAAA;AAAA,oBAAqCA,EAAA;AAAA,MAAA;MAKnH,aAAU;AAAA,IAAA;MAEVU,EAEaC,GAAA,EAFD,MAAK,cAAU;AAAA,mBACzB,MAAyG;AAAA,YAAzGD,EAAyGE,GAAA;AAAA,YAApE,OAAM;AAAA,YAA+B,WAAYP,GAAe,CAAA,MAAA,CAAA;AAAA,UAAA;gBAAnFL,EAAA,KAAiB;AAAA,UAAA;;;;MAErCU,EA0BaC,GAAA,EA1BD,MAAK,WAAO;AAAA,mBACtB,MAwBQ;AAAA,YAxBRE,EAwBQ,SAAA;AAAA,YAtBN,OAAKC,EAAA,CAAC,uEAAqE,EAAA,cACnDd,EAAA,MAAA,CAAiB,CAAA;AAAA,YACzC,aAAU;AAAA,UAAA;YAEVU,EAA8CK,GAAA,EAArC,OAAM,8BAA4B;AAAA,YAChCC,EAAAtB,CAAA,EAAK,aAAA,KAAhBuB,EAAA,GAAAR,EAGM,OAHNS,GAGM;AAAA,cADJC,EAAgCC,EAAA,QAAA,aAAA;AAAA,YAAA;YAEvBJ,EAAAtB,CAAA,EAAK,iBAAA,KAAhBuB,EAAA,GAAAR,EAGM,OAHNY,GAGM;AAAA,cADJF,EAAoCC,EAAA,QAAA,iBAAA;AAAA,YAAA;YAE3BJ,EAAAtB,CAAA,EAAK,cAAhBuB,EAAA,GAAAR,EAKM,OALNa,GAKM;AAAA,cAJJT,EAGK,MAHLU,GAGK;AAAA,gBADHJ,EAA+BC,EAAA,QAAA,YAAA;AAAA,cAAA;;4BAGnCP,EAA0B,OAAA,EAArB,OAAM,SAAA,GAAQ,MAAA,EAAA;AAAA,YAEnBM,EAA2BC,EAAA,QAAA,QAAA;AAAA,UAAA;gBAtBnBhB,EAAA,KAAa;AAAA,UAAA;;;;;;;;;"}

package/dist/Modal.js

@@ -1,13 +1,13 @@
-import { defineComponent as R, useSlots as V, ref as c, computed as C, watch as T, onBeforeUnmount as K, createElementBlock as m, createCommentVNode as n, openBlock as i, withKeys as q, normalizeClass as d, createVNode as z, createElementVNode as _, withModifiers as $, unref as p, createBlock as D, renderSlot as v, toDisplayString as P, withCtx as H } from "vue";
+import { defineComponent as R, useSlots as V, ref as c, computed as C, watch as F, onBeforeUnmount as K, createElementBlock as m, createCommentVNode as n, openBlock as i, withKeys as q, normalizeClass as d, createVNode as z, createElementVNode as _, withModifiers as M, unref as p, createBlock as T, renderSlot as h, toDisplayString as P, withCtx as D } from "vue";
 import U from "lodash-es/uniqueId";
 import { FOCUS_ELEMENTS_SELECTOR as W } from "./constants.js";
-import { t as j } from "./locale.js";
+import { t as H } from "./locale.js";
 import G from "./Backdrop.js";
-import I from "./Button.js";
-import M from "./Icon.js";
+import j from "./Button.js";
+import N from "./Icon.js";
 import { _ as J } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 var Q = /* @__PURE__ */ ((a) => (a.Narrow = "narrow", a.Medium = "medium", a.Wide = "wide", a))(Q || {}), X = /* @__PURE__ */ ((a) => (a.Center = "center", a.Left = "left", a.Right = "right", a))(X || {});
-const Y = ["aria-labelledby"], Z = { class: "flex place-items-center" }, ee = ["id"], te = { class: "stash-modal__footer__actions flex flex-col justify-end lg:flex-row" }, le = /* @__PURE__ */ R({
+const Y = ["aria-labelledby"], Z = { class: "flex place-items-center" }, ee = ["id"], te = { class: "stash-modal__footer__actions flex justify-end" }, le = /* @__PURE__ */ R({
   name: "ll-modal",
   __name: "Modal",
   props: {
@@ -26,13 +26,13 @@ const Y = ["aria-labelledby"], Z = { class: "flex place-items-center" }, ee = ["
     preventDismiss: { type: Boolean, default: !1 }
   },
   emits: ["update:open", "update:is-open", "dismiss"],
-  setup(a, { emit: N }) {
-    const e = a, w = N, b = V(), r = c(), E = c(null), h = c([]), k = c(), x = c(), f = c({ height: "", overflow: "" }), L = U("modal-header-"), O = C(() => !!b.actions || !!b.footer), l = C(() => e.open || e.isOpen), s = C(() => e.position === "left" || e.position === "right");
+  setup(a, { emit: A }) {
+    const e = a, w = A, b = V(), r = c(), E = c(null), v = c([]), k = c(), B = c(), f = c({ height: "", overflow: "" }), L = U("modal-header-"), O = C(() => !!b.actions || !!b.footer), l = C(() => e.open || e.isOpen), s = C(() => e.position === "left" || e.position === "right");
     let u = !1;
     function g() {
       return document.scrollingElement || document.body;
     }
-    T(
+    F(
       l,
       () => {
         var t;
@@ -41,7 +41,7 @@ const Y = ["aria-labelledby"], Z = { class: "flex place-items-center" }, ee = ["
             const o = document.activeElement;
             E.value = o instanceof HTMLElement ? o : null;
           } else
-            u && (document.removeEventListener("keydown", B), u = !1), (t = E.value) == null || t.focus();
+            u && (document.removeEventListener("keydown", x), u = !1), (t = E.value) == null || t.focus();
           l.value && Object.assign(f.value, {
             height: g().style.height,
             overflow: g().style.overflow
@@ -59,20 +59,20 @@ const Y = ["aria-labelledby"], Z = { class: "flex place-items-center" }, ee = ["
       typeof document > "u" || (S("show"), Object.assign(g().style, {
         overflow: f.value.overflow,
         height: f.value.height
-      }), u && (document.removeEventListener("keydown", B), u = !1), (t = E.value) == null || t.focus());
+      }), u && (document.removeEventListener("keydown", x), u = !1), (t = E.value) == null || t.focus());
     });
     function y() {
       e.preventDismiss || (w("update:open", !1), w("update:is-open", !1), w("dismiss"));
     }
-    function B(t) {
-      var o, F;
-      t.key === "Tab" && (t.shiftKey && document.activeElement === k.value ? ((o = x.value) == null || o.focus(), t.preventDefault()) : document.activeElement === x.value && ((F = k.value) == null || F.focus(), t.preventDefault()));
+    function x(t) {
+      var o, $;
+      t.key === "Tab" && (t.shiftKey && document.activeElement === k.value ? ((o = B.value) == null || o.focus(), t.preventDefault()) : document.activeElement === B.value && (($ = k.value) == null || $.focus(), t.preventDefault()));
     }
-    function A() {
-      typeof document > "u" || !r.value || !l.value || (r.value.focus(), h.value = Array.from(r.value.querySelectorAll(W)), k.value = h.value[0], x.value = h.value[h.value.length - 1], u || (document.addEventListener("keydown", B), u = !0));
+    function I() {
+      typeof document > "u" || !r.value || !l.value || (r.value.focus(), v.value = Array.from(r.value.querySelectorAll(W)), k.value = v.value[0], B.value = v.value[v.value.length - 1], u || (document.addEventListener("keydown", x), u = !0));
     }
-    T(r, () => {
-      !r.value || !l.value || A();
+    F(r, () => {
+      !r.value || !l.value || I();
     });
     function S(t) {
       if (typeof document > "u")
@@ -97,7 +97,7 @@ const Y = ["aria-labelledby"], Z = { class: "flex place-items-center" }, ee = ["
     }, [
       z(G, {
         class: "stash-modal__backdrop",
-        onClick: $(y, ["stop"])
+        onClick: M(y, ["stop"])
       }),
       _("div", {
         "aria-modal": "true",
@@ -121,7 +121,7 @@ const Y = ["aria-labelledby"], Z = { class: "flex place-items-center" }, ee = ["
             "lg:right-0": e.position === "right"
           }
         ]]),
-        onClick: o[0] || (o[0] = $(() => {
+        onClick: o[0] || (o[0] = M(() => {
         }, ["stop"]))
       }, [
         e.hideHeader ? n("", !0) : (i(), m("header", {
@@ -130,23 +130,23 @@ const Y = ["aria-labelledby"], Z = { class: "flex place-items-center" }, ee = ["
           class: d(["stash-modal__header grid h-12 place-items-center bg-purple-500", { "lg:rounded-t": !s.value }])
         }, [
           _("div", Z, [
-            v(t.$slots, "headerAction", {}, void 0, !0)
+            h(t.$slots, "headerAction")
           ]),
           e.title ? (i(), m("h3", {
             key: 0,
             id: p(L),
             class: "m-0 flex-1 leading-6 text-white"
           }, P(e.title), 9, ee)) : n("", !0),
-          e.hideClose ? n("", !0) : (i(), D(I, {
+          e.hideClose ? n("", !0) : (i(), T(j, {
             key: 1,
             icon: "",
             "data-test": "ll-modal-close",
-            title: p(j)("ll.closeModal"),
+            title: p(H)("ll.closeModal"),
             type: "button",
             onClick: y
           }, {
-            default: H(() => [
-              z(M, {
+            default: D(() => [
+              z(N, {
                 class: "text-white",
                 name: "close"
               })
@@ -154,17 +154,17 @@ const Y = ["aria-labelledby"], Z = { class: "flex place-items-center" }, ee = ["
             _: 1
           }, 8, ["title"]))
         ], 2)),
-        !e.hideClose && e.hideHeader ? (i(), D(I, {
+        !e.hideClose && e.hideHeader ? (i(), T(j, {
           key: 1,
           class: "absolute right-0 top-0 z-10",
           icon: "",
           "data-test": "ll-modal-close",
           type: "button",
-          title: p(j)("ll.closeModal"),
+          title: p(H)("ll.closeModal"),
           onClick: y
         }, {
-          default: H(() => [
-            z(M, {
+          default: D(() => [
+            z(N, {
               class: d(["drop-shadow-md", [e.closeButtonColorClass]]),
               name: "close"
             }, null, 8, ["class"])
@@ -177,7 +177,7 @@ const Y = ["aria-labelledby"], Z = { class: "flex place-items-center" }, ee = ["
             "rounded-t": e.hideHeader
           }])
         }, [
-          v(t.$slots, "featured-content", {}, void 0, !0)
+          h(t.$slots, "featured-content")
         ], 2)) : n("", !0),
         _("div", {
           class: d(["stash-modal__body flex-1 overflow-y-auto", [
@@ -191,25 +191,27 @@ const Y = ["aria-labelledby"], Z = { class: "flex place-items-center" }, ee = ["
           ]]),
           "data-test": "stash-modal__body"
         }, [
-          v(t.$slots, "default", {}, void 0, !0)
+          h(t.$slots, "default")
         ], 2),
         O.value ? (i(), m("footer", {
           key: 3,
           class: d(["stash-modal__footer border-t border-ice-500 bg-ice-100 p-3 lg:p-6", { "lg:rounded-b": !s.value }])
         }, [
-          v(t.$slots, "footer", {}, () => [
+          h(t.$slots, "footer", {}, () => [
             _("div", te, [
-              v(t.$slots, "actions", {}, void 0, !0)
+              h(t.$slots, "actions")
             ])
-          ], !0)
+          ])
         ], 2)) : n("", !0)
       ], 10, Y)
     ], 34)) : n("", !0);
   }
-}), ce = /* @__PURE__ */ J(le, [["__scopeId", "data-v-60489fbd"]]);
+}), oe = {}, ae = {
+  $style: oe
+}, me = /* @__PURE__ */ J(le, [["__cssModules", ae]]);
 export {
   X as ModalPosition,
   Q as ModalSize,
-  ce as default
+  me as default
 };
 //# sourceMappingURL=Modal.js.map

package/dist/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../src/components/Modal/Modal.types.ts","../src/components/Modal/Modal.vue"],"sourcesContent":["export enum ModalSize {\n  Narrow = 'narrow',\n  Medium = 'medium',\n  Wide = 'wide',\n}\n\nexport type ModalSizes = `${ModalSize}`;\n\nexport enum ModalPosition {\n  Center = 'center',\n  Left = 'left',\n  Right = 'right',\n}\n\nexport type ModalPositions = `${ModalPosition}`;\n","<script lang=\"ts\">\n  import { ModalPositions, ModalSizes } from './Modal.types';\n\n  export * from './Modal.types';\n\n  export interface ModalProps {\n    /**\n     * Hides the \"close\" button\n     */\n    hideClose?: boolean;\n\n    /**\n     * Opens the modal when truthy; hides the modal when falsy.\n     * @deprecated Use `isOpen` instead\n     */\n    open?: boolean;\n\n    /**\n     * Opens the modal when truthy; hides the modal when falsy.\n     */\n    isOpen?: boolean;\n\n    /**\n     * Use v-model:is-open or :is-open instead of :model-value and v-model.\n     * @deprecated\n     */\n    modelValue?: boolean;\n\n    /**\n     * Sets a preset max-width on the modal.\n     * Options: default (648px), narrow (360px), wide (960px)\n     */\n    size?: ModalSizes;\n\n    /**\n     * Should the modal be scrollable within the content area. This prop is treated as `true` when the `position` prop is set to \"left\" or \"right\".\n     */\n    scrollable?: boolean;\n\n    /**\n     * Gives the modal body have a light gray background\n     */\n    contrast?: boolean;\n\n    /**\n     * Text to display in the modal header\n     */\n    title?: string;\n\n    /**\n     * Disables the default padding in the modal body.\n     */\n    disableBodyPadding?: boolean;\n\n    /**\n     * The position on the screen to display the modal.\n     */\n    position?: ModalPositions;\n\n    /**\n     * Hide the header. Typically used with the featuredContent slot to display a graphic and create a \"promo\" modal.\n     */\n    hideHeader?: boolean;\n\n    /**\n     * Add classes to the close button. This can be used with the hideHeader prop and featuredContent slot to\n     * accommodate images with different color backgrounds.\n     */\n    closeButtonColorClass?: string;\n\n    /**\n     * Prevents the modal from being dismissed by clicking the backdrop or pressing the escape key.\n     * Example: There are in-flight api requests and you do not want the modal to close until they are done.\n     */\n    preventDismiss?: boolean;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue';\n\n  import { FOCUS_ELEMENTS_SELECTOR } from '../../constants';\n  import { t } from '../../locale';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-modal' });\n\n  const props = withDefaults(defineProps<ModalProps>(), {\n    hideClose: false,\n    open: false,\n    isOpen: false,\n    modelValue: false,\n    size: 'medium',\n    scrollable: false,\n    contrast: false,\n    title: '',\n    position: 'center',\n    hideHeader: false,\n    closeButtonColorClass: 'text-white/50',\n    preventDismiss: false,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * @deprecated Use the `update:is-open` event instead\n     */\n    (e: 'update:open', isOpen?: boolean): void;\n    (e: 'update:is-open', isOpen?: boolean): void;\n    (e: 'dismiss'): void;\n  }>();\n\n  const slots = useSlots();\n\n  const rootRef = ref<HTMLElement>();\n  const lastExternalFocusedElement = ref<HTMLElement | null>(null);\n  const focusElements = ref<HTMLElement[]>([]);\n  const firstFocusElement = ref<HTMLElement>();\n  const lastFocusElement = ref<HTMLElement>();\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const headerId = uniqueId('modal-header-');\n  const hasFooterContent = computed(() => !!slots.actions || !!slots.footer);\n  const isModalOpen = computed(() => props.open || props.isOpen);\n  const isDrawer = computed(() => props.position === 'left' || props.position === 'right');\n\n  let isFocusTrapAttached = false;\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watch(\n    isModalOpen,\n    () => {\n      if (typeof document === 'undefined') {\n        return;\n      }\n      toggleHelpWidgetLauncher(isModalOpen.value ? 'hide' : 'show');\n\n      if (isModalOpen.value) {\n        const active = document.activeElement;\n        lastExternalFocusedElement.value = active instanceof HTMLElement ? active : null;\n      } else {\n        if (isFocusTrapAttached) {\n          document.removeEventListener('keydown', handleTab);\n          isFocusTrapAttached = false;\n        }\n\n        lastExternalFocusedElement.value?.focus();\n      }\n\n      if (isModalOpen.value) {\n        Object.assign(initialPageScrollingElementStyle.value, {\n          height: getPageScrollingElement().style.height,\n          overflow: getPageScrollingElement().style.overflow,\n        });\n      }\n\n      Object.assign(getPageScrollingElement().style, {\n        overflow: isModalOpen.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when modal is open\n        height: isModalOpen.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when modal is open; see https://github.com/LeafLink/stash/pull/713#issuecomment-1184602535\n      });\n    },\n    { immediate: true },\n  );\n\n  onBeforeUnmount(() => {\n    if (typeof document === 'undefined') {\n      return;\n    }\n    toggleHelpWidgetLauncher('show');\n\n    // In cases where the watchEffect for isModalOpen isn't triggered while closing/nagivating away from modal, this ensures scrolling returns to normal\n    Object.assign(getPageScrollingElement().style, {\n      overflow: initialPageScrollingElementStyle.value.overflow,\n      height: initialPageScrollingElementStyle.value.height,\n    });\n\n    // Clear focus trap tab listener\n    if (isFocusTrapAttached) {\n      document.removeEventListener('keydown', handleTab);\n      isFocusTrapAttached = false;\n    }\n\n    lastExternalFocusedElement.value?.focus();\n  });\n\n  function dismiss() {\n    if (props.preventDismiss) {\n      return;\n    }\n    emit('update:open', false);\n    emit('update:is-open', false);\n    emit('dismiss');\n  }\n\n  function handleTab(e: KeyboardEvent) {\n    if (e.key === 'Tab') {\n      if (e.shiftKey && document.activeElement === firstFocusElement.value) {\n        lastFocusElement.value?.focus();\n        e.preventDefault();\n      } else if (document.activeElement === lastFocusElement.value) {\n        firstFocusElement.value?.focus();\n        e.preventDefault();\n      }\n    }\n  }\n\n  function setupFocusTrap() {\n    if (typeof document === 'undefined' || !rootRef.value || !isModalOpen.value) {\n      return;\n    }\n\n    rootRef.value.focus();\n\n    focusElements.value = Array.from(rootRef.value.querySelectorAll<HTMLElement>(FOCUS_ELEMENTS_SELECTOR));\n    firstFocusElement.value = focusElements.value[0];\n    lastFocusElement.value = focusElements.value[focusElements.value.length - 1];\n\n    if (!isFocusTrapAttached) {\n      document.addEventListener('keydown', handleTab);\n      isFocusTrapAttached = true;\n    }\n  }\n\n  // Ensure the Tab key cycles through focusable elements within the modal only while it is open.\n  watch(rootRef, () => {\n    if (!rootRef.value || !isModalOpen.value) {\n      return;\n    }\n\n    setupFocusTrap();\n  });\n\n  /**\n   * The customer support \"help widget launcher\" covers the action buttons in the Modal when the Modal uses a position value of \"right\" (for drawers).\n   */\n  function toggleHelpWidgetLauncher(nextState: 'show' | 'hide') {\n    if (typeof document === 'undefined') {\n      return;\n    }\n    const launcherElement = document.getElementById('launcher');\n\n    if (!launcherElement || !launcherElement.parentElement) {\n      return;\n    }\n\n    launcherElement.parentElement.style.display = nextState === 'show' ? 'block' : 'none';\n  }\n</script>\n\n<template>\n  <div\n    v-if=\"isModalOpen\"\n    ref=\"rootRef\"\n    class=\"stash-modal fixed inset-0\"\n    :class=\"{\n      'invisible z-behind': !isModalOpen,\n      'visible z-modal': isModalOpen,\n      'lg:flex lg:flex-col lg:items-center lg:justify-center': props.position === 'center',\n      'overflow-y-auto': !props.scrollable && !isDrawer,\n      'overflow-y-hidden': isDrawer,\n    }\"\n    data-test=\"ll-modal\"\n    tabindex=\"0\"\n    @keydown.esc=\"dismiss\"\n  >\n    <Backdrop class=\"stash-modal__backdrop\" @click.stop=\"dismiss\" />\n    <div\n      aria-modal=\"true\"\n      role=\"dialog\"\n      :aria-labelledby=\"headerId\"\n      class=\"stash-modal__dialog relative flex h-screen w-full flex-col lg:shadow-3xl\"\n      :class=\"[\n        `stash-modal__dialog--size-${props.size}`,\n        `stash-modal__dialog--position-${props.position}`,\n        {\n          'stash-modal__dialog--is-open': isModalOpen,\n          'stash-modal__dialog--is-drawer': isDrawer,\n          'stash-modal__dialog--is-contrast': props.contrast,\n          'stash-modal__dialog--is-scrollable': props.scrollable,\n          'lg:w-[360px]': props.size === 'narrow',\n          'lg:w-[648px]': props.size === 'medium',\n          'lg:w-[960px]': props.size === 'wide',\n          'lg:my-0 lg:h-auto lg:max-h-[90vh]': props.position === 'center',\n          // absolute causing this to break when items in bottom of container get focus\n          'lg:fixed lg:h-screen': isDrawer,\n          'lg:left-0': props.position === 'left',\n          'lg:right-0': props.position === 'right',\n        },\n      ]\"\n      @click.stop\n    >\n      <header\n        v-if=\"!props.hideHeader\"\n        data-test=\"stash-modal__header\"\n        class=\"stash-modal__header grid h-12 place-items-center bg-purple-500\"\n        :class=\"{ 'lg:rounded-t': !isDrawer }\"\n      >\n        <div class=\"flex place-items-center\">\n          <!-- @slot Adds an action to the left side of the header bar. An example usage is a modal with multiple pages and a back button can be inserted here -->\n          <slot name=\"headerAction\"></slot>\n        </div>\n\n        <h3 v-if=\"props.title\" :id=\"headerId\" class=\"m-0 flex-1 leading-6 text-white\">\n          {{ props.title }}\n        </h3>\n\n        <Button\n          v-if=\"!props.hideClose\"\n          icon\n          data-test=\"ll-modal-close\"\n          :title=\"t('ll.closeModal')\"\n          type=\"button\"\n          @click=\"dismiss\"\n        >\n          <Icon class=\"text-white\" name=\"close\" />\n        </Button>\n      </header>\n\n      <Button\n        v-if=\"!props.hideClose && props.hideHeader\"\n        class=\"absolute right-0 top-0 z-10\"\n        icon\n        data-test=\"ll-modal-close\"\n        type=\"button\"\n        :title=\"t('ll.closeModal')\"\n        @click=\"dismiss\"\n      >\n        <Icon class=\"drop-shadow-md\" name=\"close\" :class=\"[props.closeButtonColorClass]\" />\n      </Button>\n\n      <div\n        v-if=\"!!slots['featured-content']\"\n        class=\"stash-modal__featured-content relative\"\n        :class=\"{\n          'rounded-t': props.hideHeader,\n        }\"\n      >\n        <slot name=\"featured-content\"></slot>\n      </div>\n\n      <div\n        class=\"stash-modal__body flex-1 overflow-y-auto\"\n        :class=\"[\n          {\n            'p-3 lg:p-6': !props.disableBodyPadding,\n            'lg:overflow-y-visible': !props.scrollable && !isDrawer,\n            'lg:rounded-b': !hasFooterContent && !isDrawer,\n            'bg-white': !props.contrast,\n            'bg-ice-200': props.contrast,\n          },\n        ]\"\n        data-test=\"stash-modal__body\"\n      >\n        <slot></slot>\n      </div>\n\n      <footer\n        v-if=\"hasFooterContent\"\n        class=\"stash-modal__footer border-t border-ice-500 bg-ice-100 p-3 lg:p-6\"\n        :class=\"{ 'lg:rounded-b': !isDrawer }\"\n      >\n        <!-- @slot Overrides the whole footer section. Used for rendering custom footers with more than 2 actions. If defined, \"actions\" slot will get ignored. -->\n        <slot name=\"footer\">\n          <div class=\"stash-modal__footer__actions flex flex-col justify-end lg:flex-row\">\n            <!-- @slot Modal footer actions, supports rendering up to 2 `<Button>` children -->\n            <slot name=\"actions\"></slot>\n          </div>\n        </slot>\n      </footer>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .stash-modal__header {\n      grid-template-columns: 48px 1fr 48px;\n    }\n\n    .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n      order: 2;\n    }\n\n    .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n      margin-bottom: --spacing(3);\n      order: 1;\n    }\n\n    @media (width >= theme(--breakpoint-lg)) {\n      .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n        order: 1;\n      }\n\n      .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n        margin-bottom: 0;\n        order: 2;\n      }\n\n      .stash-modal__footer__actions > :deep(.stash-button + .stash-button) {\n        margin-left: var(--grid-gutter);\n      }\n    }\n\n    .stash-modal__featured-content > :deep(*) {\n      border-radius: inherit;\n    }\n  }\n</style>\n"],"names":["ModalSize","ModalPosition","props","__props","emit","__emit","slots","useSlots","rootRef","ref","lastExternalFocusedElement","focusElements","firstFocusElement","lastFocusElement","initialPageScrollingElementStyle","headerId","uniqueId","hasFooterContent","computed","isModalOpen","isDrawer","isFocusTrapAttached","getPageScrollingElement","watch","toggleHelpWidgetLauncher","active","handleTab","_a","onBeforeUnmount","dismiss","e","_b","setupFocusTrap","FOCUS_ELEMENTS_SELECTOR","nextState","launcherElement","_createElementBlock","_createVNode","Backdrop","_createElementVNode","_unref","_normalizeClass","_hoisted_2","_renderSlot","_ctx","_toDisplayString","_hoisted_3","_createBlock","Button","t","Icon","_hoisted_4"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../src/components/Modal/Modal.types.ts","../src/components/Modal/Modal.vue"],"sourcesContent":["export enum ModalSize {\n  Narrow = 'narrow',\n  Medium = 'medium',\n  Wide = 'wide',\n}\n\nexport type ModalSizes = `${ModalSize}`;\n\nexport enum ModalPosition {\n  Center = 'center',\n  Left = 'left',\n  Right = 'right',\n}\n\nexport type ModalPositions = `${ModalPosition}`;\n","<script lang=\"ts\">\n  import { ModalPositions, ModalSizes } from './Modal.types';\n\n  export * from './Modal.types';\n\n  export interface ModalProps {\n    /**\n     * Hides the \"close\" button\n     */\n    hideClose?: boolean;\n\n    /**\n     * Opens the modal when truthy; hides the modal when falsy.\n     * @deprecated Use `isOpen` instead\n     */\n    open?: boolean;\n\n    /**\n     * Opens the modal when truthy; hides the modal when falsy.\n     */\n    isOpen?: boolean;\n\n    /**\n     * Use v-model:is-open or :is-open instead of :model-value and v-model.\n     * @deprecated\n     */\n    modelValue?: boolean;\n\n    /**\n     * Sets a preset max-width on the modal.\n     * Options: default (648px), narrow (360px), wide (960px)\n     */\n    size?: ModalSizes;\n\n    /**\n     * Should the modal be scrollable within the content area. This prop is treated as `true` when the `position` prop is set to \"left\" or \"right\".\n     */\n    scrollable?: boolean;\n\n    /**\n     * Gives the modal body have a light gray background\n     */\n    contrast?: boolean;\n\n    /**\n     * Text to display in the modal header\n     */\n    title?: string;\n\n    /**\n     * Disables the default padding in the modal body.\n     */\n    disableBodyPadding?: boolean;\n\n    /**\n     * The position on the screen to display the modal.\n     */\n    position?: ModalPositions;\n\n    /**\n     * Hide the header. Typically used with the featuredContent slot to display a graphic and create a \"promo\" modal.\n     */\n    hideHeader?: boolean;\n\n    /**\n     * Add classes to the close button. This can be used with the hideHeader prop and featuredContent slot to\n     * accommodate images with different color backgrounds.\n     */\n    closeButtonColorClass?: string;\n\n    /**\n     * Prevents the modal from being dismissed by clicking the backdrop or pressing the escape key.\n     * Example: There are in-flight api requests and you do not want the modal to close until they are done.\n     */\n    preventDismiss?: boolean;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue';\n\n  import { FOCUS_ELEMENTS_SELECTOR } from '../../constants';\n  import { t } from '../../locale';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-modal' });\n\n  const props = withDefaults(defineProps<ModalProps>(), {\n    hideClose: false,\n    open: false,\n    isOpen: false,\n    modelValue: false,\n    size: 'medium',\n    scrollable: false,\n    contrast: false,\n    title: '',\n    position: 'center',\n    hideHeader: false,\n    closeButtonColorClass: 'text-white/50',\n    preventDismiss: false,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * @deprecated Use the `update:is-open` event instead\n     */\n    (e: 'update:open', isOpen?: boolean): void;\n    (e: 'update:is-open', isOpen?: boolean): void;\n    (e: 'dismiss'): void;\n  }>();\n\n  const slots = useSlots();\n\n  const rootRef = ref<HTMLElement>();\n  const lastExternalFocusedElement = ref<HTMLElement | null>(null);\n  const focusElements = ref<HTMLElement[]>([]);\n  const firstFocusElement = ref<HTMLElement>();\n  const lastFocusElement = ref<HTMLElement>();\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const headerId = uniqueId('modal-header-');\n  const hasFooterContent = computed(() => !!slots.actions || !!slots.footer);\n  const isModalOpen = computed(() => props.open || props.isOpen);\n  const isDrawer = computed(() => props.position === 'left' || props.position === 'right');\n\n  let isFocusTrapAttached = false;\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watch(\n    isModalOpen,\n    () => {\n      if (typeof document === 'undefined') {\n        return;\n      }\n      toggleHelpWidgetLauncher(isModalOpen.value ? 'hide' : 'show');\n\n      if (isModalOpen.value) {\n        const active = document.activeElement;\n        lastExternalFocusedElement.value = active instanceof HTMLElement ? active : null;\n      } else {\n        if (isFocusTrapAttached) {\n          document.removeEventListener('keydown', handleTab);\n          isFocusTrapAttached = false;\n        }\n\n        lastExternalFocusedElement.value?.focus();\n      }\n\n      if (isModalOpen.value) {\n        Object.assign(initialPageScrollingElementStyle.value, {\n          height: getPageScrollingElement().style.height,\n          overflow: getPageScrollingElement().style.overflow,\n        });\n      }\n\n      Object.assign(getPageScrollingElement().style, {\n        overflow: isModalOpen.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when modal is open\n        height: isModalOpen.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when modal is open; see https://github.com/LeafLink/stash/pull/713#issuecomment-1184602535\n      });\n    },\n    { immediate: true },\n  );\n\n  onBeforeUnmount(() => {\n    if (typeof document === 'undefined') {\n      return;\n    }\n    toggleHelpWidgetLauncher('show');\n\n    // In cases where the watchEffect for isModalOpen isn't triggered while closing/nagivating away from modal, this ensures scrolling returns to normal\n    Object.assign(getPageScrollingElement().style, {\n      overflow: initialPageScrollingElementStyle.value.overflow,\n      height: initialPageScrollingElementStyle.value.height,\n    });\n\n    // Clear focus trap tab listener\n    if (isFocusTrapAttached) {\n      document.removeEventListener('keydown', handleTab);\n      isFocusTrapAttached = false;\n    }\n\n    lastExternalFocusedElement.value?.focus();\n  });\n\n  function dismiss() {\n    if (props.preventDismiss) {\n      return;\n    }\n    emit('update:open', false);\n    emit('update:is-open', false);\n    emit('dismiss');\n  }\n\n  function handleTab(e: KeyboardEvent) {\n    if (e.key === 'Tab') {\n      if (e.shiftKey && document.activeElement === firstFocusElement.value) {\n        lastFocusElement.value?.focus();\n        e.preventDefault();\n      } else if (document.activeElement === lastFocusElement.value) {\n        firstFocusElement.value?.focus();\n        e.preventDefault();\n      }\n    }\n  }\n\n  function setupFocusTrap() {\n    if (typeof document === 'undefined' || !rootRef.value || !isModalOpen.value) {\n      return;\n    }\n\n    rootRef.value.focus();\n\n    focusElements.value = Array.from(rootRef.value.querySelectorAll<HTMLElement>(FOCUS_ELEMENTS_SELECTOR));\n    firstFocusElement.value = focusElements.value[0];\n    lastFocusElement.value = focusElements.value[focusElements.value.length - 1];\n\n    if (!isFocusTrapAttached) {\n      document.addEventListener('keydown', handleTab);\n      isFocusTrapAttached = true;\n    }\n  }\n\n  // Ensure the Tab key cycles through focusable elements within the modal only while it is open.\n  watch(rootRef, () => {\n    if (!rootRef.value || !isModalOpen.value) {\n      return;\n    }\n\n    setupFocusTrap();\n  });\n\n  /**\n   * The customer support \"help widget launcher\" covers the action buttons in the Modal when the Modal uses a position value of \"right\" (for drawers).\n   */\n  function toggleHelpWidgetLauncher(nextState: 'show' | 'hide') {\n    if (typeof document === 'undefined') {\n      return;\n    }\n    const launcherElement = document.getElementById('launcher');\n\n    if (!launcherElement || !launcherElement.parentElement) {\n      return;\n    }\n\n    launcherElement.parentElement.style.display = nextState === 'show' ? 'block' : 'none';\n  }\n</script>\n\n<template>\n  <div\n    v-if=\"isModalOpen\"\n    ref=\"rootRef\"\n    class=\"stash-modal fixed inset-0\"\n    :class=\"{\n      'invisible z-behind': !isModalOpen,\n      'visible z-modal': isModalOpen,\n      'lg:flex lg:flex-col lg:items-center lg:justify-center': props.position === 'center',\n      'overflow-y-auto': !props.scrollable && !isDrawer,\n      'overflow-y-hidden': isDrawer,\n    }\"\n    data-test=\"ll-modal\"\n    tabindex=\"0\"\n    @keydown.esc=\"dismiss\"\n  >\n    <Backdrop class=\"stash-modal__backdrop\" @click.stop=\"dismiss\" />\n    <div\n      aria-modal=\"true\"\n      role=\"dialog\"\n      :aria-labelledby=\"headerId\"\n      class=\"stash-modal__dialog relative flex h-screen w-full flex-col lg:shadow-3xl\"\n      :class=\"[\n        `stash-modal__dialog--size-${props.size}`,\n        `stash-modal__dialog--position-${props.position}`,\n        {\n          'stash-modal__dialog--is-open': isModalOpen,\n          'stash-modal__dialog--is-drawer': isDrawer,\n          'stash-modal__dialog--is-contrast': props.contrast,\n          'stash-modal__dialog--is-scrollable': props.scrollable,\n          'lg:w-[360px]': props.size === 'narrow',\n          'lg:w-[648px]': props.size === 'medium',\n          'lg:w-[960px]': props.size === 'wide',\n          'lg:my-0 lg:h-auto lg:max-h-[90vh]': props.position === 'center',\n          // absolute causing this to break when items in bottom of container get focus\n          'lg:fixed lg:h-screen': isDrawer,\n          'lg:left-0': props.position === 'left',\n          'lg:right-0': props.position === 'right',\n        },\n      ]\"\n      @click.stop\n    >\n      <header\n        v-if=\"!props.hideHeader\"\n        data-test=\"stash-modal__header\"\n        class=\"stash-modal__header grid h-12 place-items-center bg-purple-500\"\n        :class=\"{ 'lg:rounded-t': !isDrawer }\"\n      >\n        <div class=\"flex place-items-center\">\n          <!-- @slot Adds an action to the left side of the header bar. An example usage is a modal with multiple pages and a back button can be inserted here -->\n          <slot name=\"headerAction\"></slot>\n        </div>\n\n        <h3 v-if=\"props.title\" :id=\"headerId\" class=\"m-0 flex-1 leading-6 text-white\">\n          {{ props.title }}\n        </h3>\n\n        <Button\n          v-if=\"!props.hideClose\"\n          icon\n          data-test=\"ll-modal-close\"\n          :title=\"t('ll.closeModal')\"\n          type=\"button\"\n          @click=\"dismiss\"\n        >\n          <Icon class=\"text-white\" name=\"close\" />\n        </Button>\n      </header>\n\n      <Button\n        v-if=\"!props.hideClose && props.hideHeader\"\n        class=\"absolute right-0 top-0 z-10\"\n        icon\n        data-test=\"ll-modal-close\"\n        type=\"button\"\n        :title=\"t('ll.closeModal')\"\n        @click=\"dismiss\"\n      >\n        <Icon class=\"drop-shadow-md\" name=\"close\" :class=\"[props.closeButtonColorClass]\" />\n      </Button>\n\n      <div\n        v-if=\"!!slots['featured-content']\"\n        class=\"stash-modal__featured-content relative\"\n        :class=\"{\n          'rounded-t': props.hideHeader,\n        }\"\n      >\n        <slot name=\"featured-content\"></slot>\n      </div>\n\n      <div\n        class=\"stash-modal__body flex-1 overflow-y-auto\"\n        :class=\"[\n          {\n            'p-3 lg:p-6': !props.disableBodyPadding,\n            'lg:overflow-y-visible': !props.scrollable && !isDrawer,\n            'lg:rounded-b': !hasFooterContent && !isDrawer,\n            'bg-white': !props.contrast,\n            'bg-ice-200': props.contrast,\n          },\n        ]\"\n        data-test=\"stash-modal__body\"\n      >\n        <slot></slot>\n      </div>\n\n      <footer\n        v-if=\"hasFooterContent\"\n        class=\"stash-modal__footer border-t border-ice-500 bg-ice-100 p-3 lg:p-6\"\n        :class=\"{ 'lg:rounded-b': !isDrawer }\"\n      >\n        <!-- @slot Overrides the whole footer section. Used for rendering custom footers with more than 2 actions. If defined, \"actions\" slot will get ignored. -->\n        <slot name=\"footer\">\n          <div class=\"stash-modal__footer__actions flex justify-end\">\n            <!-- @slot Modal footer actions, supports rendering up to 2 `<Button>` children -->\n            <slot name=\"actions\"></slot>\n          </div>\n        </slot>\n      </footer>\n    </div>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    :global(:where(.stash-modal) .stash-modal__header) {\n      grid-template-columns: 48px 1fr 48px;\n    }\n\n    /* Direction lives here (not Tailwind flex-col / lg:flex-row on the template) so utilities don’t fight column-reverse */\n    :global(:where(.stash-modal) .stash-modal__footer__actions) {\n      flex-direction: column-reverse;\n      gap: --spacing(3);\n    }\n\n    @media (width >= theme(--breakpoint-lg)) {\n      :global(:where(.stash-modal) .stash-modal__footer__actions) {\n        flex-direction: row;\n        gap: var(--grid-gutter);\n      }\n    }\n\n    :global(:where(.stash-modal) .stash-modal__featured-content > *) {\n      border-radius: inherit;\n    }\n  }\n</style>\n"],"names":["ModalSize","ModalPosition","props","__props","emit","__emit","slots","useSlots","rootRef","ref","lastExternalFocusedElement","focusElements","firstFocusElement","lastFocusElement","initialPageScrollingElementStyle","headerId","uniqueId","hasFooterContent","computed","isModalOpen","isDrawer","isFocusTrapAttached","getPageScrollingElement","watch","toggleHelpWidgetLauncher","active","handleTab","_a","onBeforeUnmount","dismiss","e","_b","setupFocusTrap","FOCUS_ELEMENTS_SELECTOR","nextState","launcherElement","_createElementBlock","_createVNode","Backdrop","_createElementVNode","_unref","_normalizeClass","_hoisted_2","_renderSlot","_ctx","_toDisplayString","_hoisted_3","_createBlock","Button","t","Icon","_hoisted_4"],"mappings":"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"}

package/dist/Modals.js

@@ -1,37 +1,41 @@
-import { defineComponent as d, computed as u, createBlock as s, openBlock as r, Transition as m, withCtx as a, createCommentVNode as p, resolveDynamicComponent as _, mergeProps as f, toHandlers as v, createSlots as x, renderList as M, createElementVNode as L } from "vue";
-import C from "./useModals.js";
-import { _ as h } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const k = ["innerHTML"], H = /* @__PURE__ */ d({
+import { defineComponent as i, computed as d, createElementBlock as u, openBlock as n, createVNode as m, Transition as _, withCtx as r, createBlock as p, createCommentVNode as f, resolveDynamicComponent as v, mergeProps as M, toHandlers as x, createSlots as h, renderList as L, createElementVNode as k } from "vue";
+import y from "./useModals.js";
+import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const B = { class: "stash-modals" }, H = ["innerHTML"], N = /* @__PURE__ */ i({
   __name: "Modals",
-  setup(T) {
-    const t = C(), e = u(() => t.current);
-    function c(n) {
+  setup(b) {
+    const t = y(), e = d(() => t.current);
+    function c(s) {
       var o;
-      return (o = n.options) != null && o.disableDefaultListeners ? {} : {
+      return (o = s.options) != null && o.disableDefaultListeners ? {} : {
         dismiss: () => t.close({ index: 0 }),
         close: () => t.close({ index: 0 }),
         cancel: () => t.close({ index: 0 })
       };
     }
-    return (n, o) => (r(), s(m, {
-      name: "modals",
-      mode: "out-in"
-    }, {
-      default: a(() => [
-        e.value ? (r(), s(_(e.value.component), f({ key: 0 }, e.value.attributes, { "is-open": !0 }, v(c(e.value))), x({ _: 2 }, [
-          M(e.value.slots, (l, i) => ({
-            name: i,
-            fn: a(() => [
-              L("div", { innerHTML: l }, null, 8, k)
-            ])
-          }))
-        ]), 1040)) : p("", !0)
-      ]),
-      _: 1
-    }));
+    return (s, o) => (n(), u("div", B, [
+      m(_, {
+        name: "modals",
+        mode: "out-in"
+      }, {
+        default: r(() => [
+          e.value ? (n(), p(v(e.value.component), M({ key: 0 }, e.value.attributes, { "is-open": !0 }, x(c(e.value))), h({ _: 2 }, [
+            L(e.value.slots, (l, a) => ({
+              name: a,
+              fn: r(() => [
+                k("div", { innerHTML: l }, null, 8, H)
+              ])
+            }))
+          ]), 1040)) : f("", !0)
+        ]),
+        _: 1
+      })
+    ]));
   }
-}), B = /* @__PURE__ */ h(H, [["__scopeId", "data-v-27678e71"]]);
+}), T = {}, V = {
+  $style: T
+}, w = /* @__PURE__ */ C(N, [["__cssModules", V]]);
 export {
-  B as default
+  w as default
 };
 //# sourceMappingURL=Modals.js.map

package/dist/Modals.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modals.js","sources":["../src/components/Modals/Modals.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, DeepReadonly } from 'vue';\n\n  import useModals, { type Modal } from '../../composables/useModals/useModals';\n\n  const modals = useModals();\n\n  const currentModal = computed(() => modals.current);\n\n  // Stupid TS version issues. Todo: remove ` | any` when TS/vite/vue deps are updated.\n\n  function getListeners(modal: DeepReadonly<Modal> | any) {\n    if (modal.options?.disableDefaultListeners) {\n      return {};\n    }\n\n    return {\n      dismiss: () => modals.close({ index: 0 }),\n      close: () => modals.close({ index: 0 }),\n      cancel: () => modals.close({ index: 0 }),\n    };\n  }\n</script>\n\n<template>\n  <Transition name=\"modals\" mode=\"out-in\">\n    <component\n      :is=\"currentModal.component\"\n      v-if=\"currentModal\"\n      v-bind=\"currentModal.attributes\"\n      :is-open=\"true\"\n      v-on=\"getListeners(currentModal)\"\n    >\n      <template v-for=\"(value, name) in currentModal.slots\" :key=\"name\" #[name]>\n        <!-- eslint-disable-next-line vue/no-v-html -->\n        <div v-html=\"value\" />\n      </template>\n    </component>\n  </Transition>\n</template>\n\n<style scoped>\n  @layer utilities {\n    .modals-enter-active,\n    .modals-leave-active {\n      --swing-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1); /* \"swing\" from the $transition sass map */\n      transition: opacity 165ms var(--swing-timing-function);\n    }\n\n    .modals-enter-from,\n    .modals-leave-to {\n      opacity: 0;\n    }\n\n    .modals-enter-active :deep(.stash-modal__dialog--position-center),\n    .modals-leave-active :deep(.stash-modal__dialog--position-center) {\n      transition: transform 165ms var(--swing-timing-function);\n    }\n\n    .modals-enter-from :deep(.stash-modal__dialog--position-center),\n    .modals-leave-to :deep(.stash-modal__dialog--position-center) {\n      transform: translateY(20px);\n    }\n\n    .modals-enter-active :deep(.stash-modal__dialog--is-drawer),\n    .modals-leave-active :deep(.stash-modal__dialog--is-drawer) {\n      transition: transform 165ms var(--swing-timing-function);\n    }\n\n    .modals-enter-from :deep(.stash-modal__dialog--position-left),\n    .modals-leave-to :deep(.stash-modal__dialog--position-left) {\n      transform: translateX(-50px);\n    }\n\n    .modals-enter-from :deep(.stash-modal__dialog--position-right),\n    .modals-leave-to :deep(.stash-modal__dialog--position-right) {\n      transform: translateX(50px);\n    }\n  }\n</style>\n"],"names":["modals","useModals","currentModal","computed","getListeners","modal","_a","_createBlock","_Transition","_openBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_createSlots","_renderList","value","name","_createElementVNode","_hoisted_1"],"mappings":";;;;;;AAKE,UAAMA,IAASC,EAAA,GAETC,IAAeC,EAAS,MAAMH,EAAO,OAAO;AAIlD,aAASI,EAAaC,GAAkC;;AACtD,cAAIC,IAAAD,EAAM,YAAN,QAAAC,EAAe,0BACV,CAAA,IAGF;AAAA,QACL,SAAS,MAAMN,EAAO,MAAM,EAAE,OAAO,GAAG;AAAA,QACxC,OAAO,MAAMA,EAAO,MAAM,EAAE,OAAO,GAAG;AAAA,QACtC,QAAQ,MAAMA,EAAO,MAAM,EAAE,OAAO,GAAG;AAAA,MAAA;AAAA,IAE3C;2BAIAO,EAaaC,GAAA;AAAA,MAbD,MAAK;AAAA,MAAS,MAAK;AAAA,IAAA;iBAC7B,MAWY;AAAA,QATJN,EAAA,SAFRO,EAAA,GAAAF,EAWYG,EAVLR,EAAA,MAAa,SAAS,GAD7BS,EAWY,YARFT,EAAA,MAAa,YAAU,EAC9B,WAAS,GAAA,GACVU,EAAMR,EAAaF,EAAA,KAAY,CAAA,CAAA,GAAAW,EAAA,EAAA,GAAA,KAAA;AAAA,UAEGC,EAAAZ,EAAA,MAAa,OAAK,CAAlCa,GAAOC;;kBAEvB,MAAsB;AAAA,cAAtBC,EAAsB,OAAA,EAAjB,WAAQF,KAAK,MAAA,GAAAG,CAAA;AAAA,YAAA;;;;;;;;"}
+{"version":3,"file":"Modals.js","sources":["../src/components/Modals/Modals.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, DeepReadonly } from 'vue';\n\n  import useModals, { type Modal } from '../../composables/useModals/useModals';\n\n  const modals = useModals();\n\n  const currentModal = computed(() => modals.current);\n\n  // Stupid TS version issues. Todo: remove ` | any` when TS/vite/vue deps are updated.\n\n  function getListeners(modal: DeepReadonly<Modal> | any) {\n    if (modal.options?.disableDefaultListeners) {\n      return {};\n    }\n\n    return {\n      dismiss: () => modals.close({ index: 0 }),\n      close: () => modals.close({ index: 0 }),\n      cancel: () => modals.close({ index: 0 }),\n    };\n  }\n</script>\n\n<template>\n  <div class=\"stash-modals\">\n    <Transition name=\"modals\" mode=\"out-in\">\n      <component\n        :is=\"currentModal.component\"\n        v-if=\"currentModal\"\n        v-bind=\"currentModal.attributes\"\n        :is-open=\"true\"\n        v-on=\"getListeners(currentModal)\"\n      >\n        <template v-for=\"(value, name) in currentModal.slots\" :key=\"name\" #[name]>\n          <!-- eslint-disable-next-line vue/no-v-html -->\n          <div v-html=\"value\" />\n        </template>\n      </component>\n    </Transition>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    /* No layout box; keeps transition hook element in tree for scoped selectors */\n    :global(.stash-modals) {\n      display: contents;\n    }\n\n    :global(:where(.stash-modals) .modals-enter-active),\n    :global(:where(.stash-modals) .modals-leave-active) {\n      --swing-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1); /* \"swing\" from the $transition sass map */\n      transition: opacity 165ms var(--swing-timing-function);\n    }\n\n    :global(:where(.stash-modals) .modals-enter-from),\n    :global(:where(.stash-modals) .modals-leave-to) {\n      opacity: 0;\n    }\n\n    :global(:where(.stash-modals) .modals-enter-active .stash-modal__dialog--position-center),\n    :global(:where(.stash-modals) .modals-leave-active .stash-modal__dialog--position-center) {\n      transition: transform 165ms var(--swing-timing-function);\n    }\n\n    :global(:where(.stash-modals) .modals-enter-from .stash-modal__dialog--position-center),\n    :global(:where(.stash-modals) .modals-leave-to .stash-modal__dialog--position-center) {\n      transform: translateY(20px);\n    }\n\n    :global(:where(.stash-modals) .modals-enter-active .stash-modal__dialog--is-drawer),\n    :global(:where(.stash-modals) .modals-leave-active .stash-modal__dialog--is-drawer) {\n      transition: transform 165ms var(--swing-timing-function);\n    }\n\n    :global(:where(.stash-modals) .modals-enter-from .stash-modal__dialog--position-left),\n    :global(:where(.stash-modals) .modals-leave-to .stash-modal__dialog--position-left) {\n      transform: translateX(-50px);\n    }\n\n    :global(:where(.stash-modals) .modals-enter-from .stash-modal__dialog--position-right),\n    :global(:where(.stash-modals) .modals-leave-to .stash-modal__dialog--position-right) {\n      transform: translateX(50px);\n    }\n  }\n</style>\n"],"names":["modals","useModals","currentModal","computed","getListeners","modal","_a","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_Transition","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_createSlots","_renderList","value","name","_createElementVNode","_hoisted_2"],"mappings":";;;;;;AAKE,UAAMA,IAASC,EAAA,GAETC,IAAeC,EAAS,MAAMH,EAAO,OAAO;AAIlD,aAASI,EAAaC,GAAkC;;AACtD,cAAIC,IAAAD,EAAM,YAAN,QAAAC,EAAe,0BACV,CAAA,IAGF;AAAA,QACL,SAAS,MAAMN,EAAO,MAAM,EAAE,OAAO,GAAG;AAAA,QACxC,OAAO,MAAMA,EAAO,MAAM,EAAE,OAAO,GAAG;AAAA,QACtC,QAAQ,MAAMA,EAAO,MAAM,EAAE,OAAO,GAAG;AAAA,MAAA;AAAA,IAE3C;sBAIAO,EAAA,GAAAC,EAeM,OAfNC,GAeM;AAAA,MAdJC,EAaaC,GAAA;AAAA,QAbD,MAAK;AAAA,QAAS,MAAK;AAAA,MAAA;mBAC7B,MAWY;AAAA,UATJT,EAAA,SAFRK,EAAA,GAAAK,EAWYC,EAVLX,EAAA,MAAa,SAAS,GAD7BY,EAWY,YARFZ,EAAA,MAAa,YAAU,EAC9B,WAAS,GAAA,GACVa,EAAMX,EAAaF,EAAA,KAAY,CAAA,CAAA,GAAAc,EAAA,EAAA,GAAA,KAAA;AAAA,YAEGC,EAAAf,EAAA,MAAa,OAAK,CAAlCgB,GAAOC;;oBAEvB,MAAsB;AAAA,gBAAtBC,EAAsB,OAAA,EAAjB,WAAQF,KAAK,MAAA,GAAAG,CAAA;AAAA,cAAA;;;;;;;;;;;"}