@teammodlr/ui-kit 2.1.18 → 2.1.20

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/lib/components/modal/Modal.vue.d.ts +1 -0
  2. package/lib/index.cjs.js +1 -1
  3. package/lib/index.es.js +1215 -1224
  4. package/package.json +1 -1
  5. package/src/components/modal/Modal.vue +72 -69
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teammodlr/ui-kit",
3
- "version": "2.1.18",
3
+ "version": "2.1.20",
4
4
  "description": "",
5
5
  "main": "lib/index.cjs.js",
6
6
  "module": "lib/index.es.js",
package/src/components/modal/Modal.vue CHANGED
@@ -1,71 +1,73 @@
1
1
  <template>
2
2
  <Teleport :to="'body'">
3
- <Transition
3
+ <TransitionGroup
4
4
  type="animation"
5
5
  :enter-active-class="fade.enterActive"
6
6
  :leave-active-class="fade.leaveActive"
7
7
  :enter-from-class="fade.enterFrom"
8
8
  :leave-to-class="fade.leaveTo">
9
- <div class="ui-modal" v-if="isOpen" :style="{ zIndex: zIndex }">
10
- <div :class="style.mask" :style="{ zIndex: zIndex }"></div>
9
+ <div
10
+ :class="style.mask"
11
+ :style="{ zIndex: zIndex }"
12
+ v-if="isOpen"></div>
13
+ <div
14
+ tabIndex="-1"
15
+ v-if="isOpen"
16
+ @keydown="onWrapperKeyDown"
17
+ ref="wrapperRef"
18
+ role="dialog"
19
+ :class="computedWrapperClasses"
20
+ :style="computedWrapperStyles"
21
+ @click="onOutsideClick">
22
+ <!-- <Transition-->
23
+ <!-- type="animation"-->
24
+ <!-- :enter-active-class="modalScale.enterActive"-->
25
+ <!-- :leave-active-class="modalScale.leaveActive"-->
26
+ <!-- :enter-from-class="modalScale.enterFrom"-->
27
+ <!-- :leave-to-class="modalScale.leaveTo">-->
11
28
  <div
12
- tabIndex="-1"
13
- @keydown="onWrapperKeyDown"
14
- ref="wrapperRef"
15
- role="dialog"
16
- :class="computedWrapperClasses"
17
- :style="computedWrapperStyles"
18
- @click="onOutsideClick">
19
- <!-- <Transition-->
20
- <!-- type="animation"-->
21
- <!-- :enter-active-class="modalScale.enterActive"-->
22
- <!-- :leave-active-class="modalScale.leaveActive"-->
23
- <!-- :enter-from-class="modalScale.enterFrom"-->
24
- <!-- :leave-to-class="modalScale.leaveTo">-->
29
+ :class="computedModalClasses"
30
+ role="document"
31
+ v-bind="$attrs"
32
+ :style="contentStyleRef">
25
33
  <div
26
- :class="computedModalClasses"
27
- role="document"
28
- v-bind="$attrs"
29
- :style="contentStyleRef">
30
- <div
31
- :class="computedContainerClasses"
32
- @mousedown="onContentMouseDown"
33
- @mouseup="onContentMouseUp"
34
- ref="target">
35
- <template v-if="loading">
36
- <slot name="loading"> Loading...</slot>
37
- </template>
38
- <template v-else>
39
- <div :class="style.sidebar" v-if="hasSidebar">
40
- <slot name="sidebar"></slot>
41
- </div>
42
- <div :class="style.content">
43
- <div
44
- v-if="title || showClose"
45
- :class="style.header">
46
- <div :class="style.title" v-if="title">
47
- <div>{{ title }}</div>
48
- </div>
49
- </div>
50
- <button
51
- v-if="showClose"
52
- :class="style.close"
53
- @click="close"></button>
54
- <div :class="style.body">
55
- <slot name="body"></slot>
56
- <slot></slot>
57
- </div>
58
- <div :class="style.footer" v-if="hasFooter">
59
- <slot name="footer"></slot>
34
+ :class="computedContainerClasses"
35
+ @mousedown="onContentMouseDown"
36
+ @mouseup="onContentMouseUp"
37
+ ref="target">
38
+ <template v-if="loading">
39
+ <slot name="loading"> Loading...</slot>
40
+ </template>
41
+ <template v-else>
42
+ <div :class="style.sidebar" v-if="hasSidebar">
43
+ <slot name="sidebar"></slot>
44
+ </div>
45
+ <div :class="style.content">
46
+ <div
47
+ v-if="title || showClose"
48
+ :class="style.header">
49
+ <div :class="style.title" v-if="title">
50
+ <div>{{ title }}</div>
60
51
  </div>
61
52
  </div>
62
- </template>
63
- </div>
53
+ <button
54
+ v-if="showClose"
55
+ :class="style.close"
56
+ @click="close"></button>
57
+ <div :class="style.body">
58
+ <slot name="body"></slot>
59
+ <slot></slot>
60
+ </div>
61
+ <div :class="style.footer" v-if="hasFooter">
62
+ <slot name="footer"></slot>
63
+ </div>
64
+ </div>
65
+ </template>
64
66
  </div>
65
- <!-- </Transition>-->
66
67
  </div>
68
+ <!-- </Transition>-->
67
69
  </div>
68
- </Transition>
70
+ </TransitionGroup>
69
71
  </Teleport>
70
72
  </template>
71
73
 
@@ -265,20 +267,20 @@ export default defineComponent({
265
267
  }, 250);
266
268
  }
267
269
 
268
- watch(
269
- () => isOpen.value,
270
- value => {
271
- if (value) {
272
- zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
273
- emit('open');
274
- nextTick(() => {
275
- // activate()
276
- });
277
- } else {
278
- // deactivate()
279
- }
280
- }
281
- );
270
+ // watch(
271
+ // () => isOpen.value,
272
+ // value => {
273
+ // if (value) {
274
+ // zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
275
+ // emit('open');
276
+ // nextTick(() => {
277
+ // // activate()
278
+ // });
279
+ // } else {
280
+ // // deactivate()
281
+ // }
282
+ // }
283
+ // );
282
284
 
283
285
  return {
284
286
  close,
@@ -300,7 +302,8 @@ export default defineComponent({
300
302
  contentStyleRef,
301
303
  wrapperRef,
302
304
  hasSidebar,
303
- hasFooter
305
+ hasFooter,
306
+ nextZIndex
304
307
  };
305
308
  }
306
309
  });