@vcmap/ui 5.3.3 → 6.0.0-rc.2

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/VcsTreeview.vue

@@ -8,61 +8,70 @@
     <v-treeview
       class="vcs-treeview"
       v-bind="{ ...$props, ...$attrs }"
-      v-on="$listeners"
-      expand-icon="mdi-chevron-down"
-      item-key="name"
+      item-value="name"
+      :item-props="true"
       :search="search"
-      :filter="handleFilter"
+      :custom-filter="handleFilter"
+      :selectable="false"
+      :activatable="false"
     >
-      <template #label="{ item }">
+      <template #item="{ props: item }">
         <VcsTreeviewLeaf
+          @click.stop="item.clicked && !item.disabled && item.clicked($event)"
           :item="item"
-          :class="[item.clickable ? 'cursor-pointer' : '']"
-          @click.native="
-            item.clickable && !item.disabled && item.clicked($event)
-          "
         />
       </template>
+      <template #title="{ item }">
+        {{ $st(item.title || item.name) }}
+      </template>
     </v-treeview>
   </div>
 </template>
 <style lang="scss" scoped>
-  .vcs-treeview {
-    ::v-deep {
-      // Root Level Entries should be 40px high
-      > .v-treeview-node > .v-treeview-node__root {
-        min-height: 40px;
-      }
-      // Border around root nodes with children included
-      > .v-treeview-node:not(:last-child) {
-        border-bottom: 1px solid var(--v-base-lighten2);
-      }
-      // Only Group Entries have a bold font
-      .v-treeview-node__root
-        button
-        + .v-treeview-node__content
-        .v-treeview-node__label {
-        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;
+  :deep(.vcs-treeview) {
+    // Root Level Entries should be 40px high
+    > .v-list-item,
+    > .v-list-group > .v-list-item {
+      min-height: calc(var(--v-vcs-item-height) + 8px) !important;
+    }
+    // Border around root nodes with children included
+    > .v-list-item:not(:last-child),
+    > .v-list-group:not(:last-child) {
+      border-bottom: 1px solid rgb(var(--v-theme-base-lighten-2));
+    }
+    // Only Group Entries have a bold font
+    > .v-list-group
+      > .v-list-item
+      > .v-list-item__content
+      > .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;
+    }
+  }
+  // hide active class
+  :deep(.v-list-item__overlay) {
+    display: none;
+  }
+
+  .d-contents {
+    display: contents;
   }
 </style>
 
 <script>
   import { getCurrentInstance, ref } from 'vue';
-  import { VTreeview } from 'vuetify/lib';
-  import VcsTreeviewLeaf from './VcsTreeviewLeaf.vue';
+  import { VTreeview } from 'vuetify/labs/VTreeview';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
+  import VcsTreeviewLeaf from './VcsTreeviewLeaf.vue';
 
   /**
    * @description extends API of https://vuetifyjs.com/en/api/v-treeview/
@@ -74,8 +83,8 @@
   export default {
     name: 'VcsTreeview',
     components: {
-      VcsTreeviewSearchbar,
       VcsTreeviewLeaf,
+      VcsTreeviewSearchbar,
       VTreeview,
     },
     props: {
@@ -94,15 +103,19 @@
 
       const vm = getCurrentInstance().proxy;
       /**
-       * @param {{ title: string }} treeNode
+       * @param {string} value
        * @param {string} q
-       * @returns {boolean}
+       * @param {Object} item
+       * @returns {number}
        */
-      const handleFilter = (treeNode, q = '') => {
-        const translatedTitle = vm.$t(treeNode.title);
+      const handleFilter = (value, q, item) => {
+        if (value == null || q == null) {
+          return -1;
+        }
+        const translatedTitle = item.title ? vm.$st(item.title) : item.value;
         return translatedTitle
           .toLocaleLowerCase()
-          .includes(q.toLocaleLowerCase());
+          .indexOf(q.toLocaleLowerCase());
       };
 
       return {

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

@@ -9,10 +9,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     search: import("vue").Ref<string>;
-    handleFilter: (treeNode: {
-        title: string;
-    }, q?: string) => boolean;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    handleFilter: (value: string, q: string, item: Object) => number;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     showSearchbar: {
         type: BooleanConstructor;
         default: boolean;
@@ -24,5 +22,5 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     showSearchbar: boolean;
     searchbarPlaceholder: string;
-}>;
+}, {}>;
 export default _default;

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -1,82 +1,83 @@
-<template>
-  <div class="d-flex flex-row align-center" v-if="item">
-    <div class="position-relative col-8 pa-0 d-flex align-center">
-      <span v-if="item.icon" class="d-inline-flex">
-        <v-icon v-if="isStringIcon" :size="16" class="mr-1">
-          {{ item.icon }}
-        </v-icon>
-        <ImageElementInjector :element="item.icon" v-else />
-      </span>
-      <VcsTooltip :tooltip="tooltip">
-        <template #activator="{ on, attrs }">
-          <span
-            v-bind="attrs"
-            v-on="on"
-            class="d-inline-block text-truncate"
-            ref="titleElem"
-            >{{ $t(item.title || item.name) }}</span
-          >
-        </template>
-      </VcsTooltip>
-    </div>
-
-    <VcsActionButtonList
-      v-if="item.actions.length > 0"
-      :actions="item.actions"
-      :block-overflow="true"
-      :overflow-count="3"
-      :disabled="item.disabled"
-      right
-      class="col-4 pa-0 d-flex align-center"
-    />
-  </div>
-</template>
-
-<script>
-  import { computed, ref } from 'vue';
-  import { VIcon } from 'vuetify/lib';
+<script setup>
+  import { computed, onUnmounted, ref, watch } from 'vue';
+  import { VIcon, VTooltip } from 'vuetify/components';
+  import { VTreeviewItem } from 'vuetify/labs/VTreeview';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import ImageElementInjector from '../ImageElementInjector.vue';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
 
-  /**
-   * @description
-   * Template for a treeview leaf, see: https://vuetifyjs.com/en/api/v-treeview/
-   * @vue-prop {TreeViewItem} item - A ContentTreeItem
-   * @vue-computed {boolean} leaf - Whether the item is a leaf item or not
-   */
-  export default {
-    components: {
-      VcsTooltip,
-      VcsActionButtonList,
-      VIcon,
-      ImageElementInjector,
+  const props = defineProps({
+    item: {
+      type: Object,
+      default: undefined,
     },
-    props: {
-      item: {
-        type: Object,
-        default: undefined,
-      },
-    },
-    setup(props) {
-      const leaf = computed(() => props.item?.children?.length === 0);
-      const titleElem = ref(null);
+  });
+
+  const isStringIcon = computed(() => typeof props.item?.icon === 'string');
+  const parentElement = ref();
+  const titleElem = ref();
+  const offsetWidth = ref(0);
+  const scrollWidth = ref(0);
 
-      return {
-        isStringIcon: computed(() => typeof props.item.icon === 'string'),
-        leaf,
-        titleElem,
-        tooltip: computed(() => {
-          if (props.item.tooltip) {
-            return props.item.tooltip;
-          }
-          const elem = titleElem.value;
-          if (elem && elem.offsetWidth < elem.scrollWidth) {
-            return props.item.title;
-          }
-          return '';
-        }),
-      };
+  const observer = new ResizeObserver(() => {
+    offsetWidth.value = titleElem.value.offsetWidth;
+    scrollWidth.value = titleElem.value.scrollWidth;
+  });
+
+  watch(
+    parentElement,
+    (newValue, oldValue) => {
+      if (oldValue) {
+        observer.unobserve(oldValue.$el);
+      }
+      if (newValue) {
+        observer.observe(newValue.$el);
+      }
     },
-  };
+    { immediate: true },
+  );
+
+  const tooltip = computed(() => {
+    // tooltipIteration.value -= 1;
+    if (props.item?.tooltip) {
+      return props.item.tooltip;
+    }
+    if (offsetWidth.value < scrollWidth.value) {
+      return props.item?.title ?? '';
+    }
+    return '';
+  });
+
+  onUnmounted(() => {
+    observer.disconnect();
+  });
 </script>
+
+<template>
+  <v-treeview-item v-if="item" ref="parentElement">
+    <template #prepend v-if="item.icon">
+      <v-icon v-if="isStringIcon" :size="16" class="mr-1">
+        {{ item.icon }}
+      </v-icon>
+      <ImageElementInjector :element="item.icon" v-else />
+    </template>
+    <div class="text-truncate" ref="titleElem">
+      {{ $st(item.title || item.name) }}
+    </div>
+    <v-tooltip
+      activator="parent"
+      v-if="tooltip"
+      :text="$st(tooltip)"
+      location="bottom"
+    />
+    <template #append>
+      <VcsActionButtonList
+        v-if="item.actions?.length > 0"
+        :actions="item.actions"
+        :overflow-count="3"
+        :disabled="item.disabled"
+        right
+        class="col-4 pa-0 d-flex align-center"
+      />
+    </template>
+  </v-treeview-item>
+</template>

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

@@ -1,19 +1,7 @@
-declare const _default: import("vue").DefineComponent<{
-    item: {
-        type: ObjectConstructor;
-        default: undefined;
+declare const _default: import("vue").DefineComponent<{}, {
+    item?: Record<string, any> | undefined;
+    $props: {
+        readonly item?: Record<string, any> | undefined;
     };
-}, {
-    isStringIcon: import("vue").ComputedRef<boolean>;
-    leaf: import("vue").ComputedRef<boolean>;
-    titleElem: import("vue").Ref<null>;
-    tooltip: import("vue").ComputedRef<any>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    item: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-}>>, {
-    item: Record<string, any>;
-}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;