gravity-dnd 1.1.6

package/src/components/DragAndDrop/DragAndDrop.visuals.css

@@ -0,0 +1 @@
+/* No visual overrides for this component yet. */

package/src/components/DragAndDrop/DragAndDrop.vue

@@ -0,0 +1,23 @@
+<template lang="pug">
+.st-profile-medalpicker2-dnd(@dragstart.prevent)
+  slot(:dragState="dragState" :cancelDrag="cancelDrag")
+  DragPreviewOverlay(
+    :visible="dragState.active && Boolean(dragState.item)"
+    :item="dragState.item"
+    :x="dragState.clientX"
+    :y="dragState.clientY"
+    :shiftX="dragState.shiftX"
+    :shiftY="dragState.shiftY"
+    :width="dragState.previewWidth"
+    :height="dragState.previewHeight"
+  )
+    slot(name="preview" :item="dragState.item")
+</template>
+
+<script setup lang="ts">
+import DragPreviewOverlay from '../Draggable/DragPreviewOverlay.vue';
+import { provideDragDropContext } from '../Draggable/useDragDropContext';
+import './DragAndDrop.scss';
+
+const { dragState, cancelDrag } = provideDragDropContext();
+</script>

package/src/components/DragAndDrop.scss

@@ -0,0 +1,4 @@
+.st-profile-medalpicker2-dnd {
+  position: relative;
+  user-select: none;
+}

package/src/components/DragAndDrop.visuals.css

@@ -0,0 +1 @@
+/* No visual overrides for this component yet. */

package/src/components/DragAndDrop.vue

@@ -0,0 +1,23 @@
+<template lang="pug">
+.st-profile-medalpicker2-dnd(@dragstart.prevent)
+  slot(:dragState="dragState" :cancelDrag="cancelDrag")
+  DragPreviewOverlay(
+    :visible="dragState.active && Boolean(dragState.item)"
+    :item="dragState.item"
+    :x="dragState.clientX"
+    :y="dragState.clientY"
+    :shiftX="dragState.shiftX"
+    :shiftY="dragState.shiftY"
+    :width="dragState.previewWidth"
+    :height="dragState.previewHeight"
+  )
+    slot(name="preview" :item="dragState.item")
+</template>
+
+<script setup lang="ts">
+import DragPreviewOverlay from '../Draggable/DragPreviewOverlay.vue';
+import { provideDragDropContext } from '../Draggable/useDragDropContext';
+import './DragAndDrop.scss';
+
+const { dragState, cancelDrag } = provideDragDropContext();
+</script>

package/src/components/Draggable/DragDropProvider.scss

@@ -0,0 +1,4 @@
+.st-gravity-provider {
+  position: relative;
+  user-select: none;
+}

package/src/components/Draggable/DragDropProvider.visuals.css

@@ -0,0 +1 @@
+/* No visual overrides for this component yet. */

package/src/components/Draggable/DragDropProvider.vue

@@ -0,0 +1,11 @@
+<template lang="pug">
+.st-gravity-provider(@dragstart.prevent)
+  slot(:dragState="dragState" :cancelDrag="cancelDrag")
+</template>
+
+<script setup lang="ts">
+import { provideDragDropContext } from './useDragDropContext';
+import './DragDropProvider.scss';
+
+const { dragState, cancelDrag } = provideDragDropContext();
+</script>

package/src/components/Draggable/DragPreviewOverlay.scss

@@ -0,0 +1,21 @@
+.st-gravity-preview {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 10000;
+  box-sizing: border-box;
+  pointer-events: none;
+  will-change: transform;
+  overflow: hidden;
+  opacity: 1 !important;
+}
+
+.st-gravity-preview__inner {
+    opacity: 1 !important;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-align: center;
+  display: block;
+}

package/src/components/Draggable/DragPreviewOverlay.visuals.css

@@ -0,0 +1,3 @@
+.st-gravity-preview {
+  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
+}

package/src/components/Draggable/DragPreviewOverlay.vue

@@ -0,0 +1,41 @@
+<template lang="pug">
+Teleport(to="body")
+  .st-gravity-preview(v-if="visible && cloneReady" :style="previewStyle")
+    .st-gravity-preview__inner
+      slot(:item="item")
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import './DragPreviewOverlay.scss';
+
+const props = defineProps<{
+  visible: boolean;
+  item: unknown | null;
+  x: number;
+  y: number;
+  shiftX: number;
+  shiftY: number;
+  width: number;
+  height: number;
+}>();
+
+const cloneReady = computed(() => props.width > 0 && props.height > 0);
+
+const previewStyle = computed(() => {
+  const w = props.width;
+  const h = props.height;
+  const tx = props.x - props.shiftX;
+  const ty = props.y - props.shiftY;
+  return {
+    transform: `translate3d(${tx}px, ${ty}px, 0)`,
+    width: `${w}px`,
+    height: `${h}px`,
+    minWidth: `${w}px`,
+    maxWidth: `${w}px`,
+    minHeight: `${h}px`,
+    maxHeight: `${h}px`,
+    boxSizing: 'border-box' as const,
+  };
+});
+</script>

