@maas/vue-equipment 0.25.3 → 0.26.0

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 (16) hide show
  1. package/dist/nuxt/module.json +1 -1
  2. package/dist/plugins/MagicCommand/src/components/MagicCommandDrawer.vue +3 -2
  3. package/dist/plugins/MagicCommand/src/components/MagicCommandModal.vue +3 -2
  4. package/dist/plugins/MagicDrawer/src/components/MagicDrawer.vue +60 -63
  5. package/dist/plugins/MagicModal/src/components/MagicModal.vue +48 -50
  6. package/dist/plugins/MagicPlayer/src/components/MagicPlayer.vue +1 -0
  7. package/dist/plugins/MagicPlayer/src/composables/private/usePlayerMediaApi.mjs +9 -1
  8. package/dist/utils/css/transitions/clip.css +2 -2
  9. package/dist/utils/css/transitions/fade-up.css +2 -3
  10. package/dist/utils/css/transitions/fade.css +2 -3
  11. package/dist/utils/css/transitions/slide-btt.css +2 -2
  12. package/dist/utils/css/transitions/slide-ltr.css +3 -3
  13. package/dist/utils/css/transitions/slide-rtl.css +2 -3
  14. package/dist/utils/css/transitions/slide-ttb.css +2 -4
  15. package/dist/utils/css/transitions/zoom.css +3 -3
  16. package/package.json +1 -1
package/dist/nuxt/module.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@maas/vue-equipment/nuxt",
3
3
  "configKey": "vueEquipment",
4
- "version": "0.25.2"
4
+ "version": "0.25.4"
5
5
  }
package/dist/plugins/MagicCommand/src/components/MagicCommandDrawer.vue CHANGED
@@ -31,12 +31,13 @@ function afterLeaveCallback() {
31
31
  }
32
32
 
33
33
  const { close, isActive } = useCommandApi(commandId)
34
+ const drawerApi = useDrawerApi(commandId)
34
35
 
35
36
  watch(isActive, (value) => {
36
37
  if (value) {
37
- useDrawerApi(commandId).open()
38
+ drawerApi.open()
38
39
  } else {
39
- useDrawerApi(commandId).close()
40
+ drawerApi.close()
40
41
  }
41
42
  })
42
43
 
package/dist/plugins/MagicCommand/src/components/MagicCommandModal.vue CHANGED
@@ -31,12 +31,13 @@ function afterLeaveCallback() {
31
31
  }
32
32
 
33
33
  const { close, isActive } = useCommandApi(commandId)
34
+ const modalApi = useModalApi(commandId)
34
35
 
35
36
  watch(isActive, (value) => {
36
37
  if (value) {
37
- useModalApi(commandId).open()
38
+ modalApi.open()
38
39
  } else {
39
- useModalApi(commandId).close()
40
+ modalApi.close()
40
41
  }
41
42
  })
42
43
 
package/dist/plugins/MagicDrawer/src/components/MagicDrawer.vue CHANGED
@@ -1,78 +1,75 @@
1
1
  <template>
2
- <transition :duration="5000">
3
- <teleport
4
- v-if="wrapperActive"
5
- :to="mappedOptions.teleport?.target"
6
- :disabled="mappedOptions.teleport?.disabled"
2
+ <teleport
3
+ v-if="wrapperActive"
4
+ :to="mappedOptions.teleport?.target"
5
+ :disabled="mappedOptions.teleport?.disabled"
6
+ >
7
+ <div
8
+ ref="drawerRef"
9
+ class="magic-drawer"
10
+ :id="toValue(id)"
11
+ :class="[
12
+ toValue(props.class),
13
+ `-${mappedOptions.position}`,
14
+ {
15
+ '-dragging': dragging,
16
+ '-wheeling': wheeling,
17
+ '-disabled': disabled,
18
+ },
19
+ ]"
20
+ aria-modal="true"
7
21
  >
