vue-dialog-view 1.8.2 → 1.8.3

package/dist/cssless-obfuscated.es.js

@@ -1,11 +1,11 @@
-import { defineComponent as b, ref as g, computed as w, watch as y, nextTick as d, onMounted as B, onBeforeUnmount as k, openBlock as s, createElementBlock as n, mergeProps as C, createElementVNode as f, renderSlot as i, withModifiers as _, createCommentVNode as c } from "vue";
-const D = ["closedBy"], M = {
+import { defineComponent as y, ref as v, computed as B, watch as C, nextTick as s, onMounted as k, onBeforeUnmount as _, onDeactivated as D, onActivated as M, openBlock as n, createElementBlock as u, mergeProps as $, createElementVNode as p, renderSlot as c, withModifiers as E, createCommentVNode as f } from "vue";
+const T = ["closedBy"], N = {
   key: 0,
   class: "_4d394b1507fdc584"
-}, $ = { class: "_088d860d2fd75292" }, T = { class: "_da3b3b2a4aeed1ee" }, E = {
+}, O = { class: "_088d860d2fd75292" }, P = { class: "_da3b3b2a4aeed1ee" }, R = {
   key: 1,
   class: "_61879ba330d9a71c"
-}, N = /* @__PURE__ */ b({
+}, q = /* @__PURE__ */ y({
   __name: "DialogView.obf",
   props: {
     modelValue: { type: Boolean },
@@ -15,71 +15,81 @@ const D = ["closedBy"], M = {
     closeOnClickMask: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "closed"],
-  setup(a, { expose: r, emit: p }) {
-    const o = a, t = p, e = g(), m = () => {
+  setup(a, { expose: m, emit: h }) {
+    const o = a, t = h, e = v(), g = () => {
       t("update:modelValue", !0);
-    }, u = () => {
+    }, i = () => {
       t("update:modelValue", !1);
-    }, v = (l) => {
-      l.preventDefault(), o.closable && u();
-    }, h = () => {
-      if (!o.closable && o.modelValue) {
-        d(() => {
-          e.value && !e.value.open && e.value.showModal();
-        });
-        return;
+    }, V = (l) => {
+      l.preventDefault(), o.closable && i();
+    }, d = v(!1), b = () => {
+      if (!d.value) {
+        if (!o.closable && o.modelValue) {
+          s(() => {
+            e.value && !e.value.open && e.value.showModal();
+          });
+          return;
+        }
+        o.modelValue && t("update:modelValue", !1), s(() => {
+          o.modelValue && e.value && !e.value.open && e.value.showModal();
+        }), t("closed");
       }
-      o.modelValue && t("update:modelValue", !1), d(() => {
-        o.modelValue && e.value && !e.value.open && e.value.showModal();
-      }), t("closed");
-    }, V = w(() => o.closable ? o.closeOnClickMask ? "any" : "closerequest" : "none");
-    return y(() => o.modelValue, async (l) => {
-      await d(), l ? e.value && !e.value.open && e.value.showModal() : e.value && e.value.open && e.value.close();
-    }), B(() => {
+    }, w = B(() => o.closable ? o.closeOnClickMask ? "any" : "closerequest" : "none");
+    C(() => o.modelValue, async (l) => {
+      await s(), l ? e.value && !e.value.open && e.value.showModal() : e.value && e.value.open && e.value.close();
+    });
+    const r = () => {
       o.modelValue && e.value && !e.value.open && e.value.showModal();
-    }), k(() => {
+    };
+    return k(() => {
+      r();
+    }), _(() => {
       e.value && e.value.open && e.value.close();
-    }), r({
+    }), D(() => {
+      e.value && e.value.open && (d.value = !0, e.value.close(), s(() => d.value = !1));
+    }), M(() => {
+      r();
+    }), m({
       get: () => e.value,
-      open: m,
-      close: u
-    }), (l, O) => (s(), n("dialog", C({
+      open: g,
+      close: i
+    }), (l, A) => (n(), u("dialog", $({
       ref_key: "dialogRef",
       ref: e,
       class: "_b4102a3b79656a37"
     }, l.$attrs, {
-      onClose: h,
-      onCancel: v,
-      closedBy: V.value
+      onClose: b,
+      onCancel: V,
+      closedBy: w.value
     }), [
-      a.showTitleBar ? (s(), n("div", M, [
-        f("span", $, [
-          i(l.$slots, "title")
+      a.showTitleBar ? (n(), u("div", N, [
+        p("span", O, [
+          c(l.$slots, "title")
         ]),
-        a.showCloseButton && a.closable ? (s(), n("button", {
+        a.showCloseButton && a.closable ? (n(), u("button", {
           key: 0,
           type: "button",
           "aria-label": "Close the dialog",
           class: "_468ff1da37ead40a",
-          onClick: _(u, ["prevent"])
-        }, "×")) : c("", !0)
-      ])) : c("", !0),
-      f("div", T, [
-        i(l.$slots, "default")
+          onClick: E(i, ["prevent"])
+        }, "×")) : f("", !0)
+      ])) : f("", !0),
+      p("div", P, [
+        c(l.$slots, "default")
       ]),
-      l.$slots.footer ? (s(), n("div", E, [
-        i(l.$slots, "footer")
-      ])) : c("", !0)
-    ], 16, D));
+      l.$slots.footer ? (n(), u("div", R, [
+        c(l.$slots, "footer")
+      ])) : f("", !0)
+    ], 16, T));
   }
-}), R = {
+}), U = {
   install: (a) => {
-    a.component("DialogView", N);
+    a.component("DialogView", q);
   }
 };
 export {
-  N as DialogView,
-  R as DialogViewPlugin,
-  R as default
+  q as DialogView,
+  U as DialogViewPlugin,
+  U as default
 };
 //# sourceMappingURL=cssless-obfuscated.es.js.map

package/dist/cssless-obfuscated.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"cssless-obfuscated.es.js","sources":["../src/DialogView.obf.vue","../src/index.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"_b4102a3b79656a37\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n      <span class=\"_088d860d2fd75292\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_468ff1da37ead40a\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"_da3b3b2a4aeed1ee\">\n      <slot></slot>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst handleDialogClose = (): void => {\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nonMounted(() => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n._b4102a3b79656a37[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n._4d394b1507fdc584 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n._088d860d2fd75292 {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n._468ff1da37ead40a {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n._468ff1da37ead40a:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n._468ff1da37ead40a:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n._da3b3b2a4aeed1ee {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n._61879ba330d9a71c {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.obf.vue'\n\nexport { default as DialogView } from './DialogView.obf.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","handleDialogClose","nextTick","closedBy","computed","watch","newValue","onMounted","onBeforeUnmount","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":";;;;;;;;;;;;;;;;;;AA2CA,UAAMA,IAAQC,GAORC,IAAOC,GAKPC,IAAYC,EAAA,GAEZC,IAAa,MAAY;AAC7B,MAAAJ,EAAK,qBAAqB,EAAI;AAAA,IAChC,GAEMK,IAAc,MAAY;AAC9B,MAAAL,EAAK,qBAAqB,EAAK;AAAA,IACjC,GAEMM,IAAqB,CAACC,MAAa;AACvC,MAAAA,EAAE,eAAA,GACET,EAAM,YAAUO,EAAA;AAAA,IACtB,GAEMG,IAAoB,MAAY;AACpC,UAAI,CAACV,EAAM,YACLA,EAAM,YAAY;AAGpB,QAAAW,EAAS,MAAM;AACb,UAAIP,EAAU,SAAS,CAACA,EAAU,MAAM,QAAMA,EAAU,MAAM,UAAA;AAAA,QAChE,CAAC;AACD;AAAA,MACF;AAEF,MAAIJ,EAAM,cACRE,EAAK,qBAAqB,EAAK,GAEjCS,EAAS,MAAM;AACb,QAAIX,EAAM,cAEJI,EAAU,SAAS,CAACA,EAAU,MAAM,QAAMA,EAAU,MAAM,UAAA;AAAA,MAElE,CAAC,GACDF,EAAK,QAAQ;AAAA,IACf,GAEMU,IAAWC,EAAS,MAAMb,EAAM,WAAYA,EAAM,mBAAmB,QAAQ,iBAAkB,MAAM;AAE3G,WAAAc,EAAM,MAAMd,EAAM,YAAY,OAAOe,MAAsB;AACzD,YAAMJ,EAAA,GAEFI,IACEX,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA,IAGdA,EAAU,SAASA,EAAU,MAAM,QACrCA,EAAU,MAAM,MAAA;AAAA,IAGtB,CAAC,GAEDY,EAAU,MAAM;AACd,MAAIhB,EAAM,cACJI,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA;AAAA,IAGtB,CAAC,GAEDa,EAAgB,MAAM;AACpB,MAAIb,EAAU,SAASA,EAAU,MAAM,QACrCA,EAAU,MAAM,MAAA;AAAA,IAEpB,CAAC,GAEDc,EAAa;AAAA,MACX,KAAK,MAAMd,EAAU;AAAA,MACrB,MAAME;AAAA,MACN,OAAOC;AAAA,IAAA,CACR,cA9HCY,EAAA,GAAAC,EA4BS,UA5BTC,EA4BS;AAAA,eA3BH;AAAA,MAAJ,KAAIjB;AAAA,MACJ,OAAM;AAAA,IAAA,GACEkB,EAAAA,QAAM;AAAA,MACb,SAAOZ;AAAA,MACP,UAAQF;AAAA,MACR,UAAUI,EAAA;AAAA,IAAA;MAEAX,EAAA,gBAAXkB,EAAA,GAAAC,EAWM,OAXNG,GAWM;AAAA,QAVJC,EAEO,QAFPC,GAEO;AAAA,UADLC,EAA0BC,EAAA,QAAA,OAAA;AAAA,QAAA;QAGpB1B,EAAA,mBAAmBA,EAAA,iBAD3BmB,EAMiB,UAAA;AAAA;UAJf,MAAK;AAAA,UACL,cAAW;AAAA,UACX,OAAM;AAAA,UACL,WAAeb,GAAW,CAAA,SAAA,CAAA;AAAA,QAAA,GAC5B,GAAO;;MAGViB,EAEM,OAFNI,GAEM;AAAA,QADJF,EAAaC,EAAA,QAAA,SAAA;AAAA,MAAA;MAGJE,EAAAA,OAAO,UAAlBV,KAAAC,EAEM,OAFNU,GAEM;AAAA,QADJJ,EAA2BC,EAAA,QAAA,QAAA;AAAA,MAAA;;;ICtBpBI,IAA2B;AAAA,EACtC,SAAS,CAACC,MAAa;AACrB,IAAAA,EAAI,UAAU,cAAcC,CAAmB;AAAA,EACjD;AACF;"}
+{"version":3,"file":"cssless-obfuscated.es.js","sources":["../src/DialogView.obf.vue","../src/index.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"_b4102a3b79656a37\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n      <span class=\"_088d860d2fd75292\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_468ff1da37ead40a\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"_da3b3b2a4aeed1ee\">\n      <slot></slot>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n._b4102a3b79656a37[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n._4d394b1507fdc584 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n._088d860d2fd75292 {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n._468ff1da37ead40a {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n._468ff1da37ead40a:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n._468ff1da37ead40a:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n._da3b3b2a4aeed1ee {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n._61879ba330d9a71c {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.obf.vue'\n\nexport { default as DialogView } from './DialogView.obf.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","ignoreCloseEvent","handleDialogClose","nextTick","closedBy","computed","watch","newValue","initDialog","onMounted","onBeforeUnmount","onDeactivated","onActivated","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":"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"}

package/dist/cssless-obfuscated.umd.js

@@ -1,2 +1,2 @@
-(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.DialogView={},l.Vue))})(this,(function(l,e){"use strict";const u=["closedBy"],f={key:0,class:"_4d394b1507fdc584"},r={class:"_088d860d2fd75292"},m={class:"_da3b3b2a4aeed1ee"},p={key:1,class:"_61879ba330d9a71c"},d=e.defineComponent({__name:"DialogView.obf",props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0},closable:{type:Boolean,default:!0},closeOnClickMask:{type:Boolean,default:!1}},emits:["update:modelValue","closed"],setup(n,{expose:h,emit:V}){const a=n,s=V,o=e.ref(),B=()=>{s("update:modelValue",!0)},i=()=>{s("update:modelValue",!1)},k=t=>{t.preventDefault(),a.closable&&i()},g=()=>{if(!a.closable&&a.modelValue){e.nextTick(()=>{o.value&&!o.value.open&&o.value.showModal()});return}a.modelValue&&s("update:modelValue",!1),e.nextTick(()=>{a.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),s("closed")},y=e.computed(()=>a.closable?a.closeOnClickMask?"any":"closerequest":"none");return e.watch(()=>a.modelValue,async t=>{await e.nextTick(),t?o.value&&!o.value.open&&o.value.showModal():o.value&&o.value.open&&o.value.close()}),e.onMounted(()=>{a.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),e.onBeforeUnmount(()=>{o.value&&o.value.open&&o.value.close()}),h({get:()=>o.value,open:B,close:i}),(t,b)=>(e.openBlock(),e.createElementBlock("dialog",e.mergeProps({ref_key:"dialogRef",ref:o,class:"_b4102a3b79656a37"},t.$attrs,{onClose:g,onCancel:k,closedBy:y.value}),[n.showTitleBar?(e.openBlock(),e.createElementBlock("div",f,[e.createElementVNode("span",r,[e.renderSlot(t.$slots,"title")]),n.showCloseButton&&n.closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button","aria-label":"Close the dialog",class:"_468ff1da37ead40a",onClick:e.withModifiers(i,["prevent"])},"×")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",m,[e.renderSlot(t.$slots,"default")]),t.$slots.footer?(e.openBlock(),e.createElementBlock("div",p,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)],16,u))}}),c={install:n=>{n.component("DialogView",d)}};l.DialogView=d,l.DialogViewPlugin=c,l.default=c,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.DialogView={},l.Vue))})(this,(function(l,e){"use strict";const r=["closedBy"],m={key:0,class:"_4d394b1507fdc584"},p={class:"_088d860d2fd75292"},h={class:"_da3b3b2a4aeed1ee"},V={key:1,class:"_61879ba330d9a71c"},c=e.defineComponent({__name:"DialogView.obf",props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0},closable:{type:Boolean,default:!0},closeOnClickMask:{type:Boolean,default:!1}},emits:["update:modelValue","closed"],setup(n,{expose:g,emit:k}){const a=n,s=k,o=e.ref(),B=()=>{s("update:modelValue",!0)},i=()=>{s("update:modelValue",!1)},y=t=>{t.preventDefault(),a.closable&&i()},d=e.ref(!1),b=()=>{if(!d.value){if(!a.closable&&a.modelValue){e.nextTick(()=>{o.value&&!o.value.open&&o.value.showModal()});return}a.modelValue&&s("update:modelValue",!1),e.nextTick(()=>{a.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),s("closed")}},w=e.computed(()=>a.closable?a.closeOnClickMask?"any":"closerequest":"none");e.watch(()=>a.modelValue,async t=>{await e.nextTick(),t?o.value&&!o.value.open&&o.value.showModal():o.value&&o.value.open&&o.value.close()});const u=()=>{a.modelValue&&o.value&&!o.value.open&&o.value.showModal()};return e.onMounted(()=>{u()}),e.onBeforeUnmount(()=>{o.value&&o.value.open&&o.value.close()}),e.onDeactivated(()=>{o.value&&o.value.open&&(d.value=!0,o.value.close(),e.nextTick(()=>d.value=!1))}),e.onActivated(()=>{u()}),g({get:()=>o.value,open:B,close:i}),(t,C)=>(e.openBlock(),e.createElementBlock("dialog",e.mergeProps({ref_key:"dialogRef",ref:o,class:"_b4102a3b79656a37"},t.$attrs,{onClose:b,onCancel:y,closedBy:w.value}),[n.showTitleBar?(e.openBlock(),e.createElementBlock("div",m,[e.createElementVNode("span",p,[e.renderSlot(t.$slots,"title")]),n.showCloseButton&&n.closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button","aria-label":"Close the dialog",class:"_468ff1da37ead40a",onClick:e.withModifiers(i,["prevent"])},"×")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",h,[e.renderSlot(t.$slots,"default")]),t.$slots.footer?(e.openBlock(),e.createElementBlock("div",V,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)],16,r))}}),f={install:n=>{n.component("DialogView",c)}};l.DialogView=c,l.DialogViewPlugin=f,l.default=f,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
 //# sourceMappingURL=cssless-obfuscated.umd.js.map

package/dist/cssless-obfuscated.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"cssless-obfuscated.umd.js","sources":["../src/DialogView.obf.vue","../src/index.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"_b4102a3b79656a37\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n      <span class=\"_088d860d2fd75292\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_468ff1da37ead40a\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"_da3b3b2a4aeed1ee\">\n      <slot></slot>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst handleDialogClose = (): void => {\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nonMounted(() => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n._b4102a3b79656a37[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n._4d394b1507fdc584 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n._088d860d2fd75292 {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n._468ff1da37ead40a {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n._468ff1da37ead40a:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n._468ff1da37ead40a:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n._da3b3b2a4aeed1ee {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n._61879ba330d9a71c {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.obf.vue'\n\nexport { default as DialogView } from './DialogView.obf.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","handleDialogClose","nextTick","closedBy","computed","watch","newValue","onMounted","onBeforeUnmount","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":"usBA2CA,MAAMA,EAAQC,EAORC,EAAOC,EAKPC,EAAYC,EAAAA,IAAA,EAEZC,EAAa,IAAY,CAC7BJ,EAAK,oBAAqB,EAAI,CAChC,EAEMK,EAAc,IAAY,CAC9BL,EAAK,oBAAqB,EAAK,CACjC,EAEMM,EAAsBC,GAAa,CACvCA,EAAE,eAAA,EACET,EAAM,UAAUO,EAAA,CACtB,EAEMG,EAAoB,IAAY,CACpC,GAAI,CAACV,EAAM,UACLA,EAAM,WAAY,CAGpBW,EAAAA,SAAS,IAAM,CACTP,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAChE,CAAC,EACD,MACF,CAEEJ,EAAM,YACRE,EAAK,oBAAqB,EAAK,EAEjCS,EAAAA,SAAS,IAAM,CACTX,EAAM,YAEJI,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAElE,CAAC,EACDF,EAAK,QAAQ,CACf,EAEMU,EAAWC,WAAS,IAAMb,EAAM,SAAYA,EAAM,iBAAmB,MAAQ,eAAkB,MAAM,EAE3Gc,OAAAA,EAAAA,MAAM,IAAMd,EAAM,WAAY,MAAOe,GAAsB,CACzD,MAAMJ,WAAA,EAEFI,EACEX,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,EAGdA,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAGtB,CAAC,EAEDY,EAAAA,UAAU,IAAM,CACVhB,EAAM,YACJI,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAGtB,CAAC,EAEDa,EAAAA,gBAAgB,IAAM,CAChBb,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAEpB,CAAC,EAEDc,EAAa,CACX,IAAK,IAAMd,EAAU,MACrB,KAAME,EACN,MAAOC,CAAA,CACR,UA9HCY,YAAA,EAAAC,qBA4BS,SA5BTC,EAAAA,WA4BS,SA3BH,YAAJ,IAAIjB,EACJ,MAAM,mBAAA,EACEkB,EAAAA,OAAM,CACb,QAAOZ,EACP,SAAQF,EACR,SAAUI,EAAA,KAAA,IAEAX,EAAA,cAAXkB,EAAAA,UAAA,EAAAC,EAAAA,mBAWM,MAXNG,EAWM,CAVJC,EAAAA,mBAEO,OAFPC,EAEO,CADLC,aAA0BC,EAAA,OAAA,OAAA,CAAA,GAGpB1B,EAAA,iBAAmBA,EAAA,wBAD3BmB,EAAAA,mBAMiB,SAAA,OAJf,KAAK,SACL,aAAW,mBACX,MAAM,oBACL,wBAAeb,EAAW,CAAA,SAAA,CAAA,CAAA,EAC5B,GAAO,8DAGViB,EAAAA,mBAEM,MAFNI,EAEM,CADJF,aAAaC,EAAA,OAAA,SAAA,CAAA,GAGJE,EAAAA,OAAO,QAAlBV,EAAAA,YAAAC,EAAAA,mBAEM,MAFNU,EAEM,CADJJ,aAA2BC,EAAA,OAAA,QAAA,CAAA,2CCtBpBI,EAA2B,CACtC,QAAUC,GAAa,CACrBA,EAAI,UAAU,aAAcC,CAAmB,CACjD,CACF"}
+{"version":3,"file":"cssless-obfuscated.umd.js","sources":["../src/DialogView.obf.vue","../src/index.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"_b4102a3b79656a37\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n      <span class=\"_088d860d2fd75292\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_468ff1da37ead40a\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"_da3b3b2a4aeed1ee\">\n      <slot></slot>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n._b4102a3b79656a37[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n._4d394b1507fdc584 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n._088d860d2fd75292 {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n._468ff1da37ead40a {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n._468ff1da37ead40a:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n._468ff1da37ead40a:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n._da3b3b2a4aeed1ee {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n._61879ba330d9a71c {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.obf.vue'\n\nexport { default as DialogView } from './DialogView.obf.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","ignoreCloseEvent","handleDialogClose","nextTick","closedBy","computed","watch","newValue","initDialog","onMounted","onBeforeUnmount","onDeactivated","onActivated","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":"usBA2CA,MAAMA,EAAQC,EAORC,EAAOC,EAKPC,EAAYC,EAAAA,IAAA,EAEZC,EAAa,IAAY,CAC7BJ,EAAK,oBAAqB,EAAI,CAChC,EAEMK,EAAc,IAAY,CAC9BL,EAAK,oBAAqB,EAAK,CACjC,EAEMM,EAAsBC,GAAa,CACvCA,EAAE,eAAA,EACET,EAAM,UAAUO,EAAA,CACtB,EAEMG,EAAmBL,EAAAA,IAAI,EAAK,EAE5BM,EAAoB,IAAY,CACpC,GAAI,CAAAD,EAAiB,MACrB,IAAI,CAACV,EAAM,UACLA,EAAM,WAAY,CAGpBY,EAAAA,SAAS,IAAM,CACTR,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAChE,CAAC,EACD,MACF,CAEEJ,EAAM,YACRE,EAAK,oBAAqB,EAAK,EAEjCU,EAAAA,SAAS,IAAM,CACTZ,EAAM,YAEJI,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAElE,CAAC,EACDF,EAAK,QAAQ,EACf,EAEMW,EAAWC,WAAS,IAAMd,EAAM,SAAYA,EAAM,iBAAmB,MAAQ,eAAkB,MAAM,EAE3Ge,EAAAA,MAAM,IAAMf,EAAM,WAAY,MAAOgB,GAAsB,CACzD,MAAMJ,WAAA,EAEFI,EACEZ,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,EAGdA,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAGtB,CAAC,EAED,MAAMa,EAAa,IAAM,CACnBjB,EAAM,YACJI,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAGtB,EAEAc,OAAAA,EAAAA,UAAU,IAAM,CACdD,EAAA,CACF,CAAC,EAEDE,EAAAA,gBAAgB,IAAM,CAChBf,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAEpB,CAAC,EAEDgB,EAAAA,cAAc,IAAM,CACdhB,EAAU,OAASA,EAAU,MAAM,OACrCM,EAAiB,MAAQ,GACzBN,EAAU,MAAM,MAAA,EAChBQ,EAAAA,SAAS,IAAMF,EAAiB,MAAQ,EAAK,EAEjD,CAAC,EAEDW,EAAAA,YAAY,IAAM,CAChBJ,EAAA,CACF,CAAC,EAEDK,EAAa,CACX,IAAK,IAAMlB,EAAU,MACrB,KAAME,EACN,MAAOC,CAAA,CACR,UAjJCgB,YAAA,EAAAC,qBA4BS,SA5BTC,EAAAA,WA4BS,SA3BH,YAAJ,IAAIrB,EACJ,MAAM,mBAAA,EACEsB,EAAAA,OAAM,CACb,QAAOf,EACP,SAAQH,EACR,SAAUK,EAAA,KAAA,IAEAZ,EAAA,cAAXsB,EAAAA,UAAA,EAAAC,EAAAA,mBAWM,MAXNG,EAWM,CAVJC,EAAAA,mBAEO,OAFPC,EAEO,CADLC,aAA0BC,EAAA,OAAA,OAAA,CAAA,GAGpB9B,EAAA,iBAAmBA,EAAA,wBAD3BuB,EAAAA,mBAMiB,SAAA,OAJf,KAAK,SACL,aAAW,mBACX,MAAM,oBACL,wBAAejB,EAAW,CAAA,SAAA,CAAA,CAAA,EAC5B,GAAO,8DAGVqB,EAAAA,mBAEM,MAFNI,EAEM,CADJF,aAAaC,EAAA,OAAA,SAAA,CAAA,GAGJE,EAAAA,OAAO,QAAlBV,EAAAA,YAAAC,EAAAA,mBAEM,MAFNU,EAEM,CADJJ,aAA2BC,EAAA,OAAA,QAAA,CAAA,2CCtBpBI,EAA2B,CACtC,QAAUC,GAAa,CACrBA,EAAI,UAAU,aAAcC,CAAmB,CACjD,CACF"}

package/dist/cssless.es.js

@@ -1,11 +1,11 @@
-import { defineComponent as w, ref as V, computed as y, watch as B, nextTick as c, onMounted as k, onBeforeUnmount as C, openBlock as n, createElementBlock as i, mergeProps as _, createElementVNode as p, renderSlot as r, withModifiers as b, createCommentVNode as f } from "vue";
-const D = ["closedBy"], M = {
+import { defineComponent as B, ref as m, computed as C, watch as k, nextTick as n, onMounted as D, onBeforeUnmount as _, onDeactivated as b, onActivated as M, openBlock as i, createElementBlock as u, mergeProps as $, createElementVNode as g, renderSlot as f, withModifiers as E, createCommentVNode as v } from "vue";
+const O = ["closedBy"], T = {
   key: 0,
   class: "dialog-title-bar"
-}, $ = { class: "dialog-title" }, O = { class: "dialog-content" }, T = {
+}, N = { class: "dialog-title" }, P = { class: "dialog-content" }, R = {
   key: 1,
   class: "dialog-footer"
-}, E = /* @__PURE__ */ w({
+}, q = /* @__PURE__ */ B({
   __name: "DialogView",
   props: {
     modelValue: { type: Boolean },
@@ -15,76 +15,86 @@ const D = ["closedBy"], M = {
     closeOnClickMask: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "closed"],
-  setup(l, { expose: u, emit: s }) {
-    const o = l, t = s, e = V(), v = () => {
+  setup(l, { expose: c, emit: s }) {
+    const o = l, t = s, e = m(), h = () => {
       t("update:modelValue", !0);
     }, d = () => {
       t("update:modelValue", !1);
-    }, m = (a) => {
+    }, w = (a) => {
       a.preventDefault(), o.closable && d();
-    }, g = () => {
-      if (!o.closable && o.modelValue) {
-        c(() => {
-          e.value && !e.value.open && e.value.showModal();
-        });
-        return;
+    }, r = m(!1), V = () => {
+      if (!r.value) {
+        if (!o.closable && o.modelValue) {
+          n(() => {
+            e.value && !e.value.open && e.value.showModal();
+          });
+          return;
+        }
+        o.modelValue && t("update:modelValue", !1), n(() => {
+          o.modelValue && e.value && !e.value.open && e.value.showModal();
+        }), t("closed");
       }
-      o.modelValue && t("update:modelValue", !1), c(() => {
-        o.modelValue && e.value && !e.value.open && e.value.showModal();
-      }), t("closed");
-    }, h = y(() => o.closable ? o.closeOnClickMask ? "any" : "closerequest" : "none");
-    return B(() => o.modelValue, async (a) => {
-      await c(), a ? e.value && !e.value.open && e.value.showModal() : e.value && e.value.open && e.value.close();
-    }), k(() => {
+    }, y = C(() => o.closable ? o.closeOnClickMask ? "any" : "closerequest" : "none");
+    k(() => o.modelValue, async (a) => {
+      await n(), a ? e.value && !e.value.open && e.value.showModal() : e.value && e.value.open && e.value.close();
+    });
+    const p = () => {
       o.modelValue && e.value && !e.value.open && e.value.showModal();
-    }), C(() => {
+    };
+    return D(() => {
+      p();
+    }), _(() => {
       e.value && e.value.open && e.value.close();
-    }), u({
+    }), b(() => {
+      e.value && e.value.open && (r.value = !0, e.value.close(), n(() => r.value = !1));
+    }), M(() => {
+      p();
+    }), c({
       get: () => e.value,
-      open: v,
+      open: h,
       close: d
-    }), (a, R) => (n(), i("dialog", _({
+    }), (a, S) => (i(), u("dialog", $({
       ref_key: "dialogRef",
       ref: e,
       class: "dialog-view"
     }, a.$attrs, {
-      onClose: g,
-      onCancel: m,
-      closedBy: h.value
+      onClose: V,
+      onCancel: w,
+      closedBy: y.value
     }), [
-      l.showTitleBar ? (n(), i("div", M, [
-        p("span", $, [
-          r(a.$slots, "title", {}, void 0, !0)
+      l.showTitleBar ? (i(), u("div", T, [
+        g("span", N, [
+          f(a.$slots, "title", {}, void 0, !0)
         ]),
-        l.showCloseButton && l.closable ? (n(), i("button", {
+        l.showCloseButton && l.closable ? (i(), u("button", {
           key: 0,
           type: "button",
           "aria-label": "Close the dialog",
           class: "dialog-close-button",
-          onClick: b(d, ["prevent"])
-        }, "×")) : f("", !0)
-      ])) : f("", !0),
-      p("div", O, [
-        r(a.$slots, "default", {}, void 0, !0)
+          onClick: E(d, ["prevent"])
+        }, "×")) : v("", !0)
+      ])) : v("", !0),
+      g("div", P, [
+        f(a.$slots, "default", {}, void 0, !0)
       ]),
-      a.$slots.footer ? (n(), i("div", T, [
-        r(a.$slots, "footer", {}, void 0, !0)
-      ])) : f("", !0)
-    ], 16, D));
+      a.$slots.footer ? (i(), u("div", R, [
+        f(a.$slots, "footer", {}, void 0, !0)
+      ])) : v("", !0)
+    ], 16, O));
   }
-}), N = (l, u) => {
+}), A = (l, c) => {
   const s = l.__vccOpts || l;
-  for (const [o, t] of u)
+  for (const [o, t] of c)
     s[o] = t;
   return s;
-}, P = /* @__PURE__ */ N(E, [["__scopeId", "data-v-da4085e6"]]), I = {
+}, I = /* @__PURE__ */ A(q, [["__scopeId", "data-v-7641dcfa"]]), j = {
   install: (l) => {
-    l.component("DialogView", P);
+    l.component("DialogView", I);
   }
 };
 export {
-  P as DialogView,
-  I as DialogViewPlugin,
-  I as default
+  I as DialogView,
+  j as DialogViewPlugin,
+  j as default
 };
 //# sourceMappingURL=cssless.es.js.map

package/dist/cssless.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"cssless.es.js","sources":["../src/DialogView.vue","../src/unobfuscated.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"dialog-view\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"dialog-title-bar\">\n      <span class=\"dialog-title\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"dialog-close-button\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"dialog-content\">\n      <slot></slot>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"dialog-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst handleDialogClose = (): void => {\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nonMounted(() => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style scoped>\n.dialog-view {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.dialog-view[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-view::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.dialog-title-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n.dialog-title {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dialog-close-button {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n.dialog-close-button:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n.dialog-close-button:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n.dialog-content {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-footer {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.vue'\n\nexport { default as DialogView } from './DialogView.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","handleDialogClose","nextTick","closedBy","computed","watch","newValue","onMounted","onBeforeUnmount","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":";;;;;;;;;;;;;;;;;;AA2CA,UAAMA,IAAQC,GAORC,IAAOC,GAKPC,IAAYC,EAAA,GAEZC,IAAa,MAAY;AAC7B,MAAAJ,EAAK,qBAAqB,EAAI;AAAA,IAChC,GAEMK,IAAc,MAAY;AAC9B,MAAAL,EAAK,qBAAqB,EAAK;AAAA,IACjC,GAEMM,IAAqB,CAACC,MAAa;AACvC,MAAAA,EAAE,eAAA,GACET,EAAM,YAAUO,EAAA;AAAA,IACtB,GAEMG,IAAoB,MAAY;AACpC,UAAI,CAACV,EAAM,YACLA,EAAM,YAAY;AAGpB,QAAAW,EAAS,MAAM;AACb,UAAIP,EAAU,SAAS,CAACA,EAAU,MAAM,QAAMA,EAAU,MAAM,UAAA;AAAA,QAChE,CAAC;AACD;AAAA,MACF;AAEF,MAAIJ,EAAM,cACRE,EAAK,qBAAqB,EAAK,GAEjCS,EAAS,MAAM;AACb,QAAIX,EAAM,cAEJI,EAAU,SAAS,CAACA,EAAU,MAAM,QAAMA,EAAU,MAAM,UAAA;AAAA,MAElE,CAAC,GACDF,EAAK,QAAQ;AAAA,IACf,GAEMU,IAAWC,EAAS,MAAMb,EAAM,WAAYA,EAAM,mBAAmB,QAAQ,iBAAkB,MAAM;AAE3G,WAAAc,EAAM,MAAMd,EAAM,YAAY,OAAOe,MAAsB;AACzD,YAAMJ,EAAA,GAEFI,IACEX,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA,IAGdA,EAAU,SAASA,EAAU,MAAM,QACrCA,EAAU,MAAM,MAAA;AAAA,IAGtB,CAAC,GAEDY,EAAU,MAAM;AACd,MAAIhB,EAAM,cACJI,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA;AAAA,IAGtB,CAAC,GAEDa,EAAgB,MAAM;AACpB,MAAIb,EAAU,SAASA,EAAU,MAAM,QACrCA,EAAU,MAAM,MAAA;AAAA,IAEpB,CAAC,GAEDc,EAAa;AAAA,MACX,KAAK,MAAMd,EAAU;AAAA,MACrB,MAAME;AAAA,MACN,OAAOC;AAAA,IAAA,CACR,cA9HCY,EAAA,GAAAC,EA4BS,UA5BTC,EA4BS;AAAA,eA3BH;AAAA,MAAJ,KAAIjB;AAAA,MACJ,OAAM;AAAA,IAAA,GACEkB,EAAAA,QAAM;AAAA,MACb,SAAOZ;AAAA,MACP,UAAQF;AAAA,MACR,UAAUI,EAAA;AAAA,IAAA;MAEAX,EAAA,gBAAXkB,EAAA,GAAAC,EAWM,OAXNG,GAWM;AAAA,QAVJC,EAEO,QAFPC,GAEO;AAAA,UADLC,EAA0BC,EAAA,QAAA,SAAA,CAAA,GAAA,QAAA,EAAA;AAAA,QAAA;QAGpB1B,EAAA,mBAAmBA,EAAA,iBAD3BmB,EAMiB,UAAA;AAAA;UAJf,MAAK;AAAA,UACL,cAAW;AAAA,UACX,OAAM;AAAA,UACL,WAAeb,GAAW,CAAA,SAAA,CAAA;AAAA,QAAA,GAC5B,GAAO;;MAGViB,EAEM,OAFNI,GAEM;AAAA,QADJF,EAAaC,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,MAAA;MAGJE,EAAAA,OAAO,UAAlBV,KAAAC,EAEM,OAFNU,GAEM;AAAA,QADJJ,EAA2BC,EAAA,QAAA,UAAA,CAAA,GAAA,QAAA,EAAA;AAAA,MAAA;;;;;;;;iECtBpBI,IAA2B;AAAA,EACtC,SAAS,CAACC,MAAa;AACrB,IAAAA,EAAI,UAAU,cAAcC,CAAmB;AAAA,EACjD;AACF;"}
+{"version":3,"file":"cssless.es.js","sources":["../src/DialogView.vue","../src/unobfuscated.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"dialog-view\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"dialog-title-bar\">\n      <span class=\"dialog-title\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"dialog-close-button\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"dialog-content\">\n      <slot></slot>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"dialog-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style scoped>\n.dialog-view {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.dialog-view[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-view::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.dialog-title-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n.dialog-title {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dialog-close-button {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n.dialog-close-button:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n.dialog-close-button:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n.dialog-content {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-footer {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.vue'\n\nexport { default as DialogView } from './DialogView.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","ignoreCloseEvent","handleDialogClose","nextTick","closedBy","computed","watch","newValue","initDialog","onMounted","onBeforeUnmount","onDeactivated","onActivated","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":"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"}

package/dist/cssless.umd.js

@@ -1,2 +1,2 @@
-(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.DialogView={},t.Vue))})(this,(function(t,e){"use strict";const f=["closedBy"],p={key:0,class:"dialog-title-bar"},m={class:"dialog-title"},g={class:"dialog-content"},V={key:1,class:"dialog-footer"},r=((a,c)=>{const i=a.__vccOpts||a;for(const[l,s]of c)i[l]=s;return i})(e.defineComponent({__name:"DialogView",props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0},closable:{type:Boolean,default:!0},closeOnClickMask:{type:Boolean,default:!1}},emits:["update:modelValue","closed"],setup(a,{expose:c,emit:i}){const l=a,s=i,o=e.ref(),h=()=>{s("update:modelValue",!0)},d=()=>{s("update:modelValue",!1)},k=n=>{n.preventDefault(),l.closable&&d()},B=()=>{if(!l.closable&&l.modelValue){e.nextTick(()=>{o.value&&!o.value.open&&o.value.showModal()});return}l.modelValue&&s("update:modelValue",!1),e.nextTick(()=>{l.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),s("closed")},w=e.computed(()=>l.closable?l.closeOnClickMask?"any":"closerequest":"none");return e.watch(()=>l.modelValue,async n=>{await e.nextTick(),n?o.value&&!o.value.open&&o.value.showModal():o.value&&o.value.open&&o.value.close()}),e.onMounted(()=>{l.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),e.onBeforeUnmount(()=>{o.value&&o.value.open&&o.value.close()}),c({get:()=>o.value,open:h,close:d}),(n,C)=>(e.openBlock(),e.createElementBlock("dialog",e.mergeProps({ref_key:"dialogRef",ref:o,class:"dialog-view"},n.$attrs,{onClose:B,onCancel:k,closedBy:w.value}),[a.showTitleBar?(e.openBlock(),e.createElementBlock("div",p,[e.createElementVNode("span",m,[e.renderSlot(n.$slots,"title",{},void 0,!0)]),a.showCloseButton&&a.closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button","aria-label":"Close the dialog",class:"dialog-close-button",onClick:e.withModifiers(d,["prevent"])},"×")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",g,[e.renderSlot(n.$slots,"default",{},void 0,!0)]),n.$slots.footer?(e.openBlock(),e.createElementBlock("div",V,[e.renderSlot(n.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],16,f))}}),[["__scopeId","data-v-da4085e6"]]),u={install:a=>{a.component("DialogView",r)}};t.DialogView=r,t.DialogViewPlugin=u,t.default=u,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.DialogView={},t.Vue))})(this,(function(t,e){"use strict";const m=["closedBy"],g={key:0,class:"dialog-title-bar"},V={class:"dialog-title"},h={class:"dialog-content"},k={key:1,class:"dialog-footer"},u=((a,c)=>{const i=a.__vccOpts||a;for(const[l,s]of c)i[l]=s;return i})(e.defineComponent({__name:"DialogView",props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0},closable:{type:Boolean,default:!0},closeOnClickMask:{type:Boolean,default:!1}},emits:["update:modelValue","closed"],setup(a,{expose:c,emit:i}){const l=a,s=i,o=e.ref(),B=()=>{s("update:modelValue",!0)},d=()=>{s("update:modelValue",!1)},w=n=>{n.preventDefault(),l.closable&&d()},r=e.ref(!1),y=()=>{if(!r.value){if(!l.closable&&l.modelValue){e.nextTick(()=>{o.value&&!o.value.open&&o.value.showModal()});return}l.modelValue&&s("update:modelValue",!1),e.nextTick(()=>{l.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),s("closed")}},_=e.computed(()=>l.closable?l.closeOnClickMask?"any":"closerequest":"none");e.watch(()=>l.modelValue,async n=>{await e.nextTick(),n?o.value&&!o.value.open&&o.value.showModal():o.value&&o.value.open&&o.value.close()});const p=()=>{l.modelValue&&o.value&&!o.value.open&&o.value.showModal()};return e.onMounted(()=>{p()}),e.onBeforeUnmount(()=>{o.value&&o.value.open&&o.value.close()}),e.onDeactivated(()=>{o.value&&o.value.open&&(r.value=!0,o.value.close(),e.nextTick(()=>r.value=!1))}),e.onActivated(()=>{p()}),c({get:()=>o.value,open:B,close:d}),(n,D)=>(e.openBlock(),e.createElementBlock("dialog",e.mergeProps({ref_key:"dialogRef",ref:o,class:"dialog-view"},n.$attrs,{onClose:y,onCancel:w,closedBy:_.value}),[a.showTitleBar?(e.openBlock(),e.createElementBlock("div",g,[e.createElementVNode("span",V,[e.renderSlot(n.$slots,"title",{},void 0,!0)]),a.showCloseButton&&a.closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button","aria-label":"Close the dialog",class:"dialog-close-button",onClick:e.withModifiers(d,["prevent"])},"×")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",h,[e.renderSlot(n.$slots,"default",{},void 0,!0)]),n.$slots.footer?(e.openBlock(),e.createElementBlock("div",k,[e.renderSlot(n.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],16,m))}}),[["__scopeId","data-v-7641dcfa"]]),f={install:a=>{a.component("DialogView",u)}};t.DialogView=u,t.DialogViewPlugin=f,t.default=f,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
 //# sourceMappingURL=cssless.umd.js.map

package/dist/cssless.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"cssless.umd.js","sources":["../src/DialogView.vue","../src/unobfuscated.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"dialog-view\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"dialog-title-bar\">\n      <span class=\"dialog-title\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"dialog-close-button\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"dialog-content\">\n      <slot></slot>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"dialog-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst handleDialogClose = (): void => {\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nonMounted(() => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style scoped>\n.dialog-view {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.dialog-view[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-view::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.dialog-title-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n.dialog-title {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dialog-close-button {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n.dialog-close-button:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n.dialog-close-button:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n.dialog-content {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-footer {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.vue'\n\nexport { default as DialogView } from './DialogView.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","handleDialogClose","nextTick","closedBy","computed","watch","newValue","onMounted","onBeforeUnmount","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":"2vBA2CA,MAAMA,EAAQC,EAORC,EAAOC,EAKPC,EAAYC,EAAAA,IAAA,EAEZC,EAAa,IAAY,CAC7BJ,EAAK,oBAAqB,EAAI,CAChC,EAEMK,EAAc,IAAY,CAC9BL,EAAK,oBAAqB,EAAK,CACjC,EAEMM,EAAsBC,GAAa,CACvCA,EAAE,eAAA,EACET,EAAM,UAAUO,EAAA,CACtB,EAEMG,EAAoB,IAAY,CACpC,GAAI,CAACV,EAAM,UACLA,EAAM,WAAY,CAGpBW,EAAAA,SAAS,IAAM,CACTP,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAChE,CAAC,EACD,MACF,CAEEJ,EAAM,YACRE,EAAK,oBAAqB,EAAK,EAEjCS,EAAAA,SAAS,IAAM,CACTX,EAAM,YAEJI,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAElE,CAAC,EACDF,EAAK,QAAQ,CACf,EAEMU,EAAWC,WAAS,IAAMb,EAAM,SAAYA,EAAM,iBAAmB,MAAQ,eAAkB,MAAM,EAE3Gc,OAAAA,EAAAA,MAAM,IAAMd,EAAM,WAAY,MAAOe,GAAsB,CACzD,MAAMJ,WAAA,EAEFI,EACEX,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,EAGdA,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAGtB,CAAC,EAEDY,EAAAA,UAAU,IAAM,CACVhB,EAAM,YACJI,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAGtB,CAAC,EAEDa,EAAAA,gBAAgB,IAAM,CAChBb,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAEpB,CAAC,EAEDc,EAAa,CACX,IAAK,IAAMd,EAAU,MACrB,KAAME,EACN,MAAOC,CAAA,CACR,UA9HCY,YAAA,EAAAC,qBA4BS,SA5BTC,EAAAA,WA4BS,SA3BH,YAAJ,IAAIjB,EACJ,MAAM,aAAA,EACEkB,EAAAA,OAAM,CACb,QAAOZ,EACP,SAAQF,EACR,SAAUI,EAAA,KAAA,IAEAX,EAAA,cAAXkB,EAAAA,UAAA,EAAAC,EAAAA,mBAWM,MAXNG,EAWM,CAVJC,EAAAA,mBAEO,OAFPC,EAEO,CADLC,EAAAA,WAA0BC,EAAA,OAAA,QAAA,CAAA,EAAA,OAAA,EAAA,CAAA,GAGpB1B,EAAA,iBAAmBA,EAAA,wBAD3BmB,EAAAA,mBAMiB,SAAA,OAJf,KAAK,SACL,aAAW,mBACX,MAAM,sBACL,wBAAeb,EAAW,CAAA,SAAA,CAAA,CAAA,EAC5B,GAAO,8DAGViB,EAAAA,mBAEM,MAFNI,EAEM,CADJF,EAAAA,WAAaC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,GAGJE,EAAAA,OAAO,QAAlBV,EAAAA,YAAAC,EAAAA,mBAEM,MAFNU,EAEM,CADJJ,EAAAA,WAA2BC,EAAA,OAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,8ECtBpBI,EAA2B,CACtC,QAAUC,GAAa,CACrBA,EAAI,UAAU,aAAcC,CAAmB,CACjD,CACF"}
+{"version":3,"file":"cssless.umd.js","sources":["../src/DialogView.vue","../src/unobfuscated.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"dialog-view\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"dialog-title-bar\">\n      <span class=\"dialog-title\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"dialog-close-button\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"dialog-content\">\n      <slot></slot>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"dialog-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style scoped>\n.dialog-view {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.dialog-view[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-view::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.dialog-title-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n.dialog-title {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dialog-close-button {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n.dialog-close-button:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n.dialog-close-button:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n.dialog-content {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-footer {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.vue'\n\nexport { default as DialogView } from './DialogView.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","ignoreCloseEvent","handleDialogClose","nextTick","closedBy","computed","watch","newValue","initDialog","onMounted","onBeforeUnmount","onDeactivated","onActivated","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":"2vBA2CA,MAAMA,EAAQC,EAORC,EAAOC,EAKPC,EAAYC,EAAAA,IAAA,EAEZC,EAAa,IAAY,CAC7BJ,EAAK,oBAAqB,EAAI,CAChC,EAEMK,EAAc,IAAY,CAC9BL,EAAK,oBAAqB,EAAK,CACjC,EAEMM,EAAsBC,GAAa,CACvCA,EAAE,eAAA,EACET,EAAM,UAAUO,EAAA,CACtB,EAEMG,EAAmBL,EAAAA,IAAI,EAAK,EAE5BM,EAAoB,IAAY,CACpC,GAAI,CAAAD,EAAiB,MACrB,IAAI,CAACV,EAAM,UACLA,EAAM,WAAY,CAGpBY,EAAAA,SAAS,IAAM,CACTR,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAChE,CAAC,EACD,MACF,CAEEJ,EAAM,YACRE,EAAK,oBAAqB,EAAK,EAEjCU,EAAAA,SAAS,IAAM,CACTZ,EAAM,YAEJI,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAElE,CAAC,EACDF,EAAK,QAAQ,EACf,EAEMW,EAAWC,WAAS,IAAMd,EAAM,SAAYA,EAAM,iBAAmB,MAAQ,eAAkB,MAAM,EAE3Ge,EAAAA,MAAM,IAAMf,EAAM,WAAY,MAAOgB,GAAsB,CACzD,MAAMJ,WAAA,EAEFI,EACEZ,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,EAGdA,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAGtB,CAAC,EAED,MAAMa,EAAa,IAAM,CACnBjB,EAAM,YACJI,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAGtB,EAEAc,OAAAA,EAAAA,UAAU,IAAM,CACdD,EAAA,CACF,CAAC,EAEDE,EAAAA,gBAAgB,IAAM,CAChBf,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAEpB,CAAC,EAEDgB,EAAAA,cAAc,IAAM,CACdhB,EAAU,OAASA,EAAU,MAAM,OACrCM,EAAiB,MAAQ,GACzBN,EAAU,MAAM,MAAA,EAChBQ,EAAAA,SAAS,IAAMF,EAAiB,MAAQ,EAAK,EAEjD,CAAC,EAEDW,EAAAA,YAAY,IAAM,CAChBJ,EAAA,CACF,CAAC,EAEDK,EAAa,CACX,IAAK,IAAMlB,EAAU,MACrB,KAAME,EACN,MAAOC,CAAA,CACR,UAjJCgB,YAAA,EAAAC,qBA4BS,SA5BTC,EAAAA,WA4BS,SA3BH,YAAJ,IAAIrB,EACJ,MAAM,aAAA,EACEsB,EAAAA,OAAM,CACb,QAAOf,EACP,SAAQH,EACR,SAAUK,EAAA,KAAA,IAEAZ,EAAA,cAAXsB,EAAAA,UAAA,EAAAC,EAAAA,mBAWM,MAXNG,EAWM,CAVJC,EAAAA,mBAEO,OAFPC,EAEO,CADLC,EAAAA,WAA0BC,EAAA,OAAA,QAAA,CAAA,EAAA,OAAA,EAAA,CAAA,GAGpB9B,EAAA,iBAAmBA,EAAA,wBAD3BuB,EAAAA,mBAMiB,SAAA,OAJf,KAAK,SACL,aAAW,mBACX,MAAM,sBACL,wBAAejB,EAAW,CAAA,SAAA,CAAA,CAAA,EAC5B,GAAO,8DAGVqB,EAAAA,mBAEM,MAFNI,EAEM,CADJF,EAAAA,WAAaC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,GAGJE,EAAAA,OAAO,QAAlBV,EAAAA,YAAAC,EAAAA,mBAEM,MAFNU,EAEM,CADJJ,EAAAA,WAA2BC,EAAA,OAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,8ECtBpBI,EAA2B,CACtC,QAAUC,GAAa,CACrBA,EAAI,UAAU,aAAcC,CAAmB,CACjD,CACF"}

package/dist/dialog-view.es.js

@@ -1,12 +1,12 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._b4102a3b79656a37{padding:var(--dialog-padding, 20px);border-radius:5px;border:1px solid gray;outline:0!important;max-width:calc(100% - 2em);max-height:calc(100% - 2em);box-sizing:border-box;overflow:hidden}._b4102a3b79656a37[open]{display:flex;flex-direction:column}._b4102a3b79656a37::backdrop{background:#00000080}._4d394b1507fdc584{display:flex;flex-direction:row;align-items:center;margin-bottom:.5em;min-height:var(--dialog-title-height, 24px);white-space:pre;overflow:hidden;-webkit-user-select:none;user-select:none}._088d860d2fd75292{flex:1;text-align:center;font-weight:700;font-size:large;overflow:hidden;text-overflow:ellipsis}._468ff1da37ead40a{margin-left:.5em;text-decoration:none;color:#666;font-size:1.5em;line-height:1;width:24px;height:24px;padding:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none}._468ff1da37ead40a:hover{color:#333;background-color:#f0f0f0;border-radius:3px}._468ff1da37ead40a:focus-visible{outline:2px solid rgb(160,207,255);outline-offset:-2px}._da3b3b2a4aeed1ee{flex:1;overflow:auto;display:flex;flex-direction:column}._61879ba330d9a71c{margin-top:.5em}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-import { defineComponent as b, ref as g, computed as w, watch as y, nextTick as d, onMounted as B, onBeforeUnmount as k, openBlock as s, createElementBlock as n, mergeProps as C, createElementVNode as f, renderSlot as i, withModifiers as _, createCommentVNode as c } from "vue";
-const D = ["closedBy"], M = {
+import { defineComponent as y, ref as v, computed as B, watch as C, nextTick as s, onMounted as k, onBeforeUnmount as _, onDeactivated as D, onActivated as M, openBlock as n, createElementBlock as u, mergeProps as $, createElementVNode as p, renderSlot as c, withModifiers as E, createCommentVNode as f } from "vue";
+const T = ["closedBy"], N = {
   key: 0,
   class: "_4d394b1507fdc584"
-}, $ = { class: "_088d860d2fd75292" }, T = { class: "_da3b3b2a4aeed1ee" }, E = {
+}, O = { class: "_088d860d2fd75292" }, P = { class: "_da3b3b2a4aeed1ee" }, R = {
   key: 1,
   class: "_61879ba330d9a71c"
-}, N = /* @__PURE__ */ b({
+}, q = /* @__PURE__ */ y({
   __name: "DialogView.obf",
   props: {
     modelValue: { type: Boolean },
@@ -16,71 +16,81 @@ const D = ["closedBy"], M = {
     closeOnClickMask: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "closed"],
-  setup(a, { expose: r, emit: p }) {
-    const o = a, t = p, e = g(), m = () => {
+  setup(a, { expose: m, emit: h }) {
+    const o = a, t = h, e = v(), g = () => {
       t("update:modelValue", !0);
-    }, u = () => {
+    }, i = () => {
       t("update:modelValue", !1);
-    }, v = (l) => {
-      l.preventDefault(), o.closable && u();
-    }, h = () => {
-      if (!o.closable && o.modelValue) {
-        d(() => {
-          e.value && !e.value.open && e.value.showModal();
-        });
-        return;
+    }, V = (l) => {
+      l.preventDefault(), o.closable && i();
+    }, d = v(!1), b = () => {
+      if (!d.value) {
+        if (!o.closable && o.modelValue) {
+          s(() => {
+            e.value && !e.value.open && e.value.showModal();
+          });
+          return;
+        }
+        o.modelValue && t("update:modelValue", !1), s(() => {
+          o.modelValue && e.value && !e.value.open && e.value.showModal();
+        }), t("closed");
       }
-      o.modelValue && t("update:modelValue", !1), d(() => {
-        o.modelValue && e.value && !e.value.open && e.value.showModal();
-      }), t("closed");
-    }, V = w(() => o.closable ? o.closeOnClickMask ? "any" : "closerequest" : "none");
-    return y(() => o.modelValue, async (l) => {
-      await d(), l ? e.value && !e.value.open && e.value.showModal() : e.value && e.value.open && e.value.close();
-    }), B(() => {
+    }, w = B(() => o.closable ? o.closeOnClickMask ? "any" : "closerequest" : "none");
+    C(() => o.modelValue, async (l) => {
+      await s(), l ? e.value && !e.value.open && e.value.showModal() : e.value && e.value.open && e.value.close();
+    });
+    const r = () => {
       o.modelValue && e.value && !e.value.open && e.value.showModal();
-    }), k(() => {
+    };
+    return k(() => {
+      r();
+    }), _(() => {
       e.value && e.value.open && e.value.close();
-    }), r({
+    }), D(() => {
+      e.value && e.value.open && (d.value = !0, e.value.close(), s(() => d.value = !1));
+    }), M(() => {
+      r();
+    }), m({
       get: () => e.value,
-      open: m,
-      close: u
-    }), (l, O) => (s(), n("dialog", C({
+      open: g,
+      close: i
+    }), (l, A) => (n(), u("dialog", $({
       ref_key: "dialogRef",
       ref: e,
       class: "_b4102a3b79656a37"
     }, l.$attrs, {
-      onClose: h,
-      onCancel: v,
-      closedBy: V.value
+      onClose: b,
+      onCancel: V,
+      closedBy: w.value
     }), [
-      a.showTitleBar ? (s(), n("div", M, [
-        f("span", $, [
-          i(l.$slots, "title")
+      a.showTitleBar ? (n(), u("div", N, [
+        p("span", O, [
+          c(l.$slots, "title")
         ]),
-        a.showCloseButton && a.closable ? (s(), n("button", {
+        a.showCloseButton && a.closable ? (n(), u("button", {
           key: 0,
           type: "button",
           "aria-label": "Close the dialog",
           class: "_468ff1da37ead40a",
-          onClick: _(u, ["prevent"])
-        }, "×")) : c("", !0)
-      ])) : c("", !0),
-      f("div", T, [
-        i(l.$slots, "default")
+          onClick: E(i, ["prevent"])
+        }, "×")) : f("", !0)
+      ])) : f("", !0),
+      p("div", P, [
+        c(l.$slots, "default")
       ]),
-      l.$slots.footer ? (s(), n("div", E, [
-        i(l.$slots, "footer")
-      ])) : c("", !0)
-    ], 16, D));
+      l.$slots.footer ? (n(), u("div", R, [
+        c(l.$slots, "footer")
+      ])) : f("", !0)
+    ], 16, T));
   }
-}), R = {
+}), U = {
   install: (a) => {
-    a.component("DialogView", N);
+    a.component("DialogView", q);
   }
 };
 export {
-  N as DialogView,
-  R as DialogViewPlugin,
-  R as default
+  q as DialogView,
+  U as DialogViewPlugin,
+  U as default
 };
 //# sourceMappingURL=dialog-view.es.js.map

package/dist/dialog-view.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-view.es.js","sources":["../src/DialogView.obf.vue","../src/index.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"_b4102a3b79656a37\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n      <span class=\"_088d860d2fd75292\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_468ff1da37ead40a\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"_da3b3b2a4aeed1ee\">\n      <slot></slot>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst handleDialogClose = (): void => {\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nonMounted(() => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n._b4102a3b79656a37[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n._4d394b1507fdc584 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n._088d860d2fd75292 {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n._468ff1da37ead40a {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n._468ff1da37ead40a:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n._468ff1da37ead40a:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n._da3b3b2a4aeed1ee {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n._61879ba330d9a71c {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.obf.vue'\n\nexport { default as DialogView } from './DialogView.obf.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","handleDialogClose","nextTick","closedBy","computed","watch","newValue","onMounted","onBeforeUnmount","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":";;;;;;;;;;;;;;;;;;AA2CA,UAAMA,IAAQC,GAORC,IAAOC,GAKPC,IAAYC,EAAA,GAEZC,IAAa,MAAY;AAC7B,MAAAJ,EAAK,qBAAqB,EAAI;AAAA,IAChC,GAEMK,IAAc,MAAY;AAC9B,MAAAL,EAAK,qBAAqB,EAAK;AAAA,IACjC,GAEMM,IAAqB,CAACC,MAAa;AACvC,MAAAA,EAAE,eAAA,GACET,EAAM,YAAUO,EAAA;AAAA,IACtB,GAEMG,IAAoB,MAAY;AACpC,UAAI,CAACV,EAAM,YACLA,EAAM,YAAY;AAGpB,QAAAW,EAAS,MAAM;AACb,UAAIP,EAAU,SAAS,CAACA,EAAU,MAAM,QAAMA,EAAU,MAAM,UAAA;AAAA,QAChE,CAAC;AACD;AAAA,MACF;AAEF,MAAIJ,EAAM,cACRE,EAAK,qBAAqB,EAAK,GAEjCS,EAAS,MAAM;AACb,QAAIX,EAAM,cAEJI,EAAU,SAAS,CAACA,EAAU,MAAM,QAAMA,EAAU,MAAM,UAAA;AAAA,MAElE,CAAC,GACDF,EAAK,QAAQ;AAAA,IACf,GAEMU,IAAWC,EAAS,MAAMb,EAAM,WAAYA,EAAM,mBAAmB,QAAQ,iBAAkB,MAAM;AAE3G,WAAAc,EAAM,MAAMd,EAAM,YAAY,OAAOe,MAAsB;AACzD,YAAMJ,EAAA,GAEFI,IACEX,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA,IAGdA,EAAU,SAASA,EAAU,MAAM,QACrCA,EAAU,MAAM,MAAA;AAAA,IAGtB,CAAC,GAEDY,EAAU,MAAM;AACd,MAAIhB,EAAM,cACJI,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA;AAAA,IAGtB,CAAC,GAEDa,EAAgB,MAAM;AACpB,MAAIb,EAAU,SAASA,EAAU,MAAM,QACrCA,EAAU,MAAM,MAAA;AAAA,IAEpB,CAAC,GAEDc,EAAa;AAAA,MACX,KAAK,MAAMd,EAAU;AAAA,MACrB,MAAME;AAAA,MACN,OAAOC;AAAA,IAAA,CACR,cA9HCY,EAAA,GAAAC,EA4BS,UA5BTC,EA4BS;AAAA,eA3BH;AAAA,MAAJ,KAAIjB;AAAA,MACJ,OAAM;AAAA,IAAA,GACEkB,EAAAA,QAAM;AAAA,MACb,SAAOZ;AAAA,MACP,UAAQF;AAAA,MACR,UAAUI,EAAA;AAAA,IAAA;MAEAX,EAAA,gBAAXkB,EAAA,GAAAC,EAWM,OAXNG,GAWM;AAAA,QAVJC,EAEO,QAFPC,GAEO;AAAA,UADLC,EAA0BC,EAAA,QAAA,OAAA;AAAA,QAAA;QAGpB1B,EAAA,mBAAmBA,EAAA,iBAD3BmB,EAMiB,UAAA;AAAA;UAJf,MAAK;AAAA,UACL,cAAW;AAAA,UACX,OAAM;AAAA,UACL,WAAeb,GAAW,CAAA,SAAA,CAAA;AAAA,QAAA,GAC5B,GAAO;;MAGViB,EAEM,OAFNI,GAEM;AAAA,QADJF,EAAaC,EAAA,QAAA,SAAA;AAAA,MAAA;MAGJE,EAAAA,OAAO,UAAlBV,KAAAC,EAEM,OAFNU,GAEM;AAAA,QADJJ,EAA2BC,EAAA,QAAA,QAAA;AAAA,MAAA;;;ICtBpBI,IAA2B;AAAA,EACtC,SAAS,CAACC,MAAa;AACrB,IAAAA,EAAI,UAAU,cAAcC,CAAmB;AAAA,EACjD;AACF;"}
+{"version":3,"file":"dialog-view.es.js","sources":["../src/DialogView.obf.vue","../src/index.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"_b4102a3b79656a37\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n      <span class=\"_088d860d2fd75292\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_468ff1da37ead40a\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"_da3b3b2a4aeed1ee\">\n      <slot></slot>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n._b4102a3b79656a37[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n._4d394b1507fdc584 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n._088d860d2fd75292 {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n._468ff1da37ead40a {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n._468ff1da37ead40a:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n._468ff1da37ead40a:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n._da3b3b2a4aeed1ee {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n._61879ba330d9a71c {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.obf.vue'\n\nexport { default as DialogView } from './DialogView.obf.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","ignoreCloseEvent","handleDialogClose","nextTick","closedBy","computed","watch","newValue","initDialog","onMounted","onBeforeUnmount","onDeactivated","onActivated","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":"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"}

package/dist/dialog-view.umd.js

@@ -1,3 +1,3 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._b4102a3b79656a37{padding:var(--dialog-padding, 20px);border-radius:5px;border:1px solid gray;outline:0!important;max-width:calc(100% - 2em);max-height:calc(100% - 2em);box-sizing:border-box;overflow:hidden}._b4102a3b79656a37[open]{display:flex;flex-direction:column}._b4102a3b79656a37::backdrop{background:#00000080}._4d394b1507fdc584{display:flex;flex-direction:row;align-items:center;margin-bottom:.5em;min-height:var(--dialog-title-height, 24px);white-space:pre;overflow:hidden;-webkit-user-select:none;user-select:none}._088d860d2fd75292{flex:1;text-align:center;font-weight:700;font-size:large;overflow:hidden;text-overflow:ellipsis}._468ff1da37ead40a{margin-left:.5em;text-decoration:none;color:#666;font-size:1.5em;line-height:1;width:24px;height:24px;padding:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none}._468ff1da37ead40a:hover{color:#333;background-color:#f0f0f0;border-radius:3px}._468ff1da37ead40a:focus-visible{outline:2px solid rgb(160,207,255);outline-offset:-2px}._da3b3b2a4aeed1ee{flex:1;overflow:auto;display:flex;flex-direction:column}._61879ba330d9a71c{margin-top:.5em}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.DialogView={},l.Vue))})(this,(function(l,e){"use strict";const u=["closedBy"],f={key:0,class:"_4d394b1507fdc584"},r={class:"_088d860d2fd75292"},m={class:"_da3b3b2a4aeed1ee"},p={key:1,class:"_61879ba330d9a71c"},d=e.defineComponent({__name:"DialogView.obf",props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0},closable:{type:Boolean,default:!0},closeOnClickMask:{type:Boolean,default:!1}},emits:["update:modelValue","closed"],setup(n,{expose:h,emit:V}){const a=n,s=V,o=e.ref(),B=()=>{s("update:modelValue",!0)},i=()=>{s("update:modelValue",!1)},k=t=>{t.preventDefault(),a.closable&&i()},g=()=>{if(!a.closable&&a.modelValue){e.nextTick(()=>{o.value&&!o.value.open&&o.value.showModal()});return}a.modelValue&&s("update:modelValue",!1),e.nextTick(()=>{a.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),s("closed")},y=e.computed(()=>a.closable?a.closeOnClickMask?"any":"closerequest":"none");return e.watch(()=>a.modelValue,async t=>{await e.nextTick(),t?o.value&&!o.value.open&&o.value.showModal():o.value&&o.value.open&&o.value.close()}),e.onMounted(()=>{a.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),e.onBeforeUnmount(()=>{o.value&&o.value.open&&o.value.close()}),h({get:()=>o.value,open:B,close:i}),(t,b)=>(e.openBlock(),e.createElementBlock("dialog",e.mergeProps({ref_key:"dialogRef",ref:o,class:"_b4102a3b79656a37"},t.$attrs,{onClose:g,onCancel:k,closedBy:y.value}),[n.showTitleBar?(e.openBlock(),e.createElementBlock("div",f,[e.createElementVNode("span",r,[e.renderSlot(t.$slots,"title")]),n.showCloseButton&&n.closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button","aria-label":"Close the dialog",class:"_468ff1da37ead40a",onClick:e.withModifiers(i,["prevent"])},"×")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",m,[e.renderSlot(t.$slots,"default")]),t.$slots.footer?(e.openBlock(),e.createElementBlock("div",p,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)],16,u))}}),c={install:n=>{n.component("DialogView",d)}};l.DialogView=d,l.DialogViewPlugin=c,l.default=c,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.DialogView={},l.Vue))})(this,(function(l,e){"use strict";const r=["closedBy"],m={key:0,class:"_4d394b1507fdc584"},p={class:"_088d860d2fd75292"},h={class:"_da3b3b2a4aeed1ee"},V={key:1,class:"_61879ba330d9a71c"},c=e.defineComponent({__name:"DialogView.obf",props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0},closable:{type:Boolean,default:!0},closeOnClickMask:{type:Boolean,default:!1}},emits:["update:modelValue","closed"],setup(n,{expose:g,emit:k}){const a=n,s=k,o=e.ref(),B=()=>{s("update:modelValue",!0)},i=()=>{s("update:modelValue",!1)},y=t=>{t.preventDefault(),a.closable&&i()},d=e.ref(!1),b=()=>{if(!d.value){if(!a.closable&&a.modelValue){e.nextTick(()=>{o.value&&!o.value.open&&o.value.showModal()});return}a.modelValue&&s("update:modelValue",!1),e.nextTick(()=>{a.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),s("closed")}},w=e.computed(()=>a.closable?a.closeOnClickMask?"any":"closerequest":"none");e.watch(()=>a.modelValue,async t=>{await e.nextTick(),t?o.value&&!o.value.open&&o.value.showModal():o.value&&o.value.open&&o.value.close()});const u=()=>{a.modelValue&&o.value&&!o.value.open&&o.value.showModal()};return e.onMounted(()=>{u()}),e.onBeforeUnmount(()=>{o.value&&o.value.open&&o.value.close()}),e.onDeactivated(()=>{o.value&&o.value.open&&(d.value=!0,o.value.close(),e.nextTick(()=>d.value=!1))}),e.onActivated(()=>{u()}),g({get:()=>o.value,open:B,close:i}),(t,C)=>(e.openBlock(),e.createElementBlock("dialog",e.mergeProps({ref_key:"dialogRef",ref:o,class:"_b4102a3b79656a37"},t.$attrs,{onClose:b,onCancel:y,closedBy:w.value}),[n.showTitleBar?(e.openBlock(),e.createElementBlock("div",m,[e.createElementVNode("span",p,[e.renderSlot(t.$slots,"title")]),n.showCloseButton&&n.closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button","aria-label":"Close the dialog",class:"_468ff1da37ead40a",onClick:e.withModifiers(i,["prevent"])},"×")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",h,[e.renderSlot(t.$slots,"default")]),t.$slots.footer?(e.openBlock(),e.createElementBlock("div",V,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)],16,r))}}),f={install:n=>{n.component("DialogView",c)}};l.DialogView=c,l.DialogViewPlugin=f,l.default=f,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
 //# sourceMappingURL=dialog-view.umd.js.map

package/dist/dialog-view.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-view.umd.js","sources":["../src/DialogView.obf.vue","../src/index.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"_b4102a3b79656a37\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n      <span class=\"_088d860d2fd75292\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_468ff1da37ead40a\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"_da3b3b2a4aeed1ee\">\n      <slot></slot>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst handleDialogClose = (): void => {\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nonMounted(() => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n._b4102a3b79656a37[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n._4d394b1507fdc584 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n._088d860d2fd75292 {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n._468ff1da37ead40a {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n._468ff1da37ead40a:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n._468ff1da37ead40a:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n._da3b3b2a4aeed1ee {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n._61879ba330d9a71c {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.obf.vue'\n\nexport { default as DialogView } from './DialogView.obf.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","handleDialogClose","nextTick","closedBy","computed","watch","newValue","onMounted","onBeforeUnmount","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":"usBA2CA,MAAMA,EAAQC,EAORC,EAAOC,EAKPC,EAAYC,EAAAA,IAAA,EAEZC,EAAa,IAAY,CAC7BJ,EAAK,oBAAqB,EAAI,CAChC,EAEMK,EAAc,IAAY,CAC9BL,EAAK,oBAAqB,EAAK,CACjC,EAEMM,EAAsBC,GAAa,CACvCA,EAAE,eAAA,EACET,EAAM,UAAUO,EAAA,CACtB,EAEMG,EAAoB,IAAY,CACpC,GAAI,CAACV,EAAM,UACLA,EAAM,WAAY,CAGpBW,EAAAA,SAAS,IAAM,CACTP,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAChE,CAAC,EACD,MACF,CAEEJ,EAAM,YACRE,EAAK,oBAAqB,EAAK,EAEjCS,EAAAA,SAAS,IAAM,CACTX,EAAM,YAEJI,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAElE,CAAC,EACDF,EAAK,QAAQ,CACf,EAEMU,EAAWC,WAAS,IAAMb,EAAM,SAAYA,EAAM,iBAAmB,MAAQ,eAAkB,MAAM,EAE3Gc,OAAAA,EAAAA,MAAM,IAAMd,EAAM,WAAY,MAAOe,GAAsB,CACzD,MAAMJ,WAAA,EAEFI,EACEX,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,EAGdA,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAGtB,CAAC,EAEDY,EAAAA,UAAU,IAAM,CACVhB,EAAM,YACJI,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAGtB,CAAC,EAEDa,EAAAA,gBAAgB,IAAM,CAChBb,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAEpB,CAAC,EAEDc,EAAa,CACX,IAAK,IAAMd,EAAU,MACrB,KAAME,EACN,MAAOC,CAAA,CACR,UA9HCY,YAAA,EAAAC,qBA4BS,SA5BTC,EAAAA,WA4BS,SA3BH,YAAJ,IAAIjB,EACJ,MAAM,mBAAA,EACEkB,EAAAA,OAAM,CACb,QAAOZ,EACP,SAAQF,EACR,SAAUI,EAAA,KAAA,IAEAX,EAAA,cAAXkB,EAAAA,UAAA,EAAAC,EAAAA,mBAWM,MAXNG,EAWM,CAVJC,EAAAA,mBAEO,OAFPC,EAEO,CADLC,aAA0BC,EAAA,OAAA,OAAA,CAAA,GAGpB1B,EAAA,iBAAmBA,EAAA,wBAD3BmB,EAAAA,mBAMiB,SAAA,OAJf,KAAK,SACL,aAAW,mBACX,MAAM,oBACL,wBAAeb,EAAW,CAAA,SAAA,CAAA,CAAA,EAC5B,GAAO,8DAGViB,EAAAA,mBAEM,MAFNI,EAEM,CADJF,aAAaC,EAAA,OAAA,SAAA,CAAA,GAGJE,EAAAA,OAAO,QAAlBV,EAAAA,YAAAC,EAAAA,mBAEM,MAFNU,EAEM,CADJJ,aAA2BC,EAAA,OAAA,QAAA,CAAA,2CCtBpBI,EAA2B,CACtC,QAAUC,GAAa,CACrBA,EAAI,UAAU,aAAcC,CAAmB,CACjD,CACF"}
+{"version":3,"file":"dialog-view.umd.js","sources":["../src/DialogView.obf.vue","../src/index.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"_b4102a3b79656a37\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n      <span class=\"_088d860d2fd75292\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_468ff1da37ead40a\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"_da3b3b2a4aeed1ee\">\n      <slot></slot>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n._b4102a3b79656a37[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n._4d394b1507fdc584 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n._088d860d2fd75292 {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n._468ff1da37ead40a {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n._468ff1da37ead40a:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n._468ff1da37ead40a:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n._da3b3b2a4aeed1ee {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n._61879ba330d9a71c {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.obf.vue'\n\nexport { default as DialogView } from './DialogView.obf.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","ignoreCloseEvent","handleDialogClose","nextTick","closedBy","computed","watch","newValue","initDialog","onMounted","onBeforeUnmount","onDeactivated","onActivated","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":"usBA2CA,MAAMA,EAAQC,EAORC,EAAOC,EAKPC,EAAYC,EAAAA,IAAA,EAEZC,EAAa,IAAY,CAC7BJ,EAAK,oBAAqB,EAAI,CAChC,EAEMK,EAAc,IAAY,CAC9BL,EAAK,oBAAqB,EAAK,CACjC,EAEMM,EAAsBC,GAAa,CACvCA,EAAE,eAAA,EACET,EAAM,UAAUO,EAAA,CACtB,EAEMG,EAAmBL,EAAAA,IAAI,EAAK,EAE5BM,EAAoB,IAAY,CACpC,GAAI,CAAAD,EAAiB,MACrB,IAAI,CAACV,EAAM,UACLA,EAAM,WAAY,CAGpBY,EAAAA,SAAS,IAAM,CACTR,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAChE,CAAC,EACD,MACF,CAEEJ,EAAM,YACRE,EAAK,oBAAqB,EAAK,EAEjCU,EAAAA,SAAS,IAAM,CACTZ,EAAM,YAEJI,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAElE,CAAC,EACDF,EAAK,QAAQ,EACf,EAEMW,EAAWC,WAAS,IAAMd,EAAM,SAAYA,EAAM,iBAAmB,MAAQ,eAAkB,MAAM,EAE3Ge,EAAAA,MAAM,IAAMf,EAAM,WAAY,MAAOgB,GAAsB,CACzD,MAAMJ,WAAA,EAEFI,EACEZ,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,EAGdA,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAGtB,CAAC,EAED,MAAMa,EAAa,IAAM,CACnBjB,EAAM,YACJI,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAGtB,EAEAc,OAAAA,EAAAA,UAAU,IAAM,CACdD,EAAA,CACF,CAAC,EAEDE,EAAAA,gBAAgB,IAAM,CAChBf,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAEpB,CAAC,EAEDgB,EAAAA,cAAc,IAAM,CACdhB,EAAU,OAASA,EAAU,MAAM,OACrCM,EAAiB,MAAQ,GACzBN,EAAU,MAAM,MAAA,EAChBQ,EAAAA,SAAS,IAAMF,EAAiB,MAAQ,EAAK,EAEjD,CAAC,EAEDW,EAAAA,YAAY,IAAM,CAChBJ,EAAA,CACF,CAAC,EAEDK,EAAa,CACX,IAAK,IAAMlB,EAAU,MACrB,KAAME,EACN,MAAOC,CAAA,CACR,UAjJCgB,YAAA,EAAAC,qBA4BS,SA5BTC,EAAAA,WA4BS,SA3BH,YAAJ,IAAIrB,EACJ,MAAM,mBAAA,EACEsB,EAAAA,OAAM,CACb,QAAOf,EACP,SAAQH,EACR,SAAUK,EAAA,KAAA,IAEAZ,EAAA,cAAXsB,EAAAA,UAAA,EAAAC,EAAAA,mBAWM,MAXNG,EAWM,CAVJC,EAAAA,mBAEO,OAFPC,EAEO,CADLC,aAA0BC,EAAA,OAAA,OAAA,CAAA,GAGpB9B,EAAA,iBAAmBA,EAAA,wBAD3BuB,EAAAA,mBAMiB,SAAA,OAJf,KAAK,SACL,aAAW,mBACX,MAAM,oBACL,wBAAejB,EAAW,CAAA,SAAA,CAAA,CAAA,EAC5B,GAAO,8DAGVqB,EAAAA,mBAEM,MAFNI,EAEM,CADJF,aAAaC,EAAA,OAAA,SAAA,CAAA,GAGJE,EAAAA,OAAO,QAAlBV,EAAAA,YAAAC,EAAAA,mBAEM,MAFNU,EAEM,CADJJ,aAA2BC,EAAA,OAAA,QAAA,CAAA,2CCtBpBI,EAA2B,CACtC,QAAUC,GAAa,CACrBA,EAAI,UAAU,aAAcC,CAAmB,CACjD,CACF"}

package/dist/unobfuscated.es.js

@@ -1,12 +1,12 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dialog-view[data-v-da4085e6]{padding:var(--dialog-padding, 20px);border-radius:5px;border:1px solid gray;outline:0!important;max-width:calc(100% - 2em);max-height:calc(100% - 2em);box-sizing:border-box;overflow:hidden}.dialog-view[open][data-v-da4085e6]{display:flex;flex-direction:column}.dialog-view[data-v-da4085e6]::backdrop{background:#00000080}.dialog-title-bar[data-v-da4085e6]{display:flex;flex-direction:row;align-items:center;margin-bottom:.5em;min-height:var(--dialog-title-height, 24px);white-space:pre;overflow:hidden;-webkit-user-select:none;user-select:none}.dialog-title[data-v-da4085e6]{flex:1;text-align:center;font-weight:700;font-size:large;overflow:hidden;text-overflow:ellipsis}.dialog-close-button[data-v-da4085e6]{margin-left:.5em;text-decoration:none;color:#666;font-size:1.5em;line-height:1;width:24px;height:24px;padding:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none}.dialog-close-button[data-v-da4085e6]:hover{color:#333;background-color:#f0f0f0;border-radius:3px}.dialog-close-button[data-v-da4085e6]:focus-visible{outline:2px solid rgb(160,207,255);outline-offset:-2px}.dialog-content[data-v-da4085e6]{flex:1;overflow:auto;display:flex;flex-direction:column}.dialog-footer[data-v-da4085e6]{margin-top:.5em}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-import { defineComponent as w, ref as V, computed as y, watch as B, nextTick as c, onMounted as k, onBeforeUnmount as C, openBlock as n, createElementBlock as i, mergeProps as _, createElementVNode as p, renderSlot as r, withModifiers as b, createCommentVNode as f } from "vue";
-const D = ["closedBy"], M = {
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dialog-view[data-v-7641dcfa]{padding:var(--dialog-padding, 20px);border-radius:5px;border:1px solid gray;outline:0!important;max-width:calc(100% - 2em);max-height:calc(100% - 2em);box-sizing:border-box;overflow:hidden}.dialog-view[open][data-v-7641dcfa]{display:flex;flex-direction:column}.dialog-view[data-v-7641dcfa]::backdrop{background:#00000080}.dialog-title-bar[data-v-7641dcfa]{display:flex;flex-direction:row;align-items:center;margin-bottom:.5em;min-height:var(--dialog-title-height, 24px);white-space:pre;overflow:hidden;-webkit-user-select:none;user-select:none}.dialog-title[data-v-7641dcfa]{flex:1;text-align:center;font-weight:700;font-size:large;overflow:hidden;text-overflow:ellipsis}.dialog-close-button[data-v-7641dcfa]{margin-left:.5em;text-decoration:none;color:#666;font-size:1.5em;line-height:1;width:24px;height:24px;padding:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none}.dialog-close-button[data-v-7641dcfa]:hover{color:#333;background-color:#f0f0f0;border-radius:3px}.dialog-close-button[data-v-7641dcfa]:focus-visible{outline:2px solid rgb(160,207,255);outline-offset:-2px}.dialog-content[data-v-7641dcfa]{flex:1;overflow:auto;display:flex;flex-direction:column}.dialog-footer[data-v-7641dcfa]{margin-top:.5em}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+import { defineComponent as B, ref as m, computed as C, watch as k, nextTick as n, onMounted as D, onBeforeUnmount as _, onDeactivated as b, onActivated as M, openBlock as i, createElementBlock as u, mergeProps as $, createElementVNode as g, renderSlot as f, withModifiers as E, createCommentVNode as v } from "vue";
+const O = ["closedBy"], T = {
   key: 0,
   class: "dialog-title-bar"
-}, $ = { class: "dialog-title" }, O = { class: "dialog-content" }, T = {
+}, N = { class: "dialog-title" }, P = { class: "dialog-content" }, R = {
   key: 1,
   class: "dialog-footer"
-}, E = /* @__PURE__ */ w({
+}, q = /* @__PURE__ */ B({
   __name: "DialogView",
   props: {
     modelValue: { type: Boolean },
@@ -16,76 +16,86 @@ const D = ["closedBy"], M = {
     closeOnClickMask: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "closed"],
-  setup(l, { expose: u, emit: s }) {
-    const o = l, t = s, e = V(), v = () => {
+  setup(l, { expose: c, emit: s }) {
+    const o = l, t = s, e = m(), h = () => {
       t("update:modelValue", !0);
     }, d = () => {
       t("update:modelValue", !1);
-    }, m = (a) => {
+    }, w = (a) => {
       a.preventDefault(), o.closable && d();
-    }, g = () => {
-      if (!o.closable && o.modelValue) {
-        c(() => {
-          e.value && !e.value.open && e.value.showModal();
-        });
-        return;
+    }, r = m(!1), V = () => {
+      if (!r.value) {
+        if (!o.closable && o.modelValue) {
+          n(() => {
+            e.value && !e.value.open && e.value.showModal();
+          });
+          return;
+        }
+        o.modelValue && t("update:modelValue", !1), n(() => {
+          o.modelValue && e.value && !e.value.open && e.value.showModal();
+        }), t("closed");
       }
-      o.modelValue && t("update:modelValue", !1), c(() => {
-        o.modelValue && e.value && !e.value.open && e.value.showModal();
-      }), t("closed");
-    }, h = y(() => o.closable ? o.closeOnClickMask ? "any" : "closerequest" : "none");
-    return B(() => o.modelValue, async (a) => {
-      await c(), a ? e.value && !e.value.open && e.value.showModal() : e.value && e.value.open && e.value.close();
-    }), k(() => {
+    }, y = C(() => o.closable ? o.closeOnClickMask ? "any" : "closerequest" : "none");
+    k(() => o.modelValue, async (a) => {
+      await n(), a ? e.value && !e.value.open && e.value.showModal() : e.value && e.value.open && e.value.close();
+    });
+    const p = () => {
       o.modelValue && e.value && !e.value.open && e.value.showModal();
-    }), C(() => {
+    };
+    return D(() => {
+      p();
+    }), _(() => {
       e.value && e.value.open && e.value.close();
-    }), u({
+    }), b(() => {
+      e.value && e.value.open && (r.value = !0, e.value.close(), n(() => r.value = !1));
+    }), M(() => {
+      p();
+    }), c({
       get: () => e.value,
-      open: v,
+      open: h,
       close: d
-    }), (a, R) => (n(), i("dialog", _({
+    }), (a, S) => (i(), u("dialog", $({
       ref_key: "dialogRef",
       ref: e,
       class: "dialog-view"
     }, a.$attrs, {
-      onClose: g,
-      onCancel: m,
-      closedBy: h.value
+      onClose: V,
+      onCancel: w,
+      closedBy: y.value
     }), [
-      l.showTitleBar ? (n(), i("div", M, [
-        p("span", $, [
-          r(a.$slots, "title", {}, void 0, !0)
+      l.showTitleBar ? (i(), u("div", T, [
+        g("span", N, [
+          f(a.$slots, "title", {}, void 0, !0)
         ]),
-        l.showCloseButton && l.closable ? (n(), i("button", {
+        l.showCloseButton && l.closable ? (i(), u("button", {
           key: 0,
           type: "button",
           "aria-label": "Close the dialog",
           class: "dialog-close-button",
-          onClick: b(d, ["prevent"])
-        }, "×")) : f("", !0)
-      ])) : f("", !0),
-      p("div", O, [
-        r(a.$slots, "default", {}, void 0, !0)
+          onClick: E(d, ["prevent"])
+        }, "×")) : v("", !0)
+      ])) : v("", !0),
+      g("div", P, [
+        f(a.$slots, "default", {}, void 0, !0)
       ]),
-      a.$slots.footer ? (n(), i("div", T, [
-        r(a.$slots, "footer", {}, void 0, !0)
-      ])) : f("", !0)
-    ], 16, D));
+      a.$slots.footer ? (i(), u("div", R, [
+        f(a.$slots, "footer", {}, void 0, !0)
+      ])) : v("", !0)
+    ], 16, O));
   }
-}), N = (l, u) => {
+}), A = (l, c) => {
   const s = l.__vccOpts || l;
-  for (const [o, t] of u)
+  for (const [o, t] of c)
     s[o] = t;
   return s;
-}, P = /* @__PURE__ */ N(E, [["__scopeId", "data-v-da4085e6"]]), I = {
+}, I = /* @__PURE__ */ A(q, [["__scopeId", "data-v-7641dcfa"]]), j = {
   install: (l) => {
-    l.component("DialogView", P);
+    l.component("DialogView", I);
   }
 };
 export {
-  P as DialogView,
-  I as DialogViewPlugin,
-  I as default
+  I as DialogView,
+  j as DialogViewPlugin,
+  j as default
 };
 //# sourceMappingURL=unobfuscated.es.js.map

package/dist/unobfuscated.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"unobfuscated.es.js","sources":["../src/DialogView.vue","../src/unobfuscated.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"dialog-view\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"dialog-title-bar\">\n      <span class=\"dialog-title\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"dialog-close-button\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"dialog-content\">\n      <slot></slot>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"dialog-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst handleDialogClose = (): void => {\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nonMounted(() => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style scoped>\n.dialog-view {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.dialog-view[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-view::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.dialog-title-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n.dialog-title {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dialog-close-button {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n.dialog-close-button:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n.dialog-close-button:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n.dialog-content {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-footer {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.vue'\n\nexport { default as DialogView } from './DialogView.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","handleDialogClose","nextTick","closedBy","computed","watch","newValue","onMounted","onBeforeUnmount","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":";;;;;;;;;;;;;;;;;;AA2CA,UAAMA,IAAQC,GAORC,IAAOC,GAKPC,IAAYC,EAAA,GAEZC,IAAa,MAAY;AAC7B,MAAAJ,EAAK,qBAAqB,EAAI;AAAA,IAChC,GAEMK,IAAc,MAAY;AAC9B,MAAAL,EAAK,qBAAqB,EAAK;AAAA,IACjC,GAEMM,IAAqB,CAACC,MAAa;AACvC,MAAAA,EAAE,eAAA,GACET,EAAM,YAAUO,EAAA;AAAA,IACtB,GAEMG,IAAoB,MAAY;AACpC,UAAI,CAACV,EAAM,YACLA,EAAM,YAAY;AAGpB,QAAAW,EAAS,MAAM;AACb,UAAIP,EAAU,SAAS,CAACA,EAAU,MAAM,QAAMA,EAAU,MAAM,UAAA;AAAA,QAChE,CAAC;AACD;AAAA,MACF;AAEF,MAAIJ,EAAM,cACRE,EAAK,qBAAqB,EAAK,GAEjCS,EAAS,MAAM;AACb,QAAIX,EAAM,cAEJI,EAAU,SAAS,CAACA,EAAU,MAAM,QAAMA,EAAU,MAAM,UAAA;AAAA,MAElE,CAAC,GACDF,EAAK,QAAQ;AAAA,IACf,GAEMU,IAAWC,EAAS,MAAMb,EAAM,WAAYA,EAAM,mBAAmB,QAAQ,iBAAkB,MAAM;AAE3G,WAAAc,EAAM,MAAMd,EAAM,YAAY,OAAOe,MAAsB;AACzD,YAAMJ,EAAA,GAEFI,IACEX,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA,IAGdA,EAAU,SAASA,EAAU,MAAM,QACrCA,EAAU,MAAM,MAAA;AAAA,IAGtB,CAAC,GAEDY,EAAU,MAAM;AACd,MAAIhB,EAAM,cACJI,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA;AAAA,IAGtB,CAAC,GAEDa,EAAgB,MAAM;AACpB,MAAIb,EAAU,SAASA,EAAU,MAAM,QACrCA,EAAU,MAAM,MAAA;AAAA,IAEpB,CAAC,GAEDc,EAAa;AAAA,MACX,KAAK,MAAMd,EAAU;AAAA,MACrB,MAAME;AAAA,MACN,OAAOC;AAAA,IAAA,CACR,cA9HCY,EAAA,GAAAC,EA4BS,UA5BTC,EA4BS;AAAA,eA3BH;AAAA,MAAJ,KAAIjB;AAAA,MACJ,OAAM;AAAA,IAAA,GACEkB,EAAAA,QAAM;AAAA,MACb,SAAOZ;AAAA,MACP,UAAQF;AAAA,MACR,UAAUI,EAAA;AAAA,IAAA;MAEAX,EAAA,gBAAXkB,EAAA,GAAAC,EAWM,OAXNG,GAWM;AAAA,QAVJC,EAEO,QAFPC,GAEO;AAAA,UADLC,EAA0BC,EAAA,QAAA,SAAA,CAAA,GAAA,QAAA,EAAA;AAAA,QAAA;QAGpB1B,EAAA,mBAAmBA,EAAA,iBAD3BmB,EAMiB,UAAA;AAAA;UAJf,MAAK;AAAA,UACL,cAAW;AAAA,UACX,OAAM;AAAA,UACL,WAAeb,GAAW,CAAA,SAAA,CAAA;AAAA,QAAA,GAC5B,GAAO;;MAGViB,EAEM,OAFNI,GAEM;AAAA,QADJF,EAAaC,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,MAAA;MAGJE,EAAAA,OAAO,UAAlBV,KAAAC,EAEM,OAFNU,GAEM;AAAA,QADJJ,EAA2BC,EAAA,QAAA,UAAA,CAAA,GAAA,QAAA,EAAA;AAAA,MAAA;;;;;;;;iECtBpBI,IAA2B;AAAA,EACtC,SAAS,CAACC,MAAa;AACrB,IAAAA,EAAI,UAAU,cAAcC,CAAmB;AAAA,EACjD;AACF;"}
+{"version":3,"file":"unobfuscated.es.js","sources":["../src/DialogView.vue","../src/unobfuscated.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"dialog-view\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"dialog-title-bar\">\n      <span class=\"dialog-title\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"dialog-close-button\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"dialog-content\">\n      <slot></slot>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"dialog-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style scoped>\n.dialog-view {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.dialog-view[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-view::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.dialog-title-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n.dialog-title {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dialog-close-button {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n.dialog-close-button:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n.dialog-close-button:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n.dialog-content {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-footer {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.vue'\n\nexport { default as DialogView } from './DialogView.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","ignoreCloseEvent","handleDialogClose","nextTick","closedBy","computed","watch","newValue","initDialog","onMounted","onBeforeUnmount","onDeactivated","onActivated","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":"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"}

package/dist/unobfuscated.umd.js

@@ -1,3 +1,3 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dialog-view[data-v-da4085e6]{padding:var(--dialog-padding, 20px);border-radius:5px;border:1px solid gray;outline:0!important;max-width:calc(100% - 2em);max-height:calc(100% - 2em);box-sizing:border-box;overflow:hidden}.dialog-view[open][data-v-da4085e6]{display:flex;flex-direction:column}.dialog-view[data-v-da4085e6]::backdrop{background:#00000080}.dialog-title-bar[data-v-da4085e6]{display:flex;flex-direction:row;align-items:center;margin-bottom:.5em;min-height:var(--dialog-title-height, 24px);white-space:pre;overflow:hidden;-webkit-user-select:none;user-select:none}.dialog-title[data-v-da4085e6]{flex:1;text-align:center;font-weight:700;font-size:large;overflow:hidden;text-overflow:ellipsis}.dialog-close-button[data-v-da4085e6]{margin-left:.5em;text-decoration:none;color:#666;font-size:1.5em;line-height:1;width:24px;height:24px;padding:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none}.dialog-close-button[data-v-da4085e6]:hover{color:#333;background-color:#f0f0f0;border-radius:3px}.dialog-close-button[data-v-da4085e6]:focus-visible{outline:2px solid rgb(160,207,255);outline-offset:-2px}.dialog-content[data-v-da4085e6]{flex:1;overflow:auto;display:flex;flex-direction:column}.dialog-footer[data-v-da4085e6]{margin-top:.5em}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.DialogView={},t.Vue))})(this,(function(t,e){"use strict";const f=["closedBy"],p={key:0,class:"dialog-title-bar"},m={class:"dialog-title"},g={class:"dialog-content"},V={key:1,class:"dialog-footer"},r=((a,c)=>{const i=a.__vccOpts||a;for(const[l,s]of c)i[l]=s;return i})(e.defineComponent({__name:"DialogView",props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0},closable:{type:Boolean,default:!0},closeOnClickMask:{type:Boolean,default:!1}},emits:["update:modelValue","closed"],setup(a,{expose:c,emit:i}){const l=a,s=i,o=e.ref(),h=()=>{s("update:modelValue",!0)},d=()=>{s("update:modelValue",!1)},k=n=>{n.preventDefault(),l.closable&&d()},B=()=>{if(!l.closable&&l.modelValue){e.nextTick(()=>{o.value&&!o.value.open&&o.value.showModal()});return}l.modelValue&&s("update:modelValue",!1),e.nextTick(()=>{l.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),s("closed")},w=e.computed(()=>l.closable?l.closeOnClickMask?"any":"closerequest":"none");return e.watch(()=>l.modelValue,async n=>{await e.nextTick(),n?o.value&&!o.value.open&&o.value.showModal():o.value&&o.value.open&&o.value.close()}),e.onMounted(()=>{l.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),e.onBeforeUnmount(()=>{o.value&&o.value.open&&o.value.close()}),c({get:()=>o.value,open:h,close:d}),(n,C)=>(e.openBlock(),e.createElementBlock("dialog",e.mergeProps({ref_key:"dialogRef",ref:o,class:"dialog-view"},n.$attrs,{onClose:B,onCancel:k,closedBy:w.value}),[a.showTitleBar?(e.openBlock(),e.createElementBlock("div",p,[e.createElementVNode("span",m,[e.renderSlot(n.$slots,"title",{},void 0,!0)]),a.showCloseButton&&a.closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button","aria-label":"Close the dialog",class:"dialog-close-button",onClick:e.withModifiers(d,["prevent"])},"×")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",g,[e.renderSlot(n.$slots,"default",{},void 0,!0)]),n.$slots.footer?(e.openBlock(),e.createElementBlock("div",V,[e.renderSlot(n.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],16,f))}}),[["__scopeId","data-v-da4085e6"]]),u={install:a=>{a.component("DialogView",r)}};t.DialogView=r,t.DialogViewPlugin=u,t.default=u,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dialog-view[data-v-7641dcfa]{padding:var(--dialog-padding, 20px);border-radius:5px;border:1px solid gray;outline:0!important;max-width:calc(100% - 2em);max-height:calc(100% - 2em);box-sizing:border-box;overflow:hidden}.dialog-view[open][data-v-7641dcfa]{display:flex;flex-direction:column}.dialog-view[data-v-7641dcfa]::backdrop{background:#00000080}.dialog-title-bar[data-v-7641dcfa]{display:flex;flex-direction:row;align-items:center;margin-bottom:.5em;min-height:var(--dialog-title-height, 24px);white-space:pre;overflow:hidden;-webkit-user-select:none;user-select:none}.dialog-title[data-v-7641dcfa]{flex:1;text-align:center;font-weight:700;font-size:large;overflow:hidden;text-overflow:ellipsis}.dialog-close-button[data-v-7641dcfa]{margin-left:.5em;text-decoration:none;color:#666;font-size:1.5em;line-height:1;width:24px;height:24px;padding:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none}.dialog-close-button[data-v-7641dcfa]:hover{color:#333;background-color:#f0f0f0;border-radius:3px}.dialog-close-button[data-v-7641dcfa]:focus-visible{outline:2px solid rgb(160,207,255);outline-offset:-2px}.dialog-content[data-v-7641dcfa]{flex:1;overflow:auto;display:flex;flex-direction:column}.dialog-footer[data-v-7641dcfa]{margin-top:.5em}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.DialogView={},t.Vue))})(this,(function(t,e){"use strict";const m=["closedBy"],g={key:0,class:"dialog-title-bar"},V={class:"dialog-title"},h={class:"dialog-content"},k={key:1,class:"dialog-footer"},u=((a,c)=>{const i=a.__vccOpts||a;for(const[l,s]of c)i[l]=s;return i})(e.defineComponent({__name:"DialogView",props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0},closable:{type:Boolean,default:!0},closeOnClickMask:{type:Boolean,default:!1}},emits:["update:modelValue","closed"],setup(a,{expose:c,emit:i}){const l=a,s=i,o=e.ref(),B=()=>{s("update:modelValue",!0)},d=()=>{s("update:modelValue",!1)},w=n=>{n.preventDefault(),l.closable&&d()},r=e.ref(!1),y=()=>{if(!r.value){if(!l.closable&&l.modelValue){e.nextTick(()=>{o.value&&!o.value.open&&o.value.showModal()});return}l.modelValue&&s("update:modelValue",!1),e.nextTick(()=>{l.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),s("closed")}},_=e.computed(()=>l.closable?l.closeOnClickMask?"any":"closerequest":"none");e.watch(()=>l.modelValue,async n=>{await e.nextTick(),n?o.value&&!o.value.open&&o.value.showModal():o.value&&o.value.open&&o.value.close()});const p=()=>{l.modelValue&&o.value&&!o.value.open&&o.value.showModal()};return e.onMounted(()=>{p()}),e.onBeforeUnmount(()=>{o.value&&o.value.open&&o.value.close()}),e.onDeactivated(()=>{o.value&&o.value.open&&(r.value=!0,o.value.close(),e.nextTick(()=>r.value=!1))}),e.onActivated(()=>{p()}),c({get:()=>o.value,open:B,close:d}),(n,D)=>(e.openBlock(),e.createElementBlock("dialog",e.mergeProps({ref_key:"dialogRef",ref:o,class:"dialog-view"},n.$attrs,{onClose:y,onCancel:w,closedBy:_.value}),[a.showTitleBar?(e.openBlock(),e.createElementBlock("div",g,[e.createElementVNode("span",V,[e.renderSlot(n.$slots,"title",{},void 0,!0)]),a.showCloseButton&&a.closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button","aria-label":"Close the dialog",class:"dialog-close-button",onClick:e.withModifiers(d,["prevent"])},"×")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",h,[e.renderSlot(n.$slots,"default",{},void 0,!0)]),n.$slots.footer?(e.openBlock(),e.createElementBlock("div",k,[e.renderSlot(n.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],16,m))}}),[["__scopeId","data-v-7641dcfa"]]),f={install:a=>{a.component("DialogView",u)}};t.DialogView=u,t.DialogViewPlugin=f,t.default=f,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
 //# sourceMappingURL=unobfuscated.umd.js.map

package/dist/unobfuscated.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"unobfuscated.umd.js","sources":["../src/DialogView.vue","../src/unobfuscated.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"dialog-view\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"dialog-title-bar\">\n      <span class=\"dialog-title\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"dialog-close-button\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"dialog-content\">\n      <slot></slot>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"dialog-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst handleDialogClose = (): void => {\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nonMounted(() => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style scoped>\n.dialog-view {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.dialog-view[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-view::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.dialog-title-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n.dialog-title {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dialog-close-button {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n.dialog-close-button:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n.dialog-close-button:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n.dialog-content {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-footer {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.vue'\n\nexport { default as DialogView } from './DialogView.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","handleDialogClose","nextTick","closedBy","computed","watch","newValue","onMounted","onBeforeUnmount","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":"2vBA2CA,MAAMA,EAAQC,EAORC,EAAOC,EAKPC,EAAYC,EAAAA,IAAA,EAEZC,EAAa,IAAY,CAC7BJ,EAAK,oBAAqB,EAAI,CAChC,EAEMK,EAAc,IAAY,CAC9BL,EAAK,oBAAqB,EAAK,CACjC,EAEMM,EAAsBC,GAAa,CACvCA,EAAE,eAAA,EACET,EAAM,UAAUO,EAAA,CACtB,EAEMG,EAAoB,IAAY,CACpC,GAAI,CAACV,EAAM,UACLA,EAAM,WAAY,CAGpBW,EAAAA,SAAS,IAAM,CACTP,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAChE,CAAC,EACD,MACF,CAEEJ,EAAM,YACRE,EAAK,oBAAqB,EAAK,EAEjCS,EAAAA,SAAS,IAAM,CACTX,EAAM,YAEJI,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAElE,CAAC,EACDF,EAAK,QAAQ,CACf,EAEMU,EAAWC,WAAS,IAAMb,EAAM,SAAYA,EAAM,iBAAmB,MAAQ,eAAkB,MAAM,EAE3Gc,OAAAA,EAAAA,MAAM,IAAMd,EAAM,WAAY,MAAOe,GAAsB,CACzD,MAAMJ,WAAA,EAEFI,EACEX,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,EAGdA,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAGtB,CAAC,EAEDY,EAAAA,UAAU,IAAM,CACVhB,EAAM,YACJI,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAGtB,CAAC,EAEDa,EAAAA,gBAAgB,IAAM,CAChBb,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAEpB,CAAC,EAEDc,EAAa,CACX,IAAK,IAAMd,EAAU,MACrB,KAAME,EACN,MAAOC,CAAA,CACR,UA9HCY,YAAA,EAAAC,qBA4BS,SA5BTC,EAAAA,WA4BS,SA3BH,YAAJ,IAAIjB,EACJ,MAAM,aAAA,EACEkB,EAAAA,OAAM,CACb,QAAOZ,EACP,SAAQF,EACR,SAAUI,EAAA,KAAA,IAEAX,EAAA,cAAXkB,EAAAA,UAAA,EAAAC,EAAAA,mBAWM,MAXNG,EAWM,CAVJC,EAAAA,mBAEO,OAFPC,EAEO,CADLC,EAAAA,WAA0BC,EAAA,OAAA,QAAA,CAAA,EAAA,OAAA,EAAA,CAAA,GAGpB1B,EAAA,iBAAmBA,EAAA,wBAD3BmB,EAAAA,mBAMiB,SAAA,OAJf,KAAK,SACL,aAAW,mBACX,MAAM,sBACL,wBAAeb,EAAW,CAAA,SAAA,CAAA,CAAA,EAC5B,GAAO,8DAGViB,EAAAA,mBAEM,MAFNI,EAEM,CADJF,EAAAA,WAAaC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,GAGJE,EAAAA,OAAO,QAAlBV,EAAAA,YAAAC,EAAAA,mBAEM,MAFNU,EAEM,CADJJ,EAAAA,WAA2BC,EAAA,OAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,8ECtBpBI,EAA2B,CACtC,QAAUC,GAAa,CACrBA,EAAI,UAAU,aAAcC,CAAmB,CACjD,CACF"}
+{"version":3,"file":"unobfuscated.umd.js","sources":["../src/DialogView.vue","../src/unobfuscated.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"dialog-view\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"dialog-title-bar\">\n      <span class=\"dialog-title\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"dialog-close-button\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"dialog-content\">\n      <slot></slot>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"dialog-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style scoped>\n.dialog-view {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.dialog-view[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-view::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.dialog-title-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n.dialog-title {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dialog-close-button {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n.dialog-close-button:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n.dialog-close-button:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n.dialog-content {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-footer {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.vue'\n\nexport { default as DialogView } from './DialogView.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","ignoreCloseEvent","handleDialogClose","nextTick","closedBy","computed","watch","newValue","initDialog","onMounted","onBeforeUnmount","onDeactivated","onActivated","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":"2vBA2CA,MAAMA,EAAQC,EAORC,EAAOC,EAKPC,EAAYC,EAAAA,IAAA,EAEZC,EAAa,IAAY,CAC7BJ,EAAK,oBAAqB,EAAI,CAChC,EAEMK,EAAc,IAAY,CAC9BL,EAAK,oBAAqB,EAAK,CACjC,EAEMM,EAAsBC,GAAa,CACvCA,EAAE,eAAA,EACET,EAAM,UAAUO,EAAA,CACtB,EAEMG,EAAmBL,EAAAA,IAAI,EAAK,EAE5BM,EAAoB,IAAY,CACpC,GAAI,CAAAD,EAAiB,MACrB,IAAI,CAACV,EAAM,UACLA,EAAM,WAAY,CAGpBY,EAAAA,SAAS,IAAM,CACTR,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAChE,CAAC,EACD,MACF,CAEEJ,EAAM,YACRE,EAAK,oBAAqB,EAAK,EAEjCU,EAAAA,SAAS,IAAM,CACTZ,EAAM,YAEJI,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAElE,CAAC,EACDF,EAAK,QAAQ,EACf,EAEMW,EAAWC,WAAS,IAAMd,EAAM,SAAYA,EAAM,iBAAmB,MAAQ,eAAkB,MAAM,EAE3Ge,EAAAA,MAAM,IAAMf,EAAM,WAAY,MAAOgB,GAAsB,CACzD,MAAMJ,WAAA,EAEFI,EACEZ,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,EAGdA,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAGtB,CAAC,EAED,MAAMa,EAAa,IAAM,CACnBjB,EAAM,YACJI,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAGtB,EAEAc,OAAAA,EAAAA,UAAU,IAAM,CACdD,EAAA,CACF,CAAC,EAEDE,EAAAA,gBAAgB,IAAM,CAChBf,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAEpB,CAAC,EAEDgB,EAAAA,cAAc,IAAM,CACdhB,EAAU,OAASA,EAAU,MAAM,OACrCM,EAAiB,MAAQ,GACzBN,EAAU,MAAM,MAAA,EAChBQ,EAAAA,SAAS,IAAMF,EAAiB,MAAQ,EAAK,EAEjD,CAAC,EAEDW,EAAAA,YAAY,IAAM,CAChBJ,EAAA,CACF,CAAC,EAEDK,EAAa,CACX,IAAK,IAAMlB,EAAU,MACrB,KAAME,EACN,MAAOC,CAAA,CACR,UAjJCgB,YAAA,EAAAC,qBA4BS,SA5BTC,EAAAA,WA4BS,SA3BH,YAAJ,IAAIrB,EACJ,MAAM,aAAA,EACEsB,EAAAA,OAAM,CACb,QAAOf,EACP,SAAQH,EACR,SAAUK,EAAA,KAAA,IAEAZ,EAAA,cAAXsB,EAAAA,UAAA,EAAAC,EAAAA,mBAWM,MAXNG,EAWM,CAVJC,EAAAA,mBAEO,OAFPC,EAEO,CADLC,EAAAA,WAA0BC,EAAA,OAAA,QAAA,CAAA,EAAA,OAAA,EAAA,CAAA,GAGpB9B,EAAA,iBAAmBA,EAAA,wBAD3BuB,EAAAA,mBAMiB,SAAA,OAJf,KAAK,SACL,aAAW,mBACX,MAAM,sBACL,wBAAejB,EAAW,CAAA,SAAA,CAAA,CAAA,EAC5B,GAAO,8DAGVqB,EAAAA,mBAEM,MAFNI,EAEM,CADJF,EAAAA,WAAaC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,GAGJE,EAAAA,OAAO,QAAlBV,EAAAA,YAAAC,EAAAA,mBAEM,MAFNU,EAEM,CADJJ,EAAAA,WAA2BC,EAAA,OAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,8ECtBpBI,EAA2B,CACtC,QAAUC,GAAa,CACrBA,EAAI,UAAU,aAAcC,CAAmB,CACjD,CACF"}

package/dist/vue-dialog-view.css

@@ -1 +1 @@
-.dialog-view[data-v-da4085e6]{padding:var(--dialog-padding, 20px);border-radius:5px;border:1px solid gray;outline:0!important;max-width:calc(100% - 2em);max-height:calc(100% - 2em);box-sizing:border-box;overflow:hidden}.dialog-view[open][data-v-da4085e6]{display:flex;flex-direction:column}.dialog-view[data-v-da4085e6]::backdrop{background:#00000080}.dialog-title-bar[data-v-da4085e6]{display:flex;flex-direction:row;align-items:center;margin-bottom:.5em;min-height:var(--dialog-title-height, 24px);white-space:pre;overflow:hidden;-webkit-user-select:none;user-select:none}.dialog-title[data-v-da4085e6]{flex:1;text-align:center;font-weight:700;font-size:large;overflow:hidden;text-overflow:ellipsis}.dialog-close-button[data-v-da4085e6]{margin-left:.5em;text-decoration:none;color:#666;font-size:1.5em;line-height:1;width:24px;height:24px;padding:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none}.dialog-close-button[data-v-da4085e6]:hover{color:#333;background-color:#f0f0f0;border-radius:3px}.dialog-close-button[data-v-da4085e6]:focus-visible{outline:2px solid rgb(160,207,255);outline-offset:-2px}.dialog-content[data-v-da4085e6]{flex:1;overflow:auto;display:flex;flex-direction:column}.dialog-footer[data-v-da4085e6]{margin-top:.5em}
+.dialog-view[data-v-7641dcfa]{padding:var(--dialog-padding, 20px);border-radius:5px;border:1px solid gray;outline:0!important;max-width:calc(100% - 2em);max-height:calc(100% - 2em);box-sizing:border-box;overflow:hidden}.dialog-view[open][data-v-7641dcfa]{display:flex;flex-direction:column}.dialog-view[data-v-7641dcfa]::backdrop{background:#00000080}.dialog-title-bar[data-v-7641dcfa]{display:flex;flex-direction:row;align-items:center;margin-bottom:.5em;min-height:var(--dialog-title-height, 24px);white-space:pre;overflow:hidden;-webkit-user-select:none;user-select:none}.dialog-title[data-v-7641dcfa]{flex:1;text-align:center;font-weight:700;font-size:large;overflow:hidden;text-overflow:ellipsis}.dialog-close-button[data-v-7641dcfa]{margin-left:.5em;text-decoration:none;color:#666;font-size:1.5em;line-height:1;width:24px;height:24px;padding:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none}.dialog-close-button[data-v-7641dcfa]:hover{color:#333;background-color:#f0f0f0;border-radius:3px}.dialog-close-button[data-v-7641dcfa]:focus-visible{outline:2px solid rgb(160,207,255);outline-offset:-2px}.dialog-content[data-v-7641dcfa]{flex:1;overflow:auto;display:flex;flex-direction:column}.dialog-footer[data-v-7641dcfa]{margin-top:.5em}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-dialog-view",
-    "version": "1.8.2",
+    "version": "1.8.3",
     "description": "A modern Vue 3 dialog component using native dialog element",
     "type": "module",
     "main": "./dist/dialog-view.umd.js",

package/src/DialogView.obf.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'
 
 interface Props {
   modelValue: boolean
@@ -68,7 +68,10 @@ const handleDialogCancel = (e: Event) => {
   if (props.closable) closeDialog();
 }
 
+const ignoreCloseEvent = ref(false);
+
 const handleDialogClose = (): void => {
+  if (ignoreCloseEvent.value) return;
   if (!props.closable) {
     if (props.modelValue) {
       // not programmatically close
@@ -107,12 +110,16 @@ watch(() => props.modelValue, async (newValue: boolean) => {
   }
 })
 
-onMounted(() => {
+const initDialog = () => {
   if (props.modelValue) {
     if (dialogRef.value && !dialogRef.value.open) {
       dialogRef.value.showModal()
     }
   }
+};
+
+onMounted(() => {
+  initDialog();
 });
 
 onBeforeUnmount(() => {
@@ -121,6 +128,18 @@ onBeforeUnmount(() => {
   }
 });
 
+onDeactivated(() => {
+  if (dialogRef.value && dialogRef.value.open) {
+    ignoreCloseEvent.value = true;
+    dialogRef.value.close();
+    nextTick(() => ignoreCloseEvent.value = false);
+  }
+});
+
+onActivated(() => {
+  initDialog();
+});
+
 defineExpose({
   get: () => dialogRef.value,
   open: openDialog,

package/src/DialogView.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'
 
 interface Props {
   modelValue: boolean
@@ -68,7 +68,10 @@ const handleDialogCancel = (e: Event) => {
   if (props.closable) closeDialog();
 }
 
+const ignoreCloseEvent = ref(false);
+
 const handleDialogClose = (): void => {
+  if (ignoreCloseEvent.value) return;
   if (!props.closable) {
     if (props.modelValue) {
       // not programmatically close
@@ -107,12 +110,16 @@ watch(() => props.modelValue, async (newValue: boolean) => {
   }
 })
 
-onMounted(() => {
+const initDialog = () => {
   if (props.modelValue) {
     if (dialogRef.value && !dialogRef.value.open) {
       dialogRef.value.showModal()
     }
   }
+};
+
+onMounted(() => {
+  initDialog();
 });
 
 onBeforeUnmount(() => {
@@ -121,6 +128,18 @@ onBeforeUnmount(() => {
   }
 });
 
+onDeactivated(() => {
+  if (dialogRef.value && dialogRef.value.open) {
+    ignoreCloseEvent.value = true;
+    dialogRef.value.close();
+    nextTick(() => ignoreCloseEvent.value = false);
+  }
+});
+
+onActivated(() => {
+  initDialog();
+});
+
 defineExpose({
   get: () => dialogRef.value,
   open: openDialog,