@vcmap/ui 6.1.0-rc.2 → 6.1.0-rc.4

package/src/components/lists/VcsList.vue.d.ts

@@ -1,182 +1,52 @@
-/**
- * @param {import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>} items
- * @param {import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>} selected
- * @param {function(string, ...any[]):void} emit
- * @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
- */
-export function createSelectionActions(items: import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>, selected: import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>, emit: (arg0: string, ...args: any[][]) => void): Array<import("../../actions/actionHelper.js").VcsAction>;
-declare const _default: import("vue").DefineComponent<{
-    items: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    draggable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    selectable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    singleSelect: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    modelValue: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    searchable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    customFilter: {
-        type: FunctionConstructor;
-        default: undefined;
-    };
-    searchbarPlaceholder: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    showTitle: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    actionButtonListOverflowCount: {
-        type: NumberConstructor;
-        required: false;
-        default: undefined;
-    };
-    title: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    icon: {
-        type: StringConstructor;
-        required: false;
-        default: undefined;
-    };
-    tooltip: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    actions: {
-        type: ArrayConstructor;
-        required: false;
-        default: () => never[];
-    };
-}, {
-    query: import("vue").Ref<string>;
-    hovering: import("vue").Ref<number | undefined>;
-    dragging: import("vue").Ref<number | undefined>;
-    isDraggable: import("vue").ComputedRef<boolean>;
-    borderBottom: (index: any) => boolean;
-    borderTop: (index: any) => boolean;
-    lightenEven: import("vue").ComputedRef<boolean>;
-    /**
-     * @type {import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>}
-     */
-    renderingActions: import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>;
-    /**
-     * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
-     */
-    renderingItems: import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>;
-    /** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
-    selected: import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>;
-    /**
-     * @param {import("vue").UnwrapNestedRef<import("./VcsListItemComponent.vue").VcsListItem>} item
-     * @param {PointerEvent} event
-     */
-    select(item: any, event: PointerEvent): void;
-    drag: (e: MouseEvent, item: import("./VcsListItemComponent.vue").VcsListItem, index: number) => void;
-    drop: (e: MouseEvent, targetIndex: number) => void;
-    dragOver: (e: any, index: any) => void;
-    dragLeave: (e: any) => void;
-    dragEnd: (e: any) => void;
-    listHeader: import("vue").Ref<any>;
-    listHeaderTooltip: import("vue").ComputedRef<string>;
-    hasIntermediateSlot: import("vue").ComputedRef<boolean>;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    items: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    draggable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    selectable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    singleSelect: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    modelValue: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    searchable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    customFilter: {
-        type: FunctionConstructor;
-        default: undefined;
-    };
-    searchbarPlaceholder: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    showTitle: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    actionButtonListOverflowCount: {
-        type: NumberConstructor;
-        required: false;
-        default: undefined;
-    };
-    title: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    icon: {
-        type: StringConstructor;
-        required: false;
-        default: undefined;
-    };
-    tooltip: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    actions: {
-        type: ArrayConstructor;
-        required: false;
-        default: () => never[];
-    };
-}>>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
+    $emit: (event: "update:modelValue" | "itemMoved", ...args: any[]) => void;
     title: string;
-    icon: string;
     modelValue: unknown[];
     draggable: boolean;
     tooltip: string;
+    items: unknown[];
     selectable: boolean;
     actions: unknown[];
-    customFilter: Function;
-    searchbarPlaceholder: string;
-    actionButtonListOverflowCount: number;
     singleSelect: boolean;
     searchable: boolean;
     showTitle: boolean;
