@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/application/VcsCustomScreen.vue

@@ -1,45 +0,0 @@
-<template>
-  <v-card>
-    <div class="px-2 pt-2 pb-1">
-      <v-card-text>
-        <div v-html="customScreenText"></div>
-      </v-card-text>
-    </div>
-  </v-card>
-</template>
-
-<script>
-  import { VCard, VCardText } from 'vuetify/lib';
-
-  import { computed, getCurrentInstance } from 'vue';
-  import { parseAndSanitizeMarkdown } from './markdownHelper.js';
-
-  export default {
-    name: 'VcsCustomScreen',
-    components: {
-      VCard,
-      VCardText,
-    },
-    props: {
-      content: {
-        type: String,
-        required: true,
-      },
-    },
-    setup(props) {
-      const vm = getCurrentInstance().proxy;
-      const dialog = true;
-      const customScreenText = computed(() => {
-        const translatedContent = vm.$t(props.content);
-        return parseAndSanitizeMarkdown(translatedContent);
-      });
-
-      return {
-        dialog,
-        customScreenText,
-      };
-    },
-  };
-</script>
-
-<style scoped lang="scss"></style>

package/src/application/VcsCustomScreen.vue.d.ts

@@ -1,15 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    content: {
-        type: StringConstructor;
-        required: true;
-    };
-}, {
-    dialog: boolean;
-    customScreenText: import("vue").ComputedRef<string>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    content: {
-        type: StringConstructor;
-        required: true;
-    };
-}>>, {}>;
-export default _default;

package/src/application/markdownHelper.d.ts

@@ -1,12 +0,0 @@
-/**
- * @param {string} content
- * @returns {string}
- */
-export function parseAndSanitizeMarkdown(content: string): string;
-/**
- * Replaces template strings by provided attributes, e.g. {{myAttribute}}
- * @param {string|string[]} template
- * @param {Record<string, unknown>} attributes
- * @returns {string}
- */
-export function replaceAttributes(template: string | string[], attributes: Record<string, unknown>): string;

package/src/application/markdownHelper.js

