@vcmap/ui 6.3.11 → 7.0.0-rc.1

package/src/components/lists/{VcsGroupedList.vue → VcsGroupedList.ts.vue}

@@ -1,28 +1,27 @@
-<script setup>
+<script setup lang="ts">
   import { computed, getCurrentInstance, watch } from 'vue';
+  import type { PropType } from 'vue';
   import { VExpansionPanels } from 'vuetify/components';
   import {
     useProxiedAtomicModel,
     useProxiedComplexModel,
   } from '../modelHelper.js';
-  import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
-  import VcsExpansionPanel from '../section/VcsExpansionPanel.vue';
-  import VcsList from './VcsList.vue';
+  import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.ts.vue';
+  import VcsExpansionPanel from '../section/VcsExpansionPanel.ts.vue';
+  import VcsList from './VcsList.ts.vue';
   import { setupSelectableList } from './listHelper.js';
+  import type { VcsListItem } from './VcsListItemComponent.ts.vue';
+  import type { VcsAction } from '../../actions/actionHelper.js';
 
-  /**
-   * @typedef {Object} VcsListGroup
-   * @property {string} name
-   * @property {string?} title
-   * @property {boolean?} disabled
-   * @property {Array<import("../../actions/actionHelper.js").VcsAction>?} headerActions
-   * @property {number?} overflowCount
-   */
+  export type VcsListGroup = {
+    name: string;
+    title?: string;
+    disabled?: boolean;
+    headerActions?: Array<VcsAction>;
+    overflowCount?: number;
+  };
 
