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

package/plugins/@vcmap-show-case/theme-changer/README.md

@@ -1,23 +0,0 @@
-# VC Map Plugin Theme Changer
-
-This is a plugin to manage themes of the VC Map.
-This plugin provides 4 themes:
-
-- VCS Theme (defined by `@vcmap/ui`)
-- Theme 1
-- Theme 2
-- Theme 3
-
-Per config custom themes can be added.
-
-## configuration
-
-You can override the themes array by defining your own themes. A theme must provide:
-
-### VcMapTheme
-
-| Property | Type         | Description            |
-| -------- | ------------ | ---------------------- |
-| name     | string       | name of the theme      |
-| dark     | VuetifyTheme | dark theme definition  |
-| light    | VuetifyTheme | light theme definition |

package/plugins/@vcmap-show-case/theme-changer/config.json

@@ -1,69 +0,0 @@
-{
-  "name": "@vcmap-show-case/theme-changer",
-  "entry": "plugins/@vcmap-show-case/theme-changer/index.js",
-  "themes": [
-    {
-      "name": "Theme 1",
-      "dark": {
-        "primary": "#21CFF3",
-        "accent": "#FF4081",
-        "secondary": "#21dc79",
-        "success": "#86af3f",
-        "info": "#f34fc6",
-        "warning": "#FB8C00",
-        "error": "#FF5252"
-      },
-      "light": {
-        "primary": "#22daff",
-        "accent": "#ff6b99",
-        "secondary": "#26ff8c",
-        "success": "#a5d64c",
-        "info": "#ff53d0",
-        "warning": "#ff8e00",
-        "error": "#ff5252"
-      }
-    },
-    {
-      "name": "Theme 2",
-      "dark": {
-        "primary": "#E65100",
-        "accent": "#7CB342",
-        "secondary": "#689F38",
-        "success": "#4CAF50",
-        "info": "#6156d8",
-        "warning": "#1565C0",
-        "error": "#FF7043"
-      },
-      "light": {
-        "primary": "#ffa450",
-        "accent": "#a1e754",
-        "secondary": "#92de4e",
-        "success": "#6dff74",
-        "info": "#7365ff",
-        "warning": "#2e8ac0",
-        "error": "#ff5e3c"
-      }
-    },
-    {
-      "name": "Theme 3",
-      "dark": {
-        "primary": "#33691E",
-        "accent": "#FFCA28",
-        "secondary": "#607D8B",
-        "success": "#FFEB3B",
-        "info": "#2196F3",
-        "warning": "#9C27B0",
-        "error": "#B71C1C"
-      },
-      "light": {
-        "primary": "#6ae240",
-        "accent": "#ffe063",
-        "secondary": "#7ea4b6",
-        "success": "#ffea70",
-        "info": "#229eff",
-        "warning": "#e239ff",
-        "error": "#e82424"
-      }
-    }
-  ]
-}

package/plugins/@vcmap-show-case/theme-changer/package.json

@@ -1,11 +0,0 @@
-{
-  "name": "@vcmap-show-case/theme-changer",
-  "version": "1.0.0",
-  "mapVersion": "^5.0.0",
-  "dependencies": {
-    "@vcsuite/check": "^1.1.2"
-  },
-  "peerDependencies": {
-    "@vcmap/ui": "^5.0.0-rc.2"
-  }
-}

package/plugins/@vcmap-show-case/theme-changer/src/ThemeChangerComponent.vue

