@vcmap/ui 6.1.13 → 6.2.0-rc.1

package/src/components/lists/dragHelper.js

@@ -0,0 +1,325 @@
+import { ref, computed } from 'vue';
+
+/**
+ * @enum {number}
+ */
+export const InsertMode = {
+  BEFORE: -1,
+  INTO: 0,
+  AFTER: 1,
+};
+
+/**
+ * @typedef { Object &
+ *   (import('./VcsTreeNode.vue').VcsTreeNodeItem | import('./VcsListItemComponent.vue').VcsListItem)
+ * } VcsDraggableItem
+ */
+
+/**
+ * @typedef {{
+ *  item: VcsDraggableItem,
+ *  targetItem: VcsDraggableItem,
+ *  targetIndex: number,
+ *  position?: InsertMode
+ * }} ItemMovedEvent
+ * @property {VcsDraggableItem} item
+ * @property {VcsDraggableItem} targetItem
+ * @property {number} targetIndex @deprecated targetIndex is deprecated and will be removed on next mayor release. Use targetItem instead.
+ * @property {InsertMode?} position
+ */
+
+/**
+ * @typedef {{
+ * dragging: import("vue").Ref<boolean>,
+ *   isDraggable: import("vue").ComputedRef<boolean>,
+ *   dragStart: (
+ *     e: MouseEvent,
+ *     item: VcsDraggableItem
+ *   ) => void;
+ *   dragOver: (
+ *     e: MouseEvent,
+ *     item: VcsDraggableItem,
+ *     dropTarget: HTMLElement,
+ *     dropTargetZones?: DropZones,
+ *     isOpen?: boolean,
+ *   ) => void;
+ *   dragLeave: (e: MouseEvent) => void;
+ *   dragEnd: (e: MouseEvent) => void;
+ *   drop: (
+ *     e: MouseEvent,
+ *     item: VcsDraggableItem
+ *   ) => void;
+ * }} DraggableListOrTreeSetup
+ */
+
+/**
+ * Defines the allowed drop zones for an item.
+ * True allows all zones (3 for trees, 2 for lists), false prohibits dropping on the item.
+ * Used for styling the item.
+ * @typedef {{
+ *   before:boolean,
+ *   after:boolean,
+ *   into?:boolean
+ * }|boolean} DropZones
+ * @property {boolean} before - allow insert before target
+ * @property {boolean} after - allow insert after target
+ * @property {boolean?} into - allow insert into target. Only available for tree, not for list!
+ */
+
+/**
+ * A function defining the drop zones of a target item.
+ * Provides item and targetItem to implement corresponding conditions.
+ * Returns the allowed DropZones of the targetItem.
+ * @typedef {(item: VcsDraggableItem,targetItem: VcsDraggableItem) => DropZones} DropTargetZonesFunction
+ */
+
+/**
+ * Function setting up drag logic for lists or trees. Use only in setup function of components!
+ * This requires items (VcsListItem or VcsTreeNode) with unique keys (name property).
+ * @param {Object & { items: Array<VcsDraggableItem>, draggable: boolean, dropTargetZones?: DropTargetZonesFunction }} props
+ * @param {import("vue").Ref<string>} query
+ * @param {(event: 'itemMoved', value: ItemMovedEvent) => void} emit
+ * @returns {DraggableListOrTreeSetup}
+ */
+export function setupDraggableListOrTree(props, query, emit) {
+  const dragging = ref(false);
+  /**
+   * @type {VcsDraggableItem|null}
+   */
+  let draggedItem = null;
+  /**
+   *
+   * @type {InsertMode|null}
+   */
+  let dropPosition = null;
+
+  /**
+   * @type {import("vue").ComputedRef<boolean>}
+   */
+  const isDraggable = computed(() => {
+    return !query.value && props.draggable;
+  });
+
+  /**
+   *
+   * @param {HTMLElement} target
+   */
+  function clearDropTargetClasses(target) {
+    target.classList.remove(
+      'drop-target-before',
+      'drop-target-after',
+      'drop-target-into',
+      'no-drop-allowed',
+    );
+  }
+
+  /**
+   * Add css classes to visualize drop targets on tue current dragover item
+   * @param {MouseEvent} e
+   * @param {HTMLElement} dropTarget
+   * @param {DropZones} dropTargetZones
+   * @param {boolean} isOpen
+   */
+  function addDropTargetClasses(e, dropTarget, dropTargetZones, isOpen) {
+    const isAfterAllowed =
+      dropTargetZones === true ||
+      (typeof dropTargetZones === 'object' && dropTargetZones?.after !== false);
+    const isBeforeAllowed =
+      dropTargetZones === true ||
+      (typeof dropTargetZones === 'object' &&
+        dropTargetZones?.before !== false);
+    const isIntoAllowed =
+      dropTargetZones === true || dropTargetZones.into === true;
+
+    const denominator = isIntoAllowed ? 4 : 2;
+    const rect = dropTarget.getBoundingClientRect();
+    const threshold = rect.height / denominator;
+    const relativeY = e.clientY - rect.top;
+    const { currentTarget } = /** @type {{ currentTarget: HTMLElement }} */ (e);
+
+    e.dataTransfer.dropEffect = 'move';
+    if (isBeforeAllowed && relativeY < threshold) {
+      dropPosition = InsertMode.BEFORE;
+      currentTarget.classList.add('drop-target-before');
+    } else if (
+      isAfterAllowed &&
+      relativeY >= (denominator - 1) * threshold &&
+      !isOpen
+    ) {
+      dropPosition = InsertMode.AFTER;
+      currentTarget.classList.add('drop-target-after');
+    } else if (dropTargetZones === true || dropTargetZones.into === true) {
+      dropPosition = InsertMode.INTO;
+      currentTarget.classList.add('drop-target-into');
+      e.dataTransfer.dropEffect = 'copy';
+    } else {
+      e.dataTransfer.dropEffect = 'none';
+    }
+  }
+
+  /**
+   * @param {MouseEvent} e
+   * @param {VcsDraggableItem} item
+   */
+  function drop(e, item) {
+    if (isDraggable.value) {
+      if (draggedItem && item && draggedItem !== item) {
+        emit('itemMoved', {
+          item: draggedItem,
+          targetItem: item,
+          position: dropPosition,
+        });
+      }
+      draggedItem = null;
+      dropPosition = null;
+      dragging.value = false;
+      clearDropTargetClasses(e.currentTarget);
+    }
+  }
+
+  /**
+   * @param {MouseEvent} e
+   * @param {VcsDraggableItem} item
+   */
+  function dragStart(e, item) {
+    e.stopPropagation();
+    if (isDraggable.value) {
+      draggedItem = item;
+      e.dataTransfer.effectAllowed = 'all';
+      dragging.value = true;
+    }
+  }
+
+  /**
+   * @param {MouseEvent} e
+   * @param {VcsDraggableItem} item
+   * @param {HTMLElement} dropTarget
+   * @param {DropZones} [dropTargetZones=true]
+   * @param {boolean} [isOpen=false]
+   */
+  function dragOver(
+    e,
+    item,
+    dropTarget,
+    dropTargetZones = true,
+    isOpen = false,
+  ) {
+    e.stopPropagation();
+    e.preventDefault();
+    if (
+      !isDraggable.value ||
+      !dragging.value ||
+      draggedItem?.name === item.name
+    ) {
+      e.dataTransfer.dropEffect = 'none';
+      return;
+    }
+
+    clearDropTargetClasses(e.currentTarget);
+    addDropTargetClasses(
+      e,
+      dropTarget,
+      props.dropTargetZones
+        ? props.dropTargetZones(draggedItem, item)
+        : dropTargetZones,
+      isOpen,
+    );
+  }
+
+  /**
+   * @param {MouseEvent} e
+   */
+  function dragLeave(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    dropPosition = null;
+    clearDropTargetClasses(e.currentTarget);
+  }
+
+  /**
+   * @param {MouseEvent} e
+   */
+  function dragEnd(e) {
+    e.stopPropagation();
+    dropPosition = null;
+    dragging.value = false;
+  }
+
+  return {
+    dragging,
+    isDraggable,
+    dragStart,
+    dragOver,
+    dragLeave,
+    dragEnd,
+    drop,
+  };
+}
+
+/**
+ * Recursively searches for an item in a nested array and performs a splice operation
+ * @param {Array<VcsDraggableItem>} array - The array to search in
+ * @param {VcsDraggableItem} item - The item to find
+ * @param {number} deleteCount - Number of items to delete
+ * @param {InsertMode?} insertPosition - Default is inserting before provided item. Other options are after and into.
+ * @param {...VcsDraggableItem} itemsToInsert - Items to insert
+ * @returns {Array<VcsDraggableItem>|undefined} - The removed items or undefined if not found
+ */
+function findAndSplice(
+  array,
+  item,
+  deleteCount,
+  insertPosition,
+  ...itemsToInsert
+) {
+  const index = array.findIndex((i) => i === item);
+
+  if (index !== -1) {
+    if (insertPosition === InsertMode.AFTER) {
+      return array.splice(
+        index + InsertMode.AFTER,
+        deleteCount,
+        ...itemsToInsert,
+      );
+    } else if (insertPosition === InsertMode.INTO) {
+      array[index].children = array[index].children || [];
+      array[index].children.push(...itemsToInsert);
+      return array;
+    }
+    // delete or insert before
+    return array.splice(index, deleteCount, ...itemsToInsert);
+  }
+
+  // Item not found at current level, search in children
+  for (let i = 0; i < array.length; i++) {
+    const node = array[i];
+    if (node.children && node.children.length > 0) {
+      const result = findAndSplice(
+        node.children,
+        item,
+        deleteCount,
+        insertPosition,
+        ...itemsToInsert,
+      );
+
+      if (result !== undefined) {
+        return result; // Item was found in this subtree
+      }
+    }
+  }
+
+  // Item not found
+  return undefined;
+}
+
+/**
+ * A function moving items of a nested tree. Can be used for VcsTreeView @item-moved
+ * @example
+ * <VcsTreeView @item-moved="moveDraggableItems(items,$event)" />
+ * @param {Array<VcsDraggableItem>} items
+ * @param {ItemMovedEvent} event
+ */
+export function moveDraggableItems(items, { item, targetItem, position }) {
+  findAndSplice(items, item, 1);
+  findAndSplice(items, targetItem, 0, position, item);
+}

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