-  /**
-   * @typedef {import("./VcsListItemComponent.vue").VcsListItem & { group: string }} VcsGroupedListItem
-   * @property {string} group
-   */
+  export type VcsGroupedListItem = VcsListItem & { group: string };
 
   /**
    * @description
@@ -30,27 +29,26 @@
    * Items not belonging to one of the provided groups are neglected.
    * Per group a sub list is rendered, which behaves just like a { @link VcsList }.
    * Only differences: The search and selection behaviour are cross group and items are not draggable.
-   * @vue-prop {Array<import("./VcsListItemComponent.vue").VcsListItem>} items
+   * @vue-prop {Array<import("./VcsListItemComponent.ts.vue").VcsListItem>} items
    * @vue-prop {boolean} [selectable=false]
    * @vue-prop {boolean} [singleSelect=false]
-   * @vue-prop {Array<import("./VcsListItemComponent.vue").VcsListItem>} [modelValue=[]] - the initial items to be selected.
+   * @vue-prop {Array<import("./VcsListItemComponent.ts.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 {function(import("./VcsListItemComponent.ts.vue").VcsListItem, string):boolean} [customFilter] - a function to customize filtering when searching.
    * @vue-prop {string} [searchbarPlaceholder] - placeholder to render inside the search field
    */
 
   const props = defineProps({
-    /** @type {VcsGroupedListItem} */
     items: {
-      type: Array,
+      type: Array as PropType<Array<VcsGroupedListItem>>,
       default: () => [],
     },
     groups: {
-      type: Array,
+      type: Array as PropType<Array<VcsListGroup>>,
       default: () => [],
     },
     opened: {
-      type: Array,
+      type: Array as PropType<Array<string>>,
       default: () => [],
     },
     selectable: {
@@ -62,7 +60,7 @@
       default: false,
     },
     modelValue: {
-      type: Array,
+      type: Array as PropType<Array<VcsGroupedListItem>>,
       default: () => [],
     },
     search: {
@@ -78,7 +76,9 @@
       default: undefined,
     },
     customFilter: {
-      type: Function,
+      type: Function as PropType<
+        (item: VcsGroupedListItem, search: string) => boolean
+      >,
       default: undefined,
     },
     openAll: {
@@ -93,15 +93,17 @@
     'update:opened',
   ]);
 
-  const vm = getCurrentInstance().proxy;
+  const vm = getCurrentInstance()?.proxy;
   const localSearchValue = useProxiedAtomicModel(props, 'search', emit);
   const localOpenedGroups = useProxiedComplexModel(props, 'opened', emit);
 
-  const translatedTitle = (item) =>
-    item.title ? vm.$t(item.title) : item.name;
+  const translatedTitle = (item: VcsGroupedListItem): string =>
+    item.title ? (vm?.$st(item.title) as string) : item.name;
 
-  /** @type {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} */
-  const filterPredicate = (item, queryString = '') => {
+  const filterPredicate = (
+    item: VcsGroupedListItem,
+    queryString = '',
+  ): boolean => {
     if (props.customFilter) {
       return props.customFilter(item, queryString);
     }
@@ -110,11 +112,14 @@
       .includes(queryString.toLocaleLowerCase());
   };
 
-  function sortByGroupOrder(items, groups) {
+  function sortByGroupOrder(
+    items: VcsGroupedListItem[],
+    groups: VcsListGroup[],
+  ): VcsGroupedListItem[] {
     const groupOrder = new Map(groups.map((g, index) => [g.name, index]));
 
     return items.sort(
-      (a, b) => groupOrder.get(a.group) - groupOrder.get(b.group),
+      (a, b) => (groupOrder.get(a.group) ?? 0) - (groupOrder.get(b.group) ?? 0),
     );
   }
 
@@ -129,15 +134,13 @@
   const { select, selected } = setupSelectableList(props, renderingItems, emit);
 
   watch(
-    [() => props.groups, () => props.openAll],
+    [(): VcsListGroup[] => props.groups, (): boolean => props.openAll],
     () => {
       if (props.openAll) {
         localOpenedGroups.value = [...props.groups.map((group) => group.name)];
       }
     },
-    {
-      immediate: true,
-    },
+    { immediate: true },
   );
 </script>
 
@@ -155,7 +158,7 @@
       v-model="localOpenedGroups"
       class="rounded-0 panels"
     >
-      <vcs-expansion-panel
+      <VcsExpansionPanel
         v-for="(group, i) in groups"
         :data-group-name="group.name"
         :key="i"
@@ -165,14 +168,18 @@
         :header-actions="group.headerActions"
         :action-button-list-overflow-count="group.overflowCount"
       >
-        <vcs-list
+        <VcsList
           :items="renderingItems.filter((s) => s.group === group.name)"
           :selectable="selectable"
           :single-select="singleSelect"
           :select-function="select"
-          :model-value="selected.filter((s) => s.group === group.name)"
+          :model-value="
+            selected.filter(
+              (s) => (s as VcsGroupedListItem).group === group.name,
+            )
+          "
         />
-      </vcs-expansion-panel>
+      </VcsExpansionPanel>
     </v-expansion-panels>
   </div>
 </template>

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

@@ -0,0 +1,126 @@
+import type { PropType } from 'vue';
+import type { VcsListItem } from './VcsListItemComponent.ts.vue';
+import type { VcsAction } from '../../actions/actionHelper.js';
+export type VcsListGroup = {
+    name: string;
+    title?: string;
+    disabled?: boolean;
+    headerActions?: Array<VcsAction>;
+    overflowCount?: number;
+};
+export type VcsGroupedListItem = VcsListItem & {
+    group: string;
+};
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    items: {
+        type: PropType<Array<VcsGroupedListItem>>;
+        default: () => never[];
+    };
+    groups: {
+        type: PropType<Array<VcsListGroup>>;
+        default: () => never[];
+    };
+    opened: {
+        type: PropType<Array<string>>;
+        default: () => never[];
+    };
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    singleSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<Array<VcsGroupedListItem>>;
+        default: () => never[];
+    };
+    search: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchbarPlaceholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    customFilter: {
+        type: PropType<(item: VcsGroupedListItem, search: string) => boolean>;
+        default: undefined;
+    };
+    openAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, unknown, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    "update:opened": (...args: any[]) => void;
+    "update:search": (...args: any[]) => void;
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    items: {
+        type: PropType<Array<VcsGroupedListItem>>;
+        default: () => never[];
+    };
+    groups: {
+        type: PropType<Array<VcsListGroup>>;
+        default: () => never[];
+    };
+    opened: {
+        type: PropType<Array<string>>;
+        default: () => never[];
+    };
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    singleSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<Array<VcsGroupedListItem>>;
+        default: () => never[];
+    };
+    search: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchbarPlaceholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    customFilter: {
+        type: PropType<(item: VcsGroupedListItem, search: string) => boolean>;
+        default: undefined;
+    };
+    openAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:opened"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:search"?: ((...args: any[]) => any) | undefined;
+}, {
+    search: string;
+    modelValue: VcsGroupedListItem[];
+    items: VcsGroupedListItem[];
+    opened: string[];
+    selectable: boolean;
+    customFilter: (item: VcsGroupedListItem, search: string) => boolean;
+    openAll: boolean;
+    searchbarPlaceholder: string;
+    singleSelect: boolean;
+    searchable: boolean;
+    groups: VcsListGroup[];
+}, {}>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/src/components/lists/{VcsList.vue → VcsList.ts.vue}

@@ -42,7 +42,11 @@
           :draggable="isDraggable"
           @dragstart="dragStart($event, item)"
           @dragover.prevent="
-            dragOver($event, item, $event.currentTarget, { into: false })
+            dragOver($event, item, $event.currentTarget, {
+              into: false,
+              before: true,
+              after: true,
+            })
           "
           @dragend="dragEnd($event)"
           @drop="drop($event, item)"
@@ -78,8 +82,9 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
   import { computed, getCurrentInstance, ref, useSlots, watch } from 'vue';
+  import type { PropType } from 'vue';
   import {
     VIcon,
     VList,
@@ -87,12 +92,15 @@
     VListItemTitle,
     VTooltip,
   } from 'vuetify/components';
-  import { setupDraggableListOrTree } from './dragHelper.js';
-  import { setupSelectableList } from './listHelper.js';
-  import VcsListItemComponent from './VcsListItemComponent.vue';
-  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
-  import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
+  import type { VcsAction } from '../../actions/actionHelper.js';
   import { createEllipseTooltip } from '../composables.js';
