@vcmap/ui 5.3.2 → 6.0.0-rc.1

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"
+      :text="tooltip"
+      v-if="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;

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -1,20 +1,16 @@
 <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"
   >
     <slot name="prepend">
       <v-icon class="search-icon my-0 ml-1" size="12"> $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)"
+        v-bind="$attrs"
         clearable
       />
     </slot>
@@ -26,10 +22,6 @@
 </template>
 
 <style lang="scss" scoped>
-  .input-container {
-    position: relative;
-  }
-
   .search-icon {
     position: absolute;
     top: 50%;
@@ -37,83 +29,55 @@
     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-item-height) - 20px) !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: initial !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';
 
   /**
    * @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,21 +88,13 @@
     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,

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

@@ -3,39 +3,21 @@ 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<{
+}, any, 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/modelHelper.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 {Object} props
+ * @param {string} prop
+ * @param {(event: string, value: T) => void} emit
+ * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
+ * @template T
+ */
+export function useProxiedAtomicModel<T>(props: Object, prop: string, emit: (event: string, 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 {Object} props
+ * @param {string} prop
+ * @param {(event: string, value: T) => void} emit
+ * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
+ * @template T
+ */
+export function useProxiedComplexModel<T>(props: Object, prop: string, emit: (event: string, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;

package/src/components/modelHelper.js

@@ -0,0 +1,88 @@
+import { computed, ref, toRaw, watch } from 'vue';
+import deepEqual from 'fast-deep-equal';
+
+/**
+ * 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 {Object} props
+ * @param {string} prop
+ * @param {(event: string, value: T) => void} emit
+ * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
+ * @template T
+ */
+export function useProxiedAtomicModel(props, prop, emit) {
+  const internal = ref(props[prop]);
+
+  // Watch for changes in prop (reassignment) and update internal
+  watch(
+    () => props[prop],
+    (newValue) => {
+      internal.value = newValue;
+    },
+  );
+
+  return computed({
+    get() {
+      return internal.value;
+    },
+    set(newValue) {
+      if (internal.value !== newValue) {
+        internal.value = newValue;
+        emit(`update:${prop}`, newValue);
+      }
+    },
+  });
+}
+
+/**
+ * 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 {Object} props
+ * @param {string} prop
+ * @param {(event: string, value: T) => void} emit
+ * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
+ * @template T
+ */
+export function useProxiedComplexModel(props, prop, emit) {
+  const internal = ref(structuredClone(toRaw(props[prop])));
+
+  // Watch for changes in prop (reassignment) and update internal
+  watch(
+    () => props[prop],
+    (internalValue) => {
+      const newValue = toRaw(internalValue);
+      if (deepEqual(internal.value, newValue)) {
+        return;
+      }
+      internal.value = structuredClone(newValue);
+    },
+    {
+      deep: true,
+      immediate: true,
+    },
+  );
+
+  // Watch for changes in internal (key updates and reassign) and emit to update prop
+  // if prop is already equal internal, do not emit
+  watch(
+    internal,
+    (internalValue) => {
+      const newValue = toRaw(internalValue);
+      const value = toRaw(props[prop]);
+      if (deepEqual(value, newValue)) {
+        return;
+      }
+      emit(`update:${prop}`, structuredClone(newValue));
+    },
+    {
+      deep: true,
+    },
+  );
+
+  return internal;
+}