@vcmap/ui 6.0.0-rc.1 → 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/components';
-
-  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/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/lists/VcsTreeviewLeaf.vue

@@ -1,83 +0,0 @@
-<script setup>
-  import { computed, onUnmounted, ref, watch } from 'vue';
-  import { VIcon, VTooltip } from 'vuetify/components';
-  import { VTreeviewItem } from 'vuetify/labs/VTreeview';
-  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
-  import ImageElementInjector from '../ImageElementInjector.vue';
-
-  const props = defineProps({
-    item: {
-      type: Object,
-      default: undefined,
-    },
-  });
-
-  const isStringIcon = computed(() => typeof props.item?.icon === 'string');
-  const parentElement = ref();
-  const titleElem = ref();
-  const offsetWidth = ref(0);
-  const scrollWidth = ref(0);
-
-  const observer = new ResizeObserver(() => {
-    offsetWidth.value = titleElem.value.offsetWidth;
-    scrollWidth.value = titleElem.value.scrollWidth;
-  });
-
-  watch(
-    parentElement,
-    (newValue, oldValue) => {
-      if (oldValue) {
-        observer.unobserve(oldValue.$el);
-      }
-      if (newValue) {
-        observer.observe(newValue.$el);
-      }
-    },
-    { immediate: true },
-  );
-
-  const tooltip = computed(() => {
-    // tooltipIteration.value -= 1;
-    if (props.item?.tooltip) {
-      return props.item.tooltip;
-    }
-    if (offsetWidth.value < scrollWidth.value) {
-      return props.item?.title ?? '';
-    }
-    return '';
-  });
-
-  onUnmounted(() => {
-    observer.disconnect();
-  });
-</script>
-
-<template>
-  <v-treeview-item v-if="item" ref="parentElement">
-    <template #prepend v-if="item.icon">
-      <v-icon v-if="isStringIcon" :size="16" class="mr-1">
-        {{ item.icon }}
-      </v-icon>
-      <ImageElementInjector :element="item.icon" v-else />
-    </template>
-    <div class="text-truncate" ref="titleElem">
-      {{ $st(item.title || item.name) }}
-    </div>
-    <v-tooltip
-      activator="parent"
-      :text="tooltip"
-      v-if="tooltip"
-      location="bottom"
-    />
-    <template #append>
-      <VcsActionButtonList
-        v-if="item.actions?.length > 0"
-        :actions="item.actions"
-        :overflow-count="3"
-        :disabled="item.disabled"
-        right
-        class="col-4 pa-0 d-flex align-center"
-      />
-    </template>
-  </v-treeview-item>
-</template>

package/src/components/notification/VcsTooltip.vue

