@fiscozen/dialog 0.1.1 → 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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/FzConfirmDialog.vue +9 -5
  3. package/src/FzDialog.vue +19 -24
  4. package/src/__test__/__snapshots__/FzDialog.test.ts.snap +18 -18
  5. package/src/types.ts +16 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fiscozen/dialog",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "Design System Dialog component",
5
5
  "main": "src/index.ts",
6
6
  "type": "module",
package/src/FzConfirmDialog.vue CHANGED
@@ -20,21 +20,25 @@
20
20
  <template #footer v-if="footerEnabled">
21
21
  <slot name="footer">
22
22
  <form method="dialog" class="w-full h-full">
23
- <div :class="[footerStaticClasses, footerDynamicClasses, footerClasses]">
23
+ <div
24
+ :class="[footerStaticClasses, footerDynamicClasses, footerClasses]"
25
+ >
24
26
  <FzButton
25
27
  v-if="cancelButtonEnabled"
26
28
  variant="invisible"
27
29
  @click.prevent="handleCancel"
28
- value="false">
29
- {{ cancelLabel }}
30
+ value="false"
31
+ >
32
+ {{ cancelLabel }}
30
33
  </FzButton>
31
34
  <FzButton
32
35
  v-if="confirmButtonEnabled"
33
36
  class="ml-12"
34
37
  @click.prevent="handleConfirm"
35
38
  :disabled="disableConfirm"
36
- value="true">
37
- {{ confirmLabel }}
39
+ value="true"
40
+ >
41
+ {{ confirmLabel }}
38
42
  </FzButton>
39
43
  </div>
40
44
  </form>
package/src/FzDialog.vue CHANGED
@@ -1,13 +1,22 @@
1
1
  <template>
2
- <dialog ref="dialog" @close="visible = false" :class="[dialogStaticClasses, dialogClasses]">
2
+ <dialog
3
+ ref="dialog"
4
+ @close="visible = false"
5
+ :class="[dialogStaticClasses, dialogClasses]"
6
+ >
3
7
  <div :class="[staticClasses, classes]">
4
- <div class="flex items-center p-12 w-full border-b-1 border-grey-100">
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', bodyClasses]" >
13
+ <div :class="['grow', bodyClasses]">
8
14
  <slot name="body"></slot>
9
15
  </div>
10
- <div v-if="$slots.footer" class="flex flex-row p-12 border-t-1 border-grey-100 items-center">
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>
@@ -56,28 +65,18 @@ onUnmounted(() => {
56
65
  dialog.value!.removeEventListener("click", handleBackdropClick);
57
66
  });
58
67
 
59
- const staticClasses = [
60
- "flex",
61
- "flex-col",
62
- "bg-core-white",
63
- ];
68
+ const staticClasses = ["flex", "flex-col", "bg-core-white"];
64
69
 
65
70
  const dialogStaticClasses = {
66
71
  "border-1": true,
67
- 'rounded': true,
68
- 'border-grey-100': true
69
- }
72
+ rounded: true,
73
+ "border-grey-100": true,
74
+ };
70
75
 
71
76
  const dialogClasses = computed(() => {
72
77
  let res: string[] = [];
73
78
  if (props.isDrawer) {
74
- res = [
75
- "m-0",
76
- "fixed",
77
- "top-0",
78
- "ml-auto",
79
- "max-h-screen",
80
- ];
79
+ res = ["m-0", "fixed", "top-0", "ml-auto", "max-h-screen"];
81
80
  return res;
82
81
  }
83
82
  switch (props.size) {
@@ -124,11 +123,7 @@ const classes = computed(() => {
124
123
  }
125
124
  switch (props.size) {
126
125
  case "sm":
127
- res = [
128
- "w-[320px]",
129
- "min-h-[200px]",
130
- "max-h-[432px]",
131
- ];
126
+ res = ["w-[320px]", "min-h-[200px]", "max-h-[432px]"];
132
127
  break;
133
128
  case "md":
134
129
  res = [
package/src/__test__/__snapshots__/FzDialog.test.ts.snap CHANGED
@@ -1,9 +1,9 @@
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="border-1 rounded border-grey-100 m-0 fixed top-0 ml-auto max-h-screen">
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
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">
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
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-->
@@ -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,9 +32,9 @@ exports[`FzDialog > should match snapshot - drawer 1`] = `
32
32
  `;
33
33
 
34
34
  exports[`FzDialog > should match snapshot - lg 1`] = `
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">
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
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">
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
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-->
@@ -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,9 +63,9 @@ 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="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">
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
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">
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
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-->
@@ -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,9 +94,9 @@ 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="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">
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
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">
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
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-->
@@ -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,9 +125,9 @@ exports[`FzDialog > should match snapshot - md 1`] = `
125
125
  `;
126
126
 
127
127
  exports[`FzDialog > should match snapshot - sm 1`] = `
128
- "<dialog class="border-1 rounded border-grey-100">
128
+ "<dialog class="border-1 rounded border-grey-100" footerenabled="true" cancelbuttonenabled="true" disableconfirm="false" confirmbuttonenabled="true">
129
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">
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
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-->
@@ -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,9 +156,9 @@ exports[`FzDialog > should match snapshot - sm 1`] = `
156
156
  `;
157
157
 
158
158
  exports[`FzDialog > should match snapshot - xl 1`] = `
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">
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
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">
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
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-->
@@ -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
@@ -30,9 +30,13 @@ export type FzDialogProps = {
30
30
  */
31
31
  closeOnBackdrop?: boolean;
32
32
  /**
33
- * classes to apply to body
33
+ * classes to apply to body
34
34
  */
35
- bodyClasses?: string | string[] | Record<string, boolean|undefined> | Array<string|Record<string,boolean|undefined>>
35
+ bodyClasses?:
36
+ | string
37
+ | string[]
38
+ | Record<string, boolean | undefined>
39
+ | Array<string | Record<string, boolean | undefined>>;
36
40
  };
37
41
 
38
42
  export type FzConfirmDialogProps = FzDialogProps & {
@@ -41,19 +45,23 @@ export type FzConfirmDialogProps = FzDialogProps & {
41
45
  */
42
46
  footerEnabled?: boolean;
43
47
  /**
44
- * Whether to show the cancel button
48
+ * Whether to show the cancel button
45
49
  */
46
50
  cancelButtonEnabled?: boolean;
47
51
  /**
48
- * Whether to enable the confirm button
52
+ * Whether to enable the confirm button
49
53
  */
50
54
  disableConfirm?: boolean;
51
55
  /**
52
- * Whether to show the confirm button
56
+ * Whether to show the confirm button
53
57
  */
54
58
  confirmButtonEnabled?: boolean;
55
59
  /**
56
- * classes to apply to footer
60
+ * classes to apply to footer
57
61
  */
58
- footerClasses?: string | string[] | Record<string, boolean|undefined> | Array<string|Record<string,boolean|undefined>>
59
- };
62
+ footerClasses?:
63
+ | string
64
+ | string[]
65
+ | Record<string, boolean | undefined>
66
+ | Array<string | Record<string, boolean | undefined>>;
67
+ };