@vcmap/ui 5.0.0-rc.9 → 5.0.1

package/plugins/@vcmap-show-case/table-example/src/DataTableExample.vue

@@ -0,0 +1,187 @@
+<template>
+  <v-sheet>
+    <v-sheet class="px-2 d-grid">
+      <v-switch v-model="selectable" label="Selectable" class="ma-0" />
+      <v-switch
+        :disabled="!selectable"
+        v-model="selectSingle"
+        label=" Single Select"
+        class="ma-0"
+      />
+      <v-switch v-model="searchable" label="Searchable" class="ma-0" />
+      <v-dialog v-model="dialog" width="400">
+        <template #activator="{ on }">
+          <vcs-form-button v-on="on"> Add An item </vcs-form-button>
+        </template>
+        <v-card class="pa-2">
+          <v-form @submit.prevent="add">
+            <vcs-text-field
+              v-model="newItem.name"
+              label="Name"
+              :rules="required"
+            />
+            <vcs-text-field
+              v-model="newItem.type"
+              label="type"
+              :rules="required"
+            />
+            <vcs-text-field v-model="newItem.date" type="date" label="date" />
+            <vcs-checkbox label="disabled" v-model="newItem.disabled" />
+            <vcs-form-button type="submit" variant="filled">
+              Add
+            </vcs-form-button>
+          </v-form>
+        </v-card>
+      </v-dialog>
+    </v-sheet>
+
+    <vcs-data-table
+      :items="items"
+      item-key="id"
+      :headers="headers"
+      :show-select="selectable"
+      :single-select="selectSingle"
+      :show-searchbar="searchable"
+      v-model="selected"
+    >
+      <!-- eslint-disable-next-line -->
+      <template v-slot:item.actions="{ item }">
+        <VcsActionButtonList
+          v-if="item.actions"
+          :actions="item.actions"
+          :block-overflow="true"
+          :overflow-count="2"
+        />
+      </template>
+    </vcs-data-table>
+  </v-sheet>
+</template>
+
+<script>
+  import {
+    VcsDataTable,
+    VcsFormButton,
+    VcsTextField,
+    VcsCheckbox,
+    VcsActionButtonList,
+  } from '@vcmap/ui';
+  import { VSwitch, VSheet, VDialog, VCard, VForm } from 'vuetify/lib';
+  import { ref } from 'vue';
+
+  const defaultHeaders = [
+    {
+      text: 'Name',
+      value: 'name',
+    },
+    {
+      text: 'Type',
+      value: 'type',
+    },
+    {
+      text: 'Datum',
+      value: 'date',
+      sort: (a, b) => new Date(b) - new Date(a),
+    },
+    { text: 'Actions', value: 'actions', sortable: false },
+  ];
+
+  const defaultItems = [
+    {
+      id: 0,
+      name: 'foo',
+      type: 'Foo',
+      date: '8/3/2023 9:24',
+      actions: [
+        {
+          name: 'console.log',
+          icon: 'mdi-printer',
+          callback() {
+            console.log('foo action');
+          },
+        },
+      ],
+    },
+    {
+      id: 1,
+      name: 'bar',
+      type: 'Bar',
+      date: '1/8/2022 19:54',
+    },
+    {
+      id: 2,
+      name: 'baz',
+      type: 'Baz',
+      date: '11/2/2012 14:03',
+    },
+  ];
+
+  export default {
+    name: 'DataTableExample',
+    components: {
+      VcsDataTable,
+      VcsFormButton,
+      VcsTextField,
+      VcsCheckbox,
+      VcsActionButtonList,
+      VSwitch,
+      VSheet,
+      VDialog,
+      VCard,
+      VForm,
+    },
+    setup() {
+      const selectable = ref(true);
+      const searchable = ref(true);
+      const selectSingle = ref(false);
+      const selected = ref([]);
+      const items = ref(defaultItems);
+      const headers = ref(defaultHeaders);
+      const newItem = ref({
+        name: 'foo',
+        type: 'foo',
+        date: new Date(),
+        disabled: false,
+      });
+      const dialog = ref(false);
+
+      return {
+        selectable,
+        searchable,
+        selectSingle,
+        selected,
+        items,
+        headers,
+        newItem,
+        dialog,
+        required: [
+          (v) => !!v || 'Input may not be null',
+          (v) => v.length > 0 || 'Input must have a length',
+        ],
+        add() {
+          const item = {
+            name: newItem.value.name,
+            type: newItem.value.type,
+            date: newItem.value.date,
+            disabled: newItem.value.disabled,
+            id: items.value.length,
+          };
+
+          items.value.push(item);
+          newItem.value = {
+            name: 'foo',
+            type: 'foo',
+            date: new Date(),
+          };
+          dialog.value = false;
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .d-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+</style>

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

@@ -0,0 +1,49 @@
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import DataTableExample from './DataTableExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function iconsExample() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Table Example',
+          title: 'Table Example Plugin',
+        },
+        {
+          id: 'table-example',
+          component: DataTableExample,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          state: {
+            headerTitle: 'Table Example',
+          },
+          position: {
+            width: 500,
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add({ action }, packageJSON.name, ButtonLocation.TOOL);
+      this._destroyAction = destroy;
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}

package/plugins/@vcmap-show-case/textfields-example/README.md

@@ -0,0 +1,3 @@
+# Textfields Example
+
+This is a show-case plugin demonstrating the usage of textfields in a grid.

package/plugins/@vcmap-show-case/textfields-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/textfields-example",
+  "version": "1.0.0",
+  "mapVersion": "^5.0.0"
+}

package/plugins/{example/mySuperComponent.vue → @vcmap-show-case/textfields-example/src/TextfieldsExample.vue}

@@ -1,10 +1,7 @@
 <template>
   <v-sheet style="height: 100%">
     <v-container class="pa-2">
-      <v-row
-        dense
-        align="center"
-      >
+      <v-row dense>
         <v-col>
           <label> test</label>
         </v-col>
@@ -12,9 +9,7 @@
           <v-text-field hide-details dense outlined />
         </v-col>
       </v-row>
-      <v-row
-        dense
-      >
+      <v-row dense>
         <v-col>
           <v-text-field dense hide-details outlined class="ma-0" />
         </v-col>
@@ -28,32 +23,21 @@
           <v-text-field label="test" dense hide-details class="ma-0" />
         </v-col>
       </v-row>
-      <v-row
-        dense
-      >
+      <v-row dense>
         <v-col>
           <v-text-field hide-details outlined />
         </v-col>
         <v-col>
-          <v-text-field
-            hide-details
-            class="ma-0 pb-1 pt-1"
-          />
+          <v-text-field hide-details class="ma-0 pb-1 pt-1" />
         </v-col>
         <v-col>
           <v-text-field label="test" hide-details outlined />
         </v-col>
         <v-col>
-          <v-text-field
-            label="test"
-            hide-details
-            class="ma-0 pb-1 pt-1"
-          />
+          <v-text-field label="test" hide-details class="ma-0 pb-1 pt-1" />
         </v-col>
       </v-row>
-      <v-row
-        dense
-      >
+      <v-row dense>
         <v-col>
           <v-text-field
             dense
@@ -98,20 +82,19 @@
         </v-col>
       </v-row>
     </v-container>
-    <button
-      @click="outlined = !outlined"
-    >
-      test
-    </button>
   </v-sheet>
 </template>
 <script>
-
-  import Vue from 'vue';
+  import { VSheet, VContainer, VRow, VCol, VTextField } from 'vuetify/lib';
 
   export default {
-    name: 'MySuperComponent',
+    name: 'TextfieldsExample',
     components: {
+      VSheet,
+      VContainer,
+      VRow,
+      VCol,
+      VTextField,
     },
     data() {
       return {
@@ -119,7 +102,6 @@
         hover2: false,
         hover3: false,
         hover4: false,
-        outlined: false,
         email: 'test',
       };
     },

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

@@ -0,0 +1,64 @@
+/* eslint-disable no-console */
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import mySuperComponent from './TextfieldsExample.vue';
+
+/**
+ *
+ * @param {FormInputsExampleConfig} config
+ * @returns {VcsPlugin}
+ */
+export default async function textfieldsExample(config) {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    initialize(app) {
+      console.log('initialize', app, config);
+    },
+    onVcsAppMounted(app) {
+      console.log('onVcsAppMounted', app, config);
+      // XXX supportedMaps: ['vcs.vcm.maps.Openlayers', 'vcs.vcm.maps.Cesium'],
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Textfields Example',
+          icon: '$vcsPen',
+        },
+        {
+          id: '228',
+          component: mySuperComponent,
+          slot: WindowSlot.DETACHED,
+          state: {
+            headerTitle: 'Textfields Example',
+            headerIcon: '$vcsPen',
+          },
+          position: {
+            width: 1200,
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      this._destroyAction = destroy;
+      app.navbarManager.add(
+        {
+          action,
+        },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}

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

@@ -2,6 +2,7 @@
 
 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
@@ -14,8 +15,9 @@ Per config custom themes can be added.
 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      |
+
+| 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

@@ -0,0 +1,69 @@
+{
+  "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

@@ -0,0 +1,11 @@
+{
+  "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/theme-changer → @vcmap-show-case/theme-changer/src}/ThemeChangerComponent.vue

@@ -38,23 +38,25 @@
           </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.dark[key]"
-            v-for="(key, index) in Object.keys(theme.dark)"
-            :key="index"
+            :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.light[key]"
-            v-for="(key, index) in Object.keys(theme.light)"
-            :key="index"
+            :color="theme.dark[key]?.base || theme.dark[key]"
+            v-for="(key, darkIdx) in Object.keys(theme.dark)"
+            :key="darkIdx"
           >
             {{ key }}
           </v-chip>
@@ -64,13 +66,39 @@
   </v-card>
 </template>
 <script>
-  import { inject } from '@vue/composition-api';
+  import { inject } from 'vue';
+  import {
+    VCard,
+    VCardText,
+    VChip,
+    VListItem,
+    VListItemContent,
+    VListItemTitle,
+    VListItemAction,
+    VAvatar,
+    VIcon,
+    VDivider,
+    VSwitch,
+  } from 'vuetify/lib';
 
   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/theme-changer');
+      const plugin = app.plugins.getByKey('@vcmap-show-case/theme-changer');
 
       function setTheme(theme) {
         const { name, dark, light } = theme;

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

@@ -1,9 +1,9 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { check } from '@vcsuite/check';
 import { ButtonLocation, createToggleAction, vuetify } from '@vcmap/ui';
 import ThemeChangerComponent from './ThemeChangerComponent.vue';
-import packageJSON from './package.json';
-import defaultConfig from './config.json';
+import packageJSON from '../package.json';
+import defaultConfig from '../config.json';
 
 /**
  * @typedef {Object} VuetifyTheme
@@ -37,7 +37,7 @@ export default async function themeChanger(config) {
   const availableThemes = [vcsTheme, ...customThemes];
 
   const pluginConfig = {
-    themes: ref(/** @type {Array<VcMapTheme> */[]),
+    themes: ref(/** @type {Array<VcMapTheme>} */ []),
   };
 
   const pluginState = {
@@ -53,12 +53,18 @@ export default async function themeChanger(config) {
     check(theme.dark, Object);
     pluginConfig.themes.value.push(theme);
   }
-  availableThemes.forEach(t => addTheme(t));
+  availableThemes.forEach((t) => addTheme(t));
 
   return {
-    get name() { return packageJSON.name; },
-    get version() { return packageJSON.version; },
-    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
     config: pluginConfig,
     state: pluginState,
     addTheme,

package/plugins/@vcmap-show-case/vector-properties-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/vector-properties-example",
+  "version": "1.0.0",
+  "mapVersion": "^5.0.0"
+}