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

package/plugins/@vcmap-show-case/theming-example/src/ThemingExample.vue

@@ -0,0 +1,116 @@
+<template>
+  <VCard>
+    <VcsFormSection heading="Colors" expandable start-open>
+      <v-container class="px-1 py-0">
+        <v-row
+          v-for="key in Object.keys(currentTheme.colors)"
+          :key="key"
+          no-gutters
+        >
+          <v-col>
+            <VcsLabel>{{ key }}</VcsLabel>
+          </v-col>
+          <v-col>
+            <VcsTextField
+              v-model="currentTheme.colors[key]"
+              :bg-color="currentTheme.colors[key]"
+            ></VcsTextField>
+          </v-col>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+    <VcsFormSection heading="Variables" expandable start-open>
+      <v-container class="px-1 py-0">
+        <v-row
+          no-gutters
+          v-for="key in Object.keys(currentTheme.variables)"
+          :key="key"
+        >
+          <v-col>
+            <VcsLabel>{{ key }}</VcsLabel>
+          </v-col>
+          <v-col>
+            <VcsTextField v-model="currentTheme.variables[key]"></VcsTextField>
+          </v-col>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+    <v-container class="px-1 py-0">
+      <VcsFormButton @click="reset"> Reset default </VcsFormButton>
+    </v-container>
+  </VCard>
+</template>
+
+<script>
+  import {
+    createVcsThemes,
+    VcsTextField,
+    VcsLabel,
+    VcsFormSection,
+    VcsFormButton,
+    isDark,
+  } from '@vcmap/ui';
+  import {
+    watch,
+    inject,
+    ref,
+    computed,
+    toRaw,
+    onMounted,
+    onUnmounted,
+  } from 'vue';
+  import { VCard, VCol, VRow, VContainer } from 'vuetify/components';
+
+  export default {
+    name: 'ThemingExample',
+    components: {
+      VcsLabel,
+      VcsFormSection,
+      VcsFormButton,
+      VcsTextField,
+      VContainer,
+      VCard,
+      VRow,
+      VCol,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const theming = ref(createVcsThemes());
+      const currentTheme = computed(() => {
+        if (isDark(app)) {
+          return theming.value.dark;
+        } else {
+          return theming.value.light;
+        }
+      });
+      onMounted(() => {
+        app.uiConfig.override({
+          name: 'vuetifyTheme',
+          value: toRaw(theming.value),
+        });
+      });
+      onUnmounted(() => {
+        app.uiConfig.remove(app.uiConfig.getByKey('vuetifyTheme'));
+      });
+      watch(
+        () => theming.value,
+        () => {
+          app.uiConfig.replace({
+            name: 'vuetifyTheme',
+            value: toRaw(theming.value),
+          });
+        },
+        { deep: true },
+      );
+      return {
+        reset: () => {
+          theming.value = createVcsThemes();
+        },
+        theming,
+        currentTheme,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/plugins/@vcmap-show-case/theming-example/src/index.js

@@ -0,0 +1,53 @@
+import { createToggleAction, ButtonLocation, WindowSlot } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import ThemingExample from './ThemingExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async () => {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Theming Example',
+          icon: '$vcsWand',
+          title: 'Theming Example Plugin',
+        },
+        {
+          id: 'theming-example',
+          component: ThemingExample,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          state: {
+            headerTitle: 'Theming Example',
+            headerIcon: '$vcsWand',
+            styles: { width: '350px', height: 'auto' },
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add(
+        { id: 'theming-example', action },
+        packageJSON.name,
+        ButtonLocation.MENU,
+      );
+      this._destroyAction = destroy;
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+};

package/plugins/@vcmap-show-case/toolbox-example/src/index.js

@@ -227,7 +227,8 @@ export default async function toolboxExample() {
       this._stopWatching = watch(
         () => disabled.value,
         () => {
-          selectToolboxAction.disabled = disabled.value;
+          app.toolboxManager.get(selectToolboxComponent.id).action.disabled =
+            disabled.value;
           app.toolboxManager.get(
             groupToolboxComponentExampleOptions.id,
           ).disabled = disabled.value;

package/plugins/package.json

@@ -1,27 +1,11 @@
 {
   "dependencies": {
-    "@vcmap/print": "^1.0.2",
-    "@vcmap/swipe-tool": "^1.0.3",
-    "@vcmap/export": "^1.0.1",
-    "@vcmap/shadow": "^2.0.0",
-    "@vcmap/draw": "^2.0.0",
-    "@vcmap/create-link": "^1.0.1",
-    "@vcmap/search-nominatim": "^1.0.1",
-    "@vcmap/multi-view": "^1.1.0",
-    "@vcmap/cesium-filters": "^1.0.1",
-    "@vcmap/viewshed": "^2.0.1",
-    "@vcmap/measurement": "^1.0.2",
-    "@vcmap/flight": "^1.1.0",
-    "@vcmap/transparent-terrain": "^1.0.1",
-    "@vcmap/search-coordinate": "^1.0.0",
-    "@vcmap/clipping-tool": "^1.0.0",
-    "@vcmap/height-profile": "^1.0.0",
-    "@vcmap/search-wfs": "^1.0.0",
-    "@vcmap/search-esri": "^1.0.0",
-    "@vcmap/link-button": "^1.0.0",
-    "@vcmap/walk": "^1.0.2"
-  },
-  "optionalDependencies": {
-    "@vcmap/planning": "^5.2.0"
+    "@vcmap/print": "https://github.com/virtualcitySYSTEMS/map-print.git#main",
+    "@vcmap/multi-view": "https://github.com/virtualcitySYSTEMS/map-multi-view.git",
+    "@vcmap/transparent-terrain": "https://github.com/virtualcitySYSTEMS/map-transparent-terrain.git",
+    "@vcmap/walk": "https://github.com/virtualcitySYSTEMS/map-walk.git#main",
+    "@vcmap/clipping-tool": "https://github.com/virtualcitySYSTEMS/map-clipping-tool.git#main",
+    "@vcmap/viewshed": "https://github.com/virtualcitySYSTEMS/map-viewshed.git#main",
+    "@vcmap/link-button": "https://github.com/virtualcitySYSTEMS/map-link-button.git#main"
   }
 }