@maas/vue-equipment 0.27.3 → 0.28.1

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 (138) hide show
  1. package/dist/composables/index.d.mts +1 -9
  2. package/dist/composables/index.d.ts +1 -9
  3. package/dist/composables/index.js +2 -55
  4. package/dist/composables/index.js.map +1 -1
  5. package/dist/composables/index.mjs +1 -53
  6. package/dist/composables/index.mjs.map +1 -1
  7. package/dist/nuxt/module.json +1 -1
  8. package/dist/nuxt/module.mjs +16 -16
  9. package/dist/plugins/MagicCommand/index.d.ts +3 -4
  10. package/dist/plugins/MagicCommand/index.mjs +8 -7
  11. package/dist/plugins/MagicCommand/nuxt.mjs +1 -5
  12. package/dist/plugins/MagicCommand/src/components/MagicCommandBody.vue +3 -3
  13. package/dist/plugins/MagicCommand/src/components/MagicCommandDrawer.vue +10 -8
  14. package/dist/plugins/MagicCommand/src/components/MagicCommandItem.vue +2 -2
  15. package/dist/plugins/MagicCommand/src/components/MagicCommandModal.vue +10 -8
  16. package/dist/plugins/MagicCommand/src/components/MagicCommandProvider.vue +6 -6
  17. package/dist/plugins/MagicCommand/src/components/MagicCommandView.vue +2 -2
  18. package/dist/plugins/MagicCommand/src/composables/{useCommandApi.d.ts → useMagicCommand.d.ts} +1 -1
  19. package/dist/plugins/MagicCommand/src/composables/{useCommandApi.mjs → useMagicCommand.mjs} +5 -7
  20. package/dist/plugins/MagicCommand/src/symbols/index.d.ts +3 -3
  21. package/dist/plugins/MagicCommand/src/symbols/index.mjs +3 -3
  22. package/dist/plugins/MagicCookie/index.d.ts +2 -3
  23. package/dist/plugins/MagicCookie/index.mjs +2 -3
  24. package/dist/plugins/MagicCookie/nuxt.mjs +1 -1
  25. package/dist/plugins/MagicCookie/src/components/MagicCookie.vue +2 -2
  26. package/dist/plugins/MagicCookie/src/composables/{useCookieApi.d.ts → useMagicCookie.d.ts} +2 -1
  27. package/dist/plugins/MagicCookie/src/composables/{useCookieApi.mjs → useMagicCookie.mjs} +3 -3
  28. package/dist/plugins/MagicDraggable/index.d.ts +1 -2
  29. package/dist/plugins/MagicDraggable/index.mjs +1 -2
  30. package/dist/plugins/MagicDraggable/src/components/MagicDraggable.vue +12 -10
  31. package/dist/plugins/MagicDraggable/src/components/MagicDraggable.vue.d.ts +2 -2
  32. package/dist/plugins/MagicDraggable/src/composables/private/useDraggableDrag.d.ts +1 -0
  33. package/dist/plugins/MagicDraggable/src/composables/private/useDraggableDrag.mjs +33 -3
  34. package/dist/plugins/MagicDraggable/src/composables/private/useDraggableScrollLock.d.ts +6 -0
  35. package/dist/plugins/MagicDraggable/src/composables/private/useDraggableScrollLock.mjs +42 -0
  36. package/dist/plugins/MagicDraggable/src/types/index.d.ts +1 -0
  37. package/dist/plugins/MagicDraggable/src/utils/defaultOptions.d.ts +4 -1
  38. package/dist/plugins/MagicDraggable/src/utils/defaultOptions.mjs +2 -1
  39. package/dist/plugins/MagicDrawer/index.d.ts +2 -3
  40. package/dist/plugins/MagicDrawer/index.mjs +2 -3
  41. package/dist/plugins/MagicDrawer/nuxt.mjs +1 -5
  42. package/dist/plugins/MagicDrawer/src/components/MagicDrawer.vue +13 -23
  43. package/dist/plugins/MagicDrawer/src/composables/private/useDrawerCallback.mjs +10 -9
  44. package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDOM.d.ts +13 -0
  45. package/dist/plugins/MagicDrawer/src/composables/{useDrawerApi.mjs → private/useDrawerDOM.mjs} +4 -46
  46. package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDrag.mjs +14 -10
  47. package/dist/plugins/MagicDrawer/src/composables/private/useDrawerProgress.mjs +22 -20
  48. package/dist/plugins/MagicDrawer/src/composables/private/useDrawerSnap.mjs +5 -4
  49. package/dist/plugins/MagicDrawer/src/composables/private/useDrawerState.d.ts +4 -0
  50. package/dist/plugins/MagicDrawer/src/composables/private/useDrawerState.mjs +5 -1
  51. package/dist/plugins/MagicDrawer/src/composables/private/useDrawerUtils.d.ts +0 -7
  52. package/dist/plugins/MagicDrawer/src/composables/private/useDrawerUtils.mjs +1 -6
  53. package/dist/plugins/MagicDrawer/src/composables/useMagicDrawer.d.ts +13 -0
  54. package/dist/plugins/MagicDrawer/src/composables/useMagicDrawer.mjs +31 -0
  55. package/dist/plugins/MagicDrawer/src/types/index.d.ts +4 -0
  56. package/dist/plugins/MagicEmitter/index.d.ts +4 -0
  57. package/dist/plugins/MagicEmitter/index.mjs +2 -0
  58. package/dist/plugins/MagicEmitter/nuxt.d.ts +2 -0
  59. package/dist/plugins/MagicEmitter/nuxt.mjs +12 -0
  60. package/dist/plugins/MagicEmitter/src/composables/useMagicEmitter.d.ts +446 -0
  61. package/dist/plugins/{MagicModal/src/composables/useModalEmitter.mjs → MagicEmitter/src/composables/useMagicEmitter.mjs} +1 -1
  62. package/dist/plugins/MagicEmitter/src/types/index.d.ts +19 -0
  63. package/dist/plugins/MagicEmitter/src/types/index.mjs +0 -0
  64. package/dist/plugins/MagicMarquee/nuxt.mjs +1 -3
  65. package/dist/plugins/MagicMarquee/src/components/MagicMarquee.vue +1 -1
  66. package/dist/plugins/MagicModal/index.d.ts +2 -3
  67. package/dist/plugins/MagicModal/index.mjs +2 -3
  68. package/dist/plugins/MagicModal/nuxt.mjs +1 -5
  69. package/dist/plugins/MagicModal/src/components/MagicModal.vue +8 -9
  70. package/dist/plugins/MagicModal/src/composables/private/useModalCallback.mjs +10 -9
  71. package/dist/plugins/MagicModal/src/composables/private/useModalDOM.d.ts +13 -0
  72. package/dist/plugins/MagicModal/src/composables/{useModalApi.mjs → private/useModalDOM.mjs} +3 -17
  73. package/dist/plugins/MagicModal/src/composables/useMagicModal.d.ts +6 -0
  74. package/dist/plugins/MagicModal/src/composables/useMagicModal.mjs +17 -0
  75. package/dist/plugins/MagicNoise/index.d.ts +1 -1
  76. package/dist/plugins/MagicNoise/index.mjs +1 -1
  77. package/dist/plugins/MagicNoise/nuxt.mjs +1 -6
  78. package/dist/plugins/MagicNoise/src/components/MagicNoise.vue +2 -2
  79. package/dist/plugins/MagicNoise/src/composables/{useNoiseApi.d.ts → private/useNoiseApi.d.ts} +1 -1
  80. package/dist/plugins/MagicNoise/src/composables/{useNoiseApi.mjs → private/useNoiseApi.mjs} +1 -1
  81. package/dist/plugins/MagicPlayer/index.d.ts +2 -2
  82. package/dist/plugins/MagicPlayer/index.mjs +2 -2
  83. package/dist/plugins/MagicPlayer/nuxt.mjs +1 -1
  84. package/dist/plugins/MagicPlayer/src/composables/{usePlayerApi.d.ts → useMagicPlayer.d.ts} +2 -2
  85. package/dist/plugins/MagicPlayer/src/composables/{usePlayerApi.mjs → useMagicPlayer.mjs} +1 -1
  86. package/dist/plugins/MagicScroll/index.d.ts +2 -4
  87. package/dist/plugins/MagicScroll/index.mjs +6 -10
  88. package/dist/plugins/MagicScroll/src/components/MagicScrollCollision.vue +3 -3
  89. package/dist/plugins/MagicScroll/src/components/MagicScrollMotion.vue +2 -2
  90. package/dist/plugins/MagicScroll/src/components/MagicScrollProvider.vue +5 -5
  91. package/dist/plugins/MagicScroll/src/components/MagicScrollProvider.vue.d.ts +1 -1
  92. package/dist/plugins/MagicScroll/src/components/MagicScrollScene.vue +8 -8
  93. package/dist/plugins/MagicScroll/src/composables/{useScrollApi.d.ts → private/useScrollApi.d.ts} +1 -1
  94. package/dist/plugins/MagicScroll/src/composables/{useScrollApi.mjs → private/useScrollApi.mjs} +4 -4
  95. package/dist/plugins/MagicScroll/src/composables/useCollisionDetect.mjs +2 -2
  96. package/dist/plugins/MagicScroll/src/symbols/index.d.ts +4 -4
  97. package/dist/plugins/MagicScroll/src/symbols/index.mjs +4 -4
  98. package/dist/plugins/MagicScroll/src/types/index.d.ts +2 -2
  99. package/dist/plugins/MagicToast/index.d.ts +2 -3
  100. package/dist/plugins/MagicToast/index.mjs +2 -3
  101. package/dist/plugins/MagicToast/nuxt.mjs +0 -4
  102. package/dist/plugins/MagicToast/src/components/MagicToast.vue +5 -3
  103. package/dist/plugins/MagicToast/src/composables/private/useToastApi.d.ts +5 -0
  104. package/dist/plugins/MagicToast/src/composables/private/useToastApi.mjs +23 -0
  105. package/dist/plugins/MagicToast/src/composables/private/useToastCallback.d.ts +3 -3
  106. package/dist/plugins/MagicToast/src/composables/private/useToastCallback.mjs +11 -9
  107. package/dist/plugins/MagicToast/src/composables/useMagicToast.d.ts +12 -0
  108. package/dist/plugins/MagicToast/src/composables/useMagicToast.mjs +36 -0
  109. package/dist/plugins/index.d.ts +1 -0
  110. package/dist/plugins/index.mjs +1 -0
  111. package/dist/utils/index.d.mts +10 -1
  112. package/dist/utils/index.d.ts +10 -1
  113. package/dist/utils/index.js +8 -0
  114. package/dist/utils/index.js.map +1 -1
  115. package/dist/utils/index.mjs +7 -0
  116. package/dist/utils/index.mjs.map +1 -1
  117. package/dist/utils/types/ValueOf.ts +1 -0
  118. package/dist/utils/types/index.ts +1 -0
  119. package/package.json +1 -1
  120. package/dist/plugins/MagicCommand/src/composables/useCommandEmitter.d.ts +0 -15
  121. package/dist/plugins/MagicCommand/src/composables/useCommandEmitter.mjs +0 -9
  122. package/dist/plugins/MagicCookie/src/composables/useCookieEmitter.d.ts +0 -15
  123. package/dist/plugins/MagicCookie/src/composables/useCookieEmitter.mjs +0 -9
  124. package/dist/plugins/MagicDraggable/src/composables/useDraggableApi.d.ts +0 -1
  125. package/dist/plugins/MagicDraggable/src/composables/useDraggableApi.mjs +0 -2
  126. package/dist/plugins/MagicDrawer/src/composables/useDrawerApi.d.ts +0 -26
  127. package/dist/plugins/MagicDrawer/src/composables/useDrawerEmitter.d.ts +0 -15
  128. package/dist/plugins/MagicDrawer/src/composables/useDrawerEmitter.mjs +0 -9
  129. package/dist/plugins/MagicModal/src/composables/useModalApi.d.ts +0 -19
  130. package/dist/plugins/MagicModal/src/composables/useModalEmitter.d.ts +0 -15
  131. package/dist/plugins/MagicScroll/src/composables/useCollisionEmitter.d.ts +0 -15
  132. package/dist/plugins/MagicScroll/src/composables/useCollisionEmitter.mjs +0 -9
  133. package/dist/plugins/MagicToast/src/composables/useToastApi.d.ts +0 -13
  134. package/dist/plugins/MagicToast/src/composables/useToastApi.mjs +0 -50
  135. package/dist/plugins/MagicToast/src/composables/useToastEmitter.d.ts +0 -15
  136. package/dist/plugins/MagicToast/src/composables/useToastEmitter.mjs +0 -9
  137. /package/dist/plugins/MagicMarquee/src/composables/{useMarqueeApi.d.ts → private/useMarqueeApi.d.ts} +0 -0
  138. /package/dist/plugins/MagicMarquee/src/composables/{useMarqueeApi.mjs → private/useMarqueeApi.mjs} +0 -0
