@vcmap/ui 6.1.0-rc.1 → 6.1.0-rc.3

package/src/components/lists/VcsList.vue

@@ -40,7 +40,7 @@
           :active="selected.includes(item)"
           @mousedown.shift="$event.preventDefault()"
           :draggable="isDraggable"
-          @dragstart="drag($event, item, index)"
+          @dragstart="dragStart($event, item, index)"
           @dragover.prevent="dragOver($event, index)"
           @dragend="dragEnd($event)"
           @drop="drop($event, index)"
@@ -81,71 +81,21 @@
   </div>
 </template>
 
-<script>
-  import {
-    computed,
-    getCurrentInstance,
-    inject,
-    isReactive,
-    reactive,
-    ref,
-    shallowRef,
-    watch,
-  } from 'vue';
+<script setup>
+  import { computed, getCurrentInstance, ref, useSlots, watch } from 'vue';
   import {
+    VIcon,
     VList,
     VListItem,
-    VIcon,
     VListItemTitle,
     VTooltip,
   } from 'vuetify/components';
+  import { setupDraggableList, setupSelectableList } from './listHelper.js';
   import VcsListItemComponent from './VcsListItemComponent.vue';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
   import { createEllipseTooltip } from '../composables.js';
 
-  /**
-   * @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, 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} ItemMovedEvent
    * @property {import("./VcsListItemComponent.vue").VcsListItem} item
@@ -154,7 +104,7 @@
 
   /**
    * @description
-   * The VCS list is intended to render items. Items can be selectable (by default, more than one) or only a single item can
+   * The VcsList is intended to render items. Items can be selectable (by default, more than one) or only a single item can
    * be selected. If items are disabled they cannot be selected. Items which are not visible are not rendered. These items can
    * no longer be selected or deselected either. Making a selected item invisible can lead to undefined behavior
    * in the selection state.
@@ -168,8 +118,9 @@
    * @vue-prop {boolean} [draggable=false]
    * @vue-prop {boolean} [selectable=false]
    * @vue-prop {boolean} [singleSelect=false]
-   * @vue-prop {Array<import("./VcsListItemComponent.vue").VcsListItem>} [value=[]] - the initial items to be selected.
-   * @vue-prop {boolean} [searchable=false] - if this list can have its items searched. you can provide your own predicate function by providing "filterPredicate" which is of type function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean
+   * @vue-prop {Array<import("./VcsListItemComponent.vue").VcsListItem>} [modelValue=[]] - the initial items to be selected.
+   * @vue-prop {boolean} [searchable=false] - if this list can have its items searched.
+   * @vue-prop {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} [customFilter] - a function to customize filtering when searching.
    * @vue-prop {string} [searchbarPlaceholder] - placeholder to render inside the search field
    * @vue-prop {boolean} [showTitle=true] - show the title component
    * @vue-prop {number} [actionButtonListOverflowCount] - overflow count to use for action lists in the title and items
@@ -177,362 +128,161 @@
    * @vue-prop {string} [icon] - icon to prepend to the list title
    * @vue-prop {string} [tooltip] - tooltip to render on the list title
    * @vue-prop {Array<import("../../actions/actionHelper.js").VcsAction>} [actions] - actions to render in the list title
-   * @vue-event {ItemMovedEvent} item-moved - event triggered after item was dragged and is dropped
+   * @vue-event {ItemMovedEvent} itemMoved - event triggered after item was dragged and is dropped
    * @vue-data {slot} [#item.prepend] - A slot that forwads to v-list-item prepend slot. Binds v-list-item append slot props, item and item index.
    * @vue-data {slot} [#item.title] - A slot that forwards to v-list-item title slot. Binds v-list-item title slot props, item and item index.
    * @vue-data {slot} [#item.subtitle] - A slot that forwards to v-list-item subtitle slot. Binds v-list-item subtitle slot props, item and item index.
    * @vue-data {slot} [#item.append] - A slot that forwards to v-list-item append slot. Binds v-list-item append slot props, item and item index.
    * @vue-data {slot} [#item.intermediate] - A slot to introduce content, e.g. buttons between two list items. Binds item and item index.
    */
