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

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,49 @@
           />
         </template>
       </v-list-item>
-      <div v-for="(item, index) in renderingItems" :key="`item-${index}`">
-        <v-list-item
+      <template v-for="(item, index) in renderingItems">
+        <VcsListItem
+          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)"
+          @item-renamed="$emit('item-renamed', $event)"
         >
-          <template #prepend>
-            <v-icon v-if="item.icon">
-              {{ item.icon }}
-            </v-icon>
+          <template #prepend-title>
+            <slot name="item.prepend-title" :item="item" :index="index" />
+          </template>
+          <template #title>
+            <slot name="item.title" :item="item" :index="index"></slot>
           </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 #append-title>
+            <slot name="item.append-title" :item="item" :index="index" />
           </template>
-        </v-list-item>
+        </VcsListItem>
         <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,12 +88,17 @@
     shallowRef,
     watch,
   } from 'vue';
-  import { VList, VListItem, VIcon, VListItemTitle } from 'vuetify/components';
+  import {
+    VList,
+    VListItem,
+    VIcon,
+    VListItemTitle,
+    VTooltip,
+  } from 'vuetify/components';
   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 VcsListItem from './VcsListItem.vue';
+  import { createEllipseTooltip } from '../composables.js';
 
   /**
    * @param {import("vue").Ref<VcsListItem[]>} items
@@ -181,7 +144,7 @@
    * @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 {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.
@@ -239,15 +202,14 @@
   export default {
     name: 'VcsList',
     components: {
-      VcsBadge,
+      VcsListItem,
       VcsTreeviewSearchbar,
       VcsActionButtonList,
-      VcsTooltip,
+      VTooltip,
       VList,
       VListItem,
       VIcon,
       VListItemTitle,
-      VcsTextField,
     },
     props: {
       items: {
@@ -335,8 +297,7 @@
         return !(!props.searchable && !props.showTitle);
       });
       let firstSelected = null;
-      const titles = ref([]);
-      const listHeader = ref(null);
+      const listHeader = ref();
 
       watch(
         props,
@@ -383,7 +344,7 @@
       let draggedItem = null;
 
       const isDraggable = computed(() => {
-        return query.value === '' && props.draggable;
+        return !query.value && props.draggable;
       });
 
       /**
@@ -587,31 +548,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 +562,56 @@
 
 <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);
-      padding-left: 12px !important;
+      border-left-color: rgb(var(--v-theme-primary));
+      padding-left: 13px !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) {
+      .v-list-item--link {
+        cursor: auto;
+      }
+      cursor: auto;
+
+      &:hover {
+        .v-list-item__overlay {
+          background-color: transparent;
         }
       }
     }

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

@@ -97,11 +97,8 @@ declare const _default: import("vue").DefineComponent<{
     clear(): void;
     drag: (e: MouseEvent, item: 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,17 +160,17 @@ 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 = {
@@ -187,7 +184,7 @@ export type VcsListItem = {
      */
     disabled?: boolean | undefined;
     /**
-     * - Whether the title of this item is currently in edit mode.
+     * - Whether the title of can be edited. will add a rename action to the end of the action list
      */
     rename?: boolean | undefined;
     /**

package/src/components/lists/VcsListItem.vue

@@ -0,0 +1,154 @@
+<script setup>
+  import {
+    VListItem,
+    VIcon,
+    VListItemTitle,
+    VTooltip,
+  } from 'vuetify/components';
+  import { computed, ref } from 'vue';
+  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';
+
+  const props = defineProps({
+    /** @type {import("./VcsList.vue").VcsListItem} */
+    item: {
+      type: Object,
+      required: true,
+    },
+    actionButtonListOverflowCount: {
+      type: Number,
+      default: undefined,
+    },
+    dragging: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const emits = defineEmits(['item-renamed']);
+
+  function renameOff() {
+    // eslint-disable-next-line vue/no-mutating-props
+    props.item.rename = false;
+  }
+
+  const title = ref();
+  const tooltip = createEllipseTooltip(
+    computed(() => {
+      if (props.item?.rename) {
+        return undefined;
+      }
+      return title.value?.$el;
+    }),
+    computed(() => props.item?.tooltip),
+    computed(() => props.item?.title),
+  );
+
+  function rename(item, newTitle) {
+    if (newTitle) {
+      emits('item-renamed', { item, newTitle });
+      item.titleChanged?.(newTitle);
+    }
+  }
+</script>
+
+<template>
+  <v-list-item :disabled="item.disabled" v-bind="$attrs">
+    <template #prepend>
+      <v-icon v-if="item.icon">
+        {{ item.icon }}
+      </v-icon>
+    </template>
+    <template #default>
+      <v-list-item-title ref="title">
+        <slot name="prepend-title" :item="item" />
+        <slot name="title" :item="item">
+          <vcs-text-field
+            v-if="item.rename"
+            :model-value="item.title"
+            autofocus
+            @update:model-value="(value) => rename(item, value)"
+            @click.stop
+            @keydown.enter="renameOff"
+            @blur="renameOff"
+            :rules="[(v) => !!v || 'components.validation.required']"
+            class="pa-0"
+          />
+          <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>
+    </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"
+        :disabled="item.disabled"
+        :block-overflow="true"
+        :overflow-count="actionButtonListOverflowCount"
+        class="ml-2"
+      />
+    </template>
+  </v-list-item>
+</template>
+
+<style lang="scss" scoped>
+  .v-list-item {
+    padding: 4px 8px 4px 16px;
+    &.border-bottom {
+      border-bottom: solid;
+      border-bottom-color: rgb(var(--v-theme-base-lighten-2));
+    }
+    &.border-top {
+      border-top: solid;
+      border-top-color: rgb(var(--v-theme-base-lighten-2));
+    }
+    &:after {
+      display: none;
+    }
+    &.font-weight-bold {
+      .v-list-item__title {
+        font-weight: 700;
+      }
+    }
+    :deep(.v-list-item__action) {
+      .v-icon {
+        font-size: 16px;
+      }
+      &:last-child {
+        min-width: auto;
+      }
+    }
+    :deep(.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;
+        }
+      }
+    }
+    :deep(.v-list-item__prepend > .v-badge ~ .v-list-item__spacer),
+    :deep(.v-list-item__prepend > .v-icon ~ .v-list-item__spacer),
+    :deep(.v-list-item__prepend > .v-tooltip ~ .v-list-item__spacer) {
+      width: 8px;
+    }
+    :deep(.v-list-item__overlay) {
+      background-color: transparent;
+    }
+  }
+</style>

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

