@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/components/lists/VcsTreeview.vue

@@ -3,82 +3,157 @@
     <VcsTreeviewSearchbar
       v-if="showSearchbar"
       :placeholder="searchbarPlaceholder"
-      v-model="search"
+      v-model="localSearchValue"
     />
     <v-treeview
       class="vcs-treeview"
+      density="compact"
+      item-value="name"
+      :item-props="true"
+      :custom-filter="handleFilter"
+      :selectable="false"
+      :activatable="false"
+      expand-icon="mdi-chevron-right"
+      collapse-icon="mdi-chevron-down"
       v-bind="{ ...$props, ...$attrs }"
-      v-on="$listeners"
-      expand-icon="mdi-chevron-down"
-      item-key="name"
-      :search="search"
-      :filter="handleFilter"
+      :search="localSearchValue"
+      @click:select="itemClicked($event.id, $event.event)"
     >
-      <template #label="{ item }">
-        <VcsTreeviewLeaf
-          :item="item"
-          :class="[item.clickable ? 'cursor-pointer' : '']"
-          @click.native="
-            item.clickable && !item.disabled && item.clicked($event)
-          "
-        />
+      <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 #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>
 </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-font-size) * 2 + 14px) !important;
+      padding-left: 6px;
+    }
+    // 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;
     }
   }
+
+  // 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;
+  }
+
+  .d-contents {
+    display: contents;
+  }
 </style>
 
 <script>
-  import { getCurrentInstance, ref } from 'vue';
-  import { VTreeview } from 'vuetify/lib';
-  import VcsTreeviewLeaf from './VcsTreeviewLeaf.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 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: {
+      VcsTreeviewTitle,
+      VIcon,
+      ImageElementInjector,
+      VcsActionButtonList,
       VcsTreeviewSearchbar,
