@vcmap/ui 5.3.7 → 6.0.0-rc.10

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

@@ -1,32 +1,48 @@
 <template>
   <span
     class="vcs-formatted-number"
-    :class="{ 'vcs-formatted-number-dense': dense, 'px-2': !noPadding }"
+    :class="{
+      'vcs-disabled': disabled,
+      'pa-1': !paddingProvided,
+    }"
   >
-    <span v-if="prefix" class="pr-1">{{ prefix }}</span>
+    <slot name="prepend">
+      <span v-if="prefix" class="pr-1">{{ prefix }}</span>
+    </slot>
     {{ formatted }}
-    <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>
-      {{ unit }}
-    </span>
+    <slot name="append">
+      <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: $vcs-font-size;
-    line-height: $line-height-base;
+  .vcs-formatted-number {
+    box-sizing: content-box;
+    display: flex;
+    align-items: center;
+    height: calc(var(--v-vcs-font-size) * 2 - 2px);
   }
-  .vcs-formatted-number-dense {
-    line-height: $line-height-dense;
+  .vcs-disabled {
+    opacity: var(--v-disabled-opacity);
   }
 </style>
 <script>
   import { computed } from 'vue';
+  import { VTooltip } from 'vuetify/components';
+  import { usePadding } from '../composables.js';
 
   /**
    * @description Converts a number (e.g. 12345678,9) to a locale-aware and
@@ -65,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} value
+   * @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,
@@ -84,7 +107,7 @@
         type: Number,
         default: 2,
       },
-      value: {
+      modelValue: {
         type: Number,
         default: 0,
       },
@@ -92,22 +115,24 @@
         type: [String, Number],
         default: undefined,
       },
-      dense: {
-        type: Boolean,
-        default: true,
+      tooltip: {
+        type: String,
+        default: undefined,
       },
-      noPadding: {
-        type: Boolean,
-        default: false,
+      tooltipPosition: {
+        type: String,
+        default: 'right',
       },
     },
-    setup(props) {
+    setup(props, { attrs }) {
       const formatted = computed(() =>
-        numberToLocaleString(props.value, props.fractionDigits),
+        numberToLocaleString(props.modelValue, props.fractionDigits),
       );
+      const paddingProvided = usePadding(attrs);
       return {
         SpecialUnits,
         formatted,
+        paddingProvided,
       };
     },
   };

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;
@@ -24,7 +28,7 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    value: {
+    modelValue: {
         type: NumberConstructor;
         default: number;
     };
@@ -32,13 +36,13 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
-    dense: {
-        type: BooleanConstructor;
-        default: boolean;
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
     };
-    noPadding: {
-        type: BooleanConstructor;
-        default: boolean;
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
     };
 }, {
     SpecialUnits: {
@@ -47,7 +51,12 @@ declare const _default: import("vue").DefineComponent<{
         DEG: string;
     };
     formatted: import("vue").ComputedRef<string | number>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    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;
@@ -56,7 +65,7 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    value: {
+    modelValue: {
         type: NumberConstructor;
         default: number;
     };
@@ -64,22 +73,23 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
-    dense: {
-        type: BooleanConstructor;
-        default: boolean;
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
     };
-    noPadding: {
-        type: BooleanConstructor;
-        default: boolean;
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
     };
 }>>, {
-    value: number;
+    disabled: boolean;
+    modelValue: number;
+    prefix: string | number;
+    tooltip: string;
+    tooltipPosition: string;
     unit: string;
-    noPadding: boolean;
-    dense: boolean;
     fractionDigits: number;
-    prefix: string | number;
-}>;
+}, {}>;
 export default _default;
 export namespace VcsFormattedNumber {
     /**

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/components/form-output/VcsMarkdown.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import("vue").DefineComponent<{
+    content: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}, {
+    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;
+        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;