@imaginario27/air-ui-ds 1.2.5 → 1.2.7

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 (2) hide show
  1. package/components/drawers/Drawer.vue +99 -73
  2. package/package.json +1 -1
package/components/drawers/Drawer.vue CHANGED
@@ -1,84 +1,88 @@
1
1
  <template>
2
- <!-- Overlay -->
3
- <Transition
4
- enter-active-class="transition-opacity duration-200 ease-out"
5
- enter-from-class="opacity-0"
6
- enter-to-class="opacity-100"
7
- leave-active-class="transition-opacity duration-200 ease-in"
8
- leave-from-class="opacity-100"
9
- leave-to-class="opacity-0"
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="hasHeader"
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
- 'items-center',
58
- 'justify-between',
44
+ 'flex-col',
45
+ 'gap-4',
46
+ positionClasses,
47
+ sizeClasses,
48
+ drawerClass,
49
+ borderClass,
59
50
  ]"
51
+ :style="drawerInlineStyle"
60
52
  >
61
- <component
62
- :is="titleHeadingTag"
63
- class="text-lg font-semibold"
53
+ <!-- Header -->
54
+ <div
55
+ v-if="hasHeader"
56
+ :class="[
57
+ 'flex',
58
+ 'items-center',
59
+ 'justify-between',
60
+ 'gap-3',
61
+ headerClass,
62
+ ]"
64
63
  >
65
- {{ title }}
66
- </component>
67
-
68
- <ActionIconButton
69
- v-if="hasCloseButton"
70
- :icon="buttonCloseIcon"
71
- :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
72
- @click="close"
73
- />
74
- </div>
75
-
76
- <!-- Content -->
77
- <div class="flex-1 overflow-y-auto">
78
- <slot />
79
- </div>
80
- </aside>
81
- </Transition>
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>
82
86
  </template>
83
87
 
84
88
  <script setup lang="ts">
@@ -129,8 +133,15 @@ const props = defineProps({
129
133
  type: Boolean as PropType<boolean>,
130
134
  default: true,
131
135
  },
136
+ lockBodyScroll: {
137
+ type: Boolean as PropType<boolean>,
138
+ default: true,
139
+ },
132
140
  drawerClass: String as PropType<string>,
141
+ drawerContentClass: String as PropType<string>,
133
142
  overlayClass: String as PropType<string>,
143
+ headerClass: String as PropType<string>,
144
+ titleClass: String as PropType<string>,
134
145
  })
135
146
 
136
147
  // Emits
@@ -241,4 +252,19 @@ const borderClass = computed(() => {
241
252
  const close = () => {
242
253
  emit('update:modelValue', false)
243
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
+ })
244
270
  </script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@imaginario27/air-ui-ds",
3
- "version": "1.2.5",
3
+ "version": "1.2.7",
4
4
  "author": "imaginario27",
5
5
  "type": "module",
6
6
  "homepage": "https://air-ui.netlify.app/",