-      VcsTreeviewLeaf,
       VTreeview,
     },
     props: {
+      items: {
+        type: Array,
+        default: () => [],
+      },
+      search: {
+        type: String,
+        default: '',
+      },
       showSearchbar: {
         type: Boolean,
         default: false,
@@ -88,26 +163,57 @@
         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;
       /**
-       * @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());
       };
 
+      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,11 +16,20 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
-    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<{
+    iconSize: import("vue").ComputedRef<number>;
+    localSearchValue: import("vue").Ref<any>;
+    handleFilter: (value: string, q: string, item: Object) => number;
+    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;
@@ -21,8 +38,12 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-}>>, {
+}>> & {
+    "onUpdate:search"?: ((...args: any[]) => any) | undefined;
+}, {
+    search: string;
+    items: unknown[];
     showSearchbar: boolean;
     searchbarPlaceholder: string;
-}>;
+}, {}>;
 export default _default;

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -1,35 +1,29 @@
 <template>
   <div
-    class="pa-2 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, on: $listeners }">
-      <v-text-field
-        solo
-        dense
-        hide-details
-        class="searchbar outlined rounded-xl align-center d-flex justify-center base lighten-4 pa-1 pl-6"
-        :placeholder="$t(placeholder)"
-        :value="value"
-        v-on="$listeners"
+    <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)"
         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>
 
 <style lang="scss" scoped>
-  .input-container {
-    position: relative;
-  }
-
   .search-icon {
     position: absolute;
     top: 50%;
@@ -37,83 +31,58 @@
     left: 12px;
   }
 
-  input {
-    border-radius: 9999rem;
+  // set rounded outline
+  :deep(.v-input.outlined) {
     outline-style: none;
     font-size: 12px;
-    box-shadow: 0 0 0 1px var(--v-base-lighten2);
+    box-shadow: 0 0 0 1px rgb(var(--v-theme-base-lighten-2));
 
-    &:focus {
-      box-shadow: 0 0 0 1px var(--v-primary-base);
+    &:has(.v-field--focused) {
+      box-shadow: 0 0 0 1px rgb(var(--v-theme-primary)) !important;
     }
   }
 
-  ::v-deep {
-    .v-input__slot {
-      background-color: transparent !important;
-    }
-
-    .v-input__append-inner {
-      height: 20px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .v-icon {
-        width: 20px;
-        height: 20px;
-        font-size: 16px;
-      }
-    }
-
-    .v-text-field.v-text-field--solo.v-input--dense > .v-input__control {
-      min-height: unset;
-    }
-
-    .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
-      > .v-input__control
-      > .v-input__slot,
-    .v-text-field.v-text-field--enclosed .v-text-field__details {
-      padding: 0 8px;
-    }
-
-    .v-input.outlined {
-      outline-style: none;
-      font-size: 12px;
-      box-shadow: 0 0 0 1px var(--v-base-lighten2);
+  // override item height
+  :deep(
+      .v-input--density-compact
+        > .v-input__control
+        > .v-field
+        > .v-field__field
+        > .v-field__input
+    ) {
+    --v-input-control-height: calc(
+      var(--v-vcs-font-size) * 2 - 14px
+    ) !important;
+    min-height: var(--v-input-control-height);
+  }
 
-      &:focus,
-      &.v-input--is-focused {
-        box-shadow: 0 0 0 1px var(--v-primary-base);
-      }
-    }
+  // override background color of VcsTextField
+  :deep(.v-input) {
+    background: rgb(var(--v-theme-base-lighten-4));
+  }
 
-    .v-text-field.v-input--dense:not(
-        .v-text-field--outlined
-      ).v-text-field__prefix,
-    .v-text-field.v-input--dense:not(
-        .v-text-field--outlined
-      ).v-text-field__suffix,
-    .v-text-field.v-input--dense:not(.v-text-field--outlined) input {
-      padding: 0;
-    }
+  // remove outline of VcsTextField
+  :deep(.v-field *) {
+    border-width: 0;
+    border-bottom: 0;
+  }
 
-    .v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)
-      > .v-input__control
-      > .v-input__slot {
-      box-shadow: none;
-      border-radius: 0;
-    }
+  // override primary--placeholder of VcsTextField
+  :deep(input::placeholder) {
+    color: rgb(var(--v-theme-base-lighten-1)) !important;
+    font-style: italic !important;
+    opacity: 0.75 !important;
   }
 </style>
 
 <script>
-  import { VIcon, VTextField } from 'vuetify/lib';
+  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
    * @vue-prop {string} [placeholder='search.title'] - Placeholder will be displayed in the search field, and will be translated.
-   * @vue-prop {string[]} [customClasses] - CSS classes to customize style
    * @vue-prop {string} [value] - The search value
    * @vue-prop {boolean} [hasFilter=false] - Appends a filter icon
    * @vue-data {slot} [prepend] - prepend slot overwriting search icon
@@ -124,25 +93,23 @@
     name: 'VcsTreeviewSearchbar',
     components: {
       VIcon,
-      VTextField,
+      VcsTextField,
     },
     props: {
       placeholder: {
         type: String,
         default: 'search.title',
       },
-      customClasses: {
-        type: Array,
-        default: () => [],
-      },
-      value: {
-        type: String,
-        default: '',
-      },
       hasFilter: {
         type: Boolean,
         default: false,
       },
     },
+    setup() {
+      const iconSize = useIconSize();
+      return {
+        iconSize,
+      };
+    },
   };
 </script>

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

@@ -3,39 +3,23 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    customClasses: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    value: {
-        type: StringConstructor;
-        default: string;
-    };
     hasFilter: {
         type: BooleanConstructor;
         default: boolean;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, 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;
     };
-    customClasses: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    value: {
-        type: StringConstructor;
-        default: string;
-    };
     hasFilter: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>>, {
-    value: string;
-    customClasses: unknown[];
     placeholder: string;
     hasFilter: boolean;
-}>;
+}, {}>;
 export default _default;

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>

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

@@ -0,0 +1,7 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    item?: Record<string, any> | undefined;
+    $props: {
+        readonly item?: Record<string, any> | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/src/components/modelHelper.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Can only be used in setup of Vue components!
+ * Provides a computed model for atomic properties.
+ * getter returns the internal value
+ * setter updates internal value and emits the update event
+ * simplified based on https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/proxiedModel.ts
+ * @param {{ [k in P]: string extends P ? unknown : T }} props
+ * @param {P} prop
+ * @param {(event: string extends P ? P : `update:${P}`, value: T) => void} emit
+ * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
+ * @template T
+ * @template  {string} [P=string]
+ */
+export function useProxiedAtomicModel<T, P extends string = string>(props: { [k in P]: string extends P ? unknown : T; }, prop: P, emit: (event: string extends P ? P : `update:${P}`, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;
+/**
+ * Can only be used in setup of Vue components!
+ * Provides a ref model for complex properties.
+ * Watches changes on the provided prop and updates the internal ref
+ * Watches changes on the internal ref and emits the change, if prop has not already been updated
+ * @param {{ [k in P]: string extends P ? unknown : T }} props
+ * @param {P} prop
+ * @param {(event: string extends P ? P : `update:${P}`, value: T) => void} emit
+ * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
+ * @template T
+ * @template {string} [P=string]
+ */
+export function useProxiedComplexModel<T, P extends string = string>(props: { [k in P]: string extends P ? unknown : T; }, prop: P, emit: (event: string extends P ? P : `update:${P}`, 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>;