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

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,70 +0,0 @@
-import { marked } from 'marked';
-import DOMPurify from 'dompurify';
-
-/**
- * @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 {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/VcsListItem.vue.d.ts

@@ -1,27 +0,0 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
-    $props: {
-        readonly [x: string]: any;
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
-    title?(_: {
-        item: any;
-        dragging: any;
-        tooltip: string;
-    }): any;
-    subtitle?(_: {
-        item: any;
-    }): any;
-    default?(_: {
-        item: any;
-        dragging: any;
-        tooltip: string;
-        isActive: boolean;
-        isSelected: boolean;
-        isIndeterminate: boolean;
-        select: (value: boolean) => void;
-    }): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & (new () => {
-    $slots: S;
-});

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/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,
-);

package/src/styles/variables.scss

@@ -1,140 +0,0 @@
-@import 'shades.scss';
-@import 'vcsFont.scss';
-
-/** Global **/
-$font-size: $vcs-font-size;
-$font-size-root: $vcs-font-size;
-
-$material-dark: (
-  'background': map-get($shades, 'black'),
-  'cards': map-get($shades, 'black'),
-  'text-fields': (
-    'outlined': var(--v-base-base),
-    'outlined-hover': var(--v-base-base),
-  ),
-  'input-bottom-line': var(--v-base-base),
-  'dividers': var(--v-base-lighten2),
-  //'toolbar': rgba(map-get($shades, 'black'), 0.8),
-  'table':
-    (
-      'hover': var(--v-base-lighten4),
-    ),
-);
-$material-light: (
-  'text-fields': (
-    'outlined': var(--v-base-base),
-    'outlined-hover': var(--v-base-base),
-  ),
-  'input-bottom-line': var(--v-base-base),
-  'text': (
-    'primary': map-get($shades, 'black'),
-    'disabled': rgba(map-get($shades, 'black'), 0.3),
-  ),
-  'buttons': (
-    'disabled': rgba(map-get($shades, 'black'), 0.5),
-  ),
-  'dividers': var(--v-base-lighten2),
-  //'toolbar': rgba(map-get($shades, 'white'), 0.8),
-  'table':
-    (
-      'hover': var(--v-base-lighten4),
-    ),
-);
-
-// input font and icon
-$input-font-size: $font-size;
-$input-icon-height: 16px; // 24px !default;
-$input-icon-width: 16px; // 24px !default;
-$input-icon-min-width: 16px; // 24px !default;
-$input-icon-font-size: 16px;
-
-/** VcsTextfield **/
-
-// height, size and padding
-$text-field-padding: 2px 0 1px; //8px 0 8px !default;
-$text-field-filled-full-width-outlined-slot-min-height: 32px; // 56px !default;
-$text-field-filled-full-width-outlined-single-line-slot-min-height: 24px; //40px !default;
-$text-field-solo-control-min-height: 30px; //48px !default;
-$text-field-solo-dense-control-min-height: 22px; //38px !default;
-$text-field-outlined-fieldset-border: 1px solid currentColor; // 2px solid currentColor !default;
-
-// dense non outlined
-$text-field-dense-padding: 2px 0 1px; //4px 0 2px !default;
-
-// clear icon non dense
-$text-field-enclosed-prepend-append-margin-top: 9px;
-
-// tooltip icon in append slot
-$text-field-outlined-append-prepend-outer-margin-top: 4px; // 18px !default;
-$text-field-append-prepend-margin: 0; // 4px !default;
-$text-field-outlined-prepend-append-margin-top: 4px; // 8px !default;
-
-// label position for outlined Label dense and non-dense
-$text-field-outlined-label-position-x: 6px;
-$text-field-outlined-label-position-y: -14px;
-$text-field-outlined-dense-label-position-x: 2px;
-$text-field-outlined-dense-label-position-y: -10px;
-$label-font-size: $font-size; // 1rem !default;
-$text-field-label-top: 2px; // 6px !default;
-$text-field-label-active-transform: translateY(-14px) scale(0.75); //translateY(-18px) scale(.75) !default;
-
-/** VcsTextarea **/
-$textarea-box-enclosed-single-outlined-margin-top: 0; // 10px !default;
-$textarea-dense-box-enclosed-single-outlined-margin-top: 0; // 6px !default;
-
-/** VcsCheckbox **/
-$icon-size: 20px; // 24px !default;
-$icon-size-dense: 16px; // 20px !default;
-
-/** VcsSelect **/
-$select-dense-selections-margin: 4px 4px 3px 0; // 5px 4px 3px 0 !default;
-
-// list box
-$list-padding: 0 0; // 8px 0 !default;
-$list-item-title-font-size: $font-size; // map-deep-get($headings, 'subtitle-1', 'size') !default;
-$list-item-dense-title-font-size: $font-size; // 0.8125rem !default;
-$list-item-dense-title-line-height: 24px; // 1rem !default;
-$list-item-title-subtitle-line-height: 24px; // 1.2 !default;
-$list-dense-subheader-height: 32px; // 40px !default;
-$list-item-min-height: 32px; // 48px !default;
-$list-dense-min-height: 24px; // 40px !default;
-$list-item-content-padding: 4px 0; // 12px 0 !default;
-$list-dense-content-padding: 0 0; // 8px 0 !default;
-$list-item-action-icon-margin: 0; //32px !default;
-$list-item-action-margin: 0 0; // 12px 0 !default;
-$list-item-icon-margin: auto 0; // 16px 0 !default;
-$list-item-content-children-margin-bottom: 0; // 2px !default;
-
-/** Treeview **/
-$treeview-node-level-width: 16px;
-$treeview-node-margin: 4px;
-$treeview-node-height: 32px; // 48px !default;
-
-/** Expansion Panel **/
-$expansion-panel-header-min-height: 32px; // 48px !default;
-$expansion-panel-active-header-min-height: 32px; // 64px !default;
-$expansion-panel-header-padding: 6px 0; // 16px 24px !default;
-$expansion-panel-content-padding: 0 0 4px; // 0 24px 16px !default;
-
-/** Footer **/
-$footer-padding: 0 8px; // 6px 16px !default;
-
-/** Wizard **/
-$stepper-vertical-padding-bottom: 16px; // 36px !default;
-$stepper-vertical-step-padding: 12px 8px;
-$stepper-vertical-content-ltr-margin: -14px 0 -14px 13px; // -8px -36px -16px 36px !default;
-$stepper-vertical-content-ltr-padding: 16px 8px 16px 16px; // 16px 23px 16px 60px !default;
-$stepper-vertical-step-step-margin: 8px;
-$stepper-step-step-min-width: 12px;
-$stepper-step-step-width: 12px;
-$stepper-step-step-height: 12px;
-
-/** Snackbar **/
-$snackbar-bottom: 36px;
-$snackbar-background-color: rgba(0, 0, 0, 0.8);
-$snackbar-content-padding: 8px;
-$snackbar-action-margin: 8px;
-$snackbar-wrapper-min-height: 36px;
-
-/** Datatable **/
-$data-table-regular-row-font-size: $font-size;

package/src/styles/vcsFont.scss

@@ -1,2 +0,0 @@
-// fontSize
-$vcs-font-size: 13px;

package/src/styles/vcsGrid.scss

@@ -1,3 +0,0 @@
-// fonts
-$line-height-base: 40px; // header lines
-$line-height-dense: 32px; // rows in form field