vue-dialog-view 1.5.1 → 1.6.0

package/dist/DialogView.vue.d.ts

@@ -0,0 +1,40 @@
+interface Props {
+    modelValue: boolean;
+    showTitleBar?: boolean;
+    showCloseButton?: boolean;
+    closable?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        title?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {
+        dialogRef: HTMLDialogElement;
+    };
+    rootEl: HTMLDialogElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {
+    open: () => void;
+    close: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    showTitleBar: boolean;
+    showCloseButton: boolean;
+    closable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    dialogRef: HTMLDialogElement;
+}, HTMLDialogElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/dialog-view.es.js

@@ -1,4 +1,4 @@
-(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;display:flex;flex-direction:row}._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(){"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 h, ref as w, watch as b, nextTick as r, onMounted as g, createElementBlock as t, openBlock as s, mergeProps as y, createCommentVNode as d, createElementVNode as c, renderSlot as i, withModifiers as B } from "vue";
 const k = {
   key: 0,

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  >\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=\"dialogRef?.close()\"\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, nextTick, onMounted } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement | null>(null)\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\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) {\n          dialogRef.value.showModal()\n        }\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n}\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\ndefineExpose({\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  display: flex;\n  flex-direction: row;\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>","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","handleDialogClose","nextTick","watch","newValue","onMounted","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_1","_createElementVNode","_hoisted_2","_renderSlot","_ctx","_cache","_withModifiers","$event","_hoisted_3","$slots","_hoisted_4","DialogViewPlugin","app","DialogViewComponent"],"mappings":";;;;;;;;;;;;;;;;;AAwCA,UAAMA,IAAQC,GAMRC,IAAOC,GAIPC,IAAYC,EAA8B,IAAI,GAE9CC,IAAa,MAAY;AAC7B,MAAAJ,EAAK,qBAAqB,EAAI;AAAA,IAChC,GAEMK,IAAc,MAAY;AAC9B,MAAAL,EAAK,qBAAqB,EAAK;AAAA,IACjC,GAEMM,IAAoB,MAAY;AACpC,UAAI,CAACR,EAAM,YACLA,EAAM,YAAY;AAGpB,QAAAS,EAAS,MAAM;AACb,UAAIL,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA;AAAA,QAEpB,CAAC;AACD;AAAA,MACF;AAEF,MAAIJ,EAAM,cACRE,EAAK,qBAAqB,EAAK;AAAA,IAEnC;AAEA,WAAAQ,EAAM,MAAMV,EAAM,YAAY,OAAOW,MAAsB;AACzD,YAAMF,EAAA,GAEFE,IACEP,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA,IAGdA,EAAU,SAASA,EAAU,MAAM,QACrCA,EAAU,MAAM,MAAA;AAAA,IAGtB,CAAC,GAEDQ,EAAU,MAAM;AACd,MAAIZ,EAAM,cACJI,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA;AAAA,IAGtB,CAAC,GAEDS,EAAa;AAAA,MACX,MAAMP;AAAA,MACN,OAAOC;AAAA,IAAA,CACR,cAtGCO,EAAA,GAAAC,EA0BS,UA1BTC,EA0BS;AAAA,eAzBH;AAAA,MAAJ,KAAIZ;AAAA,MACJ,OAAM;AAAA,IAAA,GACEa,EAAAA,QAAM,EACb,SAAOT,EAAA,CAAiB,GAAA;AAAA,MAEdP,EAAA,gBAAXa,EAAA,GAAAC,EAWM,OAXNG,GAWM;AAAA,QAVJC,EAEO,QAFPC,GAEO;AAAA,UADLC,EAA0BC,EAAA,QAAA,OAAA;AAAA,QAAA;QAGpBrB,EAAA,mBAAmBA,EAAA,iBAD3Bc,EAMiB,UAAA;AAAA;UAJf,MAAK;AAAA,UACL,cAAW;AAAA,UACX,OAAM;AAAA,UACL,SAAKQ,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAAA,CAAAC,MAAUrB,EAAA,OAAW,MAAA,GAAK,CAAA,SAAA,CAAA;AAAA,QAAA,GACjC,GAAO;;MAGVe,EAEM,OAFNO,GAEM;AAAA,QADJL,EAAaC,EAAA,QAAA,SAAA;AAAA,MAAA;MAGJK,EAAAA,OAAO,UAAlBb,KAAAC,EAEM,OAFNa,GAEM;AAAA,QADJP,EAA2BC,EAAA,QAAA,QAAA;AAAA,MAAA;;;ICpBpBO,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  >\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=\"dialogRef?.close()\"\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, nextTick, onMounted } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement | null>(null)\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\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) {\n          dialogRef.value.showModal()\n        }\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n}\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\ndefineExpose({\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>","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","handleDialogClose","nextTick","watch","newValue","onMounted","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_1","_createElementVNode","_hoisted_2","_renderSlot","_ctx","_cache","_withModifiers","$event","_hoisted_3","$slots","_hoisted_4","DialogViewPlugin","app","DialogViewComponent"],"mappings":";;;;;;;;;;;;;;;;;AAwCA,UAAMA,IAAQC,GAMRC,IAAOC,GAIPC,IAAYC,EAA8B,IAAI,GAE9CC,IAAa,MAAY;AAC7B,MAAAJ,EAAK,qBAAqB,EAAI;AAAA,IAChC,GAEMK,IAAc,MAAY;AAC9B,MAAAL,EAAK,qBAAqB,EAAK;AAAA,IACjC,GAEMM,IAAoB,MAAY;AACpC,UAAI,CAACR,EAAM,YACLA,EAAM,YAAY;AAGpB,QAAAS,EAAS,MAAM;AACb,UAAIL,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA;AAAA,QAEpB,CAAC;AACD;AAAA,MACF;AAEF,MAAIJ,EAAM,cACRE,EAAK,qBAAqB,EAAK;AAAA,IAEnC;AAEA,WAAAQ,EAAM,MAAMV,EAAM,YAAY,OAAOW,MAAsB;AACzD,YAAMF,EAAA,GAEFE,IACEP,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA,IAGdA,EAAU,SAASA,EAAU,MAAM,QACrCA,EAAU,MAAM,MAAA;AAAA,IAGtB,CAAC,GAEDQ,EAAU,MAAM;AACd,MAAIZ,EAAM,cACJI,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA;AAAA,IAGtB,CAAC,GAEDS,EAAa;AAAA,MACX,MAAMP;AAAA,MACN,OAAOC;AAAA,IAAA,CACR,cAtGCO,EAAA,GAAAC,EA0BS,UA1BTC,EA0BS;AAAA,eAzBH;AAAA,MAAJ,KAAIZ;AAAA,MACJ,OAAM;AAAA,IAAA,GACEa,EAAAA,QAAM,EACb,SAAOT,EAAA,CAAiB,GAAA;AAAA,MAEdP,EAAA,gBAAXa,EAAA,GAAAC,EAWM,OAXNG,GAWM;AAAA,QAVJC,EAEO,QAFPC,GAEO;AAAA,UADLC,EAA0BC,EAAA,QAAA,OAAA;AAAA,QAAA;QAGpBrB,EAAA,mBAAmBA,EAAA,iBAD3Bc,EAMiB,UAAA;AAAA;UAJf,MAAK;AAAA,UACL,cAAW;AAAA,UACX,OAAM;AAAA,UACL,SAAKQ,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAAA,CAAAC,MAAUrB,EAAA,OAAW,MAAA,GAAK,CAAA,SAAA,CAAA;AAAA,QAAA,GACjC,GAAO;;MAGVe,EAEM,OAFNO,GAEM;AAAA,QADJL,EAAaC,EAAA,QAAA,SAAA;AAAA,MAAA;MAGJK,EAAAA,OAAO,UAAlBb,KAAAC,EAEM,OAFNa,GAEM;AAAA,QADJP,EAA2BC,EAAA,QAAA,QAAA;AAAA,MAAA;;;ICpBpBO,IAA2B;AAAA,EACtC,SAAS,CAACC,MAAa;AACrB,IAAAA,EAAI,UAAU,cAAcC,CAAmB;AAAA,EACjD;AACF;"}

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;display:flex;flex-direction:row}._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(){"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 r={key:0,class:"_4d394b1507fdc584"},f={class:"_088d860d2fd75292"},u={class:"_da3b3b2a4aeed1ee"},m={key:1,class:"_61879ba330d9a71c"},i=e.defineComponent({__name:"DialogView.obf",props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0},closable:{type:Boolean,default:!0}},emits:["update:modelValue"],setup(a,{expose:p,emit:V}){const n=a,s=V,o=e.ref(null),g=()=>{s("update:modelValue",!0)},h=()=>{s("update:modelValue",!1)},w=()=>{if(!n.closable&&n.modelValue){e.nextTick(()=>{o.value&&!o.value.open&&o.value.showModal()});return}n.modelValue&&s("update:modelValue",!1)};return e.watch(()=>n.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(()=>{n.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),p({open:g,close:h}),(t,c)=>(e.openBlock(),e.createElementBlock("dialog",e.mergeProps({ref_key:"dialogRef",ref:o,class:"_b4102a3b79656a37"},t.$attrs,{onClose:w}),[a.showTitleBar?(e.openBlock(),e.createElementBlock("div",r,[e.createElementVNode("span",f,[e.renderSlot(t.$slots,"title")]),a.showCloseButton&&a.closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button","aria-label":"Close the dialog",class:"_468ff1da37ead40a",onClick:c[0]||(c[0]=e.withModifiers(B=>o.value?.close(),["prevent"]))},"×")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",u,[e.renderSlot(t.$slots,"default")]),t.$slots.footer?(e.openBlock(),e.createElementBlock("div",m,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)],16))}}),d={install:a=>{a.component("DialogView",i)}};l.DialogView=i,l.DialogViewPlugin=d,l.default=d,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  >\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=\"dialogRef?.close()\"\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, nextTick, onMounted } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement | null>(null)\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\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) {\n          dialogRef.value.showModal()\n        }\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n}\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\ndefineExpose({\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  display: flex;\n  flex-direction: row;\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>","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","handleDialogClose","nextTick","watch","newValue","onMounted","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_1","_createElementVNode","_hoisted_2","_renderSlot","_ctx","_cache","_withModifiers","$event","_hoisted_3","$slots","_hoisted_4","DialogViewPlugin","app","DialogViewComponent"],"mappings":"ooBAwCA,MAAMA,EAAQC,EAMRC,EAAOC,EAIPC,EAAYC,EAAAA,IAA8B,IAAI,EAE9CC,EAAa,IAAY,CAC7BJ,EAAK,oBAAqB,EAAI,CAChC,EAEMK,EAAc,IAAY,CAC9BL,EAAK,oBAAqB,EAAK,CACjC,EAEMM,EAAoB,IAAY,CACpC,GAAI,CAACR,EAAM,UACLA,EAAM,WAAY,CAGpBS,EAAAA,SAAS,IAAM,CACTL,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAEpB,CAAC,EACD,MACF,CAEEJ,EAAM,YACRE,EAAK,oBAAqB,EAAK,CAEnC,EAEAQ,OAAAA,EAAAA,MAAM,IAAMV,EAAM,WAAY,MAAOW,GAAsB,CACzD,MAAMF,WAAA,EAEFE,EACEP,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,EAGdA,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAGtB,CAAC,EAEDQ,EAAAA,UAAU,IAAM,CACVZ,EAAM,YACJI,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAGtB,CAAC,EAEDS,EAAa,CACX,KAAMP,EACN,MAAOC,CAAA,CACR,UAtGCO,YAAA,EAAAC,qBA0BS,SA1BTC,EAAAA,WA0BS,SAzBH,YAAJ,IAAIZ,EACJ,MAAM,mBAAA,EACEa,EAAAA,OAAM,CACb,QAAOT,CAAA,CAAiB,EAAA,CAEdP,EAAA,cAAXa,EAAAA,UAAA,EAAAC,EAAAA,mBAWM,MAXNG,EAWM,CAVJC,EAAAA,mBAEO,OAFPC,EAEO,CADLC,aAA0BC,EAAA,OAAA,OAAA,CAAA,GAGpBrB,EAAA,iBAAmBA,EAAA,wBAD3Bc,EAAAA,mBAMiB,SAAA,OAJf,KAAK,SACL,aAAW,mBACX,MAAM,oBACL,QAAKQ,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,EAAAA,cAAAC,GAAUrB,EAAA,OAAW,MAAA,EAAK,CAAA,SAAA,CAAA,EAAA,EACjC,GAAO,8DAGVe,EAAAA,mBAEM,MAFNO,EAEM,CADJL,aAAaC,EAAA,OAAA,SAAA,CAAA,GAGJK,EAAAA,OAAO,QAAlBb,EAAAA,YAAAC,EAAAA,mBAEM,MAFNa,EAEM,CADJP,aAA2BC,EAAA,OAAA,QAAA,CAAA,yCCpBpBO,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  >\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=\"dialogRef?.close()\"\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, nextTick, onMounted } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement | null>(null)\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\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) {\n          dialogRef.value.showModal()\n        }\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n}\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\ndefineExpose({\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>","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","handleDialogClose","nextTick","watch","newValue","onMounted","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_1","_createElementVNode","_hoisted_2","_renderSlot","_ctx","_cache","_withModifiers","$event","_hoisted_3","$slots","_hoisted_4","DialogViewPlugin","app","DialogViewComponent"],"mappings":"ooBAwCA,MAAMA,EAAQC,EAMRC,EAAOC,EAIPC,EAAYC,EAAAA,IAA8B,IAAI,EAE9CC,EAAa,IAAY,CAC7BJ,EAAK,oBAAqB,EAAI,CAChC,EAEMK,EAAc,IAAY,CAC9BL,EAAK,oBAAqB,EAAK,CACjC,EAEMM,EAAoB,IAAY,CACpC,GAAI,CAACR,EAAM,UACLA,EAAM,WAAY,CAGpBS,EAAAA,SAAS,IAAM,CACTL,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAEpB,CAAC,EACD,MACF,CAEEJ,EAAM,YACRE,EAAK,oBAAqB,EAAK,CAEnC,EAEAQ,OAAAA,EAAAA,MAAM,IAAMV,EAAM,WAAY,MAAOW,GAAsB,CACzD,MAAMF,WAAA,EAEFE,EACEP,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,EAGdA,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAGtB,CAAC,EAEDQ,EAAAA,UAAU,IAAM,CACVZ,EAAM,YACJI,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAGtB,CAAC,EAEDS,EAAa,CACX,KAAMP,EACN,MAAOC,CAAA,CACR,UAtGCO,YAAA,EAAAC,qBA0BS,SA1BTC,EAAAA,WA0BS,SAzBH,YAAJ,IAAIZ,EACJ,MAAM,mBAAA,EACEa,EAAAA,OAAM,CACb,QAAOT,CAAA,CAAiB,EAAA,CAEdP,EAAA,cAAXa,EAAAA,UAAA,EAAAC,EAAAA,mBAWM,MAXNG,EAWM,CAVJC,EAAAA,mBAEO,OAFPC,EAEO,CADLC,aAA0BC,EAAA,OAAA,OAAA,CAAA,GAGpBrB,EAAA,iBAAmBA,EAAA,wBAD3Bc,EAAAA,mBAMiB,SAAA,OAJf,KAAK,SACL,aAAW,mBACX,MAAM,oBACL,QAAKQ,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,EAAAA,cAAAC,GAAUrB,EAAA,OAAW,MAAA,EAAK,CAAA,SAAA,CAAA,EAAA,EACjC,GAAO,8DAGVe,EAAAA,mBAEM,MAFNO,EAEM,CADJL,aAAaC,EAAA,OAAA,SAAA,CAAA,GAGJK,EAAAA,OAAO,QAAlBb,EAAAA,YAAAC,EAAAA,mBAEM,MAFNa,EAEM,CADJP,aAA2BC,EAAA,OAAA,QAAA,CAAA,yCCpBpBO,EAA2B,CACtC,QAAUC,GAAa,CACrBA,EAAI,UAAU,aAAcC,CAAmB,CACjD,CACF"}

