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

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,48 @@
           />
         </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)"
         >
-          <template #prepend>
-            <v-icon v-if="item.icon">
-              {{ item.icon }}
-            </v-icon>
+          <template #title="titleScope">
+            <slot name="item.title" v-bind="{ ...titleScope, index }"></slot>
+          </template>
+          <template #subtitle="subtitleScope">
+            <slot name="item.subtitle" v-bind="{ ...subtitleScope, index }" />
           </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 #default="scope">
+            <slot name="item.default" v-bind="{ ...scope, 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 +87,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 +143,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|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.
@@ -189,7 +151,7 @@
    * @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
+   * @property {function(string):void} [titleChanged] - A callback called if the title changes via rename action. only usable with renamble true.
    */
 
   /**
@@ -198,12 +160,6 @@
    * @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
@@ -230,7 +186,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.
@@ -239,15 +194,14 @@
   export default {
     name: 'VcsList',
     components: {
-      VcsBadge,
+      VcsListItem,
       VcsTreeviewSearchbar,
       VcsActionButtonList,
-      VcsTooltip,
+      VTooltip,
       VList,
       VListItem,
       VIcon,
       VListItemTitle,
-      VcsTextField,
     },
     props: {
       items: {
@@ -335,8 +289,7 @@
         return !(!props.searchable && !props.showTitle);
       });
       let firstSelected = null;
-      const titles = ref([]);
-      const listHeader = ref(null);
+      const listHeader = ref();
 
       watch(
         props,
@@ -383,7 +336,7 @@
       let draggedItem = null;
 
       const isDraggable = computed(() => {
-        return query.value === '' && props.draggable;
+        return !query.value && props.draggable;
       });
 
       /**
@@ -587,31 +540,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 +554,57 @@
 
 <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) {
+      .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,9 +184,9 @@ 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. This action will call titleChanged with the new title, you must provide the callback yourself, otherwise this does not work as expeted.
      */
-    rename?: boolean | undefined;
+    renamable?: boolean | import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).ActionOptions | undefined;
     /**
      * - The title to be displayed
      */
@@ -213,7 +210,7 @@ export type VcsListItem = {
      */
     selectionChanged?: ((arg0: boolean) => void) | undefined;
     /**
-     * - A callback called if the title changes via rename action. called before value update
+     * - A callback called if the title changes via rename action. only usable with renamble true.
      */
     titleChanged?: ((arg0: string) => void) | undefined;
 };
@@ -221,7 +218,3 @@ export type ItemMovedEvent = {
     item: VcsListItem;
     targetIndex: number;
 };
-export type ItemRenamedEvent = {
-    item: VcsListItem;
-    newTitle: string;
-};

package/src/components/lists/VcsListItem.vue

@@ -0,0 +1,184 @@
+<script setup>
+  import {
+    VListItem,
+    VIcon,
+    VListItemTitle,
+    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';
+
+  const props = defineProps({
+    /** @type {import("./VcsList.vue").VcsListItem} */
+    item: {
+      type: Object,
+      required: true,
+    },
+    actionButtonListOverflowCount: {
+      type: Number,
+      default: undefined,
+    },
+    dragging: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  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() {
+    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 (rename.value) {
+        return undefined;
+      }
+      return title.value?.$el;
+    }),
+    computed(() => props.item?.tooltip),
+    computed(() => props.item?.title),
+  );
+
+  function renameItem(item, newTitle) {
+    if (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 #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="rename"
+            :model-value="item.title"
+            autofocus
+            @update:model-value="(value) => renameItem(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>
+          <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="actions.length > 0"
+        :actions="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 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));
+    }
+    &.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;
+    }
+    :deep(.vcs-list-item__rename) {
+      color: rgb(var(--v-theme-on-surface));
+    }
+  }
+</style>

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

@@ -0,0 +1,27 @@
+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;
+        isSelected: boolean;
+        isIndeterminate: boolean;
+        select: (value: boolean) => void;
+    }): 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>;