8
- <div
9
- ref="drawerRef"
10
- class="magic-drawer"
11
- :id="toValue(id)"
12
- :class="[
13
- toValue(props.class),
14
- `-${mappedOptions.position}`,
15
- {
16
- '-dragging': dragging,
17
- '-wheeling': wheeling,
18
- '-disabled': disabled,
19
- },
20
- ]"
21
- aria-modal="true"
22
+ <transition
23
+ v-if="mappedOptions.backdrop || !!$slots.backdrop"
24
+ :name="backdropTransition"
22
25
  >
26
+ <div
27
+ v-show="innerActive"
28
+ class="magic-drawer__backdrop"
29
+ @click.self="guardedClose"
30
+ >
31
+ <slot name="backdrop" />
32
+ </div>
33
+ </transition>
34
+
35
+ <div class="magic-drawer__wrapper" ref="wrapperRef">
23
36
  <transition
24
- v-if="mappedOptions.backdrop || !!$slots.backdrop"
25
- :name="backdropTransition"
37
+ :name="contentTransition"
38
+ @before-leave="onBeforeLeave"
39
+ @leave="onLeave"
40
+ @after-leave="onAfterLeave"
41
+ @before-enter="onBeforeEnter"
42
+ @enter="onEnter"
43
+ @after-enter="onAfterEnter"
26
44
  >
27
- <div
28
- v-show="innerActive"
29
- class="magic-drawer__backdrop"
30
- @click.self="guardedClose"
31
- >
32
- <slot name="backdrop" />
45
+ <div v-show="innerActive" class="magic-drawer__content">
46
+ <component
47
+ :is="mappedOptions.tag"
48
+ ref="elRef"
49
+ class="magic-drawer__drag"
50
+ :style="style"
51
+ @pointerdown="guardedPointerdown"
52
+ @click="guardedClick"
53
+ >
54
+ <component
55
+ v-if="component"
56
+ v-bind="props"
57
+ :is="component"
58
+ @close="guardedClose"
59
+ />
60
+ <slot v-else />
61
+ <div v-if="hasDragged" class="magic-drawer__overlay" />
62
+ </component>
33
63
  </div>
34
64
  </transition>
35
-
36
- <div class="magic-drawer__wrapper" ref="wrapperRef">
37
- <transition
38
- :name="contentTransition"
39
- @before-leave="onBeforeLeave"
40
- @leave="onLeave"
41
- @after-leave="onAfterLeave"
42
- @before-enter="onBeforeEnter"
43
- @enter="onEnter"
44
- @after-enter="onAfterEnter"
45
- >
46
- <div v-show="innerActive" class="magic-drawer__content">
47
- <component
48
- :is="mappedOptions.tag"
49
- ref="elRef"
50
- class="magic-drawer__drag"
51
- :style="style"
52
- @pointerdown="guardedPointerdown"
53
- @click="guardedClick"
54
- >
55
- <component
56
- v-if="component"
57
- v-bind="props"
58
- :is="component"
59
- @close="guardedClose"
60
- />
61
- <slot v-else />
62
- <div v-if="hasDragged" class="magic-drawer__overlay" />
63
- </component>
64
- </div>
65
- </transition>
66
- </div>
67
65
  </div>
68
- </teleport>
69
- </transition>
66
+ </div>
67
+ </teleport>
70
68
  </template>
71
69
 
72
70
  <script setup lang="ts">
