vue-dialog-view 1.1.0 → 1.2.1

package/dist/dialog-view.es.js

@@ -1,9 +1,9 @@
-(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 = {
+(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);box-sizing:border-box;overflow:hidden}._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f[open]{display:flex;flex-direction:column}._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f::backdrop{background:#00000080}._f1bcbda2e971453cc116bd5c6d4a303f38ac3e0618c26210b206271398b2f619{display:flex;flex-direction:row;align-items:center;margin-bottom:.5em;min-height:24px;white-space:pre;overflow:hidden}._f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6{flex:1;text-align:center;font-weight:700;font-size:large;overflow:hidden;text-overflow:ellipsis}._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 m, ref as v, watch as h, nextTick as g, createElementBlock as l, openBlock as t, mergeProps as w, createCommentVNode as d, createElementVNode as n, renderSlot as i, withModifiers as V } from "vue";
+const _ = {
   key: 0,
-  class: "_f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6-bar"
-}, C = { class: "_f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6" }, k = { class: "_3b2bdd19ddec80c5f0f162bc4b423dafa4f687f6f831e58742be40fb0e80838e" }, i = /* @__PURE__ */ v({
+  class: "_f1bcbda2e971453cc116bd5c6d4a303f38ac3e0618c26210b206271398b2f619"
+}, B = { class: "_f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6" }, C = { class: "_3b2bdd19ddec80c5f0f162bc4b423dafa4f687f6f831e58742be40fb0e80838e" }, k = /* @__PURE__ */ m({
   __name: "DialogView.obf",
   props: {
     modelValue: { type: Boolean },
@@ -11,27 +11,27 @@ const V = {
     showCloseButton: { type: Boolean, default: !0 }
   },
   emits: ["update:modelValue"],
-  setup(o, { expose: u, emit: r }) {
-    const s = o, b = r, e = h(null), p = () => {
+  setup(o, { expose: f, emit: u }) {
+    const s = o, r = u, e = v(null), b = () => {
       e.value && !e.value.open && e.value.showModal();
-    }, d = () => {
+    }, c = () => {
       e.value && e.value.open && e.value.close();
-    }, m = () => {
-      s.modelValue && b("update:modelValue", !1);
+    }, p = () => {
+      s.modelValue && r("update:modelValue", !1);
     };
-    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
-    }), (a, y) => (t(), l("dialog", g({
+    return h(() => s.modelValue, async (a) => {
+      await g(), a ? e.value && !e.value.open && e.value.showModal() : e.value && e.value.open && e.value.close();
+    }), f({
+      open: b,
+      close: c
+    }), (a, y) => (t(), l("dialog", w({
       ref_key: "dialogRef",
       ref: e,
       class: "_0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f"
-    }, a.$attrs, { onClose: m }), [
-      o.showTitleBar ? (t(), l("div", V, [
-        n("span", C, [
-          f(a.$slots, "title")
+    }, a.$attrs, { onClose: p }), [
+      o.showTitleBar ? (t(), l("div", _, [
+        n("span", B, [
+          i(a.$slots, "title")
         ]),
         o.showCloseButton ? (t(), l("a", {
           key: 0,
@@ -39,18 +39,22 @@ const V = {
           role: "button",
           "aria-label": "Close the dialog",
           class: "_2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c",
-          onClick: B(d, ["prevent"])
-        }, "×")) : c("", !0)
-      ])) : c("", !0),
-      n("div", k, [
-        f(a.$slots, "default")
+          onClick: V(c, ["prevent"])
+        }, "×")) : d("", !0)
+      ])) : d("", !0),
+      n("div", C, [
+        i(a.$slots, "default")
       ])
     ], 16));
   }
-});
-i.install = (o) => {
-  o.component("DialogView", i);
+}), M = {
+  install: (o) => {
+    o.component("DialogView", k);
+  }
 };
 export {
-  i as default
+  k as DialogView,
+  M as DialogViewPlugin,
+  M as default
 };
+//# sourceMappingURL=dialog-view.es.js.map

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

@@ -0,0 +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=\"_0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_f1bcbda2e971453cc116bd5c6d4a303f38ac3e0618c26210b206271398b2f619\">\n      <span class=\"_f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6\">\n        <slot name=\"title\"></slot>\n      </span>\n      <a\n        v-if=\"showCloseButton\"\n        href=\"javascript:void(0)\"\n        role=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c\"\n        @click.prevent=\"closeDialog\"\n      >×</a>\n    </div>\n    <div class=\"_3b2bdd19ddec80c5f0f162bc4b423dafa4f687f6f831e58742be40fb0e80838e\">\n      <slot></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, nextTick } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: 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  if (dialogRef.value && !dialogRef.value.open) {\n    dialogRef.value.showModal()\n  }\n}\n\nconst closeDialog = (): void => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n}\n\nconst handleDialogClose = (): void => {\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n}\n\nwatch(() => props.modelValue, async (newValue) => {\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\ndefineExpose({\n  open: openDialog,\n  close: closeDialog,\n})\n</script>\n\n<style>\n._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f {\n  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._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n._f1bcbda2e971453cc116bd5c6d4a303f38ac3e0618c26210b206271398b2f619 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: 24px;\n  white-space: pre;\n  overflow: hidden;\n}\n\n._f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6 {\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._2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c {\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  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n._2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n._3b2bdd19ddec80c5f0f162bc4b423dafa4f687f6f831e58742be40fb0e80838e {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\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","watch","newValue","nextTick","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_1","_createElementVNode","_hoisted_2","_renderSlot","_ctx","_hoisted_3","DialogViewPlugin","app","DialogViewComponent"],"mappings":";;;;;;;;;;;;;AAmCA,UAAMA,IAAQC,GAKRC,IAAOC,GAIPC,IAAYC,EAA8B,IAAI,GAE9CC,IAAa,MAAY;AAC7B,MAAIF,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA;AAAA,IAEpB,GAEMG,IAAc,MAAY;AAC9B,MAAIH,EAAU,SAASA,EAAU,MAAM,QACrCA,EAAU,MAAM,MAAA;AAAA,IAEpB,GAEMI,IAAoB,MAAY;AACpC,MAAIR,EAAM,cACRE,EAAK,qBAAqB,EAAK;AAAA,IAEnC;AAEA,WAAAO,EAAM,MAAMT,EAAM,YAAY,OAAOU,MAAa;AAChD,YAAMC,EAAA,GAEFD,IACEN,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA,IAGdA,EAAU,SAASA,EAAU,MAAM,QACrCA,EAAU,MAAM,MAAA;AAAA,IAGtB,CAAC,GAEDQ,EAAa;AAAA,MACX,MAAMN;AAAA,MACN,OAAOC;AAAA,IAAA,CACR,cAhFCM,EAAA,GAAAC,EAsBS,UAtBTC,EAsBS;AAAA,eArBH;AAAA,MAAJ,KAAIX;AAAA,MACJ,OAAM;AAAA,IAAA,GACEY,EAAAA,QAAM,EACb,SAAOR,EAAA,CAAiB,GAAA;AAAA,MAEdP,EAAA,gBAAXY,EAAA,GAAAC,EAYM,OAZNG,GAYM;AAAA,QAXJC,EAEO,QAFPC,GAEO;AAAA,UADLC,EAA0BC,EAAA,QAAA,OAAA;AAAA,QAAA;QAGpBpB,EAAA,wBADRa,EAOM,KAAA;AAAA;UALJ,MAAK;AAAA,UACL,MAAK;AAAA,UACL,cAAW;AAAA,UACX,OAAM;AAAA,UACL,WAAeP,GAAW,CAAA,SAAA,CAAA;AAAA,QAAA,GAC5B,GAAC;;MAEJW,EAEM,OAFNI,GAEM;AAAA,QADJF,EAAaC,EAAA,QAAA,SAAA;AAAA,MAAA;;;IChBNE,IAA2B;AAAA,EACtC,SAAS,CAACC,MAAa;AACrB,IAAAA,EAAI,UAAU,cAAcC,CAAmB;AAAA,EACjD;AACF;"}

package/dist/dialog-view.umd.js

@@ -1,2 +1,3 @@
-(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}));
+(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);box-sizing:border-box;overflow:hidden}._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f[open]{display:flex;flex-direction:column}._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f::backdrop{background:#00000080}._f1bcbda2e971453cc116bd5c6d4a303f38ac3e0618c26210b206271398b2f619{display:flex;flex-direction:row;align-items:center;margin-bottom:.5em;min-height:24px;white-space:pre;overflow:hidden}._f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6{flex:1;text-align:center;font-weight:700;font-size:large;overflow:hidden;text-overflow:ellipsis}._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(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 c={key:0,class:"_f1bcbda2e971453cc116bd5c6d4a303f38ac3e0618c26210b206271398b2f619"},f={class:"_f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6"},r={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:u,emit:p}){const d=a,b=p,o=e.ref(null),m=()=>{o.value&&!o.value.open&&o.value.showModal()},s=()=>{o.value&&o.value.open&&o.value.close()},h=()=>{d.modelValue&&b("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()}),u({open:m,close:s}),(t,g)=>(e.openBlock(),e.createElementBlock("dialog",e.mergeProps({ref_key:"dialogRef",ref:o,class:"_0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f"},t.$attrs,{onClose:h}),[a.showTitleBar?(e.openBlock(),e.createElementBlock("div",c,[e.createElementVNode("span",f,[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",r,[e.renderSlot(t.$slots,"default")])],16))}}),i={install:a=>{a.component("DialogView",n)}};l.DialogView=n,l.DialogViewPlugin=i,l.default=i,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+//# sourceMappingURL=dialog-view.umd.js.map

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

@@ -0,0 +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=\"_0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_f1bcbda2e971453cc116bd5c6d4a303f38ac3e0618c26210b206271398b2f619\">\n      <span class=\"_f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6\">\n        <slot name=\"title\"></slot>\n      </span>\n      <a\n        v-if=\"showCloseButton\"\n        href=\"javascript:void(0)\"\n        role=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c\"\n        @click.prevent=\"closeDialog\"\n      >×</a>\n    </div>\n    <div class=\"_3b2bdd19ddec80c5f0f162bc4b423dafa4f687f6f831e58742be40fb0e80838e\">\n      <slot></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, nextTick } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: 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  if (dialogRef.value && !dialogRef.value.open) {\n    dialogRef.value.showModal()\n  }\n}\n\nconst closeDialog = (): void => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n}\n\nconst handleDialogClose = (): void => {\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n}\n\nwatch(() => props.modelValue, async (newValue) => {\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\ndefineExpose({\n  open: openDialog,\n  close: closeDialog,\n})\n</script>\n\n<style>\n._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f {\n  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._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n._f1bcbda2e971453cc116bd5c6d4a303f38ac3e0618c26210b206271398b2f619 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: 24px;\n  white-space: pre;\n  overflow: hidden;\n}\n\n._f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6 {\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._2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c {\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  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n._2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n._3b2bdd19ddec80c5f0f162bc4b423dafa4f687f6f831e58742be40fb0e80838e {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\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","watch","newValue","nextTick","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_1","_createElementVNode","_hoisted_2","_renderSlot","_ctx","_hoisted_3","DialogViewPlugin","app","DialogViewComponent"],"mappings":"6sBAmCA,MAAMA,EAAQC,EAKRC,EAAOC,EAIPC,EAAYC,EAAAA,IAA8B,IAAI,EAE9CC,EAAa,IAAY,CACzBF,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAEpB,EAEMG,EAAc,IAAY,CAC1BH,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAEpB,EAEMI,EAAoB,IAAY,CAChCR,EAAM,YACRE,EAAK,oBAAqB,EAAK,CAEnC,EAEAO,OAAAA,EAAAA,MAAM,IAAMT,EAAM,WAAY,MAAOU,GAAa,CAChD,MAAMC,WAAA,EAEFD,EACEN,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,EAGdA,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAGtB,CAAC,EAEDQ,EAAa,CACX,KAAMN,EACN,MAAOC,CAAA,CACR,UAhFCM,YAAA,EAAAC,qBAsBS,SAtBTC,EAAAA,WAsBS,SArBH,YAAJ,IAAIX,EACJ,MAAM,mEAAA,EACEY,EAAAA,OAAM,CACb,QAAOR,CAAA,CAAiB,EAAA,CAEdP,EAAA,cAAXY,EAAAA,UAAA,EAAAC,EAAAA,mBAYM,MAZNG,EAYM,CAXJC,EAAAA,mBAEO,OAFPC,EAEO,CADLC,aAA0BC,EAAA,OAAA,OAAA,CAAA,GAGpBpB,EAAA,+BADRa,EAAAA,mBAOM,IAAA,OALJ,KAAK,qBACL,KAAK,SACL,aAAW,mBACX,MAAM,oEACL,wBAAeP,EAAW,CAAA,SAAA,CAAA,CAAA,EAC5B,GAAC,8DAEJW,EAAAA,mBAEM,MAFNI,EAEM,CADJF,aAAaC,EAAA,OAAA,SAAA,CAAA,YChBNE,EAA2B,CACtC,QAAUC,GAAa,CACrBA,EAAI,UAAU,aAAcC,CAAmB,CACjD,CACF"}

package/dist/index.d.ts

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

package/obfuscate-classes.mjs

@@ -0,0 +1,103 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import crypto from 'crypto';
+
+const SRC_DIR = path.resolve('./src');
+const OBF_SUFFIX = '.obf.vue';
+
+// ----------------------------
+// 遍历 Vue 文件（跳过 .obf.vue）
+// ----------------------------
+function getVueFiles(dir) {
+  let files = [];
+  for (const item of fs.readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = path.join(dir, item.name);
+    if (item.isDirectory()) {
+      files = files.concat(getVueFiles(fullPath));
+    } else if (item.isFile() && item.name.endsWith('.vue') && !item.name.endsWith(OBF_SUFFIX)) {
+      files.push(fullPath);
+    }
+  }
+  return files;
+}
+
+// ----------------------------
+// SHA256 混淆类名
+// ----------------------------
+function obfClass(name) {
+  return '_' + crypto.createHash('sha256').update(name).digest('hex')
+}
+
+// ----------------------------
+// 提取 template 内的 class
+// ----------------------------
+function extractClasses(template) {
+  const classes = new Set();
+
+  // class="..."
+  const classAttrRegex = /class\s*=\s*"([^"]+)"/g;
+  let match;
+  while ((match = classAttrRegex.exec(template)) !== null) {
+    match[1].split(/\s+/).forEach(cls => cls && classes.add(cls));
+  }
+
+  return classes;
+}
+
+// ----------------------------
+// 替换模板和 style 中的 class
+// ----------------------------
+function replaceClasses(content, classMap) {
+  // 替换 class="..."
+  content = content.replace(/class\s*=\s*"([^"]+)"/g, (match, group1) => {
+    const replaced = group1.split(/\s+/).map(cls => classMap[cls] || cls).join(' ');
+    return `class="${replaced}"`;
+  });
+
+  // 替换 <style> 中的类名
+  content = content.replace(/(\.)([\w-]+)/g, (match, dot, cls) => {
+    return classMap[cls] ? `.${classMap[cls]}` : match;
+  });
+
+  return content;
+}
+
+// ----------------------------
+// 主程序
+// ----------------------------
+function main() {
+  const vueFiles = getVueFiles(SRC_DIR);
+  const allClasses = new Set();
+
+  // 提取所有 template class
+  vueFiles.forEach(file => {
+    const content = fs.readFileSync(file, 'utf-8');
+    const templateMatch = content.match(/<template[^>]*>([\s\S]*?)<\/template>/);
+    if (!templateMatch) return;
+    const templateContent = templateMatch[1];
+    extractClasses(templateContent).forEach(cls => allClasses.add(cls));
+  });
+
+  // 按长度降序避免短类名覆盖长类名
+  const classList = Array.from(allClasses).sort((a, b) => b.length - a.length);
+  const classMap = {};
+  classList.forEach(cls => { classMap[cls] = obfClass(cls); });
+
+  console.log('🔹 类名混淆映射：');
+  console.table(classMap);
+
+  // 替换并生成 .obf.vue 文件
+  vueFiles.forEach(file => {
+    const content = fs.readFileSync(file, 'utf-8');
+    const replacedContent = replaceClasses(content, classMap);
+
+    const obfFile = path.join(path.dirname(file), path.basename(file, '.vue') + OBF_SUFFIX);
+    fs.writeFileSync(obfFile, replacedContent, 'utf-8');
+    console.log(`✅ ${file} -> ${obfFile}`);
+  });
+
+  console.log('🎉 所有文件混淆完成！');
+}
+
+main();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-dialog-view",
-    "version": "1.1.0",
+    "version": "1.2.1",
     "description": "A modern Vue 3 dialog component using native dialog element",
     "type": "module",
     "main": "./dist/dialog-view.umd.js",