@@ -1,120 +0,0 @@
-<template>
-  <v-card>
-    <v-list-item>
-      <v-list-item-content>
-        <v-list-item-title class="font-weight-bold">
-          Dark Mode
-        </v-list-item-title>
-      </v-list-item-content>
-      <v-list-item-action>
-        <v-switch v-model="$vuetify.theme.dark" />
-      </v-list-item-action>
-    </v-list-item>
-    <v-divider />
-    <v-card-text>
-      <v-card
-        class="my-2"
-        :disabled="state.selected.value === theme.name"
-        @click="setTheme(theme)"
-        hover
-        outlined
-        v-for="(theme, index) in config.themes.value"
-        :key="index"
-      >
-        <v-list-item>
-          <v-list-item-content>
-            <v-list-item-title class="font-weight-bold">
-              {{ theme.name }}
-            </v-list-item-title>
-          </v-list-item-content>
-          <v-list-item-action>
-            <v-avatar
-              color="success"
-              size="30"
-              v-if="state.selected.value === theme.name"
-            >
-              <v-icon>mdi-check</v-icon>
-            </v-avatar>
-          </v-list-item-action>
-        </v-list-item>
-        <v-card class="my-1 ma-1 py-1 white">
-          <h2>light</h2>
-          <v-chip
-            class="mx-1"
-            label
-            :color="theme.light[key]?.base || theme.light[key]"
-            v-for="(key, lightIdx) in Object.keys(theme.light)"
-            :key="lightIdx"
-          >
-            {{ key }}
-          </v-chip>
-        </v-card>
-        <v-card class="my-1 ma-1 py-1 black">
-          <h2 class="white--text">dark</h2>
-          <v-chip
-            class="mx-1"
-            label
-            :color="theme.dark[key]?.base || theme.dark[key]"
-            v-for="(key, darkIdx) in Object.keys(theme.dark)"
-            :key="darkIdx"
-          >
-            {{ key }}
-          </v-chip>
-        </v-card>
-      </v-card>
-    </v-card-text>
-  </v-card>
-</template>
-<script>
-  import { inject } from 'vue';
-  import {
-    VCard,
-    VCardText,
-    VChip,
-    VListItem,
-    // VListItemContent,
-    VListItemTitle,
-    VListItemAction,
-    VAvatar,
-    VIcon,
-    VDivider,
-    VSwitch,
-  } from 'vuetify/components';
-
-  export default {
-    name: 'ThemeChanger',
-    components: {
-      VCard,
-      VCardText,
-      VChip,
-      VListItem,
-      // VListItemContent,
-      VListItemTitle,
-      VListItemAction,
-      VAvatar,
-      VIcon,
-      VDivider,
-      VSwitch,
-    },
-    setup() {
-      const app = inject('vcsApp');
-      const plugin = app.plugins.getByKey('@vcmap-show-case/theme-changer');
-
-      function setTheme(theme) {
-        const { name, dark, light } = theme;
-        Object.keys(dark).forEach((i) => {
-          this.$vuetify.theme.themes.dark[i] = dark[i];
-        });
-        Object.keys(light).forEach((i) => {
-          this.$vuetify.theme.themes.light[i] = light[i];
-        });
-        plugin.state.selected.value = name;
-      }
-      return {
-        state: plugin.state,
-        config: plugin.config,
-        setTheme,
-      };
-    },
-  };
-</script>

package/plugins/@vcmap-show-case/theme-changer/src/index.js

@@ -1,108 +0,0 @@
-import { ref } from 'vue';
-import { check } from '@vcsuite/check';
-import { ButtonLocation, createToggleAction, createVcsThemes } from '@vcmap/ui';
-import ThemeChangerComponent from './ThemeChangerComponent.vue';
-import packageJSON from '../package.json';
-import defaultConfig from '../config.json';
-
-/**
- * @typedef {Object} VuetifyTheme
- * @property {string} primary
- * @property {string} secondary
- * @property {string} accent
- * @property {string} error
- * @property {string} info
- * @property {string} success
- * @property {string} warning
- */
-
-/**
- * @typedef {Object} VcMapTheme
- * @property {string} name
- * @property {VuetifyTheme} light
- * @property {VuetifyTheme} dark
- */
-
-/**
- * @param {Object} config
- * @returns {VcsPlugin}
- */
-export default async function themeChanger(config) {
-  /** @type {VcMapTheme} */
-  const vcsTheme = {
-    name: 'VCS Theme',
-    ...createVcsThemes(),
-  };
-  const customThemes = config.themes || defaultConfig.themes;
-  const availableThemes = [vcsTheme, ...customThemes];
-
-  const pluginConfig = {
-    themes: ref(/** @type {Array<VcMapTheme>} */ []),
-  };
-
-  const pluginState = {
-    selected: ref(vcsTheme.name),
-  };
-
-  /**
-   * @param {VcMapTheme} theme
-   */
-  function addTheme(theme) {
-    check(theme.name, String);
-    check(theme.light, Object);
-    check(theme.dark, Object);
-    pluginConfig.themes.value.push(theme);
-  }
-  availableThemes.forEach((t) => addTheme(t));
-
-  return {
-    get name() {
-      return packageJSON.name;
-    },
-    get version() {
-      return packageJSON.version;
-    },
-    get mapVersion() {
-      return packageJSON.mapVersion;
-    },
-    config: pluginConfig,
-    state: pluginState,
-    addTheme,
-    onVcsAppMounted(app) {
-      const { action, destroy } = createToggleAction(
-        {
-          name: 'Theme Changer',
-          icon: 'mdi-palette',
-        },
-        {
-          id: 'theme-changer',
-          component: ThemeChangerComponent,
-          position: {
-            left: '60%',
-            right: '0%',
-            top: '5%',
-            bottom: '50%',
-          },
-          state: {
-            headerTitle: 'Theme Changer',
-            headerIcon: 'mdi-palette',
-          },
-        },
-        app.windowManager,
-        packageJSON.name,
-      );
-      app.navbarManager.add(
-        { id: 'theme-changer', action },
-        packageJSON.name,
-        ButtonLocation.MENU,
-      );
-      this._destroyAction = destroy;
-    },
-    destroy() {
-      if (this._destroyAction) {
-        this._destroyAction();
-        this._destroyAction = null;
-      }
-    },
-  };
-}

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/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"
-      v-if="tooltip"
-      :text="$st(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>