@vcmap/ui 5.0.0-rc.9 → 5.0.1

package/lib/ui.js

@@ -1 +1 @@
-export * from '@vcmap/ui';
+export * from '@vcmap/ui';

package/lib/vue.js

@@ -1 +1,2 @@
-export { default } from 'vue';
+export * from 'vue';
+export { default } from 'vue';

package/lib/vuetify.js

@@ -1,2 +1,2 @@
-export * from 'vuetify/lib';
-export { default } from 'vuetify/lib';
+export * from 'vuetify/lib';
+export { default } from 'vuetify/lib';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "5.0.0-rc.9",
+  "version": "5.0.1",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -11,9 +11,13 @@
     "build-preview": "node build/buildPreview.js",
     "preview": "vite preview",
     "build": "node build/build.js",
-    "lint": "eslint \"{src,tests,build}/**/*.{js,mjs,vue}\"",
+    "bundle": "node build/bundle.js",
+    "lint:js": "eslint . --ext .vue,.js,.cjs,.mjs,.ts,.cts,.mts",
+    "lint:prettier": "prettier --check .",
+    "lint": "npm run lint:js && npm run lint:prettier",
+    "format": "prettier --write --list-different . && npm run lint:js -- --fix",
     "prepack": "node build/build.js",
-    "install-plugins": "cd plugins && npm i --omit peer --no-package-lock --force"
+    "install-plugins": "cd plugins && npm i --omit peer --no-package-lock --force --include optional"
   },
   "repository": {
     "type": "git",
@@ -21,53 +25,52 @@
   },
   "files": [
     "index.js",
-    "start.js",
-    "map.config.json",
+    "index.html",
+    "app.config.json",
     "dist/",
     "src/",
     "plugins/",
+    "public/",
     "lib/",
     "build/",
     "config/",
     "!plugins/node_modules/"
   ],
   "dependencies": {
-    "@mdi/font": "^5.9.55",
     "@vcsuite/check": "^1.1.2",
     "@vcsuite/logger": "^1.0.1",
-    "@vcsuite/parsers": "^1.0.1",
-    "rxjs": "^6.6.6",
-    "uuid": "^8.3.2",
+    "@vcsuite/parsers": "^1.0.3",
+    "semver": "^7.5.4",
+    "uuid": "^9.0.0",
     "vue-i18n": "^8.24.1"
   },
   "peerDependencies": {
-    "@vcmap/cesium": "~1.93.1",
-    "@vcmap/core": "^5.0.0-rc.12",
-    "@vue/composition-api": "~1.4.5",
-    "ol": "~6.13.0",
-    "vue": "~2.6.14",
-    "vuetify": "~2.6.3"
+    "@vcmap-cesium/engine": "^4.0.0",
+    "@vcmap/core": "^5.0.0",
+    "ol": "^7.5.2",
+    "vue": "~2.7.3",
+    "vuetify": "~2.6.7"
   },
   "devDependencies": {
-    "@vcmap/rollup-plugin-vcs-ol": "^1.0.1",
-    "@vcsuite/eslint-config": "^2.1.1",
-    "@vue/test-utils": "^1.3.0",
-    "c8": "^7.11.0",
+    "@vcmap/rollup-plugin-vcs-ol": "^1.0.2",
+    "@vcsuite/eslint-config": "^3.0.3",
+    "@vitejs/plugin-vue2": "^2.2.0",
+    "@vitest/coverage-c8": "^0.31.0",
+    "@vue/test-utils": "^1.3.5",
     "eslint": "^8.9.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "jest-canvas-mock": "^2.3.1",
+    "jest-canvas-mock": "^2.4.0",
     "jsdoc": "^3.6.7",
+    "jsdoc-plugin-intersection": "^1.0.4",
     "jsdoc-plugin-typescript": "^2.0.6",
-    "jsdom": "^19.0.0",
+    "jsdom": "^21.1.2",
+    "resize-observer-polyfill": "1.5.1",
     "rollup-plugin-strip-pragma": "^1.0.0",
     "sass": "1.32.13",
+    "tar": "^6.1.14",
     "typescript": "^4.2.4",
-    "unplugin-vue-components": "^0.17.15",
-    "vite": "^2.8.6",
-    "vite-plugin-vue2": "^1.9.3",
-    "vitest": "^0.6.1",
-    "vue-loader": "^16.6.0",
-    "vue-template-compiler": "^2.6.14"
+    "vite": "^4.4.9",
+    "vitest": "^0.31.0"
   },
   "stylelint": {
     "extends": "stylelint-config-standard",
@@ -84,9 +87,6 @@
   },
   "eslintConfig": {
     "root": true,
-    "env": {
-      "node": true
-    },
     "extends": [
       "@vcsuite/eslint-config/vue"
     ],
@@ -109,21 +109,41 @@
       "jsdoc/check-tag-names": "off"
     }
   },