@@ -0,0 +1,21 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
+    $emit: (event: "item-renamed", ...args: any[]) => void;
+    $props: {
+        readonly [x: string]: any;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    "prepend-title"?(_: {
+        item: any;
+    }): any;
+    title?(_: {
+        item: any;
+    }): any;
+    "append-title"?(_: {
+        item: any;
+        class: string;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -65,8 +65,8 @@
     </div>
     <v-tooltip
       activator="parent"
-      :text="tooltip"
       v-if="tooltip"
+      :text="$st(tooltip)"
       location="bottom"
     />
     <template #append>

package/src/components/modelHelper.d.ts

@@ -23,3 +23,14 @@ export function useProxiedAtomicModel<T>(props: Object, prop: string, emit: (eve
  * @template T
  */
 export function useProxiedComplexModel<T>(props: Object, prop: string, emit: (event: string, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;
+/**
+ * Helper function that returns a modelValue for VcsCheckbox depending on the availability of a specific property within a model object
+ * Getter returns true, if property is available, otherwise false.
+ * Setter applies provided defaultValue on the model object, if checked (true) and undefined, if unchecked (false)
+ * @param {import("vue").Ref<Object>} localValue The model object, e.g. provided by `useProxiedComplexModel` or a local ref object.
+ * @param {string} key The key of the localValue that should be return on get and updated on set.
+ * @param {D} defaultValue  The default value that is set on checked (true)
+ * @returns {import('vue').WritableComputedRef<boolean>}
+ * @template D
+ */
+export function useModelHasProperty<D>(localValue: import("vue").Ref<Object>, key: string, defaultValue: D): import('vue').WritableComputedRef<boolean>;

package/src/components/modelHelper.js

@@ -1,5 +1,6 @@
 import { computed, ref, toRaw, watch } from 'vue';
 import deepEqual from 'fast-deep-equal';
+import { getLogger } from '@vcsuite/logger';
 
 /**
  * Can only be used in setup of Vue components!
@@ -59,7 +60,14 @@ export function useProxiedComplexModel(props, prop, emit) {
       if (deepEqual(internal.value, newValue)) {
         return;
       }
-      internal.value = structuredClone(newValue);
+      try {
+        internal.value = structuredClone(newValue);
+      } catch (e) {
+        getLogger('modelHelper').error(
+          'Failed to update internal value. You may have a provided a deeply nested ref, which caused',
+          e,
+        );
+      }
     },
     {
       deep: true,
@@ -77,7 +85,14 @@ export function useProxiedComplexModel(props, prop, emit) {
       if (deepEqual(value, newValue)) {
         return;
       }
-      emit(`update:${prop}`, structuredClone(newValue));
+      try {
+        emit(`update:${prop}`, structuredClone(newValue));
+      } catch (e) {
+        getLogger('modelHelper').error(
+          'Failed to emit value. You may have a provided a deeply nested ref, which caused',
+          e,
+        );
+      }
     },
     {
       deep: true,
@@ -86,3 +101,28 @@ export function useProxiedComplexModel(props, prop, emit) {
 
   return internal;
 }
+
+/**
+ * Helper function that returns a modelValue for VcsCheckbox depending on the availability of a specific property within a model object
+ * Getter returns true, if property is available, otherwise false.
+ * Setter applies provided defaultValue on the model object, if checked (true) and undefined, if unchecked (false)
+ * @param {import("vue").Ref<Object>} localValue The model object, e.g. provided by `useProxiedComplexModel` or a local ref object.
+ * @param {string} key The key of the localValue that should be return on get and updated on set.
+ * @param {D} defaultValue  The default value that is set on checked (true)
+ * @returns {import('vue').WritableComputedRef<boolean>}
+ * @template D
+ */
+export function useModelHasProperty(localValue, key, defaultValue) {
+  const model = () => localValue.value;
+  return computed({
+    get() {
+      return model()[key] !== undefined;
+    },
+    set(value) {
+      const v = value ? defaultValue : undefined;
+      if (localValue.value[key] !== v) {
+        localValue.value[key] = v;
+      }
+    },
+  });
+}