-}, {}>;
+    icon?: string | undefined;
+    customFilter?: Function | undefined;
+    searchbarPlaceholder?: string | undefined;
+    actionButtonListOverflowCount?: number | undefined;
+    selectFunction?: Function | undefined;
+    $props: {
+        readonly title?: string | undefined;
+        readonly modelValue?: unknown[] | undefined;
+        readonly draggable?: boolean | undefined;
+        readonly tooltip?: string | undefined;
+        readonly items?: unknown[] | undefined;
+        readonly selectable?: boolean | undefined;
+        readonly actions?: unknown[] | undefined;
+        readonly singleSelect?: boolean | undefined;
+        readonly searchable?: boolean | undefined;
+        readonly showTitle?: boolean | undefined;
+        readonly icon?: string | undefined;
+        readonly customFilter?: Function | undefined;
+        readonly searchbarPlaceholder?: string | undefined;
+        readonly actionButtonListOverflowCount?: number | undefined;
+        readonly selectFunction?: Function | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    "item.append"?(_: any): any;
+    "item.title"?(_: any): any;
+    "item.subtitle"?(_: any): any;
+    "item.prepend"?(_: any): any;
+    "item.intermediate"?(_: {
+        item: import("./VcsListItemComponent.vue").VcsListItem;
+        index: number;
+    }): any;
+}>;
 export default _default;
 export type ItemMovedEvent = {
     item: import("./VcsListItemComponent.vue").VcsListItem;
     targetIndex: number;
 };
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});

package/src/components/lists/VcsTreeview.vue

@@ -104,18 +104,17 @@
       const localSearchValue = useProxiedAtomicModel(props, 'search', emit);
       const localOpenedItems = useProxiedComplexModel(props, 'opened', emit);
 