@@ -23,7 +23,7 @@ import { useEventListener, onKeyStroke } from '@vueuse/core'
23
23
  import { uuid } from '@maas/vue-equipment/utils'
24
24
  import { useCommandStore } from '../composables/private/useCommandStore'
25
25
  import { useCommandItem } from '../composables/private/useCommandItem'
26
- import { CommandInstanceId } from '../symbols'
26
+ import { MagicCommandInstanceId } from '../symbols'
27
27
 
28
28
  interface Props {
29
29
  id?: string
@@ -39,7 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
39
39
  })
40
40
  const elRef = ref<HTMLElement | undefined>(undefined)
41
41
 
42
- const commandId = inject(CommandInstanceId, '')
42
+ const commandId = inject(MagicCommandInstanceId, '')
43
43
  const { selectItem, activeItem } = useCommandItem(commandId)
44
44
 
45
45
  const mappedId = computed(() => {
@@ -11,9 +11,10 @@
11
11
 
12
12
  <script setup lang="ts">
13
13
  import { inject, watch, onBeforeUnmount, type MaybeRef } from 'vue'
14
- import { useModalApi, useModalEmitter } from '../../../MagicModal'
15
- import { useCommandApi } from './../composables/useCommandApi'
16
- import { CommandInstanceId } from './../symbols'
14
+ import { useMagicEmitter } from '@maas/vue-equipment/plugins'
15
+ import { useMagicModal } from '../../../MagicModal'
16
+ import { useMagicCommand } from '../composables/useMagicCommand'
17
+ import { MagicCommandInstanceId } from './../symbols'
17
18
 
18
19
  import type { CommandModalOptions } from '../types'
19
20
 
@@ -24,14 +25,15 @@ interface MagicCommandProps {
24
25
 
25
26
  const props = defineProps<MagicCommandProps>()
26
27
 
27
- const commandId = inject(CommandInstanceId, '')
28
+ const commandId = inject(MagicCommandInstanceId, '')
29
+ const emitter = useMagicEmitter()
28
30
 
29
31
  function afterLeaveCallback() {
30
32
  close()
31
33
  }
32
34
 
33
- const { close, isActive } = useCommandApi(commandId)
34
- const modalApi = useModalApi(commandId)
35
+ const { close, isActive } = useMagicCommand(commandId)
36
+ const modalApi = useMagicModal(commandId)
35
37
 
36
38
  watch(isActive, (value) => {
37
39
  if (value) {
@@ -41,10 +43,10 @@ watch(isActive, (value) => {
41
43
  }
42
44
  })
43
45
 
44
- useModalEmitter().on('afterLeave', afterLeaveCallback)
46
+ emitter.on('afterLeave', afterLeaveCallback)
45
47
 
46
48
  onBeforeUnmount(() => {
47
- useModalEmitter().off('afterLeave', afterLeaveCallback)
49
+ emitter.off('afterLeave', afterLeaveCallback)
48
50
  close()
49
51
  })
50
52
  </script>
@@ -8,9 +8,9 @@
8
8
  import { watch, provide, onBeforeUnmount, type MaybeRef } from 'vue'
9
9
  import { createDefu } from 'defu'
10
10
  import { useMagicKeys } from '@vueuse/core'
11
- import { defaultOptions } from './../utils/defaultOptions'
12
- import { useCommandApi } from './../composables/useCommandApi'
13
- import { CommandInstanceId, CommandOptionsKey } from './../symbols'
11
+ import { defaultOptions } from '../utils/defaultOptions'
12
+ import { useMagicCommand } from '../composables/useMagicCommand'
13
+ import { MagicCommandInstanceId, MagicCommandOptions } from '../symbols'
14
14
 
15
15
  import type { CommandOptions } from './../types/index'
16
16
 
@@ -35,7 +35,7 @@ const props = withDefaults(defineProps<MagicCommandProps>(), {
35
35
  })
36
36
 
37
37
  const keys = useMagicKeys()
38
- const commandApi = useCommandApi(props.id)
38
+ const commandApi = useMagicCommand(props.id)
39
39
  const mappedOptions = customDefu(props.options, defaultOptions)
40
40
 
41
41
  const { open, close } = commandApi
@@ -64,6 +64,6 @@ onBeforeUnmount(() => {
64
64
  close()
65
65
  })
66
66
 
67
- provide(CommandInstanceId, props.id)
68
- provide(CommandOptionsKey, mappedOptions)
67
+ provide(MagicCommandInstanceId, props.id)
68
+ provide(MagicCommandOptions, mappedOptions)
69
69
  </script>
@@ -18,7 +18,7 @@ import {
18
18
  import { uuid } from '@maas/vue-equipment/utils'
19
19
  import { useCommandStore } from '../composables/private/useCommandStore'
20
20
  import { useCommandView } from '../composables/private/useCommandView'
21
- import { CommandInstanceId } from '../symbols'
21
+ import { MagicCommandInstanceId } from '../symbols'
22
22
 
23
23
  interface Props {
24
24
  id?: string
@@ -26,7 +26,7 @@ interface Props {
26
26
  }
27
27
 
28
28
  const props = withDefaults(defineProps<Props>(), { default: false })
29
- const commandId = inject(CommandInstanceId, '')
29
+ const commandId = inject(MagicCommandInstanceId, '')
30
30
  const elRef = ref<HTMLElement | undefined>(undefined)
31
31
 
32
32
  const { activeView, selectView } = useCommandView()
@@ -1,5 +1,5 @@
1
1
  import { type MaybeRef } from 'vue';
2
- export declare function useCommandApi(id: MaybeRef<string>): {
2
+ export declare function useMagicCommand(id: MaybeRef<string>): {
3
3
  isActive: import("vue").ComputedRef<boolean>;
4
4
  open: () => void;
5
5
  close: () => void;
@@ -1,21 +1,19 @@
1
1
  import { computed, toValue } from "vue";
2
- import { uuid } from "@maas/vue-equipment/utils";
3
2
  import { useCommandStore } from "./private/useCommandStore.mjs";
4
3
  import { useCommandItem } from "./private/useCommandItem.mjs";
5
4
  import { useCommandView } from "./private/useCommandView.mjs";
6
- export function useCommandApi(id) {
7
- const mappedId = computed(() => toValue(id) || uuid());
5
+ export function useMagicCommand(id) {
8
6
  const isActive = computed(
9
- () => commandStore.value.map((item) => item.id).includes(mappedId.value)
7
+ () => commandStore.value.map((item) => item.id).includes(toValue(id))
10
8
  );
11
9
  const { commandStore, addInstance, removeInstance } = useCommandStore();
12
10
  function open() {
13
- addInstance(mappedId.value);
11
+ addInstance(toValue(id));
14
12
  }
15
13
  function close() {
16
- removeInstance(mappedId.value);
14
+ removeInstance(toValue(id));
17
15
  }
18
- const { selectItem, selectLastItem } = useCommandItem(mappedId);
16
+ const { selectItem, selectLastItem } = useCommandItem(toValue(id));
19
17
  const { selectView, selectLastView } = useCommandView();
20
18
  return {
21
19
  isActive,
@@ -1,5 +1,5 @@
1
1
  import type { InjectionKey, MaybeRef } from 'vue';
2
2
  import type { CommandOptions } from '../types.js';
3
- declare const CommandInstanceId: InjectionKey<MaybeRef<string>>;
4
- declare const CommandOptionsKey: InjectionKey<CommandOptions>;
5
- export { CommandInstanceId, CommandOptionsKey };
3
+ declare const MagicCommandInstanceId: InjectionKey<MaybeRef<string>>;
4
+ declare const MagicCommandOptions: InjectionKey<CommandOptions>;
5
+ export { MagicCommandInstanceId, MagicCommandOptions };
@@ -1,3 +1,3 @@
1
- const CommandInstanceId = Symbol();
2
- const CommandOptionsKey = Symbol();
3
- export { CommandInstanceId, CommandOptionsKey };
1
+ const MagicCommandInstanceId = Symbol();
2
+ const MagicCommandOptions = Symbol();
3
+ export { MagicCommandInstanceId, MagicCommandOptions };
@@ -1,8 +1,7 @@
1
1
  import type { Plugin } from 'vue';
2
2
  import MagicCookie from './src/components/MagicCookie.vue.js';
3
- import { useCookieApi } from './src/composables/useCookieApi.js';
4
- import { useCookieEmitter } from './src/composables/useCookieEmitter.js';
3
+ import { useMagicCookie } from './src/composables/useMagicCookie.js';
5
4
  import type { CookieEvents } from './src/types/index.js';
6
5
  declare const MagicCookiePlugin: Plugin;
7
- export { MagicCookiePlugin, MagicCookie, useCookieApi, useCookieEmitter };
6
+ export { MagicCookiePlugin, MagicCookie, useMagicCookie };
8
7
  export type { CookieEvents };
@@ -1,9 +1,8 @@
1
1
  import MagicCookie from "./src/components/MagicCookie.vue";
2
- import { useCookieApi } from "./src/composables/useCookieApi.mjs";
3
- import { useCookieEmitter } from "./src/composables/useCookieEmitter.mjs";
2
+ import { useMagicCookie } from "./src/composables/useMagicCookie.mjs";
4
3
  const MagicCookiePlugin = {
5
4
  install: (app) => {
6
5
  app.component("MagicCookie", MagicCookie);
7
6
  }
8
7
  };
9
- export { MagicCookiePlugin, MagicCookie, useCookieApi, useCookieEmitter };
8
+ export { MagicCookiePlugin, MagicCookie, useMagicCookie };
@@ -25,7 +25,7 @@ export default defineNuxtModule({
25
25
  });
26
26
  addImports({
27
27
  from: "@maas/vue-equipment/plugins/MagicCookie",
28
- name: "useCookieApi"
28
+ name: "useMagicCookie"
29
29
  });
30
30
  addImports({
31
31
  from: "@maas/vue-equipment/plugins/MagicCookie",
@@ -83,7 +83,7 @@
83
83
 
84
84
  <script lang="ts" setup>
85
85
  import { defineCookieApi } from '../composables/private/defineCookieApi'
86
- import { useCookieApi } from '../composables/useCookieApi'
86
+ import { useMagicCookie } from '../composables/useMagicCookie'
87
87
  import type { CookieRecord } from '../types'
88
88
 
89
89
  // Define the props and their default values
@@ -110,7 +110,7 @@ const {
110
110
  acceptSelected,
111
111
  reject,
112
112
  toggleSelection,
113
- } = useCookieApi()
113
+ } = useMagicCookie()
114
114
  </script>
115
115
 
116
116
  <style>
@@ -1,5 +1,5 @@
1
1
  import type { CookieConsent } from '../types.js';
2
- export declare function useCookieApi(): {
2
+ export declare function useMagicCookie(): {
3
3
  preferencesVisible: import("vue").Ref<boolean>;
4
4
  selectedCookies: import("vue").Ref<{
5
5
  [key: string]: boolean;
@@ -13,3 +13,4 @@ export declare function useCookieApi(): {
13
13
  onAcceptSelected: (handler: (args: CookieConsent) => void) => void;
14
14
  onReject: (handler: (args: CookieConsent) => void) => void;
15
15
  };
16
+ export type UseMagicCookieReturn = ReturnType<typeof useMagicCookie>;
@@ -1,11 +1,11 @@
1
1
  import { computed, ref } from "vue";
2
2
  import { useCookies } from "@vueuse/integrations/useCookies";
3
3
  import { toValue } from "@vueuse/core";
4
+ import { useMagicEmitter } from "@maas/vue-equipment/plugins";
4
5
  import { globalApiState } from "./private/defineCookieApi.mjs";
5
- import { useCookieEmitter } from "./useCookieEmitter.mjs";
6
6
  const preferencesVisible = ref(false);
7
7
  const selectedCookies = ref({});
8
- export function useCookieApi() {
8
+ export function useMagicCookie() {
9
9
  const universalCookies = useCookies(["cookie_consent"]);
10
10
  const cookieConsent = computed({
11
11
  get: () => {
@@ -17,7 +17,7 @@ export function useCookieApi() {
17
17
  });
18
18
  }
19
19
  });
20
- const emitter = useCookieEmitter();
20
+ const emitter = useMagicEmitter();
21
21
  selectedCookies.value = cookieConsent.value?.cookies || {};
22
22
  function toggleSelection(key) {
23
23
  selectedCookies.value = {
@@ -1,7 +1,6 @@
1
1
  import type { Plugin } from 'vue';
2
2
  import MagicDraggable from './src/components/MagicDraggable.vue.js';
3
- import { useDraggableApi } from './src/composables/useDraggableApi.js';
4
3
  import type { DraggableOptions } from './src/types.js';
5
4
  declare const MagicDraggablePlugin: Plugin;
6
- export { MagicDraggablePlugin, MagicDraggable, useDraggableApi };
5
+ export { MagicDraggablePlugin, MagicDraggable };
7
6
  export type { DraggableOptions };
@@ -1,8 +1,7 @@
1
1
  import MagicDraggable from "./src/components/MagicDraggable.vue";
2
- import { useDraggableApi } from "./src/composables/useDraggableApi.mjs";
3
2
  const MagicDraggablePlugin = {
4
3
  install: (app) => {
5
4
  app.component("MagicDraggable", MagicDraggable);
6
5
  }
7
6
  };
8
- export { MagicDraggablePlugin, MagicDraggable, useDraggableApi };
7
+ export { MagicDraggablePlugin, MagicDraggable };
@@ -23,6 +23,7 @@
23
23
  >
24
24
  <component v-if="component" v-bind="props" :is="component" />
25
25
  <slot v-else />
26
+ <div v-if="hasDragged" class="magic-draggable__overlay" />
26
27
  </component>
27
28
  </div>
28
29
  </div>
@@ -75,15 +76,16 @@ const disabled = computed(() => {
75
76
 
76
77
  const { snapPoints, animation, initial, threshold } = mappedOptions
77
78
 
78
- const { initialize, onPointerdown, onClick, style } = useDraggableDrag({
79
- id: props.id,
80
- elRef,
81
- wrapperRef,
82
- threshold,
83
- snapPoints,
84
- animation,
85
- initial,
86
- })
79
+ const { initialize, onPointerdown, onClick, style, hasDragged } =
80
+ useDraggableDrag({
81
+ id: props.id,
82
+ elRef,
83
+ wrapperRef,
84
+ threshold,
85
+ snapPoints,
86
+ animation,
87
+ initial,
88
+ })
87
89
 
88
90
  // Public functions
89
91
  function guardedPointerdown(event: PointerEvent) {
@@ -104,5 +106,5 @@ onMounted(() => {
104
106
  </script>
105
107
 
106
108
  <style>
107
- :root{--magic-draggable-z-index:999;--magic-draggable-position:fixed;--magic-draggable-height:100%;--magic-draggable-width:100%;--magic-draggable-inset:0}.magic-draggable{background:transparent;border:none;color:inherit;height:var(--magic-draggable-height);inset:var(--magic-draggable-inset);padding:0;position:var(--magic-draggable-position);width:var(--magic-draggable-width);z-index:var(--magic-draggable-z-index)}.magic-draggable,.magic-draggable.-disabled{pointer-events:none}.magic-draggable__wrapper{display:block;height:100%;width:100%}.magic-draggable__drag{cursor:grab;display:inline-flex;height:auto;pointer-events:auto;position:relative;transform-origin:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:auto}.magic-draggable.-dragging .magic-draggable__drag{cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-draggable.-disabled .magic-draggable__drag{cursor:default}
109
+ :root{--magic-draggable-z-index:999;--magic-draggable-position:fixed;--magic-draggable-height:100%;--magic-draggable-width:100%;--magic-draggable-inset:0}.magic-draggable{background:transparent;border:none;color:inherit;height:var(--magic-draggable-height);inset:var(--magic-draggable-inset);padding:0;position:var(--magic-draggable-position);width:var(--magic-draggable-width);z-index:var(--magic-draggable-z-index)}.magic-draggable,.magic-draggable.-disabled{pointer-events:none}.magic-draggable__wrapper{display:block;height:100%;width:100%}.magic-draggable__drag{cursor:grab;display:inline-flex;height:auto;pointer-events:auto;position:relative;touch-action:none;transform-origin:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:auto}.magic-draggable.-dragging .magic-draggable__drag{cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-draggable.-disabled .magic-draggable__drag{cursor:default}.magic-draggable__overlay{inset:0;position:absolute;z-index:9999}
108
110
  </style>
@@ -8,9 +8,9 @@ interface MagicDrawerProps {
8
8
  options?: DraggableOptions;
9
9
  }
10
10
  declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicDrawerProps>, {
11
- options: () => DraggableOptions;
11
+ options: () => any;
12
12
  }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicDrawerProps>, {
13
- options: () => DraggableOptions;
13
+ options: () => any;
14
14
  }>>>, {
15
15
  options: DraggableOptions;
16
16
  }, {}>, {
@@ -14,5 +14,6 @@ export declare function useDraggableDrag(args: UseDraggableDragArgs): {
14
14
  onPointerdown: (e: PointerEvent) => void;
15
15
  onClick: (e: MouseEvent) => void;
16
16
  style: import("vue").ComputedRef<string>;
17
+ hasDragged: import("vue").ComputedRef<boolean>;
17
18
  };
18
19
  export {};
@@ -12,9 +12,10 @@ import {
12
12
  useThrottleFn,
13
13
  useIdle
14
14
  } from "@vueuse/core";
15
+ import { isIOS, isWithinRange } from "@maas/vue-equipment/utils";
15
16
  import { useDraggableSnap } from "./useDraggableSnap.mjs";
16
17
  import { useDraggableState } from "./useDraggableState.mjs";
17
- import { isIOS } from "@maas/vue-equipment/utils";
18
+ import { useDraggableScrollLock } from "./useDraggableScrollLock.mjs";
18
19
  export function useDraggableDrag(args) {
19
20
  const { id, elRef, wrapperRef, threshold, snapPoints, initial, animation } = args;
20
21
  const { findState } = useDraggableState(toValue(id));
@@ -41,6 +42,19 @@ export function useDraggableDrag(args) {
41
42
  const style = computed(
42
43
  () => `transform: translate3d(${draggedX.value}px, ${draggedY.value}px, 0)`
43
44
  );
45
+ const hasDragged = computed(() => {
46
+ const hasDraggedX = !isWithinRange({
47
+ input: draggedX.value,
48
+ base: lastDraggedX.value,
49
+ threshold: toValue(threshold).lock
50
+ });
51
+ const hasDraggedY = !isWithinRange({
52
+ input: draggedY.value,
53
+ base: lastDraggedY.value,
54
+ threshold: toValue(threshold).lock
55
+ });
56
+ return hasDraggedX || hasDraggedY;
57
+ });
44
58
  const {
45
59
  snapTo,
46
60
  activeSnapPoint,
@@ -56,6 +70,12 @@ export function useDraggableDrag(args) {
56
70
  draggedY,
57
71
  draggedX
58
72
  });
73
+ const {
74
+ lockScroll,
75
+ unlockScroll,
76
+ addScrollLockPadding,
77
+ removeScrollLockPadding
78
+ } = useDraggableScrollLock();
59
79
  async function getSizes() {
60
80
  elRect.value = unrefElement(elRef)?.getBoundingClientRect();
61
81
  wrapperRect.value = unrefElement(wrapperRef)?.getBoundingClientRect();
@@ -217,8 +237,13 @@ export function useDraggableDrag(args) {
217
237
  activeSnapPoint.value = snapPointsMap.value[key];
218
238
  }
219
239
  resetStateAndListeners();
240
+ unlockScroll();
241
+ removeScrollLockPadding();
220
242
  }
221
243
  function onPointermove(e) {
244
+ if (!e.isPrimary) {
245
+ return;
246
+ }
222
247
  setDragged({ x: e.screenX, y: e.screenY });
223
248
  getSizes();
224
249
  detectCollision();
@@ -246,6 +271,8 @@ export function useDraggableDrag(args) {
246
271
  }
247
272
  }
248
273
  function onPointerdown(e) {
274
+ lockScroll();
275
+ addScrollLockPadding();
249
276
  if (dragging.value) {
250
277
  return;
251
278
  } else {
@@ -264,7 +291,9 @@ export function useDraggableDrag(args) {
264
291
  onPointermove(e);
265
292
  }
266
293
  function onClick(e) {
267
- e.preventDefault();
294
+ if (hasDragged.value) {
295
+ e.preventDefault();
296
+ }
268
297
  }
269
298
  async function initialize() {
270
299
  await getSizes();
@@ -312,6 +341,7 @@ export function useDraggableDrag(args) {
312
341
  initialize,
313
342
  onPointerdown,
314
343
  onClick,
315
- style
344
+ style,
345
+ hasDragged
316
346
  };
317
347
  }
@@ -0,0 +1,6 @@
1
+ export declare function useDraggableScrollLock(): {
2
+ lockScroll: () => void;
3
+ unlockScroll: () => void;
4
+ addScrollLockPadding: () => void;
5
+ removeScrollLockPadding: () => void;
6
+ };
@@ -0,0 +1,42 @@
1
+ import { ref } from "vue";
2
+ import { useScrollLock } from "@vueuse/core";
3
+ import { matchClass } from "@maas/vue-equipment/utils";
4
+ const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
5
+ export function useDraggableScrollLock() {
6
+ const positionFixedElements = ref([]);
7
+ function lockScroll() {
8
+ scrollLock.value = true;
9
+ }
10
+ function unlockScroll() {
11
+ scrollLock.value = false;
12
+ }
13
+ function addScrollLockPadding() {
14
+ if (typeof window === "undefined")
15
+ return;
16
+ const exclude = new RegExp(/magic-draggable/);
17
+ const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
18
+ document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
19
+ document.body.style.paddingRight = "var(--scrollbar-width)";
20
+ positionFixedElements.value = [
21
+ ...document.body.getElementsByTagName("*")
22
+ ].filter(
23
+ (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
24
+ );
25
+ positionFixedElements.value.forEach(
26
+ (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
27
+ );
28
+ }
29
+ function removeScrollLockPadding() {
30
+ document.body.style.paddingRight = "";
31
+ document.body.style.removeProperty("--scrollbar-width");
32
+ positionFixedElements.value.forEach(
33
+ (elem) => elem.style.paddingRight = ""
34
+ );
35
+ }
36
+ return {
37
+ lockScroll,
38
+ unlockScroll,
39
+ addScrollLockPadding,
40
+ removeScrollLockPadding
41
+ };
42
+ }
@@ -16,6 +16,7 @@ export interface DraggableOptions {
16
16
  distance?: number;
17
17
  momentum?: number;
18
18
  idle?: number;
19
+ lock?: number;
19
20
  };
20
21
  animation?: {
21
22
  snap?: {
@@ -1,5 +1,8 @@
1
1
  import type { DraggableOptions } from '../types.js';
2
2
  import type { RequireAll } from '@maas/vue-equipment/utils';
3
- type DefaultOptions = RequireAll<DraggableOptions>;
3
+ type DefaultOptions = RequireAll<DraggableOptions> & {
4
+ threshold: RequireAll<DraggableOptions['threshold']>;
5
+ animation: RequireAll<DraggableOptions['animation']>;
6
+ };
4
7
  declare const defaultOptions: DefaultOptions;
5
8
  export { defaultOptions, type DefaultOptions };
@@ -4,7 +4,8 @@ const defaultOptions = {
4
4
  threshold: {
5
5
  distance: 128,
6
6
  momentum: 1.5,
7
- idle: 250
7
+ idle: 250,
8
+ lock: 0
8
9
  },
9
10
  animation: {
10
11
  snap: {
@@ -1,8 +1,7 @@
1
1
  import MagicDrawer from './src/components/MagicDrawer.vue.js';
2
- import { useDrawerApi } from './src/composables/useDrawerApi.js';
3
- import { useDrawerEmitter } from './src/composables/useDrawerEmitter.js';
2
+ import { useMagicDrawer } from './src/composables/useMagicDrawer.js';
4
3
  import type { Plugin } from 'vue';
5
4
  import type { DrawerEvents, DrawerOptions } from './src/types/index.js';
6
5
  declare const MagicDrawerPlugin: Plugin;
7
- export { MagicDrawerPlugin, MagicDrawer, useDrawerApi, useDrawerEmitter };
6
+ export { MagicDrawerPlugin, MagicDrawer, useMagicDrawer };
8
7
  export type { DrawerEvents, DrawerOptions };
@@ -1,9 +1,8 @@
1
1
  import MagicDrawer from "./src/components/MagicDrawer.vue";
2
- import { useDrawerApi } from "./src/composables/useDrawerApi.mjs";
3
- import { useDrawerEmitter } from "./src/composables/useDrawerEmitter.mjs";
2
+ import { useMagicDrawer } from "./src/composables/useMagicDrawer.mjs";
4
3
  const MagicDrawerPlugin = {
5
4
  install: (app) => {
6
5
  app.component("MagicDrawer", MagicDrawer);
7
6
  }
8
7
  };
9
- export { MagicDrawerPlugin, MagicDrawer, useDrawerApi, useDrawerEmitter };
8
+ export { MagicDrawerPlugin, MagicDrawer, useMagicDrawer };
@@ -18,11 +18,7 @@ export default defineNuxtModule({
18
18
  });
19
19
  addImports({
20
20
  from: "@maas/vue-equipment/plugins/MagicDrawer",
21
- name: "useDrawerApi"
22
- });
23
- addImports({
24
- from: "@maas/vue-equipment/plugins/MagicDrawer",
25
- name: "useDrawerEmitter"
21
+ name: "useMagicDrawer"
26
22
  });
27
23
  }
28
24
  });