@fiscozen/dialog 0.1.20 → 0.1.21
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/package.json +6 -6
- package/src/FzDialog.vue +27 -23
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fiscozen/dialog",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.21",
|
|
4
4
|
"description": "Design System Dialog component",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"type": "module",
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
"peerDependencies": {
|
|
10
10
|
"tailwindcss": "^3.4.1",
|
|
11
11
|
"vue": "^3.4.13",
|
|
12
|
-
"@fiscozen/style": "^0.1.
|
|
13
|
-
"@fiscozen/composables": "^0.1.
|
|
12
|
+
"@fiscozen/style": "^0.1.2",
|
|
13
|
+
"@fiscozen/composables": "^0.1.30",
|
|
14
14
|
"@fiscozen/button": "^0.1.7"
|
|
15
15
|
},
|
|
16
16
|
"devDependencies": {
|
|
@@ -32,13 +32,13 @@
|
|
|
32
32
|
"vitest": "^1.2.0",
|
|
33
33
|
"vue-tsc": "^1.8.25",
|
|
34
34
|
"@fiscozen/eslint-config": "^0.1.0",
|
|
35
|
-
"@fiscozen/
|
|
36
|
-
"@fiscozen/
|
|
35
|
+
"@fiscozen/tsconfig": "^0.1.0",
|
|
36
|
+
"@fiscozen/prettier-config": "^0.1.0"
|
|
37
37
|
},
|
|
38
38
|
"license": "MIT",
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"dialog-polyfill": "^0.5.6",
|
|
41
|
-
"@fiscozen/composables": "^0.1.
|
|
41
|
+
"@fiscozen/composables": "^0.1.30"
|
|
42
42
|
},
|
|
43
43
|
"scripts": {
|
|
44
44
|
"coverage": "vitest run --coverage",
|
package/src/FzDialog.vue
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
>
|
|
17
17
|
<slot name="header"></slot>
|
|
18
18
|
</div>
|
|
19
|
-
<div :class="['grow p-12', bodyClasses]">
|
|
19
|
+
<div :class="['grow p-12 overflow-auto', bodyClasses]">
|
|
20
20
|
<slot name="body"></slot>
|
|
21
21
|
</div>
|
|
22
22
|
<div
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
</template>
|
|
32
32
|
|
|
33
33
|
<script setup lang="ts">
|
|
34
|
-
import {
|
|
34
|
+
import {computed, onMounted, onUnmounted, ref, watch} from "vue";
|
|
35
35
|
import { FzDialogProps } from "./types";
|
|
36
36
|
import { useKeyUp } from "@fiscozen/composables";
|
|
37
37
|
import { useClickOutside } from "@fiscozen/composables";
|
|
@@ -50,18 +50,28 @@ const innerDialog = ref<HTMLDivElement>();
|
|
|
50
50
|
const visible = ref(false);
|
|
51
51
|
const shouldRender = ref(false);
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
function updateInnerHeightVar() {
|
|
54
|
+
dialog.value?.style.setProperty('--innerHeight', `${window.innerHeight}px`);
|
|
55
|
+
}
|
|
54
56
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
57
|
+
function handleDialogRendered() {
|
|
58
|
+
updateInnerHeightVar();
|
|
59
|
+
dialogPolyfill.registerDialog(dialog.value!);
|
|
60
|
+
dialog.value!.show();
|
|
61
|
+
visible.value = true;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
onMounted(() => {
|
|
65
|
+
window.addEventListener('resize', updateInnerHeightVar);
|
|
66
|
+
});
|
|
60
67
|
|
|
68
|
+
onUnmounted(() => {
|
|
69
|
+
window.removeEventListener('resize', updateInnerHeightVar);
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
const showModal = () => {
|
|
61
73
|
if (props.shouldAlwaysRender) {
|
|
62
|
-
|
|
63
|
-
dialog.value!.show();
|
|
64
|
-
visible.value = true;
|
|
74
|
+
handleDialogRendered();
|
|
65
75
|
} else {
|
|
66
76
|
shouldRender.value = true;
|
|
67
77
|
}
|
|
@@ -80,9 +90,7 @@ function handleModalClose() {
|
|
|
80
90
|
|
|
81
91
|
watch(dialog, (dialog) => {
|
|
82
92
|
if (dialog && shouldRender.value) {
|
|
83
|
-
|
|
84
|
-
dialog.show();
|
|
85
|
-
visible.value = true;
|
|
93
|
+
handleDialogRendered();
|
|
86
94
|
}
|
|
87
95
|
});
|
|
88
96
|
|
|
@@ -112,7 +120,7 @@ const handleKeyUp = (e: KeyboardEvent) => {
|
|
|
112
120
|
|
|
113
121
|
useKeyUp(handleKeyUp);
|
|
114
122
|
|
|
115
|
-
const staticClasses = "flex flex-col bg-core-white
|
|
123
|
+
const staticClasses = "flex flex-col bg-core-white";
|
|
116
124
|
const dialogStaticClasses = "border-1 rounded border-grey-100 p-0";
|
|
117
125
|
|
|
118
126
|
const dialogClasses = computed(() => {
|
|
@@ -132,18 +140,18 @@ const dialogClasses = computed(() => {
|
|
|
132
140
|
|
|
133
141
|
const classes = computed(() => {
|
|
134
142
|
if (props.isDrawer) {
|
|
135
|
-
return "w-[480px]";
|
|
143
|
+
return "w-[480px] h-dvh";
|
|
136
144
|
}
|
|
137
145
|
|
|
138
146
|
switch (props.size) {
|
|
139
147
|
case "sm":
|
|
140
148
|
return "w-[320px] min-h-[200px] max-h-[432px]";
|
|
141
149
|
case "md":
|
|
142
|
-
return "w-dvw sm:w-[480px] min-h-[300px] sm:max-h-[600px] sm:h-auto";
|
|
150
|
+
return "w-dvw sm:w-[480px] min-h-[300px] sm:max-h-[600px] h-dvh sm:h-auto";
|
|
143
151
|
case "lg":
|
|
144
|
-
return "w-dvw md:w-[640px] min-h-[300px] md:max-h-[600px] md:h-auto";
|
|
152
|
+
return "w-dvw md:w-[640px] min-h-[300px] md:max-h-[600px] h-dvh md:h-auto";
|
|
145
153
|
case "xl":
|
|
146
|
-
return "w-dvw xl:w-[960px] min-h-[400px] xl:max-h-[600px] xl:h-auto";
|
|
154
|
+
return "w-dvw xl:w-[960px] min-h-[400px] xl:max-h-[600px] h-dvh xl:h-auto";
|
|
147
155
|
}
|
|
148
156
|
});
|
|
149
157
|
</script>
|
|
@@ -158,8 +166,4 @@ dialog::backdrop {
|
|
|
158
166
|
top: 0;
|
|
159
167
|
left: 0;
|
|
160
168
|
}
|
|
161
|
-
.max-h-dvh-fallback {
|
|
162
|
-
max-height: calc(100vh - 48px); /** If dvh is supported, this gets overridden */
|
|
163
|
-
max-height: 100dvh;
|
|
164
|
-
}
|
|
165
169
|
</style>
|