@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.10

package/src/components/lists/VcsList.vue

@@ -1,26 +1,25 @@
 <template>
-  <div class="d-contents">
+  <div class="d-contents vcs-list">
     <vcs-treeview-searchbar
       v-if="searchable"
       :placeholder="searchbarPlaceholder"
       v-model="query"
     />
-    <v-list density="compact">
-      <v-list-item v-if="showTitle" class="font-weight-bold">
+    <v-list :class="{ 'vcs-list__selectable': selectable }">
+      <v-list-item v-if="showTitle && title">
         <template #prepend>
           <v-icon v-if="icon">
             {{ icon }}
           </v-icon>
         </template>
-        <v-list-item-title>
-          <VcsTooltip :tooltip="$st(listHeaderTooltip)">
-            <template #activator="{ props }">
-              <span v-bind="props" ref="listHeader">
-                {{ $st(title) }}
-              </span>
-            </template>
-          </VcsTooltip>
-          <span v-if="selectable && selected.length > 0">
+        <v-list-item-title class="font-weight-bold" ref="listHeader">
+          <span :class="{ 'vcs-list-title__selected': selected.length > 0 }">
+            {{ $st(title) }}
+          </span>
+          <v-tooltip v-if="listHeaderTooltip" activator="parent">
+            {{ $st(listHeaderTooltip) }}
+          </v-tooltip>
+          <span v-if="selectable && selected.length > 0" class="ml-1">
             {{ `(${selected.length})` }}
           </span>
         </v-list-item-title>
@@ -32,90 +31,51 @@
           />
         </template>
       </v-list-item>
-      <div v-for="(item, index) in renderingItems" :key="`item-${index}`">
-        <v-list-item
+      <template v-for="(item, index) in renderingItems">
+        <VcsListItemComponent
+          v-if="item"
+          :dragging="dragging === index"
+          :item="item"
+          :key="`item-${index}`"
           :active="selected.includes(item)"
-          :disabled="item.disabled"
           @mousedown.shift="$event.preventDefault()"
           @mouseover="hovering = index"
           @mouseout="hovering = undefined"
           :draggable="isDraggable"
           @dragstart="drag($event, item, index)"
           @mouseup="drop($event, index)"
-          color="primary"
           :class="{
             'v-list-item__selected': selected.includes(item),
             'v-list-item__lighten_even': lightenEven,
             'v-list-item__lighten_odd': !lightenEven,
             'vcs-draggable-item': isDraggable,
             'v-list-item__dragged': dragging === index,
+            'v-list-item__dragged_over': dragging !== undefined,
             'border-bottom': borderBottom(index),
             'border-top': borderTop(index),
             'cursor-pointer': selectable && !isDraggable,
           }"
           @click="select(item, $event)"
         >
-          <template #prepend>
-            <v-icon v-if="item.icon">
-              {{ item.icon }}
-            </v-icon>
+          <template #append="scope">
+            <slot name="item.append" v-bind="{ ...scope, index, item }" />
+          </template>
+          <template #title="scope">
+            <slot name="item.title" v-bind="{ ...scope, index, item }" />
+          </template>
+          <template #subtitle="scope">
+            <slot name="item.subtitle" v-bind="{ ...scope, index, item }" />
           </template>
-          <VcsTooltip
-            :tooltip="
-              dragging !== undefined
-                ? undefined
-                : $st(item.tooltip || overflowTitle(index, item.title))
-            "
-          >
-            <template #activator="{ props }">
-              <v-list-item-title
-                v-bind="props"
-                ref="titles"
-                class="d-flex gc-2"
-              >
-                <slot name="item.prepend-title" :item="item" :index="index" />
-                <slot name="item.title" :item="item" :index="index">
-                  <VcsTextField
-                    v-if="item.rename"
-                    :model-value="item.title"
-                    autofocus
-                    :no-padding="true"
-                    @update:model-value="(value) => rename(item, value)"
-                    @click.stop
-                    @keydown.enter="item.rename = false"
-                    @blur="item.rename = false"
-                    :rules="[(v) => !!v || 'components.validation.required']"
-                  />
-                  <span v-else>
-                    {{ $st(item.title) }}
-                  </span>
-                </slot>
-                <slot
-                  name="item.append-title"
-                  :item="item"
-                  :index="index"
-                  class="ml-auto"
-                />
-              </v-list-item-title>
-            </template>
-          </VcsTooltip>
-          <template #append>
-            <VcsBadge v-if="item.hasUpdate" :color="'warning'" />
-            <vcs-action-button-list
-              v-if="item.actions?.length > 0"
-              :actions="item.actions"
-              :disabled="item.disabled"
-              :block-overflow="true"
-              :overflow-count="actionButtonListOverflowCount"
-            />
+          <template #prepend="scope">
+            <slot name="item.prepend" v-bind="{ ...scope, index, item }" />
           </template>
