vue-dialog-view 2.0.0 → 2.1.0

package/dist/cssless.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"cssless.es.js","names":["$attrs","$slots"],"sources":["../src/DialogView.vue","../src/DialogView.vue","../src/unobfuscated.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"dialog-view\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"dialog-title-bar\">\n      <span class=\"dialog-title\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"dialog-close-button\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"dialog-content-wrapper\">\n      <div class=\"dialog-content\">\n        <slot></slot>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"dialog-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style scoped>\n.dialog-view {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.dialog-view[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-view::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.dialog-title-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n.dialog-title {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dialog-close-button {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n.dialog-close-button:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n.dialog-close-button:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n.dialog-content-wrapper {\n  flex: 1;\n  overflow: auto;\n}\n\n.dialog-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n.dialog-footer {\n  margin-top: 0.5em;\n}\n</style>\n","<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"dialog-view\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"dialog-title-bar\">\n      <span class=\"dialog-title\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"dialog-close-button\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"dialog-content-wrapper\">\n      <div class=\"dialog-content\">\n        <slot></slot>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"dialog-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style scoped>\n.dialog-view {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.dialog-view[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-view::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.dialog-title-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n.dialog-title {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dialog-close-button {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n.dialog-close-button:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n.dialog-close-button:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n.dialog-content-wrapper {\n  flex: 1;\n  overflow: auto;\n}\n\n.dialog-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n.dialog-footer {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.vue'\n\nexport { default as DialogView } from './DialogView.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,IAAM,IAAQ,GAOR,IAAO,GAKP,IAAY,EAAuB,GAEnC,UAAyB;GAC7B,EAAK,qBAAqB,EAAI;EAChC,GAEM,UAA0B;GAC9B,EAAK,qBAAqB,EAAK;EACjC,GAEM,KAAsB,MAAa;GAEvC,AADA,EAAE,eAAe,GACb,EAAM,YAAU,EAAY;EAClC,GAEM,IAAmB,EAAI,EAAK,GAE5B,UAAgC;GAChC,OAAiB,OACrB;QAAI,CAAC,EAAM,YACL,EAAM,YAAY;KAGpB,QAAe;MACb,AAAI,EAAU,SAAS,CAAC,EAAU,MAAM,QAAM,EAAU,MAAM,UAAU;KAC1E,CAAC;KACD;IACF;IAWF,AATI,EAAM,cACR,EAAK,qBAAqB,EAAK,GAEjC,QAAe;KACb,AAAI,EAAM,cAEJ,EAAU,SAAS,CAAC,EAAU,MAAM,QAAM,EAAU,MAAM,UAAU;IAE5E,CAAC,GACD,EAAK,QAAQ;;EACf,GAEM,IAAW,QAAe,EAAM,WAAY,EAAM,mBAAmB,QAAQ,iBAAkB,MAAM;EAE3G,QAAY,EAAM,YAAY,OAAO,MAAsB;GAGzD,AAFA,MAAM,EAAS,GAEX,IACE,EAAU,SAAS,CAAC,EAAU,MAAM,QACtC,EAAU,MAAM,UAAU,IAGxB,EAAU,SAAS,EAAU,MAAM,QACrC,EAAU,MAAM,MAAM;EAG5B,CAAC;EAED,IAAM,UAAmB;GACvB,AAAI,EAAM,cACJ,EAAU,SAAS,CAAC,EAAU,MAAM,QACtC,EAAU,MAAM,UAAU;EAGhC;SAEA,QAAgB;GACd,EAAW;EACb,CAAC,GAED,QAAsB;GACpB,AAAI,EAAU,SAAS,EAAU,MAAM,QACrC,EAAU,MAAM,MAAM;EAE1B,CAAC,GAED,QAAoB;GAClB,AAAI,EAAU,SAAS,EAAU,MAAM,SACrC,EAAiB,QAAQ,IACzB,EAAU,MAAM,MAAM,GACtB,QAAe,EAAiB,QAAQ,EAAK;EAEjD,CAAC,GAED,QAAkB;GAChB,EAAW;EACb,CAAC,GAED,EAAa;GACX,WAAW,EAAU;GACrB,MAAM;GACN,OAAO;EACT,CAAC,mBAnJC,EA8BS,UA9BT,EA8BS;YA7BH;GAAJ,KAAI;GACJ,OAAM;KACEA,EAAAA,QAAM;GACb,SAAO;GACP,UAAQ;GACR,UAAU,EAAA;;GAEA,EAAA,gBAAA,EAAA,GAAX,EAWM,OAXN,GAWM,CAVJ,EAEO,QAFP,GAEO,CADL,EAA0B,EAAA,QAAA,SAAA,CAAA,GAAA,KAAA,GAAA,EAAA,CAAA,CAAA,GAGpB,EAAA,mBAAmB,EAAA,YAAA,EAAA,GAD3B,EAMiB,UAAA;;IAJf,MAAK;IACL,cAAW;IACX,OAAM;IACL,SAAK,EAAU,GAAW,CAAA,SAAA,CAAA;MAC5B,GAAO,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAGV,EAIM,OAJN,GAIM,CAHJ,EAEM,OAFN,GAEM,CADJ,EAAa,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,EAAA,CAAA,CAAA,CAAA,CAAA;GAINC,EAAAA,OAAO,UAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAA2B,EAAA,QAAA,UAAA,CAAA,GAAA,KAAA,GAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;;;yCExBpB,IAA2B,EACtC,UAAU,MAAa;CACrB,EAAI,UAAU,cAAc,CAAmB;AACjD,EACF"}
+{"version":3,"file":"cssless.es.js","names":["$attrs","$slots"],"sources":["../src/config.ts","../src/DialogView.vue","../src/DialogView.vue","../src/unobfuscated.ts"],"sourcesContent":["import { ref } from 'vue'\n\nexport interface DialogViewConfig {\n  theme: 'light' | 'dark' | 'auto'\n}\n\nconst defaultConfig: DialogViewConfig = {\n  theme: 'light'\n}\n\nexport const dialogViewConfig = ref<DialogViewConfig>({ ...defaultConfig })\n\nexport function setDialogViewConfig(newConfig: Partial<DialogViewConfig>): void {\n  dialogViewConfig.value = { ...dialogViewConfig.value, ...newConfig }\n}\n","<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"dialog-view\"\n    :data-theme=\"resolvedTheme\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"dialog-title-bar\">\n      <span class=\"dialog-title\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"dialog-close-button\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"dialog-content-wrapper\">\n      <div class=\"dialog-content\">\n        <slot></slot>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"dialog-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated, inject } from 'vue'\nimport { dialogViewConfig, type DialogViewConfig } from './config'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n  theme?: 'light' | 'dark' | 'auto'\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      })\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none')\n\n// --- Theme resolution ---\nconst injectedConfig = inject<DialogViewConfig | undefined>('dialogViewConfig', undefined)\n\nconst systemPrefersDark = ref(false)\nconst systemQuery = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)') : null\nlet systemQueryListener: ((e: MediaQueryListEvent) => void) | null = null\n\nif (systemQuery) {\n  systemPrefersDark.value = systemQuery.matches\n  systemQueryListener = (e) => { systemPrefersDark.value = e.matches }\n  systemQuery.addEventListener('change', systemQueryListener)\n}\n\nconst resolvedTheme = computed<'light' | 'dark'>(() => {\n  // Priority: component prop > plugin config > module-level config\n  const theme = props.theme ?? injectedConfig?.theme ?? dialogViewConfig.value.theme ?? 'light'\n  if (theme === 'auto') {\n    return systemPrefersDark.value ? 'dark' : 'light'\n  }\n  return theme\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\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }  if (systemQuery && systemQueryListener) {\n    systemQuery.removeEventListener('change', systemQueryListener)\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style scoped>\n.dialog-view {\n  --dvinternal-bg: var(--dialog-bg, #fff);\n  --dvinternal-text: var(--dialog-text-color, #000);\n  --dvinternal-border: var(--dialog-border-color, gray);\n  --dvinternal-backdrop: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.5));\n  --dvinternal-close-btn: var(--dialog-close-btn-color, #666);\n  --dvinternal-close-btn-hover: var(--dialog-close-btn-hover-color, #333);\n  --dvinternal-close-btn-hover-bg: var(--dialog-close-btn-hover-bg, #f0f0f0);\n  --dvinternal-close-btn-active-bg: var(--dialog-close-btn-active-bg, #e0e0e0);\n  --dvinternal-close-btn-focus: var(--dialog-close-btn-focus-outline, rgb(160, 207, 255));\n\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid var(--dvinternal-border);\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  background: var(--dvinternal-bg);\n  color: var(--dvinternal-text);\n}\n\n.dialog-view[data-theme=\"dark\"] {\n  --dvinternal-bg: var(--dialog-bg, #1e1e1e);\n  --dvinternal-text: var(--dialog-text-color, #e0e0e0);\n  --dvinternal-border: var(--dialog-border-color, #555);\n  --dvinternal-backdrop: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.7));\n  --dvinternal-close-btn: var(--dialog-close-btn-color, #aaa);\n  --dvinternal-close-btn-hover: var(--dialog-close-btn-hover-color, #ddd);\n  --dvinternal-close-btn-hover-bg: var(--dialog-close-btn-hover-bg, #333);\n  --dvinternal-close-btn-active-bg: var(--dialog-close-btn-active-bg, #444);\n  --dvinternal-close-btn-focus: var(--dialog-close-btn-focus-outline, rgb(100, 160, 220));\n}\n\n.dialog-view[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-view::backdrop {\n  background: var(--dvinternal-backdrop);\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: var(--dvinternal-close-btn);\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: var(--dvinternal-close-btn-hover);\n  background-color: var(--dvinternal-close-btn-hover-bg);\n  border-radius: 3px;\n}\n\n.dialog-close-button:active {\n  background-color: var(--dvinternal-close-btn-active-bg);\n}\n\n.dialog-close-button:focus-visible {\n  outline: 2px solid var(--dvinternal-close-btn-focus);\n  outline-offset: -2px;\n}\n\n.dialog-content-wrapper {\n  flex: 1;\n  overflow: auto;\n}\n\n.dialog-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n.dialog-footer {\n  margin-top: 0.5em;\n}\n</style>\n","<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"dialog-view\"\n    :data-theme=\"resolvedTheme\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"dialog-title-bar\">\n      <span class=\"dialog-title\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"dialog-close-button\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"dialog-content-wrapper\">\n      <div class=\"dialog-content\">\n        <slot></slot>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"dialog-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated, inject } from 'vue'\nimport { dialogViewConfig, type DialogViewConfig } from './config'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n  theme?: 'light' | 'dark' | 'auto'\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      })\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none')\n\n// --- Theme resolution ---\nconst injectedConfig = inject<DialogViewConfig | undefined>('dialogViewConfig', undefined)\n\nconst systemPrefersDark = ref(false)\nconst systemQuery = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)') : null\nlet systemQueryListener: ((e: MediaQueryListEvent) => void) | null = null\n\nif (systemQuery) {\n  systemPrefersDark.value = systemQuery.matches\n  systemQueryListener = (e) => { systemPrefersDark.value = e.matches }\n  systemQuery.addEventListener('change', systemQueryListener)\n}\n\nconst resolvedTheme = computed<'light' | 'dark'>(() => {\n  // Priority: component prop > plugin config > module-level config\n  const theme = props.theme ?? injectedConfig?.theme ?? dialogViewConfig.value.theme ?? 'light'\n  if (theme === 'auto') {\n    return systemPrefersDark.value ? 'dark' : 'light'\n  }\n  return theme\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\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }  if (systemQuery && systemQueryListener) {\n    systemQuery.removeEventListener('change', systemQueryListener)\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style scoped>\n.dialog-view {\n  --dvinternal-bg: var(--dialog-bg, #fff);\n  --dvinternal-text: var(--dialog-text-color, #000);\n  --dvinternal-border: var(--dialog-border-color, gray);\n  --dvinternal-backdrop: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.5));\n  --dvinternal-close-btn: var(--dialog-close-btn-color, #666);\n  --dvinternal-close-btn-hover: var(--dialog-close-btn-hover-color, #333);\n  --dvinternal-close-btn-hover-bg: var(--dialog-close-btn-hover-bg, #f0f0f0);\n  --dvinternal-close-btn-active-bg: var(--dialog-close-btn-active-bg, #e0e0e0);\n  --dvinternal-close-btn-focus: var(--dialog-close-btn-focus-outline, rgb(160, 207, 255));\n\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid var(--dvinternal-border);\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  background: var(--dvinternal-bg);\n  color: var(--dvinternal-text);\n}\n\n.dialog-view[data-theme=\"dark\"] {\n  --dvinternal-bg: var(--dialog-bg, #1e1e1e);\n  --dvinternal-text: var(--dialog-text-color, #e0e0e0);\n  --dvinternal-border: var(--dialog-border-color, #555);\n  --dvinternal-backdrop: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.7));\n  --dvinternal-close-btn: var(--dialog-close-btn-color, #aaa);\n  --dvinternal-close-btn-hover: var(--dialog-close-btn-hover-color, #ddd);\n  --dvinternal-close-btn-hover-bg: var(--dialog-close-btn-hover-bg, #333);\n  --dvinternal-close-btn-active-bg: var(--dialog-close-btn-active-bg, #444);\n  --dvinternal-close-btn-focus: var(--dialog-close-btn-focus-outline, rgb(100, 160, 220));\n}\n\n.dialog-view[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-view::backdrop {\n  background: var(--dvinternal-backdrop);\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: var(--dvinternal-close-btn);\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: var(--dvinternal-close-btn-hover);\n  background-color: var(--dvinternal-close-btn-hover-bg);\n  border-radius: 3px;\n}\n\n.dialog-close-button:active {\n  background-color: var(--dvinternal-close-btn-active-bg);\n}\n\n.dialog-close-button:focus-visible {\n  outline: 2px solid var(--dvinternal-close-btn-focus);\n  outline-offset: -2px;\n}\n\n.dialog-content-wrapper {\n  flex: 1;\n  overflow: auto;\n}\n\n.dialog-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n.dialog-footer {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.vue'\nimport { type DialogViewConfig } from './config'\n\nexport { default as DialogView } from './DialogView.vue'\nexport { dialogViewConfig, setDialogViewConfig, type DialogViewConfig } from './config'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App, options?: DialogViewConfig) => {\n    if (options) {\n      app.provide('dialogViewConfig', options)\n    }\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"mappings":"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"}

package/dist/cssless.umd.js

@@ -1,2 +1,2 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.DialogView={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=[`closedBy`],r={key:0,class:`dialog-title-bar`},i={class:`dialog-title`},a={class:`dialog-content-wrapper`},o={class:`dialog-content`},s={key:1,class:`dialog-footer`},c=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({__name:`DialogView`,props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0},closable:{type:Boolean,default:!0},closeOnClickMask:{type:Boolean,default:!1}},emits:[`update:modelValue`,`closed`],setup(e,{expose:c,emit:l}){let u=e,d=l,f=(0,t.ref)(),p=()=>{d(`update:modelValue`,!0)},m=()=>{d(`update:modelValue`,!1)},h=e=>{e.preventDefault(),u.closable&&m()},g=(0,t.ref)(!1),_=()=>{if(!g.value){if(!u.closable&&u.modelValue){(0,t.nextTick)(()=>{f.value&&!f.value.open&&f.value.showModal()});return}u.modelValue&&d(`update:modelValue`,!1),(0,t.nextTick)(()=>{u.modelValue&&f.value&&!f.value.open&&f.value.showModal()}),d(`closed`)}},v=(0,t.computed)(()=>u.closable?u.closeOnClickMask?`any`:`closerequest`:`none`);(0,t.watch)(()=>u.modelValue,async e=>{await(0,t.nextTick)(),e?f.value&&!f.value.open&&f.value.showModal():f.value&&f.value.open&&f.value.close()});let y=()=>{u.modelValue&&f.value&&!f.value.open&&f.value.showModal()};return(0,t.onMounted)(()=>{y()}),(0,t.onBeforeUnmount)(()=>{f.value&&f.value.open&&f.value.close()}),(0,t.onDeactivated)(()=>{f.value&&f.value.open&&(g.value=!0,f.value.close(),(0,t.nextTick)(()=>g.value=!1))}),(0,t.onActivated)(()=>{y()}),c({get:()=>f.value,open:p,close:m}),(c,l)=>((0,t.openBlock)(),(0,t.createElementBlock)(`dialog`,(0,t.mergeProps)({ref_key:`dialogRef`,ref:f,class:`dialog-view`},c.$attrs,{onClose:_,onCancel:h,closedBy:v.value}),[e.showTitleBar?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,r,[(0,t.createElementVNode)(`span`,i,[(0,t.renderSlot)(c.$slots,`title`,{},void 0,!0)]),e.showCloseButton&&e.closable?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:0,type:`button`,"aria-label":`Close the dialog`,class:`dialog-close-button`,onClick:(0,t.withModifiers)(m,[`prevent`])},`×`)):(0,t.createCommentVNode)(``,!0)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,a,[(0,t.createElementVNode)(`div`,o,[(0,t.renderSlot)(c.$slots,`default`,{},void 0,!0)])]),c.$slots.footer?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,s,[(0,t.renderSlot)(c.$slots,`footer`,{},void 0,!0)])):(0,t.createCommentVNode)(``,!0)],16,n))}}),[[`__scopeId`,`data-v-8eb40789`]]),l={install:e=>{e.component(`DialogView`,c)}};e.DialogView=c,e.DialogViewPlugin=l,e.default=l});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.DialogView={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=(0,t.ref)({theme:`light`});function r(e){n.value={...n.value,...e}}var i=[`data-theme`,`closedBy`],a={key:0,class:`dialog-title-bar`},o={class:`dialog-title`},s={class:`dialog-content-wrapper`},c={class:`dialog-content`},l={key:1,class:`dialog-footer`},u=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({__name:`DialogView`,props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0},closable:{type:Boolean,default:!0},closeOnClickMask:{type:Boolean,default:!1},theme:{}},emits:[`update:modelValue`,`closed`],setup(e,{expose:r,emit:u}){let d=e,f=u,p=(0,t.ref)(),m=()=>{f(`update:modelValue`,!0)},h=()=>{f(`update:modelValue`,!1)},g=e=>{e.preventDefault(),d.closable&&h()},_=(0,t.ref)(!1),v=()=>{if(!_.value){if(!d.closable&&d.modelValue){(0,t.nextTick)(()=>{p.value&&!p.value.open&&p.value.showModal()});return}d.modelValue&&f(`update:modelValue`,!1),(0,t.nextTick)(()=>{d.modelValue&&p.value&&!p.value.open&&p.value.showModal()}),f(`closed`)}},y=(0,t.computed)(()=>d.closable?d.closeOnClickMask?`any`:`closerequest`:`none`),b=(0,t.inject)(`dialogViewConfig`,void 0),x=(0,t.ref)(!1),S=typeof window<`u`?window.matchMedia(`(prefers-color-scheme: dark)`):null,C=null;S&&(x.value=S.matches,C=e=>{x.value=e.matches},S.addEventListener(`change`,C));let w=(0,t.computed)(()=>{let e=d.theme??b?.theme??n.value.theme??`light`;return e===`auto`?x.value?`dark`:`light`:e});(0,t.watch)(()=>d.modelValue,async e=>{await(0,t.nextTick)(),e?p.value&&!p.value.open&&p.value.showModal():p.value&&p.value.open&&p.value.close()});let T=()=>{d.modelValue&&p.value&&!p.value.open&&p.value.showModal()};return(0,t.onMounted)(()=>{T()}),(0,t.onBeforeUnmount)(()=>{p.value&&p.value.open&&p.value.close(),S&&C&&S.removeEventListener(`change`,C)}),(0,t.onDeactivated)(()=>{p.value&&p.value.open&&(_.value=!0,p.value.close(),(0,t.nextTick)(()=>_.value=!1))}),(0,t.onActivated)(()=>{T()}),r({get:()=>p.value,open:m,close:h}),(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`dialog`,(0,t.mergeProps)({ref_key:`dialogRef`,ref:p,class:`dialog-view`,"data-theme":w.value},n.$attrs,{onClose:v,onCancel:g,closedBy:y.value}),[e.showTitleBar?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,a,[(0,t.createElementVNode)(`span`,o,[(0,t.renderSlot)(n.$slots,`title`,{},void 0,!0)]),e.showCloseButton&&e.closable?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:0,type:`button`,"aria-label":`Close the dialog`,class:`dialog-close-button`,onClick:(0,t.withModifiers)(h,[`prevent`])},`×`)):(0,t.createCommentVNode)(``,!0)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,s,[(0,t.createElementVNode)(`div`,c,[(0,t.renderSlot)(n.$slots,`default`,{},void 0,!0)])]),n.$slots.footer?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,l,[(0,t.renderSlot)(n.$slots,`footer`,{},void 0,!0)])):(0,t.createCommentVNode)(``,!0)],16,i))}}),[[`__scopeId`,`data-v-111c597e`]]),d={install:(e,t)=>{t&&e.provide(`dialogViewConfig`,t),e.component(`DialogView`,u)}};e.DialogView=u,e.DialogViewPlugin=d,e.default=d,e.dialogViewConfig=n,e.setDialogViewConfig=r});
 //# sourceMappingURL=cssless.umd.js.map

