@vcmap/ui 6.0.0-rc.5 → 6.0.0-rc.7

package/src/components/form-inputs-controls/VcsTextField.vue.d.ts

@@ -28,9 +28,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }, {
+    prependedContent: import("vue").ComputedRef<{}>;
     forwardSlots: import("vue").ComputedRef<string[]>;
     paddingProvided: import("vue").ComputedRef<boolean>;
-    visibleValue: import("vue").WritableComputedRef<any>;
+    visibleValue: import("vue").WritableComputedRef<string | number | boolean>;
     rules: import("vue").ComputedRef<unknown>;
     textFieldRef: import("vue").Ref<any>;
     errorTooltipRef: import("vue").Ref<any>;

package/src/components/form-inputs-controls/VcsWizard.vue

@@ -35,8 +35,8 @@
 </script>
 <style scoped lang="scss">
   :deep(.v-expansion-panel-title) {
-    height: var(--v-vcs-item-height);
-    min-height: var(--v-vcs-item-height);
+    height: calc(var(--v-vcs-font-size) * 2 + 6px);
+    min-height: calc(var(--v-vcs-font-size) * 2 + 6px);
     padding: 0 8px;
   }
   :deep(.v-expansion-panel-title.v-expansion-panel-title--active) {
@@ -58,7 +58,7 @@
   }
   :deep(.v-stepper-vertical-item:not(:last-child):before) {
     height: 100%;
-    top: calc(var(--v-vcs-item-height) * 0.5);
+    top: calc(var(--v-vcs-font-size) * 2 - 16px);
     left: calc(14px + var(--v-vcs-font-size) * 0.42);
     width: calc(var(--v-vcs-font-size) * 0.1);
   }

package/src/components/form-inputs-controls/VcsWizardStep.vue

@@ -30,7 +30,11 @@
     </template>
     <template #default>
       <div>
-        <VcsHelp :text="helpText" :show="showHelp" class="mb-1">
+        <VcsHelp
+          :text="helpText"
+          v-if="showHelp && ($slots.help || helpText)"
+          class="mb-1"
+        >
           <slot name="help" />
         </VcsHelp>
         <slot />

package/src/components/form-inputs-controls/vcsTextField.scss

@@ -3,7 +3,7 @@
   --v-field-padding-end: 4px;
 }
 .v-input--density-compact :deep(.v-field) {
-  --v-input-control-height: calc(var(--v-vcs-item-height) - 8px);
+  --v-input-control-height: calc(var(--v-vcs-font-size) * 2 - 2px);
   --v-field-padding-bottom: 0px;
   --v-field-input-padding-top: 0px;
   --v-input-padding-top: 0px;
@@ -50,6 +50,12 @@
 :deep(.v-field--appended) {
   padding-inline-end: 4px;
 }
+:deep(.v-field--prepended) {
+  padding-inline-start: 4px;
+}
+.no-prepended-content :deep(.v-field--prepended) {
+  padding-inline-start: 0px;
+}
 
 // remove margin from prepended Icon
 .v-input--horizontal :deep(.v-input__prepend) {

package/src/components/form-output/VcsFormattedNumber.vue

@@ -33,7 +33,7 @@
     box-sizing: content-box;
     display: flex;
     align-items: center;
-    height: calc(var(--v-vcs-item-height) - 8px);
+    height: calc(var(--v-vcs-font-size) * 2 - 2px);
   }
   .vcs-disabled {
     opacity: var(--v-disabled-opacity);

package/src/components/import/VcsImportComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card flat class="pa-2">
     <vcs-file-drop
-      :height="3 * itemHeight"
+      :height="dropElementHeight"
       :multiple="multiple"
       v-model="files"
     />
@@ -30,7 +30,7 @@
   import { VCard } from 'vuetify/components';
   import { computed, inject, ref } from 'vue';
   import { removeListenersFromAttrs } from '../attrsHelpers.js';
-  import { useItemHeight } from '../../vuePlugins/vuetify.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
   import VcsFileDrop from './VcsFileDrop.vue';
   import VcsFormButton from '../buttons/VcsFormButton.vue';
   import VcsFileInput from '../form-inputs-controls/VcsFileInput.vue';
@@ -77,13 +77,16 @@
 
       const noListenerAttrs = computed(() => removeListenersFromAttrs(attrs));
 
-      const itemHeight = useItemHeight();
+      const fontSize = useFontSize();
+      const dropElementHeight = computed(() => {
+        return fontSize.value * 6 + 18;
+      });
 
       return {
         files,
         loading,
         noListenerAttrs,
-        itemHeight,
+        dropElementHeight,
         async doImport() {
           loading.value = true;
           try {

package/src/components/import/VcsImportComponent.vue.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     files: WritableComputedRef<File[]>;
     loading: import("vue").Ref<boolean>;
     noListenerAttrs: import("vue").ComputedRef<Record<string, unknown>>;
-    itemHeight: import("vue").ComputedRef<number>;
+    dropElementHeight: import("vue").ComputedRef<number>;
     doImport(): Promise<void>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     importFiles: {

package/src/components/lists/VcsActionList.vue

@@ -37,7 +37,6 @@
   }
 </style>
 <script>
-  import { computed } from 'vue';
   import { is, optional } from '@vcsuite/check';
   import {
     VIcon,
@@ -46,7 +45,7 @@
     VListItemTitle,
     VTooltip,
   } from 'vuetify/components';
-  import { useFontSize } from '../../vuePlugins/vuetify.js';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * pattern to check actions
@@ -121,10 +120,7 @@
       },
     },
     setup() {
-      const fontSize = useFontSize();
-      const iconSize = computed(() => {
-        return fontSize.value * (1.2 + 0.1 / 3);
-      });
+      const iconSize = useIconSize();
       return {
         iconSize,
       };

package/src/components/lists/VcsListItemComponent.vue

@@ -127,16 +127,26 @@
     <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 #append="appendScope">
+      <slot
+        name="append"
+        v-bind="{
+          ...appendScope,
+          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>

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

@@ -21,6 +21,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}
         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 = {
@@ -36,7 +46,7 @@ export type VcsListItem = {
     /**
      * - 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 | import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).ActionOptions | undefined;
+    renamable?: boolean | Omit<import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction, "callback"> | undefined;
     /**
      * - The title to be displayed
      */

package/src/components/lists/VcsTreeview.vue

@@ -17,15 +17,42 @@
       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 #title="{ item }">
-        {{ $st(item.title || item.name) }}
+      <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>
@@ -35,7 +62,7 @@
     // 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
@@ -88,10 +115,15 @@
 
 <script>
   import { getCurrentInstance } from 'vue';
+  import { VIcon } from 'vuetify/components';
   import { VTreeview } from 'vuetify/labs/VTreeview';
   import { useProxiedAtomicModel } from '../modelHelper.js';
+  import { useForwardSlots } 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/
@@ -104,11 +136,18 @@
   export default {
     name: 'VcsTreeview',
     components: {
-      VcsTreeviewLeaf,
+      VcsTreeviewTitle,
+      VIcon,
+      ImageElementInjector,
+      VcsActionButtonList,
       VcsTreeviewSearchbar,
       VTreeview,
     },
     props: {
+      items: {
+        type: Array,
+        default: () => [],
+      },
       search: {
         type: String,
         default: '',
@@ -123,7 +162,7 @@
       },
     },
     emits: ['update:search'],
-    setup(props, { emit }) {
+    setup(props, { emit, slots }) {
       const localSearchValue = useProxiedAtomicModel(props, 'search', emit);
 
       // TODO properly type the tree view item interface & export in index.d.ts
@@ -145,9 +184,34 @@
           .indexOf(q.toLocaleLowerCase());
       };
 
+      const forwardSlots = useForwardSlots(slots, [
+        'append',
+        'title',
+        'prepend',
+      ]);
+      const iconSize = useIconSize();
       return {
+        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,8 @@
 declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
     search: {
         type: StringConstructor;
         default: string;
@@ -12,9 +16,16 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
+    iconSize: import("vue").ComputedRef<number>;
     localSearchValue: import("vue").Ref<any>;
     handleFilter: (value: string, q: string, item: Object) => number;
+    forwardSlots: import("vue").ComputedRef<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;
@@ -31,6 +42,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:search"?: ((...args: any[]) => any) | undefined;
 }, {
     search: string;
+    items: unknown[];
     showSearchbar: boolean;
     searchbarPlaceholder: string;
 }, {}>;

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -3,7 +3,9 @@
     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>
+      <v-icon class="search-icon my-0 ml-1" :size="iconSize - 4">
+        $vcsSearch
+      </v-icon>
     </slot>
 
     <slot v-bind="{ ...$props, attrs: $attrs }">
@@ -16,7 +18,7 @@
     </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);
   }
 
@@ -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"
+    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/modelHelper.d.ts

@@ -4,25 +4,27 @@
  * 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
+ * @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>(props: Object, prop: string, emit: (event: string, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;
+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 {Object} props
- * @param {string} prop
- * @param {(event: string, value: T) => void} emit
+ * @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>(props: Object, prop: string, emit: (event: string, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;
+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.

package/src/components/modelHelper.js

@@ -8,11 +8,12 @@ import { getLogger } from '@vcsuite/logger';
  * 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
+ * @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(props, prop, emit) {
   const internal = ref(props[prop]);
@@ -43,11 +44,12 @@ export function useProxiedAtomicModel(props, prop, emit) {
  * 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
+ * @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(props, prop, emit) {
   const internal = ref(structuredClone(toRaw(props[prop])));

package/src/components/notification/VcsHelp.vue

@@ -1,6 +1,9 @@
 <template>
-  <div v-if="show" class="ma-0 font-weight-regular rounded-0 bg-base-lighten-4">
-    <v-container class="pa-1 vcs-help">
+  <div
+    v-if="$slots.default || text"
+    class="ma-0 font-weight-regular rounded-0 bg-base-lighten-4"
+  >
+    <v-container class="py-1 px-2 vcs-help">
       <slot>
         <span>{{ $st(text) }}</span>
       </slot>
@@ -10,6 +13,7 @@
 <style lang="scss">
   .vcs-help {
     box-sizing: border-box;
+    padding-left: 16px;
     ol,
     ul {
       padding-left: 16px; /* Indentation for list items */
@@ -22,7 +26,6 @@
   /**
    * @description A component for displaying help.
    * @vue-data {slot} [#default] - Slot to specify html based help. Gets precedence over text prop.
-   * @vue-prop {boolean} show - If help should be displayed. If false, component is completely hidden.
    * @vue-prop {string} [text] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over text prop.
    */
   export default {
@@ -35,10 +38,6 @@
         type: String,
         default: undefined,
       },
-      show: {
-        type: Boolean,
-        default: true,
-      },
     },
   };
 </script>

package/src/components/notification/VcsHelp.vue.d.ts

@@ -3,21 +3,12 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    show: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     text: {
         type: StringConstructor;
         default: undefined;
     };
-    show: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }>>, {
     text: string;
-    show: boolean;
 }, {}>;
 export default _default;