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

package/src/components/lists/VcsListItemComponent.vue

@@ -0,0 +1,216 @@
+<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';
+
+  /**
+   * @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 {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"
+    class="vcs-list-item-component"
+  >
+    <template #prepend="scope">
+      <slot name="prepend" v-bind="scope">
+        <v-icon v-if="item.icon">
+          {{ item.icon }}
+        </v-icon>
+      </slot>
+    </template>
+    <template #title="scope">
+      <slot name="title" v-bind="{ ...scope, 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="scope">
+      <slot name="subtitle" v-bind="scope" />
+    </template>
+    <template #default="scope">
+      <slot name="default" v-bind="{ ...scope, tooltip }" />
+    </template>
+    <template #append="scope">
+      <slot
+        name="append"
+        v-bind="{
+          ...scope,
+          item,
+          actions,
+          actionButtonListOverflowCount,
+        }"
+      >
+        <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"
+        />
+      </slot>
+    </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/VcsListItemComponent.vue.d.ts

@@ -0,0 +1,83 @@
+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<{}>>, {}, {}>, {
+    prepend?(_: {
+        isActive: boolean;
+        isOpen: boolean;
+        isSelected: boolean;
+        isIndeterminate: boolean;
+        select: (value: boolean) => void;
+    }): any;
+    title?(_: {
+        tooltip: string;
+        title?: string | number | undefined;
+    }): any;
+    subtitle?(_: {
+        subtitle?: string | number | undefined;
+    }): any;
+    default?(_: {
+        tooltip: string;
+        isActive: boolean;
+        isOpen: boolean;
+        isSelected: boolean;
+        isIndeterminate: boolean;
+        select: (value: boolean) => void;
+    }): any;
+    append?(_: {
+        item: any;
+        actions: any[];
+        actionButtonListOverflowCount: any;
+        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 | Omit<import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction, "callback"> | 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,26 +3,56 @@
     <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"
+      @click:select="itemClicked($event.id, $event.event)"
     >
-      <template #item="{ props: item }">
-        <VcsTreeviewLeaf
-          @click.stop="item.clicked && !item.disabled && item.clicked($event)"
-          :item="item"
-        />
+      <template #title="scope">
+        <slot name="title" v-bind="scope ?? {}">
+          <VcsTreeviewTitle :item="scope.item"></VcsTreeviewTitle>
+        </slot>
+      </template>
+      <template v-for="slot of forwardSlots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope ?? {}" />
       </template>
-      <template #title="{ item }">
-        {{ $st(item.title || item.name) }}
+      <template #prepend="scope">
+        <slot name="prepend" v-bind="scope ?? {}">
+          <template v-if="scope.item?.icon">
+            <v-icon
+              v-if="typeof scope.item?.icon === 'string'"
+              :size="iconSize"
+            >
+              {{ scope.item.icon }}
+            </v-icon>
+            <ImageElementInjector :element="scope.item.icon" v-else />
+          </template>
+        </slot>
+      </template>
+      <template #append="scope">
+        <slot name="append" v-bind="scope ?? {}">
+          <VcsActionButtonList
+            v-if="scope.item.actions?.length > 0"
+            :actions="scope.item.actions"
+            :overflow-count="3"
+            :disabled="scope.item.disabled"
+            right
+            tooltip-position="right"
+            block-overflow
+            class="col-4 pa-0 d-flex align-center"
+          />
+        </slot>
       </template>
     </v-treeview>
   </div>
@@ -32,7 +62,8 @@
     // 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;
+      min-height: calc(var(--v-vcs-font-size) * 2 + 14px) !important;
+      padding-left: 6px;
     }
     // Border around root nodes with children included
     > .v-list-item:not(:last-child),
@@ -46,17 +77,34 @@
       > .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;
+      // for alignment of chevron
+      display: flex;
     }
   }
+
+  // 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,26 +116,44 @@
 </style>
 
 <script>
-  import { getCurrentInstance, ref } from 'vue';
+  import { getCurrentInstance } from 'vue';
+  import { VIcon } from 'vuetify/components';
   import { VTreeview } from 'vuetify/labs/VTreeview';
+  import { useProxiedAtomicModel } from '../modelHelper.js';
+  import { getForwardSlots } from '../composables.js';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
-  import VcsTreeviewLeaf from './VcsTreeviewLeaf.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import ImageElementInjector from '../ImageElementInjector.vue';
+  import VcsTreeviewTitle from './VcsTreeviewTitle.vue';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @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
    */
   export default {
     name: 'VcsTreeview',
     components: {
-      VcsTreeviewLeaf,
+      VcsTreeviewTitle,
+      VIcon,
+      ImageElementInjector,
+      VcsActionButtonList,
       VcsTreeviewSearchbar,
       VTreeview,
     },
     props: {
+      items: {
+        type: Array,
+        default: () => [],
+      },
+      search: {
+        type: String,
+        default: '',
+      },
       showSearchbar: {
         type: Boolean,
         default: false,
@@ -97,8 +163,10 @@
         default: undefined,
       },
     },
-    setup() {
-      const search = ref('');
+    emits: ['update:search'],
+    setup(props, { emit, slots }) {
+      const localSearchValue = useProxiedAtomicModel(props, 'search', emit);
+
       // TODO properly type the tree view item interface & export in index.d.ts
 
       const vm = getCurrentInstance().proxy;
@@ -118,9 +186,34 @@
           .indexOf(q.toLocaleLowerCase());
       };
 
+      const forwardSlots = getForwardSlots(slots, [
+        'append',
+        'title',
+        'prepend',
+      ]);
+      const iconSize = useIconSize();
       return {
-        search,
+        iconSize,
+        localSearchValue,
         handleFilter,
+        forwardSlots,
+        itemClicked(name, event) {
+          const items = props.items.slice();
+          let item;
+          while (items.length > 0) {
+            item = items.pop();
+            if (item.name === name) {
+              break;
+            }
+            if (item.children?.length > 0) {
+              items.push(...item.children);
+            }
+          }
+
+          if (item?.clicked && !item?.disabled) {
+            item.clicked(event);
+          }
+        },
       };
     },
   };

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