@@ -56,12 +56,13 @@ export function setupSelectableList(props: Object & SelectableListProps, renderi
  * 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
+ * @param {(event: 'itemMoved', value: import("./dragHelper.js").ItemMovedEvent) => void} emit
  * @returns {DraggableListSetup}
+ * @deprecated This function is deprecated and will be removed in version 7. Use setupDraggableListOrTree from dragHelper.js instead.
  */
 export function setupDraggableList(props: Object & {
     draggable: boolean;
-}, query: import("vue").Ref<string>, emit: (event: 'itemMoved', value: import("./VcsList.vue").ItemMovedEvent) => void): DraggableListSetup;
+}, query: import("vue").Ref<string>, emit: (event: 'itemMoved', value: import("./dragHelper.js").ItemMovedEvent) => void): DraggableListSetup;
 export type SelectableListProps = Object & {
     selectable?: boolean;
     singleSelect?: boolean;

package/src/components/lists/listHelper.js

@@ -1,4 +1,5 @@
 import { computed, isReactive, reactive, ref, shallowRef, watch } from 'vue';
+import { getLogger } from '@vcsuite/logger';
 
 /**
  * @param {import("vue").Ref<import("./VcsListItemComponent.vue").VcsListItem[]>} items
@@ -229,10 +230,16 @@ export function setupSelectableList(props, renderingItems, emit) {
  * 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
+ * @param {(event: 'itemMoved', value: import("./dragHelper.js").ItemMovedEvent) => void} emit
  * @returns {DraggableListSetup}
+ * @deprecated This function is deprecated and will be removed in version 7. Use setupDraggableListOrTree from dragHelper.js instead.
  */
 export function setupDraggableList(props, query, emit) {
+  getLogger('listHelper.js').deprecate(
+    'setupDraggableList',
+    'Use setupDraggableListOrTree instead.',
+  );
+
   /** @type {import("vue").Ref<number|undefined>} */
   const hovering = ref(undefined);
   /** @type {import("vue").Ref<number|undefined>} */

package/src/components/notification/VcsBadge.vue

@@ -2,18 +2,6 @@
   <span class="vcs-badge rounded-circle h-3 w-3" :class="[color]" />
 </template>
 
-<style lang="scss" scoped>
-  .vcs-badge {
-    border: 1px solid rgb(var(--v-theme-surface)) !important;
-  }
-  .h-3 {
-    height: 12px;
-  }
-  .w-3 {
-    width: 12px;
-  }
-</style>
-
 <script>
   /**
    * @description UI component representing a circular indicator.
@@ -29,3 +17,15 @@
     },
   };
 </script>
+
+<style lang="scss" scoped>
+  .vcs-badge {
+    border: 1px solid rgb(var(--v-theme-surface)) !important;
+  }
+  .h-3 {
+    height: 12px;
+  }
+  .w-3 {
+    width: 12px;
+  }
+</style>

package/src/components/notification/VcsHelp.vue

@@ -10,15 +10,6 @@
     </v-container>
   </div>
 </template>
-<style lang="scss">
-  .vcs-help {
-    box-sizing: border-box;
-    ol,
-    ul {
-      padding-left: 16px; /* Indentation for list items */
-    }
-  }
-</style>
 <script>
   import { VContainer } from 'vuetify/components';
 
