@maas/vue-equipment 1.0.1 → 1.2.0

package/dist/plugins/MagicTray/src/components/MagicTrayContent.vue

@@ -40,7 +40,6 @@
           :style="handleStyle(side)"
           @pointerdown="guardedPointerdown(side, $event)"
           @touchstart="guardedTouchstart(side, $event)"
-          @click.capture="onHandleClick"
         >
           <template
             v-if="slots[`handle-${side}`] || slots.handle"
@@ -62,6 +61,7 @@ import { computed, inject, useSlots, useTemplateRef } from "vue";
 import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useTrayState } from "../composables/private/useTrayState";
 import { useTrayDrag } from "../composables/private/useTrayDrag";
+import { useTrayGesture } from "../composables/private/useTrayGesture";
 import { useTrayMagnetism } from "../composables/private/useTrayMagnetism";
 import { useTrayProgress } from "../composables/private/useTrayProgress";
 import MagicTrayHandle from "./MagicTrayHandle.vue";
@@ -94,18 +94,15 @@ const handleRefs = {
 const disabled = computed(() => state.options.disabled);
 const inset = computed(() => state.options.inset);
 const slots = useSlots();
-const {
-  draggableSides,
-  clipPath,
-  handleStyle,
-  hasDragged,
-  onHandlePointerdown,
-  onHandleTouchstart,
-  onHandleClick
-} = useTrayDrag({
+const { draggableSides, clipPath, handleStyle } = useTrayDrag({
   id: instanceId,
   elRef
 });
+const { hasDragged, onPointerdown, onTouchstart } = useTrayGesture({
+  id: instanceId,
+  state,
+  preventEdgeNavigation: () => state.options.preventEdgeNavigation
+});
 useTrayMagnetism({ id: instanceId, elRef, handleRefs, state });
 useTrayProgress({ id: instanceId, state });
 const visibleHandles = computed(() => {
@@ -120,12 +117,12 @@ const visibleHandles = computed(() => {
 });
 function guardedPointerdown(side, event) {
   if (!disabled.value) {
-    onHandlePointerdown(side, event);
+    onPointerdown(side, event);
   }
 }
 function guardedTouchstart(side, event) {
   if (!disabled.value) {
-    onHandleTouchstart(side, event);
+    onTouchstart(side, event);
   }
 }
 </script>
@@ -200,10 +197,6 @@ function guardedTouchstart(side, event) {
   pointer-events: var(--magic-tray-content-pointer-events, auto);
 }
 
-.magic-tray-content[data-inset='true'] .magic-tray-content__slot {
-  padding: var(--magic-tray-drag-overshoot-outer);
-}
-
 .magic-tray-content__inner[data-drag-top='true'] {
   padding-top: var(--magic-tray-drag-overshoot-outer);
 }
@@ -242,4 +235,12 @@ dialog.magic-tray-content__inner {
 .magic-tray-content[data-dragging='true'] .magic-tray-handle {
   cursor: var(--magic-tray-handle-cursor-dragging, grabbing);
 }
+
+.magic-tray-content[data-dragging='true'] .magic-tray-handle * {
+  -webkit-user-drag: none;
+}
+
+.magic-tray-content[data-dragged='true'] .magic-tray-handle * {
+  pointer-events: none;
+}
 </style>

package/dist/plugins/MagicTray/src/components/MagicTrayContent.vue.d.ts

@@ -1,9 +1,9 @@
 import type { MagicTraySide } from '../types/index.js';
-declare var __VLS_9: {}, __VLS_11: {}, __VLS_25: "handle-top" | "handle-right" | "handle-bottom" | "handle-left" | "handle", __VLS_26: {
+declare var __VLS_9: {}, __VLS_11: {}, __VLS_24: "handle-top" | "handle-right" | "handle-bottom" | "handle-left" | "handle", __VLS_25: {
     side: MagicTraySide;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_25>]?: (props: typeof __VLS_26) => any;
+    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
 } & {
     background?: (props: typeof __VLS_9) => any;
 } & {

package/dist/plugins/MagicTray/src/components/MagicTrayTrigger.d.vue.ts

@@ -0,0 +1,25 @@
+import type { MaybeRef } from 'vue';
+import type { MagicTraySide } from '../types/index.js';
+interface MagicTrayTriggerProps {
+    id?: MaybeRef<string>;
+    side: MagicTraySide;
+    disabled?: boolean;
+    preventEdgeNavigation?: boolean;
+    asChild?: boolean;
+}
+declare var __VLS_11: {
+    dragging: boolean;
+    disabled: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicTrayTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicTrayTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicTray/src/components/MagicTrayTrigger.vue

@@ -0,0 +1,90 @@
+<template>
+  <vue-primitive
+    class="magic-tray-trigger"
+    :as-child="asChild"
+    :data-id="`${mappedId}-trigger`"
+    :data-side="side"
+    :data-dragging="active"
+    :data-dragged="hasDragged"
+    :data-disabled="mappedDisabled"
+    @pointerdown="guardedPointerdown"
+    @touchstart="guardedTouchstart"
+  >
+    <slot :dragging="active" :disabled="mappedDisabled" />
+  </vue-primitive>
+</template>
+
+<script setup>
+import { computed, inject, toValue } from "vue";
+import { VuePrimitive } from "@maas/vue-primitive";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
+import { useTrayState } from "../composables/private/useTrayState";
+import { useTrayGesture } from "../composables/private/useTrayGesture";
+import { MagicTrayInstanceId } from "../symbols";
+const { id, side, disabled, preventEdgeNavigation, asChild } = defineProps({
+  id: { type: null, required: false },
+  side: { type: String, required: true },
+  disabled: { type: Boolean, required: false },
+  preventEdgeNavigation: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false }
+});
+const injectedInstanceId = inject(MagicTrayInstanceId, void 0);
+const mappedInstanceId = computed(() => id ?? injectedInstanceId);
+const magicError = useMagicError({
+  prefix: "MagicTray",
+  source: "MagicTrayTrigger"
+});
+magicError.assert(mappedInstanceId.value, {
+  message: "MagicTrayTrigger must be nested inside MagicTrayProvider or an id must be provided",
+  errorCode: "missing_instance_id"
+});
+const mappedId = computed(() => toValue(mappedInstanceId.value ?? ""));
+const { initializeState } = useTrayState(mappedId);
+const state = initializeState();
+const { active, hasDragged, onPointerdown, onTouchstart } = useTrayGesture({
+  id: mappedId,
+  state,
+  selectionLock: "drag",
+  preventEdgeNavigation: () => preventEdgeNavigation ?? state.options.preventEdgeNavigation
+});
+const mappedDisabled = computed(() => disabled || state.options.disabled);
+function isEditable(target) {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+  return target.closest("input, textarea, select") !== null || target instanceof HTMLElement && target.isContentEditable;
+}
+function canDrag(event) {
+  return !mappedDisabled.value && !isEditable(event.target);
+}
+function guardedPointerdown(event) {
+  if (canDrag(event)) {
+    onPointerdown(side, event);
+  }
+}
+function guardedTouchstart(event) {
+  if (canDrag(event)) {
+    onTouchstart(side, event);
+  }
+}
+</script>
+
+<style>
+.magic-tray-trigger[data-disabled='false'][data-side='left'],
+.magic-tray-trigger[data-disabled='false'][data-side='right'] {
+  touch-action: var(--magic-tray-trigger-touch-action, pan-y);
+}
+
+.magic-tray-trigger[data-disabled='false'][data-side='top'],
+.magic-tray-trigger[data-disabled='false'][data-side='bottom'] {
+  touch-action: var(--magic-tray-trigger-touch-action, pan-x);
+}
+
+.magic-tray-trigger[data-dragging='true'] * {
+  -webkit-user-drag: none;
+}
+
+.magic-tray-trigger[data-dragged='true'] * {
+  pointer-events: none;
+}
+</style>

package/dist/plugins/MagicTray/src/components/MagicTrayTrigger.vue.d.ts

@@ -0,0 +1,25 @@
+import type { MaybeRef } from 'vue';
+import type { MagicTraySide } from '../types/index.js';
+interface MagicTrayTriggerProps {
+    id?: MaybeRef<string>;
+    side: MagicTraySide;
+    disabled?: boolean;
+    preventEdgeNavigation?: boolean;
+    asChild?: boolean;
+}
+declare var __VLS_11: {
+    dragging: boolean;
+    disabled: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicTrayTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicTrayTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicTray/src/composables/private/useTrayDrag.d.ts

@@ -32,10 +32,6 @@ export declare function useTrayDrag(args: UseTrayDragArgs): {
         '--magic-tray-handle-magnetic': string;
         left?: undefined;
     };
-    hasDragged: import("vue").ComputedRef<boolean>;
     dimension: (side: MagicTraySide) => number;
-    onHandlePointerdown: (side: MagicTraySide, e: PointerEvent) => void;
-    onHandleTouchstart: (side: MagicTraySide, e: TouchEvent) => void;
-    onHandleClick: (e: MouseEvent) => void;
 };
 export {};