@@ -1,4 +1,12 @@
 declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    search: {
+        type: StringConstructor;
+        default: string;
+    };
     showSearchbar: {
         type: BooleanConstructor;
         default: boolean;
@@ -8,9 +16,20 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
-    search: import("vue").Ref<string>;
+    iconSize: import("vue").ComputedRef<number>;
+    localSearchValue: import("vue").Ref<any>;
     handleFilter: (value: string, q: string, item: Object) => number;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    forwardSlots: string[];
+    itemClicked(name: any, event: any): void;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:search"[], "update:search", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    search: {
+        type: StringConstructor;
+        default: string;
+    };
     showSearchbar: {
         type: BooleanConstructor;
         default: boolean;
@@ -19,7 +38,11 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-}>>, {
+}>> & {
+    "onUpdate:search"?: ((...args: any[]) => any) | undefined;
+}, {
+    search: string;
+    items: unknown[];
     showSearchbar: boolean;
     searchbarPlaceholder: string;
 }, {}>;

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -1,22 +1,24 @@
 <template>
   <div
-    class="pa-2 bg-base-lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0"
+    class="pa-2 bg-base-lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0 vcs-treeview-searchbar"
   >
     <slot name="prepend">
-      <v-icon class="search-icon my-0 ml-1" size="12"> $vcsSearch </v-icon>
+      <v-icon class="search-icon my-0 ml-1" :size="iconSize - 4">
+        $vcsSearch
+      </v-icon>
     </slot>
 
     <slot v-bind="{ ...$props, attrs: $attrs }">
       <VcsTextField
         class="searchbar outlined rounded-xl align-center justify-center base-lighten-4 pa-1 pl-6"
         :placeholder="$st(placeholder)"
-        v-bind="$attrs"
         clearable
+        v-bind="$attrs"
       />
     </slot>
 
     <slot name="append" :has-filter="hasFilter">
-      <v-icon v-if="hasFilter" class="ml-2" size="16">$vcsFilter</v-icon>
+      <v-icon v-if="hasFilter" class="ml-2" :size="iconSize">$vcsFilter</v-icon>
     </slot>
   </div>
 </template>
@@ -48,7 +50,9 @@
         > .v-field__field
         > .v-field__input
     ) {
-    --v-input-control-height: calc(var(--v-vcs-item-height) - 20px) !important;
+    --v-input-control-height: calc(
+      var(--v-vcs-font-size) * 2 - 14px
+    ) !important;
     min-height: var(--v-input-control-height);
   }
 
@@ -66,7 +70,7 @@
   // override primary--placeholder of VcsTextField
   :deep(input::placeholder) {
     color: rgb(var(--v-theme-base-lighten-1)) !important;
-    font-style: initial !important;
+    font-style: italic !important;
     opacity: 0.75 !important;
   }
 </style>
@@ -74,6 +78,7 @@
 <script>
   import { VIcon } from 'vuetify/components';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description stylized searchbar used in VcsTreeview, VcsDataTable and VcsList
@@ -100,5 +105,11 @@
         default: false,
       },
     },
+    setup() {
+      const iconSize = useIconSize();
+      return {
+        iconSize,
+      };
+    },
   };
 </script>

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

@@ -7,7 +7,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    iconSize: import("vue").ComputedRef<number>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     placeholder: {
         type: StringConstructor;
         default: string;

package/src/components/lists/VcsTreeviewTitle.vue

@@ -0,0 +1,40 @@
+<script setup>
+  import { computed, ref } from 'vue';
+  import { VTooltip } from 'vuetify/components';
+  import { createEllipseTooltip } from '../composables.js';
+
+  const props = defineProps({
+    item: {
+      type: Object,
+      default: undefined,
+    },
+  });
+
+  const titleParent = ref();
+
+  const tooltip = createEllipseTooltip(
+    computed(() => titleParent.value),
+    computed(() => props.item.tooltip),
+    computed(() => props.item.title || props.item.name),
+  );
+</script>
+<style lang="scss" scoped>
+  .title-parent {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
+<template>
+  <div
+    class="title-parent pr-2 vcs-treeview-title"
+    ref="titleParent"
+    @click.stop="item.clicked && !item.disabled && item.clicked($event)"
+  >
+    <span>
+      {{ $st(item.title || item.name) }}
+    </span>
+    <v-tooltip v-if="tooltip" activator="parent">
+      {{ $st(tooltip) }}
+    </v-tooltip>
+  </div>
+</template>