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

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

@@ -1,45 +1,66 @@
 <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
+    class="vcs-wizard-step"
+    :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"
+            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>
+        <VcsHelp
+          :text="helpText"
+          v-if="showHelp && ($slots.help || helpText)"
+          class="mb-1"
+        >
+          <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 { getForwardSlots } 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 +69,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 +76,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,31 +128,29 @@
         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',
-        active: false,
+        active: true,
         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 +167,15 @@
         return props.headerActions;
       });
 
+      const forwardSlots = getForwardSlots(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: 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

@@ -1,9 +1,9 @@
 :deep(.v-field) {
-  --v-field-padding-start: 8px;
-  --v-field-padding-end: 8px;
+  --v-field-padding-start: 4px;
+  --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;
@@ -29,12 +29,12 @@
     border-radius: 0;
   }
   .v-field__outline {
-    padding-left: 8px;
-    padding-right: 8px;
+    padding-left: 4px;
+    padding-right: 4px;
   }
   .v-field__loader {
-    padding-left: 8px;
-    padding-right: 8px;
+    padding-left: 3px;
+    padding-right: 3px;
   }
   .v-field__outline *::before {
     border-width: 0;
@@ -48,7 +48,13 @@
 
 // move unit to the right
 :deep(.v-field--appended) {
-  padding-inline-end: 8px;
+  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
@@ -58,13 +64,10 @@
 .primary--placeholder {
   :deep(input::placeholder) {
     color: rgb(var(--v-theme-primary));
-    font-style: italic;
+    font-style: italic !important;
     opacity: 1;
     padding: 0 3px 0 0;
   }
-  :deep(input::-moz-placeholder) {
-    font-style: initial;
-  }
 }
 
 // remove details
@@ -72,7 +75,12 @@
   display: none;
 }
 
-// Progress Bar
 :deep(.v-field__loader) {
   top: calc(100% - 2px);
 }
+
+// unit margin
+:deep(.v-field__clearable) {
+  margin-left: 0;
+  margin-right: 0;
+}

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

@@ -1,30 +1,47 @@
 <template>
-  <span class="vcs-formatted-number" :class="{ 'py-1': !paddingProvided }">
+  <span
+    class="vcs-formatted-number"
+    :class="{
+      'vcs-disabled': disabled,
+      'pa-1': !paddingProvided,
+    }"
+  >
     <slot name="prepend">
       <span v-if="prefix" class="pr-1">{{ prefix }}</span>
     </slot>
     {{ formatted }}
     <slot name="append">
-      <span v-if="unit === SpecialUnits.SQM"> m<sup>2</sup> </span>
-      <span v-else-if="unit === SpecialUnits.CBM"> m<sup>3</sup> </span>
-      <span v-else-if="unit === SpecialUnits.DEG"> ° </span>
-      <span v-else>
+      <span class="pl-1" v-if="unit === SpecialUnits.SQM"> m<sup>2</sup> </span>
+      <span class="pl-1" v-else-if="unit === SpecialUnits.CBM">
+        m<sup>3</sup>
+      </span>
+      <span class="pl-1" v-else-if="unit === SpecialUnits.DEG"> ° </span>
+      <span class="pl-1" v-else>
         {{ 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-font-size) * 2 - 2px);
+  }
+  .vcs-disabled {
+    opacity: var(--v-disabled-opacity);
   }
 </style>
 <script>
   import { computed } from 'vue';
+  import { VTooltip } from 'vuetify/components';
   import { usePadding } from '../composables.js';
 
   /**
@@ -64,17 +81,24 @@
 
   /**
    * @description Formatted number display, optionally with unit
+   * @vue-prop {boolean} [disabled=false] - disabled by adding transparency to the label.
    * @vue-prop {string|SpecialUnits} [unit=undefined]
    * @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: {
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
       unit: {
         type: [String || SpecialUnits],
         default: undefined,
@@ -91,6 +115,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

@@ -16,6 +16,10 @@ export namespace SpecialUnits {
     let DEG: string;
 }
 declare const _default: import("vue").DefineComponent<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     unit: {
         type: StringConstructor[];
         default: undefined;
@@ -32,6 +36,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;
@@ -41,6 +53,10 @@ declare const _default: import("vue").DefineComponent<{
     formatted: import("vue").ComputedRef<string | number>;
     paddingProvided: import("vue").ComputedRef<boolean>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     unit: {
         type: StringConstructor[];
         default: undefined;
@@ -57,9 +73,20 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
 }>>, {
+    disabled: boolean;
     modelValue: number;
     prefix: string | number;
+    tooltip: string;
+    tooltipPosition: string;
     unit: string;
     fractionDigits: number;
 }, {}>;

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

@@ -0,0 +1,56 @@
+<template>
+  <div
+    class="marked vcs-markdown"
+    :class="{
+      'pa-2': !paddingProvided,
+    }"
+    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);
+    }
+    :deep(ul) {
+      margin-bottom: calc(var(--v-vcs-font-size) * 1);
+    }
+    :deep(ol) {
+      margin-bottom: calc(var(--v-vcs-font-size) * 1);
+    }
+    :deep(li) {
+      margin-left: 1.5em;
+    }
+  }
+</style>
+<script>
+  import { computed } from 'vue';
+  import { parseAndSanitizeMarkdown } from './markdownHelper.js';
+  import { usePadding } from '../composables.js';
+
+  export default {
+    name: 'VcsMarkdown',
+    props: {
+      content: {
+        type: String,
+        default: undefined,
+      },
+    },
+    setup(props, { attrs }) {
+      const markedHtml = computed(() =>
+        parseAndSanitizeMarkdown(props.content),
+      );
+      const paddingProvided = usePadding(attrs);
+      return {
+        markedHtml,
+        paddingProvided,
+      };
+    },
+  };
+</script>

package/src/{application/VcsCustomScreen.vue.d.ts → components/form-output/VcsMarkdown.vue.d.ts}

@@ -1,15 +1,17 @@
 declare const _default: import("vue").DefineComponent<{
     content: {
         type: StringConstructor;
-        required: true;
+        default: undefined;
     };
 }, {
-    dialog: boolean;
-    customScreenText: import("vue").ComputedRef<string>;
+    markedHtml: import("vue").ComputedRef<string>;
+    paddingProvided: import("vue").ComputedRef<boolean>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     content: {
         type: StringConstructor;
-        required: true;
+        default: undefined;
     };
-}>>, {}, {}>;
+}>>, {
+    content: string;
+}, {}>;
 export default _default;

package/src/components/form-output/markdownHelper.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @typedef {Object} Block
+ * @property {RegExpExecArray} opening
+ * @property {RegExpExecArray} closing
+ */
+/**
+ * @typedef {Block} ConditionalBlock
+ * @property {RegExpExecArray|undefined} elseStatement
+ * @property {RegExpExecArray[]} elseIfs
+ */
+/**
+ * @param {string} content
+ * @returns {string}
+ */
+export function parseAndSanitizeMarkdown(content: string): string;
+/**
+ * Renders a template in these steps
+ * 1. expand conditional blocks. this will remove any blocks that do not match their expressions and choose from if / elseif / else block which of them to render
+ * 2. expand iterations. this will create new templates for each iteration and re-run the rendering for those blocks
+ * 3. render attributes. this will add the attributes to all the blocks not within each blocks
+ * @param {string|string[]} template
+ * @param {Record<string, unknown>} data
+ * @returns {string}
+ */
+export function renderTemplate(template: string | string[], data: Record<string, unknown>): string;
+export type Block = {
+    opening: RegExpExecArray;
+    closing: RegExpExecArray;
+};
+export type ConditionalBlock = Block;