-  export default {
-    name: 'VcsList',
-    components: {
-      VcsListItemComponent,
-      VcsTreeviewSearchbar,
-      VcsActionButtonList,
-      VTooltip,
-      VList,
-      VListItem,
-      VIcon,
-      VListItemTitle,
+
+  const props = defineProps({
+    items: {
+      type: Array,
+      required: true,
     },
-    props: {
-      items: {
-        type: Array,
-        required: true,
-      },
-      draggable: {
-        type: Boolean,
-        default: false,
-      },
-      selectable: {
-        type: Boolean,
-        default: false,
-      },
-      singleSelect: {
-        type: Boolean,
-        default: false,
-      },
-      modelValue: {
-        type: Array,
-        default: () => [],
-      },
-      searchable: {
-        type: Boolean,
-        default: false,
-      },
-      searchbarPlaceholder: {
-        type: String,
-        default: undefined,
-      },
-      showTitle: {
-        type: Boolean,
-        default: true,
-      },
-      actionButtonListOverflowCount: {
-        type: Number,
-        required: false,
-        default: undefined,
-      },
-      title: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      icon: {
-        type: String,
-        required: false,
-        default: undefined,
-      },
-      tooltip: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      actions: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
+    draggable: {
+      type: Boolean,
+      default: false,
     },
-    setup(props, { emit, slots }) {
-      /** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
-      const selected = shallowRef([]);
-      /** @type {import("vue").Ref<string>} */
-      const query = ref('');
-      /** @type {import("vue").Ref<number|undefined>} */
-      const hovering = ref(undefined);
-      /** @type {import("vue").Ref<number|undefined>} */
-      const dragging = ref(undefined);
-      const borderBottom = (index) => {
-        return (
-          dragging.value !== undefined &&
-          dragging.value < index &&
-          index === hovering.value
-        );
-      };
-      const borderTop = (index) => {
-        return (
-          dragging.value !== undefined &&
-          dragging.value > index &&
-          index === hovering.value
-        );
-      };
-      const lightenEven = computed(() => {
-        return !(!props.searchable && !props.showTitle);
-      });
-      let firstSelected = null;
-      const listHeader = ref();
-
-      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);
-          }
-          if (!props.searchable) {
-            query.value = '';
-          }
-        },
-        { immediate: true, deep: false },
-      );
-
-      const vm = getCurrentInstance().proxy;
-      /** @type {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} */
-      const filterPredicate = inject(
-        'filterPredicate',
-        (item, queryString = '') => {
-          const translatedTitle = vm.$st(item.title);
-          return translatedTitle
-            .toLocaleLowerCase()
-            .includes(queryString.toLocaleLowerCase());
-        },
-      );
-
-      /**
-       * @type {import("./VcsListItemComponent.vue").VcsListItem|null}
-       */
-      let draggedItem = null;
+    selectable: {
+      type: Boolean,
+      default: false,
+    },
+    singleSelect: {
+      type: Boolean,
+      default: false,
+    },
+    selectFunction: {
+      type: Function,
+      default: undefined,
+    },
+    modelValue: {
+      type: Array,
+      default: () => [],
+    },
+    searchable: {
+      type: Boolean,
+      default: false,
+    },
+    customFilter: {
+      type: Function,
+      default: undefined,
+    },
+    searchbarPlaceholder: {
+      type: String,
+      default: undefined,
+    },
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
+    actionButtonListOverflowCount: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    tooltip: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    actions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  });
 
-      const isDraggable = computed(() => {
-        return !query.value && props.draggable;
-      });
+  const emit = defineEmits(['update:modelValue', 'itemMoved']);
 
-      /**
-       * @param {MouseEvent} e
-       * @param {number} targetIndex
-       */
-      function drop(e, targetIndex) {
-        if (isDraggable.value) {
-          if (draggedItem !== null && targetIndex !== undefined) {
-            emit('item-moved', { item: draggedItem, targetIndex });
-          }
-          draggedItem = null;
-          dragging.value = undefined;
-          hovering.value = undefined;
-        }
-      }
+  const slots = useSlots();
 
