@fiscozen/dialog 0.1.0 → 0.1.2
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 +1 -1
- package/src/FzConfirmDialog.vue +53 -24
- package/src/FzDialog.vue +21 -25
- package/src/__test__/__snapshots__/FzDialog.test.ts.snap +30 -30
- package/src/types.ts +39 -0
package/package.json
CHANGED
package/src/FzConfirmDialog.vue
CHANGED
|
@@ -1,28 +1,48 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<FzDialog v-bind="props" ref="dialog">
|
|
3
3
|
<template #header>
|
|
4
|
-
<
|
|
5
|
-
<div class="
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
</template>
|
|
15
|
-
<template #footer>
|
|
16
|
-
<form method="dialog" class="w-full h-full">
|
|
17
|
-
<div :class="[footerStaticClasses, footerClasses]">
|
|
18
|
-
<FzButton variant="invisible" @click.prevent="handleCancel" value="false">{{
|
|
19
|
-
cancelLabel
|
|
20
|
-
}}</FzButton>
|
|
21
|
-
<FzButton class="ml-12" @click.prevent="handleConfirm" value="true">{{
|
|
22
|
-
confirmLabel
|
|
23
|
-
}}</FzButton>
|
|
4
|
+
<slot name="header">
|
|
5
|
+
<div :class="[titleStaticClasses, titleClasses]">
|
|
6
|
+
<div class="grow h-28 font-medium">{{ title }}</div>
|
|
7
|
+
<FzIconButton
|
|
8
|
+
@click="handleCancel"
|
|
9
|
+
class="ml-12"
|
|
10
|
+
iconName="xmark"
|
|
11
|
+
size="sm"
|
|
12
|
+
variant="invisible"
|
|
13
|
+
></FzIconButton>
|
|
24
14
|
</div>
|
|
25
|
-
</
|
|
15
|
+
</slot>
|
|
16
|
+
</template>
|
|
17
|
+
<template #body>
|
|
18
|
+
<slot name="body"></slot>
|
|
19
|
+
</template>
|
|
20
|
+
<template #footer v-if="footerEnabled">
|
|
21
|
+
<slot name="footer">
|
|
22
|
+
<form method="dialog" class="w-full h-full">
|
|
23
|
+
<div
|
|
24
|
+
:class="[footerStaticClasses, footerDynamicClasses, footerClasses]"
|
|
25
|
+
>
|
|
26
|
+
<FzButton
|
|
27
|
+
v-if="cancelButtonEnabled"
|
|
28
|
+
variant="invisible"
|
|
29
|
+
@click.prevent="handleCancel"
|
|
30
|
+
value="false"
|
|
31
|
+
>
|
|
32
|
+
{{ cancelLabel }}
|
|
33
|
+
</FzButton>
|
|
34
|
+
<FzButton
|
|
35
|
+
v-if="confirmButtonEnabled"
|
|
36
|
+
class="ml-12"
|
|
37
|
+
@click.prevent="handleConfirm"
|
|
38
|
+
:disabled="disableConfirm"
|
|
39
|
+
value="true"
|
|
40
|
+
>
|
|
41
|
+
{{ confirmLabel }}
|
|
42
|
+
</FzButton>
|
|
43
|
+
</div>
|
|
44
|
+
</form>
|
|
45
|
+
</slot>
|
|
26
46
|
</template>
|
|
27
47
|
</FzDialog>
|
|
28
48
|
</template>
|
|
@@ -30,11 +50,15 @@
|
|
|
30
50
|
<script setup lang="ts">
|
|
31
51
|
import { computed, ref } from "vue";
|
|
32
52
|
import { FzIconButton, FzButton } from "@fiscozen/button";
|
|
33
|
-
import {
|
|
53
|
+
import { FzConfirmDialogProps } from "./types";
|
|
34
54
|
import FzDialog from "./FzDialog.vue";
|
|
35
55
|
|
|
36
|
-
const props = withDefaults(defineProps<
|
|
56
|
+
const props = withDefaults(defineProps<FzConfirmDialogProps>(), {
|
|
37
57
|
size: "md",
|
|
58
|
+
footerEnabled: true,
|
|
59
|
+
cancelButtonEnabled: true,
|
|
60
|
+
disableConfirm: false,
|
|
61
|
+
confirmButtonEnabled: true,
|
|
38
62
|
});
|
|
39
63
|
const emit = defineEmits(["fzmodal:confirm", "fzmodal:cancel"]);
|
|
40
64
|
|
|
@@ -52,7 +76,7 @@ const titleClasses = computed(() => {
|
|
|
52
76
|
const footerStaticClasses = [
|
|
53
77
|
"flex flex-row items-center h-32 grow justify-end",
|
|
54
78
|
];
|
|
55
|
-
const
|
|
79
|
+
const footerDynamicClasses = {
|
|
56
80
|
"h-32": !props.isDrawer,
|
|
57
81
|
"h-40": props.isDrawer,
|
|
58
82
|
};
|
|
@@ -61,6 +85,10 @@ const show = () => {
|
|
|
61
85
|
dialog.value?.show();
|
|
62
86
|
visible.value = true;
|
|
63
87
|
};
|
|
88
|
+
const close = () => {
|
|
89
|
+
dialog.value?.close();
|
|
90
|
+
visible.value = false;
|
|
91
|
+
};
|
|
64
92
|
|
|
65
93
|
const handleCancel = () => {
|
|
66
94
|
dialog.value?.close();
|
|
@@ -79,5 +107,6 @@ defineExpose({
|
|
|
79
107
|
handleConfirm,
|
|
80
108
|
visible,
|
|
81
109
|
show,
|
|
110
|
+
close,
|
|
82
111
|
});
|
|
83
112
|
</script>
|
package/src/FzDialog.vue
CHANGED
|
@@ -1,13 +1,22 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<dialog
|
|
2
|
+
<dialog
|
|
3
|
+
ref="dialog"
|
|
4
|
+
@close="visible = false"
|
|
5
|
+
:class="[dialogStaticClasses, dialogClasses]"
|
|
6
|
+
>
|
|
3
7
|
<div :class="[staticClasses, classes]">
|
|
4
|
-
<div
|
|
8
|
+
<div
|
|
9
|
+
class="flex items-center p-12 w-full border-b-1 border-grey-100 border-solid"
|
|
10
|
+
>
|
|
5
11
|
<slot name="header"></slot>
|
|
6
12
|
</div>
|
|
7
|
-
<div class="grow">
|
|
13
|
+
<div :class="['grow', bodyClasses]">
|
|
8
14
|
<slot name="body"></slot>
|
|
9
15
|
</div>
|
|
10
|
-
<div
|
|
16
|
+
<div
|
|
17
|
+
v-if="$slots.footer"
|
|
18
|
+
class="flex flex-row p-12 border-t-1 border-grey-100 items-center border-solid"
|
|
19
|
+
>
|
|
11
20
|
<slot name="footer"></slot>
|
|
12
21
|
</div>
|
|
13
22
|
</div>
|
|
@@ -20,6 +29,7 @@ import { FzDialogProps } from "./types";
|
|
|
20
29
|
|
|
21
30
|
const props = withDefaults(defineProps<FzDialogProps>(), {
|
|
22
31
|
size: "md",
|
|
32
|
+
closeOnBackdrop: true,
|
|
23
33
|
});
|
|
24
34
|
const emit = defineEmits(["confirm", "cancel"]);
|
|
25
35
|
|
|
@@ -44,7 +54,7 @@ const handleBackdropClick = (event: MouseEvent) => {
|
|
|
44
54
|
event.clientY <= rect.top + rect.height &&
|
|
45
55
|
rect.left <= event.clientX &&
|
|
46
56
|
event.clientX <= rect.left + rect.width;
|
|
47
|
-
if (!isInDialog) {
|
|
57
|
+
if (!isInDialog && props.closeOnBackdrop) {
|
|
48
58
|
dialog.value!.close();
|
|
49
59
|
}
|
|
50
60
|
};
|
|
@@ -55,28 +65,18 @@ onUnmounted(() => {
|
|
|
55
65
|
dialog.value!.removeEventListener("click", handleBackdropClick);
|
|
56
66
|
});
|
|
57
67
|
|
|
58
|
-
const staticClasses = [
|
|
59
|
-
"flex",
|
|
60
|
-
"flex-col",
|
|
61
|
-
"bg-core-white",
|
|
62
|
-
];
|
|
68
|
+
const staticClasses = ["flex", "flex-col", "bg-core-white"];
|
|
63
69
|
|
|
64
70
|
const dialogStaticClasses = {
|
|
65
71
|
"border-1": true,
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
72
|
+
rounded: true,
|
|
73
|
+
"border-grey-100": true,
|
|
74
|
+
};
|
|
69
75
|
|
|
70
76
|
const dialogClasses = computed(() => {
|
|
71
77
|
let res: string[] = [];
|
|
72
78
|
if (props.isDrawer) {
|
|
73
|
-
res = [
|
|
74
|
-
"m-0",
|
|
75
|
-
"fixed",
|
|
76
|
-
"top-0",
|
|
77
|
-
"ml-auto",
|
|
78
|
-
"max-h-screen",
|
|
79
|
-
];
|
|
79
|
+
res = ["m-0", "fixed", "top-0", "ml-auto", "max-h-screen"];
|
|
80
80
|
return res;
|
|
81
81
|
}
|
|
82
82
|
switch (props.size) {
|
|
@@ -123,11 +123,7 @@ const classes = computed(() => {
|
|
|
123
123
|
}
|
|
124
124
|
switch (props.size) {
|
|
125
125
|
case "sm":
|
|
126
|
-
res = [
|
|
127
|
-
"w-[320px]",
|
|
128
|
-
"min-h-[200px]",
|
|
129
|
-
"max-h-[432px]",
|
|
130
|
-
];
|
|
126
|
+
res = ["w-[320px]", "min-h-[200px]", "max-h-[432px]"];
|
|
131
127
|
break;
|
|
132
128
|
case "md":
|
|
133
129
|
res = [
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
2
2
|
|
|
3
3
|
exports[`FzDialog > should match snapshot - drawer 1`] = `
|
|
4
|
-
"<dialog class="m-0 fixed top-0 ml-auto max-h-screen">
|
|
5
|
-
<div class="flex flex-col
|
|
6
|
-
<div class="flex items-center p-12 w-full border-b-1 border-grey-100">
|
|
4
|
+
"<dialog class="border-1 rounded border-grey-100 m-0 fixed top-0 ml-auto max-h-screen" footerenabled="true" cancelbuttonenabled="true" disableconfirm="false" confirmbuttonenabled="true">
|
|
5
|
+
<div class="flex flex-col bg-core-white w-[480px] h-screen">
|
|
6
|
+
<div class="flex items-center p-12 w-full border-b-1 border-grey-100 border-solid">
|
|
7
7
|
<div class="flex flex-row items-center text-xl grow h-32">
|
|
8
|
-
<div class="grow h-28 font-medium"></div><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-28 text-sm focus:border-blue-600 focus:border-solid focus:border-1 px-14 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100 w-28 h-28
|
|
8
|
+
<div class="grow h-28 font-medium"></div><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-28 text-sm focus:border-blue-600 focus:border-solid focus:border-1 px-14 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100 w-28 h-28 ml-12">
|
|
9
9
|
<!--v-if-->
|
|
10
10
|
<div class="flex items-center justify-center w-[20px] h-[20px]"><svg class="svg-inline--fa fa-xmark h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
|
11
11
|
<path class="" fill="currentColor" d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"></path>
|
|
@@ -16,7 +16,7 @@ exports[`FzDialog > should match snapshot - drawer 1`] = `
|
|
|
16
16
|
</div>
|
|
17
17
|
</div>
|
|
18
18
|
<div class="grow"></div>
|
|
19
|
-
<div class="flex flex-row p-12 border-t-1 border-grey-100 items-center">
|
|
19
|
+
<div class="flex flex-row p-12 border-t-1 border-grey-100 items-center border-solid">
|
|
20
20
|
<form method="dialog" class="w-full h-full">
|
|
21
21
|
<div class="flex flex-row items-center h-32 grow justify-end h-40"><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-32 focus:border-blue-600 focus:border-solid focus:border-1 px-16 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100" value="false">
|
|
22
22
|
<!--v-if-->
|
|
@@ -32,11 +32,11 @@ exports[`FzDialog > should match snapshot - drawer 1`] = `
|
|
|
32
32
|
`;
|
|
33
33
|
|
|
34
34
|
exports[`FzDialog > should match snapshot - lg 1`] = `
|
|
35
|
-
"<dialog class="xs:max-xl:m-0 xs:max-xl:max-h-screen xs:max-xl:h-screen xs:max-xl:w-screen xs:max-xl:max-w-screen-xl">
|
|
36
|
-
<div class="flex flex-col
|
|
37
|
-
<div class="flex items-center p-12 w-full border-b-1 border-grey-100">
|
|
35
|
+
"<dialog class="border-1 rounded border-grey-100 xs:max-xl:m-0 xs:max-xl:max-h-screen xs:max-xl:h-screen xs:max-xl:w-screen xs:max-xl:max-w-screen-xl" footerenabled="true" cancelbuttonenabled="true" disableconfirm="false" confirmbuttonenabled="true">
|
|
36
|
+
<div class="flex flex-col bg-core-white w-screen md:w-[640px] min-h-[300px] md:max-h-[600px] h-screen md:h-auto">
|
|
37
|
+
<div class="flex items-center p-12 w-full border-b-1 border-grey-100 border-solid">
|
|
38
38
|
<div class="flex flex-row items-center text-xl grow h-28">
|
|
39
|
-
<div class="grow h-28 font-medium"></div><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-28 text-sm focus:border-blue-600 focus:border-solid focus:border-1 px-14 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100 w-28 h-28
|
|
39
|
+
<div class="grow h-28 font-medium"></div><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-28 text-sm focus:border-blue-600 focus:border-solid focus:border-1 px-14 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100 w-28 h-28 ml-12">
|
|
40
40
|
<!--v-if-->
|
|
41
41
|
<div class="flex items-center justify-center w-[20px] h-[20px]"><svg class="svg-inline--fa fa-xmark h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
|
42
42
|
<path class="" fill="currentColor" d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"></path>
|
|
@@ -47,7 +47,7 @@ exports[`FzDialog > should match snapshot - lg 1`] = `
|
|
|
47
47
|
</div>
|
|
48
48
|
</div>
|
|
49
49
|
<div class="grow"></div>
|
|
50
|
-
<div class="flex flex-row p-12 border-t-1 border-grey-100 items-center">
|
|
50
|
+
<div class="flex flex-row p-12 border-t-1 border-grey-100 items-center border-solid">
|
|
51
51
|
<form method="dialog" class="w-full h-full">
|
|
52
52
|
<div class="flex flex-row items-center h-32 grow justify-end h-32"><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-32 focus:border-blue-600 focus:border-solid focus:border-1 px-16 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100" value="false">
|
|
53
53
|
<!--v-if-->
|
|
@@ -63,11 +63,11 @@ exports[`FzDialog > should match snapshot - lg 1`] = `
|
|
|
63
63
|
`;
|
|
64
64
|
|
|
65
65
|
exports[`FzDialog > should match snapshot - md - xs screen 1`] = `
|
|
66
|
-
"<dialog class="xs:max-xl:m-0 xs:max-xl:max-h-screen xs:max-xl:h-screen xs:max-xl:w-screen xs:max-xl:max-w-screen-xl">
|
|
67
|
-
<div class="flex flex-col
|
|
68
|
-
<div class="flex items-center p-12 w-full border-b-1 border-grey-100">
|
|
66
|
+
"<dialog class="border-1 rounded border-grey-100 xs:max-xl:m-0 xs:max-xl:max-h-screen xs:max-xl:h-screen xs:max-xl:w-screen xs:max-xl:max-w-screen-xl" footerenabled="true" cancelbuttonenabled="true" disableconfirm="false" confirmbuttonenabled="true">
|
|
67
|
+
<div class="flex flex-col bg-core-white w-screen sm:w-[480px] min-h-[300px] sm:max-h-[600px] h-screen sm:h-auto">
|
|
68
|
+
<div class="flex items-center p-12 w-full border-b-1 border-grey-100 border-solid">
|
|
69
69
|
<div class="flex flex-row items-center text-xl grow h-28">
|
|
70
|
-
<div class="grow h-28 font-medium"></div><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-28 text-sm focus:border-blue-600 focus:border-solid focus:border-1 px-14 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100 w-28 h-28
|
|
70
|
+
<div class="grow h-28 font-medium"></div><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-28 text-sm focus:border-blue-600 focus:border-solid focus:border-1 px-14 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100 w-28 h-28 ml-12">
|
|
71
71
|
<!--v-if-->
|
|
72
72
|
<div class="flex items-center justify-center w-[20px] h-[20px]"><svg class="svg-inline--fa fa-xmark h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
|
73
73
|
<path class="" fill="currentColor" d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"></path>
|
|
@@ -78,7 +78,7 @@ exports[`FzDialog > should match snapshot - md - xs screen 1`] = `
|
|
|
78
78
|
</div>
|
|
79
79
|
</div>
|
|
80
80
|
<div class="grow"></div>
|
|
81
|
-
<div class="flex flex-row p-12 border-t-1 border-grey-100 items-center">
|
|
81
|
+
<div class="flex flex-row p-12 border-t-1 border-grey-100 items-center border-solid">
|
|
82
82
|
<form method="dialog" class="w-full h-full">
|
|
83
83
|
<div class="flex flex-row items-center h-32 grow justify-end h-32"><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-32 focus:border-blue-600 focus:border-solid focus:border-1 px-16 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100" value="false">
|
|
84
84
|
<!--v-if-->
|
|
@@ -94,11 +94,11 @@ exports[`FzDialog > should match snapshot - md - xs screen 1`] = `
|
|
|
94
94
|
`;
|
|
95
95
|
|
|
96
96
|
exports[`FzDialog > should match snapshot - md 1`] = `
|
|
97
|
-
"<dialog class="xs:max-xl:m-0 xs:max-xl:max-h-screen xs:max-xl:h-screen xs:max-xl:w-screen xs:max-xl:max-w-screen-xl">
|
|
98
|
-
<div class="flex flex-col
|
|
99
|
-
<div class="flex items-center p-12 w-full border-b-1 border-grey-100">
|
|
97
|
+
"<dialog class="border-1 rounded border-grey-100 xs:max-xl:m-0 xs:max-xl:max-h-screen xs:max-xl:h-screen xs:max-xl:w-screen xs:max-xl:max-w-screen-xl" footerenabled="true" cancelbuttonenabled="true" disableconfirm="false" confirmbuttonenabled="true">
|
|
98
|
+
<div class="flex flex-col bg-core-white w-screen sm:w-[480px] min-h-[300px] sm:max-h-[600px] h-screen sm:h-auto">
|
|
99
|
+
<div class="flex items-center p-12 w-full border-b-1 border-grey-100 border-solid">
|
|
100
100
|
<div class="flex flex-row items-center text-xl grow h-28">
|
|
101
|
-
<div class="grow h-28 font-medium"></div><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-28 text-sm focus:border-blue-600 focus:border-solid focus:border-1 px-14 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100 w-28 h-28
|
|
101
|
+
<div class="grow h-28 font-medium"></div><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-28 text-sm focus:border-blue-600 focus:border-solid focus:border-1 px-14 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100 w-28 h-28 ml-12">
|
|
102
102
|
<!--v-if-->
|
|
103
103
|
<div class="flex items-center justify-center w-[20px] h-[20px]"><svg class="svg-inline--fa fa-xmark h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
|
104
104
|
<path class="" fill="currentColor" d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"></path>
|
|
@@ -109,7 +109,7 @@ exports[`FzDialog > should match snapshot - md 1`] = `
|
|
|
109
109
|
</div>
|
|
110
110
|
</div>
|
|
111
111
|
<div class="grow"></div>
|
|
112
|
-
<div class="flex flex-row p-12 border-t-1 border-grey-100 items-center">
|
|
112
|
+
<div class="flex flex-row p-12 border-t-1 border-grey-100 items-center border-solid">
|
|
113
113
|
<form method="dialog" class="w-full h-full">
|
|
114
114
|
<div class="flex flex-row items-center h-32 grow justify-end h-32"><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-32 focus:border-blue-600 focus:border-solid focus:border-1 px-16 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100" value="false">
|
|
115
115
|
<!--v-if-->
|
|
@@ -125,11 +125,11 @@ exports[`FzDialog > should match snapshot - md 1`] = `
|
|
|
125
125
|
`;
|
|
126
126
|
|
|
127
127
|
exports[`FzDialog > should match snapshot - sm 1`] = `
|
|
128
|
-
"<dialog class="">
|
|
129
|
-
<div class="flex flex-col
|
|
130
|
-
<div class="flex items-center p-12 w-full border-b-1 border-grey-100">
|
|
128
|
+
"<dialog class="border-1 rounded border-grey-100" footerenabled="true" cancelbuttonenabled="true" disableconfirm="false" confirmbuttonenabled="true">
|
|
129
|
+
<div class="flex flex-col bg-core-white w-[320px] min-h-[200px] max-h-[432px]">
|
|
130
|
+
<div class="flex items-center p-12 w-full border-b-1 border-grey-100 border-solid">
|
|
131
131
|
<div class="flex flex-row items-center text-xl grow h-28">
|
|
132
|
-
<div class="grow h-28 font-medium"></div><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-28 text-sm focus:border-blue-600 focus:border-solid focus:border-1 px-14 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100 w-28 h-28
|
|
132
|
+
<div class="grow h-28 font-medium"></div><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-28 text-sm focus:border-blue-600 focus:border-solid focus:border-1 px-14 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100 w-28 h-28 ml-12">
|
|
133
133
|
<!--v-if-->
|
|
134
134
|
<div class="flex items-center justify-center w-[20px] h-[20px]"><svg class="svg-inline--fa fa-xmark h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
|
135
135
|
<path class="" fill="currentColor" d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"></path>
|
|
@@ -140,7 +140,7 @@ exports[`FzDialog > should match snapshot - sm 1`] = `
|
|
|
140
140
|
</div>
|
|
141
141
|
</div>
|
|
142
142
|
<div class="grow"></div>
|
|
143
|
-
<div class="flex flex-row p-12 border-t-1 border-grey-100 items-center">
|
|
143
|
+
<div class="flex flex-row p-12 border-t-1 border-grey-100 items-center border-solid">
|
|
144
144
|
<form method="dialog" class="w-full h-full">
|
|
145
145
|
<div class="flex flex-row items-center h-32 grow justify-end h-32"><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-32 focus:border-blue-600 focus:border-solid focus:border-1 px-16 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100" value="false">
|
|
146
146
|
<!--v-if-->
|
|
@@ -156,11 +156,11 @@ exports[`FzDialog > should match snapshot - sm 1`] = `
|
|
|
156
156
|
`;
|
|
157
157
|
|
|
158
158
|
exports[`FzDialog > should match snapshot - xl 1`] = `
|
|
159
|
-
"<dialog class="xs:max-xl:m-0 xs:max-xl:max-h-screen xs:max-xl:h-screen xs:max-xl:w-screen xs:max-xl:max-w-screen-xl">
|
|
160
|
-
<div class="flex flex-col
|
|
161
|
-
<div class="flex items-center p-12 w-full border-b-1 border-grey-100">
|
|
159
|
+
"<dialog class="border-1 rounded border-grey-100 xs:max-xl:m-0 xs:max-xl:max-h-screen xs:max-xl:h-screen xs:max-xl:w-screen xs:max-xl:max-w-screen-xl" footerenabled="true" cancelbuttonenabled="true" disableconfirm="false" confirmbuttonenabled="true">
|
|
160
|
+
<div class="flex flex-col bg-core-white w-screen xl:w-[960px] min-h-[400px] xl:max-h-[600px] h-screen xl:h-auto">
|
|
161
|
+
<div class="flex items-center p-12 w-full border-b-1 border-grey-100 border-solid">
|
|
162
162
|
<div class="flex flex-row items-center text-xl grow h-28">
|
|
163
|
-
<div class="grow h-28 font-medium"></div><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-28 text-sm focus:border-blue-600 focus:border-solid focus:border-1 px-14 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100 w-28 h-28
|
|
163
|
+
<div class="grow h-28 font-medium"></div><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-28 text-sm focus:border-blue-600 focus:border-solid focus:border-1 px-14 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100 w-28 h-28 ml-12">
|
|
164
164
|
<!--v-if-->
|
|
165
165
|
<div class="flex items-center justify-center w-[20px] h-[20px]"><svg class="svg-inline--fa fa-xmark h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
|
166
166
|
<path class="" fill="currentColor" d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"></path>
|
|
@@ -171,7 +171,7 @@ exports[`FzDialog > should match snapshot - xl 1`] = `
|
|
|
171
171
|
</div>
|
|
172
172
|
</div>
|
|
173
173
|
<div class="grow"></div>
|
|
174
|
-
<div class="flex flex-row p-12 border-t-1 border-grey-100 items-center">
|
|
174
|
+
<div class="flex flex-row p-12 border-t-1 border-grey-100 items-center border-solid">
|
|
175
175
|
<form method="dialog" class="w-full h-full">
|
|
176
176
|
<div class="flex flex-row items-center h-32 grow justify-end h-32"><button type="button" class="relative rounded flex flex-shrink items-center justify-center font-medium border-1 border-transparent h-32 focus:border-blue-600 focus:border-solid focus:border-1 px-16 text-grey-500 bg-transparent border-transparent hover:bg-grey-100 focus:!border-blue-600 disabled:text-grey-100" value="false">
|
|
177
177
|
<!--v-if-->
|
package/src/types.ts
CHANGED
|
@@ -25,4 +25,43 @@ export type FzDialogProps = {
|
|
|
25
25
|
* Whether to show the modal as a drawer
|
|
26
26
|
*/
|
|
27
27
|
isDrawer?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Whether to close the dialog on backdrop click
|
|
30
|
+
*/
|
|
31
|
+
closeOnBackdrop?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* classes to apply to body
|
|
34
|
+
*/
|
|
35
|
+
bodyClasses?:
|
|
36
|
+
| string
|
|
37
|
+
| string[]
|
|
38
|
+
| Record<string, boolean | undefined>
|
|
39
|
+
| Array<string | Record<string, boolean | undefined>>;
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export type FzConfirmDialogProps = FzDialogProps & {
|
|
43
|
+
/**
|
|
44
|
+
* Whether to show or not the footer
|
|
45
|
+
*/
|
|
46
|
+
footerEnabled?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Whether to show the cancel button
|
|
49
|
+
*/
|
|
50
|
+
cancelButtonEnabled?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Whether to enable the confirm button
|
|
53
|
+
*/
|
|
54
|
+
disableConfirm?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* Whether to show the confirm button
|
|
57
|
+
*/
|
|
58
|
+
confirmButtonEnabled?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* classes to apply to footer
|
|
61
|
+
*/
|
|
62
|
+
footerClasses?:
|
|
63
|
+
| string
|
|
64
|
+
| string[]
|
|
65
|
+
| Record<string, boolean | undefined>
|
|
66
|
+
| Array<string | Record<string, boolean | undefined>>;
|
|
28
67
|
};
|