@@ -1,156 +0,0 @@
-<template>
-  <v-tooltip
-    :disabled="!tooltip"
-    :content-class="`tooltip ${arrowClass}`"
-    transition="expand-x-transition"
-    v-bind="{ ...$props, ...$attrs }"
-  >
-    <template #activator="{ props }">
-      <slot name="activator" v-bind="props" />
-    </template>
-    <span v-if="tooltip">{{ $st(tooltip) }}</span>
-  </v-tooltip>
-</template>
-<style lang="scss" scoped>
-  //.v-tooltip__content.tooltip {
-  //  border: 1px solid black;
-  //  border-radius: 0;
-  //  background-color: #222222;
-  //
-  //&.arrow-top {
-  //   transform: translateY(-6px);
-  //
-  //&::after, &::before {
-  //             bottom: 100%;
-  //             left: 50%;
-  //             border: solid transparent;
-  //             content: "";
-  //             height: 0;
-  //             width: 0;
-  //             position: absolute;
-  //             pointer-events: none;
-  //           }
-  //
-  //&::before {
-  //   border-color: rgba(194, 225, 245, 0);
-  //   border-bottom-color: black;
-  //   border-width: 5px;
-  //   margin-left: -5px;
-  // }
-  //}
-  //
-  //&.arrow-bottom {
-  //   transform: translateY(6px);
-  //
-  //&::after, &::before {
-  //             top: 100%;
-  //             left: 50%;
-  //             border: solid transparent;
-  //             content: "";
-  //             height: 0;
-  //             width: 0;
-  //             position: absolute;
-  //             pointer-events: none;
-  //           }
-  //
-  //&::before {
-  //   border-color: rgba(194, 225, 245, 0);
-  //   border-top-color: black;
-  //   border-width: 5px;
-  //   margin-left: -5px;
-  // }
-  //}
-  //
-  //&.arrow-right {
-  //&::after, &::before {
-  //             top: 50%;
-  //             right: -11px;
-  //             transform: translateY(-50%);
-  //             border: solid transparent;
-  //             content: "";
-  //             height: 0;
-  //             width: 0;
-  //             position: absolute;
-  //             pointer-events: none;
-  //           }
-  //
-  //&::before {
-  //   border-color: rgba(255, 0, 0, 0);
-  //   border-left-color: black;
-  //   border-width: 5px;
-  //   margin-left: -5px;
-  // }
-  //}
-  //
-  //&.arrow-left {
-  //
-  //&::after, &::before {
-  //             top: 50%;
-  //             left: -11px;
-  //             transform: translateY(-50%);
-  //             border: solid transparent;
-  //             content: "";
-  //             height: 0;
-  //             width: 0;
-  //             position: absolute;
-  //             pointer-events: none;
-  //           }
-  //
-  //&::before {
-  //   border-color: rgba(194, 225, 245, 0);
-  //   border-right-color: black;
-  //   border-width: 5px;
-  // }
-  //}
-  //}
-</style>
-<script>
-  import { VTooltip } from 'vuetify/components';
-
-  /**
-   * @enum {string} TooltipPositions
-   * @property {string} bottom
-   * @property {string} left
-   * @property {string} top
-   * @property {string} right
-   * @readonly
-   * @module VcsTooltip
-   */
-  const TooltipPositions = {
-    bottom: 'arrow-top',
-    top: 'arrow-bottom',
-    left: 'arrow-right',
-    right: 'arrow-left',
-  };
-
-  /**
-   * @description tooltip extending {@link https://vuetifyjs.com/en/api/v-tooltip/|vuetify v-tooltip}.
-   * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay. This should be an i18n key.
-   * @vue-prop {string}                                 [tooltipPosition='bottom'] - Position of the tooltip (allowed values: 'bottom'|'left'|'top'|'right').
-   * @vue-computed {string}                             arrowClass - direction of tooltip arrow
-   */
-  export default {
-    name: 'VcsTooltip',
-    components: {
-      VTooltip,
-    },
-    props: {
-      tooltip: {
-        type: String,
-        default: undefined,
-      },
-      tooltipPosition: {
-        type: String,
-        default: 'bottom',
-        validator(value) {
-          return Object.keys(TooltipPositions).includes(value);
-        },
-      },
-    },
-    computed: {
-      arrowClass() {
-        return TooltipPositions[this.tooltipPosition];
-      },
-    },
-  };
-</script>

package/src/components/notification/VcsTooltip.vue.d.ts

@@ -1,27 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    tooltip: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    tooltipPosition: {
-        type: StringConstructor;
-        default: string;
-        validator(value: unknown): boolean;
-    };
-}, any, any, {
-    arrowClass(): any;
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    tooltip: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    tooltipPosition: {
-        type: StringConstructor;
-        default: string;
-        validator(value: unknown): boolean;
-    };
-}>>, {
-    tooltip: string;
-    tooltipPosition: string;
-}, {}>;
-export default _default;

package/src/components/vector-properties/composables.d.ts

@@ -1,33 +0,0 @@
-/**
- * Creates a computed property with a getter and a setter for a specific primitive object property/key of the modelled object. This composable allows to pass the computed to an v-model of a sub component. The getter returns the value of the key. The setter merges the passed value with the other object properties of the modelled object and emits the whole object as a input event, and only the changed props as an change event.
- * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {K} key The key of the modelObject that should be returned on get and updated on set.
- * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
- * @returns {import('vue').WritableComputedRef<T[K]>} A computed with a getter and a setter.
- * @template {Record<string, unknown>} T
- * @template {string} K
- */
-export function usePrimitiveProperty<T extends Record<string, unknown>, K extends string>(modelObject: () => T, key: K, emit: (arg0: string, arg1: unknown[]) => void): import("vue").WritableComputedRef<T[K]>;
-/**
- * Creates an object with the entries of the input array as keys and computed properties as values. These have a getter and a setter for a specific entry of the array, that is an object property/key of the modelled object. This composable allows to pass the computeds to an v-model of a sub component. The getter returns the value of the array entry. The setter first merges the passed value with the other array entries, and then with the other object properties of the modelled object and emits the whole object as a input event, and only the changed props as an change event.
- * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {K} key The key of the modelObject that should be returned on get and updated on set.
- * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
- * @param {number} arrayLength The length of the array property.
- * @returns {import('vue').WritableComputedRef<T[K][number]>[]} An object with the provided names as keys and the corresponding computed properties with a getter and a setter.
- * @template {Object} T
- * @template {string} K
- */
-export function useArrayProperty<T extends Object, K extends string>(modelObject: () => T, key: K, emit: (arg0: string, arg1: unknown[]) => void, arrayLength: number): import("vue").WritableComputedRef<T[K][number]>[];
-/**
- * Creates a computed property that returns whether a specific key of the modelled object (value prop) is undefined or not. If set to true, the provided default value is applied to the key of the modelled object.
- * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {K} key The key of the modelObject that should be return on get and updated on set.
- * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
- * @param {D} valueDefault  The defualt value that is set when `true` is provided to the setter of the computed property.
- * @returns {import('vue').WritableComputedRef<boolean>} A computed ref with a setter and a getter.
- * @template {Object} T
- * @template {string} K
- * @template D
- */
-export function useHasProperty<T extends Object, K extends string, D>(modelObject: () => T, key: K, emit: (arg0: string, arg1: unknown[]) => void, valueDefault: D): import('vue').WritableComputedRef<boolean>;