-        </v-list-item>
+        </VcsListItemComponent>
         <slot name="item.intermediate" :item="item" :index="index" />
         <div
           v-if="hasIntermediateSlot"
           :key="`item-intermediate-child-balance-${index}`"
         />
-      </div>
+      </template>
     </v-list>
   </div>
 </template>
@@ -130,16 +90,21 @@
     shallowRef,
     watch,
   } from 'vue';
-  import { VList, VListItem, VIcon, VListItemTitle } from 'vuetify/components';
+  import {
+    VList,
+    VListItem,
+    VIcon,
+    VListItemTitle,
+    VTooltip,
+  } from 'vuetify/components';
+  import VcsListItemComponent from './VcsListItemComponent.vue';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
-  import VcsBadge from '../notification/VcsBadge.vue';
-  import VcsTextField from '../form-inputs-controls/VcsTextField.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>}
    */
@@ -176,34 +141,12 @@
     ];
   }
 
-  /**
-   * @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} [rename] - Whether the title of this item is currently in edit mode.
-   * @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. called before value update
-   */
-
   /**
    * @typedef {Object} ItemMovedEvent
-   * @property {VcsListItem} item
+   * @property {import("./VcsListItemComponent.vue").VcsListItem} item
    * @property {number} targetIndex
    */
 
-  /**
-   * @typedef {Object} ItemRenamedEvent
-   * @property {VcsListItem} item
-   * @property {string} newTitle
-   */
-
   /**
    * @description
    * The VCS list is intended to render items. Items can be selectable (by default, more than one) or only a single item can
@@ -216,12 +159,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
@@ -230,24 +173,23 @@
    * @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 {ItemRenamedEvent} item-renamed - event triggered after item was renamed
-   * @vue-data {slot} [#item.prepend-title] - A slot to adapt the list item titel, adding content before the title. Binds item and index.
-   * @vue-data {slot} [#item.title] - A slot to adapt the list item titel. Default content is a span or VcsTextField for active rename action. Binds item and index.
-   * @vue-data {slot} [#item.append-title] - A slot to adapt the list item titel, adding content after the title. Binds item and index.
-   * @vue-data {slot} [#item.intermediate] - A slot to introduce content, e.g. buttons between two list items. Binds item and index.
+   * @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: {
-      VcsBadge,
+      VcsListItemComponent,
       VcsTreeviewSearchbar,
       VcsActionButtonList,
-      VcsTooltip,
+      VTooltip,
       VList,
       VListItem,
       VIcon,
       VListItemTitle,
-      VcsTextField,
     },
     props: {
       items: {
@@ -309,7 +251,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('');
@@ -335,8 +277,7 @@
         return !(!props.searchable && !props.showTitle);
       });
       let firstSelected = null;
-      const titles = ref([]);
-      const listHeader = ref(null);
+      const listHeader = ref();
 
       watch(
         props,
@@ -366,7 +307,7 @@
       );
 
       const vm = getCurrentInstance().proxy;
-      /** @type {function(VcsListItem, string):boolean} */
+      /** @type {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} */
       const filterPredicate = inject(
         'filterPredicate',
         (item, queryString = '') => {
@@ -378,12 +319,12 @@
       );
 
       /**
-       * @type {VcsListItem|null}
+       * @type {import("./VcsListItemComponent.vue").VcsListItem|null}
        */
       let draggedItem = null;
 
       const isDraggable = computed(() => {
-        return query.value === '' && props.draggable;
+        return !query.value && props.draggable;
       });
 
       /**
@@ -403,7 +344,7 @@
 
       /**
        * @param {MouseEvent} e
-       * @param {VcsListItem} item
+       * @param {import("./VcsListItemComponent.vue").VcsListItem} item
        * @param {number} index
        */
       function drag(e, item, index) {
@@ -416,7 +357,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);
@@ -455,13 +396,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) {
@@ -555,7 +496,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)) {
@@ -568,7 +509,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) {
@@ -587,31 +528,12 @@
         },
         drag,
         drop,
