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

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

@@ -1,45 +1,64 @@
 <template>
-  <div class="step-border">
-    <v-stepper-vertical-item
-      :step="step"
-      :editable="editable"
-      :complete="complete"
-      :rules="rules"
-      class="pr-2"
-    >
-      <div class="d-flex justify-space-between align-center">
-        <slot name="header" />
-        <div v-if="!$slots.header" class="step-label-wrap">
-          <span>{{ $st(heading) }}</span>
+  <v-stepper-vertical-item
+    :value="step"
+    :editable="isActiveStep || editable"
+    :complete="complete"
+    :rules="rules"
+    :multiple="multiple"
+    :hide-actions="true"
+    icon="mdi-circle"
+    complete-icon="mdi-circle"
+    edit-icon="mdi-circle"
+    error-icon="mdi-circle"
+    v-bind="$attrs"
+  >
+    <template #title>
+      <slot name="title">
+        <div class="d-flex align-center justify-space-between">
+          <div v-if="!$slots.title">
+            <span>{{ $st(heading) }}</span>
+          </div>
+          <v-spacer />
+          <VcsActionButtonList
+            v-if="isActiveStep"
+            :actions="actions"
+            :overflow-count="actionButtonListOverflowCount"
+            @mousedown.stop
+            @touchstart.stop
+            @keydown.stop
+            class="justify-end"
+          />
         </div>
-        <VcsActionButtonList
-          v-if="Number(step) === Number(value)"
-          :actions="actions"
-          :overflow-count="actionButtonListOverflowCount"
-          @mousedown.stop
-          @touchstart.stop
-          @keydown.stop
-        />
+      </slot>
+    </template>
+    <template #default>
+      <div class="pr-4">
+        <VcsHelp :text="helpText" :show="showHelp">
+          <slot name="help" />
+        </VcsHelp>
+        <slot />
       </div>
-    </v-stepper-vertical-item>
-    <v-stepper-content v-if="$slots.content" class="pr-4" :step="step">
-      <VcsHelp :text="helpText" :show="showHelp">
-        <slot name="help" />
-      </VcsHelp>
-      <slot name="content" />
-    </v-stepper-content>
-  </div>
+    </template>
+    <template v-for="slot of forwardSlots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope ?? {}" />
+    </template>
+  </v-stepper-vertical-item>
 </template>
 
 <script>
   import { computed, reactive, watch } from 'vue';
   import { VStepperVerticalItem } from 'vuetify/labs/VStepperVertical';