package/src/components/vector-properties/composables.js

@@ -1,100 +0,0 @@
-import { computed } from 'vue';
-
-/**
- * Creates a computed property with a getter and a setter for a specific primitive object property/key of the modelled object. This composable allows to pass the computed to an v-model of a sub component. The getter returns the value of the key. The setter merges the passed value with the other object properties of the modelled object and emits the whole object as a input event, and only the changed props as an change event.
- * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {K} key The key of the modelObject that should be returned on get and updated on set.
- * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
- * @returns {import('vue').WritableComputedRef<T[K]>} A computed with a getter and a setter.
- * @template {Record<string, unknown>} T
- * @template {string} K
- */
-export function usePrimitiveProperty(modelObject, key, emit) {
-  return computed({
-    get() {
-      return modelObject()[key];
-    },
-    set(value) {
-      if (modelObject()[key] !== value) {
-        const newParams = structuredClone(modelObject());
-        const changedParams = { [key]: value ?? undefined };
-        emit('update:modelValue', Object.assign(newParams, changedParams));
-        emit('propertyChange', changedParams);
-      }
-    },
-  });
-}
-
-/**
- * Creates an object with the entries of the input array as keys and computed properties as values. These have a getter and a setter for a specific entry of the array, that is an object property/key of the modelled object. This composable allows to pass the computeds to an v-model of a sub component. The getter returns the value of the array entry. The setter first merges the passed value with the other array entries, and then with the other object properties of the modelled object and emits the whole object as a input event, and only the changed props as an change event.
- * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {K} key The key of the modelObject that should be returned on get and updated on set.
- * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
- * @param {number} arrayLength The length of the array property.
- * @returns {import('vue').WritableComputedRef<T[K][number]>[]} An object with the provided names as keys and the corresponding computed properties with a getter and a setter.
- * @template {Object} T
- * @template {string} K
- */
-export function useArrayProperty(modelObject, key, emit, arrayLength) {
-  return Array(arrayLength)
-    .fill()
-    .map((entry, index) => {
-      return computed({
-        get() {
-          if (modelObject()?.[key]) {
-            return modelObject()[key][index];
-          } else {
-            return undefined;
-          }
-        },
-        set(value) {
-          const newParams = structuredClone(modelObject());
-          let changedParams;
-          if (!modelObject()?.[key]) {
-            const newArray = Array(arrayLength).fill();
-            newArray[index] = value;
-            changedParams = { [key]: newArray };
-          } else if (modelObject()[key][index] !== value) {
-            const newArray = [...modelObject()[key]];
-            newArray[index] = value;
-            changedParams = { [key]: newArray };
-          }
-
-          if (changedParams) {
-            emit('update:modelValue', Object.assign(newParams, changedParams));
-            emit('propertyChange', changedParams);
-          }
-        },
-      });
-    });
-}
-
-/**
- * Creates a computed property that returns whether a specific key of the modelled object (value prop) is undefined or not. If set to true, the provided default value is applied to the key of the modelled object.
- * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {K} key The key of the modelObject that should be return on get and updated on set.
- * @param {function(string, unknown[]):void} emit The emit function of the component context that is using this composable.
- * @param {D} valueDefault  The defualt value that is set when `true` is provided to the setter of the computed property.
- * @returns {import('vue').WritableComputedRef<boolean>} A computed ref with a setter and a getter.
- * @template {Object} T
- * @template {string} K
- * @template D
- */
-export function useHasProperty(modelObject, key, emit, valueDefault) {
-  return computed({
-    get() {
-      return modelObject()?.[key] !== undefined;
-    },
-    set(value) {
-      const newParams = structuredClone(modelObject());
-      let changedParams;
-      if (value) {
-        changedParams = { [key]: valueDefault };
-      } else {
-        changedParams = { [key]: undefined };
-      }
-      emit('update:modelValue', Object.assign(newParams, changedParams));
-      emit('propertyChange', changedParams);
-    },
-  });
-}