-        titles,
-        overflowTitle(index, alternative) {
-          const elem = titles.value[index];
-          if (elem && elem.offsetWidth < elem.scrollWidth) {
-            return alternative;
-          }
-          return '';
-        },
         listHeader,
-        listHeaderTooltip: computed(() => {
-          if (props.tooltip) {
-            return props.tooltip;
-          }
-          const elem = listHeader.value;
-          if (elem && elem.offsetWidth < elem.scrollWidth) {
-            return props.title;
-          }
-          return '';
-        }),
-        rename(item, newTitle) {
-          if (newTitle) {
-            emit('item-renamed', { item, newTitle });
-            item.titleChanged?.(newTitle);
-          }
-        },
+        listHeaderTooltip: createEllipseTooltip(
+          computed(() => listHeader.value?.$el),
+          computed(() => props.tooltip),
+          computed(() => props.title),
+        ),
         hasIntermediateSlot: computed(() => !!slots['item.intermediate']),
       };
     },
@@ -620,67 +542,58 @@
 
 <style lang="scss" scoped>
   :deep(.v-list) {
-    .v-list-item__lighten_even {
-      &:nth-child(even) {
-        background-color: var(--v-base-lighten4);
-      }
+    .v-list-item__lighten_even:nth-child(even) {
+      background-color: rgb(var(--v-theme-base-lighten-4));
     }
-    .v-list-item__lighten_odd {
-      &:nth-child(odd) {
-        background-color: var(--v-base-lighten4);
-      }
+    .v-list-item__lighten_odd:nth-child(odd) {
+      background-color: rgb(var(--v-theme-base-lighten-4));
     }
     .v-list-item__dragged {
-      background-color: var(--v-base-lighten2) !important;
+      background-color: rgb(var(--v-theme-base-lighten-2)) !important;
+    }
+    .v-list-item__dragged_over:hover {
+      background-color: rgb(var(--v-theme-base-lighten-1)) !important;
     }
     .v-list-item__selected {
       border-left: solid 4px;
-      border-left-color: var(--v-primary-base);
+      border-left-color: rgb(var(--v-theme-primary));
+      color: rgb(var(--v-theme-primary));
       padding-left: 12px !important;
     }
+    .v-list-item--active {
+      .v-list-item__append {
+        color: rgb(var(--v-theme-on-surface));
+      }
+    }
     .v-list-item {
-      padding: 4px 8px 4px 16px;
       &.vcs-draggable-item:hover {
         cursor: grab;
         user-select: none;
       }
-      &.border-bottom {
-        border-bottom: solid;
-        border-bottom-color: var(--v-base-lighten2);
-      }
-      &.border-top {
-        border-top: solid;
-        border-top-color: var(--v-base-lighten2);
-      }
-      &:after {
-        display: none;
-      }
-      &.font-weight-bold {
-        .v-list-item__title {
-          font-weight: 700;
+      &:hover {
+        .v-list-item__overlay {
+          background-color: rgb(var(--v-theme-base));
         }
       }
-      .v-list-item__action {
-        .v-icon {
-          font-size: 16px;
-        }
-        &:last-child {
-          min-width: auto;
-        }
+      .vcs-list-title__selected {
+        width: 90%;
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: bottom;
       }
-      .v-list-item__content {
-        flex-wrap: nowrap;
-        column-gap: 4px;
-        .v-icon,
-        .action-btn-wrap {
-          flex: 1 1 auto;
-        }
-        .v-icon {
-          font-size: 16px;
-          .v-icon__component {
-            width: 16px;
-            height: 16px;
-          }
+    }
+
+    &:not(.vcs-list__selectable) {
+      cursor: auto;
+
+      .v-list-item--link {
+        cursor: auto;
+      }
+
+      &:hover {
+        .v-list-item__overlay {
+          background-color: transparent;
         }
       }
     }

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

@@ -1,10 +1,10 @@
 /**
- * @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>}
  */
-export function createSelectionActions(items: import("vue").Ref<VcsListItem[]>, selected: import("vue").ShallowRef<VcsListItem[]>, emit: (arg0: string, ...args: any[][]) => void): 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;
@@ -76,32 +76,29 @@ declare const _default: import("vue").DefineComponent<{
      */
     renderingActions: import("vue").ComputedRef<Array<import("../../actions/actionHelper.js").VcsAction>>;
     /**
-     * @type {import("vue").ComputedRef<Array<VcsListItem>>}
+     * @type {import("vue").ComputedRef<Array<import("./VcsListItemComponent.vue").VcsListItem>>}
      */
-    renderingItems: import("vue").ComputedRef<Array<VcsListItem>>;
-    /** @type {import("vue").ShallowRef<Array<VcsListItem>>} */
-    selected: import("vue").ShallowRef<Array<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<VcsListItem>} item
+     * @param {import("vue").UnwrapNestedRef<import("./VcsListItemComponent.vue").VcsListItem>} item
      * @param {PointerEvent} event
      */
     select(item: any, event: PointerEvent): void;
     /**
-     * @param {import("vue").UnwrapNestedRefs<VcsListItem>} item
+     * @param {import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>} item
      */
-    add(item: import("vue").UnwrapNestedRefs<VcsListItem>): void;
+    add(item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>): void;
     /**
-     * @param {import("vue").UnwrapNestedRefs<VcsListItem>} item
+     * @param {import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>} item
      */
-    remove(item: import("vue").UnwrapNestedRefs<VcsListItem>): void;
+    remove(item: import("vue").UnwrapNestedRefs<import("./VcsListItemComponent.vue").VcsListItem>): void;
     clear(): void;
-    drag: (e: MouseEvent, item: VcsListItem, index: number) => void;
+    drag: (e: MouseEvent, item: import("./VcsListItemComponent.vue").VcsListItem, index: number) => void;
     drop: (e: MouseEvent, targetIndex: number) => void;
-    titles: import("vue").Ref<never[]>;
-    overflowTitle(index: any, alternative: any): any;
-    listHeader: import("vue").Ref<null>;
+    listHeader: import("vue").Ref<any>;
     listHeaderTooltip: import("vue").ComputedRef<string>;
-    rename(item: any, newTitle: any): void;
     hasIntermediateSlot: import("vue").ComputedRef<boolean>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
@@ -163,65 +160,20 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     title: string;
-    modelValue: unknown[];
-    tooltip: string;
     icon: string;
+    modelValue: unknown[];
     draggable: boolean;
+    tooltip: string;
     selectable: boolean;
     actions: unknown[];
     searchbarPlaceholder: string;
+    actionButtonListOverflowCount: number;
     singleSelect: boolean;
     searchable: boolean;
     showTitle: boolean;
-    actionButtonListOverflowCount: number;
 }, {}>;
 export default _default;
-export type VcsListItem = {
-    name: string;
-    /**
-     * - Whether to display this item or not.
-     */
-    visible?: boolean | undefined;
-    /**
-     * - Whether this item should be displayed as disabled.
-     */
-    disabled?: boolean | undefined;
-    /**
-     * - Whether the title of this item is currently in edit mode.
-     */
-    rename?: boolean | undefined;
-    /**
-     * - The title to be displayed
-     */
-    title: string;
-    tooltip?: string | undefined;
-    /**
-     * - An optional icon to display with this item. Can be a URL or HTMLElement.
-     */
-    icon?: string | HTMLCanvasElement | HTMLImageElement | undefined;
-    /**
-     * - Shows badge, if item has an update.
-     */
-    hasUpdate?: boolean | undefined;
-    actions?: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[] | undefined;
-    /**
-     * - An array of callbacks called on item click. called before selection update
-     */
-    clickedCallbacks?: Array<(arg0: PointerEvent) => void> | undefined;
-    /**
-     * - A callback called if the selection changes with the current selection status. called before value update
-     */
-    selectionChanged?: ((arg0: boolean) => void) | undefined;
-    /**
-     * - A callback called if the title changes via rename action. called before value update
-     */
-    titleChanged?: ((arg0: string) => void) | undefined;
-};
 export type ItemMovedEvent = {
-    item: VcsListItem;
+    item: import("./VcsListItemComponent.vue").VcsListItem;
     targetIndex: number;
 };
-export type ItemRenamedEvent = {
-    item: VcsListItem;
-    newTitle: string;
-};