@imaginario27/air-ui-ds 1.2.0 → 1.2.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/components/modals/DangerModalDialog.vue +2 -2
  2. package/components/modals/InfoModalDialog.vue +2 -2
  3. package/components/modals/ModalDialog.vue +30 -10
  4. package/components/modals/SuccessModalDialog.vue +2 -2
  5. package/package.json +1 -1
package/components/modals/DangerModalDialog.vue CHANGED
@@ -3,7 +3,7 @@
3
3
  :modelValue
4
4
  :closeOnClickOutside
5
5
  :hasCornerCloseButton
6
- :cardClasses
6
+ :cardClass
7
7
  @update:modelValue="updateModelValue"
8
8
  >
9
9
  <ModalContent class="!gap-6 items-center">
@@ -111,7 +111,7 @@ defineProps({
111
111
  default: Orientation.HORIZONTAL,
112
112
  validator: (value: Orientation) => Object.values(Orientation).includes(value),
113
113
  },
114
- cardClasses: {
114
+ cardClass: {
115
115
  type: String as PropType<string>,
116
116
  default: 'max-w-[520px]',
117
117
  },
package/components/modals/InfoModalDialog.vue CHANGED
@@ -3,7 +3,7 @@
3
3
  :modelValue
4
4
  :closeOnClickOutside
5
5
  :hasCornerCloseButton
6
- :cardClasses
6
+ :cardClass
7
7
  @update:modelValue="updateModelValue"
8
8
  >
9
9
  <ModalContent class="!gap-6 items-center">
@@ -105,7 +105,7 @@ defineProps({
105
105
  default: Orientation.VERTICAL,
106
106
  validator: (value: Orientation) => Object.values(Orientation).includes(value),
107
107
  },
108
- cardClasses: {
108
+ cardClass: {
109
109
  type: String as PropType<string>,
110
110
  default: 'max-w-[520px]',
111
111
  },
package/components/modals/ModalDialog.vue CHANGED
@@ -10,10 +10,27 @@
10
10
  <div
11
11
  v-if="modelValue"
12
12
  :id
13
- class="fixed inset-0 z-[9999] bg-background-overlay backdrop-blur-sm overflow-y-auto"
13
+ :class="[
14
+ 'fixed',
15
+ 'inset-0',
16
+ 'z-[9999]',
17
+ 'bg-background-overlay',
18
+ 'backdrop-blur-sm',
19
+ 'overflow-y-auto',
20
+ overlayClass,
21
+ ]"
14
22
  >
15
23
  <div
16
- class="modal-container min-h-full flex w-full items-center justify-center p-4"
24
+ :class="[
25
+ 'modal-container',
26
+ 'min-h-full',
27
+ 'flex',
28
+ 'w-full',
29
+ 'items-center',
30
+ 'justify-center',
31
+ 'p-4',
32
+ containerClass,
33
+ ]"
17
34
  @click.self="closeModalOnClickOutside"
18
35
  >
19
36
  <Transition
@@ -29,7 +46,7 @@
29
46
  'bg-background-surface rounded-lg shadow-xl',
30
47
  'relative w-full my-8',
31
48
  'overflow-visible',
32
- cardClasses,
49
+ cardClass,
33
50
  ]"
34
51
  >
35
52
  <ActionIconButton
@@ -41,7 +58,7 @@
41
58
  @click="closeModal"
42
59
  />
43
60
 
44
- <div class="p-4 md:p-6">
61
+ <div :class="['p-4 md:p-6', cardClass]">
45
62
  <slot />
46
63
  </div>
47
64
  </div>
@@ -59,10 +76,6 @@ const props = defineProps({
59
76
  type: Boolean as PropType<boolean>,
60
77
  default: false,
61
78
  },
62
- cardClasses: {
63
- type: String as PropType<string>,
64
- default: 'max-w-[600px]',
65
- },
66
79
  closeOnClickOutside: {
67
80
  type: Boolean as PropType<boolean>,
68
81
  default: false,
@@ -71,7 +84,14 @@ const props = defineProps({
71
84
  type: Boolean as PropType<boolean>,
72
85
  default: true,
73
86
  },
87
+ overlayClass: String as PropType<string>,
88
+ containerClass: String as PropType<string>,
89
+ cardClass: {
90
+ type: String as PropType<string>,
91
+ default: 'max-w-[600px]',
92
+ },
74
93
  id: String as PropType<string>,
94
+
75
95
  })
76
96
 
77
97
  // Emits
@@ -109,11 +129,11 @@ const handleEscKey = (event: KeyboardEvent) => {
109
129
 
110
130
  // Event listeners
111
131
  const addEscListener = () => {
112
- window.addEventListener('keydown', handleEscKey)
132
+ globalThis.addEventListener('keydown', handleEscKey)
113
133
  }
114
134
 
115
135
  const removeEscListener = () => {
116
- window.removeEventListener('keydown', handleEscKey)
136
+ globalThis.removeEventListener('keydown', handleEscKey)
117
137
  }
118
138
 
119
139
  // Cleanup on component unmount
package/components/modals/SuccessModalDialog.vue CHANGED
@@ -3,7 +3,7 @@
3
3
  :modelValue
4
4
  :closeOnClickOutside
5
5
  :hasCornerCloseButton
6
- :cardClasses
6
+ :cardClass
7
7
  @update:modelValue="updateModelValue"
8
8
  >
9
9
  <ModalContent class="!gap-6 items-center">
@@ -54,7 +54,7 @@ defineProps({
54
54
  type: String as PropType<string>,
55
55
  default: 'Close',
56
56
  },
57
- cardClasses: {
57
+ cardClass: {
58
58
  type: String as PropType<string>,
59
59
  default: 'max-w-[400px]',
60
60
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@imaginario27/air-ui-ds",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "author": "imaginario27",
5
5
  "type": "module",
6
6
  "homepage": "https://air-ui.netlify.app/",