@vcmap/ui 6.0.0-rc.2 → 6.0.0-rc.5

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"
@@ -56,18 +56,17 @@
             'cursor-pointer': selectable && !isDraggable,
           }"
           @click="select(item, $event)"
-          @item-renamed="$emit('item-renamed', $event)"
         >
-          <template #prepend-title>
-            <slot name="item.prepend-title" :item="item" :index="index" />
+          <template #title="titleScope">
+            <slot name="item.title" v-bind="{ ...titleScope, index }"></slot>
           </template>
-          <template #title>
-            <slot name="item.title" :item="item" :index="index"></slot>
+          <template #subtitle="subtitleScope">
+            <slot name="item.subtitle" v-bind="{ ...subtitleScope, index }" />
           </template>
-          <template #append-title>
-            <slot name="item.append-title" :item="item" :index="index" />
+          <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"
@@ -95,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>}
    */
@@ -139,34 +138,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 can be edited. will add a rename action to the end of the action list
-   * @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
@@ -179,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
@@ -193,7 +170,6 @@
    * @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.
@@ -202,7 +178,7 @@
   export default {
     name: 'VcsList',
     components: {
-      VcsListItem,
+      VcsListItemComponent,
       VcsTreeviewSearchbar,
       VcsActionButtonList,
       VTooltip,
@@ -271,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('');
@@ -327,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 = '') => {
@@ -339,7 +315,7 @@
       );
 
       /**
-       * @type {VcsListItem|null}
+       * @type {import("./VcsListItemComponent.vue").VcsListItem|null}
        */
       let draggedItem = null;
 
@@ -364,7 +340,7 @@
 
       /**
        * @param {MouseEvent} e
-       * @param {VcsListItem} item
+       * @param {import("./VcsListItemComponent.vue").VcsListItem} item
        * @param {number} index
        */
       function drag(e, item, index) {
@@ -377,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);
@@ -416,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) {
@@ -516,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)) {
@@ -529,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) {
@@ -577,7 +553,8 @@
     .v-list-item__selected {
       border-left: solid 4px;
       border-left-color: rgb(var(--v-theme-primary));
-      padding-left: 13px !important;
+      color: rgb(var(--v-theme-primary));
+      padding-left: 12px !important;
     }
     .v-list-item--active {
       .v-list-item__append {
@@ -604,10 +581,11 @@
     }
 
     &:not(.vcs-list__selectable) {
+      cursor: auto;
+
       .v-list-item--link {
         cursor: auto;
       }
-      cursor: auto;
 
       &:hover {
         .v-list-item__overlay {

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,26 +76,26 @@ 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;
     listHeader: import("vue").Ref<any>;
     listHeaderTooltip: import("vue").ComputedRef<string>;
@@ -173,52 +173,7 @@ declare const _default: import("vue").DefineComponent<{
     showTitle: boolean;
 }, {}>;
 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 can be edited. will add a rename action to the end of the action list
-     */
-    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;
-};

package/src/components/lists/{VcsListItem.vue → VcsListItemComponent.vue}

@@ -6,13 +6,30 @@
     VTooltip,
   } from 'vuetify/components';
   import { computed, ref } from 'vue';
+  import { is } from '@vcsuite/check';
   import VcsBadge from '../notification/VcsBadge.vue';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import { createEllipseTooltip } from '../composables.js';
 
+  /**
+   * @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.
+   */
+
   const props = defineProps({
-    /** @type {import("./VcsList.vue").VcsListItem} */
+    /** @type {VcsListItem} */
     item: {
       type: Object,
       required: true,
@@ -27,17 +44,35 @@
     },
   });
 
-  const emits = defineEmits(['item-renamed']);
+  const rename = ref(false);
+  const renameAction = computed(() => {
+    if (props.item.renamable) {
+      return {
+        name: 'list.renameItem',
+        ...(is(props.item.renamable, Object) ? props.item.renamable : {}),
+        callback() {
+          rename.value = true;
+        },
+      };
+    }
+    return undefined;
+  });
 
   function renameOff() {
-    // eslint-disable-next-line vue/no-mutating-props
-    props.item.rename = false;
+    rename.value = false;
   }
 
+  const actions = computed(() => {
+    if (renameAction.value) {
+      return [...(props.item?.actions || []), renameAction.value];
+    }
+    return [...(props.item?.actions || [])];
+  });
+
   const title = ref();
   const tooltip = createEllipseTooltip(
     computed(() => {
-      if (props.item?.rename) {
+      if (rename.value) {
         return undefined;
       }
       return title.value?.$el;
@@ -46,9 +81,8 @@
     computed(() => props.item?.title),
   );
 
-  function rename(item, newTitle) {
+  function renameItem(item, newTitle) {
     if (newTitle) {
-      emits('item-renamed', { item, newTitle });
       item.titleChanged?.(newTitle);
     }
   }
@@ -61,15 +95,17 @@
         {{ item.icon }}
       </v-icon>
     </template>
-    <template #default>
-      <v-list-item-title ref="title">
-        <slot name="prepend-title" :item="item" />
-        <slot name="title" :item="item">
+    <template #title>
+      <slot name="title" v-bind="{ item, dragging, tooltip }">
+        <v-list-item-title
+          ref="title"
+          :class="{ 'vcs-list-item__rename': rename }"
+        >
           <vcs-text-field
-            v-if="item.rename"
+            v-if="rename"
             :model-value="item.title"
             autofocus
-            @update:model-value="(value) => rename(item, value)"
+            @update:model-value="(value) => renameItem(item, value)"
             @click.stop
             @keydown.enter="renameOff"
             @blur="renameOff"
@@ -79,18 +115,23 @@
           <template v-else>
             {{ $st(item.title) }}
           </template>
-        </slot>
-        <slot name="append-title" :item="item" class="ml-auto" />
-        <v-tooltip v-if="dragging === false && tooltip" activator="parent">
-          {{ $st(tooltip) }}
-        </v-tooltip>
-      </v-list-item-title>
+          <v-tooltip v-if="dragging === false && tooltip" activator="parent">
+            {{ $st(tooltip) }}
+          </v-tooltip>
+        </v-list-item-title>
+      </slot>
+    </template>
+    <template #subtitle>
+      <slot name="subtitle" v-bind="{ item }" />
+    </template>
+    <template #default="scope">
+      <slot name="default" v-bind="{ ...scope, item, dragging, tooltip }" />
     </template>
     <template #append>
       <vcs-badge v-if="item.hasUpdate" class="mr-1" />
       <vcs-action-button-list
-        v-if="item.actions?.length > 0"
-        :actions="item.actions"
+        v-if="actions.length > 0"
+        :actions="actions"
         :disabled="item.disabled"
         :block-overflow="true"
         :overflow-count="actionButtonListOverflowCount"
@@ -102,7 +143,9 @@
 
 <style lang="scss" scoped>
   .v-list-item {
-    padding: 4px 8px 4px 16px;
+    padding: 4px 8px 4px 8px;
+    padding-inline-end: 8px !important;
+    padding-inline-start: 16px !important;
     &.border-bottom {
       border-bottom: solid;
       border-bottom-color: rgb(var(--v-theme-base-lighten-2));
@@ -150,5 +193,8 @@
     :deep(.v-list-item__overlay) {
       background-color: transparent;
     }
+    :deep(.vcs-list-item__rename) {
+      color: rgb(var(--v-theme-on-surface));
+    }
   }
 </style>

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

@@ -0,0 +1,69 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
+    $props: {
+        readonly [x: string]: any;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    title?(_: {
+        item: any;
+        dragging: any;
+        tooltip: string;
+    }): any;
+    subtitle?(_: {
+        item: any;
+    }): any;
+    default?(_: {
+        item: any;
+        dragging: any;
+        tooltip: string;
+        isActive: boolean;
+        isOpen: boolean;
+        isSelected: boolean;
+        isIndeterminate: boolean;
+        select: (value: boolean) => void;
+    }): any;
+}>;
+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 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.
+     */
+    renamable?: boolean | import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).ActionOptions | 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. only usable with renamble true.
+     */
+    titleChanged?: ((arg0: string) => void) | undefined;
+};
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});

package/src/components/lists/VcsTreeview.vue

@@ -3,17 +3,20 @@
     <VcsTreeviewSearchbar
       v-if="showSearchbar"
       :placeholder="searchbarPlaceholder"
-      v-model="search"
+      v-model="localSearchValue"
     />
     <v-treeview
       class="vcs-treeview"
-      v-bind="{ ...$props, ...$attrs }"
+      density="compact"
       item-value="name"
       :item-props="true"
-      :search="search"
       :custom-filter="handleFilter"
       :selectable="false"
       :activatable="false"
+      expand-icon="mdi-chevron-right"
+      collapse-icon="mdi-chevron-down"
+      v-bind="{ ...$props, ...$attrs }"
+      :search="localSearchValue"
     >
       <template #item="{ props: item }">
         <VcsTreeviewLeaf
@@ -33,6 +36,7 @@
     > .v-list-item,
     > .v-list-group > .v-list-item {
       min-height: calc(var(--v-vcs-item-height) + 8px) !important;
+      padding-left: 6px;
     }
     // Border around root nodes with children included
     > .v-list-item:not(:last-child),
@@ -46,17 +50,32 @@
       > .v-list-item-title {
       font-weight: 700 !important;
     }
-    // remove ripple effect from expand icon
-    .v-icon.v-icon {
-      &::after {
-        background-color: transparent;
-      }
-    }
-    // Toggle Item Chevron with should be 16px
-    .v-treeview-node__toggle {
-      width: 16px;
+  }
+
+  // leaf indent
+  :deep(.v-list--slim .v-treeview-group.v-list-group) {
+    --prepend-width: 0px;
+  }
+
+  // Padding left of root nodes
+  :deep(.v-list-item__prepend) {
+    width: var(--v-vcs-font-size);
+    margin-right: 8px;
+    > .v-list-item-action > .v-btn {
+      width: var(--v-vcs-font-size);
+      height: var(--v-vcs-font-size);
+      margin: auto;
     }
   }
+
+  // remove hover shadow over button
+  :deep(.v-btn__overlay) {
+    --v-hover-opacity: 0;
+  }
+  // remove ripple effect
+  :deep(.v-ripple__container) {
+    display: none;
+  }
   // hide active class
   :deep(.v-list-item__overlay) {
     display: none;
@@ -68,8 +87,9 @@
 </style>
 
 <script>
-  import { getCurrentInstance, ref } from 'vue';
+  import { getCurrentInstance } from 'vue';
   import { VTreeview } from 'vuetify/labs/VTreeview';
+  import { useProxiedAtomicModel } from '../modelHelper.js';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
   import VcsTreeviewLeaf from './VcsTreeviewLeaf.vue';
 
@@ -77,6 +97,7 @@
    * @description extends API of https://vuetifyjs.com/en/api/v-treeview/
    * Can render dynamic components as leaf items.
    * In order to display an item needs to be registered and added to `availableComponents`.
+   * Exposes the `search` value for filtering the treeview.
    * @vue-prop {boolean} [showSearchbar=false] - Whether there is a searchbar for this treeview
    * @vue-prop {string}  [searchbarPlaceholder] - Placeholder text for the searchbar, will be translated
    */
@@ -88,6 +109,10 @@
       VTreeview,
     },
     props: {
+      search: {
+        type: String,
+        default: '',
+      },
       showSearchbar: {
         type: Boolean,
         default: false,
@@ -97,8 +122,10 @@
         default: undefined,
       },
     },
-    setup() {
-      const search = ref('');
+    emits: ['update:search'],
+    setup(props, { emit }) {
+      const localSearchValue = useProxiedAtomicModel(props, 'search', emit);
+
       // TODO properly type the tree view item interface & export in index.d.ts
 
       const vm = getCurrentInstance().proxy;
@@ -119,7 +146,7 @@
       };
 
       return {
-        search,
+        localSearchValue,
         handleFilter,
       };
     },