npm - @vcmap/ui - Versions diffs - 5.0.0-rc.26 → 5.0.0-rc.27 - Mend

@vcmap/ui 5.0.0-rc.26 → 5.0.0-rc.27

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 (102) hide show

package/dist/assets/ui.js CHANGED Viewed

	@@ -1 +1 @@
1	- export * from "./ui.~~74022f~~.js";
1	+ export * from "./ui.3ed7ff.js";

package/dist/assets/vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export * from "./vue.9b8c6e.js";
-import { default as f } from "./vue.9b8c6e.js";
+export * from "./vue.537ff3.js";
+import { default as f } from "./vue.537ff3.js";
 export {
   f as default
 };

package/dist/assets/{vuetify.30486f.js → vuetify.614278.js} RENAMED Viewed

@@ -13,7 +13,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify.30486f.css');import v from "./vue.9b8c6e.js";
+} await loadCss('./assets/vuetify.614278.css');import v from "./vue.537ff3.js";
 const Ne = v.extend().extend({
   name: "themeable",
   provide() {

package/dist/assets/vuetify.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export * from "./vuetify.30486f.js";
-import { default as f } from "./vuetify.30486f.js";
+export * from "./vuetify.614278.js";
+import { default as f } from "./vuetify.614278.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-f94d5be3.js"></script>
+    <script type="module" crossorigin src="./assets/index-1cff371d.js"></script>
   </head>
   <body style="height: 100vh">
     <noscript>

package/index.js CHANGED Viewed

@@ -68,6 +68,7 @@ export {
   WindowAlignment,
   getFittedWindowPositionOptions,
   getFittedWindowPositionOptionsFromMapEvent,
+  getTargetSize,
   getWindowPositionOptions,
   getWindowPositionOptionsFromMapEvent,
   posToNumber,
@@ -76,7 +77,8 @@ export {
   updateWindowPosition,
   clipToTargetSize,
   moveWindow,
-  applyPositionOnTarget,
+  applyParentPosition,
+  getPositionAppliedOnTarget,
 } from './src/manager/window/windowHelper.js';
 export { default as ButtonManager } from './src/manager/buttonManager.js';
@@ -192,6 +194,7 @@ export { default as VcsDataTable } from './src/components/tables/VcsDataTable.vu
 export { default as VcsLabel } from './src/components/form-inputs-controls/VcsLabel.vue';
 export { default as VcsCheckbox } from './src/components/form-inputs-controls/VcsCheckbox.vue';
 export { default as VcsRadio } from './src/components/form-inputs-controls/VcsRadio.vue';
+export { default as VcsRadioGrid } from './src/components/form-inputs-controls/VcsRadioGrid.vue';
 // export { default as VcsColorPicker } from './src/components/form-inputs-controls/VcsColorPicker.vue';
 export { default as VcsFormSection } from './src/components/form-inputs-controls/VcsFormSection.vue';
 // export { default as VcsInputColumnCoordinates } from './src/components/form-inputs-controls/VcsInputColumnCoordinates.vue';
@@ -228,5 +231,18 @@ export { default as VcsBadge } from './src/components/notification/VcsBadge.vue'
 export { default as VcsDefaultLogo } from './src/logo.svg';
 export { default as VcsDefaultMobileLogo } from './src/logo-mobile.svg';
+export { default as VcsFillSelector } from './src/components/style/VcsFillSelector.vue';
+export { default as VcsFillMenu } from './src/components/style/VcsFillMenu.vue';
+export { default as VcsStrokeSelector } from './src/components/style/VcsStrokeSelector.vue';
+export { default as VcsStrokeMenu } from './src/components/style/VcsStrokeMenu.vue';
+export { default as VcsImageSelector } from './src/components/style/VcsImageSelector.vue';
+export { default as VcsImageMenu } from './src/components/style/VcsImageMenu.vue';
+export { default as VcsTextSelector } from './src/components/style/VcsTextSelector.vue';
+export { default as VcsTextMenu } from './src/components/style/VcsTextMenu.vue';
+export {
+  default as VcsVectorStyleComponent,
+  VectorStyleMenus,
+} from './src/components/style/VcsVectorStyleComponent.vue';
 // export { default as VcsFileNamePopover } from './src/components/popovers/VcsFileNamePopover.vue';
 // export { default as VcsTexturePopover } from './src/components/popovers/VcsTexturePopover.vue';

package/package.json CHANGED Viewed

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

package/plugins/@vcmap/create-link/index.js CHANGED Viewed

@@ -34,18 +34,18 @@ export default function createLink() {
     i18n: {
       de: {
         createLink: {
-          title: 'Link Kopieren',
-          windowTitle: 'Applikationslink',
-          tooltip: 'Dialog zum kopieren des Applikationslinks anzeigen.',
-          copyToClipboard: 'Applikationslink in Zwischenablage kopieren',
-          refreshTooltip: 'Applikationslink aktualisieren',
-          copied: 'Applikationslink in Zwischenablage kopiert.',
+          title: 'Link kopieren',
+          windowTitle: 'Anwendungslink',
+          tooltip: 'Dialog zum Kopieren des Anwendungslinks anzeigen',
+          copyToClipboard: 'Anwendungslinks in Zwischenablage kopieren',
+          refreshTooltip: 'Anwendungslinks aktualisieren',
+          copied: 'Der Anwendungslink in wurde in die Zwischenablage kopiert.',
         },
       },
       en: {
         createLink: {
-          title: 'Copy Link',
-          windowTitle: 'Application Link',
+          title: 'Copy link',
+          windowTitle: 'Application link',
           tooltip: 'Open dialog to copy application link to clipboard',
           copyToClipboard: 'Copy application link to clipboard',
           refreshTooltip: 'Refresh application link',

package/plugins/@vcmap-show-case/collection-manager-example/index.js CHANGED Viewed

@@ -11,6 +11,8 @@ import CollectionManagerExample from './CollectionManagerExample.vue';
  * @returns {VcsPlugin}
  */
 export default async function collectionManagerExample() {
+  let collectionManager;
   return {
     get name() {
       return packageJSON.name;
@@ -21,8 +23,11 @@ export default async function collectionManagerExample() {
     get vcMapVersion() {
       return packageJSON.vcMapVersion;
     },
+    get collectionManager() {
+      return collectionManager;
+    },
     initialize(app) {
-      const collectionManager = new CollectionManager(app);
+      collectionManager = new CollectionManager(app);
       const { action, destroy } = createToggleAction(
         {
           name: 'Collection Manager Tester',

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

@@ -2,6 +2,8 @@
   <v-form v-model="isValid" ref="form">
     <VcsFormSection
       heading="VcsFormSection Select & Text Inputs"
+      expandable
+      start-open
       :header-actions="actions"
       :action-button-list-overflow-count="4"
     >
@@ -15,7 +17,7 @@
           <span>{{ $t('form-inputs-example.help3desc') }}</span>
         </ol>
       </template>
-      <template #default v-if="showSection">
+      <template #default>
         <v-container class="py-0 px-1">
           <v-row no-gutters>
             <v-col class="w-max-half">
@@ -79,7 +81,9 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="emailInput" :dense="dense"> Email </VcsLabel>
+              <VcsLabel html-for="emailInput" :dense="dense" required>
+                Email
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
@@ -230,7 +234,12 @@
         </v-container>
       </template>
     </VcsFormSection>
-    <VcsFormSection heading="VcsFormSection Radio & Checkbox">
+    <VcsFormSection
+      heading="VcsFormSection Radio & Checkbox"
+      expandable
+      start-open
+      :disabled="!state.checkboxInput"
+    >
       <template #default>
         <v-container class="py-0 px-1">
           <v-row no-gutters>
@@ -333,6 +342,26 @@
               />
             </v-col>
           </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsRadioGrid
+                v-model="state.selected"
+                :items="[
+                  { value: 'A', src: 'mdi-circle-outline' },
+                  { value: 'B', src: 'mdi-close' },
+                  { value: 'C', src: 'mdi-triangle-outline' },
+                  { value: 'D', src: 'mdi-square-outline' },
+                ]"
+                :dense="dense"
+                :rules="[(v) => v !== 'D' || 'Square is not allowed']"
+              >
+                <!-- if label slot is not used, src is forwarded to img src -->
+                <template #label="{ src }">
+                  <v-icon size="24">{{ src }}</v-icon>
+                </template>
+              </VcsRadioGrid>
+            </v-col>
+          </v-row>
         </v-container>
       </template>
     </VcsFormSection>
@@ -371,8 +400,9 @@
     VcsTextArea,
     VcsDatePicker,
     VcsSlider,
+    VcsRadioGrid,
   } from '@vcmap/ui';
-  import { VCol, VContainer, VForm, VRow } from 'vuetify/lib';
+  import { VCol, VContainer, VForm, VRow, VIcon } from 'vuetify/lib';
   import packageJSON from './package.json';
   import { isValidText, conditionalTest, isValidEmail } from './validation.js';
@@ -394,6 +424,8 @@
       VContainer,
       VcsDatePicker,
       VcsSlider,
+      VcsRadioGrid,
+      VIcon,
     },
     props: {
       actions: {
@@ -404,10 +436,6 @@
         type: Object,
         required: true,
       },
-      showSection: {
-        type: Object,
-        required: true,
-      },
     },
     setup() {
       const app = inject('vcsApp');

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

@@ -23,25 +23,6 @@ export default function createExampleActions() {
       title: 'another action without icon',
       callback: () => {},
     },
-    reactive({
-      name: 'toggleSection',
-      title: 'toggle section',
-      icon: showSection.value ? '$vcsMinus' : '$vcsPlus',
-      callback() {
-        showSection.value = !showSection.value;
-        this.icon = showSection.value ? '$vcsMinus' : '$vcsPlus';
-      },
-    }),
-    reactive({
-      name: 'toggleIcon',
-      title: 'toggle switch textfields-example',
-      icon: showSection.value ? 'mdi-toggle-switch' : 'mdi-toggle-switch-off',
-      active: showSection.value,
-      callback() {
-        showSection.value = !showSection.value;
-        this.active = showSection.value;
-      },
-    }),
     {
       name: 'alert',
       icon: 'mdi-message-text',

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

@@ -176,7 +176,7 @@ export default function formInputsExample(config) {
     getSerializedState,
     setSerializedState,
     onVcsAppMounted(app) {
-      const { actions, showSection, dense } = createExampleActions();
+      const { actions, dense } = createExampleActions();
       const { action, destroy } = createToggleAction(
         {
@@ -197,7 +197,6 @@ export default function formInputsExample(config) {
           },
           props: {
             actions,
-            showSection,
             dense,
           },
         },

package/plugins/@vcmap-show-case/style-input-example/README.md ADDED Viewed

@@ -0,0 +1,4 @@
+# Style input example
+This is a show-case plugin demonstrating the components for changeing style of vector layers and vector features.
+See [style](../../../src/components/style) for the used components.

package/plugins/@vcmap-show-case/style-input-example/index.js ADDED Viewed

@@ -0,0 +1,42 @@
+import { WindowSlot, createToggleAction, ButtonLocation } from '@vcmap/ui';
+import packageJSON from './package.json';
+import component from './styleExample.vue';
+export default function createStyleExamplePlugin() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
+    initialize(vcsApp) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Style Example',
+          icon: '$vcsColorSwatch',
+        },
+        {
+          id: 'style-input-example',
+          state: {
+            headerTitle: 'Style example',
+            headerIcon: '$vcsColorSwatch',
+          },
+          component,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        vcsApp.windowManager,
+        packageJSON.name,
+      );
+      vcsApp.navbarManager.add(
+        { id: 'style', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this.destroy = destroy;
+    },
+  };
+}

package/plugins/@vcmap-show-case/style-input-example/package.json ADDED Viewed

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

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

@@ -0,0 +1,191 @@
+<template>
+  <v-sheet>
+    <VcsFormSection heading="Style menus">
+      <VcsVectorStyleComponent
+        v-model="styleOptions"
+        :value-default="defaultStyleOptions"
+      />
+    </VcsFormSection>
+    <VcsFormSection :expandable="true" heading="Fill Selector">
+      <VcsFillSelector v-model="styleOptions.fill" />
+    </VcsFormSection>
+    <VcsFormSection :expandable="true" heading="Stroke Selector">
+      <VcsStrokeSelector v-model="styleOptions.stroke" />
+    </VcsFormSection>
+    <VcsFormSection :expandable="true" heading="Image Selector">
+      <VcsImageSelector
+        v-model="styleOptions.image"
+        :value-default="defaultStyleOptions.image"
+        :extended-shape-settings="true"
+      />
+    </VcsFormSection>
+    <VcsFormSection :expandable="true" heading="Text Selector">
+      <VcsTextSelector
+        v-model="styleOptions.text"
+        :value-default="defaultStyleOptions.text"
+      />
+    </VcsFormSection>
+  </v-sheet>
+</template>
+<script>
+  import { VSheet } from 'vuetify/lib';
+  import { onMounted, ref, watchEffect } from 'vue';
+  import {
+    VcsFormSection,
+    VcsFillSelector,
+    VcsStrokeSelector,
+    VcsImageSelector,
+    VcsTextSelector,
+    VcsVectorStyleComponent,
+    VectorStyleMenus,
+  } from '@vcmap/ui';
+  import { parseColor } from '@vcmap/core';
+  import { Fill, Icon, RegularShape, Stroke, Style, Text } from 'ol/style.js';
+  export default {
+    name: 'StyleExample',
+    components: {
+      VSheet,
+      VcsFormSection,
+      VcsFillSelector,
+      VcsStrokeSelector,
+      VcsImageSelector,
+      VcsTextSelector,
+      VcsVectorStyleComponent,
+    },
+    setup() {
+      const exampleStyle = new Style({
+        fill: new Fill({ color: 'rgba(255,255,255,0.4)' }),
+        stroke: undefined,
+        image: new RegularShape({
+          points: undefined,
+          radius: 11,
+          angle: undefined,
+          radius2: undefined,
+          fill: new Fill({ color: 'rgba(255,255,255,1)' }),
+          stroke: new Stroke({ color: 'rgba(0,0,0,1)', width: 1 }),
+        }),
+        text: new Text({
+          font: '10px Arial, Helvetica, sans-serif',
+          fill: new Fill({ color: 'rgba(0,0,0,1)' }),
+          stroke: new Stroke({ color: 'rgba(255,255,255,1)', width: 1 }),
+        }),
+      });
+      const defaultStyleOptions = {
+        fill: undefined,
+        stroke: {
+          color: [0, 0, 0, 1],
+          width: 2,
+        },
+        image: {
+          fill: undefined,
+          stroke: {
+            color: [0, 0, 0, 1],
+            width: 2,
+          },
+          radius: 10,
+          scale: 1,
+          opacity: 1,
+        },
+        text: {
+          font: '10px Arial, Helvetica, sans-serif',
+          offsetX: 0,
+          offsetY: 0,
+          text: '',
+        },
+      };
+      const styleOptions = ref({
+        fill: undefined,
+        stroke: undefined,
+        image: undefined,
+        text: undefined,
+      });
+      const fill = exampleStyle.getFill();
+      const stroke = exampleStyle.getStroke();
+      const image = exampleStyle.getImage();
+      const text = exampleStyle.getText();
+      // TODO: Replace with new getStyleOptions from @vcmap/core as soon as available
+      if (fill) {
+        styleOptions.value.fill = {
+          color: parseColor(fill.getColor()),
+        };
+      }
+      if (stroke) {
+        styleOptions.value.stroke = {
+          color: parseColor(stroke.getColor()),
+          width: exampleStyle.getStroke().getWidth(),
+        };
+      }
+      if (image) {
+        if (image instanceof RegularShape) {
+          styleOptions.value.image = {
+            points: image.getPoints(),
+            radius: image.getRadius(),
+            radius2: image.getRadius2(),
+            angle: image.getAngle(),
+            fill: {
+              color: parseColor(image.getFill().getColor()),
+            },
+            stroke: {
+              color: parseColor(image.getStroke().getColor()),
+              width: image.getStroke().getWidth(),
+            },
+            src: 'mdi-circle-outline',
+          };
+        } else if (image instanceof Icon) {
+          styleOptions.value.image = {
+            src: image.getSrc(),
+            scale: image.getScale(),
+            opacity: image.getOpacity(),
+          };
+        }
+      }
+      if (text) {
+        styleOptions.value.text = {
+          font: text.getFont(),
+          fill: {
+            color: parseColor(text.getFill()?.getColor()),
+          },
+          stroke: {
+            color: parseColor(text.getStroke()?.getColor()),
+            width: text.getStroke().getWidth(),
+          },
+          textBaseline: text.getTextBaseline(),
+          offsetY: text.getOffsetY(),
+          offsetX: text.getOffsetX(),
+          text: text.getText(),
+        };
+      }
+      onMounted(() => {
+        watchEffect(() => {
+          const newFill = styleOptions.value.fill;
+          const newStroke = styleOptions.value.stroke;
+          const newImage = styleOptions.value.image;
+          // const newText = styleOptions.value.text;
+          // TODO: Replace with new getStyleFromOptions from @vcmap/core as soon as available
+          exampleStyle.setFill(newFill ? new Fill(newFill) : null);
+          exampleStyle.setStroke(newStroke ? new Stroke(newStroke) : null);
+          if (newImage?.points) {
+            // exampleStyle.setImage(new RegularShape(newImage));
+          } else if (newImage?.src) {
+            exampleStyle.setImage(new Icon(newImage));
+          } else {
+            exampleStyle.setImage(null);
+          }
+        });
+      });
+      return {
+        styleOptions,
+        defaultStyleOptions,
+        VectorStyleMenus,
+      };
+    },
+  };
+</script>

package/plugins/@vcmap-show-case/window-tester/WindowExample.vue CHANGED Viewed

@@ -20,9 +20,11 @@
   import { getLogger } from '@vcsuite/logger';
   import { WindowSlot, VcsFormButton } from '@vcmap/ui';
-  import VcsContent from './windowExampleContent.vue';
+  import WindowExampleToggleChild from './windowExampleToggleChild.vue';
+  import WindowExampleContent from './windowExampleContent.vue';
   import MyCustomHeader from './myCustomHeader.vue';
   import EmptyComponent from './emptyComponent.vue';
+  import { name as owner } from './package.json';
   const showTestClass = ref(false);
@@ -34,7 +36,7 @@
         {
           id: 'dynamicLeft',
           headerTitle: 'Example dynamicLeft',
-          component: VcsContent,
+          component: WindowExampleToggleChild,
           slot: WindowSlot.DYNAMIC_LEFT,
         },
         {
@@ -42,7 +44,7 @@
           state: {
             headerTitle: 'Example dynamicLeft2',
           },
-          component: VcsContent,
+          component: WindowExampleToggleChild,
           slot: WindowSlot.DYNAMIC_LEFT,
         },
         {
@@ -50,7 +52,7 @@
           state: {
             headerTitle: 'Example dynamicLeft2 with 1000px width',
           },
-          component: VcsContent,
+          component: WindowExampleToggleChild,
           slot: WindowSlot.DYNAMIC_LEFT,
           position: {
             width: '1000px',
@@ -61,7 +63,7 @@
           state: {
             headerTitle: 'Example dynamicRight',
           },
-          component: VcsContent,
+          component: WindowExampleContent,
           headerComponent: MyCustomHeader,
           slot: WindowSlot.DYNAMIC_RIGHT,
           props: {
@@ -73,7 +75,7 @@
           state: {
             headerTitle: 'Example dynamicRight2',
           },
-          component: VcsContent,
+          component: WindowExampleContent,
           slot: WindowSlot.DYNAMIC_RIGHT,
         },
         {
@@ -82,7 +84,7 @@
             headerTitle: 'Example static',
             styles: { 'background-color': 'red' },
           },
-          component: EmptyComponent,
+          component: WindowExampleToggleChild,
           slot: WindowSlot.STATIC,
         },
         {
@@ -103,7 +105,7 @@
           state: {
             headerTitle: 'Example position1 relative',
           },
-          component: VcsContent,
+          component: WindowExampleToggleChild,
           position: {
             left: '30%',
             right: '30%',
@@ -117,7 +119,7 @@
             hideHeader: false,
             headerTitle: 'Example position2 absolute',
           },
-          component: VcsContent,
+          component: WindowExampleToggleChild,
           position: {
             left: '200px',
             top: '300px',
@@ -155,10 +157,7 @@
             const windowComponentOptions = exampleWindows.find(
               (item) => item.id === windowId,
             );
-            app.windowManager.add(
-              windowComponentOptions,
-              'WindowManagerExample',
-            );
+            app.windowManager.add(windowComponentOptions, owner);
           }
         },
         examples: exampleWindows.map((item) => item.id),

package/plugins/@vcmap-show-case/window-tester/windowExampleToggleChild.vue ADDED Viewed

@@ -0,0 +1,44 @@
+<template>
+  <v-container>
+    <VcsFormButton @click="toggle">toggle child</VcsFormButton>
+  </v-container>
+</template>
+<style scoped></style>
+<script>
+  import { VContainer } from 'vuetify/lib';
+  import { VcsFormButton, WindowSlot } from '@vcmap/ui';
+  import { inject } from 'vue';
+  import WindowExampleContent from './windowExampleContent.vue';
+  import { name as owner } from './package.json';
+  export default {
+    name: 'WindowExampleContent',
+    components: { VContainer, VcsFormButton },
+    setup(props, { attrs }) {
+      const app = inject('vcsApp');
+      const parentId = attrs['window-state'].id;
+      const childId = `dynamicChild-${parentId}`;
+      return {
+        toggle(e) {
+          if (app.windowManager.has(childId)) {
+            app.windowManager.remove(childId);
+          } else {
+            e.stopPropagation();
+            app.windowManager.add(
+              {
+                id: childId,
+                parentId,
+                headerTitle: 'Example dynamicChild',
+                component: WindowExampleContent,
+                slot: WindowSlot.DYNAMIC_CHILD,
+              },
+              owner,
+            );
+          }
+        },
+      };
+    },
+  };
+</script>

package/public/assets/style/icon-marker-blue.png ADDED Viewed

Binary file

package/public/assets/style/icon-marker-green.png ADDED Viewed

Binary file