@vcmap/ui 6.0.0-rc.3 → 6.0.0-rc.6

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

@@ -10,8 +10,10 @@
     class="vcs-text-field primary--placeholder"
     :class="{
       'py-1': !paddingProvided,
+      'no-prepended-content': !prependedContent,
     }"
     v-bind="$attrs"
+    :prefix="forcePrefix ? undefined : $attrs.prefix"
     v-model="visibleValue"
     v-model:focused="focused"
   >
@@ -41,6 +43,14 @@
       ></v-tooltip>
       <slot name="default" v-bind="scope ?? {}"></slot>
     </template>
+    <!-- use slot to show prefix always, independent of modelValue (unlike prefix prop) -->
+    <template #prepend-inner="prependInnerScope">
+      <slot name="prepend-inner" v-bind="prependInnerScope">
+        <template v-if="forcePrefix && $attrs.prefix">
+          {{ $attrs.prefix }}
+        </template>
+      </slot>
+    </template>
   </v-text-field>
 </template>
 
@@ -74,6 +84,7 @@
    * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
    * @vue-prop {string}                                 unit - Unit for number input fields. Is displayed behind the number.
    * @vue-prop {number|undefined}                       [decimals] - An optional number of decimal places the visible value will be rounded to. Does not affect the input value!
+   * @vue-prop {boolean}                                [forcePrefix=false] - If set, forces the prefix to be always rendered independent of modelValue by using prepend-inner slot
    */
   export default {
     name: 'VcsTextField',
@@ -112,6 +123,10 @@
         type: Number,
         default: undefined,
       },
+      forcePrefix: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props, { attrs, slots }) {
       const textFieldRef = ref();
@@ -137,8 +152,12 @@
           return localValue.value ?? '';
         },
         set(value) {
-          localValue.value = value;
           // emit is not needed since the vuetify component already emits an @input event. (forwarded listeners)
+          if (props.type === 'number') {
+            localValue.value = parseFloat(value);
+          } else {
+            localValue.value = value;
+          }
         },
       });
 
@@ -155,7 +174,11 @@
       const paddingProvided = usePadding(attrs);
       const forwardSlots = useForwardSlots(slots, ['default', 'message']);
 
+      const prependedContent = computed(() => {
+        return (props.forcePrefix && attrs.prefix) || !!slots['prepend-inner'];
+      });
       return {
+        prependedContent,
         forwardSlots,
         paddingProvided,
         visibleValue,

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

@@ -23,10 +23,15 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: undefined;
     };
+    forcePrefix: {
+        type: BooleanConstructor;
+        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>;
@@ -56,6 +61,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: undefined;
     };
+    forcePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     type: string;
     modelValue: string | number;
@@ -63,5 +72,6 @@ declare const _default: import("vue").DefineComponent<{
     tooltipPosition: string;
     unit: string;
     decimals: number;
+    forcePrefix: boolean;
 }, {}>;
 export default _default;

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

@@ -23,9 +23,6 @@
             v-if="isActiveStep"
             :actions="actions"
             :overflow-count="actionButtonListOverflowCount"
-            @mousedown.stop
-            @touchstart.stop
-            @keydown.stop
             class="justify-end"
           />
         </div>
@@ -33,7 +30,11 @@
     </template>
     <template #default>
       <div>
-        <VcsHelp :text="helpText" :show="showHelp">
+        <VcsHelp
+          :text="helpText"
+          v-if="showHelp && ($slots.help || helpText)"
+          class="mb-1"
+        >
           <slot name="help" />
         </VcsHelp>
         <slot />
@@ -136,7 +137,7 @@
       const helpAction = reactive({
         name: 'help',
         title: 'components.vcsFormSection.help',
-        active: false,
+        active: true,
         icon: 'mdi-help-circle',
         callback() {
           this.active = !this.active;

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) {
@@ -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

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

@@ -11,10 +11,12 @@
     </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>
@@ -31,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/form-output/VcsMarkdown.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="marked" v-html="markedHtml"></div>
+  <div
+    class="marked"
+    :class="{
+      'pa-2': !paddingProvided,
+    }"
+    v-html="markedHtml"
+  ></div>
 </template>
 <style lang="scss" scoped>
   div {
@@ -10,19 +16,13 @@
       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 */
+      margin-bottom: calc(var(--v-vcs-font-size) * 1);
     }
     :deep(ul) {
-      margin-bottom: calc(
-        var(--v-vcs-font-size) * 1
-      ); /* or any other value you prefer */
+      margin-bottom: calc(var(--v-vcs-font-size) * 1);
     }
     :deep(ol) {
-      margin-bottom: calc(
-        var(--v-vcs-font-size) * 1
-      ); /* or any other value you prefer */
+      margin-bottom: calc(var(--v-vcs-font-size) * 1);
     }
     :deep(li) {
       margin-left: 1.5em;
@@ -31,7 +31,8 @@
 </style>
 <script>
   import { computed } from 'vue';
-  import { parseAndSanitizeMarkdown } from '../../application/markdownHelper.js';
+  import { parseAndSanitizeMarkdown } from './markdownHelper.js';
+  import { usePadding } from '../composables.js';
 
   export default {
     name: 'VcsMarkdown',
@@ -41,12 +42,14 @@
         default: undefined,
       },
     },
-    setup(props) {
+    setup(props, { attrs }) {
       const markedHtml = computed(() =>
         parseAndSanitizeMarkdown(props.content),
       );
+      const paddingProvided = usePadding(attrs);
       return {
         markedHtml,
+        paddingProvided,
       };
     },
   };

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

@@ -5,6 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     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;

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;