@imaginario27/air-ui-ds 1.2.6 → 1.2.8
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.
|
@@ -1,86 +1,88 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<div
|
|
12
|
-
v-if="isOpen && hasOverlay"
|
|
13
|
-
:class="[
|
|
14
|
-
'fixed',
|
|
15
|
-
'inset-0',
|
|
16
|
-
'bg-background-overlay',
|
|
17
|
-
'backdrop-blur-sm',
|
|
18
|
-
'z-[10000]',
|
|
19
|
-
overlayClass,
|
|
20
|
-
]"
|
|
21
|
-
@click="closeOnOverlayClick ? close() : null"
|
|
22
|
-
/>
|
|
23
|
-
</Transition>
|
|
24
|
-
|
|
25
|
-
<!-- Drawer -->
|
|
26
|
-
<Transition
|
|
27
|
-
:enter-active-class="transitionClasses.enterActive"
|
|
28
|
-
:enter-from-class="transitionClasses.enterFrom"
|
|
29
|
-
:enter-to-class="transitionClasses.enterTo"
|
|
30
|
-
:leave-active-class="transitionClasses.leaveActive"
|
|
31
|
-
:leave-from-class="transitionClasses.leaveFrom"
|
|
32
|
-
:leave-to-class="transitionClasses.leaveTo"
|
|
33
|
-
>
|
|
34
|
-
<aside
|
|
35
|
-
v-if="isOpen"
|
|
36
|
-
:class="[
|
|
37
|
-
'fixed',
|
|
38
|
-
'bg-background-container-surface',
|
|
39
|
-
'shadow-xl',
|
|
40
|
-
'z-[10000]',
|
|
41
|
-
'p-4',
|
|
42
|
-
'flex',
|
|
43
|
-
'flex-col',
|
|
44
|
-
'gap-4',
|
|
45
|
-
positionClasses,
|
|
46
|
-
sizeClasses,
|
|
47
|
-
drawerClass,
|
|
48
|
-
borderClass,
|
|
49
|
-
]"
|
|
50
|
-
:style="drawerInlineStyle"
|
|
2
|
+
<Teleport to="body">
|
|
3
|
+
<!-- Overlay -->
|
|
4
|
+
<Transition
|
|
5
|
+
enter-active-class="transition-opacity duration-200 ease-out"
|
|
6
|
+
enter-from-class="opacity-0"
|
|
7
|
+
enter-to-class="opacity-100"
|
|
8
|
+
leave-active-class="transition-opacity duration-200 ease-in"
|
|
9
|
+
leave-from-class="opacity-100"
|
|
10
|
+
leave-to-class="opacity-0"
|
|
51
11
|
>
|
|
52
|
-
<!-- Header -->
|
|
53
12
|
<div
|
|
54
|
-
v-if="
|
|
13
|
+
v-if="isOpen && hasOverlay"
|
|
55
14
|
:class="[
|
|
15
|
+
'fixed',
|
|
16
|
+
'inset-0',
|
|
17
|
+
'bg-background-overlay',
|
|
18
|
+
'backdrop-blur-sm',
|
|
19
|
+
'z-[10000]',
|
|
20
|
+
overlayClass,
|
|
21
|
+
]"
|
|
22
|
+
@click="closeOnOverlayClick ? close() : null"
|
|
23
|
+
/>
|
|
24
|
+
</Transition>
|
|
25
|
+
|
|
26
|
+
<!-- Drawer -->
|
|
27
|
+
<Transition
|
|
28
|
+
:enter-active-class="transitionClasses.enterActive"
|
|
29
|
+
:enter-from-class="transitionClasses.enterFrom"
|
|
30
|
+
:enter-to-class="transitionClasses.enterTo"
|
|
31
|
+
:leave-active-class="transitionClasses.leaveActive"
|
|
32
|
+
:leave-from-class="transitionClasses.leaveFrom"
|
|
33
|
+
:leave-to-class="transitionClasses.leaveTo"
|
|
34
|
+
>
|
|
35
|
+
<aside
|
|
36
|
+
v-if="isOpen"
|
|
37
|
+
:class="[
|
|
38
|
+
'fixed',
|
|
39
|
+
'bg-background-container-surface',
|
|
40
|
+
'shadow-xl',
|
|
41
|
+
'z-[10000]',
|
|
42
|
+
'p-4',
|
|
56
43
|
'flex',
|
|
57
|
-
'
|
|
58
|
-
'
|
|
59
|
-
|
|
60
|
-
|
|
44
|
+
'flex-col',
|
|
45
|
+
'gap-4',
|
|
46
|
+
positionClasses,
|
|
47
|
+
sizeClasses,
|
|
48
|
+
drawerClass,
|
|
49
|
+
borderClass,
|
|
61
50
|
]"
|
|
51
|
+
:style="drawerInlineStyle"
|
|
62
52
|
>
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
53
|
+
<!-- Header -->
|
|
54
|
+
<div
|
|
55
|
+
v-if="hasHeader"
|
|
56
|
+
:class="[
|
|
57
|
+
'flex',
|
|
58
|
+
'items-center',
|
|
59
|
+
'justify-between',
|
|
60
|
+
'gap-3',
|
|
61
|
+
headerClass,
|
|
62
|
+
]"
|
|
66
63
|
>
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
64
|
+
<component
|
|
65
|
+
:is="titleHeadingTag"
|
|
66
|
+
:class="['text-lg', 'font-semibold', titleClass]"
|
|
67
|
+
>
|
|
68
|
+
{{ title }}
|
|
69
|
+
</component>
|
|
70
|
+
|
|
71
|
+
<ActionIconButton
|
|
72
|
+
v-if="hasCloseButton"
|
|
73
|
+
:icon="buttonCloseIcon"
|
|
74
|
+
:styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
|
|
75
|
+
@click="close"
|
|
76
|
+
/>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<!-- Content -->
|
|
80
|
+
<div :class="['flex-1', 'overflow-y-auto', drawerContentClass]">
|
|
81
|
+
<slot />
|
|
82
|
+
</div>
|
|
83
|
+
</aside>
|
|
84
|
+
</Transition>
|
|
85
|
+
</Teleport>
|
|
84
86
|
</template>
|
|
85
87
|
|
|
86
88
|
<script setup lang="ts">
|
|
@@ -131,6 +133,10 @@ const props = defineProps({
|
|
|
131
133
|
type: Boolean as PropType<boolean>,
|
|
132
134
|
default: true,
|
|
133
135
|
},
|
|
136
|
+
lockBodyScroll: {
|
|
137
|
+
type: Boolean as PropType<boolean>,
|
|
138
|
+
default: true,
|
|
139
|
+
},
|
|
134
140
|
drawerClass: String as PropType<string>,
|
|
135
141
|
drawerContentClass: String as PropType<string>,
|
|
136
142
|
overlayClass: String as PropType<string>,
|
|
@@ -246,4 +252,19 @@ const borderClass = computed(() => {
|
|
|
246
252
|
const close = () => {
|
|
247
253
|
emit('update:modelValue', false)
|
|
248
254
|
}
|
|
255
|
+
|
|
256
|
+
// Locks and unlocks the background scroll while modal is open
|
|
257
|
+
useHead(() => {
|
|
258
|
+
return props.modelValue && props.lockBodyScroll
|
|
259
|
+
? {
|
|
260
|
+
bodyAttrs: {
|
|
261
|
+
class: 'modal-open',
|
|
262
|
+
},
|
|
263
|
+
}
|
|
264
|
+
: {
|
|
265
|
+
bodyAttrs: {
|
|
266
|
+
class: '',
|
|
267
|
+
},
|
|
268
|
+
}
|
|
269
|
+
})
|
|
249
270
|
</script>
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
'rounded',
|
|
27
27
|
disabled ? 'cursor-not-allowed' : 'cursor-pointer',
|
|
28
28
|
'border border-border-default',
|
|
29
|
-
selectBoxClass,
|
|
30
29
|
'text-sm',
|
|
31
30
|
disabled ? 'text-text-neutral-disabled' : 'text-text-default',
|
|
32
31
|
sizeClass,
|
|
32
|
+
selectBoxClass,
|
|
33
33
|
]"
|
|
34
34
|
@click="!disabled"
|
|
35
35
|
>
|
|
@@ -47,6 +47,7 @@
|
|
|
47
47
|
:allowDeselect
|
|
48
48
|
:isLoading="isLoadingOptions"
|
|
49
49
|
:loadingText
|
|
50
|
+
:selectBoxClass
|
|
50
51
|
@update:modelValue="handleValueUpdate"
|
|
51
52
|
/>
|
|
52
53
|
|
|
@@ -158,6 +159,7 @@ const props = defineProps({
|
|
|
158
159
|
type: String as PropType<string>,
|
|
159
160
|
default: 'Options are being loaded',
|
|
160
161
|
},
|
|
162
|
+
selectBoxClass: String as PropType<string>,
|
|
161
163
|
})
|
|
162
164
|
|
|
163
165
|
// Emits
|