@@ -1,85 +0,0 @@
-import { marked } from 'marked';
-import DOMPurify from 'dompurify';
-
-// Create a custom renderer
-const renderer = new marked.Renderer();
-
-renderer.link = (href, title, text) => {
-  const target = '_blank';
-  const titleAttr = title ? ` title="${title}"` : '';
-  return `<a href="${href}" target="${target}"${titleAttr}>${text}</a>`;
-};
-
-// Set options for marked to use the custom renderer
-marked.setOptions({
-  renderer,
-  breaks: true, // Enable line breaks
-});
-
-/**
- * @param {string} content
- * @returns {string}
- */
-export function parseAndSanitizeMarkdown(content) {
-  // First, convert the Markdown to HTML using marked
-  const html = marked(content);
-  // Then sanitize the HTML using DOMPurify
-  return DOMPurify.sanitize(html, { ADD_ATTR: ['target'] });
-}
-
-/**
- * @param {Record<string, unknown>} parent
- * @param {(string|number)[]} keys
- * @returns {undefined|T}
- * @template {*} T
- */
-function findRecursive(parent, keys) {
-  if (keys.length === 1) {
-    return parent[keys[0]];
-  } else {
-    const nextKey = keys.shift();
-    const nextParent = parent[nextKey];
-    if (nextParent) {
-      return findRecursive(nextParent, keys);
-    }
-  }
-  return undefined;
-}
-
-/**
- * Replaces template strings by provided attributes, e.g. {{myAttribute}}
- * @param {string|string[]} template
- * @param {Record<string, unknown>} attributes
- * @returns {string}
- */
-export function replaceAttributes(template, attributes) {
-  const templateString = Array.isArray(template)
-    ? template.join('\n')
-    : template;
-  return templateString.replace(/\{\{([^}]+)}}/g, (p, value) => {
-    const keys = value.trim().split('.');
-
-    for (let i = 0; i < keys.length; i++) {
-      let key = keys[i];
-      if (typeof key === 'string') {
-        const indices = [];
-        let arrayIndex = /\[["']?([^\]]+)["']?]$/.exec(key);
-        while (arrayIndex != null) {
-          let bracketKey = arrayIndex[1];
-          if (/^\d+$/.test(bracketKey)) {
-            bracketKey = Number(bracketKey);
-          }
-          indices.push(bracketKey);
-          key = key.substring(0, arrayIndex.index);
-          arrayIndex = /\[["']?([^\]]+)["']?]$/.exec(key);
-        }
-
-        if (indices.length > 0) {
-          keys.splice(i, 1, key, ...indices);
-        }
-      }
-    }
-
-    return findRecursive(attributes, keys) ?? '';
-  });
-}

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

@@ -1,160 +0,0 @@
-<template>
-  <VcsTooltip
-    :tooltip-position="tooltipPosition"
-    :tooltip="errorMessage"
-    color="error"
-    :max-width="200"
-  >
-    <template #activator="{ on, attrs }">
-      <v-container v-on="on" class="py-0" :class="isDense ? 'px-1' : 'px-2'">
-        <v-radio-group
-          ref="radioGroup"
-          hide-details
-          class="vcs-radio-group"
-          :ripple="false"
-          :dense="isDense"
-          v-bind="{ ...$attrs, ...attrs }"
-          v-on="{ ...$listeners, ...on }"
-        >
-          <div class="d-flex gap-1 px-2 pt-2 pb-1 justify-center">
-            <div v-for="(item, idx) in items" :key="idx">
-              <div class="pt-1 pb-0" :class="$attrs.disabled ? 'disabled' : ''">
-                <slot name="label" :value="item[itemValue]" :src="item.src">
-                  <img :src="item.src" :alt="item[itemValue]" class="image" />
-                </slot>
-              </div>
-              <v-radio
-                :value="item[itemValue]"
-                :ripple="false"
-                class="ma-0 justify-center"
-                :class="isDense ? 'vcs-radio-dense' : 'vcs-radio'"
-                :dense="isDense"
-              />
-            </div>
-          </div>
-        </v-radio-group>
-      </v-container>
-    </template>
-  </VcsTooltip>
-</template>
-
-<script>
-  import { computed, ref } from 'vue';
-  import { VContainer, VRadioGroup, VRadio } from 'vuetify/lib';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
-  import { useErrorSync } from './composables.js';
-
-  /**
-   * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-radio-group/ |vuetify radio group} which places icons or raster src files above the radio buttons as labels and arranges them in a grid.
-   * Use figure and figcaption for labeled radio icons:
-   * @example
-   * <VcsRadioGrid v-model="model" items="items" >
-   *    <template #label="{ src, value }">
-   *       <figure>
-   *          <v-icon size="24" class="d-flex justify-center">{{src}}</v-icon>
-   *          <figcaption class="d-flex justify-center">{{ value }}</figcaption>
-   *       </figure>
-   *    </template>
-   * </VcsRadioGrid>
-   * @vue-prop {{value: string, src: string}[]} items - The items to be displayed in the grid. The src is the path to the raster image.
-   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
-   * @vue-prop {string} itemValue - The key of the provided item objects that contains the value.
-   * @vue-data {slot} [#label] - slot to display labels where the src does not contain a path to an img but e.g. the name of an icon. Then an v-icon can be used in the slot.
-   */
-  export default {
-    name: 'VcsRadioGrid',
-    components: {
-      VContainer,
-      VRadioGroup,
-      VRadio,
-      VcsTooltip,
-    },
-    props: {
-      items: {
-        type: Array,
-        required: true,
-      },
-      tooltipPosition: {
-        type: String,
-        default: 'right',
-      },
-      itemValue: {
-        type: String,
-        default: 'value',
-      },
-    },
-    setup(props, { attrs }) {
-      const radioGroup = ref();
-
-      const errorMessage = useErrorSync(radioGroup);
-      return {
-        isDense: computed(() => attrs.dense !== false),
-        radioGroup,
-        errorMessage,
-      };
-    },
-    model: {
-      event: 'change',
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  // TODO: scss for radio buttons should be moved to own file.
-  @import '../../styles/vcsFont.scss';
-  @import '../../styles/shades.scss';
-  .v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {
-    margin-bottom: 0;
-  }
-  .v-input {
-    &.vcs-radio-group {
-      ::v-deep {
-        margin-top: 0;
-        padding-top: 0;
-        label.v-label,
-        .v-icon.v-icon {
-          font-size: $vcs-font-size;
-          color: inherit;
-          &.theme--light {
-            color: map-get($shades, 'black') !important;
-            &.error--text {
-              color: var(--v-error-base) !important;
-            }
-          }
-          &.theme--dark {
-            color: map-get($shades, 'white') !important;
-            &.error--text {
-              color: var(--v-error-base) !important;
-            }
-          }
-        }
-        .v-radio:not(:last-child):not(:only-child) {
-          margin-bottom: 0;
-        }
-        .v-input--selection-controls__input {
-          margin: 0;
-        }
-        label.v-label.error--text {
-          animation: none;
-        }
-      }
-    }
-  }
-  .vcs-radio {
-    height: 40px;
-    align-items: center;
-  }
-  .vcs-radio-dense {
-    height: 32px;
-    align-items: center;
-  }
-  .image {
-    max-height: 24px;
-    max-width: 24px;
-    height: auto;
-    width: auto;
-  }
-  .disabled {
-    opacity: 0.3;
-  }
-</style>

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

@@ -1,35 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    items: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    tooltipPosition: {
-        type: StringConstructor;
-        default: string;
-    };
-    itemValue: {
-        type: StringConstructor;
-        default: string;
-    };
-}, {
-    isDense: import("vue").ComputedRef<boolean>;
-    radioGroup: import("vue").Ref<any>;
-    errorMessage: import("vue").Ref<string>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    items: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    tooltipPosition: {
-        type: StringConstructor;
-        default: string;
-    };
-    itemValue: {
-        type: StringConstructor;
-        default: string;
-    };
-}>>, {
-    tooltipPosition: string;
-    itemValue: string;
-}>;
-export default _default;

package/src/components/form-inputs-controls/composables.d.ts

@@ -1,7 +0,0 @@
-/**
- * Syncs the error and validation state with the underlying vuetify component.
- * @param {import("vue").Ref<unknown>} elementRef The template ref to the base vuetify component.
- * @returns {import("vue").Ref<string>} Error message to display. Is empty string if either there are no error messages or if the validation errors are not displayed because
- * no interaction with the component or validation was reset by form. Validation errors have precedence over custom error messages.
- */
-export function useErrorSync(elementRef: import("vue").Ref<unknown>): import("vue").Ref<string>;

package/src/components/form-inputs-controls/composables.js

@@ -1,31 +0,0 @@
-import { computed } from 'vue';
-
-/**
- * Syncs the error and validation state with the underlying vuetify component.
- * @param {import("vue").Ref<unknown>} elementRef The template ref to the base vuetify component.
- * @returns {import("vue").Ref<string>} Error message to display. Is empty string if either there are no error messages or if the validation errors are not displayed because
- * no interaction with the component or validation was reset by form. Validation errors have precedence over custom error messages.
- */
-// eslint-disable-next-line import/prefer-default-export
-export function useErrorSync(elementRef) {
-  return computed(() => {
-    // if element is already mounted
-    if (elementRef.value) {
-      // errorMessages of selectField can either be (empty) array or string. Makes sure it is array.
-      const customErrorMessages = Array.isArray(elementRef.value.errorMessages)
-        ? elementRef.value.errorMessages
-        : [elementRef.value.errorMessages];
-      // if validationState is 'error' (reset button removes this) or if there is errorMessages prop
-      if (
-        elementRef.value.validationState === 'error' ||
-        !!customErrorMessages.length
-      ) {
-        // custom errorMessages are displayed when all validation error are solved.
-        return (
-          [...elementRef.value.errorBucket, ...customErrorMessages][0] || ''
-        );
-      }
-    }
-    return '';
-  });
-}

package/src/components/import/FileDrop.vue

@@ -1,69 +0,0 @@
-<template>
-  <v-card
-    @dragenter.prevent="isDragging = true"
-    @dragover.prevent="isDragging = true"
-    @dragleave.prevent="isDragging = false"
-    @drop.prevent="dropped"
-    class="d-flex justify-center drop-field"
-    :class="{ dragging: isDragging }"
-    :dragging="isDragging"
-    v-bind="$attrs"
-  >
-    <slot>
-      <v-card-title>{{ $t(title) }}</v-card-title>
-    </slot>
-  </v-card>
-</template>
-
-<script>
-  import { VCard, VCardTitle } from 'vuetify/lib';
-  import { ref } from 'vue';
-
-  export default {
-    name: 'FileDrop',
-    components: {
-      VCard,
-      VCardTitle,
-    },
-    props: {
-      value: {
-        type: Array,
-        default: () => [],
-      },
-      title: {
-        type: String,
-        default: 'components.import.fileDrop',
-      },
-    },
-    setup(_p, { emit }) {
-      const isDragging = ref(false);
-
-      return {
-        isDragging,
-        dropped(event) {
-          isDragging.value = false;
-          if (event.dataTransfer?.files) {
-            const files = [];
-            for (let i = 0; i < event.dataTransfer.files.length; i++) {
-              files.push(event.dataTransfer.files[i]);
-            }
-            emit('input', files);
-          }
-        },
-      };
-    },
-  };
-</script>
-
-<style scoped lang="scss">
-  .drop-field {
-    outline: 4px dashed var(--v-base-base);
-    outline-offset: -8px;
-    background-color: var(--v-base-lighten4);
-  }
-
-  .dragging {
-    outline-color: var(--v-primary-base);
-    background-color: var(--v-base-lighten1);
-  }
-</style>

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

@@ -1,26 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    value: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-}, {
-    isDragging: import("vue").Ref<boolean>;
-    dropped(event: any): void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-}>>, {
-    value: unknown[];
-    title: string;
-}>;
-export default _default;

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -1,82 +0,0 @@
-<template>
-  <div class="d-flex flex-row align-center" v-if="item">
-    <div class="position-relative col-8 pa-0 d-flex align-center">
-      <span v-if="item.icon" class="d-inline-flex">
-        <v-icon v-if="isStringIcon" :size="16" class="mr-1">
-          {{ item.icon }}
-        </v-icon>
-        <ImageElementInjector :element="item.icon" v-else />
-      </span>
-      <VcsTooltip :tooltip="tooltip">
-        <template #activator="{ on, attrs }">
-          <span
-            v-bind="attrs"
-            v-on="on"
-            class="d-inline-block text-truncate"
-            ref="titleElem"
-            >{{ $t(item.title || item.name) }}</span
-          >
-        </template>
-      </VcsTooltip>
-    </div>
-
-    <VcsActionButtonList
-      v-if="item.actions.length > 0"
-      :actions="item.actions"
-      :block-overflow="true"
-      :overflow-count="3"
-      :disabled="item.disabled"
-      right
-      class="col-4 pa-0 d-flex align-center"
-    />
-  </div>
-</template>
-
-<script>
-  import { computed, ref } from 'vue';
-  import { VIcon } from 'vuetify/lib';
-  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
-  import ImageElementInjector from '../ImageElementInjector.vue';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
-
-  /**
-   * @description
-   * Template for a treeview leaf, see: https://vuetifyjs.com/en/api/v-treeview/
-   * @vue-prop {TreeViewItem} item - A ContentTreeItem
-   * @vue-computed {boolean} leaf - Whether the item is a leaf item or not
-   */
-  export default {
-    components: {
-      VcsTooltip,
-      VcsActionButtonList,
-      VIcon,
-      ImageElementInjector,
-    },
-    props: {
-      item: {
-        type: Object,
-        default: undefined,
-      },
-    },
-    setup(props) {
-      const leaf = computed(() => props.item?.children?.length === 0);
-      const titleElem = ref(null);
-
-      return {
-        isStringIcon: computed(() => typeof props.item.icon === 'string'),
-        leaf,
-        titleElem,
-        tooltip: computed(() => {
-          if (props.item.tooltip) {
-            return props.item.tooltip;
-          }
-          const elem = titleElem.value;
-          if (elem && elem.offsetWidth < elem.scrollWidth) {
-            return props.item.title;
-          }
-          return '';
-        }),
-      };
-    },
-  };
-</script>

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

@@ -1,19 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    item: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-}, {
-    isStringIcon: import("vue").ComputedRef<boolean>;
-    leaf: import("vue").ComputedRef<boolean>;
-    titleElem: import("vue").Ref<null>;
-    tooltip: import("vue").ComputedRef<any>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    item: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-}>>, {
-    item: Record<string, any>;
-}>;
-export default _default;