@maas/vue-equipment 0.40.0 → 1.0.0-beta.2

package/dist/plugins/MagicDraggable/src/components/MagicDraggable.vue

@@ -1,108 +1,153 @@
-<template>
-  <div
-    ref="drawerRef"
-    :id="toValue(id)"
-    :class="[
-      'magic-draggable',
-      {
-        '-dragging': dragging,
-        '-disabled': disabled,
-      },
-    ]"
-    v-bind="$attrs"
-  >
-    <div class="magic-draggable__wrapper" ref="wrapperRef">
-      <component
-        :is="mappedOptions.tag"
-        ref="elRef"
-        class="magic-draggable__drag"
-        :style="style"
-        @pointerdown="guardedPointerdown"
-        @click="guardedClick"
-      >
-        <component v-if="component" v-bind="props" :is="component" />
-        <slot v-else />
-        <div v-if="hasDragged" class="magic-draggable__overlay" />
-      </component>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import {
-  ref,
-  computed,
-  toValue,
-  onMounted,
-  onBeforeUnmount,
-  type Component,
-  type MaybeRef,
-} from 'vue'
-import { defu } from 'defu'
-import { useDraggableDrag } from '../composables/private/useDraggableDrag'
-import { useDraggableState } from '../composables/private/useDraggableState'
-import { defaultOptions } from '../utils/defaultOptions'
-
-import type { MagicDraggableOptions } from '../types'
-
-defineOptions({
-  inheritAttrs: false,
-})
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveDynamicComponent as _resolveDynamicComponent, normalizeStyle as _normalizeStyle, withCtx as _withCtx, createBlock as _createBlock, createElementVNode as _createElementVNode, mergeProps as _mergeProps } from "vue";
+const _hoisted_1 = ["id"];
+const _hoisted_2 = {
+  key: 0,
+  class: "magic-draggable__overlay"
+};
+import { ref, computed, toValue, toRefs } from "vue";
+import { defu } from "defu";
+import { useDraggableDrag } from "../composables/private/useDraggableDrag";
+import { useDraggableState } from "../composables/private/useDraggableState";
+import { defaultOptions } from "../utils/defaultOptions";
+export default /* @__PURE__ */ _defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "MagicDraggable",
+  props: {
+    id: { type: null, required: true },
+    options: { type: Object, required: false, default: () => ({}) }
+  },
+  setup(__props) {
+    const mappedOptions = defu(__props.options, defaultOptions);
+    const elRef = ref(void 0);
+    const wrapperRef = ref(void 0);
+    const { initializeState } = useDraggableState(__props.id);
+    const state = initializeState();
+    const { dragging } = toRefs(state);
+    const disabled = computed(() => {
+      if (__props.options.disabled === void 0) {
+        return defaultOptions.disabled;
+      } else {
+        return __props.options.disabled;
+      }
+    });
+    const { snapPoints, animation, initial, threshold, scrollLock } = mappedOptions;
+    const { onPointerdown, onClick, style, hasDragged } = useDraggableDrag({
+      id: __props.id,
+      elRef,
+      wrapperRef,
+      threshold,
+      snapPoints,
+      animation,
+      initial,
+      scrollLock
+    });
+    function guardedPointerdown(event) {
+      if (!disabled.value) {
+        onPointerdown(event);
+      }
+    }
+    function guardedClick(event) {
+      if (!disabled.value) {
+        onClick(event);
+      }
+    }
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("div", _mergeProps({
+        id: toValue(_ctx.id),
+        ref: "drawerRef",
+        class: [
+          "magic-draggable",
+          {
+            "-dragging": _unref(dragging),
+            "-disabled": disabled.value
+          }
+        ]
+      }, _ctx.$attrs), [
+        _createElementVNode(
+          "div",
+          {
+            ref_key: "wrapperRef",
+            ref: wrapperRef,
+            class: "magic-draggable__wrapper"
+          },
+          [
+            (_openBlock(), _createBlock(_resolveDynamicComponent(_unref(mappedOptions).tag), {
+              ref_key: "elRef",
+              ref: elRef,
+              class: "magic-draggable__drag",
+              style: _normalizeStyle(_unref(style)),
+              onPointerdown: guardedPointerdown,
+              onClick: guardedClick
+            }, {
+              default: _withCtx(() => [
+                _renderSlot(_ctx.$slots, "default"),
+                _unref(hasDragged) ? (_openBlock(), _createElementBlock("div", _hoisted_2)) : _createCommentVNode("v-if", true)
+              ]),
+              _: 3
+              /* FORWARDED */
+            }, 40, ["style"]))
+          ],
+          512
+          /* NEED_PATCH */
+        )
+      ], 16, _hoisted_1);
+    };
+  }
+});
+</script>
 
