@vcmap/ui 6.0.0-rc.8 → 6.0.0

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

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     hasAppendSlot: import("vue").ComputedRef<boolean>;
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     sliderRef: import("vue").Ref<any>;
     thumbSize: import("vue").ComputedRef<number>;
     tickSize: import("vue").ComputedRef<number>;

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

@@ -141,7 +141,7 @@
 <script>
   import { ref } from 'vue';
   import { VTextarea, VTooltip } from 'vuetify/components';
-  import { useForwardSlots, usePadding } from '../composables.js';
+  import { getForwardSlots, usePadding } from '../composables.js';
 
   /**
    * @description extends API of {@link https://vuetifyjs.com/en/api/v-textarea/|vuetify v-textarea}.
@@ -173,7 +173,7 @@
       const errorTooltipRef = ref();
 
       const paddingProvided = usePadding(attrs);
-      const forwardSlots = useForwardSlots(slots, ['append-inner', 'message']);
+      const forwardSlots = getForwardSlots(slots, ['append-inner', 'message']);
 
       return {
         forwardSlots,

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

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     textAreaRef: import("vue").Ref<any>;
     errorTooltipRef: import("vue").Ref<any>;
     paddingProvided: import("vue").ComputedRef<boolean>;

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

@@ -55,12 +55,12 @@
 </template>
 
 <style lang="scss" scoped>
-  @import './vcsTextField.scss';
+  @use './vcsTextField.scss';
 </style>
 <script>
   import { computed, ref } from 'vue';
   import { VTextField, VTooltip } from 'vuetify/components';
-  import { useForwardSlots, usePadding } from '../composables.js';
+  import { getForwardSlots, usePadding } from '../composables.js';
   import { useProxiedAtomicModel } from '../modelHelper.js';
 
   function countDecimalPlaces(value) {
@@ -172,7 +172,7 @@
       });
 
       const paddingProvided = usePadding(attrs);
-      const forwardSlots = useForwardSlots(slots, ['default', 'message']);
+      const forwardSlots = getForwardSlots(slots, ['default', 'message']);
 
       const prependedContent = computed(() => {
         return (props.forcePrefix && attrs.prefix) || !!slots['prepend-inner'];

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

@@ -29,7 +29,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     prependedContent: import("vue").ComputedRef<{}>;
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     paddingProvided: import("vue").ComputedRef<boolean>;
     visibleValue: import("vue").WritableComputedRef<string | number | boolean>;
     rules: import("vue").ComputedRef<unknown>;

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

@@ -12,7 +12,7 @@
 <script>
   import { VStepperVertical } from 'vuetify/labs/VStepperVertical';
   import { VIcon } from 'vuetify/components';
-  import { useForwardSlots } from '../composables.js';
+  import { getForwardSlots } from '../composables.js';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-stepper-vertical/ |vuetify stepper vertical}per.
@@ -25,7 +25,7 @@
       VIcon,
     },
     setup(_p, { slots }) {
-      const forwardSlots = useForwardSlots(slots, ['icon']);
+      const forwardSlots = getForwardSlots(slots, ['icon']);
 
       return {
         forwardSlots,

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

@@ -1,4 +1,4 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

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

@@ -52,7 +52,7 @@
   import { VStepperVerticalItem } from 'vuetify/labs/VStepperVertical';
   import { VSpacer } from 'vuetify/components';
   import { useProxiedComplexModel } from '../modelHelper.js';
-  import { useForwardSlots } from '../composables.js';
+  import { getForwardSlots } from '../composables.js';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsHelp from '../notification/VcsHelp.vue';
 
@@ -167,7 +167,7 @@
         return props.headerActions;
       });
 
-      const forwardSlots = useForwardSlots(slots, ['title', 'default']);
+      const forwardSlots = getForwardSlots(slots, ['title', 'default']);
 
       return {
         showHelp,

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

@@ -4,7 +4,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     modelValue: {
-        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        type: (BooleanConstructor | StringConstructor | NumberConstructor | ArrayConstructor)[];
         default(rawProps: any): 0 | never[];
     };
     step: {
@@ -44,14 +44,14 @@ declare const _default: import("vue").DefineComponent<{
     showHelp: import("vue").ComputedRef<boolean>;
     actions: import("vue").ComputedRef<VcsAction>;
     isActiveStep: import("vue").ComputedRef<boolean>;
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     multiple: {
         type: BooleanConstructor;
         default: boolean;
     };
     modelValue: {
-        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        type: (BooleanConstructor | StringConstructor | NumberConstructor | ArrayConstructor)[];
         default(rawProps: any): 0 | never[];
     };
     step: {

package/src/components/import/VcsImportComponent.vue

@@ -13,15 +13,15 @@
       v-model="files"
     />
     <div class="d-flex justify-end gc-1 mx-3 pt-2 pb-1">
-      <vcs-form-button @click="$emit('close')">
-        {{ $t('components.cancel') }}
-      </vcs-form-button>
       <vcs-form-button
         variant="filled"
         :disabled="files.length === 0"
         @click="doImport"
         >{{ $t('components.import.submit') }}</vcs-form-button
       >
+      <vcs-form-button @click="$emit('close')">
+        {{ $t('components.cancel') }}
+      </vcs-form-button>
     </div>
   </v-card>
 </template>

package/src/components/lists/VcsActionList.vue

@@ -13,7 +13,7 @@
       </template>
       <v-list-item-title>{{ $st(action.name) }}</v-list-item-title>
       <v-tooltip
-        v-if="action.title"
+        v-if="action.title && $st(action.title)"
         activator="parent"
         :text="$st(action.title)"
         :location="tooltipPosition"

package/src/components/lists/VcsList.vue

@@ -57,14 +57,17 @@
           }"
           @click="select(item, $event)"
         >
-          <template #title="titleScope">
-            <slot name="item.title" v-bind="{ ...titleScope, index }"></slot>
+          <template #append="scope">
+            <slot name="item.append" v-bind="{ ...scope, index, item }" />
           </template>
-          <template #subtitle="subtitleScope">
-            <slot name="item.subtitle" v-bind="{ ...subtitleScope, index }" />
+          <template #title="scope">
+            <slot name="item.title" v-bind="{ ...scope, index, item }" />
           </template>
-          <template #default="scope">
-            <slot name="item.default" v-bind="{ ...scope, index }" />
+          <template #subtitle="scope">
+            <slot name="item.subtitle" v-bind="{ ...scope, index, item }" />
+          </template>
+          <template #prepend="scope">
+            <slot name="item.prepend" v-bind="{ ...scope, index, item }" />
           </template>
         </VcsListItemComponent>
         <slot name="item.intermediate" :item="item" :index="index" />
@@ -83,6 +86,7 @@
     getCurrentInstance,
     inject,
     isReactive,
+    reactive,
     ref,
     shallowRef,
     watch,
@@ -106,36 +110,48 @@
    * @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
    */
   export function createSelectionActions(items, selected, emit) {
-    return [
-      {
-        name: 'list.selectAll',
-        tooltip: 'list.selectAll',
-        callback() {
-          const currentSelection = [...selected.value];
-          selected.value = items.value.filter((item) => !item.disabled);
+    const selectAllAction = reactive({
+      name: 'list.selectAll',
+      tooltip: 'list.selectAll',
+      disabled: items.value.length - selected.value.length < 1,
+      callback() {
+        const currentSelection = [...selected.value];
+        selected.value = items.value.filter((item) => !item.disabled);
 
-          selected.value.forEach((item) => {
-            if (item.selectionChanged && !currentSelection.includes(item)) {
-              item.selectionChanged(true);
-            }
-          });
-          emit('update:modelValue', selected.value);
-        },
+        selected.value.forEach((item) => {
+          if (item.selectionChanged && !currentSelection.includes(item)) {
+            item.selectionChanged(true);
+          }
+        });
+        emit('update:modelValue', selected.value);
       },
-      {
-        name: 'list.clearSelection',
-        tooltip: 'list.clearSelection',
-        callback() {
-          [...selected.value].forEach((item) => {
-            if (item.selectionChanged) {
-              item.selectionChanged(false);
-            }
-          });
-          selected.value = [];
-          emit('update:modelValue', selected.value);
-        },
+    });
+    const clearSelectionAction = reactive({
+      name: 'list.clearSelection',
+      tooltip: 'list.clearSelection',
+      disabled: selected.value.length < 1,
+      callback() {
+        [...selected.value].forEach((item) => {
+          if (item.selectionChanged) {
+            item.selectionChanged(false);
+          }
+        });
+        selected.value = [];
+        emit('update:modelValue', selected.value);
       },
-    ];
+    });
+
+    watch(
+      [items, selected],
+      () => {
+        selectAllAction.disabled =
+          items.value.length - selected.value.length < 1;
+        clearSelectionAction.disabled = selected.value.length < 1;
+      },
+      { deep: false, immediate: true },
+    );
+
+    return [selectAllAction, clearSelectionAction];
   }
 
   /**
@@ -170,10 +186,11 @@
    * @vue-prop {string} [tooltip] - tooltip to render on the list title
    * @vue-prop {Array<import("../../actions/actionHelper.js").VcsAction>} [actions] - actions to render in the list title
    * @vue-event {ItemMovedEvent} item-moved - event triggered after item was dragged and is dropped
-   * @vue-data {slot} [#item.prepend-title] - A slot to adapt the list item titel, adding content before the title. Binds item and index.
-   * @vue-data {slot} [#item.title] - A slot to adapt the list item titel. Default content is a span or VcsTextField for active rename action. Binds item and index.
-   * @vue-data {slot} [#item.append-title] - A slot to adapt the list item titel, adding content after the title. Binds item and index.
-   * @vue-data {slot} [#item.intermediate] - A slot to introduce content, e.g. buttons between two list items. Binds item and index.
+   * @vue-data {slot} [#item.prepend] - A slot that forwads to v-list-item prepend slot. Binds v-list-item append slot props, item and item index.
+   * @vue-data {slot} [#item.title] - A slot that forwards to v-list-item title slot. Binds v-list-item title slot props, item and item index.
+   * @vue-data {slot} [#item.subtitle] - A slot that forwards to v-list-item subtitle slot. Binds v-list-item subtitle slot props, item and item index.
+   * @vue-data {slot} [#item.append] - A slot that forwards to v-list-item append slot. Binds v-list-item append slot props, item and item index.
+   * @vue-data {slot} [#item.intermediate] - A slot to introduce content, e.g. buttons between two list items. Binds item and item index.
    */
   export default {
     name: 'VcsList',
@@ -568,7 +585,7 @@
       }
       &:hover {
         .v-list-item__overlay {
-          background-color: rgb(var(--v-theme-base));
+          background-color: rgb(var(--v-theme-on-surface));
         }
       }
       .vcs-list-title__selected {
@@ -589,7 +606,7 @@
 
       &:hover {
         .v-list-item__overlay {
-          background-color: transparent;
+          background-color: rgb(var(--v-theme-on-surface));
         }
       }
     }

package/src/components/lists/VcsListItemComponent.vue

@@ -94,13 +94,15 @@
     v-bind="$attrs"
     class="vcs-list-item-component"
   >
-    <template #prepend>
-      <v-icon v-if="item.icon">
-        {{ item.icon }}
-      </v-icon>
+    <template #prepend="scope">
+      <slot name="prepend" v-bind="scope">
+        <v-icon v-if="item.icon">
+          {{ item.icon }}
+        </v-icon>
+      </slot>
     </template>
-    <template #title>
-      <slot name="title" v-bind="{ item, dragging, tooltip }">
+    <template #title="scope">
+      <slot name="title" v-bind="{ ...scope, tooltip }">
         <v-list-item-title
           ref="title"
           :class="{ 'vcs-list-item__rename': rename }"
@@ -125,17 +127,17 @@
         </v-list-item-title>
       </slot>
     </template>
-    <template #subtitle>
-      <slot name="subtitle" v-bind="{ item }" />
+    <template #subtitle="scope">
+      <slot name="subtitle" v-bind="scope" />
     </template>
     <template #default="scope">
-      <slot name="default" v-bind="{ ...scope, item, dragging, tooltip }" />
+      <slot name="default" v-bind="{ ...scope, tooltip }" />
     </template>
-    <template #append="appendScope">
+    <template #append="scope">
       <slot
         name="append"
         v-bind="{
-          ...appendScope,
+          ...scope,
           item,
           actions,
           actionButtonListOverflowCount,
@@ -205,7 +207,7 @@
       width: 8px;
     }
     :deep(.v-list-item__overlay) {
-      background-color: transparent;
+      background-color: rgb(var(--v-theme-on-surface));
     }
     :deep(.vcs-list-item__rename) {
       color: rgb(var(--v-theme-on-surface));

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

@@ -3,34 +3,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}
         readonly [x: string]: any;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
-    title?(_: {
-        item: any;
-        dragging: any;
-        tooltip: string;
-    }): any;
-    subtitle?(_: {
-        item: any;
-    }): any;
-    default?(_: {
-        item: any;
-        dragging: any;
-        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;
+    prepend?(_: any): any;
+    title?(_: any): any;
+    subtitle?(_: any): any;
+    default?(_: any): any;
+    append?(_: any): any;
 }>;
 export default _default;
 export type VcsListItem = {

package/src/components/lists/VcsTreeview.vue

@@ -92,6 +92,8 @@
       width: var(--v-vcs-font-size);
       height: var(--v-vcs-font-size);
       margin: auto;
+      // for alignment of chevron
+      display: flex;
     }
   }
 
@@ -118,7 +120,7 @@
   import { VIcon } from 'vuetify/components';
   import { VTreeview } from 'vuetify/labs/VTreeview';
   import { useProxiedAtomicModel } from '../modelHelper.js';
-  import { useForwardSlots } from '../composables.js';
+  import { getForwardSlots } from '../composables.js';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import ImageElementInjector from '../ImageElementInjector.vue';
@@ -184,7 +186,7 @@
           .indexOf(q.toLocaleLowerCase());
       };
 