-      /**
-       * @param {MouseEvent} e
-       * @param {import("./VcsListItemComponent.vue").VcsListItem} item
-       * @param {number} index
-       */
-      function drag(e, item, index) {
-        e.stopPropagation();
-        if (isDraggable.value) {
-          dragging.value = index;
-          draggedItem = item;
-          e.dataTransfer.effectAllowed = 'move';
-        }
-      }
+  const lightenEven = computed(() => {
+    return !(!props.searchable && !props.showTitle);
+  });
 
-      function dragOver(e, index) {
-        e.stopPropagation();
-        e.preventDefault();
-        hovering.value = index;
-      }
+  /** @type {import("vue").Ref<string>} */
+  const query = ref('');
 
-      function dragLeave(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        hovering.value = undefined;
+  watch(
+    () => props.searchable,
+    (searchable) => {
+      if (!searchable) {
+        query.value = '';
       }
+    },
+    { immediate: true },
+  );
 
-      function dragEnd(e) {
-        e.stopPropagation();
-        dragging.value = undefined;
-        hovering.value = undefined;
-      }
+  const vm = getCurrentInstance().proxy;
+  /** @type {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} */
+  const filterPredicate = (item, queryString = '') => {
+    if (props.customFilter) {
+      return props.customFilter(item, queryString);
+    }
+    const translatedTitle = vm.$st(item.title);
+    return translatedTitle
+      .toLocaleLowerCase()
+      .includes(queryString.toLocaleLowerCase());
+  };
 
-      /**
-       * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
-       */
-      const renderingItems = computed(() => {
-        let items = props.items.filter((i) => i.visible !== false);
-        if (query.value) {
-          items = items.filter((i) => filterPredicate(i, query.value));
-        }
-        return items;
-      });
+  /**
+   * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
+   */
+  const renderingItems = computed(() => {
+    let items = props.items.filter((i) => i.visible !== false);
+    if (query.value) {
+      items = items.filter((i) => filterPredicate(i, query.value));
+    }
+    return items;
+  });
 
-      const selectionActions = createSelectionActions(
-        renderingItems,
-        selected,
-        emit,
-      );
+  const {
+    dragging,
+    isDraggable,
+    borderBottom,
+    borderTop,
+    dragStart,
+    dragOver,
+    dragLeave,
+    dragEnd,
+    drop,
+  } = setupDraggableList(props, query, emit);
 
-      /**
-       * @type {import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>}
-       */
-      const renderingActions = computed(() => {
-        if (props.selectable && !props.singleSelect) {
-          return [...selectionActions, ...props.actions];
-        }
-        return props.actions;
-      });
+  const { select, selected, selectionActions } = setupSelectableList(
+    props,
+    renderingItems,
+    emit,
+  );
 
-      return {
-        query,
-        hovering,
-        dragging,
-        isDraggable,
-        borderBottom,
-        borderTop,
-        lightenEven,
-        /**
-         * @type {import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>}
-         */
-        renderingActions,
-        /**
-         * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
-         */
-        renderingItems,
-        /** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
-        selected,
-        /**
-         * @param {import("vue").UnwrapNestedRef<import("./VcsListItemComponent.vue").VcsListItem>} item
-         * @param {PointerEvent} event
-         */
-        select(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;
-          }
+  /**
+   * @type {import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>}
+   */
+  const renderingActions = computed(() => {
+    if (props.selectable && !props.singleSelect) {
+      return [...selectionActions, ...props.actions];
+    }
+    return props.actions;
+  });
 
-          emit('update:modelValue', selected.value);
-        },
-        drag,
-        drop,
-        dragOver,
-        dragLeave,
-        dragEnd,
-        listHeader,
-        listHeaderTooltip: createEllipseTooltip(
-          computed(() => listHeader.value?.$el),
-          computed(() => props.tooltip),
-          computed(() => props.title),
-        ),
-        hasIntermediateSlot: computed(() => !!slots['item.intermediate']),
-      };
-    },
-  };
+  const listHeader = ref();
+  const listHeaderTooltip = createEllipseTooltip(
+    computed(() => listHeader.value?.$el),
+    computed(() => props.tooltip),
+    computed(() => props.title),
+  );
+  const hasIntermediateSlot = computed(() => !!slots['item.intermediate']);
 </script>
 
 <style lang="scss" scoped>