npm - @vcmap/ui - Versions diffs - 5.0.0-rc.29 → 5.0.0-rc.30 - Mend

@vcmap/ui 5.0.0-rc.29 → 5.0.0-rc.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/config/dev.config.json +4 -0
package/dist/assets/cesium.js +1 -1
package/dist/assets/{core.74da2a.js → core.b16511.js} +2 -2
package/dist/assets/core.js +1 -1
package/dist/assets/index-c115e3a1.js +1 -0
package/dist/assets/ol.js +1 -1
package/dist/assets/{ui.d3054c.css → ui.ab815e.css} +2 -2
package/dist/assets/{ui.d3054c.js → ui.ab815e.js} +4081 -3460
package/dist/assets/ui.js +1 -1
package/dist/assets/vue.js +2 -2
package/dist/assets/{vuetify.946bd8.js → vuetify.ea3fa8.js} +1 -1
package/dist/assets/vuetify.js +2 -2
package/dist/index.html +1 -1
package/index.js +6 -0
package/package.json +1 -1
package/plugins/@vcmap/search-nominatim/SearchNominatimEditor.vue +90 -0
package/plugins/@vcmap/search-nominatim/index.js +37 -0
package/plugins/@vcmap-show-case/form-inputs-example/FormInputsExample.vue +37 -1
package/plugins/@vcmap-show-case/form-inputs-example/index.js +3 -0
package/plugins/@vcmap-show-case/form-inputs-example/validation.js +11 -0
package/plugins/@vcmap-show-case/style-input-example/styleExample.vue +0 -1
package/plugins/@vcmap-show-case/vector-properties-example/index.js +40 -0
package/plugins/@vcmap-show-case/vector-properties-example/package.json +5 -0
package/plugins/@vcmap-show-case/vector-properties-example/vectorPropertiesExample.vue +109 -0
package/src/components/form-inputs-controls/VcsChipArrayInput.vue +282 -0
package/src/components/form-inputs-controls/VcsTextField.vue +9 -3
package/src/components/plugins/AbstractConfigEditor.vue +84 -0
package/src/components/style/VcsImageSelector.vue +6 -5
package/src/components/style/VcsTextSelector.vue +1 -1
package/src/components/vector-properties/VcsVectorPropertiesComponent.vue +737 -0
package/src/components/vector-properties/composables.js +93 -0
package/src/i18n/de.js +40 -9
package/src/i18n/en.js +38 -7
package/src/manager/collectionManager/collectionComponent.js +1 -1
package/src/pluginHelper.js +57 -17
package/src/vcsUiApp.js +17 -27
package/dist/assets/index-cb070eff.js +0 -1
/package/dist/assets/{cesium.16590b.js → cesium.eaf7cc.js} +0 -0
/package/dist/assets/{ol.50a512.js → ol.4bbf0f.js} +0 -0
/package/dist/assets/{vue.30740e.js → vue.67e80f.js} +0 -0
/package/dist/assets/{vuetify.946bd8.css → vuetify.ea3fa8.css} +0 -0

package/dist/assets/ui.js CHANGED Viewed

	@@ -1 +1 @@
1	- export * from "./ui.~~d3054c~~.js";
1	+ export * from "./ui.ab815e.js";

package/dist/assets/vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export * from "./vue.30740e.js";
-import { default as f } from "./vue.30740e.js";
+export * from "./vue.67e80f.js";
+import { default as f } from "./vue.67e80f.js";
 export {
   f as default
 };

package/dist/assets/{vuetify.946bd8.js → vuetify.ea3fa8.js} RENAMED Viewed