+  import { VSpacer } from 'vuetify/components';
+  import { useProxiedComplexModel } from '../modelHelper.js';
+  import { useForwardSlots } from '../composables.js';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsHelp from '../notification/VcsHelp.vue';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-stepper-step/ |vuetify VStepperStep} and
    * {@link https://vuetifyjs.com/en/api/v-stepper-content/ |vuetify VStepperContent}.
+   * @vue-prop {boolean} multiple - Whether multiple steps can be active at the same time.
+   * @vue-prop {string | number} modelValue - The current step of the VcsWizard.
    * @vue-prop {number | string} step - Declares which step of the VcsWizard this VcsWizardStep is.
    * @vue-prop {boolean} [editable=false] - If this step is editable. If so, user can jump to that step by clicking on the v-stepper-step.
    * @vue-prop {boolean} [complete=false] - If this step is completed. Has effect on the look of the v-stepper-step.
@@ -48,7 +67,6 @@
    * @vue-prop {Array<VcsAction>} [headerActions] - Action buttons to be displayed on the right side of the v-stepper-step.
    * @vue-prop {number} [actionButtonListOverflowCount] - Overflow count to use for the headerActions.
    * @vue-prop {string} [helpText] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over helpText prop.
-   * @vue-prop {string | number} value - The current step of the VcsWizard.
    * @vue-data {slot} [#header] - Slot to override the heading prop. Allows to pass html as v-stepper-step content.
    * @vue-data {slot} [#content] - Slot to add content to the step. Is rendered in v-stepper-content.
    * @vue-data {slot} [#help] - Slot to add html to the help section. Overrides content of helpText prop.
@@ -56,14 +74,28 @@
   export default {
     name: 'VcsWizardStep',
     components: {
+      VSpacer,
       VStepperVerticalItem,
       VcsActionButtonList,
       VcsHelp,
     },
     props: {
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+      modelValue: {
+        type: [Array, String, Boolean, Number],
+        default(rawProps) {
+          if (rawProps.multiple) {
+            return [];
+          }
+          return 0;
+        },
+      },
       step: {
         type: [String, Number],
-        required: true,
+        default: 0,
       },
       editable: {
         type: Boolean,
@@ -94,12 +126,13 @@
         type: String,
         default: undefined,
       },
-      modelValue: {
-        type: [String, Number],
-        required: true,
-      },
     },
     setup(props, { slots, emit }) {
+      const localValue = useProxiedComplexModel(props, 'modelValue', emit);
+      const isActiveStep = computed(
+        () => Number(props.step) === Number(localValue.value),
+      );
+
       const helpAction = reactive({
         name: 'help',
         title: 'components.vcsFormSection.help',
@@ -107,18 +140,15 @@
         icon: 'mdi-help-circle',
         callback() {
           this.active = !this.active;
-          if (
-            Number(props.modelValue) !== Number(props.step) &&
-            props.editable
-          ) {
-            emit('update:modelValue', props.step);
+          if (!isActiveStep.value && props.editable) {
+            localValue.value = props.step;
           }
         },
       });
       const showHelp = computed(() => helpAction.active);
       // deactivate help when leaving a step
       watch(
-        () => props.modelValue,
+        () => localValue,
         (currentStep, previousStep) => {
           if (Number(previousStep) === Number(props.step)) {
             helpAction.active = false;
@@ -135,27 +165,15 @@
         return props.headerActions;
       });
 
+      const forwardSlots = useForwardSlots(slots, ['title', 'default']);
+
       return {
         showHelp,
         actions,
+        isActiveStep,
+        forwardSlots,
       };
     },
   };
 </script>
-<style scoped lang="scss">
-  .v-alert--text:before {
-    background-color: transparent;
-  }
-  .v-stepper__step {
-    :deep(.v-ripple__container) {
-      display: none !important;
-    }
-  }
-  .v-stepper__content {
-    padding-left: 2px !important;
-  }
-  .step-label-wrap {
-    padding-top: 13px !important;
-    padding-bottom: 13px !important;
-  }
-</style>
+<style scoped lang="scss"></style>

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

@@ -1,7 +1,15 @@
 declare const _default: import("vue").DefineComponent<{
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        default(rawProps: any): 0 | never[];
+    };
     step: {
         type: (StringConstructor | NumberConstructor)[];
-        required: true;
+        default: number;
     };
     editable: {
         type: BooleanConstructor;
@@ -32,17 +40,23 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        required: true;
-    };
 }, {
     showHelp: import("vue").ComputedRef<boolean>;
     actions: import("vue").ComputedRef<VcsAction>;
+    isActiveStep: import("vue").ComputedRef<boolean>;
+    forwardSlots: import("vue").ComputedRef<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)[];
+        default(rawProps: any): 0 | never[];
+    };
     step: {
         type: (StringConstructor | NumberConstructor)[];
-        required: true;
+        default: number;
     };
     editable: {
         type: BooleanConstructor;
@@ -73,14 +87,13 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        required: true;
-    };
 }>>, {
+    complete: boolean;
     headerActions: unknown[];
+    modelValue: string | number | boolean | unknown[];
     rules: unknown[];
-    complete: boolean;
+    multiple: boolean;
+    step: string | number;
     heading: string;
     actionButtonListOverflowCount: number;
     helpText: string;

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

@@ -76,3 +76,8 @@
 :deep(.v-field__loader) {
   top: calc(100% - 2px);
 }
+
+// unit margin
+:deep(.v-field__clearable) {
+  margin-left: 0;
+}

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

@@ -12,19 +12,25 @@
         {{ unit }}
       </span>
     </slot>
+    <v-tooltip
+      v-if="tooltip"
+      activator="parent"
+      :location="tooltipPosition"
+      :text="$st(tooltip)"
+    ></v-tooltip>
   </span>
 </template>
 <style lang="scss" scoped>
-  @import '../../styles/vcsGrid.scss';
-  @import '../../styles/vcsFont';
-  .vcs-formatted-number,
-  .vcs-formatted-number span {
-    font-size: var(--v-vcs-font-size);
-    line-height: $line-height-dense;
+  .vcs-formatted-number {
+    box-sizing: content-box;
+    display: flex;
+    align-items: center;
+    height: calc(var(--v-vcs-item-height) - 8px);
   }
 </style>
 <script>
   import { computed } from 'vue';
+  import { VTooltip } from 'vuetify/components';
   import { usePadding } from '../composables.js';
 
   /**
@@ -68,12 +74,14 @@
    * @vue-prop {number} [fractionDigits=undefined]
    * @vue-prop {number} modelValue
    * @vue-prop {string|number} prefix
-   * @vue-prop {boolean} [dense=true] - default line height is 32px (dense). If set false, height is 40px.
-   * @vue-prop {boolean} noPadding    - Padding is required for usage within rows. For standalone usage this prop removes class.
-   * @vue-computed {string} formatted - value formatted to locale string
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the tooltip.
+   * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
    */
   export default {
     name: 'VcsFormattedNumber',
+    components: {
+      VTooltip,
+    },
     props: {
       unit: {
         type: [String || SpecialUnits],
@@ -91,6 +99,14 @@
         type: [String, Number],
         default: undefined,
       },
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
     },
     setup(props, { attrs }) {
       const formatted = computed(() =>

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

@@ -32,6 +32,14 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
 }, {
     SpecialUnits: {
         SQM: string;
@@ -57,9 +65,19 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
 }>>, {
     modelValue: number;
     prefix: string | number;
+    tooltip: string;
+    tooltipPosition: string;
     unit: string;
     fractionDigits: number;
 }, {}>;

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

@@ -0,0 +1,53 @@
+<template>
+  <div class="marked" v-html="markedHtml"></div>
+</template>
+<style lang="scss" scoped>
+  div {
+    :deep(p) {
+      margin-bottom: calc(var(--v-vcs-font-size) * 1);
+    }
+    :deep(h1) {
+      margin-bottom: calc(var(--v-vcs-font-size) * 1);
+    }
+    :deep(h2) {
+      margin-bottom: calc(
+        var(--v-vcs-font-size) * 1
+      ); /* or any other value you prefer */
+    }
+    :deep(ul) {
+      margin-bottom: calc(
+        var(--v-vcs-font-size) * 1
+      ); /* or any other value you prefer */
+    }
+    :deep(ol) {
+      margin-bottom: calc(
+        var(--v-vcs-font-size) * 1
+      ); /* or any other value you prefer */
+    }
+    :deep(li) {
+      margin-left: 1.5em;
+    }
+  }
+</style>
+<script>
+  import { computed } from 'vue';
+  import { parseAndSanitizeMarkdown } from '../../application/markdownHelper.js';
+
+  export default {
+    name: 'VcsMarkdown',
+    props: {
+      content: {
+        type: String,
+        default: undefined,
+      },
+    },
+    setup(props) {
+      const markedHtml = computed(() =>
+        parseAndSanitizeMarkdown(props.content),
+      );
+      return {
+        markedHtml,
+      };
+    },
+  };
+</script>

package/src/components/form-output/VcsMarkdown.vue.d.ts

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

package/src/components/lists/VcsActionList.vue

@@ -1,40 +1,48 @@
 <template>
-  <v-list v-if="actions.length > 0" rounded>
-    <VcsTooltip
+  <v-list v-if="actions.length > 0" rounded class="vcs-action-list">
+    <v-list-item
       v-for="(action, index) in actions"
       :key="`${action.name}-${index}`"
-      :tooltip="action.title"
-      :tooltip-position="tooltipPosition"
-      v-bind="{ ...tooltipProps }"
+      :class="action.active ? 'text-primary' : ''"
+      :disabled="action.disabled || disabled"
+      @click="action.callback($event)"
+      v-bind="{ ...$attrs }"
     >
-      <template #activator="{ props }">
-        <v-list-item
-          :class="action.active ? 'text-primary' : ''"
-          :disabled="action.disabled || disabled"
-          @click="action.callback($event)"
-          v-bind="{ ...$attrs, ...props }"
-        >
-          <template #prepend v-if="showIcon && action.icon">
-            <v-icon>{{ action.icon }}</v-icon>
-          </template>
-          <v-list-item-title>{{ $st(action.name) }}</v-list-item-title>
-        </v-list-item>
+      <template #prepend v-if="showIcon && action.icon">
+        <v-icon :size="iconSize">{{ action.icon }}</v-icon>
       </template>
-    </VcsTooltip>
+      <v-list-item-title>{{ $st(action.name) }}</v-list-item-title>
+      <v-tooltip
+        v-if="action.title"
+        activator="parent"
+        :text="$st(action.title)"
+        :location="tooltipPosition"
+        v-bind="{ ...tooltipProps }"
+      />
+    </v-list-item>
   </v-list>
 </template>
 <style lang="scss" scoped>
-  :deep(.v-list-item-title:hover) {
-    color: rgb(var(--v-theme-primary));
+  :deep(.v-list-item:hover) {
+    .v-list-item-title {
+      color: rgb(var(--v-theme-primary));
+    }
   }
   :deep(.v-list-item .v-list-item__prepend .v-list-item__spacer) {
     width: 8px;
   }
 </style>
 <script>
+  import { computed } from 'vue';
   import { is } from '@vcsuite/check';
-  import { VIcon, VList, VListItem, VListItemTitle } from 'vuetify/components';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
+  import {
+    VIcon,
+    VList,
+    VListItem,
+    VListItemTitle,
+    VTooltip,
+  } from 'vuetify/components';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * pattern to check actions
@@ -69,22 +77,21 @@
 
   /**
    * @description
-   * A component rendering a list of actions with overflow mechanic using
-   * {@link https://vuetifyjs.com/en/api/v-list-item-group/|vuetify v-list-item-group} and {@link VcsTooltip}.
+   * A component rendering a list of actions
    * @vue-prop {Array<VcsAction>} actions - Array of actions
-   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip.
-   * @vue-prop {Object<string, any>}                    tooltipProps - Properties to be passed to VcsTooltip {@link https://vuetifyjs.com/en/api/v-tooltip/#props|vuetify v-tooltip}
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip. (action.title will be rendered as a tooltip)
+   * @vue-prop {Object<string, any>}                    tooltipProps - Properties to be passed to v-tooltip
    * @vue-prop {boolean}                                [showIcon=false] - Whether list item icons should be displayed.
    * @vue-prop {boolean}                                [disabled=false] - disable all actions
    */
   export default {
     name: 'VcsActionList',
     components: {
-      VcsTooltip,
       VList,
       VListItem,
       VIcon,
       VListItemTitle,
+      VTooltip,
     },
     props: {
       actions: {
@@ -109,5 +116,14 @@
         default: false,
       },
     },
+    setup() {
+      const fontSize = useFontSize();
+      const iconSize = computed(() => {
+        return fontSize.value * (1.2 + 0.1 / 3);
+      });
+      return {
+        iconSize,
+      };
+    },
   };
 </script>

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

@@ -35,7 +35,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<{
     actions: {
         type: ArrayConstructor;
         required: true;