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

package/src/components/form-output/markdownHelper.js

@@ -0,0 +1,398 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import {
+  BooleanType,
+  newParsingContext,
+  StringType,
+  NoneType,
+} from 'ol/expr/expression';
+import { buildExpression, newEvaluationContext } from 'ol/expr/cpu';
+import { is } from '@vcsuite/check';
+
+/**
+ * @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) {
+  const html = marked.parse(content, { breaks: true });
+
+  // Then sanitize the HTML using DOMPurify
+  return DOMPurify.sanitize(html, { ADD_ATTR: ['target'] });
+}
+
+/**
+ * @param {string} expressionString
+ * @param {Record<string, unknown>} data
+ * @param {number} evaluationType
+ * @returns {*}
+ */
+function evaluateExpression(expressionString, data, evaluationType) {
+  const parsed = expressionString.startsWith('[')
+    ? JSON.parse(expressionString)
+    : [
+        'get',
+        ...expressionString
+          .replace(/\[([^\]]+)]/g, '.$1')
+          .split('.')
+          .filter((f) => f),
+      ];
+
+  const compiledExpression = buildExpression(
+    parsed,
+    evaluationType,
+    newParsingContext(),
+  );
+  const evaluationContext = newEvaluationContext();
+  evaluationContext.properties = data;
+  return compiledExpression(evaluationContext);
+}
+
+/**
+ * Replaces template strings by provided attributes, e.g. {{myAttribute}}
+ * @param {string} template
+ * @param {Record<string, unknown>} data
+ * @returns {string}
+ */
+function replaceAttributes(template, data) {
+  const pattern = /\{\{([^}]+)}}/g;
+  return template.replace(pattern, (p, value) => {
+    return evaluateExpression(value.trim(), data, StringType) ?? '';
+  });
+}
+
+/**
+ * @param {RegExp} regexp
+ * @param {string} string
+ * @returns {RegExpExecArray[]}
+ */
+function regexHits(regexp, string) {
+  const hits = [];
+  let hit;
+  // eslint-disable-next-line no-cond-assign
+  while ((hit = regexp.exec(string))) {
+    hits.push(hit);
+  }
+
+  return hits;
+}
+
+/**
+ * @param {RegExpExecArray[]} openings
+ * @param {RegExpExecArray[]} closings
+ * @param {(Block) => void} accepted
+ * @param {(Block) => void} rejected
+ * @returns {void}
+ */
+function findTopLevelBlock(openings, closings, accepted, rejected) {
+  const localOpenings = openings.slice();
+  const localClosings = closings.slice();
+  while (localOpenings.length > 0) {
+    let matchingClosing;
+    let matchingOpening;
+    while (!matchingClosing && localClosings.length > 0) {
+      const currentClosing = localClosings.shift();
+      const openingDistances = localOpenings.map(
+        (o) => currentClosing.index - o.index,
+      );
+      const minDistance = openingDistances.reduce((min, currentDistance) => {
+        if (currentDistance > 0 && currentDistance < min) {
+          return currentDistance;
+        }
+        return min;
+      }, Infinity);
+      const matchingOpeningIndex = openingDistances.indexOf(minDistance);
+      matchingOpening = localOpenings[matchingOpeningIndex];
+
+      if (matchingOpeningIndex === 0) {
+        matchingClosing = currentClosing;
+      } else {
+        rejected({ opening: matchingOpening, closing: currentClosing });
+      }
+      localOpenings.splice(matchingOpeningIndex, 1);
+    }
+
+    if (matchingClosing) {
+      accepted({ opening: matchingOpening, closing: matchingClosing });
+    }
+  }
+}
+
+/**
+ * @param {RegExpExecArray} tag
+ * @param {Block} block
+ * @returns {boolean}
+ */
+function tagWithinBlock(tag, block) {
+  return tag.index > block.opening.index && tag.index < block.closing.index;
+}
+
+/**
+ * @param {string} template
+ * @returns {Block[]}
+ */
+function getForEachBlocks(template) {
+  const forEachBlocks = [];
+  const forEachOpenings = regexHits(
+    /\s*{{#each\s\(([^.)]+)\)\sin\s([^}]+)}}\s*/g,
+    template,
+  );
+  const forEachClosings = regexHits(/\s*{{\/each}}\s*/g, template);
+
+  if (forEachClosings.length > forEachOpenings.length) {
+    throw new Error(
+      'Template failed to render, missing opening tag for each statements',
+    );
+  } else if (forEachClosings.length < forEachOpenings.length) {
+    throw new Error(
+      'Template failed to render, missing closing tag for each statements',
+    );
+  }
+
+  findTopLevelBlock(
+    forEachOpenings,
+    forEachClosings,
+    (block) => {
+      forEachBlocks.push(block);
+    },
+    () => {},
+  );
+
+  return forEachBlocks;
+}
+
+/**
+ * @param {string} template
+ * @param {Block[]} forEachBlocks
+ * @returns {ConditionalBlock[]}
+ */
+function getConditionalBlocks(template, forEachBlocks) {
+  const conditionalBlocks = [];
+  let conditionalOpenings = regexHits(/\s*{{#if\s([^}]*)}}\s*/g, template);
+  let conditionalClosings = regexHits(/\s*{{\/if}}\s*/g, template);
+  let elseIfs = regexHits(/\s*{{elseif\s([^}]*)}}\s*/g, template);
+  let elses = regexHits(/\s*{{else}}\s*/g, template);
+
+  const withinForEachBlock = (tag) =>
+    forEachBlocks.find((block) => tagWithinBlock(tag, block));
+
+  // conditionals within a for each blocks are rendered with the for each block, ignore
+  conditionalOpenings = conditionalOpenings.filter(
+    (t) => !withinForEachBlock(t),
+  );
+  conditionalClosings = conditionalClosings.filter(
+    (t) => !withinForEachBlock(t),
+  );
+
+  if (conditionalClosings.length > conditionalOpenings.length) {
+    throw new Error(
+      'Template failed to render, missing closing tag for if statements',
+    );
+  } else if (conditionalClosings.length < conditionalOpenings.length) {
+    throw new Error(
+      'Template failed to render, missing opening tag for if statements',
+    );
+  }
+
+  const filterElseIfElse = (block) => {
+    elseIfs = elseIfs.filter((tag) => !tagWithinBlock(tag, block));
+    elses = elses.filter((tag) => !tagWithinBlock(tag, block));
+  };
+
+  findTopLevelBlock(
+    conditionalOpenings,
+    conditionalClosings,
+    (block) => {
+      const elsIfs = elseIfs.filter((tag) => tagWithinBlock(tag, block));
+      const elseStatement = elses.find((tag) => tagWithinBlock(tag, block));
+      if (
+        elseStatement &&
+        elsIfs.length > 0 &&
+        elseStatement.index < elsIfs.at(-1).index
+      ) {
+        throw new Error('{{else}} must be the last entry in a block');
+      }
+      conditionalBlocks.push({
+        ...block,
+        elseStatement,
+        elseIfs,
+      });
+    },
+    (block) => {
+      filterElseIfElse(block);
+    },
+  );
+
+  return conditionalBlocks;
+}
+
+/**
+ * @param {string} openingTag
+ * @returns {boolean}
+ */
+function shouldRemoveWhiteSpace(openingTag) {
+  return /\n\s*\{/.test(openingTag) && /}\s*\n/.test(openingTag);
+}
+
+/**
+ * This will extract the block to render separately. This will depend on the white space handling. If the
+ * opening is placed on its own line, whitespace after the opening and before the closing blocks will be removed
+ * from the sub template, up to the first new line feed.
+ * @param {string} template
+ * @param {Block} block
+ * @returns {string}
+ */
+function getSubTemplateForBlock(template, block) {
+  const removeWhiteSpace = shouldRemoveWhiteSpace(block.opening[0]);
+  let startIndex = block.opening.index + block.opening[0].indexOf('}') + 2;
+  let endIndex = block.closing.index + block.closing[0].indexOf('{');
+  if (removeWhiteSpace) {
+    startIndex += (/}\s*\n/.exec(block.opening[0])?.[0].length ?? 1) - 1;
+    endIndex -= (/\n\s*\{/.exec(block.closing[0])?.[0].length ?? 2) - 2;
+  }
+
+  return template.substring(startIndex, endIndex);
+}
+
+/**
+ * This will replace a block with a previously extracted blocks rendered template.
+ * This will depend on the white space handling. If the opening is placed on its own line,
+ * whitespace before the opening and after the closing blocks will be removed up to the first new line feed,
+ * from the new template string all together.
+ * @param {string} template
+ * @param {Block} block
+ * @param {string} replacement
+ * @returns {string}
+ */
+function replaceBlock(template, block, replacement) {
+  const removeWhiteSpace = shouldRemoveWhiteSpace(block.opening[0]);
+  let startIndex = block.opening.index + block.opening[0].indexOf('{');
+  let endIndex = block.closing.index + block.closing[0].indexOf('}') + 2;
+  if (removeWhiteSpace) {
+    startIndex -= (/\n\s*\{/.exec(block.opening[0])?.[0].length ?? 2) - 2;
+    endIndex += (/}\s*\n/.exec(block.closing[0])?.[0].length ?? 1) - 1;
+  }
+
+  return `${template.substring(0, startIndex)}${replacement}${template.substring(endIndex)}`;
+}
+
+/**
+ * Replaces {{#if }} blocks
+ * @param {string} template
+ * @param {Record<string, unknown>} data
+ * @returns {string}
+ */
+function expandConditionalsAndLoops(template, data) {
+  let renderedTemplate = template;
+  const forEachBlocks = getForEachBlocks(template);
+
+  getConditionalBlocks(template, forEachBlocks)
+    .reverse()
+    .forEach(
+      /** @param {ConditionalBlock} block */ (block) => {
+        const partialBlocks = [block.opening];
+        if (block.elseIfs) {
+          partialBlocks.push(...block.elseIfs);
+        }
+        let trueStatementIndex = partialBlocks.findIndex((s) =>
+          evaluateExpression(s[1], data, BooleanType),
+        );
+        if (trueStatementIndex === -1 && block.elseStatement) {
+          trueStatementIndex = partialBlocks.length;
+        }
+
+        let renderedBlock = '';
+        if (trueStatementIndex > -1) {
+          if (block.elseStatement) {
+            partialBlocks.push(block.elseStatement);
+          }
+          partialBlocks.push(block.closing);
+
+          const blockTemplate = getSubTemplateForBlock(template, {
+            opening: partialBlocks[trueStatementIndex],
+            closing: partialBlocks[trueStatementIndex + 1],
+          });
+
+          renderedBlock = expandConditionalsAndLoops(blockTemplate, data);
+        }
+
+        renderedTemplate = replaceBlock(renderedTemplate, block, renderedBlock);
+      },
+    );
+
+  // only iterate over blocks not removed by conditionals
+  getForEachBlocks(renderedTemplate)
+    .reverse()
+    .forEach((block) => {
+      const obj = evaluateExpression(block.opening[2], data, NoneType);
+      let keyValuePairs;
+      if (is(obj, Object)) {
+        keyValuePairs = Object.entries(obj);
+      } else if (Array.isArray(obj)) {
+        keyValuePairs = obj.entries();
+      }
+      const renderedBlocks = [];
+      if (keyValuePairs) {
+        let index = 0;
+        const [valueName, keyName, indexName] = block.opening[1]
+          .split(',')
+          .map((e) => e.trim())
+          .slice(0, 3);
+
+        const blockTemplate = getSubTemplateForBlock(renderedTemplate, block);
+        // eslint-disable-next-line no-restricted-syntax
+        for (const args of keyValuePairs) {
+          const forEachData = structuredClone(data);
+          forEachData[valueName] = args[1];
+          if (keyName) {
+            forEachData[keyName] = args[0];
+          }
+          if (indexName) {
+            forEachData[indexName] = index;
+          }
+          const currentBlock = expandConditionalsAndLoops(
+            blockTemplate,
+            forEachData,
+          );
+          renderedBlocks.push(replaceAttributes(currentBlock, forEachData));
+          index += 1;
+        }
+      }
+
+      renderedTemplate = replaceBlock(
+        renderedTemplate,
+        block,
+        renderedBlocks.join(''),
+      );
+    });
+
+  return renderedTemplate;
+}
+
+/**
+ * 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, data) {
+  const templateString = Array.isArray(template)
+    ? template.join('\n')
+    : template;
+  const conditionalTemplate = expandConditionalsAndLoops(templateString, data);
+  return replaceAttributes(conditionalTemplate, data);
+}

package/src/components/import/VcsFileDrop.vue

@@ -4,13 +4,16 @@
     @dragover.prevent="isDragging = true"
     @dragleave.prevent="isDragging = false"
     @drop.prevent="dropped"
-    class="d-flex justify-center drop-field"
+    class="d-flex justify-center drop-field vcs-file-drop"
     :class="{ dragging: isDragging }"
     :dragging="isDragging"
+    flat
     v-bind="$attrs"
   >
     <slot>
-      <v-card-title class="d-flex align-center">{{ $st(title) }}</v-card-title>
+      <v-card-title class="d-flex align-center text-primary">{{
+        $st(title)
+      }}</v-card-title>
     </slot>
   </v-card>
 </template>
@@ -68,13 +71,13 @@
 
 <style scoped lang="scss">
   .drop-field {
-    outline: 4px dashed rgb(var(--v-theme-base));
-    outline-offset: -8px;
+    margin: 8px 8px;
+    outline: 2px dashed rgb(var(--v-theme-primary));
+    border-radius: 4px;
     background-color: rgb(var(--v-theme-base-lighten-4));
   }
 
   .dragging {
-    outline-color: rgb(var(--v-theme-primary));
-    background-color: rgb(var(--v-theme-base-lighten-1));
+    background-color: rgb(var(--v-theme-primary-lighten-3));
   }
 </style>

package/src/components/import/VcsImportComponent.vue

@@ -1,8 +1,7 @@
 <template>
-  <v-card flat class="pa-2">
+  <v-card flat class="pa-2 vcs-import-component">
     <vcs-file-drop
-      elevation="4"
-      :height="2 * useItemHeight().value"
+      :height="dropElementHeight"
       :multiple="multiple"
       v-model="files"
     />
@@ -14,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>
@@ -31,7 +30,7 @@
   import { VCard } from 'vuetify/components';
   import { computed, inject, ref } from 'vue';
   import { removeListenersFromAttrs } from '../attrsHelpers.js';
-  import { useItemHeight } from '../../vuePlugins/vuetify.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
   import VcsFileDrop from './VcsFileDrop.vue';
   import VcsFormButton from '../buttons/VcsFormButton.vue';
   import VcsFileInput from '../form-inputs-controls/VcsFileInput.vue';
@@ -78,11 +77,16 @@
 
       const noListenerAttrs = computed(() => removeListenersFromAttrs(attrs));
 
+      const fontSize = useFontSize();
+      const dropElementHeight = computed(() => {
+        return fontSize.value * 6 + 18;
+      });
+
       return {
         files,
         loading,
         noListenerAttrs,
-        useItemHeight,
+        dropElementHeight,
         async doImport() {
           loading.value = true;
           try {

package/src/components/import/VcsImportComponent.vue.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     files: WritableComputedRef<File[]>;
     loading: import("vue").Ref<boolean>;
     noListenerAttrs: import("vue").ComputedRef<Record<string, unknown>>;
-    useItemHeight: typeof useItemHeight;
+    dropElementHeight: import("vue").ComputedRef<number>;
     doImport(): Promise<void>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     importFiles: {
@@ -35,4 +35,3 @@ declare const _default: import("vue").DefineComponent<{
     fileTypes: unknown[];
 }, {}>;
 export default _default;
-import { useItemHeight } from '../../vuePlugins/vuetify.js';

package/src/components/lists/VcsActionList.vue

@@ -1,40 +1,51 @@
 <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));
+    }
+    .v-icon {
+      // the icon color slightly differs from the text color, darken-1 seems to fit better
+      color: rgb(var(--v-theme-primary-darken-1));
+    }
   }
   :deep(.v-list-item .v-list-item__prepend .v-list-item__spacer) {
     width: 8px;
   }
 </style>
 <script>
-  import { is } from '@vcsuite/check';
-  import { VIcon, VList, VListItem, VListItemTitle } from 'vuetify/components';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
+  import { is, optional } from '@vcsuite/check';
+  import {
+    VIcon,
+    VList,
+    VListItem,
+    VListItemTitle,
+    VTooltip,
+  } from 'vuetify/components';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * pattern to check actions
@@ -42,13 +53,13 @@
    */
   export const ActionPattern = {
     name: String,
-    title: [undefined, String],
-    icon: [undefined, String],
+    title: optional(String),
+    icon: optional(String),
     callback: Function,
-    active: [undefined, Boolean],
-    background: [undefined, Boolean],
-    hasUpdate: [undefined, Boolean],
-    disabled: [undefined, Boolean],
+    active: optional(Boolean),
+    background: optional(Boolean),
+    hasUpdate: optional(Boolean),
+    disabled: optional(Boolean),
   };
 
   /**
@@ -69,22 +80,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 +119,11 @@
         default: false,
       },
     },
+    setup() {
+      const iconSize = useIconSize();
+      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;