@redseed/redseed-ui-vue3 7.2.9 → 7.2.11

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/package.json +1 -1
  2. package/src/components/Modal/Modal.vue +87 -62
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redseed/redseed-ui-vue3",
3
- "version": "7.2.9",
3
+ "version": "7.2.11",
4
4
  "description": "RedSeed UI Vue 3 components",
5
5
  "main": "index.js",
6
6
  "repository": "https://github.com/redseedtraining/redseed-ui",
package/src/components/Modal/Modal.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <script setup>
2
- import { computed, onMounted, onUnmounted, watch } from 'vue'
2
+ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
3
3
 
4
4
  // Apply all attributes to the input element, not the wrapper div
5
5
  defineOptions({
@@ -81,10 +81,18 @@ const modalContentClass = computed(() => {
81
81
 
82
82
  const emit = defineEmits(['close'])
83
83
 
84
- watch(() => props.show, () => {
85
- if (props.show) {
84
+ const isMounted = ref(props.show)
85
+ const isOverlayVisible = ref(props.show)
86
+ const isPanelVisible = ref(props.show)
87
+
88
+ watch(() => props.show, (value) => {
89
+ if (value) {
90
+ isMounted.value = true
91
+ isOverlayVisible.value = true
92
+ isPanelVisible.value = true
86
93
  document.body.style.overflow = 'hidden'
87
94
  } else {
95
+ isPanelVisible.value = false
88
96
  document.body.style.overflow = null
89
97
  }
90
98
  })
@@ -107,74 +115,91 @@ onUnmounted(() => {
107
115
  document.removeEventListener('keydown', closeOnEscape)
108
116
  document.body.style.overflow = null
109
117
  })
118
+
119
+ function handlePanelAfterLeave() {
120
+ if (!props.show) {
121
+ isOverlayVisible.value = false
122
+ }
123
+ }
124
+
125
+ function handleOverlayAfterLeave() {
126
+ if (!props.show) {
127
+ isMounted.value = false
128
+ }
129
+ }
110
130
  </script>
111
131
 
112
132
  <template>
113
133
  <teleport to="body">
114
- <transition leave-active-class="duration-200">
115
- <div v-show="show" class="rsui-modal" v-bind="$attrs" scroll-region>
116
- <transition
117
- enter-active-class="ease-out duration-300"
118
- enter-from-class="opacity-0"
119
- enter-to-class="opacity-100"
120
- leave-active-class="ease-in duration-200"
121
- leave-from-class="opacity-100"
122
- leave-to-class="opacity-0"
134
+ <div v-if="isMounted" class="rsui-modal" v-bind="$attrs" scroll-region>
135
+ <Transition
136
+ appear
137
+ enter-active-class="transition ease-out duration-300"
138
+ enter-from-class="opacity-0"
139
+ enter-to-class="opacity-100"
140
+ leave-active-class="transition ease-in duration-200 delay-150"
141
+ leave-from-class="opacity-100"
142
+ leave-to-class="opacity-0"
143
+ @after-leave="handleOverlayAfterLeave"
144
+ >
145
+ <div v-if="isOverlayVisible"
146
+ class="rsui-modal__background-wrapper"
147
+ @click="close"
123
148
  >
124
- <div v-show="show" class="rsui-modal__background-wrapper" @click="close">
125
- <div class="rsui-modal__background" />
126
- </div>
127
- </transition>
128
-
129
- <transition
130
- enter-active-class="enter-active-class"
131
- enter-from-class="enter-from-class"
132
- enter-to-class="enter-to-class"
133
- leave-active-class="leave-active-class"
134
- leave-from-class="leave-from-class"
135
- leave-to-class="leave-to-class"
149
+ <div class="rsui-modal__background" />
150
+ </div>
151
+ </Transition>
152
+
153
+ <Transition
154
+ appear
155
+ enter-active-class="transition ease-out duration-300"
156
+ enter-from-class="opacity-0 scale-95"
157
+ enter-to-class="opacity-100 scale-100"
158
+ leave-active-class="transition ease-in duration-200"
159
+ leave-from-class="opacity-100 scale-100"
160
+ leave-to-class="opacity-0 scale-95"
161
+ @after-leave="handlePanelAfterLeave"
162
+ >
163
+ <div v-if="isPanelVisible"
164
+ :class="modalContentClass"
136
165
  >
137
- <div v-if="show"
138
- :class="modalContentClass"
166
+ <div v-if="$slots.header"
167
+ :class="{
168
+ 'rsui-modal__header': true,
169
+ 'rsui-modal__header--padded': headerPadded,
170
+ }"
139
171
  >
140
- <div v-if="$slots.header && show"
141
- :class="{
142
- 'rsui-modal__header': true,
143
- 'rsui-modal__header--padded': headerPadded,
144
- }"
145
- >
146
- <slot name="header"
147
- :close="close"
148
- ></slot>
149
- </div>
150
-
151
- <div v-if="show"
152
- :class="{
153
- 'rsui-modal__body': true,
154
- 'rsui-modal__body--padded': bodyPadded,
155
- }"
156
- >
157
- <slot>
158
- <slot name="body"
159
- :close="close"
160
- ></slot>
161
- </slot>
162
- </div>
163
-
164
- <div v-if="$slots.footer && show"
165
- :class="{
166
- 'rsui-modal__footer': true,
167
- 'rsui-modal__footer--padded': footerPadded,
168
- 'rsui-modal__footer--start': footerStart,
169
- }"
170
- >
171
- <slot name="footer"
172
+ <slot name="header"
173
+ :close="close"
174
+ ></slot>
175
+ </div>
176
+
177
+ <div
178
+ :class="{
179
+ 'rsui-modal__body': true,
180
+ 'rsui-modal__body--padded': bodyPadded,
181
+ }"
182
+ >
183
+ <slot>
184
+ <slot name="body"
172
185
  :close="close"
173
186
  ></slot>
174
- </div>
187
+ </slot>
188
+ </div>
189
+
190
+ <div v-if="$slots.footer"
191
+ :class="{
192
+ 'rsui-modal__footer': true,
193
+ 'rsui-modal__footer--padded': footerPadded,
194
+ 'rsui-modal__footer--start': footerStart,
195
+ }"
196
+ >
197
+ <slot name="footer"
198
+ :close="close"
199
+ ></slot>
175
200
  </div>
176
- </transition>
177
- </div>
178
- </transition>
201
+ </div>
202
+ </Transition>
203
+ </div>
179
204
  </teleport>
180
205
  </template>