@imaginario27/air-ui-ds 1.2.6 → 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 +96 -75
  2. package/package.json +1 -1
package/components/drawers/Drawer.vue CHANGED
@@ -1,86 +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',
59
- 'gap-3',
60
- headerClass,
44
+ 'flex-col',
45
+ 'gap-4',
46
+ positionClasses,
47
+ sizeClasses,
48
+ drawerClass,
49
+ borderClass,
61
50
  ]"
51
+ :style="drawerInlineStyle"
62
52
  >
63
- <component
64
- :is="titleHeadingTag"
65
- :class="['text-lg', 'font-semibold', titleClass]"
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
- {{ title }}
68
- </component>
69
-
70
- <ActionIconButton
71
- v-if="hasCloseButton"
72
- :icon="buttonCloseIcon"
73
- :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
74
- @click="close"
75
- />
76
- </div>
77
-
78
- <!-- Content -->
79
- <div :class="['flex-1', 'overflow-y-auto', drawerContentClass]">
80
- <slot />
81
- </div>
82
- </aside>
83
- </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>
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>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@imaginario27/air-ui-ds",
3
- "version": "1.2.6",
3
+ "version": "1.2.7",
4
4
  "author": "imaginario27",
5
5
  "type": "module",
6
6
  "homepage": "https://air-ui.netlify.app/",