vue-dialog-view 1.8.1 β†’ 1.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -6,16 +6,12 @@ A modern Vue 3 dialog component using the native HTML5 `<dialog>` element.
6
6
 
7
7
  ## ✨ Features
8
8
 
9
- * 🎯 **Native HTML5 Dialog** - Uses the built-in `<dialog>` element for better accessibility and performance
10
- * 🎨 **Customizable** - Configurable title bar and close button
11
- * πŸ–±οΈ **Click-to-close** - Optional backdrop click to close (using native closedby attribute)
12
- * β™Ώ **Accessible** - Proper ARIA labels and keyboard support
13
- * πŸ“± **Responsive** - Adapts to different screen sizes
14
- * πŸŽͺ **Slot Support** - Flexible content slots for title, footer and main content
15
- * 🎭 **Vue 3 Ready** - Built with Composition API and TypeScript
16
- * πŸ“¦ **Multiple Distributions** - Choose between obfuscated / unobfuscated builds
17
- * 🎨 **Flexible CSS Strategy** - Automatic CSS injection (zero setup) or fully manual CSS loading
18
- * 🧩 **Tree-shake Friendly** - ESM and UMD builds available
9
+ - 🎯 **Native `<dialog>`** – Built‑in element for better accessibility and performance
10
+ - β™Ώ **Accessible** – Proper ARIA labels, keyboard support
11
+ - 🎨 **Customizable** – Title bar, close button, backdrop click behaviour
12
+ - 🧩 **Slot support** – Title, footer, and main content slots
13
+ - πŸ“¦ **Vue 3 + TypeScript** – Composition API, tree‑shakable
14
+ - 🎭 **Flexible styling** – CSS variables for easy theming
19
15
 
20
16
  ---
21
17
 
@@ -27,9 +23,11 @@ npm i vue-dialog-view
27
23
 
28
24
  ---
29
25
 
30
- ## πŸš€ Quick Start (Default Build)
26
+ ## πŸš€ Quick Start
31
27
 
32
- By default, styles are automatically injected into the page β€” no CSS import required.
28
+ The default build automatically injects the required CSS – no extra import needed.
29
+
30
+ ### Global registration
33
31
 
34
32
  ```js
35
33
  import { createApp } from 'vue'
@@ -41,7 +39,7 @@ app.use(DialogView)
41
39
  app.mount('#app')
42
40
  ```
43
41
 
44
- Or local registration:
42
+ ### Local registration
45
43
 
46
44
  ```vue
47
45
  <script setup>
@@ -50,103 +48,90 @@ import { DialogView } from 'vue-dialog-view'
50
48
 
51
49
  const showDialog = ref(false)
52
50
  </script>
51
+
52
+ <template>
53
+ <DialogView v-model="showDialog">
54
+ <p>Your content here</p>
55
+ </DialogView>
56
+ </template>
53
57
  ```
54
58
 
55
59
  ---
56
60
 
57
- ## πŸ“š Entry Points & Build Variants
58
-
59
- This package provides multiple entry points so you can choose the best trade-off between:
60
-
61
- * readability vs bundle size
62
- * debuggability vs encapsulation
63
- * automatic vs manual CSS loading
64
-
65
- ### Overview
61
+ ## 🧩 Props
66
62
 
67
- | Entry | Import Path | Obfuscated | CSS Injected | Scoped CSS | Typical Use |
68
- | ----------------------- | ------------------------------------ | ---------- | ------------ | ---------- | ------------------------------ |
69
- | **Default** | `vue-dialog-view` | βœ… | βœ… | ❌ | Production (zero setup) |
70
- | **Unobfuscated** | `vue-dialog-view/unobfuscated` | ❌ | βœ… | βœ… | Debugging / Development |
71
- | **CSS-less** | `vue-dialog-view/cssless` | ❌ | ❌ | βœ… | Manual CSS control |
72
- | **CSS-less Obfuscated** | `vue-dialog-view/cssless-obfuscated` | βœ… | ❌ | ❌ | Advanced production setups |
73
- | **Style** | `vue-dialog-view/style` | β€” | β€” | β€” | Manual CSS import |
74
- | **Style (Obfuscated)** | `vue-dialog-view/style-obfuscated` | β€” | β€” | β€” | Manual CSS import (obfuscated) |
63
+ | Prop | Type | Default | Description |
64
+ |------|------|---------|-------------|
65
+ | `modelValue` | `boolean` | **required** | Controls dialog visibility (use `v-model`) |
66
+ | `showTitleBar` | `boolean` | `true` | Show/hide the title bar |
67
+ | `showCloseButton` | `boolean` | `true` | Show/hide the close button |
68
+ | `closable` | `boolean` | `true` | Whether the user can close the dialog |
69
+ | `closeOnClickMask` | `boolean` | `false` | Whether clicking the backdrop closes the dialog |
75
70
 
76
71
  ---
77
72
 
78
- ### πŸ”Ή Default Build (Recommended)
79
-
80
- ```js
81
- import DialogView from 'vue-dialog-view'
82
- ```
83
-
84
- * βœ”οΈ Obfuscated class names
85
- * βœ”οΈ CSS automatically injected at runtime
86
- * βœ”οΈ Zero configuration
87
- * βœ”οΈ Small bundle size
88
- * ❌ Not intended for external CSS overrides
73
+ ## πŸ“£ Events
89
74
 
90
- Best choice for most applications.
75
+ | Event | Description |
76
+ |-------|-------------|
77
+ | `update:modelValue` | Emitted when visibility changes |
78
+ | `closed` | Emitted after the dialog is fully closed |
91
79
 
92
80
  ---
93
81
 
94
- ### πŸ”Ή Unobfuscated Build
95
-
96
- ```js
97
- import DialogView from 'vue-dialog-view/unobfuscated'
98
- ```
99
-
100
- * βœ”οΈ Human-readable class names
101
- * βœ”οΈ Scoped CSS to avoid collisions
102
- * βœ”οΈ Easier DOM inspection and debugging
103
- * ❌ Slightly larger output
82
+ ## πŸ§ͺ Slots
104
83
 
105
- Recommended for development, debugging, and learning.
84
+ | Slot | Description |
85
+ |------|-------------|
86
+ | `#title` | Custom title content (replaces default title bar text) |
87
+ | `#footer` | Footer content |
88
+ | `default` | Main content area |
106
89
 
107
90
  ---
108
91
 
109
- ### πŸ”Ή CSS-less Build (Manual CSS Loading)
92
+ ## πŸ”§ Methods (via template ref)
110
93
 
111
- ```js
112
- import DialogView from 'vue-dialog-view/cssless'
113
- import 'vue-dialog-view/style'
114
- ```
94
+ The component exposes the following methods using `defineExpose`:
115
95
 
