@vcmap/ui 6.0.0-rc.3 → 6.0.0-rc.6

package/src/components/form-output/markdownHelper.js

@@ -0,0 +1,398 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import {
+  BooleanType,
+  newParsingContext,
+  StringType,
+  NoneType,
+} from 'ol/expr/expression';
+import { buildExpression, newEvaluationContext } from 'ol/expr/cpu';
+import { is } from '@vcsuite/check';
+
+/**
+ * @typedef {Object} Block
+ * @property {RegExpExecArray} opening
+ * @property {RegExpExecArray} closing
+ */
+
+/**
+ * @typedef {Block} ConditionalBlock
+ * @property {RegExpExecArray|undefined} elseStatement
+ * @property {RegExpExecArray[]} elseIfs
+ */
+
+/**
+ * @param {string} content
+ * @returns {string}
+ */
+export function parseAndSanitizeMarkdown(content) {
+  const html = marked.parse(content, { breaks: true });
+
+  // Then sanitize the HTML using DOMPurify
+  return DOMPurify.sanitize(html, { ADD_ATTR: ['target'] });
+}
+
+/**
+ * @param {string} expressionString
+ * @param {Record<string, unknown>} data
+ * @param {number} evaluationType
+ * @returns {*}
+ */
+function evaluateExpression(expressionString, data, evaluationType) {
+  const parsed = expressionString.startsWith('[')
+    ? JSON.parse(expressionString)
+    : [
+        'get',
+        ...expressionString
+          .replace(/\[([^\]]+)]/g, '.$1')
+          .split('.')
+          .filter((f) => f),
+      ];
+
+  const compiledExpression = buildExpression(
+    parsed,
+    evaluationType,
+    newParsingContext(),
+  );
+  const evaluationContext = newEvaluationContext();
+  evaluationContext.properties = data;
+  return compiledExpression(evaluationContext);
+}
+
+/**
+ * Replaces template strings by provided attributes, e.g. {{myAttribute}}
+ * @param {string} template
+ * @param {Record<string, unknown>} data
+ * @returns {string}
+ */
+function replaceAttributes(template, data) {
+  const pattern = /\{\{([^}]+)}}/g;
+  return template.replace(pattern, (p, value) => {
+    return evaluateExpression(value.trim(), data, StringType) ?? '';
+  });
+}
+
+/**
+ * @param {RegExp} regexp
+ * @param {string} string
+ * @returns {RegExpExecArray[]}
+ */
+function regexHits(regexp, string) {
+  const hits = [];
+  let hit;
+  // eslint-disable-next-line no-cond-assign
+  while ((hit = regexp.exec(string))) {
+    hits.push(hit);
+  }
+
+  return hits;
+}
+
+/**
+ * @param {RegExpExecArray[]} openings
+ * @param {RegExpExecArray[]} closings
+ * @param {(Block) => void} accepted
+ * @param {(Block) => void} rejected
+ * @returns {void}
+ */
+function findTopLevelBlock(openings, closings, accepted, rejected) {
+  const localOpenings = openings.slice();
+  const localClosings = closings.slice();
+  while (localOpenings.length > 0) {
+    let matchingClosing;
+    let matchingOpening;
+    while (!matchingClosing && localClosings.length > 0) {
+      const currentClosing = localClosings.shift();
+      const openingDistances = localOpenings.map(
+        (o) => currentClosing.index - o.index,
+      );
+      const minDistance = openingDistances.reduce((min, currentDistance) => {
+        if (currentDistance > 0 && currentDistance < min) {
+          return currentDistance;
+        }
+        return min;
+      }, Infinity);
+      const matchingOpeningIndex = openingDistances.indexOf(minDistance);
+      matchingOpening = localOpenings[matchingOpeningIndex];
+
+      if (matchingOpeningIndex === 0) {
+        matchingClosing = currentClosing;
+      } else {
+        rejected({ opening: matchingOpening, closing: currentClosing });
+      }
+      localOpenings.splice(matchingOpeningIndex, 1);
+    }
+
+    if (matchingClosing) {
+      accepted({ opening: matchingOpening, closing: matchingClosing });
+    }
+  }
+}
+
+/**
+ * @param {RegExpExecArray} tag
+ * @param {Block} block
+ * @returns {boolean}
+ */
+function tagWithinBlock(tag, block) {
+  return tag.index > block.opening.index && tag.index < block.closing.index;
+}
+
+/**
+ * @param {string} template
+ * @returns {Block[]}
+ */
+function getForEachBlocks(template) {
+  const forEachBlocks = [];
+  const forEachOpenings = regexHits(
+    /\s*{{#each\s\(([^.)]+)\)\sin\s([^}]+)}}\s*/g,
+    template,
+  );
+  const forEachClosings = regexHits(/\s*{{\/each}}\s*/g, template);
+
+  if (forEachClosings.length > forEachOpenings.length) {
+    throw new Error(
+      'Template failed to render, missing opening tag for each statements',
+    );
+  } else if (forEachClosings.length < forEachOpenings.length) {
+    throw new Error(
+      'Template failed to render, missing closing tag for each statements',
+    );
+  }
+
+  findTopLevelBlock(
+    forEachOpenings,
+    forEachClosings,
+    (block) => {
+      forEachBlocks.push(block);
+    },
+    () => {},
+  );
+
+  return forEachBlocks;
+}
+
+/**
+ * @param {string} template
+ * @param {Block[]} forEachBlocks
+ * @returns {ConditionalBlock[]}
+ */
+function getConditionalBlocks(template, forEachBlocks) {
+  const conditionalBlocks = [];
+  let conditionalOpenings = regexHits(/\s*{{#if\s([^}]*)}}\s*/g, template);
+  let conditionalClosings = regexHits(/\s*{{\/if}}\s*/g, template);
+  let elseIfs = regexHits(/\s*{{elseif\s([^}]*)}}\s*/g, template);
+  let elses = regexHits(/\s*{{else}}\s*/g, template);
+
+  const withinForEachBlock = (tag) =>
+    forEachBlocks.find((block) => tagWithinBlock(tag, block));
+
+  // conditionals within a for each blocks are rendered with the for each block, ignore
+  conditionalOpenings = conditionalOpenings.filter(
+    (t) => !withinForEachBlock(t),
+  );
+  conditionalClosings = conditionalClosings.filter(
+    (t) => !withinForEachBlock(t),
+  );
+
+  if (conditionalClosings.length > conditionalOpenings.length) {
+    throw new Error(
+      'Template failed to render, missing closing tag for if statements',
+    );
+  } else if (conditionalClosings.length < conditionalOpenings.length) {
+    throw new Error(
+      'Template failed to render, missing opening tag for if statements',
+    );
+  }
+
+  const filterElseIfElse = (block) => {
+    elseIfs = elseIfs.filter((tag) => !tagWithinBlock(tag, block));
+    elses = elses.filter((tag) => !tagWithinBlock(tag, block));
+  };
+
+  findTopLevelBlock(
+    conditionalOpenings,
+    conditionalClosings,
+    (block) => {
+      const elsIfs = elseIfs.filter((tag) => tagWithinBlock(tag, block));
+      const elseStatement = elses.find((tag) => tagWithinBlock(tag, block));
+      if (
+        elseStatement &&
+        elsIfs.length > 0 &&
+        elseStatement.index < elsIfs.at(-1).index
+      ) {
+        throw new Error('{{else}} must be the last entry in a block');
+      }
+      conditionalBlocks.push({
+        ...block,
+        elseStatement,
+        elseIfs,
+      });
+    },
+    (block) => {
+      filterElseIfElse(block);
+    },
+  );
+
+  return conditionalBlocks;
+}
+
+/**
+ * @param {string} openingTag
+ * @returns {boolean}
+ */
+function shouldRemoveWhiteSpace(openingTag) {
+  return /\n\s*\{/.test(openingTag) && /}\s*\n/.test(openingTag);
+}
+
+/**
+ * This will extract the block to render separately. This will depend on the white space handling. If the
+ * opening is placed on its own line, whitespace after the opening and before the closing blocks will be removed
+ * from the sub template, up to the first new line feed.
+ * @param {string} template
+ * @param {Block} block
+ * @returns {string}
+ */
+function getSubTemplateForBlock(template, block) {
+  const removeWhiteSpace = shouldRemoveWhiteSpace(block.opening[0]);
+  let startIndex = block.opening.index + block.opening[0].indexOf('}') + 2;
+  let endIndex = block.closing.index + block.closing[0].indexOf('{');
+  if (removeWhiteSpace) {
+    startIndex += (/}\s*\n/.exec(block.opening[0])?.[0].length ?? 1) - 1;
+    endIndex -= (/\n\s*\{/.exec(block.closing[0])?.[0].length ?? 2) - 2;
+  }
+
+  return template.substring(startIndex, endIndex);
+}
+
+/**
+ * This will replace a block with a previously extracted blocks rendered template.
+ * This will depend on the white space handling. If the opening is placed on its own line,
+ * whitespace before the opening and after the closing blocks will be removed up to the first new line feed,
+ * from the new template string all together.
+ * @param {string} template
+ * @param {Block} block
+ * @param {string} replacement
+ * @returns {string}
+ */
+function replaceBlock(template, block, replacement) {
+  const removeWhiteSpace = shouldRemoveWhiteSpace(block.opening[0]);
+  let startIndex = block.opening.index + block.opening[0].indexOf('{');
+  let endIndex = block.closing.index + block.closing[0].indexOf('}') + 2;
+  if (removeWhiteSpace) {
+    startIndex -= (/\n\s*\{/.exec(block.opening[0])?.[0].length ?? 2) - 2;
+    endIndex += (/}\s*\n/.exec(block.closing[0])?.[0].length ?? 1) - 1;
+  }
+
+  return `${template.substring(0, startIndex)}${replacement}${template.substring(endIndex)}`;
+}
+
+/**
+ * Replaces {{#if }} blocks
+ * @param {string} template
+ * @param {Record<string, unknown>} data
+ * @returns {string}
+ */
+function expandConditionalsAndLoops(template, data) {
+  let renderedTemplate = template;
+  const forEachBlocks = getForEachBlocks(template);
+
+  getConditionalBlocks(template, forEachBlocks)
+    .reverse()
+    .forEach(
+      /** @param {ConditionalBlock} block */ (block) => {
+        const partialBlocks = [block.opening];
+        if (block.elseIfs) {
+          partialBlocks.push(...block.elseIfs);
+        }
+        let trueStatementIndex = partialBlocks.findIndex((s) =>
+          evaluateExpression(s[1], data, BooleanType),
+        );
+        if (trueStatementIndex === -1 && block.elseStatement) {
+          trueStatementIndex = partialBlocks.length;
+        }
+
+        let renderedBlock = '';
+        if (trueStatementIndex > -1) {
+          if (block.elseStatement) {
+            partialBlocks.push(block.elseStatement);
+          }
+          partialBlocks.push(block.closing);
+
+          const blockTemplate = getSubTemplateForBlock(template, {
+            opening: partialBlocks[trueStatementIndex],
+            closing: partialBlocks[trueStatementIndex + 1],
+          });
+
+          renderedBlock = expandConditionalsAndLoops(blockTemplate, data);
+        }
+
+        renderedTemplate = replaceBlock(renderedTemplate, block, renderedBlock);
+      },
+    );
+
+  // only iterate over blocks not removed by conditionals
+  getForEachBlocks(renderedTemplate)
+    .reverse()
+    .forEach((block) => {
+      const obj = evaluateExpression(block.opening[2], data, NoneType);
+      let keyValuePairs;
+      if (is(obj, Object)) {
+        keyValuePairs = Object.entries(obj);
+      } else if (Array.isArray(obj)) {
+        keyValuePairs = obj.entries();
+      }
+      const renderedBlocks = [];
+      if (keyValuePairs) {
+        let index = 0;
+        const [valueName, keyName, indexName] = block.opening[1]
+          .split(',')
+          .map((e) => e.trim())
+          .slice(0, 3);
+
+        const blockTemplate = getSubTemplateForBlock(renderedTemplate, block);
+        // eslint-disable-next-line no-restricted-syntax
+        for (const args of keyValuePairs) {
+          const forEachData = structuredClone(data);
+          forEachData[valueName] = args[1];
+          if (keyName) {
+            forEachData[keyName] = args[0];
+          }
+          if (indexName) {
+            forEachData[indexName] = index;
+          }
+          const currentBlock = expandConditionalsAndLoops(
+            blockTemplate,
+            forEachData,
+          );
+          renderedBlocks.push(replaceAttributes(currentBlock, forEachData));
+          index += 1;
+        }
+      }
+
+      renderedTemplate = replaceBlock(
+        renderedTemplate,
+        block,
+        renderedBlocks.join(''),
+      );
+    });
+
+  return renderedTemplate;
+}
+
+/**
+ * Renders a template in these steps
+ * 1. expand conditional blocks. this will remove any blocks that do not match their expressions and choose from if / elseif / else block which of them to render
+ * 2. expand iterations. this will create new templates for each iteration and re-run the rendering for those blocks
+ * 3. render attributes. this will add the attributes to all the blocks not within each blocks
+ * @param {string|string[]} template
+ * @param {Record<string, unknown>} data
+ * @returns {string}
+ */
+export function renderTemplate(template, data) {
+  const templateString = Array.isArray(template)
+    ? template.join('\n')
+    : template;
+  const conditionalTemplate = expandConditionalsAndLoops(templateString, data);
+  return replaceAttributes(conditionalTemplate, data);
+}

package/src/components/import/VcsFileDrop.vue

@@ -7,10 +7,13 @@
     class="d-flex justify-center drop-field"
     :class="{ dragging: isDragging }"
     :dragging="isDragging"
+    flat
     v-bind="$attrs"
   >
     <slot>
-      <v-card-title class="d-flex align-center">{{ $st(title) }}</v-card-title>
+      <v-card-title class="d-flex align-center text-primary">{{
+        $st(title)
+      }}</v-card-title>
     </slot>
   </v-card>
 </template>
@@ -68,13 +71,13 @@
 
 <style scoped lang="scss">
   .drop-field {
-    outline: 4px dashed rgb(var(--v-theme-base));
-    outline-offset: -8px;
+    margin: 8px 8px;
+    outline: 2px dashed rgb(var(--v-theme-primary));
+    border-radius: 4px;
     background-color: rgb(var(--v-theme-base-lighten-4));
   }
 
   .dragging {
-    outline-color: rgb(var(--v-theme-primary));
-    background-color: rgb(var(--v-theme-base-lighten-1));
+    background-color: rgb(var(--v-theme-primary-lighten-3));
   }
 </style>

package/src/components/import/VcsImportComponent.vue

@@ -1,8 +1,7 @@
 <template>
   <v-card flat class="pa-2">
     <vcs-file-drop
-      elevation="4"
-      :height="2 * useItemHeight().value"
+      :height="dropElementHeight"
       :multiple="multiple"
       v-model="files"
     />
@@ -31,7 +30,7 @@
   import { VCard } from 'vuetify/components';
   import { computed, inject, ref } from 'vue';
   import { removeListenersFromAttrs } from '../attrsHelpers.js';
-  import { useItemHeight } from '../../vuePlugins/vuetify.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
   import VcsFileDrop from './VcsFileDrop.vue';
   import VcsFormButton from '../buttons/VcsFormButton.vue';
   import VcsFileInput from '../form-inputs-controls/VcsFileInput.vue';
@@ -78,11 +77,16 @@
 
       const noListenerAttrs = computed(() => removeListenersFromAttrs(attrs));
 
+      const fontSize = useFontSize();
+      const dropElementHeight = computed(() => {
+        return fontSize.value * 6 + 18;
+      });
+
       return {
         files,
         loading,
         noListenerAttrs,
-        useItemHeight,
+        dropElementHeight,
         async doImport() {
           loading.value = true;
           try {

package/src/components/import/VcsImportComponent.vue.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     files: WritableComputedRef<File[]>;
     loading: import("vue").Ref<boolean>;
     noListenerAttrs: import("vue").ComputedRef<Record<string, unknown>>;
-    useItemHeight: typeof useItemHeight;
+    dropElementHeight: import("vue").ComputedRef<number>;
     doImport(): Promise<void>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     importFiles: {
@@ -35,4 +35,3 @@ declare const _default: import("vue").DefineComponent<{
     fileTypes: unknown[];
 }, {}>;
 export default _default;
-import { useItemHeight } from '../../vuePlugins/vuetify.js';

package/src/components/lists/VcsActionList.vue

@@ -27,13 +27,16 @@
     .v-list-item-title {
       color: rgb(var(--v-theme-primary));
     }
+    .v-icon {
+      // the icon color slightly differs from the text color, darken-1 seems to fit better
+      color: rgb(var(--v-theme-primary-darken-1));
+    }
   }
   :deep(.v-list-item .v-list-item__prepend .v-list-item__spacer) {
     width: 8px;
   }
 </style>
 <script>
-  import { computed } from 'vue';
   import { is, optional } from '@vcsuite/check';
   import {
     VIcon,
@@ -42,7 +45,7 @@
     VListItemTitle,
     VTooltip,
   } from 'vuetify/components';
-  import { useFontSize } from '../../vuePlugins/vuetify.js';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * pattern to check actions
@@ -117,10 +120,7 @@
       },
     },
     setup() {
-      const fontSize = useFontSize();
-      const iconSize = computed(() => {
-        return fontSize.value * (1.2 + 0.1 / 3);
-      });
+      const iconSize = useIconSize();
       return {
         iconSize,
       };

package/src/components/lists/VcsList.vue

@@ -32,7 +32,7 @@
         </template>
       </v-list-item>
       <template v-for="(item, index) in renderingItems">
-        <VcsListItem
+        <VcsListItemComponent
           v-if="item"
           :dragging="dragging === index"
           :item="item"
@@ -66,7 +66,7 @@
           <template #default="scope">
             <slot name="item.default" v-bind="{ ...scope, index }" />
           </template>
-        </VcsListItem>
+        </VcsListItemComponent>
         <slot name="item.intermediate" :item="item" :index="index" />
         <div
           v-if="hasIntermediateSlot"
@@ -94,14 +94,14 @@
     VListItemTitle,
     VTooltip,
   } from 'vuetify/components';
+  import VcsListItemComponent from './VcsListItemComponent.vue';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
-  import VcsListItem from './VcsListItem.vue';
   import { createEllipseTooltip } from '../composables.js';
 
   /**
-   * @param {import("vue").Ref<VcsListItem[]>} items
-   * @param {import("vue").ShallowRef<VcsListItem[]>} selected
+   * @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>}
    */
@@ -138,25 +138,9 @@
     ];
   }
 
-  /**
-   * @typedef {Object} VcsListItem
-   * @property {string} name
-   * @property {boolean} [visible] - Whether to display this item or not.
-   * @property {boolean} [disabled] - Whether this item should be displayed as disabled.
-   * @property {boolean|import("../../actions/actionHelper.js").ActionOptions} [renamable] - Whether the title of can be edited. will add a rename action to the end of the action list. This action will call titleChanged with the new title, you must provide the callback yourself, otherwise this does not work as expeted.
-   * @property {string} title - The title to be displayed
-   * @property {string} [tooltip]
-   * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be a URL or HTMLElement.
-   * @property {boolean} [hasUpdate] - Shows badge, if item has an update.
-   * @property {Array<import("../../actions/actionHelper.js").VcsAction>} [actions]
-   * @property {Array<function(PointerEvent):void>|undefined} [clickedCallbacks] - An array of callbacks called on item click. called before selection update
-   * @property {function(boolean):void} [selectionChanged] - A callback called if the selection changes with the current selection status. called before value update
-   * @property {function(string):void} [titleChanged] - A callback called if the title changes via rename action. only usable with renamble true.
-   */
-
   /**
    * @typedef {Object} ItemMovedEvent
-   * @property {VcsListItem} item
+   * @property {import("./VcsListItemComponent.vue").VcsListItem} item
    * @property {number} targetIndex
    */
 
@@ -172,12 +156,12 @@
    * 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<VcsListItem>} items
+   * @vue-prop {Array<import("./VcsListItemComponent.vue").VcsListItem>} items
    * @vue-prop {boolean} [draggable=false]
    * @vue-prop {boolean} [selectable=false]
    * @vue-prop {boolean} [singleSelect=false]
-   * @vue-prop {Array<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(VcsListItem, string):boolean
+   * @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 {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
@@ -194,7 +178,7 @@
   export default {
     name: 'VcsList',
     components: {
-      VcsListItem,
+      VcsListItemComponent,
       VcsTreeviewSearchbar,
       VcsActionButtonList,
       VTooltip,
@@ -263,7 +247,7 @@
       },
     },
     setup(props, { emit, slots }) {
-      /** @type {import("vue").ShallowRef<Array<VcsListItem>>} */
+      /** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
       const selected = shallowRef([]);
       /** @type {import("vue").Ref<string>} */
       const query = ref('');
@@ -319,7 +303,7 @@
       );
 
       const vm = getCurrentInstance().proxy;
-      /** @type {function(VcsListItem, string):boolean} */
+      /** @type {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} */
       const filterPredicate = inject(
         'filterPredicate',
         (item, queryString = '') => {
@@ -331,7 +315,7 @@
       );
 
       /**
-       * @type {VcsListItem|null}
+       * @type {import("./VcsListItemComponent.vue").VcsListItem|null}
        */
       let draggedItem = null;
 
@@ -356,7 +340,7 @@
 
       /**
        * @param {MouseEvent} e
-       * @param {VcsListItem} item
+       * @param {import("./VcsListItemComponent.vue").VcsListItem} item
        * @param {number} index
        */
       function drag(e, item, index) {
@@ -369,7 +353,7 @@
       }
 
       /**
-       * @type {import("vue").ComputedRef<Array<VcsListItem>>}
+       * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
        */
       const renderingItems = computed(() => {
         let items = props.items.filter((i) => i.visible !== false);
@@ -408,13 +392,13 @@
          */
         renderingActions,
         /**
-         * @type {import("vue").ComputedRef<Array<VcsListItem>>}
+         * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
          */
         renderingItems,
-        /** @type {import("vue").ShallowRef<Array<VcsListItem>>} */
+        /** @type {import("vue").ShallowRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>} */
         selected,
         /**
-         * @param {import("vue").UnwrapNestedRef<VcsListItem>} item
+         * @param {import("vue").UnwrapNestedRef<import("./VcsListItemComponent.vue").VcsListItem>} item
          * @param {PointerEvent} event
          */
         select(item, event) {
@@ -508,7 +492,7 @@
           emit('update:modelValue', selected.value);
         },
         /**
-         * @param {import("vue").UnwrapNestedRefs<VcsListItem>} item
+         * @param {import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>} item
          */
         add(item) {
           if (!isReactive(item)) {
@@ -521,7 +505,7 @@
           }
         },
         /**
-         * @param {import("vue").UnwrapNestedRefs<VcsListItem>} item
+         * @param {import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>} item
          */
         remove(item) {
           if (selected.value.includes(item) && !item.disabled) {
@@ -597,10 +581,11 @@
     }
 
     &:not(.vcs-list__selectable) {
+      cursor: auto;
+
       .v-list-item--link {
         cursor: auto;
       }
-      cursor: auto;
 
       &:hover {
         .v-list-item__overlay {