package/dist/unobfuscated.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from 'vue';
+export { default as DialogView } from './DialogView.vue';
+export declare const DialogViewPlugin: Plugin;
+export default DialogViewPlugin;

package/dist/unobfuscated.es.js

@@ -0,0 +1,74 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dialog-view{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]{display:flex;flex-direction:column}.dialog-view::backdrop{background:#00000080}.dialog-title-bar{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{flex:1;text-align:center;font-weight:700;font-size:large;overflow:hidden;text-overflow:ellipsis}.dialog-close-button{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:hover{color:#333;background-color:#f0f0f0;border-radius:3px}.dialog-close-button:focus-visible{outline:2px solid rgb(160,207,255);outline-offset:-2px}.dialog-content{flex:1;overflow:auto;display:flex;flex-direction:column}.dialog-footer{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, watch as h, nextTick as r, onMounted as y, createElementBlock as a, openBlock as s, mergeProps as B, createCommentVNode as n, createElementVNode as c, renderSlot as u, withModifiers as b } from "vue";
+const k = {
+  key: 0,
+  class: "dialog-title-bar"
+}, C = { class: "dialog-title" }, D = { class: "dialog-content" }, $ = {
+  key: 1,
+  class: "dialog-footer"
+}, M = /* @__PURE__ */ w({
+  __name: "DialogView",
+  props: {
+    modelValue: { type: Boolean },
+    showTitleBar: { type: Boolean, default: !0 },
+    showCloseButton: { type: Boolean, default: !0 },
+    closable: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue"],
+  setup(l, { expose: f, emit: m }) {
+    const t = l, i = m, e = V(null), p = () => {
+      i("update:modelValue", !0);
+    }, g = () => {
+      i("update:modelValue", !1);
+    }, v = () => {
+      if (!t.closable && t.modelValue) {
+        r(() => {
+          e.value && !e.value.open && e.value.showModal();
+        });
+        return;
+      }
+      t.modelValue && i("update:modelValue", !1);
+    };
+    return h(() => t.modelValue, async (o) => {
+      await r(), o ? e.value && !e.value.open && e.value.showModal() : e.value && e.value.open && e.value.close();
+    }), y(() => {
+      t.modelValue && e.value && !e.value.open && e.value.showModal();
+    }), f({
+      open: p,
+      close: g
+    }), (o, d) => (s(), a("dialog", B({
+      ref_key: "dialogRef",
+      ref: e,
+      class: "dialog-view"
+    }, o.$attrs, { onClose: v }), [
+      l.showTitleBar ? (s(), a("div", k, [
+        c("span", C, [
+          u(o.$slots, "title")
+        ]),
+        l.showCloseButton && l.closable ? (s(), a("button", {
+          key: 0,
+          type: "button",
+          "aria-label": "Close the dialog",
+          class: "dialog-close-button",
+          onClick: d[0] || (d[0] = b((T) => e.value?.close(), ["prevent"]))
+        }, "×")) : n("", !0)
+      ])) : n("", !0),
+      c("div", D, [
+        u(o.$slots, "default")
+      ]),
+      o.$slots.footer ? (s(), a("div", $, [
+        u(o.$slots, "footer")
+      ])) : n("", !0)
+    ], 16));
+  }
+}), N = {
+  install: (l) => {
+    l.component("DialogView", M);
+  }
+};
+export {
+  M as DialogView,
+  N as DialogViewPlugin,
+  N as default
+};
+//# sourceMappingURL=unobfuscated.es.js.map

package/dist/unobfuscated.es.js.map

@@ -0,0 +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  >\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=\"dialogRef?.close()\"\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, nextTick, onMounted } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement | null>(null)\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\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) {\n          dialogRef.value.showModal()\n        }\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n}\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\ndefineExpose({\n  open: openDialog,\n  close: closeDialog,\n})\n</script>\n\n<style>\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>","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","handleDialogClose","nextTick","watch","newValue","onMounted","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_1","_createElementVNode","_hoisted_2","_renderSlot","_ctx","_cache","_withModifiers","$event","_hoisted_3","$slots","_hoisted_4","DialogViewPlugin","app","DialogViewComponent"],"mappings":";;;;;;;;;;;;;;;;;AAwCA,UAAMA,IAAQC,GAMRC,IAAOC,GAIPC,IAAYC,EAA8B,IAAI,GAE9CC,IAAa,MAAY;AAC7B,MAAAJ,EAAK,qBAAqB,EAAI;AAAA,IAChC,GAEMK,IAAc,MAAY;AAC9B,MAAAL,EAAK,qBAAqB,EAAK;AAAA,IACjC,GAEMM,IAAoB,MAAY;AACpC,UAAI,CAACR,EAAM,YACLA,EAAM,YAAY;AAGpB,QAAAS,EAAS,MAAM;AACb,UAAIL,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA;AAAA,QAEpB,CAAC;AACD;AAAA,MACF;AAEF,MAAIJ,EAAM,cACRE,EAAK,qBAAqB,EAAK;AAAA,IAEnC;AAEA,WAAAQ,EAAM,MAAMV,EAAM,YAAY,OAAOW,MAAsB;AACzD,YAAMF,EAAA,GAEFE,IACEP,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA,IAGdA,EAAU,SAASA,EAAU,MAAM,QACrCA,EAAU,MAAM,MAAA;AAAA,IAGtB,CAAC,GAEDQ,EAAU,MAAM;AACd,MAAIZ,EAAM,cACJI,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA;AAAA,IAGtB,CAAC,GAEDS,EAAa;AAAA,MACX,MAAMP;AAAA,MACN,OAAOC;AAAA,IAAA,CACR,cAtGCO,EAAA,GAAAC,EA0BS,UA1BTC,EA0BS;AAAA,eAzBH;AAAA,MAAJ,KAAIZ;AAAA,MACJ,OAAM;AAAA,IAAA,GACEa,EAAAA,QAAM,EACb,SAAOT,EAAA,CAAiB,GAAA;AAAA,MAEdP,EAAA,gBAAXa,EAAA,GAAAC,EAWM,OAXNG,GAWM;AAAA,QAVJC,EAEO,QAFPC,GAEO;AAAA,UADLC,EAA0BC,EAAA,QAAA,OAAA;AAAA,QAAA;QAGpBrB,EAAA,mBAAmBA,EAAA,iBAD3Bc,EAMiB,UAAA;AAAA;UAJf,MAAK;AAAA,UACL,cAAW;AAAA,UACX,OAAM;AAAA,UACL,SAAKQ,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAAA,CAAAC,MAAUrB,EAAA,OAAW,MAAA,GAAK,CAAA,SAAA,CAAA;AAAA,QAAA,GACjC,GAAO;;MAGVe,EAEM,OAFNO,GAEM;AAAA,QADJL,EAAaC,EAAA,QAAA,SAAA;AAAA,MAAA;MAGJK,EAAAA,OAAO,UAAlBb,KAAAC,EAEM,OAFNa,GAEM;AAAA,QADJP,EAA2BC,EAAA,QAAA,QAAA;AAAA,MAAA;;;ICpBpBO,IAA2B;AAAA,EACtC,SAAS,CAACC,MAAa;AACrB,IAAAA,EAAI,UAAU,cAAcC,CAAmB;AAAA,EACjD;AACF;"}

