@vcmap/ui 5.0.0-rc.14 → 5.0.0-rc.16

package/plugins/buttonExamples/ButtonExamples.vue

@@ -172,10 +172,37 @@
 <script>
   import { VcsButton, VcsActionButtonList } from '@vcmap/ui';
   import { ref } from 'vue';
+  import {
+    VCard,
+    VListItem,
+    VListItemContent,
+    VListItemTitle,
+    VListItemAction,
+    VSwitch,
+    VDivider,
+    VRow,
+    VCol,
+    VCardTitle,
+    VCardActions,
+  } from 'vuetify/lib';
 
   export default {
     name: 'ButtonExamples',
-    components: { VcsButton, VcsActionButtonList },
+    components: {
+      VcsButton,
+      VcsActionButtonList,
+      VCard,
+      VListItem,
+      VListItemContent,
+      VListItemTitle,
+      VListItemAction,
+      VSwitch,
+      VDivider,
+      VRow,
+      VCol,
+      VCardTitle,
+      VCardActions,
+    },
     setup() {
       const active = ref(false);
       const disabled = ref(false);

package/plugins/categoryTest/Categories.vue

@@ -60,6 +60,15 @@
   import { inject, ref, onUnmounted } from 'vue';
   import { VcsButton } from '@vcmap/ui';
   import { GeoJSONLayer } from '@vcmap/core';
+  import {
+    VDialog,
+    VCard,
+    VForm,
+    VSelect,
+    VTextField,
+    VBtn,
+    VTextarea,
+  } from 'vuetify/lib';
   import Category from './Category.vue';
 
   export default {
@@ -67,6 +76,13 @@
     components: {
       Category,
       VcsButton,
+      VDialog,
+      VCard,
+      VForm,
+      VSelect,
+      VTextField,
+      VBtn,
+      VTextarea,
     },
     setup() {
       const app = inject('vcsApp');

package/plugins/categoryTest/Category.vue

@@ -7,7 +7,7 @@
       <span class="float-right">
         <vcs-button icon="$vcsPlus" @click="dialog = true" />
         <vcs-button icon="mdi-download" @click="download" />
-        <a :href="downloadLink" target="_blank" ref="link" download="category.json"/>
+        <a :href="downloadLink" target="_blank" ref="link" download="category.json" />
       </span>
     </span>
 
@@ -26,7 +26,9 @@
           class="mb-1"
         >
           <v-list-item-content>
-            <v-list-item-title class="subtitle-1" >{{ item.name }}</v-list-item-title>
+            <v-list-item-title class="subtitle-1">
+              {{ item.name }}
+            </v-list-item-title>
             <v-list-item-subtitle>{{ item.type }}</v-list-item-subtitle>
           </v-list-item-content>
         </v-list-item>
@@ -40,7 +42,9 @@
           @submit.prevent="addItem"
         >
           <v-textarea v-model="jsonString" />
-          <v-btn type="submit">Add</v-btn>
+          <v-btn type="submit">
+            Add
+          </v-btn>
         </v-form>
       </v-card>
     </v-dialog>
@@ -51,10 +55,32 @@
   import { inject, nextTick, ref } from 'vue';
   import { VcsButton } from '@vcmap/ui';
   import { getObjectFromClassRegistry } from '@vcmap/core';
+  import {
+    VVirtualScroll,
+    VListItem,
+    VListItemContent,
+    VListItemTitle,
+    VListItemSubtitle,
+    VDialog,
+    VCard,
+    VForm,
+    VTextarea,
+  } from 'vuetify/lib';
 
   export default {
     name: 'CategoryComponent',
-    components: { VcsButton },
+    components: {
+      VcsButton,
+      VVirtualScroll,
+      VListItem,
+      VListItemContent,
+      VListItemTitle,
+      VListItemSubtitle,
+      VDialog,
+      VCard,
+      VForm,
+      VTextarea,
+    },
     props: {
       categoryName: {
         type: String,

package/plugins/example/mySuperComponent.vue

@@ -107,11 +107,22 @@
 </template>
 <script>
 
-  import Vue from 'vue';
+  import {
+    VSheet,
+    VContainer,
+    VRow,
+    VCol,
+    VTextField,
+  } from 'vuetify/lib';
 
   export default {
     name: 'MySuperComponent',
     components: {
+      VSheet,
+      VContainer,
+      VRow,
+      VCol,
+      VTextField,
     },
     data() {
       return {

package/plugins/notifier/index.js

@@ -0,0 +1,31 @@
+import { WindowSlot, createToggleAction, ButtonLocation } from '@vcmap/ui';
+import component from './notifierTester.vue';
+
+export default function createNotifierPlugin() {
+  return {
+    name: 'notifier',
+    initialize(vcsApp) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Notifier',
+        },
+        {
+          id: 'notifier-editor',
+          state: {
+            headerTitle: 'Notifier Editor',
+          },
+          component,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        vcsApp.windowManager,
+        'notifier',
+      );
+      vcsApp.navbarManager.add(
+        { id: 'notifier', action },
+        'notifier',
+        ButtonLocation.TOOL,
+      );
+      this.destroy = destroy;
+    },
+  };
+}

package/plugins/notifier/notifierTester.vue

@@ -0,0 +1,88 @@
+<template>
+  <v-sheet>
+    <v-text-field
+      v-model="message"
+      label="Message"
+    />
+    <v-text-field
+      v-model.number=timeout
+      label="Timeout"
+    />
+    <VcsCheckbox
+      v-model="hasTimeout"
+      label="Toggle Timeout"
+    />
+    <v-list>
+      <v-list-item
+        v-for="type in types"
+        :key="type"
+      >
+        {{ type }}
+        <v-list-item-action @click="notify(type)">
+          <v-icon>mdi-plus</v-icon>
+        </v-list-item-action>
+      </v-list-item>
+    </v-list>
+    <v-divider />
+    <v-card>
+      Current number of notifications: {{ notifications.length }}
+    </v-card>
+  </v-sheet>
+</template>
+
+<script>
+  import { VSheet, VList, VListItem, VListItemAction, VTextField, VIcon, VCard, VDivider } from 'vuetify/lib';
+  import { NotificationType, VcsCheckbox } from '@vcmap/ui';
+  import { computed, inject, ref } from 'vue';
+
+  export default {
+    name: 'NotifierTester',
+    components: {
+      VSheet,
+      VList,
+      VListItem,
+      VListItemAction,
+      VTextField,
+      VIcon,
+      VCard,
+      VDivider,
+      VcsCheckbox,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const message = ref('Message');
+      const timeout = ref(5000);
+
+      return {
+        types: NotificationType,
+        message,
+        notify(type) {
+          app.notifier.add({
+            type,
+            message: message.value,
+            timeout: timeout.value,
+          });
+        },
+        notifications: app.notifier.notifications,
+        timeout,
+        hasTimeout: computed({
+          get() {
+            return timeout.value === -1;
+          },
+          set(value) {
+            if (value && timeout.value !== -1) {
+              timeout.value = -1;
+            } else if (timeout.value === -1) {
+              timeout.value = 5000;
+            }
+          },
+        }),
+      };
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>
+

package/plugins/package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "@vcmap/hello-world": "^1.0.0"
+    "@vcmap/hello-world": "^1.0.7",
+    "@vcmap/print": "^1.0.1"
   }
 }

package/plugins/simple-graph/SimpleGraphComponent.vue

@@ -14,19 +14,13 @@
 </template>
 <script>
 
-/**
- * @description A simple table view for feature attributes using {@link https://vuetifyjs.com/en/api/v-sparkline/#props|vuetify v-sparkline }
- * @vue-prop {Object} attributes - the feature's attributes
- * @vue-prop {string[]} [labels] - optional array of strings labeling all data points
- * @vue-prop {string} [graph='trend'] - Choose between a trendline or bars
- * @vue-prop {string} [color='primary'] - optional color of the sparkline of the graph
- * @vue-prop {string[]} [gradient] - optional array of colors to use as a linear-gradient
- * @vue-prop {boolean} [fill=false] - if true, filled area below sparkline
- * @vue-prop {boolean|number|string} [smooth=true] - optional number of px to use as a corner radius. true defaults to 8, false is 0
- * @vue-computed {number[]} values - numeric values for the graph derived from the attributeKeys
- */
+  import { VSparkline } from 'vuetify/lib';
+
   export default {
     name: 'SimpleGraphComponent',
+    components: [
+      VSparkline,
+    ],
     props: {
       attributes: {
         type: Object,

package/plugins/test/allIconsComponent.vue

@@ -16,9 +16,25 @@
 
 <script>
   import { Icons } from '@vcmap/ui';
+  import {
+    VSheet,
+    VList,
+    VListItem,
+    VListItemIcon,
+    VIcon,
+    VListItemTitle,
+  } from 'vuetify/lib';
 
   export default {
     name: 'AllIconsComponent',
+    components: {
+      VSheet,
+      VList,
+      VListItem,
+      VListItemIcon,
+      VIcon,
+      VListItemTitle,
+    },
     computed: {
       icons() {
         return Object.keys(Icons).map(n => `$${n}`);

package/plugins/test/editor.vue

@@ -21,6 +21,7 @@
   import { ref, inject } from 'vue';
   import { VcsButton } from '@vcmap/ui';
   import { Context } from '@vcmap/core';
+  import { VProgressCircular, VTextarea } from 'vuetify/lib';
 
   const contextId = 'foo';
 
@@ -28,6 +29,8 @@
     name: 'Editor',
     components: {
       VcsButton,
+      VTextarea,
+      VProgressCircular,
     },
     setup() {
       /** @type {VcsUiApp} */

package/plugins/test/emptyComponent.vue

@@ -7,7 +7,10 @@
 
 <script>
 
+  import { VSheet } from 'vuetify/lib';
+
   export default {
     name: 'EmptyComponent',
+    components: { VSheet },
   };
 </script>

package/plugins/test/index.js

@@ -7,6 +7,7 @@ import { toolboxData } from './toolbox-data.js';
 import editor from './editor.vue';
 import windowManagerExample from './windowManagerExample.vue';
 import AllIconsComponent from './allIconsComponent.vue';
+import TestList from './testList.vue';
 
 let source;
 
@@ -97,11 +98,27 @@ export default async function () {
         app.windowManager,
         '@vcmap/test',
       );
+      const { action: listAction, destroy: destroyList } = createToggleAction(
+        {
+          name: 'TestList',
+        },
+        {
+          id: 'testList',
+          state: {
+            headerTitle: 'Test List',
+          },
+          slot: WindowSlot.DYNAMIC_LEFT,
+          component: TestList,
+        },
+        app.windowManager,
+        '@vcmap/test',
+      );
       this._destroyActions = [
         destroyConfigEditorAction,
         destroyWindowAction,
         destroyIconAction,
         destroryClipboardDialogAction,
+        destroyList,
       ];
       const alertAction = {
         name: 'VC Systems',
@@ -130,6 +147,11 @@ export default async function () {
         '@vcmap/test',
         ButtonLocation.TOOL,
       );
+      app.navbarManager.add(
+        { id: 'list', action: listAction },
+        '@vcmap/test',
+        ButtonLocation.TOOL,
+      );
       app.navbarManager.add(
         {
           id: 'createLink',

package/plugins/test/myCustomHeader.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    Ha, this is a custom Header with a <span @click="clicked"> CLOSE thing </span>
+    <div>
+      Ha, this is a custom Header with a <span @click="clicked"> CLOSE thing. </span>
+    </div>
+    <div>And here is '<b>{{ sample }}</b>' passed through</div>
   </div>
 </template>
 
@@ -8,6 +11,11 @@
 
   export default {
     name: 'MyCustomHeader',
+    props: {
+      sample: {
+        type: String,
+      },
+    },
     setup(props, { emit }) {
       return {
         clicked: () => {