116
- * βœ”οΈ No runtime CSS injection
117
- * βœ”οΈ CSS loaded explicitly by the user
118
- * βœ”οΈ Scoped CSS (non-obfuscated)
119
- * βœ”οΈ Works well with bundler CSS pipelines
96
+ ```vue
97
+ <script setup>
98
+ import { ref } from 'vue'
99
+ import { DialogView } from 'vue-dialog-view'
120
100
 
121
- Useful when your project enforces explicit CSS imports.
101
+ const dialogRef = ref()
122
102
 
123
- ---
103
+ // Open programmatically
104
+ dialogRef.value.open()
124
105
 
125
- ### πŸ”Ή CSS-less Obfuscated Build
106
+ // Close programmatically
107
+ dialogRef.value.close()
126
108
 
127
- ```js
128
- import DialogView from 'vue-dialog-view/cssless-obfuscated'
129
- import 'vue-dialog-view/style-obfuscated'
130
- ```
109
+ // Access the underlying native <dialog> element
110
+ dialogRef.value.get()
111
+ </script>
131
112
 
132
- * βœ”οΈ Obfuscated class names
133
- * βœ”οΈ No runtime CSS injection
134
- * βœ”οΈ Smallest runtime footprint
135
- * ❌ Not suitable for CSS customization
113
+ <template>
114
+ <DialogView ref="dialogRef" v-model="show">
115
+ <!-- content -->
116
+ </DialogView>
117
+ </template>
118
+ ```
136
119
 
137
- Best for highly controlled production environments.
120
+ | Method | Description |
121
+ |--------|-------------|
122
+ | `open()` | Opens the dialog (sets `modelValue` to `true`) |
123
+ | `close()` | Closes the dialog (sets `modelValue` to `false`) |
124
+ | `get()` | Returns the native `<dialog>` DOM element |
138
125
 
139
126
  ---
140
127
 
141
- ## 🎨 Styling & Customization
142
-
143
- ### CSS Custom Properties
128
+ ## 🎨 Styling & Customisation
144
129
 
145
- DialogView exposes a small set of CSS variables for safe customization:
130
+ ### CSS Variables
146
131
 
147
132
  ```css
148
133
  --dialog-padding /* default: 20px */
149
- --dialog-title-height /* default: 24px */
134
+ --dialog-title-height /* default: 24px */
150
135
  ```
151
136
 
152
137
  Example:
@@ -158,57 +143,40 @@ Example:
158
143
  }
159
144
  ```
160
145
 
161
- These variables work consistently across all build variants.
162
-
163
- > ⚠️ Direct class-based overrides are discouraged in obfuscated builds.
146
+ These variables work across all builds and are the recommended way to adjust spacing.
164
147
 
165
148
  ---
166
149
 
167
- ## 🧩 Props
168
-
169
- | Prop | Type | Default | Description |
170
- | ------------------ | --------- | ------------ | ------------------------------------------- |
171
- | `modelValue` | `boolean` | **required** | Controls dialog visibility |
172
- | `showTitleBar` | `boolean` | `true` | Show or hide title bar |
173
- | `showCloseButton` | `boolean` | `true` | Show close button |
174
- | `closable` | `boolean` | `true` | Whether the user can close the dialog |
175
- | `closeOnClickMask` | `boolean` | `false` | Whether clicking backdrop closes the dialog |
176
-
177
- ---
178
-
179
- ## πŸ“£ Events
180
-
181
- | Event | Description |
182
- | ------------------- | ----------------------------- |
183
- | `update:modelValue` | Fired when visibility changes |
184
- | `closed` | Fired when the dialog really closed |
185
-
186
- ---
150
+ ## πŸ› οΈ Advanced: Build Variants
187
151
 
188
- ## πŸ§ͺ Slots
152
+ The package provides multiple entry points to balance bundle size, debuggability, and CSS control. **Most projects should use the default build** – the variants are only needed for special cases.
189
153
 
190
- | Slot | Description |
191
- | --------- | -------------- |
192
- | `#title` | Title content |
193
- | `#footer` | Footer content |
194
- | `default` | Main content |
154
+ | Build | Import Path | CSS Injected | Class Names | Use Case |
155
+ |-------|-------------|--------------|-------------|----------|
156
+ | **Default** | `vue-dialog-view` | βœ… | Obfuscated | Recommended for production |
157
+ | Unobfuscated | `vue-dialog-view/unobfuscated` | βœ… | Readable | Debugging / development |
158
+ | CSS‑less | `vue-dialog-view/cssless` | ❌ | Readable | When you need manual CSS control |
159
+ | CSS‑less obfuscated | `vue-dialog-view/cssless-obfuscated` | ❌ | Obfuscated | Advanced production setups |
195
160
 
196
- ---
161
+ For CSS‑less builds you must import the style separately:
197
162
 
198
- ## πŸ”§ Methods
163
+ ```js
164
+ import DialogView from 'vue-dialog-view/cssless'
165
+ import 'vue-dialog-view/style'
166
+ ```
199
167
 