package/src/featureInfo/MarkdownComponent.vue

@@ -1,16 +0,0 @@
-<script setup>
-  defineOptions({});
-
-  defineProps({
-    html: {
-      type: String,
-      required: true,
-    },
-  });
-</script>
-
-<template>
-  <div class="pa-2" v-html="html" />
-</template>
-
-<style scoped lang="scss"></style>

package/src/featureInfo/MarkdownComponent.vue.d.ts

@@ -1,7 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    html: string;
-    $props: {
-        readonly html?: string | undefined;
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;

package/src/styles/_theming.scss

@@ -1,73 +0,0 @@
-.v-application .base {
-  background-color: var(--v-base-base) !important;
-  border-color: var(--v-base-base) !important;
-}
-.v-application .base.lighten-1 {
-  background-color: var(--v-base-lighten1) !important;
-  border-color: var(--v-base-lighten1) !important;
-}
-.v-application .base.lighten-2 {
-  background-color: var(--v-base-lighten2) !important;
-  border-color: var(--v-base-lighten2) !important;
-}
-.v-application .base.lighten-3 {
-  background-color: var(--v-base-lighten3) !important;
-  border-color: var(--v-base-lighten3) !important;
-}
-.v-application .base.lighten-4 {
-  background-color: var(--v-base-lighten4) !important;
-  border-color: var(--v-base-lighten4) !important;
-}
-.v-application .base.darken-1 {
-  background-color: var(--v-base-darken1) !important;
-  border-color: var(--v-base-darken1) !important;
-}
-.v-application .base.darken-2 {
-  background-color: var(--v-base-darken2) !important;
-  border-color: var(--v-base-darken2) !important;
-}
-.v-application .base.darken-3 {
-  background-color: var(--v-base-darken3) !important;
-  border-color: var(--v-base-darken3) !important;
-}
-.v-application .base.darken-4 {
-  background-color: var(--v-base-darken4) !important;
-  border-color: var(--v-base-darken4) !important;
-}
-
-.v-application .base--text {
-  color: var(--v-base-base) !important;
-  caret-color: var(--v-base-base) !important;
-}
-.v-application .base--text.text--lighten-1 {
-  color: var(--v-base-lighten1) !important;
-  caret-color: var(--v-base-lighten1) !important;
-}
-.v-application .base--text.text--lighten-2 {
-  color: var(--v-base-lighten2) !important;
-  caret-color: var(--v-base-lighten2) !important;
-}
-.v-application .base--text.text--lighten-3 {
-  color: var(--v-base-lighten3) !important;
-  caret-color: var(--v-base-lighten3) !important;
-}
-.v-application .base--text.text--lighten-4 {
-  color: var(--v-base-lighten4) !important;
-  caret-color: var(--v-base-lighten4) !important;
-}
-.v-application .base--text.text--darken-1 {
-  color: var(--v-base-darken1) !important;
-  caret-color: var(--v-base-darken1) !important;
-}
-.v-application .base--text.text--darken-2 {
-  color: var(--v-base-darken2) !important;
-  caret-color: var(--v-base-darken2) !important;
-}
-.v-application .base--text.text--darken-3 {
-  color: var(--v-base-darken3) !important;
-  caret-color: var(--v-base-darken3) !important;
-}
-.v-application .base--text.text--darken-4 {
-  color: var(--v-base-darken4) !important;
-  caret-color: var(--v-base-darken4) !important;
-}

package/src/styles/settings.scss

@@ -1,6 +0,0 @@
-// @use 'vuetify';
-@use 'vuetify/settings' with (
-  // $font-size-root: 13px,
-  // $icon-size: 20px,
-  /** Footer **/ // $footer-padding: 0px 0px, // 6px 16px !default;
-);

package/src/styles/shades.scss

@@ -1,4 +0,0 @@
-$shades: (
-  'black': #222222,
-  'white': #ffffff,
-);