package/dist/cssless.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"cssless.umd.js","names":["$attrs","$slots"],"sources":["../src/DialogView.vue","../src/DialogView.vue","../src/unobfuscated.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"dialog-view\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"dialog-title-bar\">\n      <span class=\"dialog-title\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"dialog-close-button\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"dialog-content-wrapper\">\n      <div class=\"dialog-content\">\n        <slot></slot>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"dialog-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style scoped>\n.dialog-view {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.dialog-view[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-view::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.dialog-title-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n.dialog-title {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dialog-close-button {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n.dialog-close-button:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n.dialog-close-button:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n.dialog-content-wrapper {\n  flex: 1;\n  overflow: auto;\n}\n\n.dialog-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n.dialog-footer {\n  margin-top: 0.5em;\n}\n</style>\n","<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"dialog-view\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"dialog-title-bar\">\n      <span class=\"dialog-title\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"dialog-close-button\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"dialog-content-wrapper\">\n      <div class=\"dialog-content\">\n        <slot></slot>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"dialog-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style scoped>\n.dialog-view {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.dialog-view[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-view::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.dialog-title-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n.dialog-title {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dialog-close-button {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n.dialog-close-button:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n.dialog-close-button:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n.dialog-content-wrapper {\n  flex: 1;\n  overflow: auto;\n}\n\n.dialog-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n.dialog-footer {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.vue'\n\nexport { default as DialogView } from './DialogView.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"mappings":"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"}
+{"version":3,"file":"cssless.umd.js","names":["$attrs","$slots"],"sources":["../src/config.ts","../src/DialogView.vue","../src/DialogView.vue","../src/unobfuscated.ts"],"sourcesContent":["import { ref } from 'vue'\n\nexport interface DialogViewConfig {\n  theme: 'light' | 'dark' | 'auto'\n}\n\nconst defaultConfig: DialogViewConfig = {\n  theme: 'light'\n}\n\nexport const dialogViewConfig = ref<DialogViewConfig>({ ...defaultConfig })\n\nexport function setDialogViewConfig(newConfig: Partial<DialogViewConfig>): void {\n  dialogViewConfig.value = { ...dialogViewConfig.value, ...newConfig }\n}\n","<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"dialog-view\"\n    :data-theme=\"resolvedTheme\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"dialog-title-bar\">\n      <span class=\"dialog-title\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"dialog-close-button\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"dialog-content-wrapper\">\n      <div class=\"dialog-content\">\n        <slot></slot>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"dialog-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated, inject } from 'vue'\nimport { dialogViewConfig, type DialogViewConfig } from './config'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n  theme?: 'light' | 'dark' | 'auto'\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      })\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none')\n\n// --- Theme resolution ---\nconst injectedConfig = inject<DialogViewConfig | undefined>('dialogViewConfig', undefined)\n\nconst systemPrefersDark = ref(false)\nconst systemQuery = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)') : null\nlet systemQueryListener: ((e: MediaQueryListEvent) => void) | null = null\n\nif (systemQuery) {\n  systemPrefersDark.value = systemQuery.matches\n  systemQueryListener = (e) => { systemPrefersDark.value = e.matches }\n  systemQuery.addEventListener('change', systemQueryListener)\n}\n\nconst resolvedTheme = computed<'light' | 'dark'>(() => {\n  // Priority: component prop > plugin config > module-level config\n  const theme = props.theme ?? injectedConfig?.theme ?? dialogViewConfig.value.theme ?? 'light'\n  if (theme === 'auto') {\n    return systemPrefersDark.value ? 'dark' : 'light'\n  }\n  return theme\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\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }  if (systemQuery && systemQueryListener) {\n    systemQuery.removeEventListener('change', systemQueryListener)\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style scoped>\n.dialog-view {\n  --dvinternal-bg: var(--dialog-bg, #fff);\n  --dvinternal-text: var(--dialog-text-color, #000);\n  --dvinternal-border: var(--dialog-border-color, gray);\n  --dvinternal-backdrop: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.5));\n  --dvinternal-close-btn: var(--dialog-close-btn-color, #666);\n  --dvinternal-close-btn-hover: var(--dialog-close-btn-hover-color, #333);\n  --dvinternal-close-btn-hover-bg: var(--dialog-close-btn-hover-bg, #f0f0f0);\n  --dvinternal-close-btn-active-bg: var(--dialog-close-btn-active-bg, #e0e0e0);\n  --dvinternal-close-btn-focus: var(--dialog-close-btn-focus-outline, rgb(160, 207, 255));\n\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid var(--dvinternal-border);\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  background: var(--dvinternal-bg);\n  color: var(--dvinternal-text);\n}\n\n.dialog-view[data-theme=\"dark\"] {\n  --dvinternal-bg: var(--dialog-bg, #1e1e1e);\n  --dvinternal-text: var(--dialog-text-color, #e0e0e0);\n  --dvinternal-border: var(--dialog-border-color, #555);\n  --dvinternal-backdrop: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.7));\n  --dvinternal-close-btn: var(--dialog-close-btn-color, #aaa);\n  --dvinternal-close-btn-hover: var(--dialog-close-btn-hover-color, #ddd);\n  --dvinternal-close-btn-hover-bg: var(--dialog-close-btn-hover-bg, #333);\n  --dvinternal-close-btn-active-bg: var(--dialog-close-btn-active-bg, #444);\n  --dvinternal-close-btn-focus: var(--dialog-close-btn-focus-outline, rgb(100, 160, 220));\n}\n\n.dialog-view[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-view::backdrop {\n  background: var(--dvinternal-backdrop);\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: var(--dvinternal-close-btn);\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: var(--dvinternal-close-btn-hover);\n  background-color: var(--dvinternal-close-btn-hover-bg);\n  border-radius: 3px;\n}\n\n.dialog-close-button:active {\n  background-color: var(--dvinternal-close-btn-active-bg);\n}\n\n.dialog-close-button:focus-visible {\n  outline: 2px solid var(--dvinternal-close-btn-focus);\n  outline-offset: -2px;\n}\n\n.dialog-content-wrapper {\n  flex: 1;\n  overflow: auto;\n}\n\n.dialog-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n.dialog-footer {\n  margin-top: 0.5em;\n}\n</style>\n","<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"dialog-view\"\n    :data-theme=\"resolvedTheme\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"dialog-title-bar\">\n      <span class=\"dialog-title\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"dialog-close-button\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"dialog-content-wrapper\">\n      <div class=\"dialog-content\">\n        <slot></slot>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"dialog-footer\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated, inject } from 'vue'\nimport { dialogViewConfig, type DialogViewConfig } from './config'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n  theme?: 'light' | 'dark' | 'auto'\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      })\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none')\n\n// --- Theme resolution ---\nconst injectedConfig = inject<DialogViewConfig | undefined>('dialogViewConfig', undefined)\n\nconst systemPrefersDark = ref(false)\nconst systemQuery = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)') : null\nlet systemQueryListener: ((e: MediaQueryListEvent) => void) | null = null\n\nif (systemQuery) {\n  systemPrefersDark.value = systemQuery.matches\n  systemQueryListener = (e) => { systemPrefersDark.value = e.matches }\n  systemQuery.addEventListener('change', systemQueryListener)\n}\n\nconst resolvedTheme = computed<'light' | 'dark'>(() => {\n  // Priority: component prop > plugin config > module-level config\n  const theme = props.theme ?? injectedConfig?.theme ?? dialogViewConfig.value.theme ?? 'light'\n  if (theme === 'auto') {\n    return systemPrefersDark.value ? 'dark' : 'light'\n  }\n  return theme\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\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }  if (systemQuery && systemQueryListener) {\n    systemQuery.removeEventListener('change', systemQueryListener)\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style scoped>\n.dialog-view {\n  --dvinternal-bg: var(--dialog-bg, #fff);\n  --dvinternal-text: var(--dialog-text-color, #000);\n  --dvinternal-border: var(--dialog-border-color, gray);\n  --dvinternal-backdrop: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.5));\n  --dvinternal-close-btn: var(--dialog-close-btn-color, #666);\n  --dvinternal-close-btn-hover: var(--dialog-close-btn-hover-color, #333);\n  --dvinternal-close-btn-hover-bg: var(--dialog-close-btn-hover-bg, #f0f0f0);\n  --dvinternal-close-btn-active-bg: var(--dialog-close-btn-active-bg, #e0e0e0);\n  --dvinternal-close-btn-focus: var(--dialog-close-btn-focus-outline, rgb(160, 207, 255));\n\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid var(--dvinternal-border);\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  background: var(--dvinternal-bg);\n  color: var(--dvinternal-text);\n}\n\n.dialog-view[data-theme=\"dark\"] {\n  --dvinternal-bg: var(--dialog-bg, #1e1e1e);\n  --dvinternal-text: var(--dialog-text-color, #e0e0e0);\n  --dvinternal-border: var(--dialog-border-color, #555);\n  --dvinternal-backdrop: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.7));\n  --dvinternal-close-btn: var(--dialog-close-btn-color, #aaa);\n  --dvinternal-close-btn-hover: var(--dialog-close-btn-hover-color, #ddd);\n  --dvinternal-close-btn-hover-bg: var(--dialog-close-btn-hover-bg, #333);\n  --dvinternal-close-btn-active-bg: var(--dialog-close-btn-active-bg, #444);\n  --dvinternal-close-btn-focus: var(--dialog-close-btn-focus-outline, rgb(100, 160, 220));\n}\n\n.dialog-view[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dialog-view::backdrop {\n  background: var(--dvinternal-backdrop);\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: var(--dvinternal-close-btn);\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: var(--dvinternal-close-btn-hover);\n  background-color: var(--dvinternal-close-btn-hover-bg);\n  border-radius: 3px;\n}\n\n.dialog-close-button:active {\n  background-color: var(--dvinternal-close-btn-active-bg);\n}\n\n.dialog-close-button:focus-visible {\n  outline: 2px solid var(--dvinternal-close-btn-focus);\n  outline-offset: -2px;\n}\n\n.dialog-content-wrapper {\n  flex: 1;\n  overflow: auto;\n}\n\n.dialog-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n.dialog-footer {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.vue'\nimport { type DialogViewConfig } from './config'\n\nexport { default as DialogView } from './DialogView.vue'\nexport { dialogViewConfig, setDialogViewConfig, type DialogViewConfig } from './config'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App, options?: DialogViewConfig) => {\n    if (options) {\n      app.provide('dialogViewConfig', options)\n    }\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"mappings":"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"}

package/dist/dialog-view.es.js

@@ -1,13 +1,21 @@
-(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`._b4102a3b79656a37{padding:var(--dialog-padding,20px);box-sizing:border-box;border:1px solid gray;border-radius:5px;max-width:calc(100% - 2em);max-height:calc(100% - 2em);overflow:hidden;outline:0!important}._b4102a3b79656a37[open]{flex-direction:column;display:flex}._b4102a3b79656a37::backdrop{background:#00000080}._4d394b1507fdc584{min-height:var(--dialog-title-height,24px);white-space:pre;-webkit-user-select:none;user-select:none;flex-direction:row;align-items:center;margin-bottom:.5em;display:flex;overflow:hidden}._088d860d2fd75292{text-align:center;text-overflow:ellipsis;flex:1;font-size:large;font-weight:700;overflow:hidden}._468ff1da37ead40a{color:#666;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:24px;height:24px;margin-left:.5em;padding:10px;font-size:1.5em;line-height:1;text-decoration:none;display:flex}._468ff1da37ead40a:hover{color:#333;background-color:#f0f0f0;border-radius:3px}._468ff1da37ead40a:focus-visible{outline-offset:-2px;outline:2px solid #a0cfff}._0be228fb3f6dcf6a{flex:1;overflow:auto}._da3b3b2a4aeed1ee{flex-direction:column;width:100%;height:100%;display:flex}._61879ba330d9a71c{margin-top:.5em}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
-import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeProps as a, nextTick as o, onActivated as s, onBeforeUnmount as c, onDeactivated as l, onMounted as u, openBlock as d, ref as f, renderSlot as p, watch as m, withModifiers as h } from "vue";
+(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`._b4102a3b79656a37{--dvinternal-bg:var(--dialog-bg,#fff);--dvinternal-text:var(--dialog-text-color,#000);--dvinternal-border:var(--dialog-border-color,gray);--dvinternal-backdrop:var(--dialog-backdrop-bg,#00000080);--dvinternal-close-btn:var(--dialog-close-btn-color,#666);--dvinternal-close-btn-hover:var(--dialog-close-btn-hover-color,#333);--dvinternal-close-btn-hover-bg:var(--dialog-close-btn-hover-bg,#f0f0f0);--dvinternal-close-btn-active-bg:var(--dialog-close-btn-active-bg,#e0e0e0);--dvinternal-close-btn-focus:var(--dialog-close-btn-focus-outline,#a0cfff);padding:var(--dialog-padding,20px);border:1px solid var(--dvinternal-border);box-sizing:border-box;background:var(--dvinternal-bg);max-width:calc(100% - 2em);max-height:calc(100% - 2em);color:var(--dvinternal-text);border-radius:5px;overflow:hidden;outline:0!important}._b4102a3b79656a37[data-theme=dark]{--dvinternal-bg:var(--dialog-bg,#1e1e1e);--dvinternal-text:var(--dialog-text-color,#e0e0e0);--dvinternal-border:var(--dialog-border-color,#555);--dvinternal-backdrop:var(--dialog-backdrop-bg,#000000b3);--dvinternal-close-btn:var(--dialog-close-btn-color,#aaa);--dvinternal-close-btn-hover:var(--dialog-close-btn-hover-color,#ddd);--dvinternal-close-btn-hover-bg:var(--dialog-close-btn-hover-bg,#333);--dvinternal-close-btn-active-bg:var(--dialog-close-btn-active-bg,#444);--dvinternal-close-btn-focus:var(--dialog-close-btn-focus-outline,#64a0dc)}._b4102a3b79656a37[open]{flex-direction:column;display:flex}._b4102a3b79656a37::backdrop{background:var(--dvinternal-backdrop)}._4d394b1507fdc584{min-height:var(--dialog-title-height,24px);white-space:pre;-webkit-user-select:none;user-select:none;flex-direction:row;align-items:center;margin-bottom:.5em;display:flex;overflow:hidden}._088d860d2fd75292{text-align:center;text-overflow:ellipsis;flex:1;font-size:large;font-weight:700;overflow:hidden}._468ff1da37ead40a{color:var(--dvinternal-close-btn);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:24px;height:24px;margin-left:.5em;padding:10px;font-size:1.5em;line-height:1;text-decoration:none;display:flex}._468ff1da37ead40a:hover{color:var(--dvinternal-close-btn-hover);background-color:var(--dvinternal-close-btn-hover-bg);border-radius:3px}._468ff1da37ead40a:active{background-color:var(--dvinternal-close-btn-active-bg)}._468ff1da37ead40a:focus-visible{outline:2px solid var(--dvinternal-close-btn-focus);outline-offset:-2px}._0be228fb3f6dcf6a{flex:1;overflow:auto}._da3b3b2a4aeed1ee{flex-direction:column;width:100%;height:100%;display:flex}._61879ba330d9a71c{margin-top:.5em}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, inject as a, mergeProps as o, nextTick as s, onActivated as c, onBeforeUnmount as l, onDeactivated as u, onMounted as d, openBlock as f, ref as p, renderSlot as m, watch as h, withModifiers as g } from "vue";
+var _ = p({ theme: "light" });
+function v(e) {
+	_.value = {
+		..._.value,
+		...e
+	};
+}
+//#endregion
 //#region src/DialogView.obf.vue?vue&type=script&setup=true&lang.ts
-var g = ["closedBy"], _ = {
+var y = ["data-theme", "closedBy"], b = {
 	key: 0,
 	class: "_4d394b1507fdc584"
-}, v = { class: "_088d860d2fd75292" }, y = { class: "_0be228fb3f6dcf6a" }, b = { class: "_da3b3b2a4aeed1ee" }, x = {
+}, x = { class: "_088d860d2fd75292" }, S = { class: "_0be228fb3f6dcf6a" }, C = { class: "_da3b3b2a4aeed1ee" }, w = {
 	key: 1,
 	class: "_61879ba330d9a71c"
-}, S = /* @__PURE__ */ i({
+}, T = /* @__PURE__ */ i({
 	__name: "DialogView.obf",
 	props: {
 		modelValue: { type: Boolean },
@@ -26,71 +34,80 @@ var g = ["closedBy"], _ = {
 		closeOnClickMask: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		theme: {}
 	},
 	emits: ["update:modelValue", "closed"],
-	setup(i, { expose: S, emit: C }) {
-		let w = i, T = C, E = f(), D = () => {
-			T("update:modelValue", !0);
-		}, O = () => {
-			T("update:modelValue", !1);
-		}, k = (e) => {
-			e.preventDefault(), w.closable && O();
-		}, A = f(!1), j = () => {
-			if (!A.value) {
-				if (!w.closable && w.modelValue) {
-					o(() => {
-						E.value && !E.value.open && E.value.showModal();
+	setup(i, { expose: v, emit: T }) {
+		let E = i, D = T, O = p(), k = () => {
+			D("update:modelValue", !0);
+		}, A = () => {
+			D("update:modelValue", !1);
+		}, j = (e) => {
+			e.preventDefault(), E.closable && A();
+		}, M = p(!1), N = () => {
+			if (!M.value) {
+				if (!E.closable && E.modelValue) {
+					s(() => {
+						O.value && !O.value.open && O.value.showModal();
 					});
 					return;
 				}
-				w.modelValue && T("update:modelValue", !1), o(() => {
-					w.modelValue && E.value && !E.value.open && E.value.showModal();
-				}), T("closed");
+				E.modelValue && D("update:modelValue", !1), s(() => {
+					E.modelValue && O.value && !O.value.open && O.value.showModal();
+				}), D("closed");
 			}
-		}, M = e(() => w.closable ? w.closeOnClickMask ? "any" : "closerequest" : "none");
-		m(() => w.modelValue, async (e) => {
-			await o(), e ? E.value && !E.value.open && E.value.showModal() : E.value && E.value.open && E.value.close();
+		}, P = e(() => E.closable ? E.closeOnClickMask ? "any" : "closerequest" : "none"), F = a("dialogViewConfig", void 0), I = p(!1), L = typeof window < "u" ? window.matchMedia("(prefers-color-scheme: dark)") : null, R = null;
+		L && (I.value = L.matches, R = (e) => {
+			I.value = e.matches;
+		}, L.addEventListener("change", R));
+		let z = e(() => {
+			let e = E.theme ?? F?.theme ?? _.value.theme ?? "light";
+			return e === "auto" ? I.value ? "dark" : "light" : e;
+		});
+		h(() => E.modelValue, async (e) => {
+			await s(), e ? O.value && !O.value.open && O.value.showModal() : O.value && O.value.open && O.value.close();
 		});
-		let N = () => {
-			w.modelValue && E.value && !E.value.open && E.value.showModal();
+		let B = () => {
+			E.modelValue && O.value && !O.value.open && O.value.showModal();
 		};
-		return u(() => {
-			N();
-		}), c(() => {
-			E.value && E.value.open && E.value.close();
+		return d(() => {
+			B();
 		}), l(() => {
-			E.value && E.value.open && (A.value = !0, E.value.close(), o(() => A.value = !1));
-		}), s(() => {
-			N();
-		}), S({
-			get: () => E.value,
-			open: D,
-			close: O
-		}), (e, o) => (d(), n("dialog", a({
+			O.value && O.value.open && O.value.close(), L && R && L.removeEventListener("change", R);
+		}), u(() => {
+			O.value && O.value.open && (M.value = !0, O.value.close(), s(() => M.value = !1));
+		}), c(() => {
+			B();
+		}), v({
+			get: () => O.value,
+			open: k,
+			close: A
+		}), (e, a) => (f(), n("dialog", o({
 			ref_key: "dialogRef",
-			ref: E,
-			class: "_b4102a3b79656a37"
+			ref: O,
+			class: "_b4102a3b79656a37",
+			"data-theme": z.value
 		}, e.$attrs, {
-			onClose: j,
-			onCancel: k,
-			closedBy: M.value
+			onClose: N,
+			onCancel: j,
+			closedBy: P.value
 		}), [
-			i.showTitleBar ? (d(), n("div", _, [r("span", v, [p(e.$slots, "title")]), i.showCloseButton && i.closable ? (d(), n("button", {
+			i.showTitleBar ? (f(), n("div", b, [r("span", x, [m(e.$slots, "title")]), i.showCloseButton && i.closable ? (f(), n("button", {
 				key: 0,
 				type: "button",
 				"aria-label": "Close the dialog",
 				class: "_468ff1da37ead40a",
-				onClick: h(O, ["prevent"])
+				onClick: g(A, ["prevent"])
 			}, "×")) : t("", !0)])) : t("", !0),
-			r("div", y, [r("div", b, [p(e.$slots, "default")])]),
-			e.$slots.footer ? (d(), n("div", x, [p(e.$slots, "footer")])) : t("", !0)
-		], 16, g));
+			r("div", S, [r("div", C, [m(e.$slots, "default")])]),
+			e.$slots.footer ? (f(), n("div", w, [m(e.$slots, "footer")])) : t("", !0)
+		], 16, y));
 	}
-}), C = { install: (e) => {
-	e.component("DialogView", S);
+}), E = { install: (e, t) => {
+	t && e.provide("dialogViewConfig", t), e.component("DialogView", T);
 } };
 //#endregion
-export { S as DialogView, C as DialogViewPlugin, C as default };
+export { T as DialogView, E as DialogViewPlugin, E as default, _ as dialogViewConfig, v as setDialogViewConfig };
 
 //# sourceMappingURL=dialog-view.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dialog-view.es.js","names":["$attrs","$slots"],"sources":["../src/DialogView.obf.vue","../src/DialogView.obf.vue","../src/index.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"_b4102a3b79656a37\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n      <span class=\"_088d860d2fd75292\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_468ff1da37ead40a\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"_0be228fb3f6dcf6a\">\n      <div class=\"_da3b3b2a4aeed1ee\">\n        <slot></slot>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n._b4102a3b79656a37[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n._4d394b1507fdc584 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n._088d860d2fd75292 {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n._468ff1da37ead40a {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n._468ff1da37ead40a:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n._468ff1da37ead40a:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n._0be228fb3f6dcf6a {\n  flex: 1;\n  overflow: auto;\n}\n\n._da3b3b2a4aeed1ee {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n._61879ba330d9a71c {\n  margin-top: 0.5em;\n}\n</style>\n","<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"_b4102a3b79656a37\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n      <span class=\"_088d860d2fd75292\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_468ff1da37ead40a\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"_0be228fb3f6dcf6a\">\n      <div class=\"_da3b3b2a4aeed1ee\">\n        <slot></slot>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n._b4102a3b79656a37[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n._4d394b1507fdc584 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n._088d860d2fd75292 {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n._468ff1da37ead40a {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n._468ff1da37ead40a:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n._468ff1da37ead40a:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n._0be228fb3f6dcf6a {\n  flex: 1;\n  overflow: auto;\n}\n\n._da3b3b2a4aeed1ee {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n._61879ba330d9a71c {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.obf.vue'\n\nexport { default as DialogView } from './DialogView.obf.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,IAAM,IAAQ,GAOR,IAAO,GAKP,IAAY,EAAuB,GAEnC,UAAyB;GAC7B,EAAK,qBAAqB,EAAI;EAChC,GAEM,UAA0B;GAC9B,EAAK,qBAAqB,EAAK;EACjC,GAEM,KAAsB,MAAa;GAEvC,AADA,EAAE,eAAe,GACb,EAAM,YAAU,EAAY;EAClC,GAEM,IAAmB,EAAI,EAAK,GAE5B,UAAgC;GAChC,OAAiB,OACrB;QAAI,CAAC,EAAM,YACL,EAAM,YAAY;KAGpB,QAAe;MACb,AAAI,EAAU,SAAS,CAAC,EAAU,MAAM,QAAM,EAAU,MAAM,UAAU;KAC1E,CAAC;KACD;IACF;IAWF,AATI,EAAM,cACR,EAAK,qBAAqB,EAAK,GAEjC,QAAe;KACb,AAAI,EAAM,cAEJ,EAAU,SAAS,CAAC,EAAU,MAAM,QAAM,EAAU,MAAM,UAAU;IAE5E,CAAC,GACD,EAAK,QAAQ;;EACf,GAEM,IAAW,QAAe,EAAM,WAAY,EAAM,mBAAmB,QAAQ,iBAAkB,MAAM;EAE3G,QAAY,EAAM,YAAY,OAAO,MAAsB;GAGzD,AAFA,MAAM,EAAS,GAEX,IACE,EAAU,SAAS,CAAC,EAAU,MAAM,QACtC,EAAU,MAAM,UAAU,IAGxB,EAAU,SAAS,EAAU,MAAM,QACrC,EAAU,MAAM,MAAM;EAG5B,CAAC;EAED,IAAM,UAAmB;GACvB,AAAI,EAAM,cACJ,EAAU,SAAS,CAAC,EAAU,MAAM,QACtC,EAAU,MAAM,UAAU;EAGhC;SAEA,QAAgB;GACd,EAAW;EACb,CAAC,GAED,QAAsB;GACpB,AAAI,EAAU,SAAS,EAAU,MAAM,QACrC,EAAU,MAAM,MAAM;EAE1B,CAAC,GAED,QAAoB;GAClB,AAAI,EAAU,SAAS,EAAU,MAAM,SACrC,EAAiB,QAAQ,IACzB,EAAU,MAAM,MAAM,GACtB,QAAe,EAAiB,QAAQ,EAAK;EAEjD,CAAC,GAED,QAAkB;GAChB,EAAW;EACb,CAAC,GAED,EAAa;GACX,WAAW,EAAU;GACrB,MAAM;GACN,OAAO;EACT,CAAC,mBAnJC,EA8BS,UA9BT,EA8BS;YA7BH;GAAJ,KAAI;GACJ,OAAM;KACEA,EAAAA,QAAM;GACb,SAAO;GACP,UAAQ;GACR,UAAU,EAAA;;GAEA,EAAA,gBAAA,EAAA,GAAX,EAWM,OAXN,GAWM,CAVJ,EAEO,QAFP,GAEO,CADL,EAA0B,EAAA,QAAA,OAAA,CAAA,CAAA,GAGpB,EAAA,mBAAmB,EAAA,YAAA,EAAA,GAD3B,EAMiB,UAAA;;IAJf,MAAK;IACL,cAAW;IACX,OAAM;IACL,SAAK,EAAU,GAAW,CAAA,SAAA,CAAA;MAC5B,GAAO,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAGV,EAIM,OAJN,GAIM,CAHJ,EAEM,OAFN,GAEM,CADJ,EAAa,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA;GAINC,EAAAA,OAAO,UAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAA2B,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;;;IExBpB,IAA2B,EACtC,UAAU,MAAa;CACrB,EAAI,UAAU,cAAc,CAAmB;AACjD,EACF"}
+{"version":3,"file":"dialog-view.es.js","names":["$attrs","$slots"],"sources":["../src/config.ts","../src/DialogView.obf.vue","../src/DialogView.obf.vue","../src/index.ts"],"sourcesContent":["import { ref } from 'vue'\n\nexport interface DialogViewConfig {\n  theme: 'light' | 'dark' | 'auto'\n}\n\nconst defaultConfig: DialogViewConfig = {\n  theme: 'light'\n}\n\nexport const dialogViewConfig = ref<DialogViewConfig>({ ...defaultConfig })\n\nexport function setDialogViewConfig(newConfig: Partial<DialogViewConfig>): void {\n  dialogViewConfig.value = { ...dialogViewConfig.value, ...newConfig }\n}\n","<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"_b4102a3b79656a37\"\n    :data-theme=\"resolvedTheme\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n      <span class=\"_088d860d2fd75292\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_468ff1da37ead40a\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"_0be228fb3f6dcf6a\">\n      <div class=\"_da3b3b2a4aeed1ee\">\n        <slot></slot>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated, inject } from 'vue'\nimport { dialogViewConfig, type DialogViewConfig } from './config'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n  theme?: 'light' | 'dark' | 'auto'\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      })\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none')\n\n// --- Theme resolution ---\nconst injectedConfig = inject<DialogViewConfig | undefined>('dialogViewConfig', undefined)\n\nconst systemPrefersDark = ref(false)\nconst systemQuery = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)') : null\nlet systemQueryListener: ((e: MediaQueryListEvent) => void) | null = null\n\nif (systemQuery) {\n  systemPrefersDark.value = systemQuery.matches\n  systemQueryListener = (e) => { systemPrefersDark.value = e.matches }\n  systemQuery.addEventListener('change', systemQueryListener)\n}\n\nconst resolvedTheme = computed<'light' | 'dark'>(() => {\n  // Priority: component prop > plugin config > module-level config\n  const theme = props.theme ?? injectedConfig?.theme ?? dialogViewConfig.value.theme ?? 'light'\n  if (theme === 'auto') {\n    return systemPrefersDark.value ? 'dark' : 'light'\n  }\n  return theme\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\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }  if (systemQuery && systemQueryListener) {\n    systemQuery.removeEventListener('change', systemQueryListener)\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n  --dvinternal-bg: var(--dialog-bg, #fff);\n  --dvinternal-text: var(--dialog-text-color, #000);\n  --dvinternal-border: var(--dialog-border-color, gray);\n  --dvinternal-backdrop: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.5));\n  --dvinternal-close-btn: var(--dialog-close-btn-color, #666);\n  --dvinternal-close-btn-hover: var(--dialog-close-btn-hover-color, #333);\n  --dvinternal-close-btn-hover-bg: var(--dialog-close-btn-hover-bg, #f0f0f0);\n  --dvinternal-close-btn-active-bg: var(--dialog-close-btn-active-bg, #e0e0e0);\n  --dvinternal-close-btn-focus: var(--dialog-close-btn-focus-outline, rgb(160, 207, 255));\n\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid var(--dvinternal-border);\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  background: var(--dvinternal-bg);\n  color: var(--dvinternal-text);\n}\n\n._b4102a3b79656a37[data-theme=\"dark\"] {\n  --dvinternal-bg: var(--dialog-bg, #1e1e1e);\n  --dvinternal-text: var(--dialog-text-color, #e0e0e0);\n  --dvinternal-border: var(--dialog-border-color, #555);\n  --dvinternal-backdrop: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.7));\n  --dvinternal-close-btn: var(--dialog-close-btn-color, #aaa);\n  --dvinternal-close-btn-hover: var(--dialog-close-btn-hover-color, #ddd);\n  --dvinternal-close-btn-hover-bg: var(--dialog-close-btn-hover-bg, #333);\n  --dvinternal-close-btn-active-bg: var(--dialog-close-btn-active-bg, #444);\n  --dvinternal-close-btn-focus: var(--dialog-close-btn-focus-outline, rgb(100, 160, 220));\n}\n\n._b4102a3b79656a37[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n  background: var(--dvinternal-backdrop);\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: var(--dvinternal-close-btn);\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: var(--dvinternal-close-btn-hover);\n  background-color: var(--dvinternal-close-btn-hover-bg);\n  border-radius: 3px;\n}\n\n._468ff1da37ead40a:active {\n  background-color: var(--dvinternal-close-btn-active-bg);\n}\n\n._468ff1da37ead40a:focus-visible {\n  outline: 2px solid var(--dvinternal-close-btn-focus);\n  outline-offset: -2px;\n}\n\n._0be228fb3f6dcf6a {\n  flex: 1;\n  overflow: auto;\n}\n\n._da3b3b2a4aeed1ee {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n._61879ba330d9a71c {\n  margin-top: 0.5em;\n}\n</style>\n","<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"_b4102a3b79656a37\"\n    :data-theme=\"resolvedTheme\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n      <span class=\"_088d860d2fd75292\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_468ff1da37ead40a\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"_0be228fb3f6dcf6a\">\n      <div class=\"_da3b3b2a4aeed1ee\">\n        <slot></slot>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated, inject } from 'vue'\nimport { dialogViewConfig, type DialogViewConfig } from './config'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n  theme?: 'light' | 'dark' | 'auto'\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      })\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none')\n\n// --- Theme resolution ---\nconst injectedConfig = inject<DialogViewConfig | undefined>('dialogViewConfig', undefined)\n\nconst systemPrefersDark = ref(false)\nconst systemQuery = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)') : null\nlet systemQueryListener: ((e: MediaQueryListEvent) => void) | null = null\n\nif (systemQuery) {\n  systemPrefersDark.value = systemQuery.matches\n  systemQueryListener = (e) => { systemPrefersDark.value = e.matches }\n  systemQuery.addEventListener('change', systemQueryListener)\n}\n\nconst resolvedTheme = computed<'light' | 'dark'>(() => {\n  // Priority: component prop > plugin config > module-level config\n  const theme = props.theme ?? injectedConfig?.theme ?? dialogViewConfig.value.theme ?? 'light'\n  if (theme === 'auto') {\n    return systemPrefersDark.value ? 'dark' : 'light'\n  }\n  return theme\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\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }  if (systemQuery && systemQueryListener) {\n    systemQuery.removeEventListener('change', systemQueryListener)\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n  --dvinternal-bg: var(--dialog-bg, #fff);\n  --dvinternal-text: var(--dialog-text-color, #000);\n  --dvinternal-border: var(--dialog-border-color, gray);\n  --dvinternal-backdrop: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.5));\n  --dvinternal-close-btn: var(--dialog-close-btn-color, #666);\n  --dvinternal-close-btn-hover: var(--dialog-close-btn-hover-color, #333);\n  --dvinternal-close-btn-hover-bg: var(--dialog-close-btn-hover-bg, #f0f0f0);\n  --dvinternal-close-btn-active-bg: var(--dialog-close-btn-active-bg, #e0e0e0);\n  --dvinternal-close-btn-focus: var(--dialog-close-btn-focus-outline, rgb(160, 207, 255));\n\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid var(--dvinternal-border);\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  background: var(--dvinternal-bg);\n  color: var(--dvinternal-text);\n}\n\n._b4102a3b79656a37[data-theme=\"dark\"] {\n  --dvinternal-bg: var(--dialog-bg, #1e1e1e);\n  --dvinternal-text: var(--dialog-text-color, #e0e0e0);\n  --dvinternal-border: var(--dialog-border-color, #555);\n  --dvinternal-backdrop: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.7));\n  --dvinternal-close-btn: var(--dialog-close-btn-color, #aaa);\n  --dvinternal-close-btn-hover: var(--dialog-close-btn-hover-color, #ddd);\n  --dvinternal-close-btn-hover-bg: var(--dialog-close-btn-hover-bg, #333);\n  --dvinternal-close-btn-active-bg: var(--dialog-close-btn-active-bg, #444);\n  --dvinternal-close-btn-focus: var(--dialog-close-btn-focus-outline, rgb(100, 160, 220));\n}\n\n._b4102a3b79656a37[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n  background: var(--dvinternal-backdrop);\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: var(--dvinternal-close-btn);\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: var(--dvinternal-close-btn-hover);\n  background-color: var(--dvinternal-close-btn-hover-bg);\n  border-radius: 3px;\n}\n\n._468ff1da37ead40a:active {\n  background-color: var(--dvinternal-close-btn-active-bg);\n}\n\n._468ff1da37ead40a:focus-visible {\n  outline: 2px solid var(--dvinternal-close-btn-focus);\n  outline-offset: -2px;\n}\n\n._0be228fb3f6dcf6a {\n  flex: 1;\n  overflow: auto;\n}\n\n._da3b3b2a4aeed1ee {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n._61879ba330d9a71c {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.obf.vue'\nimport { type DialogViewConfig } from './config'\n\nexport { default as DialogView } from './DialogView.obf.vue'\nexport { dialogViewConfig, setDialogViewConfig, type DialogViewConfig } from './config'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App, options?: DialogViewConfig) => {\n    if (options) {\n      app.provide('dialogViewConfig', options)\n    }\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"mappings":"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"}

package/dist/dialog-view.umd.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"dialog-view.umd.js","names":["$attrs","$slots"],"sources":["../src/DialogView.obf.vue","../src/DialogView.obf.vue","../src/index.ts"],"sourcesContent":["<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"_b4102a3b79656a37\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n      <span class=\"_088d860d2fd75292\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_468ff1da37ead40a\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"_0be228fb3f6dcf6a\">\n      <div class=\"_da3b3b2a4aeed1ee\">\n        <slot></slot>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n._b4102a3b79656a37[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n._4d394b1507fdc584 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n._088d860d2fd75292 {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n._468ff1da37ead40a {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n._468ff1da37ead40a:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n._468ff1da37ead40a:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n._0be228fb3f6dcf6a {\n  flex: 1;\n  overflow: auto;\n}\n\n._da3b3b2a4aeed1ee {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n._61879ba330d9a71c {\n  margin-top: 0.5em;\n}\n</style>\n","<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"_b4102a3b79656a37\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n      <span class=\"_088d860d2fd75292\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_468ff1da37ead40a\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"_0be228fb3f6dcf6a\">\n      <div class=\"_da3b3b2a4aeed1ee\">\n        <slot></slot>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      // not programmatically close\n      // re-open the dialog\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      // model value keep unchanged\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n  await nextTick()\n  \n  if (newValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  } else {\n    if (dialogRef.value && dialogRef.value.open) {\n      dialogRef.value.close()\n    }\n  }\n})\n\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid gray;\n  outline: 0 !important;\n  max-width: calc(100% - 2em);\n  max-height: calc(100% - 2em);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n._b4102a3b79656a37[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n._4d394b1507fdc584 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 0.5em;\n  min-height: var(--dialog-title-height, 24px);\n  white-space: pre;\n  overflow: hidden;\n  user-select: none;\n}\n\n._088d860d2fd75292 {\n  flex: 1;\n  text-align: center;\n  font-weight: bold;\n  font-size: large;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n._468ff1da37ead40a {\n  margin-left: 0.5em;\n  text-decoration: none;\n  color: #666;\n  font-size: 1.5em;\n  line-height: 1;\n  width: 24px;\n  height: 24px;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: none;\n}\n\n._468ff1da37ead40a:hover {\n  color: #333;\n  background-color: #f0f0f0;\n  border-radius: 3px;\n}\n\n._468ff1da37ead40a:focus-visible {\n  outline: 2px solid rgb(160, 207, 255);\n  outline-offset: -2px;\n}\n\n._0be228fb3f6dcf6a {\n  flex: 1;\n  overflow: auto;\n}\n\n._da3b3b2a4aeed1ee {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n._61879ba330d9a71c {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.obf.vue'\n\nexport { default as DialogView } from './DialogView.obf.vue'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App) => {\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"mappings":";kzBA6CA,IAAM,EAAQ,EAOR,EAAO,EAKP,GAAA,EAAA,EAAA,KAAmC,EAEnC,MAAyB,CAC7B,EAAK,oBAAqB,EAAI,CAChC,EAEM,MAA0B,CAC9B,EAAK,oBAAqB,EAAK,CACjC,EAEM,EAAsB,GAAa,CACvC,EAAE,eAAe,EACb,EAAM,UAAU,EAAY,CAClC,EAEM,GAAA,EAAA,EAAA,KAAuB,EAAK,EAE5B,MAAgC,CAChC,MAAiB,MACrB,IAAI,CAAC,EAAM,UACL,EAAM,WAAY,EAGpB,EAAA,EAAA,cAAe,CACT,EAAU,OAAS,CAAC,EAAU,MAAM,MAAM,EAAU,MAAM,UAAU,CAC1E,CAAC,EACD,MACF,CAEE,EAAM,YACR,EAAK,oBAAqB,EAAK,GAEjC,EAAA,EAAA,cAAe,CACT,EAAM,YAEJ,EAAU,OAAS,CAAC,EAAU,MAAM,MAAM,EAAU,MAAM,UAAU,CAE5E,CAAC,EACD,EAAK,QAAQ,EACf,EAEM,GAAA,EAAA,EAAA,cAA0B,EAAM,SAAY,EAAM,iBAAmB,MAAQ,eAAkB,MAAM,GAE3G,EAAA,EAAA,WAAY,EAAM,WAAY,KAAO,IAAsB,CACzD,MAAA,EAAA,EAAA,UAAe,EAEX,EACE,EAAU,OAAS,CAAC,EAAU,MAAM,MACtC,EAAU,MAAM,UAAU,EAGxB,EAAU,OAAS,EAAU,MAAM,MACrC,EAAU,MAAM,MAAM,CAG5B,CAAC,EAED,IAAM,MAAmB,CACnB,EAAM,YACJ,EAAU,OAAS,CAAC,EAAU,MAAM,MACtC,EAAU,MAAM,UAAU,CAGhC,SAEA,EAAA,EAAA,eAAgB,CACd,EAAW,CACb,CAAC,GAED,EAAA,EAAA,qBAAsB,CAChB,EAAU,OAAS,EAAU,MAAM,MACrC,EAAU,MAAM,MAAM,CAE1B,CAAC,GAED,EAAA,EAAA,mBAAoB,CACd,EAAU,OAAS,EAAU,MAAM,OACrC,EAAiB,MAAQ,GACzB,EAAU,MAAM,MAAM,GACtB,EAAA,EAAA,cAAe,EAAiB,MAAQ,EAAK,EAEjD,CAAC,GAED,EAAA,EAAA,iBAAkB,CAChB,EAAW,CACb,CAAC,EAED,EAAa,CACX,QAAW,EAAU,MACrB,KAAM,EACN,MAAO,CACT,CAAC,qDArHU,UAAA,EAAA,EAAA,YAAA,SA7BH,YAAJ,IAAI,EACJ,MAAM,qBACEA,EAAAA,OAAM,CACb,QAAO,EACP,SAAQ,EACR,SAAU,EAAA,SAEA,EAAA,eAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,oBAWL,MAXN,EAWM,EAAA,EAAA,EAAA,oBARG,OAFP,EAEO,EAAA,EAAA,EAAA,YADqB,EAAA,OAAA,OAAA,CAAA,CAAA,EAGpB,EAAA,iBAAmB,EAAA,WAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,oBAKV,SAAA,OAJf,KAAK,SACL,aAAW,mBACX,MAAM,oBACL,SAAA,EAAA,EAAA,eAAe,EAAW,CAAA,SAAA,CAAA,GAC5B,GAAO,IAAA,EAAA,EAAA,oBAAA,GAAA,EAAA,CAAA,CAAA,IAAA,EAAA,EAAA,oBAAA,GAAA,EAAA,2BAOJ,MAJN,EAIM,EAAA,EAAA,EAAA,oBADE,MAFN,EAEM,EAAA,EAAA,EAAA,YADS,EAAA,OAAA,SAAA,CAAA,CAAA,CAAA,CAAA,EAINC,EAAAA,OAAO,SAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,oBAEZ,MAFN,EAEM,EAAA,EAAA,EAAA,YADuB,EAAA,OAAA,QAAA,CAAA,CAAA,IAAA,EAAA,EAAA,oBAAA,GAAA,EAAA,aExBpB,EAA2B,CACtC,QAAU,GAAa,CACrB,EAAI,UAAU,aAAc,CAAmB,CACjD,CACF"}
+{"version":3,"file":"dialog-view.umd.js","names":["$attrs","$slots"],"sources":["../src/config.ts","../src/DialogView.obf.vue","../src/DialogView.obf.vue","../src/index.ts"],"sourcesContent":["import { ref } from 'vue'\n\nexport interface DialogViewConfig {\n  theme: 'light' | 'dark' | 'auto'\n}\n\nconst defaultConfig: DialogViewConfig = {\n  theme: 'light'\n}\n\nexport const dialogViewConfig = ref<DialogViewConfig>({ ...defaultConfig })\n\nexport function setDialogViewConfig(newConfig: Partial<DialogViewConfig>): void {\n  dialogViewConfig.value = { ...dialogViewConfig.value, ...newConfig }\n}\n","<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"_b4102a3b79656a37\"\n    :data-theme=\"resolvedTheme\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n      <span class=\"_088d860d2fd75292\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_468ff1da37ead40a\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"_0be228fb3f6dcf6a\">\n      <div class=\"_da3b3b2a4aeed1ee\">\n        <slot></slot>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated, inject } from 'vue'\nimport { dialogViewConfig, type DialogViewConfig } from './config'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n  theme?: 'light' | 'dark' | 'auto'\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      })\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none')\n\n// --- Theme resolution ---\nconst injectedConfig = inject<DialogViewConfig | undefined>('dialogViewConfig', undefined)\n\nconst systemPrefersDark = ref(false)\nconst systemQuery = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)') : null\nlet systemQueryListener: ((e: MediaQueryListEvent) => void) | null = null\n\nif (systemQuery) {\n  systemPrefersDark.value = systemQuery.matches\n  systemQueryListener = (e) => { systemPrefersDark.value = e.matches }\n  systemQuery.addEventListener('change', systemQueryListener)\n}\n\nconst resolvedTheme = computed<'light' | 'dark'>(() => {\n  // Priority: component prop > plugin config > module-level config\n  const theme = props.theme ?? injectedConfig?.theme ?? dialogViewConfig.value.theme ?? 'light'\n  if (theme === 'auto') {\n    return systemPrefersDark.value ? 'dark' : 'light'\n  }\n  return theme\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\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }  if (systemQuery && systemQueryListener) {\n    systemQuery.removeEventListener('change', systemQueryListener)\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n  --dvinternal-bg: var(--dialog-bg, #fff);\n  --dvinternal-text: var(--dialog-text-color, #000);\n  --dvinternal-border: var(--dialog-border-color, gray);\n  --dvinternal-backdrop: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.5));\n  --dvinternal-close-btn: var(--dialog-close-btn-color, #666);\n  --dvinternal-close-btn-hover: var(--dialog-close-btn-hover-color, #333);\n  --dvinternal-close-btn-hover-bg: var(--dialog-close-btn-hover-bg, #f0f0f0);\n  --dvinternal-close-btn-active-bg: var(--dialog-close-btn-active-bg, #e0e0e0);\n  --dvinternal-close-btn-focus: var(--dialog-close-btn-focus-outline, rgb(160, 207, 255));\n\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid var(--dvinternal-border);\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  background: var(--dvinternal-bg);\n  color: var(--dvinternal-text);\n}\n\n._b4102a3b79656a37[data-theme=\"dark\"] {\n  --dvinternal-bg: var(--dialog-bg, #1e1e1e);\n  --dvinternal-text: var(--dialog-text-color, #e0e0e0);\n  --dvinternal-border: var(--dialog-border-color, #555);\n  --dvinternal-backdrop: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.7));\n  --dvinternal-close-btn: var(--dialog-close-btn-color, #aaa);\n  --dvinternal-close-btn-hover: var(--dialog-close-btn-hover-color, #ddd);\n  --dvinternal-close-btn-hover-bg: var(--dialog-close-btn-hover-bg, #333);\n  --dvinternal-close-btn-active-bg: var(--dialog-close-btn-active-bg, #444);\n  --dvinternal-close-btn-focus: var(--dialog-close-btn-focus-outline, rgb(100, 160, 220));\n}\n\n._b4102a3b79656a37[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n  background: var(--dvinternal-backdrop);\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: var(--dvinternal-close-btn);\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: var(--dvinternal-close-btn-hover);\n  background-color: var(--dvinternal-close-btn-hover-bg);\n  border-radius: 3px;\n}\n\n._468ff1da37ead40a:active {\n  background-color: var(--dvinternal-close-btn-active-bg);\n}\n\n._468ff1da37ead40a:focus-visible {\n  outline: 2px solid var(--dvinternal-close-btn-focus);\n  outline-offset: -2px;\n}\n\n._0be228fb3f6dcf6a {\n  flex: 1;\n  overflow: auto;\n}\n\n._da3b3b2a4aeed1ee {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n._61879ba330d9a71c {\n  margin-top: 0.5em;\n}\n</style>\n","<template>\n  <dialog\n    ref=\"dialogRef\"\n    class=\"_b4102a3b79656a37\"\n    :data-theme=\"resolvedTheme\"\n    v-bind=\"$attrs\"\n    @close=\"handleDialogClose\"\n    @cancel=\"handleDialogCancel\"\n    :closedBy=\"closedBy\"\n  >\n    <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n      <span class=\"_088d860d2fd75292\">\n        <slot name=\"title\"></slot>\n      </span>\n      <button\n        v-if=\"showCloseButton && closable\"\n        type=\"button\"\n        aria-label=\"Close the dialog\"\n        class=\"_468ff1da37ead40a\"\n        @click.prevent=\"closeDialog\"\n      >&times;</button>\n    </div>\n    \n    <div class=\"_0be228fb3f6dcf6a\">\n      <div class=\"_da3b3b2a4aeed1ee\">\n        <slot></slot>\n      </div>\n    </div>\n\n    <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n      <slot name=\"footer\"></slot>\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated, inject } from 'vue'\nimport { dialogViewConfig, type DialogViewConfig } from './config'\n\ninterface Props {\n  modelValue: boolean\n  showTitleBar?: boolean\n  showCloseButton?: boolean\n  closable?: boolean\n  closeOnClickMask?: boolean\n  theme?: 'light' | 'dark' | 'auto'\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showTitleBar: true,\n  showCloseButton: true,\n  closable: true,\n  closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n  emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n  emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n  e.preventDefault();\n  if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n  if (ignoreCloseEvent.value) return;\n  if (!props.closable) {\n    if (props.modelValue) {\n      nextTick(() => {\n        if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n      })\n      return;\n    }\n  }\n  if (props.modelValue) {\n    emit('update:modelValue', false)\n  }\n  nextTick(() => {\n    if (props.modelValue) {\n      if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n    }\n  })\n  emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none')\n\n// --- Theme resolution ---\nconst injectedConfig = inject<DialogViewConfig | undefined>('dialogViewConfig', undefined)\n\nconst systemPrefersDark = ref(false)\nconst systemQuery = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)') : null\nlet systemQueryListener: ((e: MediaQueryListEvent) => void) | null = null\n\nif (systemQuery) {\n  systemPrefersDark.value = systemQuery.matches\n  systemQueryListener = (e) => { systemPrefersDark.value = e.matches }\n  systemQuery.addEventListener('change', systemQueryListener)\n}\n\nconst resolvedTheme = computed<'light' | 'dark'>(() => {\n  // Priority: component prop > plugin config > module-level config\n  const theme = props.theme ?? injectedConfig?.theme ?? dialogViewConfig.value.theme ?? 'light'\n  if (theme === 'auto') {\n    return systemPrefersDark.value ? 'dark' : 'light'\n  }\n  return theme\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\nconst initDialog = () => {\n  if (props.modelValue) {\n    if (dialogRef.value && !dialogRef.value.open) {\n      dialogRef.value.showModal()\n    }\n  }\n};\n\nonMounted(() => {\n  initDialog();\n});\n\nonBeforeUnmount(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    dialogRef.value.close()\n  }  if (systemQuery && systemQueryListener) {\n    systemQuery.removeEventListener('change', systemQueryListener)\n  }\n});\n\nonDeactivated(() => {\n  if (dialogRef.value && dialogRef.value.open) {\n    ignoreCloseEvent.value = true;\n    dialogRef.value.close();\n    nextTick(() => ignoreCloseEvent.value = false);\n  }\n});\n\nonActivated(() => {\n  initDialog();\n});\n\ndefineExpose({\n  get: () => dialogRef.value,\n  open: openDialog,\n  close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n  --dvinternal-bg: var(--dialog-bg, #fff);\n  --dvinternal-text: var(--dialog-text-color, #000);\n  --dvinternal-border: var(--dialog-border-color, gray);\n  --dvinternal-backdrop: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.5));\n  --dvinternal-close-btn: var(--dialog-close-btn-color, #666);\n  --dvinternal-close-btn-hover: var(--dialog-close-btn-hover-color, #333);\n  --dvinternal-close-btn-hover-bg: var(--dialog-close-btn-hover-bg, #f0f0f0);\n  --dvinternal-close-btn-active-bg: var(--dialog-close-btn-active-bg, #e0e0e0);\n  --dvinternal-close-btn-focus: var(--dialog-close-btn-focus-outline, rgb(160, 207, 255));\n\n  padding: var(--dialog-padding, 20px);\n  border-radius: 5px;\n  border: 1px solid var(--dvinternal-border);\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  background: var(--dvinternal-bg);\n  color: var(--dvinternal-text);\n}\n\n._b4102a3b79656a37[data-theme=\"dark\"] {\n  --dvinternal-bg: var(--dialog-bg, #1e1e1e);\n  --dvinternal-text: var(--dialog-text-color, #e0e0e0);\n  --dvinternal-border: var(--dialog-border-color, #555);\n  --dvinternal-backdrop: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.7));\n  --dvinternal-close-btn: var(--dialog-close-btn-color, #aaa);\n  --dvinternal-close-btn-hover: var(--dialog-close-btn-hover-color, #ddd);\n  --dvinternal-close-btn-hover-bg: var(--dialog-close-btn-hover-bg, #333);\n  --dvinternal-close-btn-active-bg: var(--dialog-close-btn-active-bg, #444);\n  --dvinternal-close-btn-focus: var(--dialog-close-btn-focus-outline, rgb(100, 160, 220));\n}\n\n._b4102a3b79656a37[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n  background: var(--dvinternal-backdrop);\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: var(--dvinternal-close-btn);\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: var(--dvinternal-close-btn-hover);\n  background-color: var(--dvinternal-close-btn-hover-bg);\n  border-radius: 3px;\n}\n\n._468ff1da37ead40a:active {\n  background-color: var(--dvinternal-close-btn-active-bg);\n}\n\n._468ff1da37ead40a:focus-visible {\n  outline: 2px solid var(--dvinternal-close-btn-focus);\n  outline-offset: -2px;\n}\n\n._0be228fb3f6dcf6a {\n  flex: 1;\n  overflow: auto;\n}\n\n._da3b3b2a4aeed1ee {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n._61879ba330d9a71c {\n  margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.obf.vue'\nimport { type DialogViewConfig } from './config'\n\nexport { default as DialogView } from './DialogView.obf.vue'\nexport { dialogViewConfig, setDialogViewConfig, type DialogViewConfig } from './config'\n\nexport const DialogViewPlugin: Plugin = {\n  install: (app: App, options?: DialogViewConfig) => {\n    if (options) {\n      app.provide('dialogViewConfig', options)\n    }\n    app.component('DialogView', DialogViewComponent)\n  }\n}\n\nexport default DialogViewPlugin\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { Plugin } from 'vue';
 export { default as DialogView } from './DialogView.obf.vue';
+export { dialogViewConfig, setDialogViewConfig, type DialogViewConfig } from './config';
 export declare const DialogViewPlugin: Plugin;
 export default DialogViewPlugin;

package/dist/unobfuscated.d.ts

@@ -1,4 +1,5 @@
 import { Plugin } from 'vue';
 export { default as DialogView } from './DialogView.vue';
+export { dialogViewConfig, setDialogViewConfig, type DialogViewConfig } from './config';
 export declare const DialogViewPlugin: Plugin;
 export default DialogViewPlugin;