@@ -19,11 +19,15 @@
         "README.md",
         "tsconfig.json",
         "vite.config.ts",
+        "obfuscate-classes.mjs",
         "LICENSE"
     ],
     "scripts": {
         "dev": "vite",
-        "build": "vue-tsc --noEmit && vite build",
+        "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",
         "preview": "vite preview"
     },
     "peerDependencies": {
@@ -31,6 +35,7 @@
     },
     "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.1",
+        "rimraf": "^6.0.1",
         "typescript": "^5.9.3",
         "vite": "^7.1.10",
         "vite-plugin-css-injected-by-js": "^3.5.2",
@@ -51,4 +56,4 @@
         "url": "https://github.com/shc0743/MyUtility/issues"
     },
     "homepage": "https://github.com/shc0743/MyUtility/tree/main/js/lib/vue-dialog-view#readme"
-}
+}

package/src/DialogView.obf.vue

@@ -5,7 +5,7 @@
     v-bind="$attrs"
     @close="handleDialogClose"
   >
-    <div v-if="showTitleBar" class="_f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6-bar">
+    <div v-if="showTitleBar" class="_f1bcbda2e971453cc116bd5c6d4a303f38ac3e0618c26210b206271398b2f619">
       <span class="_f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6">
         <slot name="title"></slot>
       </span>