-      const forwardSlots = useForwardSlots(slots, [
+      const forwardSlots = getForwardSlots(slots, [
         'append',
         'title',
         'prepend',

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

@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<{
     iconSize: import("vue").ComputedRef<number>;
     localSearchValue: import("vue").Ref<any>;
     handleFilter: (value: string, q: string, item: Object) => number;
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    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: {

package/src/components/notification/VcsHelp.vue

@@ -13,7 +13,6 @@
 <style lang="scss">
   .vcs-help {
     box-sizing: border-box;
-    padding-left: 16px;
     ol,
     ul {
       padding-left: 16px; /* Indentation for list items */

package/src/components/notification/VcsHelpTooltip.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-tooltip class="vcs-help-tooltip">
+    <template #activator="{ props }">
+      <v-icon :size="fontSize" v-bind="props" :icon="icon" />
+    </template>
+    <v-container class="py-1 px-2 vcs-help-tooltip-container">
+      <slot>
+        <span class="vcs-help-tooltip-text">{{ $st(text) }}</span>
+      </slot>
+    </v-container>
+  </v-tooltip>
+</template>
+<style lang="scss" scoped></style>
+<script>
+  import { VTooltip, VIcon, VContainer } from 'vuetify/components';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
+
+  /**
+   * @description A component for displaying help as tooltip via an icon.
+   * @vue-data {slot} [#default] - Slot to specify html based help. Gets precedence over text prop.
+   * @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 {
+    name: 'VcsHelpTooltip',
+    components: {
+      VTooltip,
+      VIcon,
+      VContainer,
+    },
+    props: {
+      icon: {
+        type: String,
+        default: '$vcsHelp',
+      },
+      text: {
+        type: String,
+        default: undefined,
+      },
+    },
+    setup() {
+      const fontSize = useFontSize();
+
+      return {
+        fontSize,
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,25 @@
+declare const _default: import("vue").DefineComponent<{
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}, {
+    fontSize: import("vue").ComputedRef<number>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>>, {
+    text: string;
+    icon: string;
+}, {}>;
+export default _default;