@@ -40,3 +31,12 @@
     },
   };
 </script>
+<style lang="scss">
+  .vcs-help {
+    box-sizing: border-box;
+    ol,
+    ul {
+      padding-left: 16px; /* Indentation for list items */
+    }
+  }
+</style>

package/src/components/notification/VcsHelpTooltip.vue

@@ -10,7 +10,6 @@
     </v-container>
   </v-tooltip>
 </template>
-<style lang="scss" scoped></style>
 <script>
   import { VTooltip, VIcon, VContainer } from 'vuetify/components';
   import { useFontSize } from '../../vuePlugins/vuetify.js';
@@ -46,3 +45,4 @@
     },
   };
 </script>
+<style lang="scss" scoped></style>

package/src/components/style/StyleMenuWrapper.vue

@@ -3,7 +3,7 @@
     <div class="d-flex align-center py-1">
       <VcsCheckbox
         :model-value="!!modelValue"
-        @update:modelValue="handleCheckbox"
+        @update:model-value="handleCheckbox"
         :disabled="disabled"
         class="pr-1"
       />

package/src/components/tables/VcsDataTable.vue

@@ -238,6 +238,7 @@
         default: undefined,
       },
     },
+    emits: ['update:items'],
     setup(props, { attrs, emit, slots }) {
       const vm = getCurrentInstance().proxy;
       const hovering = ref(null);
@@ -396,8 +397,8 @@
 
       const showFooter = computed(
         () =>
-          props.items.length > itemsPerPageRef.value ||
-          props.serverItemsLength > itemsPerPageRef.value,
+          props.items.length > Math.min(...props.itemsPerPageArray) ||
+          props.serverItemsLength > Math.min(...props.itemsPerPageArray),
       );
 
       const forwardSlots = getForwardSlots(slots, [

package/src/components/tables/VcsDataTable.vue.d.ts

@@ -64,7 +64,7 @@ declare const _default: import("vue").DefineComponent<{
     translatedHeaders: ComputedRef<Object[]>;
     showFooter: import("vue").ComputedRef<boolean>;
     forwardSlots: string[];
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:items"[], "update:items", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     baseComponent: {
         type: StringConstructor;
         default: string;
@@ -110,7 +110,9 @@ declare const _default: import("vue").DefineComponent<{
         type: FunctionConstructor;
         default: undefined;
     };
-}>>, {
+}>> & {
+    "onUpdate:items"?: ((...args: any[]) => any) | undefined;
+}, {
     items: unknown[];
     customFilter: Function;
     showSearchbar: boolean;

package/src/components/vector-properties/VcsFeatureEditingWindow.vue

@@ -143,6 +143,7 @@
    * @vue-prop {boolean} [showStyle=true] - Whether the style component should be shown.
    */
   export default {
+    name: 'VcsFeatureEditingWindow',
     components: {
       VcsSnapTo,
       VcsFeatureTransforms,
@@ -151,7 +152,6 @@
       VcsVectorPropertiesComponent,
       VcsFeatureStyleComponent,
     },
-    name: 'VcsFeatureEditingWindow',
     props: {
       allowedVectorProperties: {
         type: Array,

package/src/components/vector-properties/VcsFeatureTransforms.vue

@@ -137,6 +137,7 @@
    * @vue-prop {boolean} [allowZInput=false]
    */
   export default {
+    name: 'VcsFeatureTransforms',
     components: {
       VcsButton,
       VSheet,
@@ -160,7 +161,6 @@
         default: false,
       },
     },
-    name: 'VcsFeatureTransforms',
     setup(props) {
       /** @type {import("./VcsFeatureEditingWindow.vue").EditorManager} */
       const manager = inject('manager');

package/src/components/vector-properties/VcsVectorPropertiesComponent.vue

@@ -546,7 +546,6 @@
    */
   export default {
     name: 'VcsVectorPropertiesComponent',
-    methods: { computed },
     components: {
       VcsFormSection,
       VcsLabel,
@@ -770,5 +769,6 @@
         cid,
       };
     },
+    methods: { computed },
   };
 </script>

package/src/components/viewpoint/VcsViewpointEditor.vue

@@ -51,6 +51,7 @@
         default: () => [],
       },
     },
+    emits: ['close'],
     setup(props, { emit }) {
       const app = inject('vcsApp');
       const localConfig = ref(props.getConfig());

package/src/components/viewpoint/VcsViewpointEditor.vue.d.ts

@@ -16,7 +16,7 @@ declare const _default: import("vue").DefineComponent<{
     apply(): void;
     cancel(): Promise<void>;
     reset: () => Promise<void>;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     getConfig: {
         type: FunctionConstructor;
         required: true;
@@ -29,7 +29,9 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => never[];
     };
-}>>, {
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
     nameRules: unknown[];
 }, {}>;
 export default _default;