+  import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.ts.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.ts.vue';
+  import VcsListItemComponent from './VcsListItemComponent.ts.vue';
+  import type { VcsListItem } from './VcsListItemComponent.ts.vue';
+  import { setupSelectableList } from './listHelper.js';
+  import { setupDraggableListOrTree } from './dragHelper.js';
+  import type { DropTargetZonesFunction } from './dragHelper.js';
 
   /**
    * @description
@@ -106,14 +114,14 @@
    * Clicking with CTRL adds or removes to a selection set.
    * Clicking with SHIFT will create a selection range, starting or ending with the first item in the list
    * or the last normally selected item (not the last item clicked with CTRL for instance).
-   * @vue-prop {Array<import("./VcsListItemComponent.vue").VcsListItem>} items
+   * @vue-prop {Array<import("./VcsListItemComponent.ts.vue").VcsListItem>} items
    * @vue-prop {boolean} [draggable=false]
    * @vue-prop {import("./dragHelper.js").DropTargetZonesFunction} [dropTargetZones] - a function to define allowed drop target zones per item.
    * @vue-prop {boolean} [selectable=false]
    * @vue-prop {boolean} [singleSelect=false]
-   * @vue-prop {Array<import("./VcsListItemComponent.vue").VcsListItem>} [modelValue=[]] - the initial items to be selected.
+   * @vue-prop {Array<import("./VcsListItemComponent.ts.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 {function(import("./VcsListItemComponent.ts.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
@@ -131,7 +139,7 @@
 
   const props = defineProps({
     items: {
-      type: Array,
+      type: Array as PropType<VcsListItem[]>,
       required: true,
     },
     draggable: {
@@ -139,7 +147,7 @@
       default: false,
     },
     dropTargetZones: {
-      type: Function,
+      type: Function as PropType<DropTargetZonesFunction | undefined>,
       default: undefined,
     },
     selectable: {
@@ -151,11 +159,13 @@
       default: false,
     },
     selectFunction: {
-      type: Function,
+      type: Function as PropType<
+        (item: VcsListItem, event: PointerEvent) => void
+      >,
       default: undefined,
     },
     modelValue: {
-      type: Array,
+      type: Array as PropType<Array<VcsListItem>>,
       default: () => [],
     },
     searchable: {
@@ -163,7 +173,7 @@
       default: false,
     },
     customFilter: {
-      type: Function,
+      type: Function as PropType<(item: VcsListItem, query: string) => boolean>,
       default: undefined,
     },
     searchbarPlaceholder: {
@@ -176,40 +186,30 @@
     },
     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,
+      type: Array as PropType<VcsAction[]>,
       required: false,
       default: () => [],
     },
   });
 
   const emit = defineEmits(['update:modelValue', 'itemMoved']);
-
   const slots = useSlots();
-
-  const lightenEven = computed(() => {
-    return !(!props.searchable && !props.showTitle);
-  });
-
-  /** @type {import("vue").Ref<string>} */
+  const lightenEven = computed(() => !(!props.searchable && !props.showTitle));
   const query = ref('');
 
   watch(
@@ -222,22 +222,18 @@
     { immediate: true },
   );
 
-  const vm = getCurrentInstance().proxy;
-  /** @type {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} */
-  const filterPredicate = (item, queryString = '') => {
+  const vm = getCurrentInstance()?.proxy;
+  const filterPredicate = (item: VcsListItem, queryString = ''): boolean => {
     if (props.customFilter) {
       return props.customFilter(item, queryString);
     }
-    const translatedTitle = vm.$st(item.title);
+    const translatedTitle = vm?.$st(item.title) as string;
     return translatedTitle
       .toLocaleLowerCase()
       .includes(queryString.toLocaleLowerCase());
   };
 
-  /**
-   * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
-   */
-  const renderingItems = computed(() => {
+  const renderingItems = computed<VcsListItem[]>(() => {
     let items = props.items.filter((i) => i.visible !== false);
     if (query.value) {
       items = items.filter((i) => filterPredicate(i, query.value));
@@ -246,15 +242,15 @@
   });
 
   const { dragging, isDraggable, dragStart, dragOver, dragEnd, drop } =
-    setupDraggableListOrTree(props, query, (e, value) =>
+    setupDraggableListOrTree(props, query, (e, value) => {
       emit(e, {
         ...value,
-        // @deprecate: targetIndex will be removed on next mayor release
+        // @deprecated: targetIndex will be removed on next major release
         targetIndex: props.items.findIndex(
           (i) => i.name === value.targetItem.name,
         ),
-      }),
-    );
+      });
+    });
 
   const { select, selected, selectionActions } = setupSelectableList(
     props,
@@ -262,10 +258,7 @@
     emit,
   );
 
-  /**
-   * @type {import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>}
-   */
-  const renderingActions = computed(() => {
+  const renderingActions = computed<VcsAction[]>(() => {
     if (props.selectable && !props.singleSelect) {
       return [...selectionActions, ...props.actions];
     }