73
71
  import {
74
72
  ref,
75
- toRefs,
76
73
  watch,
77
74
  computed,
78
75
  nextTick,
@@ -309,8 +306,8 @@ function saveOvershoot() {
309
306
  if (mappedOptions.keys && canClose) {
310
307
  for (const key of mappedOptions.keys) {
311
308
  onKeyStroke(key, (e) => {
312
- e.preventDefault()
313
309
  close()
310
+ e.preventDefault()
314
311
  })
315
312
  }
316
313
  }
package/dist/plugins/MagicModal/src/components/MagicModal.vue CHANGED
@@ -1,58 +1,56 @@
1
1
  <template>
2
- <transition :duration="5000">
3
- <teleport
4
- v-if="wrapperActive"
5
- :to="mappedOptions.teleport?.target"
6
- :disabled="mappedOptions.teleport?.disabled"
2
+ <teleport
3
+ v-if="wrapperActive"
4
+ :to="mappedOptions.teleport?.target"
5
+ :disabled="mappedOptions.teleport?.disabled"
6
+ >
7
+ <div
8
+ :is="mappedOptions.tag"
9
+ ref="modalRef"
10
+ class="magic-modal"
11
+ :id="toValue(id)"
12
+ :class="toValue(props.class)"
13
+ @click.self="close"
14
+ aria-modal="true"
7
15
  >
8
- <div
9
- :is="mappedOptions.tag"
10
- ref="modalRef"
11
- class="magic-modal"
12
- :id="toValue(id)"
13
- :class="toValue(props.class)"
14
- @click.self="close"
15
- aria-modal="true"
16
+ <transition
17
+ v-if="mappedOptions.backdrop || !!$slots.backdrop"
18
+ :name="mappedOptions.transitions?.backdrop"
16
19
  >
17
- <transition
18
- v-if="mappedOptions.backdrop || !!$slots.backdrop"
19
- :name="mappedOptions.transitions?.backdrop"
20
+ <div
21
+ v-show="innerActive"
22
+ class="magic-modal__backdrop"
23
+ @click.self="close"
20
24
  >
21
- <div
22
- v-show="innerActive"
23
- class="magic-modal__backdrop"
24
- @click.self="close"
25
- >
26
- <slot name="backdrop" />
27
- </div>
28
- </transition>
29
- <transition
30
- :name="mappedOptions.transitions?.content"
31
- @before-leave="onBeforeLeave"
32
- @leave="onLeave"
33
- @after-leave="onAfterLeave"
34
- @before-enter="onBeforeEnter"
35
- @enter="onEnter"
36
- @after-enter="onAfterEnter"
25
+ <slot name="backdrop" />
26
+ </div>
27
+ </transition>
28
+ <transition
29
+ :name="mappedOptions.transitions?.content"
30
+ @before-leave="onBeforeLeave"
31
+ @leave="onLeave"
32
+ @after-leave="onAfterLeave"
33
+ @before-enter="onBeforeEnter"
34
+ @enter="onEnter"
35
+ @after-enter="onAfterEnter"
36
+ >
37
+ <component
38
+ :is="mappedOptions.tag"
39
+ v-show="innerActive"
40
+ class="magic-modal__content"
41
+ @click.self="close"
37
42
  >
38
43
  <component
39
- :is="mappedOptions.tag"
40
- v-show="innerActive"
41
- class="magic-modal__content"
42
- @click.self="close"
43
- >
44
- <component
45
- v-if="component"
46
- v-bind="props"
47
- :is="component"
48
- @close="close"
49
- />
50
- <slot v-else />
51
- </component>
52
- </transition>
53
- </div>
54
- </teleport>
55
- </transition>
44
+ v-if="component"
45
+ v-bind="props"
46
+ :is="component"
47
+ @close="close"
48
+ />
49
+ <slot v-else />
50
+ </component>
51
+ </transition>
52
+ </div>
53
+ </teleport>
56
54
  </template>
57
55
 
58
56
  <script setup lang="ts">
@@ -151,8 +149,8 @@ function onClose() {
151
149
  if (mappedOptions.keys) {
152
150
  for (const key of mappedOptions.keys) {
153
151
  onKeyStroke(key, (e) => {
154
- e.preventDefault()
155
152
  close()
153
+ e.preventDefault()
156
154
  })
157
155
  }
158
156
  }
package/dist/plugins/MagicPlayer/src/components/MagicPlayer.vue CHANGED
@@ -13,6 +13,7 @@
13
13
  playsinline
14
14
  disablePictureInPicture
15
15
  :loop="props.loop"
16
+ :muted="muted"
16
17
  />
17
18
  <slot />
18
19
  </div>
package/dist/plugins/MagicPlayer/src/composables/private/usePlayerMediaApi.mjs CHANGED
@@ -64,7 +64,15 @@ export function usePlayerMediaApi(args) {
64
64
  const el = toValue(mediaRef);
65
65
  if (!el)
66
66
  return;
67
- isPlaying ? el.play() : el.pause();
67
+ if (isPlaying) {
68
+ const playPromise = el.play();
69
+ if (playPromise !== void 0)
70
+ playPromise.catch((error) => {
71
+ console.warn("Playback error:", error);
72
+ });
73
+ } else {
74
+ el.pause();
75
+ }
68
76
  }
69
77
  );
70
78
  useEventListener(mediaRef, "timeupdate", () => {
package/dist/utils/css/transitions/clip.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .clip-enter-active {
2
- animation: clip-in 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards;
2
+ animation: clip-in var(--duration, 600ms) var(--easing, cubic-bezier(0.83, 0, 0.17, 1)) forwards;
3
3
  }
4
4
 
5
5
  .clip-leave-active {
6
- animation: clip-out 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards;
6
+ animation: clip-out var(--duration, 600ms) var(--easing, cubic-bezier(0.83, 0, 0.17, 1)) forwards;
7
7
  }
package/dist/utils/css/transitions/fade-up.css CHANGED
@@ -1,8 +1,7 @@
1
1
  .fade-up-enter-active {
2
- animation: fade-up-in 300ms ease;
2
+ animation: fade-up-in var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
3
3
  }
4
4
 
5
5
  .fade-up-leave-active {
6
- animation: fade-up-out 300ms ease;
6
+ animation: fade-up-out var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
7
7
  }
8
-
package/dist/utils/css/transitions/fade.css CHANGED
@@ -1,8 +1,7 @@
1
1
  .fade-enter-active {
2
- animation: fade-in 300ms ease;
2
+ animation: fade-in var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
3
3
  }
4
4
 
5
5
  .fade-leave-active {
6
- animation: fade-out 300ms ease;
6
+ animation: fade-out var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
7
7
  }
8
-
package/dist/utils/css/transitions/slide-btt.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .slide-btt-enter-active {
2
- animation: slide-btt-in 300ms ease;
2
+ animation: slide-btt-in var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
3
3
  }
4
4
 
5
5
  .slide-btt-leave-active {
6
- animation: slide-btt-out 300ms ease;
6
+ animation: slide-btt-out var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
7
7
  }
8
8
 
package/dist/utils/css/transitions/slide-ltr.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .slide-ltr-enter-active {
2
- animation: slide-ltr-in 300ms ease;
2
+ animation: slide-ltr-in var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
3
3
  }
4
4
 
5
5
  .slide-ltr-leave-active {
6
- animation: slide-ltr-out 300ms ease;
7
- }
6
+ animation: slide-ltr-out var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
7
+ }
package/dist/utils/css/transitions/slide-rtl.css CHANGED
@@ -1,8 +1,7 @@
1
1
  .slide-rtl-enter-active {
2
- animation: slide-rtl-in 300ms ease;
2
+ animation: slide-rtl-in var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
3
3
  }
4
4
 
5
5
  .slide-rtl-leave-active {
6
- animation: slide-rtl-out 300ms ease;
6
+ animation: slide-rtl-out var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
7
7
  }
8
-
package/dist/utils/css/transitions/slide-ttb.css CHANGED
@@ -1,9 +1,7 @@
1
1
  .slide-ttb-enter-active {
2
- animation: slide-ttb-in 300ms ease;
2
+ animation: slide-ttb-in var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
3
3
  }
4
4
 
5
5
  .slide-ttb-leave-active {
6
- animation: slide-ttb-out 300ms ease;
6
+ animation: slide-ttb-out var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
7
7
  }
8
-
9
-
package/dist/utils/css/transitions/zoom.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .zoom-enter-active {
2
- animation: zoom-in 300ms ease;
2
+ animation: zoom-in var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
3
3
  }
4
4
 
5
5
  .zoom-leave-active {
6
- animation: zoom-out 300ms ease;
7
- }
6
+ animation: zoom-out var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
7
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@maas/vue-equipment",
3
3
  "description": "A magic collection of Vue composables, plugins, components and directives",
4
- "version": "0.25.3",
4
+ "version": "0.26.0",
5
5
  "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
6
6
  "devDependencies": {
7
7
  "@antfu/ni": "^0.21.12",