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

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;
-      }
-    },
-  };
-}