gravity-dnd 1.1.6

package/src/components/Pool/Pool.vue

@@ -0,0 +1,198 @@
+<template lang="pug">
+.st-gravity-pool(
+  ref="rootEl"
+  :class="rootClasses"
+)
+  TransitionGroup.st-gravity-pool__list(
+    name="gravity-pool-reorder"
+    move-class="gravity-pool-reorder-move"
+    tag="div"
+  )
+    template(v-for="position in positions")
+      .st-gravity-pool__drop-indicator(
+        v-if="showDropIndicator && indicatorIndex === position"
+        :key="`drop-indicator-${position}`"
+        aria-hidden="true"
+      )
+      .st-gravity-pool__entry(
+        v-if="position < items.length"
+        :key="resolveItemKey(items[position], position)"
+        :data-pool-index="position"
+      )
+        slot(name="item" :item="items[position]" :index="position")
+  slot(name="append")
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { TransitionGroup } from 'vue';
+import { useDragDropContext } from '../Draggable/useDragDropContext';
+import type { PoolReceiveEvent, PoolReorderEvent } from '../Draggable/contracts';
+import './Pool.scss';
+
+const props = withDefaults(
+  defineProps<{
+    poolId: string;
+    items: unknown[];
+    itemKey?: string | ((item: unknown, index: number) => string);
+    disabled?: boolean;
+    accepts?: (item: unknown, payload: { sourceContainerId: string; sourceIndex: number }) => boolean;
+  }>(),
+  {
+    itemKey: 'id',
+    disabled: false,
+    accepts: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  reorder: [payload: PoolReorderEvent<unknown>];
+  receive: [payload: PoolReceiveEvent<unknown>];
+  hoverChange: [payload: { poolId: string; hovering: boolean; accepts: boolean }];
+}>();
+
+const rootEl = ref<HTMLElement | null>(null);
+const dragDrop = useDragDropContext();
+let unregister: (() => void) | null = null;
+
+const hovering = computed(() => {
+  if (!dragDrop) return false;
+  return dragDrop.isHovering(props.poolId);
+});
+
+const accepting = computed(() => {
+  if (!dragDrop?.dragState.hoverTarget) return true;
+  return dragDrop.dragState.hoverTarget.accepts;
+});
+const rootClasses = computed(() => ({
+  'st-gravity-pool--hovering': hovering.value,
+  'st-gravity-pool--accepting': hovering.value && accepting.value,
+  'st-gravity-pool--rejecting': hovering.value && !accepting.value,
+}));
+const positions = computed(() => Array.from({ length: props.items.length + 1 }, (_, idx) => idx));
+const activeHoverTarget = computed(() => {
+  const hoverTarget = dragDrop?.dragState.hoverTarget;
+  if (!hoverTarget || hoverTarget.kind !== 'pool') return null;
+  if (hoverTarget.containerId !== props.poolId) return null;
+  return hoverTarget;
+});
+const showDropIndicator = computed(() => !!activeHoverTarget.value?.accepts);
+const indicatorIndex = computed(() => {
+  const index = activeHoverTarget.value?.index;
+  if (typeof index !== 'number') return -1;
+  return Math.max(0, Math.min(index, props.items.length));
+});
+
+function resolveItemKey(item: unknown, index: number) {
+  if (typeof props.itemKey === 'function') return props.itemKey(item, index);
+  const key = (item as Record<string, unknown>)?.[props.itemKey];
+  if (typeof key === 'string' || typeof key === 'number') return String(key);
+  return `${props.poolId}-${index}`;
+}
+
+function resolvePoolIndex(clientX: number, clientY: number) {
+  const root = rootEl.value;
+  if (!root) return props.items.length;
+
+
+  if (_rectCacheDirty || _rectCache.length !== props.items.length) {
+    _rebuildRectCache(root);
+  }
+
+  for (let i = 0; i < _rectCache.length; i++) {
+    const r = _rectCache[i];
+    if (clientY < r.top) return i;
+    if (clientY > r.bottom) continue;
+    if (clientX <= r.left + r.hw) return i;
+  }
+  return props.items.length;
+}
+
+interface _CachedRect { top: number; bottom: number; left: number; hw: number; }
+let _rectCache: _CachedRect[] = [];
+let _rectCacheDirty = true;
+
+function _rebuildRectCache(root: HTMLElement) {
+  const nodes = root.querySelectorAll<HTMLElement>('[data-pool-index]');
+  _rectCache = [];
+  for (let i = 0; i < nodes.length; i++) {
+    const rect = nodes[i].getBoundingClientRect();
+    _rectCache.push({ top: rect.top, bottom: rect.bottom, left: rect.left, hw: rect.width / 2 });
+  }
+  _rectCacheDirty = false;
+}
+
+function _invalidateRectCache() {
+  _rectCacheDirty = true;
+}
+
+function canAccept(item: unknown, sourceContainerId: string, sourceIndex: number) {
+  if (props.disabled) return false;
+  if (!props.accepts) return true;
+  return props.accepts(item, { sourceContainerId, sourceIndex });
+}
+
+function registerTarget() {
+  if (!dragDrop) return;
+  if (unregister) unregister();
+  unregister = dragDrop.registerTarget({
+    id: `pool:${props.poolId}`,
+    kind: 'pool',
+    containerId: props.poolId,
+    resolveHover(clientX, clientY) {
+      const root = rootEl.value;
+      if (!root || !dragDrop.dragState.item || !dragDrop.dragState.source) return null;
+      const rect = root.getBoundingClientRect();
+      const inside = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+      if (!inside) return null;
+      return {
+        index: resolvePoolIndex(clientX, clientY),
+        accepts: canAccept(dragDrop.dragState.item, dragDrop.dragState.source.containerId, dragDrop.dragState.source.index),
+      };
+    },
+    onDrop(payload) {
+      if (payload.target.kind !== 'pool') return;
+      if (payload.source.containerId === props.poolId) {
+        emit('reorder', {
+          ...(payload as PoolReorderEvent<unknown>),
+          poolId: props.poolId,
+          fromIndex: payload.source.index,
+          toIndex: payload.target.index,
+        });
+        return;
+      }
+      emit('receive', {
+        ...(payload as PoolReceiveEvent<unknown>),
+        poolId: props.poolId,
+        insertIndex: payload.target.index,
+      });
+    },
+  });
+}
+
+watch(
+  () => [props.poolId, props.disabled, props.items.length],
+  () => {
+    _invalidateRectCache();
+    registerTarget();
+  },
+  { immediate: true }
+);
+
+watch(
+  () => hovering.value,
+  (isHovering) => {
+    emit('hoverChange', {
+      poolId: props.poolId,
+      hovering: isHovering,
+      accepts: accepting.value,
+    });
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(() => {
+  if (unregister) unregister();
+  _rectCache = [];
+});
+</script>

package/src/components/Slot/Slot.scss

@@ -0,0 +1,48 @@
+.st-gravity-slot {
+  border-radius: 8px;
+  transform-origin: center;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    transform 120ms ease;
+}
+
+.st-gravity-slot--hovering {
+  transform: translateY(-1px);
+}
+
+.st-gravity-slot--accepting {
+  animation: gravity-slot-accepting 170ms ease-out;
+}
+
+.st-gravity-slot--rejecting {
+  animation: gravity-slot-rejecting 190ms ease-out;
+}
+
+@keyframes gravity-slot-accepting {
+  0% {
+    transform: translateY(0) scale(1);
+  }
+  55% {
+    transform: translateY(-1px) scale(1.01);
+  }
+  100% {
+    transform: translateY(-1px) scale(1);
+  }
+}
+
+@keyframes gravity-slot-rejecting {
+  0% {
+    transform: translateX(0);
+  }
+  30% {
+    transform: translateX(-2px);
+  }
+  60% {
+    transform: translateX(2px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}

package/src/components/Slot/Slot.stories.ts

@@ -0,0 +1,299 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+import GravityProvider from '../Draggable/DragDropProvider.vue';
+import Draggable from '../Draggable/Draggable.vue';
+import Slot from './Slot.vue';
+import type { GravitySlotDropEvent } from '../Draggable/contracts';
+
+interface DemoItem {
+  id: string;
+  label: string;
+  tier: 'bronze' | 'gold';
+}
+
+const meta: Meta<typeof Slot> = {
+  title: 'Gravity/Slot',
+  component: Slot,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Slot>;
+
+export const AcceptAll: Story = {
+  render: () => ({
+    setup() {
+      const sourceItem = ref<DemoItem | null>({
+        id: 'source-accept-all',
+        label: 'Any Item',
+        tier: 'bronze',
+      });
+      const slottedItem = ref<DemoItem | null>(null);
+
+      function onDrop(event: GravitySlotDropEvent<unknown>) {
+        slottedItem.value = event.item as DemoItem;
+        if (event.source.containerId === 'slot-story-source') {
+          sourceItem.value = null;
+        }
+      }
+
+      return { sourceItem, slottedItem, onDrop };
+    },
+    components: { GravityProvider, Draggable, Slot },
+    template: `
+      <div style="width: 460px; max-width: 96vw; font-family: system-ui, sans-serif;">
+        <GravityProvider>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+            <div style="min-height: 64px;">
+              <Draggable
+                v-if="sourceItem"
+                draggable-id="slot-story-accept-all"
+                :item="sourceItem"
+                source-id="slot-story-source"
+                source-kind="custom"
+                :source-index="0"
+              >
+                <template #default="{ dragging }">
+                  <div
+                    :style="{
+                      padding: '10px 12px',
+                      borderRadius: '8px',
+                      border: '1px solid #d1d5db',
+                      background: '#f9fafb',
+                      opacity:  dragging ? .9 : 1
+                    }"
+                  >
+                    {{ sourceItem.label }}
+                  </div>
+                </template>
+              </Draggable>
+              <div
+                v-else
+                aria-hidden="true"
+                style="padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; visibility: hidden;"
+              >
+                hidden
+              </div>
+            </div>
+
+            <Slot slot-id="slot-accept-all" @drop="onDrop">
+              <template #default="{ hovering, accepting }">
+                <div
+                  :style="{
+                    minHeight: '64px',
+                    borderRadius: '8px',
+                    border: '1px solid #d1d5db',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: hovering ? (accepting ? '#ecfeff' : '#fff1f2') : '#fff'
+                  }"
+                >
+                  {{ slottedItem ? slottedItem.label : 'Accepts all draggables' }}
+                </div>
+              </template>
+            </Slot>
+          </div>
+
+        </GravityProvider>
+      </div>
+    `,
+  }),
+};
+
+export const ExplicitDeny: Story = {
+  render: () => ({
+    setup() {
+      const sourceItem = ref<DemoItem | null>({
+        id: 'source-deny-all',
+        label: 'Denied Item',
+        tier: 'gold',
+      });
+      const slottedItem = ref<DemoItem | null>(null);
+
+      function onDrop(event: GravitySlotDropEvent<unknown>) {
+        slottedItem.value = event.item as DemoItem;
+        if (event.source.containerId === 'slot-story-source-deny') {
+          sourceItem.value = null;
+        }
+      }
+
+      return { sourceItem, slottedItem, onDrop };
+    },
+    components: { GravityProvider, Draggable, Slot },
+    template: `
+      <div style="width: 460px; max-width: 96vw; font-family: system-ui, sans-serif;">
+        <GravityProvider>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+            <div style="min-height: 64px;">
+              <Draggable
+                v-if="sourceItem"
+                draggable-id="slot-story-deny-all"
+                :item="sourceItem"
+                source-id="slot-story-source-deny"
+                source-kind="custom"
+                :source-index="0"
+              >
+                <template #default="{ dragging }">
+                  <div
+                    :style="{
+                      padding: '10px 12px',
+                      borderRadius: '8px',
+                      border: '1px solid #d1d5db',
+                      background: '#f9fafb',
+                      opacity:  dragging ? .9 : 1
+                    }"
+                  >
+                    {{ sourceItem.label }}
+                  </div>
+                </template>
+              </Draggable>
+              <div
+                v-else
+                aria-hidden="true"
+                style="padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; visibility: hidden;"
+              >
+                hidden
+              </div>
+            </div>
+
+            <Slot slot-id="slot-deny-all" :accepts="() => false" @drop="onDrop">
+              <template #default="{ hovering, accepting }">
+                <div
+                  :style="{
+                    minHeight: '64px',
+                    borderRadius: '8px',
+                    border: '1px solid #d1d5db',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: hovering ? (accepting ? '#ecfeff' : '#fff1f2') : '#fff'
+                  }"
+                >
+                  {{ slottedItem ? slottedItem.label : 'Always rejects drops' }}
+                </div>
+              </template>
+            </Slot>
+          </div>
+
+        </GravityProvider>
+      </div>
+    `,
+  }),
+};
+
+export const FilteredAccept: Story = {
+  render: () => ({
+    setup() {
+      const bronze = ref<DemoItem | null>({ id: 'bronze', label: 'Bronze Item', tier: 'bronze' });
+      const gold = ref<DemoItem | null>({ id: 'gold', label: 'Gold Item', tier: 'gold' });
+      const slottedItem = ref<DemoItem | null>(null);
+
+      function acceptsGold(item: unknown) {
+        return (item as DemoItem)?.tier === 'gold';
+      }
+      function onDrop(event: GravitySlotDropEvent<unknown>) {
+        slottedItem.value = event.item as DemoItem;
+        if (event.source.containerId === 'slot-story-filter-source') {
+          if (event.source.index === 0) bronze.value = null;
+          if (event.source.index === 1) gold.value = null;
+        }
+      }
+
+      return { bronze, gold, slottedItem, acceptsGold, onDrop };
+    },
+    components: { GravityProvider, Draggable, Slot },
+    template: `
+      <div style="width: 560px; max-width: 96vw; font-family: system-ui, sans-serif;">
+        <GravityProvider>
+          <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;">
+            <div style="min-height: 64px;">
+              <Draggable
+                v-if="bronze"
+                draggable-id="slot-story-bronze"
+                :item="bronze"
+                source-id="slot-story-filter-source"
+                source-kind="custom"
+                :source-index="0"
+              >
+                <template #default="{ dragging }">
+                  <div
+                    :style="{
+                      padding: '10px 12px',
+                      borderRadius: '8px',
+                      border: '1px solid #d1d5db',
+                      background: '#f9fafb',
+                      opacity:  dragging ? .9 : 1
+                    }"
+                  >
+                    {{ bronze.label }}
+                  </div>
+                </template>
+              </Draggable>
+              <div
+                v-else
+                aria-hidden="true"
+                style="padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; visibility: hidden;"
+              >
+                hidden
+              </div>
+            </div>
+
+            <div style="min-height: 64px;">
+              <Draggable
+                v-if="gold"
+                draggable-id="slot-story-gold"
+                :item="gold"
+                source-id="slot-story-filter-source"
+                source-kind="custom"
+                :source-index="1"
+              >
+                <template #default="{ dragging }">
+                  <div
+                    :style="{
+                      padding: '10px 12px',
+                      borderRadius: '8px',
+                      border: '1px solid #d1d5db',
+                      background: '#f9fafb',
+                      opacity:  dragging ? .9 : 1
+                    }"
+                  >
+                    {{ gold.label }}
+                  </div>
+                </template>
+              </Draggable>
+              <div
+                v-else
+                aria-hidden="true"
+                style="padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; visibility: hidden;"
+              >
+                hidden
+              </div>
+            </div>
+
+            <Slot slot-id="slot-filtered" :accepts="acceptsGold" @drop="onDrop">
+              <template #default="{ hovering, accepting }">
+                <div
+                  :style="{
+                    minHeight: '64px',
+                    borderRadius: '8px',
+                    border: '1px solid #d1d5db',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    textAlign: 'center',
+                    background: hovering ? (accepting ? '#ecfeff' : '#fff1f2') : '#fff'
+                  }"
+                >
+                  {{ slottedItem ? slottedItem.label : 'Only accepts gold tier' }}
+                </div>
+              </template>
+            </Slot>
+          </div>
+
+        </GravityProvider>
+      </div>
+    `,
+  }),
+};

package/src/components/Slot/Slot.visuals.css

@@ -0,0 +1,15 @@
+.st-gravity-slot {
+  border: 1px dashed #9ca3af;
+}
+
+.st-gravity-slot--accepting {
+  background: #ecfeff;
+  border-color: #22d3ee;
+  box-shadow: 0 0 0 2px rgb(34 211 238 / 20%);
+}
+
+.st-gravity-slot--rejecting {
+  background: #fef2f2;
+  border-color: #f87171;
+  box-shadow: 0 0 0 2px rgb(248 113 113 / 20%);
+}

package/src/components/Slot/Slot.vue

@@ -0,0 +1,126 @@
+<template lang="pug">
+.st-gravity-slot(
+  ref="rootEl"
+  :class="rootClasses"
+)
+  slot(:hovering="hovering" :accepting="accepting")
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useDragDropContext } from '../Draggable/useDragDropContext';
+import type { SlotDropEvent } from '../Draggable/contracts';
+import './Slot.scss';
+
+const props = withDefaults(
+  defineProps<{
+    slotId: string;
+    index?: number;
+    item?: unknown;
+    swap?: boolean;
+    onDropCollision?: 'replace' | 'swap' | 'reject';
+    disabled?: boolean;
+    accepts?: (item: unknown, payload: { sourceContainerId: string; sourceIndex: number }) => boolean;
+  }>(),
+  {
+    index: 0,
+    swap: true,
+    onDropCollision: undefined,
+    disabled: false,
+    accepts: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  drop: [payload: SlotDropEvent<unknown>];
+  hoverChange: [payload: { slotId: string; hovering: boolean; accepts: boolean }];
+}>();
+
+const rootEl = ref<HTMLElement | null>(null);
+const dragDrop = useDragDropContext();
+let unregister: (() => void) | null = null;
+
+const hovering = computed(() => {
+  if (!dragDrop) return false;
+  return dragDrop.isHovering(props.slotId, props.index);
+});
+
+const accepting = computed(() => {
+  if (!dragDrop?.dragState.hoverTarget) return true;
+  return dragDrop.dragState.hoverTarget.accepts;
+});
+const rootClasses = computed(() => ({
+  'st-gravity-slot--hovering': hovering.value,
+  'st-gravity-slot--accepting': hovering.value && accepting.value,
+  'st-gravity-slot--rejecting': hovering.value && !accepting.value,
+}));
+
+function canAccept(item: unknown, sourceContainerId: string, sourceIndex: number) {
+  if (props.disabled) return false;
+
+  const collisionMode =
+    props.onDropCollision ?? (props.swap === false ? 'replace' : 'swap');
+
+  if (collisionMode === 'reject' && props.item != null) return false;
+
+  if (!props.accepts) return true;
+  return props.accepts(item, { sourceContainerId, sourceIndex });
+}
+
+function registerTarget() {
+  if (!dragDrop) return;
+  if (unregister) unregister();
+
+  unregister = dragDrop.registerTarget({
+    id: `slot:${props.slotId}`,
+    kind: 'slot',
+    containerId: props.slotId,
+    resolveHover(clientX, clientY) {
+      const el = rootEl.value;
+      if (!el || !dragDrop.dragState.item || !dragDrop.dragState.source) return null;
+      const rect = el.getBoundingClientRect();
+      const inside = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+      if (!inside) return null;
+      return {
+        index: props.index,
+        accepts: canAccept(dragDrop.dragState.item, dragDrop.dragState.source.containerId, dragDrop.dragState.source.index),
+      };
+    },
+    onDrop(payload) {
+      const collisionMode =
+        props.onDropCollision ?? (props.swap === false ? 'replace' : 'swap');
+      const replacedItem = props.item as unknown;
+
+      emit('drop', {
+        ...(payload as SlotDropEvent<unknown>),
+        slotId: props.slotId,
+        swap: collisionMode === 'swap',
+        collision: collisionMode,
+        replacedItem: replacedItem ?? undefined,
+      });
+    },
+  });
+}
+
+watch(
+  () => [props.slotId, props.index, props.disabled, props.onDropCollision, props.accepts],
+  () => registerTarget(),
+  { immediate: true }
+);
+
+watch(
+  () => hovering.value,
+  (isHovering) => {
+    emit('hoverChange', {
+      slotId: props.slotId,
+      hovering: isHovering,
+      accepts: accepting.value,
+    });
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(() => {
+  if (unregister) unregister();
+});
+</script>

package/src/styles.css

@@ -0,0 +1,15 @@
+@import './components/DragAndDrop.visuals.css';
+@import './components/DragAndDrop/DragAndDrop.visuals.css';
+@import './components/Draggable/DragDropProvider.visuals.css';
+@import './components/Draggable/Draggable.visuals.css';
+@import './components/Draggable/DragPreviewOverlay.visuals.css';
+@import './components/Pool/Pool.visuals.css';
+@import './components/Slot/Slot.visuals.css';
+
+:root {
+  --bg-border: #444;
+}
+
+body {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}