200
- ```vue
201
- const dialogRef = ref()
168
+ If you need the obfuscated style:
202
169
 
203
- dialogRef.value.open()
204
- dialogRef.value.close()
170
+ ```js
171
+ import DialogView from 'vue-dialog-view/cssless-obfuscated'
172
+ import 'vue-dialog-view/style-obfuscated'
205
173
  ```
206
174
 
207
175
  ---
208
176
 
209
177
  ## 🌍 Browser Support
210
178
 
211
- Requires native HTML5 `<dialog>` support.
179
+ Requires native HTML5 `<dialog>` support.
212
180
  Use a polyfill for legacy browsers.
213
181
 
214
182
  ---
@@ -19,6 +19,7 @@ declare function __VLS_template(): {
19
19
  };
20
20
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
21
21
  declare const __VLS_component: import('vue').DefineComponent<Props, {
22
+ get: () => HTMLDialogElement | undefined;
22
23
  open: () => void;
23
24
  close: () => void;
24
25
  }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
@@ -19,6 +19,7 @@ declare function __VLS_template(): {
19
19
  };
20
20
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
21
21
  declare const __VLS_component: import('vue').DefineComponent<Props, {
22
+ get: () => HTMLDialogElement | undefined;
22
23
  open: () => void;
23
24
  close: () => void;
24
25
  }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
@@ -1,11 +1,11 @@
1
- import { defineComponent as w, ref as y, computed as B, watch as b, nextTick as u, onMounted as g, onBeforeUnmount as k, openBlock as s, createElementBlock as n, mergeProps as C, createElementVNode as f, renderSlot as d, withModifiers as _, createCommentVNode as i } from "vue";
2
- const M = ["closedBy"], D = {
1
+ import { defineComponent as y, ref as v, computed as B, watch as C, nextTick as s, onMounted as k, onBeforeUnmount as _, onDeactivated as D, onActivated as M, openBlock as n, createElementBlock as u, mergeProps as $, createElementVNode as p, renderSlot as c, withModifiers as E, createCommentVNode as f } from "vue";
2
+ const T = ["closedBy"], N = {
3
3
  key: 0,
4
4
  class: "_4d394b1507fdc584"
5
- }, $ = { class: "_088d860d2fd75292" }, T = { class: "_da3b3b2a4aeed1ee" }, E = {
5
+ }, O = { class: "_088d860d2fd75292" }, P = { class: "_da3b3b2a4aeed1ee" }, R = {
6
6
  key: 1,
7
7
  class: "_61879ba330d9a71c"
8
- }, N = /* @__PURE__ */ w({
8
+ }, q = /* @__PURE__ */ y({
9
9
  __name: "DialogView.obf",
10
10
  props: {
11
11
  modelValue: { type: Boolean },
@@ -15,67 +15,81 @@ const M = ["closedBy"], D = {
15
15
  closeOnClickMask: { type: Boolean, default: !1 }
16
16
  },
17
17
  emits: ["update:modelValue", "closed"],
18
- setup(a, { expose: r, emit: p }) {
19
- const o = a, t = p, e = y(null), m = () => {
18
+ setup(a, { expose: m, emit: h }) {
19
+ const o = a, t = h, e = v(), g = () => {
20
20
  t("update:modelValue", !0);
21
- }, v = () => {
21
+ }, i = () => {
22
22
  t("update:modelValue", !1);
23
- }, h = () => {
24
- if (!o.closable && o.modelValue) {
25
- u(() => {
26
- e.value && !e.value.open && e.value.showModal();
27
- });
28
- return;
23
+ }, V = (l) => {
24
+ l.preventDefault(), o.closable && i();
25
+ }, d = v(!1), b = () => {
26
+ if (!d.value) {
27
+ if (!o.closable && o.modelValue) {
28
+ s(() => {
29
+ e.value && !e.value.open && e.value.showModal();
30
+ });
31
+ return;
32
+ }
33
+ o.modelValue && t("update:modelValue", !1), s(() => {
34
+ o.modelValue && e.value && !e.value.open && e.value.showModal();
35
+ }), t("closed");
29
36
  }
30
- o.modelValue && t("update:modelValue", !1), u(() => {
31
- o.modelValue && e.value && !e.value.open && e.value.showModal();
32
- }), t("closed");
33
- }, V = B(() => o.closable ? o.closeOnClickMask ? "any" : "closerequest" : "none");
34
- return b(() => o.modelValue, async (l) => {
35
- await u(), l ? e.value && !e.value.open && e.value.showModal() : e.value && e.value.open && e.value.close();
36
- }), g(() => {
37
+ }, w = B(() => o.closable ? o.closeOnClickMask ? "any" : "closerequest" : "none");
38
+ C(() => o.modelValue, async (l) => {
39
+ await s(), l ? e.value && !e.value.open && e.value.showModal() : e.value && e.value.open && e.value.close();
40
+ });
41
+ const r = () => {
37
42
  o.modelValue && e.value && !e.value.open && e.value.showModal();
38
- }), k(() => {
43
+ };
44
+ return k(() => {
45
+ r();
46
+ }), _(() => {
39
47
  e.value && e.value.open && e.value.close();
40
- }), r({
41
- open: m,
42
- close: v
43
- }), (l, c) => (s(), n("dialog", C({
48
+ }), D(() => {
49
+ e.value && e.value.open && (d.value = !0, e.value.close(), s(() => d.value = !1));
50
+ }), M(() => {
51
+ r();
52
+ }), m({
53
+ get: () => e.value,
54
+ open: g,
55
+ close: i
56
+ }), (l, A) => (n(), u("dialog", $({
44
57
  ref_key: "dialogRef",
45
58
  ref: e,
46
59
  class: "_b4102a3b79656a37"
47
60
  }, l.$attrs, {
48
- onClose: h,
49
- closedBy: V.value
61
+ onClose: b,
62
+ onCancel: V,
63
+ closedBy: w.value
50
64
  }), [
51
- a.showTitleBar ? (s(), n("div", D, [
52
- f("span", $, [
53
- d(l.$slots, "title")
65
+ a.showTitleBar ? (n(), u("div", N, [
66
+ p("span", O, [
67
+ c(l.$slots, "title")
54
68
  ]),
55
- a.showCloseButton && a.closable ? (s(), n("button", {
69
+ a.showCloseButton && a.closable ? (n(), u("button", {
56
70
  key: 0,
57
71
  type: "button",
58
72
  "aria-label": "Close the dialog",
59
73
  class: "_468ff1da37ead40a",
60
- onClick: c[0] || (c[0] = _((O) => e.value?.close(), ["prevent"]))
61
- }, "Γ—")) : i("", !0)
62
- ])) : i("", !0),
63
- f("div", T, [
64
- d(l.$slots, "default")
74
+ onClick: E(i, ["prevent"])
75
+ }, "Γ—")) : f("", !0)
76
+ ])) : f("", !0),
77
+ p("div", P, [
78
+ c(l.$slots, "default")
65
79
  ]),
66
- l.$slots.footer ? (s(), n("div", E, [
67
- d(l.$slots, "footer")
68
- ])) : i("", !0)
69
- ], 16, M));
80
+ l.$slots.footer ? (n(), u("div", R, [
81
+ c(l.$slots, "footer")
82
+ ])) : f("", !0)
83
+ ], 16, T));
70
84
  }
71
- }), R = {
85
+ }), U = {
72
86
  install: (a) => {
73
- a.component("DialogView", N);
87
+ a.component("DialogView", q);
74
88
  }
75
89
  };
76
90
  export {
77
- N as DialogView,
78
- R as DialogViewPlugin,
79
- R as default
91
+ q as DialogView,
92
+ U as DialogViewPlugin,
93
+ U as default
80
94
  };
81
95
  //# sourceMappingURL=cssless-obfuscated.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"cssless-obfuscated.es.js","sources":["../src/DialogView.obf.vue","../src/index.ts"],"sourcesContent":["<template>\n <dialog\n ref=\"dialogRef\"\n class=\"_b4102a3b79656a37\"\n v-bind=\"$attrs\"\n @close=\"handleDialogClose\"\n :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=\"dialogRef?.close()\"\n >&times;</button>\n </div>\n \n <div class=\"_da3b3b2a4aeed1ee\">\n <slot></slot>\n </div>\n\n <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n <slot name=\"footer\"></slot>\n </div>\n </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'\n\ninterface Props {\n modelValue: boolean\n showTitleBar?: boolean\n showCloseButton?: boolean\n closable?: boolean\n closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n showTitleBar: true,\n showCloseButton: true,\n closable: true,\n closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: boolean): void\n (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement | null>(null)\n\nconst openDialog = (): void => {\n emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n emit('update:modelValue', false)\n}\n\nconst handleDialogClose = (): void => {\n if (!props.closable) {\n if (props.modelValue) {\n // not programmatically close\n // re-open the dialog\n nextTick(() => {\n if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n return;\n }\n }\n if (props.modelValue) {\n emit('update:modelValue', false)\n }\n nextTick(() => {\n if (props.modelValue) {\n // model value keep unchanged\n if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n }\n })\n emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n await nextTick()\n \n if (newValue) {\n if (dialogRef.value && !dialogRef.value.open) {\n dialogRef.value.showModal()\n }\n } else {\n if (dialogRef.value && dialogRef.value.open) {\n dialogRef.value.close()\n }\n }\n})\n\nonMounted(() => {\n if (props.modelValue) {\n if (dialogRef.value && !dialogRef.value.open) {\n dialogRef.value.showModal()\n }\n }\n});\n\nonBeforeUnmount(() => {\n if (dialogRef.value && dialogRef.value.open) {\n dialogRef.value.close()\n }\n});\n\ndefineExpose({\n open: openDialog,\n close: closeDialog,\n})\n</script>\n\n<style>\n._b4102a3b79656a37 {\n padding: var(--dialog-padding, 20px);\n border-radius: 5px;\n border: 1px solid gray;\n outline: 0 !important;\n max-width: calc(100% - 2em);\n max-height: calc(100% - 2em);\n box-sizing: border-box;\n overflow: hidden;\n}\n\n._b4102a3b79656a37[open] {\n display: flex;\n flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n background: rgba(0, 0, 0, 0.5);\n}\n\n._4d394b1507fdc584 {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 0.5em;\n min-height: var(--dialog-title-height, 24px);\n white-space: pre;\n overflow: hidden;\n user-select: none;\n}\n\n._088d860d2fd75292 {\n flex: 1;\n text-align: center;\n font-weight: bold;\n font-size: large;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n._468ff1da37ead40a {\n margin-left: 0.5em;\n text-decoration: none;\n color: #666;\n font-size: 1.5em;\n line-height: 1;\n width: 24px;\n height: 24px;\n padding: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: none;\n background: none;\n}\n\n._468ff1da37ead40a:hover {\n color: #333;\n background-color: #f0f0f0;\n border-radius: 3px;\n}\n\n._468ff1da37ead40a:focus-visible {\n outline: 2px solid rgb(160, 207, 255);\n outline-offset: -2px;\n}\n\n._da3b3b2a4aeed1ee {\n flex: 1;\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n._61879ba330d9a71c {\n margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.obf.vue'\n\nexport { default as DialogView } from './DialogView.obf.vue'\n\nexport const DialogViewPlugin: Plugin = {\n install: (app: App) => {\n app.component('DialogView', DialogViewComponent)\n }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogClose","nextTick","closedBy","computed","watch","newValue","onMounted","onBeforeUnmount","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_cache","_withModifiers","$event","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":";;;;;;;;;;;;;;;;;;AA0CA,UAAMA,IAAQC,GAORC,IAAOC,GAKPC,IAAYC,EAA8B,IAAI,GAE9CC,IAAa,MAAY;AAC7B,MAAAJ,EAAK,qBAAqB,EAAI;AAAA,IAChC,GAEMK,IAAc,MAAY;AAC9B,MAAAL,EAAK,qBAAqB,EAAK;AAAA,IACjC,GAEMM,IAAoB,MAAY;AACpC,UAAI,CAACR,EAAM,YACLA,EAAM,YAAY;AAGpB,QAAAS,EAAS,MAAM;AACb,UAAIL,EAAU,SAAS,CAACA,EAAU,MAAM,QAAMA,EAAU,MAAM,UAAA;AAAA,QAChE,CAAC;AACD;AAAA,MACF;AAEF,MAAIJ,EAAM,cACRE,EAAK,qBAAqB,EAAK,GAEjCO,EAAS,MAAM;AACb,QAAIT,EAAM,cAEJI,EAAU,SAAS,CAACA,EAAU,MAAM,QAAMA,EAAU,MAAM,UAAA;AAAA,MAElE,CAAC,GACDF,EAAK,QAAQ;AAAA,IACf,GAEMQ,IAAWC,EAAS,MAAMX,EAAM,WAAYA,EAAM,mBAAmB,QAAQ,iBAAkB,MAAM;AAE3G,WAAAY,EAAM,MAAMZ,EAAM,YAAY,OAAOa,MAAsB;AACzD,YAAMJ,EAAA,GAEFI,IACET,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA,IAGdA,EAAU,SAASA,EAAU,MAAM,QACrCA,EAAU,MAAM,MAAA;AAAA,IAGtB,CAAC,GAEDU,EAAU,MAAM;AACd,MAAId,EAAM,cACJI,EAAU,SAAS,CAACA,EAAU,MAAM,QACtCA,EAAU,MAAM,UAAA;AAAA,IAGtB,CAAC,GAEDW,EAAgB,MAAM;AACpB,MAAIX,EAAU,SAASA,EAAU,MAAM,QACrCA,EAAU,MAAM,MAAA;AAAA,IAEpB,CAAC,GAEDY,EAAa;AAAA,MACX,MAAMV;AAAA,MACN,OAAOC;AAAA,IAAA,CACR,cAvHCU,EAAA,GAAAC,EA2BS,UA3BTC,EA2BS;AAAA,eA1BH;AAAA,MAAJ,KAAIf;AAAA,MACJ,OAAM;AAAA,IAAA,GACEgB,EAAAA,QAAM;AAAA,MACb,SAAOZ;AAAA,MACP,UAAUE,EAAA;AAAA,IAAA;MAEAT,EAAA,gBAAXgB,EAAA,GAAAC,EAWM,OAXNG,GAWM;AAAA,QAVJC,EAEO,QAFPC,GAEO;AAAA,UADLC,EAA0BC,EAAA,QAAA,OAAA;AAAA,QAAA;QAGpBxB,EAAA,mBAAmBA,EAAA,iBAD3BiB,EAMiB,UAAA;AAAA;UAJf,MAAK;AAAA,UACL,cAAW;AAAA,UACX,OAAM;AAAA,UACL,SAAKQ,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAAA,CAAAC,MAAUxB,EAAA,OAAW,MAAA,GAAK,CAAA,SAAA,CAAA;AAAA,QAAA,GACjC,GAAO;;MAGVkB,EAEM,OAFNO,GAEM;AAAA,QADJL,EAAaC,EAAA,QAAA,SAAA;AAAA,MAAA;MAGJK,EAAAA,OAAO,UAAlBb,KAAAC,EAEM,OAFNa,GAEM;AAAA,QADJP,EAA2BC,EAAA,QAAA,QAAA;AAAA,MAAA;;;ICrBpBO,IAA2B;AAAA,EACtC,SAAS,CAACC,MAAa;AACrB,IAAAA,EAAI,UAAU,cAAcC,CAAmB;AAAA,EACjD;AACF;"}
1
+ {"version":3,"file":"cssless-obfuscated.es.js","sources":["../src/DialogView.obf.vue","../src/index.ts"],"sourcesContent":["<template>\n <dialog\n ref=\"dialogRef\"\n class=\"_b4102a3b79656a37\"\n v-bind=\"$attrs\"\n @close=\"handleDialogClose\"\n @cancel=\"handleDialogCancel\"\n :closedBy=\"closedBy\"\n >\n <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n <span class=\"_088d860d2fd75292\">\n <slot name=\"title\"></slot>\n </span>\n <button\n v-if=\"showCloseButton && closable\"\n type=\"button\"\n aria-label=\"Close the dialog\"\n class=\"_468ff1da37ead40a\"\n @click.prevent=\"closeDialog\"\n >&times;</button>\n </div>\n \n <div class=\"_da3b3b2a4aeed1ee\">\n <slot></slot>\n </div>\n\n <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n <slot name=\"footer\"></slot>\n </div>\n </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n modelValue: boolean\n showTitleBar?: boolean\n showCloseButton?: boolean\n closable?: boolean\n closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n showTitleBar: true,\n showCloseButton: true,\n closable: true,\n closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: boolean): void\n (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n e.preventDefault();\n if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n if (ignoreCloseEvent.value) return;\n if (!props.closable) {\n if (props.modelValue) {\n // not programmatically close\n // re-open the dialog\n nextTick(() => {\n if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n return;\n }\n }\n if (props.modelValue) {\n emit('update:modelValue', false)\n }\n nextTick(() => {\n if (props.modelValue) {\n // model value keep unchanged\n if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n }\n })\n emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n await nextTick()\n \n if (newValue) {\n if (dialogRef.value && !dialogRef.value.open) {\n dialogRef.value.showModal()\n }\n } else {\n if (dialogRef.value && dialogRef.value.open) {\n dialogRef.value.close()\n }\n }\n})\n\nconst initDialog = () => {\n if (props.modelValue) {\n if (dialogRef.value && !dialogRef.value.open) {\n dialogRef.value.showModal()\n }\n }\n};\n\nonMounted(() => {\n initDialog();\n});\n\nonBeforeUnmount(() => {\n if (dialogRef.value && dialogRef.value.open) {\n dialogRef.value.close()\n }\n});\n\nonDeactivated(() => {\n if (dialogRef.value && dialogRef.value.open) {\n ignoreCloseEvent.value = true;\n dialogRef.value.close();\n nextTick(() => ignoreCloseEvent.value = false);\n }\n});\n\nonActivated(() => {\n initDialog();\n});\n\ndefineExpose({\n get: () => dialogRef.value,\n open: openDialog,\n close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n padding: var(--dialog-padding, 20px);\n border-radius: 5px;\n border: 1px solid gray;\n outline: 0 !important;\n max-width: calc(100% - 2em);\n max-height: calc(100% - 2em);\n box-sizing: border-box;\n overflow: hidden;\n}\n\n._b4102a3b79656a37[open] {\n display: flex;\n flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n background: rgba(0, 0, 0, 0.5);\n}\n\n._4d394b1507fdc584 {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 0.5em;\n min-height: var(--dialog-title-height, 24px);\n white-space: pre;\n overflow: hidden;\n user-select: none;\n}\n\n._088d860d2fd75292 {\n flex: 1;\n text-align: center;\n font-weight: bold;\n font-size: large;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n._468ff1da37ead40a {\n margin-left: 0.5em;\n text-decoration: none;\n color: #666;\n font-size: 1.5em;\n line-height: 1;\n width: 24px;\n height: 24px;\n padding: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: none;\n background: none;\n}\n\n._468ff1da37ead40a:hover {\n color: #333;\n background-color: #f0f0f0;\n border-radius: 3px;\n}\n\n._468ff1da37ead40a:focus-visible {\n outline: 2px solid rgb(160, 207, 255);\n outline-offset: -2px;\n}\n\n._da3b3b2a4aeed1ee {\n flex: 1;\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n._61879ba330d9a71c {\n margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.obf.vue'\n\nexport { default as DialogView } from './DialogView.obf.vue'\n\nexport const DialogViewPlugin: Plugin = {\n install: (app: App) => {\n app.component('DialogView', DialogViewComponent)\n }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","ignoreCloseEvent","handleDialogClose","nextTick","closedBy","computed","watch","newValue","initDialog","onMounted","onBeforeUnmount","onDeactivated","onActivated","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- (function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.DialogView={},l.Vue))})(this,(function(l,e){"use strict";const u=["closedBy"],f={key:0,class:"_4d394b1507fdc584"},r={class:"_088d860d2fd75292"},m={class:"_da3b3b2a4aeed1ee"},p={key:1,class:"_61879ba330d9a71c"},i=e.defineComponent({__name:"DialogView.obf",props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0},closable:{type:Boolean,default:!0},closeOnClickMask:{type:Boolean,default:!1}},emits:["update:modelValue","closed"],setup(n,{expose:V,emit:B}){const t=n,s=B,o=e.ref(null),k=()=>{s("update:modelValue",!0)},h=()=>{s("update:modelValue",!1)},y=()=>{if(!t.closable&&t.modelValue){e.nextTick(()=>{o.value&&!o.value.open&&o.value.showModal()});return}t.modelValue&&s("update:modelValue",!1),e.nextTick(()=>{t.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),s("closed")},g=e.computed(()=>t.closable?t.closeOnClickMask?"any":"closerequest":"none");return e.watch(()=>t.modelValue,async a=>{await e.nextTick(),a?o.value&&!o.value.open&&o.value.showModal():o.value&&o.value.open&&o.value.close()}),e.onMounted(()=>{t.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),e.onBeforeUnmount(()=>{o.value&&o.value.open&&o.value.close()}),V({open:k,close:h}),(a,c)=>(e.openBlock(),e.createElementBlock("dialog",e.mergeProps({ref_key:"dialogRef",ref:o,class:"_b4102a3b79656a37"},a.$attrs,{onClose:y,closedBy:g.value}),[n.showTitleBar?(e.openBlock(),e.createElementBlock("div",f,[e.createElementVNode("span",r,[e.renderSlot(a.$slots,"title")]),n.showCloseButton&&n.closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button","aria-label":"Close the dialog",class:"_468ff1da37ead40a",onClick:c[0]||(c[0]=e.withModifiers(w=>o.value?.close(),["prevent"]))},"Γ—")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",m,[e.renderSlot(a.$slots,"default")]),a.$slots.footer?(e.openBlock(),e.createElementBlock("div",p,[e.renderSlot(a.$slots,"footer")])):e.createCommentVNode("",!0)],16,u))}}),d={install:n=>{n.component("DialogView",i)}};l.DialogView=i,l.DialogViewPlugin=d,l.default=d,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
1
+ (function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.DialogView={},l.Vue))})(this,(function(l,e){"use strict";const r=["closedBy"],m={key:0,class:"_4d394b1507fdc584"},p={class:"_088d860d2fd75292"},h={class:"_da3b3b2a4aeed1ee"},V={key:1,class:"_61879ba330d9a71c"},c=e.defineComponent({__name:"DialogView.obf",props:{modelValue:{type:Boolean},showTitleBar:{type:Boolean,default:!0},showCloseButton:{type:Boolean,default:!0},closable:{type:Boolean,default:!0},closeOnClickMask:{type:Boolean,default:!1}},emits:["update:modelValue","closed"],setup(n,{expose:g,emit:k}){const a=n,s=k,o=e.ref(),B=()=>{s("update:modelValue",!0)},i=()=>{s("update:modelValue",!1)},y=t=>{t.preventDefault(),a.closable&&i()},d=e.ref(!1),b=()=>{if(!d.value){if(!a.closable&&a.modelValue){e.nextTick(()=>{o.value&&!o.value.open&&o.value.showModal()});return}a.modelValue&&s("update:modelValue",!1),e.nextTick(()=>{a.modelValue&&o.value&&!o.value.open&&o.value.showModal()}),s("closed")}},w=e.computed(()=>a.closable?a.closeOnClickMask?"any":"closerequest":"none");e.watch(()=>a.modelValue,async t=>{await e.nextTick(),t?o.value&&!o.value.open&&o.value.showModal():o.value&&o.value.open&&o.value.close()});const u=()=>{a.modelValue&&o.value&&!o.value.open&&o.value.showModal()};return e.onMounted(()=>{u()}),e.onBeforeUnmount(()=>{o.value&&o.value.open&&o.value.close()}),e.onDeactivated(()=>{o.value&&o.value.open&&(d.value=!0,o.value.close(),e.nextTick(()=>d.value=!1))}),e.onActivated(()=>{u()}),g({get:()=>o.value,open:B,close:i}),(t,C)=>(e.openBlock(),e.createElementBlock("dialog",e.mergeProps({ref_key:"dialogRef",ref:o,class:"_b4102a3b79656a37"},t.$attrs,{onClose:b,onCancel:y,closedBy:w.value}),[n.showTitleBar?(e.openBlock(),e.createElementBlock("div",m,[e.createElementVNode("span",p,[e.renderSlot(t.$slots,"title")]),n.showCloseButton&&n.closable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button","aria-label":"Close the dialog",class:"_468ff1da37ead40a",onClick:e.withModifiers(i,["prevent"])},"Γ—")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",h,[e.renderSlot(t.$slots,"default")]),t.$slots.footer?(e.openBlock(),e.createElementBlock("div",V,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)],16,r))}}),f={install:n=>{n.component("DialogView",c)}};l.DialogView=c,l.DialogViewPlugin=f,l.default=f,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
2
2
  //# sourceMappingURL=cssless-obfuscated.umd.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"cssless-obfuscated.umd.js","sources":["../src/DialogView.obf.vue","../src/index.ts"],"sourcesContent":["<template>\n <dialog\n ref=\"dialogRef\"\n class=\"_b4102a3b79656a37\"\n v-bind=\"$attrs\"\n @close=\"handleDialogClose\"\n :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=\"dialogRef?.close()\"\n >&times;</button>\n </div>\n \n <div class=\"_da3b3b2a4aeed1ee\">\n <slot></slot>\n </div>\n\n <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n <slot name=\"footer\"></slot>\n </div>\n </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'\n\ninterface Props {\n modelValue: boolean\n showTitleBar?: boolean\n showCloseButton?: boolean\n closable?: boolean\n closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n showTitleBar: true,\n showCloseButton: true,\n closable: true,\n closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: boolean): void\n (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement | null>(null)\n\nconst openDialog = (): void => {\n emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n emit('update:modelValue', false)\n}\n\nconst handleDialogClose = (): void => {\n if (!props.closable) {\n if (props.modelValue) {\n // not programmatically close\n // re-open the dialog\n nextTick(() => {\n if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n return;\n }\n }\n if (props.modelValue) {\n emit('update:modelValue', false)\n }\n nextTick(() => {\n if (props.modelValue) {\n // model value keep unchanged\n if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n }\n })\n emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n await nextTick()\n \n if (newValue) {\n if (dialogRef.value && !dialogRef.value.open) {\n dialogRef.value.showModal()\n }\n } else {\n if (dialogRef.value && dialogRef.value.open) {\n dialogRef.value.close()\n }\n }\n})\n\nonMounted(() => {\n if (props.modelValue) {\n if (dialogRef.value && !dialogRef.value.open) {\n dialogRef.value.showModal()\n }\n }\n});\n\nonBeforeUnmount(() => {\n if (dialogRef.value && dialogRef.value.open) {\n dialogRef.value.close()\n }\n});\n\ndefineExpose({\n open: openDialog,\n close: closeDialog,\n})\n</script>\n\n<style>\n._b4102a3b79656a37 {\n padding: var(--dialog-padding, 20px);\n border-radius: 5px;\n border: 1px solid gray;\n outline: 0 !important;\n max-width: calc(100% - 2em);\n max-height: calc(100% - 2em);\n box-sizing: border-box;\n overflow: hidden;\n}\n\n._b4102a3b79656a37[open] {\n display: flex;\n flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n background: rgba(0, 0, 0, 0.5);\n}\n\n._4d394b1507fdc584 {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 0.5em;\n min-height: var(--dialog-title-height, 24px);\n white-space: pre;\n overflow: hidden;\n user-select: none;\n}\n\n._088d860d2fd75292 {\n flex: 1;\n text-align: center;\n font-weight: bold;\n font-size: large;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n._468ff1da37ead40a {\n margin-left: 0.5em;\n text-decoration: none;\n color: #666;\n font-size: 1.5em;\n line-height: 1;\n width: 24px;\n height: 24px;\n padding: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: none;\n background: none;\n}\n\n._468ff1da37ead40a:hover {\n color: #333;\n background-color: #f0f0f0;\n border-radius: 3px;\n}\n\n._468ff1da37ead40a:focus-visible {\n outline: 2px solid rgb(160, 207, 255);\n outline-offset: -2px;\n}\n\n._da3b3b2a4aeed1ee {\n flex: 1;\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n._61879ba330d9a71c {\n margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.obf.vue'\n\nexport { default as DialogView } from './DialogView.obf.vue'\n\nexport const DialogViewPlugin: Plugin = {\n install: (app: App) => {\n app.component('DialogView', DialogViewComponent)\n }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogClose","nextTick","closedBy","computed","watch","newValue","onMounted","onBeforeUnmount","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_cache","_withModifiers","$event","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":"usBA0CA,MAAMA,EAAQC,EAORC,EAAOC,EAKPC,EAAYC,EAAAA,IAA8B,IAAI,EAE9CC,EAAa,IAAY,CAC7BJ,EAAK,oBAAqB,EAAI,CAChC,EAEMK,EAAc,IAAY,CAC9BL,EAAK,oBAAqB,EAAK,CACjC,EAEMM,EAAoB,IAAY,CACpC,GAAI,CAACR,EAAM,UACLA,EAAM,WAAY,CAGpBS,EAAAA,SAAS,IAAM,CACTL,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAChE,CAAC,EACD,MACF,CAEEJ,EAAM,YACRE,EAAK,oBAAqB,EAAK,EAEjCO,EAAAA,SAAS,IAAM,CACTT,EAAM,YAEJI,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAElE,CAAC,EACDF,EAAK,QAAQ,CACf,EAEMQ,EAAWC,WAAS,IAAMX,EAAM,SAAYA,EAAM,iBAAmB,MAAQ,eAAkB,MAAM,EAE3GY,OAAAA,EAAAA,MAAM,IAAMZ,EAAM,WAAY,MAAOa,GAAsB,CACzD,MAAMJ,WAAA,EAEFI,EACET,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,EAGdA,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAGtB,CAAC,EAEDU,EAAAA,UAAU,IAAM,CACVd,EAAM,YACJI,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAGtB,CAAC,EAEDW,EAAAA,gBAAgB,IAAM,CAChBX,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAEpB,CAAC,EAEDY,EAAa,CACX,KAAMV,EACN,MAAOC,CAAA,CACR,UAvHCU,YAAA,EAAAC,qBA2BS,SA3BTC,EAAAA,WA2BS,SA1BH,YAAJ,IAAIf,EACJ,MAAM,mBAAA,EACEgB,EAAAA,OAAM,CACb,QAAOZ,EACP,SAAUE,EAAA,KAAA,IAEAT,EAAA,cAAXgB,EAAAA,UAAA,EAAAC,EAAAA,mBAWM,MAXNG,EAWM,CAVJC,EAAAA,mBAEO,OAFPC,EAEO,CADLC,aAA0BC,EAAA,OAAA,OAAA,CAAA,GAGpBxB,EAAA,iBAAmBA,EAAA,wBAD3BiB,EAAAA,mBAMiB,SAAA,OAJf,KAAK,SACL,aAAW,mBACX,MAAM,oBACL,QAAKQ,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,EAAAA,cAAAC,GAAUxB,EAAA,OAAW,MAAA,EAAK,CAAA,SAAA,CAAA,EAAA,EACjC,GAAO,8DAGVkB,EAAAA,mBAEM,MAFNO,EAEM,CADJL,aAAaC,EAAA,OAAA,SAAA,CAAA,GAGJK,EAAAA,OAAO,QAAlBb,EAAAA,YAAAC,EAAAA,mBAEM,MAFNa,EAEM,CADJP,aAA2BC,EAAA,OAAA,QAAA,CAAA,2CCrBpBO,EAA2B,CACtC,QAAUC,GAAa,CACrBA,EAAI,UAAU,aAAcC,CAAmB,CACjD,CACF"}
1
+ {"version":3,"file":"cssless-obfuscated.umd.js","sources":["../src/DialogView.obf.vue","../src/index.ts"],"sourcesContent":["<template>\n <dialog\n ref=\"dialogRef\"\n class=\"_b4102a3b79656a37\"\n v-bind=\"$attrs\"\n @close=\"handleDialogClose\"\n @cancel=\"handleDialogCancel\"\n :closedBy=\"closedBy\"\n >\n <div v-if=\"showTitleBar\" class=\"_4d394b1507fdc584\">\n <span class=\"_088d860d2fd75292\">\n <slot name=\"title\"></slot>\n </span>\n <button\n v-if=\"showCloseButton && closable\"\n type=\"button\"\n aria-label=\"Close the dialog\"\n class=\"_468ff1da37ead40a\"\n @click.prevent=\"closeDialog\"\n >&times;</button>\n </div>\n \n <div class=\"_da3b3b2a4aeed1ee\">\n <slot></slot>\n </div>\n\n <div v-if=\"$slots.footer\" class=\"_61879ba330d9a71c\">\n <slot name=\"footer\"></slot>\n </div>\n </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, onDeactivated, onActivated } from 'vue'\n\ninterface Props {\n modelValue: boolean\n showTitleBar?: boolean\n showCloseButton?: boolean\n closable?: boolean\n closeOnClickMask?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n showTitleBar: true,\n showCloseButton: true,\n closable: true,\n closeOnClickMask: false,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: boolean): void\n (e: 'closed'): void\n}>()\n\nconst dialogRef = ref<HTMLDialogElement>();\n\nconst openDialog = (): void => {\n emit('update:modelValue', true)\n}\n\nconst closeDialog = (): void => {\n emit('update:modelValue', false)\n}\n\nconst handleDialogCancel = (e: Event) => {\n e.preventDefault();\n if (props.closable) closeDialog();\n}\n\nconst ignoreCloseEvent = ref(false);\n\nconst handleDialogClose = (): void => {\n if (ignoreCloseEvent.value) return;\n if (!props.closable) {\n if (props.modelValue) {\n // not programmatically close\n // re-open the dialog\n nextTick(() => {\n if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n }) // Avoid using 'cancel' event because some browsers handle it incorrectly, see https://issues.chromium.org/issues/41491338\n return;\n }\n }\n if (props.modelValue) {\n emit('update:modelValue', false)\n }\n nextTick(() => {\n if (props.modelValue) {\n // model value keep unchanged\n if (dialogRef.value && !dialogRef.value.open) dialogRef.value.showModal()\n }\n })\n emit('closed')\n}\n\nconst closedBy = computed(() => props.closable ? (props.closeOnClickMask ? 'any' : 'closerequest') : 'none') // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy\n\nwatch(() => props.modelValue, async (newValue: boolean) => {\n await nextTick()\n \n if (newValue) {\n if (dialogRef.value && !dialogRef.value.open) {\n dialogRef.value.showModal()\n }\n } else {\n if (dialogRef.value && dialogRef.value.open) {\n dialogRef.value.close()\n }\n }\n})\n\nconst initDialog = () => {\n if (props.modelValue) {\n if (dialogRef.value && !dialogRef.value.open) {\n dialogRef.value.showModal()\n }\n }\n};\n\nonMounted(() => {\n initDialog();\n});\n\nonBeforeUnmount(() => {\n if (dialogRef.value && dialogRef.value.open) {\n dialogRef.value.close()\n }\n});\n\nonDeactivated(() => {\n if (dialogRef.value && dialogRef.value.open) {\n ignoreCloseEvent.value = true;\n dialogRef.value.close();\n nextTick(() => ignoreCloseEvent.value = false);\n }\n});\n\nonActivated(() => {\n initDialog();\n});\n\ndefineExpose({\n get: () => dialogRef.value,\n open: openDialog,\n close: closeDialog,\n});\n</script>\n\n<style>\n._b4102a3b79656a37 {\n padding: var(--dialog-padding, 20px);\n border-radius: 5px;\n border: 1px solid gray;\n outline: 0 !important;\n max-width: calc(100% - 2em);\n max-height: calc(100% - 2em);\n box-sizing: border-box;\n overflow: hidden;\n}\n\n._b4102a3b79656a37[open] {\n display: flex;\n flex-direction: column;\n}\n\n._b4102a3b79656a37::backdrop {\n background: rgba(0, 0, 0, 0.5);\n}\n\n._4d394b1507fdc584 {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 0.5em;\n min-height: var(--dialog-title-height, 24px);\n white-space: pre;\n overflow: hidden;\n user-select: none;\n}\n\n._088d860d2fd75292 {\n flex: 1;\n text-align: center;\n font-weight: bold;\n font-size: large;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n._468ff1da37ead40a {\n margin-left: 0.5em;\n text-decoration: none;\n color: #666;\n font-size: 1.5em;\n line-height: 1;\n width: 24px;\n height: 24px;\n padding: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: none;\n background: none;\n}\n\n._468ff1da37ead40a:hover {\n color: #333;\n background-color: #f0f0f0;\n border-radius: 3px;\n}\n\n._468ff1da37ead40a:focus-visible {\n outline: 2px solid rgb(160, 207, 255);\n outline-offset: -2px;\n}\n\n._da3b3b2a4aeed1ee {\n flex: 1;\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n._61879ba330d9a71c {\n margin-top: 0.5em;\n}\n</style>\n","import { App, Plugin } from 'vue'\nimport DialogViewComponent from './DialogView.obf.vue'\n\nexport { default as DialogView } from './DialogView.obf.vue'\n\nexport const DialogViewPlugin: Plugin = {\n install: (app: App) => {\n app.component('DialogView', DialogViewComponent)\n }\n}\n\nexport default DialogViewPlugin\n"],"names":["props","__props","emit","__emit","dialogRef","ref","openDialog","closeDialog","handleDialogCancel","e","ignoreCloseEvent","handleDialogClose","nextTick","closedBy","computed","watch","newValue","initDialog","onMounted","onBeforeUnmount","onDeactivated","onActivated","__expose","_openBlock","_createElementBlock","_mergeProps","$attrs","_hoisted_2","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$slots","_hoisted_5","DialogViewPlugin","app","DialogViewComponent"],"mappings":"usBA2CA,MAAMA,EAAQC,EAORC,EAAOC,EAKPC,EAAYC,EAAAA,IAAA,EAEZC,EAAa,IAAY,CAC7BJ,EAAK,oBAAqB,EAAI,CAChC,EAEMK,EAAc,IAAY,CAC9BL,EAAK,oBAAqB,EAAK,CACjC,EAEMM,EAAsBC,GAAa,CACvCA,EAAE,eAAA,EACET,EAAM,UAAUO,EAAA,CACtB,EAEMG,EAAmBL,EAAAA,IAAI,EAAK,EAE5BM,EAAoB,IAAY,CACpC,GAAI,CAAAD,EAAiB,MACrB,IAAI,CAACV,EAAM,UACLA,EAAM,WAAY,CAGpBY,EAAAA,SAAS,IAAM,CACTR,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAChE,CAAC,EACD,MACF,CAEEJ,EAAM,YACRE,EAAK,oBAAqB,EAAK,EAEjCU,EAAAA,SAAS,IAAM,CACTZ,EAAM,YAEJI,EAAU,OAAS,CAACA,EAAU,MAAM,MAAMA,EAAU,MAAM,UAAA,CAElE,CAAC,EACDF,EAAK,QAAQ,EACf,EAEMW,EAAWC,WAAS,IAAMd,EAAM,SAAYA,EAAM,iBAAmB,MAAQ,eAAkB,MAAM,EAE3Ge,EAAAA,MAAM,IAAMf,EAAM,WAAY,MAAOgB,GAAsB,CACzD,MAAMJ,WAAA,EAEFI,EACEZ,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,EAGdA,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAGtB,CAAC,EAED,MAAMa,EAAa,IAAM,CACnBjB,EAAM,YACJI,EAAU,OAAS,CAACA,EAAU,MAAM,MACtCA,EAAU,MAAM,UAAA,CAGtB,EAEAc,OAAAA,EAAAA,UAAU,IAAM,CACdD,EAAA,CACF,CAAC,EAEDE,EAAAA,gBAAgB,IAAM,CAChBf,EAAU,OAASA,EAAU,MAAM,MACrCA,EAAU,MAAM,MAAA,CAEpB,CAAC,EAEDgB,EAAAA,cAAc,IAAM,CACdhB,EAAU,OAASA,EAAU,MAAM,OACrCM,EAAiB,MAAQ,GACzBN,EAAU,MAAM,MAAA,EAChBQ,EAAAA,SAAS,IAAMF,EAAiB,MAAQ,EAAK,EAEjD,CAAC,EAEDW,EAAAA,YAAY,IAAM,CAChBJ,EAAA,CACF,CAAC,EAEDK,EAAa,CACX,IAAK,IAAMlB,EAAU,MACrB,KAAME,EACN,MAAOC,CAAA,CACR,UAjJCgB,YAAA,EAAAC,qBA4BS,SA5BTC,EAAAA,WA4BS,SA3BH,YAAJ,IAAIrB,EACJ,MAAM,mBAAA,EACEsB,EAAAA,OAAM,CACb,QAAOf,EACP,SAAQH,EACR,SAAUK,EAAA,KAAA,IAEAZ,EAAA,cAAXsB,EAAAA,UAAA,EAAAC,EAAAA,mBAWM,MAXNG,EAWM,CAVJC,EAAAA,mBAEO,OAFPC,EAEO,CADLC,aAA0BC,EAAA,OAAA,OAAA,CAAA,GAGpB9B,EAAA,iBAAmBA,EAAA,wBAD3BuB,EAAAA,mBAMiB,SAAA,OAJf,KAAK,SACL,aAAW,mBACX,MAAM,oBACL,wBAAejB,EAAW,CAAA,SAAA,CAAA,CAAA,EAC5B,GAAO,8DAGVqB,EAAAA,mBAEM,MAFNI,EAEM,CADJF,aAAaC,EAAA,OAAA,SAAA,CAAA,GAGJE,EAAAA,OAAO,QAAlBV,EAAAA,YAAAC,EAAAA,mBAEM,MAFNU,EAEM,CADJJ,aAA2BC,EAAA,OAAA,QAAA,CAAA,2CCtBpBI,EAA2B,CACtC,QAAUC,GAAa,CACrBA,EAAI,UAAU,aAAcC,CAAmB,CACjD,CACF"}