@@ -90,6 +90,8 @@ defineExpose({
   outline: 0 !important;
   max-width: calc(100% - 2em);
   max-height: calc(100% - 2em);
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
 ._0e414b08e017324be9d8055e33e9e57a5d618fd64445845aa3d1c9c71a1cf19f[open] {
@@ -101,20 +103,23 @@ defineExpose({
   background: rgba(0, 0, 0, 0.5);
 }
 
-._f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6-bar {
+._f1bcbda2e971453cc116bd5c6d4a303f38ac3e0618c26210b206271398b2f619 {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-bottom: 0.5em;
   min-height: 24px;
   white-space: pre;
+  overflow: hidden;
 }
 
 ._f365dae0582379d563ee03ab860c73c916d68f096a41a8bd34e05e566987b1f6 {
   flex: 1;
   text-align: center;
   font-weight: bold;
-  font-size: 1.1em;
+  font-size: large;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 ._2b0f1321796c8091f668958929ed738b53afcb63d79387dc52ddc75b55ffb46c {

package/src/DialogView.vue

@@ -82,7 +82,7 @@ defineExpose({
 })
 </script>
 
-<style scoped>
+<style>
 .dialog-view {
   padding: 20px;
   border-radius: 5px;
@@ -90,6 +90,8 @@ defineExpose({
   outline: 0 !important;
   max-width: calc(100% - 2em);
   max-height: calc(100% - 2em);
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
 .dialog-view[open] {
@@ -108,13 +110,16 @@ defineExpose({
   margin-bottom: 0.5em;
   min-height: 24px;
   white-space: pre;
+  overflow: hidden;
 }
 
 .dialog-title {
   flex: 1;
   text-align: center;
   font-weight: bold;
-  font-size: 1.1em;
+  font-size: large;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .dialog-close-button {

package/src/index.ts

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

package/vite.config.ts

@@ -21,12 +21,13 @@ export default defineConfig({
     rollupOptions: {
       external: ['vue'],
       output: {
+        exports: 'named',
         globals: {
           vue: 'Vue'
-        }
-      }
+        },
+      },
     },
-    cssCodeSplit: false,
+    sourcemap: true,
   },
   css: {
     modules: {