package/src/components/Draggable/Draggable.scss

@@ -0,0 +1,86 @@
+.st-gravity-draggable {
+  display: inline-block;
+  cursor: grab;
+}
+
+.st-gravity-draggable__content {
+  display: block;
+  transform-origin: center;
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease,
+    box-shadow 140ms ease,
+    filter 140ms ease;
+}
+
+.st-gravity-draggable--pressed {
+  cursor: grabbing;
+}
+
+.st-gravity-draggable--pressed .st-gravity-draggable__content {
+  transform: scale(0.98);
+}
+
+.st-gravity-draggable--dragging {
+  cursor: grabbing;
+}
+
+.st-gravity-draggable--dragging .st-gravity-draggable__content {
+  opacity: 0.35;
+}
+
+.st-gravity-draggable--feedback-accepted .st-gravity-draggable__content {
+  animation: gravity-draggable-accepted 180ms ease-out;
+}
+
+.st-gravity-draggable--feedback-rejected .st-gravity-draggable__content {
+  animation: gravity-draggable-rejected 190ms ease-out;
+}
+
+.st-gravity-draggable--feedback-returned .st-gravity-draggable__content {
+  animation: gravity-draggable-returned 210ms ease-out;
+}
+
+.st-gravity-draggable--disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+@keyframes gravity-draggable-accepted {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.06);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes gravity-draggable-rejected {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-3px);
+  }
+  60% {
+    transform: translateX(3px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes gravity-draggable-returned {
+  0% {
+    transform: translateY(0) scale(1);
+  }
+  55% {
+    transform: translateY(-2px) scale(0.99);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+  }
+}

package/src/components/Draggable/Draggable.stories.ts

@@ -0,0 +1,232 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+import GravityProvider from './DragDropProvider.vue';
+import Slot from '../Slot/Slot.vue';
+import Draggable from './Draggable.vue';
+import type { GravityDraggableDropEvent, GravitySlotDropEvent } from './contracts';
+
+interface DemoItem {
+  id: string;
+  label: string;
+  tier?: 'bronze' | 'gold';
+}
+
+const meta: Meta<typeof Draggable> = {
+  title: 'Gravity/Draggable',
+  component: Draggable,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Draggable>;
+
+
+export const Basic: Story = {
+  render: () => ({
+    setup() {
+      const item = { id: 'starter', label: 'Starter Item' } satisfies DemoItem;
+      const lastDrop = ref<string>('none');
+
+      function onDragEnd(event: GravityDraggableDropEvent<unknown>) {
+        lastDrop.value = `${event.target.kind}${event.target.containerId ? `:${event.target.containerId}` : ''}`;
+      }
+
+      return { item, lastDrop, onDragEnd };
+    },
+    components: { GravityProvider, Draggable },
+    template: `
+      <div style="width: 420px; max-width: 96vw; font-family: system-ui, sans-serif;">
+        <GravityProvider>
+          <Draggable
+            draggable-id="draggable-basic"
+            :item="item"
+            source-id="demo-basic"
+            source-kind="custom"
+            :source-index="0"
+            @drag-end="onDragEnd"
+          >
+            <template #default="{ dragging }">
+              <div
+                :style="{
+                  padding: '10px 12px',
+                  borderRadius: '8px',
+                  border: '1px solid #d1d5db',
+                  background: '#f9fafb',
+                  opacity:  dragging ? .9 : 1
+                }"
+              >
+                {{ item.label }}
+              </div>
+            </template>
+          </Draggable>
+          <div style="margin-top: 10px; font-size: 12px; color: #4b5563;">
+            Last drop target: {{ lastDrop }}
+          </div>
+        </GravityProvider>
+      </div>
+    `,
+  }),
+};
+
+export const Boundary: Story = {
+  render: () => ({
+    setup() {
+      const item = { id: 'bounded', label: 'Boundary Demo Item' } satisfies DemoItem;
+      const lastCancel = ref<string>('none');
+
+      return { item, lastCancel };
+    },
+    components: { GravityProvider, Draggable },
+    template: `
+      <div style="width: 460px; max-width: 96vw; font-family: system-ui, sans-serif;">
+        <GravityProvider>
+          <div
+            class="draggable-boundary-demo"
+            style="border: 1px dashed #94a3b8; border-radius: 10px; padding: 16px; min-height: 180px;"
+          >
+            <div style="font-size: 12px; color: #64748b; margin-bottom: 10px;">
+              Drag outside this dashed box to trigger out-of-bounds cancel.
+            </div>
+            <Draggable
+              draggable-id="draggable-boundary"
+              :item="item"
+              source-id="demo-boundary"
+              source-kind="custom"
+              :source-index="0"
+              drop-mode="floating"
+              boundary-selector=".draggable-boundary-demo"
+              @cancel="lastCancel = $event.reason"
+            >
+              <template #default="{ dragging }">
+                <div
+                  :style="{
+                    display: 'inline-flex',
+                    padding: '10px 12px',
+                    borderRadius: '8px',
+                    border: '1px solid #d1d5db',
+                    background: '#f9fafb',
+                    opacity:  dragging ? .9 : 1
+                  }"
+                >
+                  {{ item.label }}
+                </div>
+              </template>
+            </Draggable>
+          </div>
+          <div style="margin-top: 10px; font-size: 12px; color: #4b5563;">
+            Last cancel reason: {{ lastCancel }}
+          </div>
+        </GravityProvider>
+      </div>
+    `,
+  }),
+};
+
+export const DropModes: Story = {
+  render: () => ({
+    setup() {
+      const targetModeItem = { id: 'target-mode', label: 'Target Mode' } satisfies DemoItem;
+      const floatingModeItem = { id: 'floating-mode', label: 'Floating Mode' } satisfies DemoItem;
+      const slotItem = ref<DemoItem | null>(null);
+      const lastTargetModeResult = ref<string>('none');
+      const lastFloatingModeResult = ref<string>('none');
+
+      function onTargetModeDrop(event: GravityDraggableDropEvent<unknown>) {
+        lastTargetModeResult.value = `${event.target.kind}${event.target.containerId ? `:${event.target.containerId}` : ''}`;
+      }
+      function onFloatingModeDrop(event: GravityDraggableDropEvent<unknown>) {
+        lastFloatingModeResult.value = `${event.target.kind}${event.target.containerId ? `:${event.target.containerId}` : ''}`;
+      }
+      function onSlotDrop(event: GravitySlotDropEvent<unknown>) {
+        slotItem.value = event.item as DemoItem;
+      }
+
+      return {
+        targetModeItem,
+        floatingModeItem,
+        slotItem,
+        lastTargetModeResult,
+        lastFloatingModeResult,
+        onTargetModeDrop,
+        onFloatingModeDrop,
+        onSlotDrop,
+      };
+    },
+    components: { GravityProvider, Draggable, Slot },
+    template: `
+      <div style="width: 520px; max-width: 96vw; font-family: system-ui, sans-serif;">
+        <GravityProvider>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start;">
+            <div style="display: grid; gap: 8px;">
+              <Draggable
+                draggable-id="draggable-target-mode"
+                :item="targetModeItem"
+                source-id="target-mode-source"
+                source-kind="custom"
+                :source-index="0"
+                drop-mode="target"
+                @drag-end="onTargetModeDrop"
+              >
+                <template #default="{ dragging }">
+                  <div
+                    :style="{
+                      padding: '10px 12px',
+                      borderRadius: '8px',
+                      border: '1px solid #d1d5db',
+                      background: '#f9fafb',
+                      opacity:  dragging ? .9 : 1
+                    }"
+                  >
+                    {{ targetModeItem.label }}
+                  </div>
+                </template>
+              </Draggable>
+
+              <Draggable
+                draggable-id="draggable-floating-mode"
+                :item="floatingModeItem"
+                source-id="floating-mode-source"
+                source-kind="custom"
+                :source-index="0"
+                drop-mode="floating"
+                @drag-end="onFloatingModeDrop"
+              >
+                <template #default="{ dragging }">
+                  <div
+                    :style="{
+                      padding: '10px 12px',
+                      borderRadius: '8px',
+                      border: '1px solid #d1d5db',
+                      background: '#f9fafb',
+                      opacity:  dragging ? .9 : 1
+                    }"
+                  >
+                    {{ floatingModeItem.label }}
+                  </div>
+                </template>
+              </Draggable>
+            </div>
+
+            <Slot slot-id="mode-slot" @drop="onSlotDrop">
+              <template #default="{ hovering, accepting }">
+                <div
+                  style="min-height: 132px; border-radius: 8px; border: 1px solid #d1d5db; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px;"
+                  :style="{ background: hovering ? (accepting ? '#ecfeff' : '#fff1f2') : '#ffffff' }"
+                >
+                  {{ slotItem ? 'Dropped: ' + slotItem.label : 'Drop either card here' }}
+                </div>
+              </template>
+            </Slot>
+          </div>
+
+          <div style="margin-top: 10px; font-size: 12px; color: #4b5563;">
+            Target mode result: {{ lastTargetModeResult }}
+            <br>
+            Floating mode result: {{ lastFloatingModeResult }}
+          </div>
+        </GravityProvider>
+      </div>
+    `,
+  }),
+};

package/src/components/Draggable/Draggable.visuals.css

@@ -0,0 +1,8 @@
+.st-gravity-draggable--hover-accept .st-gravity-draggable__content {
+  box-shadow: 0 0 0 2px rgb(34 197 94 / 35%);
+}
+
+.st-gravity-draggable--hover-reject .st-gravity-draggable__content {
+  box-shadow: 0 0 0 2px rgb(239 68 68 / 35%);
+  filter: saturate(0.85);
+}