package/dist/unobfuscated.umd.js

@@ -0,0 +1,3 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dialog-view{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]{display:flex;flex-direction:column}.dialog-view::backdrop{background:#00000080}.dialog-title-bar{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{flex:1;text-align:center;font-weight:700;font-size:large;overflow:hidden;text-overflow:ellipsis}.dialog-close-button{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:hover{color:#333;background-color:#f0f0f0;border-radius:3px}.dialog-close-button:focus-visible{outline:2px solid rgb(160,207,255);outline-offset:-2px}.dialog-content{flex:1;overflow:auto;display:flex;flex-direction:column}.dialog-footer{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 r={key:0,class:"dialog-title-bar"},u={class:"dialog-title"},f={class:"dialog-content"},m={key:1,class:"dialog-footer"},s=e.defineComponent({__name:"DialogView",props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0},closable:{type:Boolean,default:!0}},emits:["update:modelValue"],setup(a,{expose:p,emit:g}){const n=a,i=g,o=e.ref(null),V=()=>{i("update:modelValue",!0)},h=()=>{i("update:modelValue",!1)},w=()=>{if(!n.closable&&n.modelValue){e.nextTick(()=>{o.value&&!o.value.open&&o.value.showModal()});return}n.modelValue&&i("update:modelValue",!1)};return e.watch(()=>n.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(()=>{n.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),p({open:V,close:h}),(t,c)=>(e.openBlock(),e.createElementBlock("dialog",e.mergeProps({ref_key:"dialogRef",ref:o,class:"dialog-view"},t.$attrs,{onClose:w}),[a.showTitleBar?(e.openBlock(),e.createElementBlock("div",r,[e.createElementVNode("span",u,[e.renderSlot(t.$slots,"title")]),a.showCloseButton&&a.closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button","aria-label":"Close the dialog",class:"dialog-close-button",onClick:c[0]||(c[0]=e.withModifiers(B=>o.value?.close(),["prevent"]))},"×")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",f,[e.renderSlot(t.$slots,"default")]),t.$slots.footer?(e.openBlock(),e.createElementBlock("div",m,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)],16))}}),d={install:a=>{a.component("DialogView",s)}};l.DialogView=s,l.DialogViewPlugin=d,l.default=d,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+//# sourceMappingURL=unobfuscated.umd.js.map

package/dist/unobfuscated.umd.js.map

@@ -0,0 +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  >\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=\"dialogRef?.close()\"\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, nextTick, onMounted } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement | null>(null)\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\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) {\n          dialogRef.value.showModal()\n        }\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n}\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\ndefineExpose({\n  open: openDialog,\n  close: closeDialog,\n})\n</script>\n\n<style>\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>","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","handleDialogClose","nextTick","watch","newValue","onMounted","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_1","_createElementVNode","_hoisted_2","_renderSlot","_ctx","_cache","_withModifiers","$event","_hoisted_3","$slots","_hoisted_4","DialogViewPlugin","app","DialogViewComponent"],"mappings":"mnBAwCA,MAAMA,EAAQC,EAMRC,EAAOC,EAIPC,EAAYC,EAAAA,IAA8B,IAAI,EAE9CC,EAAa,IAAY,CAC7BJ,EAAK,oBAAqB,EAAI,CAChC,EAEMK,EAAc,IAAY,CAC9BL,EAAK,oBAAqB,EAAK,CACjC,EAEMM,EAAoB,IAAY,CACpC,GAAI,CAACR,EAAM,UACLA,EAAM,WAAY,CAGpBS,EAAAA,SAAS,IAAM,CACTL,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAEpB,CAAC,EACD,MACF,CAEEJ,EAAM,YACRE,EAAK,oBAAqB,EAAK,CAEnC,EAEAQ,OAAAA,EAAAA,MAAM,IAAMV,EAAM,WAAY,MAAOW,GAAsB,CACzD,MAAMF,WAAA,EAEFE,EACEP,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,EAGdA,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAGtB,CAAC,EAEDQ,EAAAA,UAAU,IAAM,CACVZ,EAAM,YACJI,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAGtB,CAAC,EAEDS,EAAa,CACX,KAAMP,EACN,MAAOC,CAAA,CACR,UAtGCO,YAAA,EAAAC,qBA0BS,SA1BTC,EAAAA,WA0BS,SAzBH,YAAJ,IAAIZ,EACJ,MAAM,aAAA,EACEa,EAAAA,OAAM,CACb,QAAOT,CAAA,CAAiB,EAAA,CAEdP,EAAA,cAAXa,EAAAA,UAAA,EAAAC,EAAAA,mBAWM,MAXNG,EAWM,CAVJC,EAAAA,mBAEO,OAFPC,EAEO,CADLC,aAA0BC,EAAA,OAAA,OAAA,CAAA,GAGpBrB,EAAA,iBAAmBA,EAAA,wBAD3Bc,EAAAA,mBAMiB,SAAA,OAJf,KAAK,SACL,aAAW,mBACX,MAAM,sBACL,QAAKQ,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,EAAAA,cAAAC,GAAUrB,EAAA,OAAW,MAAA,EAAK,CAAA,SAAA,CAAA,EAAA,EACjC,GAAO,8DAGVe,EAAAA,mBAEM,MAFNO,EAEM,CADJL,aAAaC,EAAA,OAAA,SAAA,CAAA,GAGJK,EAAAA,OAAO,QAAlBb,EAAAA,YAAAC,EAAAA,mBAEM,MAFNa,EAEM,CADJP,aAA2BC,EAAA,OAAA,QAAA,CAAA,yCCpBpBO,EAA2B,CACtC,QAAUC,GAAa,CACrBA,EAAI,UAAU,aAAcC,CAAmB,CACjD,CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-dialog-view",
-    "version": "1.5.1",
+    "version": "1.6.0",
     "description": "A modern Vue 3 dialog component using native dialog element",
     "type": "module",
     "main": "./dist/dialog-view.umd.js",