@@ -13,7 +13,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify.946bd8.css');import v from "./vue.30740e.js";
+} await loadCss('./assets/vuetify.ea3fa8.css');import v from "./vue.67e80f.js";
 const Ne = v.extend().extend({
   name: "themeable",
   provide() {

package/dist/assets/vuetify.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export * from "./vuetify.946bd8.js";
-import { default as f } from "./vuetify.946bd8.js";
+export * from "./vuetify.ea3fa8.js";
+import { default as f } from "./vuetify.ea3fa8.js";
 export {
   f as default
 };

package/dist/index.html CHANGED Viewed

@@ -29,7 +29,7 @@
     />
     <link rel="icon" type="image/svg+xml" href="./assets/favicon.d5ec97.svg" />
-    <script type="module" crossorigin src="./assets/index-cb070eff.js"></script>
+    <script type="module" crossorigin src="./assets/index-c115e3a1.js"></script>
   </head>
   <body style="height: 100vh">
     <noscript>

package/index.js CHANGED Viewed

@@ -162,6 +162,7 @@ export {
   vcsAppSymbol,
   pluginFactorySymbol,
   pluginBaseUrlSymbol,
+  pluginModuleUrlSymbol,
   getPluginAssetUrl,
   isValidPackageName,
   loadPlugin,
@@ -204,6 +205,7 @@ export { default as VcsFormSection } from './src/components/form-inputs-controls
 export { default as VcsSelect } from './src/components/form-inputs-controls/VcsSelect.vue';
 export { default as VcsSlider } from './src/components/form-inputs-controls/VcsSlider.vue';
 export { default as VcsTextField } from './src/components/form-inputs-controls/VcsTextField.vue';
+export { default as VcsChipArrayInput } from './src/components/form-inputs-controls/VcsChipArrayInput.vue';
 export { default as VcsTextArea } from './src/components/form-inputs-controls/VcsTextArea.vue';
 export { default as VcsWizard } from './src/components/form-inputs-controls/VcsWizard.vue';
 export { default as VcsWizardStep } from './src/components/form-inputs-controls/VcsWizardStep.vue';
@@ -245,5 +247,9 @@ export {
   VectorStyleMenus,
 } from './src/components/style/VcsVectorStyleComponent.vue';
+export { default as VcsVectorPropertiesComponent } from './src/components/vector-properties/VcsVectorPropertiesComponent.vue';
 // export { default as VcsFileNamePopover } from './src/components/popovers/VcsFileNamePopover.vue';
 // export { default as VcsTexturePopover } from './src/components/popovers/VcsTexturePopover.vue';
+export { default as AbstractConfigEditor } from './src/components/plugins/AbstractConfigEditor.vue';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "5.0.0-rc.29",
+  "version": "5.0.0-rc.30",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {

package/plugins/@vcmap/search-nominatim/SearchNominatimEditor.vue ADDED Viewed

@@ -0,0 +1,90 @@
+<template>
+  <AbstractConfigEditor @submit="apply" v-bind="{ ...$attrs, ...$props }">
+    <v-container class="py-0 px-1">
+      <v-row
+        no-gutters
+        v-for="key in ['url', 'state', 'city', 'countryCode']"
+        :key="key"
+      >
+        <v-col>
+          <VcsLabel :html-for="key" dense>
+            {{ $t(`searchNominatim.${key}`) }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <VcsTextField
+            :id="key"
+            clearable
+            dense
+            v-model.trim="localConfig[key]"
+          />
+        </v-col>
+      </v-row>
+      <!-- XXX extent -->
+      <v-row no-gutters>
+        <v-col>
+          <VcsLabel html-for="limit" dense>
+            {{ $t('searchNominatim.limit') }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <VcsTextField
+            id="limit"
+            clearable
+            dense
+            type="number"
+            v-model.number="localConfig.limit"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </AbstractConfigEditor>
+</template>
+<script>
+  import { VContainer, VRow, VCol } from 'vuetify/lib';
+  import { VcsLabel, VcsTextField, AbstractConfigEditor } from '@vcmap/ui';
+  import { ref } from 'vue';
+  import Nominatim from './nominatim.js';
+  export default {
+    name: 'SearchNominatimEditor',
+    title: 'Search Nominatim Editor',
+    components: {
+      VContainer,
+      VRow,
+      VCol,
+      AbstractConfigEditor,
+      VcsLabel,
+      VcsTextField,
+    },
+    props: {
+      getConfig: {
+        type: Function,
+        required: true,
+      },
+      setConfig: {
+        type: Function,
+        required: true,
+      },
+    },
+    setup(props) {
+      const localConfig = ref({});
+      const defaultOptions = Nominatim.getDefaultOptions();
+      props.getConfig().then((config) => {
+        localConfig.value = Object.assign(defaultOptions, config);
+      });
+      const apply = async () => {
+        await props.setConfig(localConfig.value);
+      };
+      return {
+        localConfig,
+        apply,
+      };
+    },
+  };
+</script>
+<style scoped></style>

package/plugins/@vcmap/search-nominatim/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { version, name } from './package.json';
 import Nominatim from './nominatim.js';
+import SearchNominatimEditor from './SearchNominatimEditor.vue';
 /**
  * @param {NominatimSearchOptions} config - the configuration of this plugin instance, passed in from the app.
@@ -25,5 +26,41 @@ export default function searchNominatim(config) {
       this._app = vcsUiApp;
       vcsUiApp.search.add(this._instance, name);
     },
+    /**
+     * @returns {NominatimSearchOptions}
+     */
+    toJSON() {
+      return this._instance.toJSON();
+    },
+    getDefaultOptions() {
+      return Nominatim.getDefaultOptions();
+    },
+    getConfigEditors() {
+      return [{ component: SearchNominatimEditor }];
+    },
+    i18n: {
+      de: {
+        searchNominatim: {
+          name: 'Name',
+          url: 'URL zu Nominatim',
+          state: 'Bundesland',
+          city: 'Stadt',
+          countryCode: 'Ländercode',
+          limit: 'Maximale Anzahl Resultate',
+          bbox: 'Bounding Box',
+        },
+      },
+      en: {
+        searchNominatim: {
+          name: 'Name',
+          url: 'URL to Nominatim',
+          state: 'State',
+          city: 'City',
+          countryCode: 'Country Code',
+          limit: 'Maximum number of results',
+          bbox: 'Bounding Box',
+        },
+      },
+    },
   };
 }

package/plugins/@vcmap-show-case/form-inputs-example/FormInputsExample.vue CHANGED Viewed

@@ -54,6 +54,34 @@
               />
             </v-col>
           </v-row>
+          <v-row no-gutters>
+            <v-col class="w-max-half">
+              <VcsLabel html-for="arrayInput" :dense="dense">
+                Array Input
+              </VcsLabel>
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsChipArrayInput
+                id="arrayInput"
+                type="number"
+                :dense="dense"
+                v-model="state.arrayInput"
+                :rules="[arrayTest]"
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsChipArrayInput
+                id="arrayInput"
+                :dense="dense"
+                v-model="state.arrayInputString"
+                column
+              />
+            </v-col>
+          </v-row>
           <v-row no-gutters>
             <v-col>
               <VcsTextField
@@ -394,6 +422,7 @@
     VcsRadio,
     VcsFormButton,
     VcsTextField,
+    VcsChipArrayInput,
     VcsFormattedNumber,
     VcsFormSection,
     VcsLabel,
@@ -404,7 +433,12 @@
   } from '@vcmap/ui';
   import { VCol, VContainer, VForm, VRow, VIcon } from 'vuetify/lib';
   import packageJSON from './package.json';
-  import { isValidText, conditionalTest, isValidEmail } from './validation.js';
+  import {
+    isValidText,
+    conditionalTest,
+    arrayTest,
+    isValidEmail,
+  } from './validation.js';
   export default {
     name: 'FormInputsExample',
@@ -418,6 +452,7 @@
       VcsFormSection,
       VcsLabel,
       VcsTextArea,
+      VcsChipArrayInput,
       VForm,
       VRow,
       VCol,
@@ -455,6 +490,7 @@
         isValid: ref(true),
         isValidText,
         conditionalTest,
+        arrayTest,
         isValidEmail,
         newUpdate,
         resetState() {

package/plugins/@vcmap-show-case/form-inputs-example/index.js CHANGED Viewed

@@ -26,6 +26,7 @@ function getLogger() {
  * @typedef FormInputsExampleState
  * @property {string} selected
  * @property {Array<string>} selectedMultiple
+ * @property {Array<number>} arrayInput
  * @property {string} conditionalInput
  * @property {string} initialTextInput
  * @property {number} numberInput
@@ -83,6 +84,8 @@ export default function formInputsExample(config) {
   const pluginState = {
     selected: pluginConfig.selectOptions.value[0],
     selectedMultiple: [],
+    arrayInput: [1, 2, 3],
+    arrayInputString: ['a', 'b', 'c'],
     conditionalInput: '',
     initialTextInput: pluginConfig.initialTextInput.value,
     numberInput: 100.156,

package/plugins/@vcmap-show-case/form-inputs-example/validation.js CHANGED Viewed

@@ -20,6 +20,17 @@ export function conditionalTest(value, condition) {
   }
 }
+/**
+ * @param {number[]} value
+ * @returns {boolean|string}
+ */
+export function arrayTest(value) {
+  if (value > 10) {
+    return 'Input must be lower 10';
+  }
+  return true;
+}
 /**
  * @param {string} value
  * @returns {boolean|string}

package/plugins/@vcmap-show-case/style-input-example/styleExample.vue CHANGED Viewed

@@ -135,7 +135,6 @@
               color: parseColor(image.getStroke().getColor()),
               width: image.getStroke().getWidth(),
             },
-            src: 'mdi-circle-outline',
           };
         } else if (image instanceof Icon) {
           styleOptions.value.image = {

package/plugins/@vcmap-show-case/vector-properties-example/index.js ADDED Viewed

@@ -0,0 +1,40 @@
+import { WindowSlot, createToggleAction, ButtonLocation } from '@vcmap/ui';
+import packageJSON from './package.json';
+import component from './vectorPropertiesExample.vue';
+export default function createVectorPropertiesExamplePlugin() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
+    initialize(vcsApp) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Vector Properties Example',
+        },
+        {
+          id: 'vector-properties-example',
+          state: {
+            headerTitle: 'Vector Properties Example',
+          },
+          component,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        vcsApp.windowManager,
+        packageJSON.name,
+      );
+      vcsApp.navbarManager.add(
+        { id: 'vectorProperties', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this.destroy = destroy;
+    },
+  };
+}

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

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

package/plugins/@vcmap-show-case/vector-properties-example/vectorPropertiesExample.vue ADDED Viewed

@@ -0,0 +1,109 @@
+<template>
+  <v-sheet>
+    <v-container>
+      <v-row>
+        <v-col>
+          <VcsList
+            :items="propertiesToSelectFrom"
+            :selectable="true"
+            v-model="propertiesToDisplay"
+            title="Select all"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+    <VcsVectorPropertiesComponent
+      v-model="featureProperties"
+      :value-default="defaultOptions"
+      :show3-d-properties="is3D"
+      :properties="propertiesToDisplay.map((item) => item.name)"
+    />
+  </v-sheet>
+</template>
+<script>
+  import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
+  import { CesiumMap, VectorLayer, VectorProperties } from '@vcmap/core';
+  import { VcsVectorPropertiesComponent, VcsList } from '@vcmap/ui';
+  import { VSheet, VContainer, VRow, VCol } from 'vuetify/lib';
+  import { Feature } from 'ol';
+  import { Polygon } from 'ol/geom.js';
+  export const polygonCoords = [
+    [
+      [13.37302869387225, 52.515969833848686, 34.5146781549614],
+      [13.374380945328324, 52.51418689937603, 33.692166432214975],
+      [13.376569529360477, 52.516925129014055, 34.36842554294618],
+      [13.37302869387225, 52.515969833848686, 34.5146781549614],
+    ],
+  ];
+  export default {
+    name: 'VectorPropertiesExample',
+    components: {
+      VcsVectorPropertiesComponent,
+      VcsList,
+      VSheet,
+      VContainer,
+      VRow,
+      VCol,
+    },
+    setup() {
+      /** @type {import('@vcmap/core').VcsApp} */
+      const vcsApp = inject('vcsApp');
+      const is3D = ref(false);
+      function updateIs3D() {
+        is3D.value = vcsApp.maps.activeMap instanceof CesiumMap;
+      }
+      const mapActivatedListener =
+        vcsApp.maps.mapActivated.addEventListener(updateIs3D);
+      updateIs3D();
+      const feature = new Feature({
+        geometry: new Polygon(polygonCoords),
+      });
+      const layer = new VectorLayer({
+        name: 'vectorPropertiesExampleLayer',
+        projection: {
+          epsg: 'EPSG:4326',
+        },
+      });
+      const featureProperties = ref(
+        layer.vectorProperties.getValuesForFeatures([feature]),
+      );
+      watch(featureProperties, () => {
+        layer.vectorProperties.setValuesForFeatures(featureProperties.value, [
+          feature,
+        ]);
+      });
+      const defaultOptions = VectorProperties.getDefaultOptions();
+      const propertiesToSelectFrom = Object.keys(defaultOptions).map((key) => ({
+        name: key,
+        title: key,
+      }));
+      onMounted(() => {
+        vcsApp.layers.add(layer);
+        layer.addFeatures([feature]);
+        layer.activate();
+      });
+      onUnmounted(() => {
+        layer.deactivate();
+        vcsApp.layers.remove(layer);
+        layer.destroy();
+        mapActivatedListener();
+      });
+      return {
+        featureProperties,
+        defaultOptions,
+        is3D,
+        propertiesToSelectFrom,
+        propertiesToDisplay: ref([...propertiesToSelectFrom]),
+      };
+    },
+  };
+</script>