-interface MagicDraggableProps {
-  id: MaybeRef<string>
-  component?: Component
-  options?: MagicDraggableOptions
+<style>
+.magic-draggable {
+  position: var(--magic-draggable-position, fixed);
+  width: var(--magic-draggable-width, 100%);
+  height: var(--magic-draggable-height, 100%);
+  z-index: var(--magic-draggable-z-index, 999);
+  inset: var(--magic-draggable-inset, 0);
+  pointer-events: none;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  border: none;
 }
 
-const props = withDefaults(defineProps<MagicDraggableProps>(), {
-  options: () => defaultOptions,
-})
-
-const mappedOptions = defu(props.options, defaultOptions)
-
-const elRef = ref<HTMLElement | undefined>(undefined)
-const wrapperRef = ref<HTMLDivElement | undefined>(undefined)
-
-const { initializeState } = useDraggableState(props.id)
-const { dragging } = initializeState()
-
-// Make sure this is reactive
-const disabled = computed(() => {
-  if (props.options.disabled === undefined) {
-    return defaultOptions.disabled
-  } else {
-    return props.options.disabled
-  }
-})
+.magic-draggable.-disabled {
+  pointer-events: none;
+}
 
-const { snapPoints, animation, initial, threshold, scrollLock } = mappedOptions
+.magic-draggable__wrapper {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
 
-const { onPointerdown, onClick, style, hasDragged } = useDraggableDrag({
-  id: props.id,
-  elRef,
-  wrapperRef,
-  threshold,
-  snapPoints,
-  animation,
-  initial,
-  scrollLock,
-})
+.magic-draggable__drag {
+  cursor: grab;
+  user-select: none;
+  pointer-events: auto;
+  position: relative;
+  display: inline-flex;
+  width: auto;
+  height: auto;
+  transform-origin: center;
+  touch-action: none;
+}
 
-// Public functions
-function guardedPointerdown(event: PointerEvent) {
-  if (!disabled.value) {
-    onPointerdown(event)
-  }
+.magic-draggable.-dragging .magic-draggable__drag {
+  cursor: grabbing;
+  user-select: none;
 }
 
-function guardedClick(event: PointerEvent) {
-  if (!disabled.value) {
-    onClick(event)
-  }
+.magic-draggable.-disabled .magic-draggable__drag {
+  cursor: default;
 }
-</script>
 
-<style>
-.magic-draggable{background:transparent;border:none;color:inherit;height:var(--magic-draggable-height,100%);inset:var(--magic-draggable-inset,0);padding:0;position:var(--magic-draggable-position,fixed);width:var(--magic-draggable-width,100%);z-index:var(--magic-draggable-z-index,999)}.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}
+.magic-draggable__overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 9999;
+}
 </style>

package/dist/plugins/MagicDraggable/src/components/MagicDraggable.vue.d.ts

@@ -1,8 +1,7 @@
-import { type Component, type MaybeRef } from 'vue';
-import type { MagicDraggableOptions } from '../types';
+import { type MaybeRef } from 'vue';
+import type { MagicDraggableOptions } from '../types/index.js';
 interface MagicDraggableProps {
     id: MaybeRef<string>;
-    component?: Component;
     options?: MagicDraggableOptions;
 }
 declare function __VLS_template(): {
@@ -18,11 +17,18 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicDraggableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDraggableProps> & Readonly<{}>, {
-    options: MagicDraggableOptions;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicDraggableProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicDraggableProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableDrag.d.ts

@@ -1,14 +1,14 @@
 import { type Ref, type MaybeRef } from 'vue';
-import { type DefaultOptions } from '../../utils/defaultOptions.js';
+import type { DraggableDefaultOptions } from '../../types/index.js';
 type UseDraggableDragArgs = {
     id: MaybeRef<string>;
     elRef: Ref<HTMLElement | undefined>;
     wrapperRef: Ref<HTMLDivElement | undefined>;
-    threshold: MaybeRef<DefaultOptions['threshold']>;
-    snapPoints: MaybeRef<DefaultOptions['snapPoints']>;
-    animation: MaybeRef<DefaultOptions['animation']>;
-    initial: MaybeRef<DefaultOptions['initial']>;
-    scrollLock: MaybeRef<DefaultOptions['scrollLock']>;
+    threshold: MaybeRef<DraggableDefaultOptions['threshold']>;
+    snapPoints: MaybeRef<DraggableDefaultOptions['snapPoints']>;
+    animation: MaybeRef<DraggableDefaultOptions['animation']>;
+    initial: MaybeRef<DraggableDefaultOptions['initial']>;
+    scrollLock: MaybeRef<DraggableDefaultOptions['scrollLock']>;
 };
 export declare function useDraggableDrag(args: UseDraggableDragArgs): {
     initialize: () => Promise<void>;

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableDrag.mjs

@@ -5,6 +5,7 @@ import {
   nextTick,
   watch,
   onBeforeUnmount,
+  toRefs,
   onMounted
 } from "vue";
 import {
@@ -38,6 +39,7 @@ export function useDraggableDrag(args) {
     scrollLock
   } = args;
   const { initializeState } = useDraggableState(toValue(id));
+  const state = initializeState();
   const {
     dragStart,
     dragging,
@@ -52,7 +54,7 @@ export function useDraggableDrag(args) {
     draggedY,
     elRect,
     wrapperRect
-  } = initializeState();
+  } = toRefs(state);
   let cancelPointerup = void 0;
   let cancelPointermove = void 0;
   let cancelTouchend = void 0;

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableSnap.d.ts

@@ -1,14 +1,13 @@
 import { type MaybeRef, type Ref } from 'vue';
-import { type DefaultOptions } from '../../utils/defaultOptions.js';
-import type { DraggableSnapPoint, Coordinates } from '../../types/index.js';
+import type { DraggableSnapPoint, Coordinates, DraggableDefaultOptions } from '../../types/index.js';
 type UseDraggableSnapArgs = {
     id: MaybeRef<string>;
     elRect: Ref<DOMRect | undefined>;
     wrapperRect: Ref<DOMRect | undefined>;
     draggedY: Ref<number>;
     draggedX: Ref<number>;
-    animation: MaybeRef<DefaultOptions['animation']>;
-    snapPoints: MaybeRef<DefaultOptions['snapPoints']>;
+    animation: MaybeRef<DraggableDefaultOptions['animation']>;
+    snapPoints: MaybeRef<DraggableDefaultOptions['snapPoints']>;
 };
 type InterpolateDraggedArgs = {
     x: number;

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableSnap.mjs

@@ -18,14 +18,17 @@ export function useDraggableSnap(args) {
   const snapPointsMap = computedWithControl(
     () => toValue(snapPoints),
     () => {
-      const mapped = toValue(snapPoints).reduce((acc, current) => {
-        const key = mapSnapPoint(current);
-        if (key) {
-          const mappedKey = `x${key.x}y${key.y}`;
-          acc[mappedKey] = current;
-        }
-        return acc;
-      }, {});
+      const mapped = toValue(snapPoints).reduce(
+        (acc, current) => {
+          const key = mapSnapPoint(current);
+          if (key) {
+            const mappedKey = `x${key.x}y${key.y}`;
+            acc[mappedKey] = current;
+          }
+          return acc;
+        },
+        {}
+      );
       return mapped;
     }
   );

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableState.d.ts

@@ -1,5 +1,6 @@
 import { type MaybeRef } from 'vue';
+import type { DraggableState } from '../../types/index.js';
 export declare function useDraggableState(id: MaybeRef<string>): {
-    initializeState: () => any;
+    initializeState: () => DraggableState;
     deleteState: () => void;
 };

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableState.mjs

@@ -1,4 +1,4 @@
-import { ref, reactive, toRefs, toValue } from "vue";
+import { ref, reactive, toValue } from "vue";
 const drawerStateStore = ref([]);
 export function useDraggableState(id) {
   function createState(id2) {
@@ -21,16 +21,16 @@ export function useDraggableState(id) {
     return reactive(state);
   }
   function addState(id2) {
-    const instance = createState(id2);
-    drawerStateStore.value = [...drawerStateStore.value, instance];
-    return instance;
+    const state = createState(id2);
+    drawerStateStore.value = [...drawerStateStore.value, state];
+    return state;
   }
   function initializeState() {
-    let instance = drawerStateStore.value.find((instance2) => {
-      return instance2.id === id;
+    let state = drawerStateStore.value.find((entry) => {
+      return entry.id === id;
     });
-    if (!instance) instance = addState(toValue(id));
-    return toRefs(instance);
+    if (!state) state = addState(toValue(id));
+    return state;
   }
   function deleteState() {
     drawerStateStore.value = drawerStateStore.value.filter(

package/dist/plugins/MagicDraggable/src/types/index.d.ts

@@ -1,3 +1,4 @@
+import type { RequireAll } from '@maas/vue-equipment/utils';
 type Position = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 export type Coordinates = {
     x: number;
@@ -12,11 +13,15 @@ export type DraggableSnapPoint = [
 ] | Position;
 export interface MagicDraggableOptions {
     tag?: 'dialog' | 'div';
+    scrollLock?: boolean | {
+        padding: boolean;
+    };
+    snapPoints?: DraggableSnapPoint[];
     threshold?: {
+        lock?: number;
         distance?: number;
         momentum?: number;
         idle?: number;
-        lock?: number;
     };
     animation?: {
         snap?: {
@@ -27,12 +32,12 @@ export interface MagicDraggableOptions {
     initial?: {
         snapPoint?: DraggableSnapPoint;
     };
-    snapPoints?: DraggableSnapPoint[];
-    scrollLock?: boolean | {
-        padding: boolean;
-    };
     disabled?: boolean;
 }
+export type DraggableDefaultOptions = RequireAll<MagicDraggableOptions> & {
+    threshold: RequireAll<MagicDraggableOptions['threshold']>;
+    animation: RequireAll<MagicDraggableOptions['animation']>;
+};
 export interface DraggableState {
     id: string;
     dragStart: Date | undefined;

package/dist/plugins/MagicDraggable/src/utils/defaultOptions.d.ts

@@ -1,8 +1,3 @@
-import type { MagicDraggableOptions } from '../types/index.js';
-import type { RequireAll } from '@maas/vue-equipment/utils';
-type DefaultOptions = RequireAll<MagicDraggableOptions> & {
-    threshold: RequireAll<MagicDraggableOptions['threshold']>;
-    animation: RequireAll<MagicDraggableOptions['animation']>;
-};
-declare const defaultOptions: DefaultOptions;
-export { defaultOptions, type DefaultOptions };
+import type { DraggableDefaultOptions } from '../types/index.js';
+declare const defaultOptions: DraggableDefaultOptions;
+export { defaultOptions };

package/dist/plugins/MagicDraggable/src/utils/defaultOptions.mjs

@@ -1,11 +1,13 @@
 import { easeOutBack } from "@maas/vue-equipment/utils";
 const defaultOptions = {
   tag: "div",
+  scrollLock: { padding: true },
+  snapPoints: ["top-left", "top-right", "bottom-left", "bottom-right"],
   threshold: {
+    lock: 0,
     distance: 128,
     momentum: 1.5,
-    idle: 250,
-    lock: 0
+    idle: 250
   },
   animation: {
     snap: {
@@ -16,8 +18,6 @@ const defaultOptions = {
   initial: {
     snapPoint: "center"
   },
-  snapPoints: [],
-  disabled: false,
-  scrollLock: { padding: true }
+  disabled: false
 };
 export { defaultOptions };

package/dist/plugins/MagicDrawer/nuxt.mjs

@@ -8,7 +8,7 @@ export default defineNuxtModule({
   meta: {
     name: "@maas/vue-equipment/nuxt/MagicDrawer"
   },
-  setup(_options, nuxt) {
+  setup() {
     const resolver = createResolver(import.meta.url);
     addComponentsDir({
       path: resolver.resolve("src/components"),