@@ -11,6 +11,11 @@
             "types": "./dist/index.d.ts",
             "import": "./dist/dialog-view.es.js",
             "require": "./dist/dialog-view.umd.js"
+        },
+        "./unobfuscated": {
+            "types": "./dist/unobfuscated.d.ts",
+            "import": "./dist/unobfuscated.es.js",
+            "require": "./dist/unobfuscated.umd.js"
         }
     },
     "files": [
@@ -27,7 +32,9 @@
         "clean": "rimraf dist",
         "obfuscate": "node ./obfuscate-classes.mjs",
         "build": "npm run clean && npm run obfuscate && npm run build-only",
-        "build-only": "vue-tsc --noEmit && vite build",
+        "build-only": "npm run build-only:normal && npm run build-only:unobfuscated",
+        "build-only:normal": "vue-tsc --noEmit && vite build",
+        "build-only:unobfuscated": "vue-tsc --noEmit && vite build --mode unobfuscated",
         "preview": "vite preview"
     },
     "peerDependencies": {

package/src/DialogView.obf.vue

@@ -143,8 +143,6 @@ defineExpose({
   font-size: large;
   overflow: hidden;
   text-overflow: ellipsis;
-  display: flex;
-  flex-direction: row;
 }
 
 ._468ff1da37ead40a {

package/src/DialogView.vue

@@ -143,8 +143,6 @@ defineExpose({
   font-size: large;
   overflow: hidden;
   text-overflow: ellipsis;
-  display: flex;
-  flex-direction: row;
 }
 
 .dialog-close-button {

package/src/unobfuscated.ts

@@ -0,0 +1,12 @@
+import { App, Plugin } from 'vue'
+import DialogViewComponent from './DialogView.vue'
+
+export { default as DialogView } from './DialogView.vue'
+
+export const DialogViewPlugin: Plugin = {
+  install: (app: App) => {
+    app.component('DialogView', DialogViewComponent)
+  }
+}
+
+export default DialogViewPlugin

package/vite.config.ts

@@ -4,7 +4,7 @@ import { fileURLToPath, URL } from 'node:url'
 import dts from 'vite-plugin-dts'
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 
-export default defineConfig({
+const config = ({
   plugins: [
     vue(),
     cssInjectedByJsPlugin(),
@@ -14,9 +14,10 @@ export default defineConfig({
   ],
   build: {
     lib: {
-      entry: fileURLToPath(new URL('./src/index.ts', import.meta.url)),
+      entry: null,
       name: 'DialogView',
-      fileName: (format) => `dialog-view.${format}.js`
+      fileName: () => { throw new Error('stub function') },
+      formats: ['umd', 'es'],
     },
     rollupOptions: {
       external: ['vue'],
@@ -28,10 +29,22 @@ export default defineConfig({
       },
     },
     sourcemap: true,
+    emptyOutDir: false,
   },
   css: {
     modules: {
       generateScopedName: '[hash:sha256]',
     },
   },
-})
+});
+
+export default defineConfig(({ mode }) => {
+  if (mode === 'unobfuscated') {
+    config.build.lib.entry = fileURLToPath(new URL('./src/unobfuscated.ts', import.meta.url));
+    config.build.lib.fileName = _ => `unobfuscated.${_}.js`;
+  } else {
+    config.build.lib.entry = fileURLToPath(new URL('./src/index.ts', import.meta.url));
+    config.build.lib.fileName = _ => `dialog-view.${_}.js`;
+  }
+  return defineConfig(config);
+})