+  "eslintIgnore": [
+    "dist",
+    "exampleData",
+    "lib",
+    "coverage",
+    "docs",
+    "*timestamp-*.mjs"
+  ],
+  "prettier": "@vcsuite/eslint-config/prettier.js",
   "browserslist": [
     "last 2 Chrome versions",
-    "not Chrome < 97",
+    "not Chrome < 116",
     "last 2 Safari versions",
     "not Safari < 15",
     "last 2 iOS versions",
     "not iOS < 15",
     "last 2 Firefox versions",
-    "not Firefox < 91",
+    "not Firefox < 114",
     "last 2 Edge versions",
-    "not Edge < 97"
+    "not Edge < 116"
   ],
   "engines": {
-    "node": "^16.14.0",
-    "npm": "^8.3.1"
+    "node": ">=18.12.0",
+    "npm": ">=9.0.0"
   },
-  "type": "module"
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./config/*.json": "./config/*.json",
+    "./src/assets/logo.svg": "./src/assets/logo.svg",
+    "./src/assets/logo-mobile.svg": "./src/assets/logo-mobile.svg",
+    "./build/commonViteConfig.js": "./build/commonViteConfig.js",
+    "./build/buildHelpers.js": "./build/buildHelpers.js",
+    "./build/getPluginProxies.js": "./build/getPluginProxies.js",
+    "./build/determineHost.js": "./build/determineHost.js",
+    "./src/styles/variables.scss": "./src/styles/variables.scss"
+  }
 }

package/plugins/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "extends": ["@vcsuite/eslint-config/vue"],
+  "rules": {
+    "import/no-extraneous-dependencies": "off",
+    "import/no-unresolved": "off",
+    "no-console": "off",
+    "no-alert": "off"
+  }
+}

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

@@ -0,0 +1,28 @@
+# Show-Cases
+
+This directory contains show-case plugins demonstrating the usage of VC Map UI components or VC Map concepts.
+
+## components
+
+- [buttons-example](./buttons-example/README.md)
+- [collection-manager-example](./collection-manager-example/README.md)
+- [form-inputs-example](./form-inputs-example/README.md)
+- [icons-example](./icons-example/README.md)
+- [list-example](./list-example/README.md)
+- [style-input-example](style-input-example/README.md)
+- [table-example](table-example/README.md)
+- [textfields-example](./textfields-example/README.md)
+- [wizard-example](./wizard-example/README.md)
+
+## concepts
+
+- [category-tester](category-tester/README.md)
+- [config-editor](./config-editor/README.md)
+- [context-menu-tester](./context-menu-tester/README.md)
+- [notifier-tester](./notifier-tester/README.md)
+- [plugin-editors](plugin-editors/README.md)
+- [project-selector](project-selector/README.md)
+- [simple-graph](simple-graph/README.md)
+- [switch-map-callback-example](switch-map-callback-example/README.md)
+- [theme-changer](theme-changer/README.md)
+- [window-tester](./window-tester/README.md)

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

@@ -0,0 +1,4 @@
+# Buttons Example
+
+This is a show-case plugin demonstrating the usage of form buttons.
+See [buttons](../../../src/components/buttons) for the used components.

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

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

package/plugins/@vcmap-show-case/buttons-example/src/ButtonsExample.vue

@@ -0,0 +1,282 @@
+<template>
+  <v-card>
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold">
+          DISABLED
+        </v-list-item-title>
+      </v-list-item-content>
+      <v-list-item-action>
+        <v-switch v-model="disabled" />
+      </v-list-item-action>
+    </v-list-item>
+    <v-divider />
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold">
+          HAS UPDATE
+        </v-list-item-title>
+      </v-list-item-content>
+      <v-list-item-action>
+        <v-switch v-model="update" />
+      </v-list-item-action>
+    </v-list-item>
+    <v-divider />
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold"> ACTIVE </v-list-item-title>
+      </v-list-item-content>
+      <v-list-item-action>
+        <v-switch v-model="active" />
+      </v-list-item-action>
+    </v-list-item>
+    <v-divider />
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold">
+          ACTIVE BACKGROUND
+        </v-list-item-title>
+      </v-list-item-content>
+      <v-list-item-action>
+        <v-switch v-model="background" />
+      </v-list-item-action>
+    </v-list-item>
+    <v-divider />
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold">
+          LOADING
+        </v-list-item-title>
+      </v-list-item-content>
+      <v-list-item-action>
+        <v-switch v-model="loading" />
+      </v-list-item-action>
+    </v-list-item>
+    <v-divider />
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold">
+          <!-- eslint-disable-next-line -->
+          &ltVcsFormButton /&gt
+        </v-list-item-title>
+        <v-row>
+          <v-col>
+            <v-card>
+              <v-card-title>Form fields</v-card-title>
+              <v-card-actions>
+                <div class="d-flex gap-2">
+                  <VcsFormButton
+                    @click="toggle"
+                    :disabled="disabled"
+                    :has-update="update"
+                    :loading="loading"
+                    tooltip="OUTLINED BUTTON"
+                  >
+                    OUTLINED
+                  </VcsFormButton>
+                  <VcsFormButton
+                    @click="toggle"
+                    :disabled="disabled"
+                    :has-update="update"
+                    :loading="loading"
+                    tooltip="FILLED BUTTON"
+                    variant="filled"
+                  >
+                    FILLED
+                  </VcsFormButton>
+                </div>
+              </v-card-actions>
+            </v-card>
+          </v-col>
+          <v-col>
+            <v-card>
+              <v-card-title>OVERFLOW</v-card-title>
+              <v-card-actions>
+                <VcsActionButtonList
+                  :actions="[
+                    {
+                      name: 'Action 1',
+                      title: 'Overflow Button with active state',
+                      callback: toggle,
+                      active,
+                    },
+                    {
+                      name: 'Action 2',
+                      title: 'Overflow Button without state',
+                      callback: toggle,
+                    },
+                  ]"
+                  button="VcsFormButton"
+                  :overflow-count="0"
+                />
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-list-item-content>
+    </v-list-item>
+    <v-divider />
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold">
+          <!-- eslint-disable-next-line -->
+          &ltVcsToolButton/&gt
+        </v-list-item-title>
+        <v-row>
+          <v-col>
+            <v-card>
+              <v-card-title>Navbar</v-card-title>
+              <v-card-actions>
+                <VcsToolButton
+                  @click="toggle"
+                  :active="active"
+                  :disabled="disabled"
+                  :background="background"
+                  :has-update="update"
+                  :loading="loading"
+                  icon="$vcs3d"
+                  tooltip="VcsToolButton"
+                />
+              </v-card-actions>
+            </v-card>
+          </v-col>
+          <v-col>
+            <v-card>
+              <v-card-title>OVERFLOW</v-card-title>
+              <v-card-actions>
+                <VcsActionButtonList
+                  :actions="[
+                    {
+                      name: 'Tool 1',
+                      title: 'Overflow Button with active state',
+                      callback: toggle,
+                      active,
+                    },
+                    {
+                      name: 'Tool 2',
+                      title: 'Overflow Button without state',
+                      callback: toggle,
+                    },
+                  ]"
+                  button="VcsToolButton"
+                  :overflow-count="0"
+                />
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-list-item-content>
+    </v-list-item>
+    <v-divider />
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold">
+          <!-- eslint-disable-next-line -->
+          &ltVcsButton/&gt
+        </v-list-item-title>
+        <v-row>
+          <v-col>
+            <v-card>
+              <v-card-title>Action Item</v-card-title>
+              <v-card-actions>
+                <VcsButton
+                  @click="toggle"
+                  :active="active"
+                  :has-update="update"
+                  :disabled="disabled"
+                  :loading="loading"
+                  icon="$vcsColorSwatch"
+                  tooltip="ACTION BUTTON"
+                />
+              </v-card-actions>
+            </v-card>
+          </v-col>
+          <v-col>
+            <v-card>
+              <v-card-title>OVERFLOW</v-card-title>
+              <v-card-actions>
+                <VcsActionButtonList
+                  :actions="[
+                    {
+                      name: 'Action 1',
+                      title: 'Overflow Button with active state',
+                      callback: toggle,
+                      active,
+                    },
+                    {
+                      name: 'Action 2',
+                      title: 'Overflow Button without state',
+                      callback: toggle,
+                    },
+                  ]"
+                  :overflow-count="0"
+                />
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-list-item-content>
+    </v-list-item>
+  </v-card>
+</template>
+<script>
+  import {
+    VcsButton,
+    VcsToolButton,
+    VcsFormButton,
+    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: 'ButtonsExample',
+    components: {
+      VcsButton,
+      VcsToolButton,
+      VcsFormButton,
+      VcsActionButtonList,
+      VCard,
+      VListItem,
+      VListItemContent,
+      VListItemTitle,
+      VListItemAction,
+      VSwitch,
+      VDivider,
+      VRow,
+      VCol,
+      VCardTitle,
+      VCardActions,
+    },
+    setup() {
+      const active = ref(false);
+      const background = ref(false);
+      const disabled = ref(false);
+      const update = ref(false);
+      const loading = ref(false);
+
+      return {
+        active,
+        background,
+        disabled,
+        update,
+        loading,
+        toggle() {
+          active.value = !active.value;
+        },
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,51 @@
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import ButtonsExample from './ButtonsExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function buttonsExample() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Buttons Examples',
+          title: 'Buttons Example Plugin',
+          icon: '$vcsTouch',
+        },
+        {
+          id: 'buttons-textfields-example',
+          component: ButtonsExample,
+          slot: WindowSlot.DETACHED,
+          state: {
+            headerTitle: 'Buttons Example',
+            headerIcon: '$vcsTouch',
+          },
+          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/category-tester/README.md

@@ -0,0 +1,3 @@
+# Category Tester
+
+This is a show-case plugin demonstrating the concept of [Categories](../../../documentation/CATEGORIES.md).

package/plugins/@vcmap-show-case/category-tester/package.json

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