-      if ((props.openAll ?? false) !== false) {
-        localOpenedItems.value = props.items.map((item) => item.name);
-        watch(
-          () => props.items,
-          (items) => {
-            const newItems = items.filter(
-              (item) => !localOpenedItems.value.includes(item.name),
-            );
-            localOpenedItems.value.push(...newItems.map((item) => item.name));
-          },
-        );
-      }
+      watch(
+        [() => props.items, () => props.openAll],
+        () => {
+          if (props.openAll) {
+            localOpenedItems.value = [...props.items.map((item) => item.name)];
+          }
+        },
+        {
+          immediate: true,
+        },
+      );
 
       function itemToggled(itemName) {
         const idx = localOpenedItems.value.indexOf(itemName);

package/src/components/lists/listHelper.d.ts

@@ -0,0 +1,87 @@
+/**
+ * @param {import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>} items
+ * @param {import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>} selected
+ * @param {(event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void} emit
+ * @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
+ */
+export function createSelectionActions(items: import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>, selected: import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>, emit: (event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void): Array<import("../../actions/actionHelper.js").VcsAction>;
+/**
+ * @typedef {Object & {
+ * selectable?: boolean,
+ * singleSelect?: boolean,
+ * selectFunction?: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void,
+ * modelValue?: Array<import("./VcsListItemComponent.vue").VcsListItem> }
+ * } SelectableListProps
+ * @property {boolean?} selectable
+ * @property {boolean?} singleSelect
+ * @property {(item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void} selectFunction
+ * @property {Array<import("./VcsListItemComponent.vue").VcsListItem>?} modelValue
+ */
+/**
+ * @typedef {{
+ *   selected: import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>,
+ *   select: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void,
+ *   selectionActions:Array<import("../../actions/actionHelper.js").VcsAction>
+ * }} SelectableListSetup
+ */
+/**
+ * Function setting up selection logic for lists. Use only in setup function of components!
+ * This requires VcsListItems with unique keys (name property).
+ * @param {Object & SelectableListProps} props
+ * @param {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} renderingItems
+ * @param {(event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void} emit
+ * @returns {SelectableListSetup}
+ */
+export function setupSelectableList(props: Object & SelectableListProps, renderingItems: import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>, emit: (event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void): SelectableListSetup;
+/**
+ * @typedef {{
+ *   hovering: import("vue").Ref<number|undefined>,
+ *   dragging: import("vue").Ref<number|undefined>,
+ *   isDraggable: import("vue").ComputedRef<boolean>,
+ *   borderBottom: (index: number) => boolean,
+ *   borderTop: (index: number) => boolean,
+ *   dragStart: (
+ *     e: MouseEvent,
+ *     item: import('./VcsListItemComponent.vue').VcsListItem,
+ *     index: number,
+ *   ) => void;
+ *   dragOver: (e: MouseEvent, index: number) => void;
+ *   dragLeave: (e: MouseEvent) => void;
+ *   dragEnd: (e: MouseEvent) => void;
+ *   drop: (e: MouseEvent, targetIndex: number) => void;
+ * }} DraggableListSetup
+ */
+/**
+ * Function setting up drag logic for lists. Use only in setup function of components!
+ * This requires VcsListItems with unique keys (name property).
+ * @param {Object & { draggable: boolean }} props
+ * @param {import("vue").Ref<string>} query
+ * @param {(event: 'itemMoved', value: import("./VcsList.vue").ItemMovedEvent) => void} emit
+ * @returns {DraggableListSetup}
+ */
+export function setupDraggableList(props: Object & {
+    draggable: boolean;
+}, query: import("vue").Ref<string>, emit: (event: 'itemMoved', value: import("./VcsList.vue").ItemMovedEvent) => void): DraggableListSetup;
+export type SelectableListProps = Object & {
+    selectable?: boolean;
+    singleSelect?: boolean;
+    selectFunction?: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void;
+    modelValue?: Array<import("./VcsListItemComponent.vue").VcsListItem>;
+};
+export type SelectableListSetup = {
+    selected: import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>;
+    select: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void;
+    selectionActions: Array<import("../../actions/actionHelper.js").VcsAction>;
+};
+export type DraggableListSetup = {
+    hovering: import("vue").Ref<number | undefined>;
+    dragging: import("vue").Ref<number | undefined>;
+    isDraggable: import("vue").ComputedRef<boolean>;
+    borderBottom: (index: number) => boolean;
+    borderTop: (index: number) => boolean;
+    dragStart: (e: MouseEvent, item: import('./VcsListItemComponent.vue').VcsListItem, index: number) => void;
+    dragOver: (e: MouseEvent, index: number) => void;
+    dragLeave: (e: MouseEvent) => void;
+    dragEnd: (e: MouseEvent) => void;
+    drop: (e: MouseEvent, targetIndex: number) => void;
+};

package/src/components/lists/listHelper.js

@@ -0,0 +1,348 @@
+import { computed, isReactive, reactive, ref, shallowRef, watch } from 'vue';
+
+/**
+ * @param {import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>} items
+ * @param {import("vue").ShallowRef<import("./VcsListItemComponent.vue").VcsListItem[]>} selected
+ * @param {(event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void} emit
+ * @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
+ */
+export function createSelectionActions(items, selected, emit) {
+  const selectAllAction = reactive({
+    name: 'list.selectAll',
+    tooltip: 'list.selectAll',
+    disabled: computed(() => items.value.length - selected.value.length < 1),
+    callback() {
+      const currentSelection = [...selected.value];
+      selected.value = items.value.filter((item) => !item.disabled);
+
+      selected.value.forEach((item) => {
+        if (item.selectionChanged && !currentSelection.includes(item)) {
+          item.selectionChanged(true);
+        }
+      });
+      emit('update:modelValue', selected.value);
+    },
+  });
+
+  const clearSelectionAction = reactive({
+    name: 'list.clearSelection',
+    tooltip: 'list.clearSelection',
+    disabled: computed(() => selected.value.length < 1),
+    callback() {
+      [...selected.value].forEach((item) => {
+        if (item.selectionChanged) {
+          item.selectionChanged(false);
+        }
+      });
+      selected.value = [];
+      emit('update:modelValue', selected.value);
+    },
+  });
+
+  return [selectAllAction, clearSelectionAction];
+}
+
+/**
+ * @typedef {Object & {
+ * selectable?: boolean,
+ * singleSelect?: boolean,
+ * selectFunction?: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void,
+ * modelValue?: Array<import("./VcsListItemComponent.vue").VcsListItem> }
+ * } SelectableListProps
+ * @property {boolean?} selectable
+ * @property {boolean?} singleSelect
+ * @property {(item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void} selectFunction
+ * @property {Array<import("./VcsListItemComponent.vue").VcsListItem>?} modelValue
+ */
+
+/**
+ * @typedef {{
+ *   selected: import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>,
+ *   select: (item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>, event: PointerEvent) => void,
+ *   selectionActions:Array<import("../../actions/actionHelper.js").VcsAction>
+ * }} SelectableListSetup
+ */
+
+/**
+ * Function setting up selection logic for lists. Use only in setup function of components!
+ * This requires VcsListItems with unique keys (name property).
+ * @param {Object & SelectableListProps} props
+ * @param {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} renderingItems
+ * @param {(event: 'update:modelValue', value: import("./VcsListItemComponent.vue").VcsListItem[]) => void} emit
+ * @returns {SelectableListSetup}
+ */
+export function setupSelectableList(props, renderingItems, emit) {
+  /** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
+  const selected = shallowRef([]);
+
+  watch(
+    props,
+    () => {
+      if (selected.value !== props.modelValue) {
+        selected.value = props.modelValue;
+      }
+      if (props.singleSelect && selected.value.length > 1) {
+        selected.value
+          .filter((i, index) => index && i.selectionChanged)
+          .forEach((i) => i.selectionChanged(false));
+        selected.value = [selected.value[0]];
+        emit('update:modelValue', selected);
+      }
+      if (!props.selectable && selected.value.length > 0) {
+        selected.value
+          .filter((i) => i.selectionChanged)
+          .forEach((i) => i.selectionChanged(false));
+        selected.value = [];
+        emit('update:modelValue', selected);
+      }
+    },
+    { immediate: true, deep: false },
+  );
+
+  const selectionActions = createSelectionActions(
+    renderingItems,
+    selected,
+    emit,
+  );
+
+  let firstSelected;
+
+  return {
+    selected,
+    select:
+      props.selectFunction ||
+      ((item, event) => {
+        if (!props.selectable || item.disabled) {
+          return;
+        }
+        if (!isReactive(item)) {
+          throw new Error('Trying to select an unreactive item');
+        }
+        if (Array.isArray(item.clickedCallbacks)) {
+          item.clickedCallbacks.forEach((cb) => cb(event));
+        }
+        if (props.singleSelect) {
+          if (selected.value[0] === item) {
+            item.selectionChanged?.(false);
+            selected.value = [];
+            firstSelected = null;
+          } else {
+            selected.value[0]?.selectionChanged?.(false);
+            item.selectionChanged?.(true);
+            selected.value = [item];
+            firstSelected = item;
+          }
+        } else if (event.shiftKey) {
+          let firstIndex = 0;
+          if (firstSelected) {
+            firstIndex = renderingItems.value.indexOf(firstSelected);
+          }
+          const currentIndex = renderingItems.value.indexOf(item);
+          if (firstIndex > -1 && currentIndex > -1) {
+            const currentSelection = [...selected.value];
+            selected.value = renderingItems.value.slice(
+              Math.min(firstIndex, currentIndex),
+              Math.max(firstIndex, currentIndex) + 1,
+            );
+            currentSelection.forEach((oldItem) => {
+              if (
+                oldItem.selectionChanged &&
+                !selected.value.includes(oldItem)
+              ) {
+                oldItem.selectionChanged(false);
+              }
+            });
+            selected.value.forEach((newItem) => {
+              if (
+                newItem.selectionChanged &&
+                !currentSelection.includes(newItem)
+              ) {
+                newItem.selectionChanged(true);
+              }
+            });
+          } else {
+            selected.value
+              .filter((i) => i !== item && i.selectionChanged)
+              .forEach((i) => i.selectionChanged(false));
+            selected.value = [];
+            firstSelected = null;
+          }
+        } else if (selected.value.includes(item)) {
+          if (event.ctrlKey) {
+            item.selectionChanged?.(false);
+            selected.value = selected.value.filter((i) => i !== item);
+          } else if (selected.value.length > 1) {
+            selected.value
+              .filter((i) => i !== item && i.selectionChanged)
+              .forEach((i) => {
+                i.selectionChanged(false);
+              });
+            selected.value = [item];
+            firstSelected = item;
+          } else {
+            item.selectionChanged?.(false);
+            selected.value = [];
+            firstSelected = null;
+          }
+        } else if (event.ctrlKey) {
+          item.selectionChanged?.(true);
+          selected.value = [...selected.value, item];
+          if (selected.value.length === 1) {
+            firstSelected = item;
+          }
+        } else {
+          selected.value
+            .filter((i) => i !== item && i.selectionChanged)
+            .forEach((i) => i.selectionChanged(false));
+          item.selectionChanged?.(true);
+          selected.value = [item];
+          firstSelected = item;
+        }
+
+        emit('update:modelValue', selected.value);
+      }),
+    selectionActions,
+  };
+}
+
+/**
+ * @typedef {{
+ *   hovering: import("vue").Ref<number|undefined>,
+ *   dragging: import("vue").Ref<number|undefined>,
+ *   isDraggable: import("vue").ComputedRef<boolean>,
+ *   borderBottom: (index: number) => boolean,
+ *   borderTop: (index: number) => boolean,
+ *   dragStart: (
+ *     e: MouseEvent,
+ *     item: import('./VcsListItemComponent.vue').VcsListItem,
+ *     index: number,
+ *   ) => void;
+ *   dragOver: (e: MouseEvent, index: number) => void;
+ *   dragLeave: (e: MouseEvent) => void;
+ *   dragEnd: (e: MouseEvent) => void;
+ *   drop: (e: MouseEvent, targetIndex: number) => void;
+ * }} DraggableListSetup
+ */
+
+/**
+ * Function setting up drag logic for lists. Use only in setup function of components!
+ * This requires VcsListItems with unique keys (name property).
+ * @param {Object & { draggable: boolean }} props
+ * @param {import("vue").Ref<string>} query
+ * @param {(event: 'itemMoved', value: import("./VcsList.vue").ItemMovedEvent) => void} emit
+ * @returns {DraggableListSetup}
+ */
+export function setupDraggableList(props, query, emit) {
+  /** @type {import("vue").Ref<number|undefined>} */
+  const hovering = ref(undefined);
+  /** @type {import("vue").Ref<number|undefined>} */
+  const dragging = ref(undefined);
+
+  /**
+   * @param {number} index
+   * @returns {boolean}
+   */
+  function borderBottom(index) {
+    return (
+      dragging.value !== undefined &&
+      dragging.value < index &&
+      index === hovering.value
+    );
+  }
+
+  /**
+   * @param {number} index
+   * @returns {boolean}
+   */
+  function borderTop(index) {
+    return (
+      dragging.value !== undefined &&
+      dragging.value > index &&
+      index === hovering.value
+    );
+  }
+
+  /**
+   * @type {import("./VcsListItemComponent.vue").VcsListItem|null}
+   */
+  let draggedItem = null;
+
+  /**
+   * @type {import("vue").ComputedRef<boolean>}
+   */
+  const isDraggable = computed(() => {
+    return !query.value && props.draggable;
+  });
+
+  /**
+   * @param {MouseEvent} e
+   * @param {number} targetIndex
+   */
+  function drop(e, targetIndex) {
+    if (isDraggable.value) {
+      if (draggedItem !== null && targetIndex !== undefined) {
+        emit('itemMoved', { item: draggedItem, targetIndex });
+      }
+      draggedItem = null;
+      dragging.value = undefined;
+      hovering.value = undefined;
+    }
+  }
+
+  /**
+   * @param {MouseEvent} e
+   * @param {import("./VcsListItemComponent.vue").VcsListItem} item
+   * @param {number} index
+   */
+  function dragStart(e, item, index) {
+    e.stopPropagation();
+    if (isDraggable.value) {
+      dragging.value = index;
+      draggedItem = item;
+      e.dataTransfer.effectAllowed = 'move';
+    }
+  }
+
+  /**
+   * @param {MouseEvent} e
+   * @param {number} index
+   */
+  function dragOver(e, index) {
+    e.stopPropagation();
+    e.preventDefault();
+    if (isDraggable.value) {
+      hovering.value = index;
+    }
+  }
+
+  /**
+   * @param {MouseEvent} e
+   */
+  function dragLeave(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    hovering.value = undefined;
+  }
+
+  /**
+   * @param {MouseEvent} e
+   */
+  function dragEnd(e) {
+    e.stopPropagation();
+    dragging.value = undefined;
+    hovering.value = undefined;
+  }
+
+  return {
+    hovering,
+    dragging,
+    isDraggable,
+    borderBottom,
+    borderTop,
+    dragStart,
+    dragOver,
+    dragLeave,
+    dragEnd,
+    drop,
+  };
+}