vue-dialog-view 1.0.0 → 1.1.0

package/dist/dialog-view.es.js

@@ -1,61 +1,56 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dialog-view[data-v-1ca83b6e]{padding:20px;border-radius:5px;border:1px solid gray;outline:0!important}.dialog-view[open][data-v-1ca83b6e]{display:flex;flex-direction:column;position:fixed;margin:auto;max-width:90vw;max-height:90vh}.dialog-view[data-v-1ca83b6e]::backdrop{background:#00000080}.dialog-title-bar[data-v-1ca83b6e]{display:flex;flex-direction:row;align-items:center;margin-bottom:.5em;min-height:24px}.dialog-title[data-v-1ca83b6e]{flex:1;text-align:center;font-weight:700;font-size:1.1em}.dialog-close-button[data-v-1ca83b6e]{margin-left:.5em;text-decoration:none;color:#666;font-size:1.5em;line-height:1;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none}.dialog-close-button[data-v-1ca83b6e]:hover{color:#333;background-color:#f0f0f0;border-radius:3px}.dialog-content[data-v-1ca83b6e]{flex:1;overflow:auto;display:flex;flex-direction:column}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { defineComponent as g, ref as h, watch as w, nextTick as _, createElementBlock as n, openBlock as c, mergeProps as V, createCommentVNode as r, createElementVNode as u, renderSlot as p, withModifiers as B } from "vue";
-const k = {
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f{padding:20px;border-radius:5px;border:1px solid gray;outline:0!important;max-width:calc(100% - 2em);max-height:calc(100% - 2em)}._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f[open]{display:flex;flex-direction:column}._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f::backdrop{background:#00000080}._f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6-bar{display:flex;flex-direction:row;align-items:center;margin-bottom:.5em;min-height:24px;white-space:pre}._f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6{flex:1;text-align:center;font-weight:700;font-size:1.1em}._2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c{margin-left:.5em;text-decoration:none;color:#666;font-size:1.5em;line-height:1;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none}._2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c:hover{color:#333;background-color:#f0f0f0;border-radius:3px}._3b2bdd19ddec80c5f0f162bc4b423dafa4f687f6f831e58742be40fb0e80838e{flex:1;overflow:auto;display:flex;flex-direction:column}")),document.head.appendChild(e)}}catch(d){console.error("vite-plugin-css-injected-by-js",d)}})();
+import { defineComponent as v, ref as h, watch as w, nextTick as _, createElementBlock as l, openBlock as t, mergeProps as g, createCommentVNode as c, createElementVNode as n, renderSlot as f, withModifiers as B } from "vue";
+const V = {
   key: 0,
-  class: "dialog-title-bar"
-}, y = { class: "dialog-title" }, C = { class: "dialog-content" }, D = /* @__PURE__ */ g({
-  __name: "DialogView",
+  class: "_f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6-bar"
+}, C = { class: "_f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6" }, k = { class: "_3b2bdd19ddec80c5f0f162bc4b423dafa4f687f6f831e58742be40fb0e80838e" }, i = /* @__PURE__ */ v({
+  __name: "DialogView.obf",
   props: {
     modelValue: { type: Boolean },
     showTitleBar: { type: Boolean, default: !0 },
     showCloseButton: { type: Boolean, default: !0 }
   },
   emits: ["update:modelValue"],
-  setup(o, { expose: s, emit: t }) {
-    const a = o, i = t, e = h(null), v = () => {
+  setup(o, { expose: u, emit: r }) {
+    const s = o, b = r, e = h(null), p = () => {
       e.value && !e.value.open && e.value.showModal();
     }, d = () => {
       e.value && e.value.open && e.value.close();
     }, m = () => {
-      a.modelValue && i("update:modelValue", !1);
+      s.modelValue && b("update:modelValue", !1);
     };
-    return w(() => a.modelValue, async (l) => {
-      await _(), l ? e.value && !e.value.open && e.value.showModal() : e.value && e.value.open && e.value.close();
-    }), s({
-      open: v,
+    return w(() => s.modelValue, async (a) => {
+      await _(), a ? e.value && !e.value.open && e.value.showModal() : e.value && e.value.open && e.value.close();
+    }), u({
+      open: p,
       close: d
-    }), (l, M) => (c(), n("dialog", V({
+    }), (a, y) => (t(), l("dialog", g({
       ref_key: "dialogRef",
       ref: e,
-      class: "dialog-view"
-    }, l.$attrs, { onClose: m }), [
-      o.showTitleBar ? (c(), n("div", k, [
-        u("span", y, [
-          p(l.$slots, "title", {}, void 0, !0)
+      class: "_0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f"
+    }, a.$attrs, { onClose: m }), [
+      o.showTitleBar ? (t(), l("div", V, [
+        n("span", C, [
+          f(a.$slots, "title")
         ]),
-        o.showCloseButton ? (c(), n("a", {
+        o.showCloseButton ? (t(), l("a", {
           key: 0,
           href: "javascript:void(0)",
           role: "button",
           "aria-label": "Close the dialog",
-          class: "dialog-close-button",
+          class: "_2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c",
           onClick: B(d, ["prevent"])
-        }, "×")) : r("", !0)
-      ])) : r("", !0),
-      u("div", C, [
-        p(l.$slots, "default", {}, void 0, !0)
+        }, "×")) : c("", !0)
+      ])) : c("", !0),
+      n("div", k, [
+        f(a.$slots, "default")
       ])
     ], 16));
   }
-}), b = (o, s) => {
-  const t = o.__vccOpts || o;
-  for (const [a, i] of s)
-    t[a] = i;
-  return t;
-}, f = /* @__PURE__ */ b(D, [["__scopeId", "data-v-1ca83b6e"]]);
-f.install = (o) => {
-  o.component("DialogView", f);
+});
+i.install = (o) => {
+  o.component("DialogView", i);
 };
 export {
-  f as default
+  i as default
 };

package/dist/dialog-view.umd.js

@@ -1,2 +1,2 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dialog-view[data-v-1ca83b6e]{padding:20px;border-radius:5px;border:1px solid gray;outline:0!important}.dialog-view[open][data-v-1ca83b6e]{display:flex;flex-direction:column;position:fixed;margin:auto;max-width:90vw;max-height:90vh}.dialog-view[data-v-1ca83b6e]::backdrop{background:#00000080}.dialog-title-bar[data-v-1ca83b6e]{display:flex;flex-direction:row;align-items:center;margin-bottom:.5em;min-height:24px}.dialog-title[data-v-1ca83b6e]{flex:1;text-align:center;font-weight:700;font-size:1.1em}.dialog-close-button[data-v-1ca83b6e]{margin-left:.5em;text-decoration:none;color:#666;font-size:1.5em;line-height:1;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none}.dialog-close-button[data-v-1ca83b6e]:hover{color:#333;background-color:#f0f0f0;border-radius:3px}.dialog-content[data-v-1ca83b6e]{flex:1;overflow:auto;display:flex;flex-direction:column}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-(function(e,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue")):typeof define=="function"&&define.amd?define(["vue"],l):(e=typeof globalThis<"u"?globalThis:e||self,e.DialogView=l(e.Vue))})(this,(function(e){"use strict";const l={key:0,class:"dialog-title-bar"},f={class:"dialog-title"},u={class:"dialog-content"},i=((t,c)=>{const n=t.__vccOpts||t;for(const[s,d]of c)n[s]=d;return n})(e.defineComponent({__name:"DialogView",props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0}},emits:["update:modelValue"],setup(t,{expose:c,emit:n}){const s=t,d=n,o=e.ref(null),p=()=>{o.value&&!o.value.open&&o.value.showModal()},r=()=>{o.value&&o.value.open&&o.value.close()},m=()=>{s.modelValue&&d("update:modelValue",!1)};return e.watch(()=>s.modelValue,async a=>{await e.nextTick(),a?o.value&&!o.value.open&&o.value.showModal():o.value&&o.value.open&&o.value.close()}),c({open:p,close:r}),(a,_)=>(e.openBlock(),e.createElementBlock("dialog",e.mergeProps({ref_key:"dialogRef",ref:o,class:"dialog-view"},a.$attrs,{onClose:m}),[t.showTitleBar?(e.openBlock(),e.createElementBlock("div",l,[e.createElementVNode("span",f,[e.renderSlot(a.$slots,"title",{},void 0,!0)]),t.showCloseButton?(e.openBlock(),e.createElementBlock("a",{key:0,href:"javascript:void(0)",role:"button","aria-label":"Close the dialog",class:"dialog-close-button",onClick:e.withModifiers(r,["prevent"])},"×")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",u,[e.renderSlot(a.$slots,"default",{},void 0,!0)])],16))}}),[["__scopeId","data-v-1ca83b6e"]]);return i.install=t=>{t.component("DialogView",i)},i}));
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f{padding:20px;border-radius:5px;border:1px solid gray;outline:0!important;max-width:calc(100% - 2em);max-height:calc(100% - 2em)}._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f[open]{display:flex;flex-direction:column}._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f::backdrop{background:#00000080}._f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6-bar{display:flex;flex-direction:row;align-items:center;margin-bottom:.5em;min-height:24px;white-space:pre}._f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6{flex:1;text-align:center;font-weight:700;font-size:1.1em}._2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c{margin-left:.5em;text-decoration:none;color:#666;font-size:1.5em;line-height:1;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none}._2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c:hover{color:#333;background-color:#f0f0f0;border-radius:3px}._3b2bdd19ddec80c5f0f162bc4b423dafa4f687f6f831e58742be40fb0e80838e{flex:1;overflow:auto;display:flex;flex-direction:column}")),document.head.appendChild(e)}}catch(d){console.error("vite-plugin-css-injected-by-js",d)}})();
+(function(e,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue")):typeof define=="function"&&define.amd?define(["vue"],l):(e=typeof globalThis<"u"?globalThis:e||self,e.DialogView=l(e.Vue))})(this,(function(e){"use strict";const l={key:0,class:"_f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6-bar"},c={class:"_f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6"},i={class:"_3b2bdd19ddec80c5f0f162bc4b423dafa4f687f6f831e58742be40fb0e80838e"},n=e.defineComponent({__name:"DialogView.obf",props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0}},emits:["update:modelValue"],setup(a,{expose:f,emit:r}){const d=a,u=r,o=e.ref(null),p=()=>{o.value&&!o.value.open&&o.value.showModal()},s=()=>{o.value&&o.value.open&&o.value.close()},m=()=>{d.modelValue&&u("update:modelValue",!1)};return e.watch(()=>d.modelValue,async t=>{await e.nextTick(),t?o.value&&!o.value.open&&o.value.showModal():o.value&&o.value.open&&o.value.close()}),f({open:p,close:s}),(t,b)=>(e.openBlock(),e.createElementBlock("dialog",e.mergeProps({ref_key:"dialogRef",ref:o,class:"_0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f"},t.$attrs,{onClose:m}),[a.showTitleBar?(e.openBlock(),e.createElementBlock("div",l,[e.createElementVNode("span",c,[e.renderSlot(t.$slots,"title")]),a.showCloseButton?(e.openBlock(),e.createElementBlock("a",{key:0,href:"javascript:void(0)",role:"button","aria-label":"Close the dialog",class:"_2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c",onClick:e.withModifiers(s,["prevent"])},"×")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",i,[e.renderSlot(t.$slots,"default")])],16))}});return n.install=a=>{a.component("DialogView",n)},n}));

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-import { default as DialogView } from './DialogView.vue';
+import { default as DialogView } from './DialogView.obf.vue';
 export default DialogView;

package/package.json

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

package/src/DialogView.obf.vue

@@ -0,0 +1,148 @@
+<template>
+  <dialog
+    ref="dialogRef"
+    class="_0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f"
+    v-bind="$attrs"
+    @close="handleDialogClose"
+  >
+    <div v-if="showTitleBar" class="_f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6-bar">
+      <span class="_f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6">
+        <slot name="title"></slot>
+      </span>
+      <a
+        v-if="showCloseButton"
+        href="javascript:void(0)"
+        role="button"
+        aria-label="Close the dialog"
+        class="_2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c"
+        @click.prevent="closeDialog"
+      >×</a>
+    </div>
+    <div class="_3b2bdd19ddec80c5f0f162bc4b423dafa4f687f6f831e58742be40fb0e80838e">
+      <slot></slot>
+    </div>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+
+interface Props {
+  modelValue: boolean
+  showTitleBar?: boolean
+  showCloseButton?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showTitleBar: true,
+  showCloseButton: true
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const dialogRef = ref<HTMLDialogElement | null>(null)
+
+const openDialog = (): void => {
+  if (dialogRef.value && !dialogRef.value.open) {
+    dialogRef.value.showModal()
+  }
+}
+
+const closeDialog = (): void => {
+  if (dialogRef.value && dialogRef.value.open) {
+    dialogRef.value.close()
+  }
+}
+
+const handleDialogClose = (): void => {
+  if (props.modelValue) {
+    emit('update:modelValue', false)
+  }
+}
+
+watch(() => props.modelValue, async (newValue) => {
+  await nextTick()
+  
+  if (newValue) {
+    if (dialogRef.value && !dialogRef.value.open) {
+      dialogRef.value.showModal()
+    }
+  } else {
+    if (dialogRef.value && dialogRef.value.open) {
+      dialogRef.value.close()
+    }
+  }
+})
+
+defineExpose({
+  open: openDialog,
+  close: closeDialog,
+})
+</script>
+
+<style>
+._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f {
+  padding: 20px;
+  border-radius: 5px;
+  border: 1px solid gray;
+  outline: 0 !important;
+  max-width: calc(100% - 2em);
+  max-height: calc(100% - 2em);
+}
+
+._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f[open] {
+  display: flex;
+  flex-direction: column;
+}
+
+._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+._f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 0.5em;
+  min-height: 24px;
+  white-space: pre;
+}
+
+._f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6 {
+  flex: 1;
+  text-align: center;
+  font-weight: bold;
+  font-size: 1.1em;
+}
+
+._2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c {
+  margin-left: 0.5em;
+  text-decoration: none;
+  color: #666;
+  font-size: 1.5em;
+  line-height: 1;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+._2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c:hover {
+  color: #333;
+  background-color: #f0f0f0;
+  border-radius: 3px;
+}
+
+._3b2bdd19ddec80c5f0f162bc4b423dafa4f687f6f831e58742be40fb0e80838e {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/src/DialogView.vue

@@ -88,15 +88,13 @@ defineExpose({
   border-radius: 5px;
   border: 1px solid gray;
   outline: 0 !important;
+  max-width: calc(100% - 2em);
+  max-height: calc(100% - 2em);
 }
 
 .dialog-view[open] {
   display: flex;
   flex-direction: column;
-  position: fixed;
-  margin: auto;
-  max-width: 90vw;
-  max-height: 90vh;
 }
 
 .dialog-view::backdrop {
@@ -109,6 +107,7 @@ defineExpose({
   align-items: center;
   margin-bottom: 0.5em;
   min-height: 24px;
+  white-space: pre;
 }
 
 .dialog-title {

package/src/index.ts

@@ -1,5 +1,5 @@
 import { App } from 'vue'
-import DialogView from './DialogView.vue'
+import DialogView from './DialogView.obf.vue'
 
 DialogView.install = (app: App) => {
   app.component('DialogView', DialogView)

package/vite.config.ts

@@ -27,5 +27,10 @@ export default defineConfig({
       }
     },
     cssCodeSplit: false,
-  }
+  },
+  css: {
+    modules: {
+      generateScopedName: '[hash:sha256]',
+    },
+  },
 })