npm - @vcmap/ui - Versions diffs - 6.0.0-rc.1 → 6.0.0-rc.2 - Mend

@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.2

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

package/dist/assets/ui.js CHANGED Viewed

	@@ -1 +1 @@
1	- export * from "./ui.~~715986~~.js";
1	+ export * from "./ui.7c276c.js";

package/dist/assets/vue.js CHANGED Viewed

	@@ -1 +1 @@
1	- export * from "./vue.~~0f2c53~~.js";
1	+ export * from "./vue.a3cd64.js";

package/dist/assets/{vuetify.28d881.js → vuetify.4d18fe.js} RENAMED Viewed

@@ -13,7 +13,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify.28d881.css');import { watch as q, onScopeDispose as et, effectScope as Ul, shallowRef as U, Fragment as le, reactive as vt, computed as y, watchEffect as pe, toRefs as ia, capitalize as pn, isVNode as Rc, Comment as Nc, readonly as Ha, unref as nt, warn as za, getCurrentInstance as Hc, ref as W, provide as _e, inject as ge, defineComponent as zc, camelize as Vr, h as Wt, toRaw as at, createVNode as r, mergeProps as H, onBeforeUnmount as lt, nextTick as ye, onDeactivated as Wc, onActivated as jc, Suspense as Pr, TransitionGroup as Kl, Transition as Nt, isRef as xn, toRef as L, onBeforeMount as Ir, withDirectives as Ae, resolveDirective as ot, vShow as wt, onMounted as Ke, onUpdated as Yc, Text as Gc, resolveDynamicComponent as Uc, markRaw as Kc, Teleport as qc, cloneVNode as Xc, createTextVNode as Vt, onUnmounted as Zc, onBeforeUpdate as Qc, withModifiers as Pl, toDisplayString as Jc, vModelText as ed, resolveComponent as td, render as _r } from "./vue.0f2c53.js";
+} await loadCss('./assets/vuetify.4d18fe.css');import { watch as q, onScopeDispose as et, effectScope as Ul, shallowRef as U, Fragment as le, reactive as vt, computed as y, watchEffect as pe, toRefs as ia, capitalize as pn, isVNode as Rc, Comment as Nc, readonly as Ha, unref as nt, warn as za, getCurrentInstance as Hc, ref as W, provide as _e, inject as ge, defineComponent as zc, camelize as Vr, h as Wt, toRaw as at, createVNode as r, mergeProps as H, onBeforeUnmount as lt, nextTick as ye, onDeactivated as Wc, onActivated as jc, Suspense as Pr, TransitionGroup as Kl, Transition as Nt, isRef as xn, toRef as L, onBeforeMount as Ir, withDirectives as Ae, resolveDirective as ot, vShow as wt, onMounted as Ke, onUpdated as Yc, Text as Gc, resolveDynamicComponent as Uc, markRaw as Kc, Teleport as qc, cloneVNode as Xc, createTextVNode as Vt, onUnmounted as Zc, onBeforeUpdate as Qc, withModifiers as Pl, toDisplayString as Jc, vModelText as ed, resolveComponent as td, render as _r } from "./vue.a3cd64.js";
 function it(e, n) {
   let t;
   function a() {

package/dist/assets/vuetify.js CHANGED Viewed

	@@ -1 +1 @@
1	- export * from "./vuetify.~~28d881~~.js";
1	+ export * from "./vuetify.4d18fe.js";

package/dist/index.html CHANGED Viewed

@@ -95,7 +95,7 @@
         }
       }
     </style>
-    <script type="module" crossorigin src="./assets/index-ca7EmZ3d.js"></script>
+    <script type="module" crossorigin src="./assets/index-8eGauqjA.js"></script>
   </head>
   <body style="height: 100vh; margin: 0;">
     <noscript>

package/index.d.ts CHANGED Viewed

@@ -154,6 +154,8 @@ export { default as VcsDatePicker } from "./src/components/form-inputs-controls/
 export type * from "./src/components/form-inputs-controls/VcsDatePicker.vue.d.ts";
 export { default as VcsFormattedNumber } from "./src/components/form-output/VcsFormattedNumber.vue";
 export type * from "./src/components/form-output/VcsFormattedNumber.vue.d.ts";
+export { default as VcsMarkdown } from "./src/components/form-output/VcsMarkdown.vue";
+export type * from "./src/components/form-output/VcsMarkdown.vue.d.ts";
 export { default as VcsTextPage } from "./src/application/VcsTextPage.vue";
 export type * from "./src/application/VcsTextPage.vue.d.ts";
 export { default as VcsList } from "./src/components/lists/VcsList.vue";

package/index.js CHANGED Viewed

@@ -251,6 +251,7 @@ export { default as VcsWizard } from './src/components/form-inputs-controls/VcsW
 export { default as VcsWizardStep } from './src/components/form-inputs-controls/VcsWizardStep.vue';
 export { default as VcsDatePicker } from './src/components/form-inputs-controls/VcsDatePicker.vue';
 export { default as VcsFormattedNumber } from './src/components/form-output/VcsFormattedNumber.vue';
+export { default as VcsMarkdown } from './src/components/form-output/VcsMarkdown.vue';
 export { default as VcsTextPage } from './src/application/VcsTextPage.vue';
 export {
   default as VcsActionList,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.0.0-rc.1",
+  "version": "6.0.0-rc.2",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -44,19 +44,20 @@
     "!plugins/node_modules/"
   ],
   "dependencies": {
+    "@intlify/core-base": "^9.13.1",
     "@vcsuite/check": "^1.1.2",
     "@vcsuite/logger": "^1.0.1",
     "@vcsuite/parsers": "^1.0.3",
-    "dompurify": "^3.0.6",
+    "dompurify": "^3.1.6",
     "fast-deep-equal": "^3.1.3",
-    "marked": "^11.1.0",
+    "marked": "^13.0.2",
     "semver": "^7.5.4",
-    "uuid": "^9.0.0",
+    "uuid": "^10.0.0",
     "vue-i18n": "^9.13.1"
   },
   "peerDependencies": {
-    "@vcmap-cesium/engine": "^4.0.3",
-    "@vcmap/core": "^5.3.0",
+    "@vcmap-cesium/engine": "^10.0.1",
+    "@vcmap/core": "^6.0.0-rc.2",
     "ol": "^7.5.2",
     "vue": "~3.4.27",
     "vuetify": "^3.6.8"

package/plugins/@vcmap-show-case/list-example/src/ListExample.vue CHANGED Viewed

@@ -1,74 +1,46 @@
 <template>
   <v-sheet>
     <VcsFormSection heading="Settings">
-      <v-container class="py-0 px-1">
+      <v-container class="py-0 px-4">
         <v-row no-gutters>
           <v-col>
-            <v-switch
-              v-model="selectable"
-              label="Selectable"
-              class="ma-0"
-              dense
-            />
+            <v-switch v-model="selectable" label="Selectable" />
           </v-col>
           <v-col>
             <v-switch
               :disabled="!selectable"
               v-model="selectSingle"
               label=" Single Select"
-              class="ma-0"
-              dense
             />
           </v-col>
         </v-row>
         <v-row no-gutters>
           <v-col>
-            <v-switch
-              dense
-              v-model="searchable"
-              label="Searchable"
-              class="ma-0"
-            />
+            <v-switch v-model="searchable" label="Searchable" />
           </v-col>
           <v-col>
-            <v-switch
-              dense
-              v-model="draggable"
-              label="Draggable"
-              class="ma-0"
-            />
+            <v-switch v-model="draggable" label="Draggable" />
           </v-col>
         </v-row>
         <v-row no-gutters>
           <v-col>
             <v-switch
-              dense
               v-model="prependIndex"
               label="Prepend Index"
               class="ma-0"
             />
           </v-col>
           <v-col>
-            <v-switch
-              dense
-              v-model="appendIndex"
-              label="Append Index"
-              class="ma-0"
-            />
+            <v-switch v-model="appendIndex" label="Append Index" />
           </v-col>
         </v-row>
       </v-container>
     </VcsFormSection>
     <VcsFormSection heading="Title">
-      <v-container class="py-0 px-1">
+      <v-container class="py-0 px-4">
         <v-row no-gutters>
           <v-col>
-            <v-switch
-              dense
-              v-model="showTitle"
-              label="Show Title"
-              class="ma-0"
-            />
+            <v-switch v-model="showTitle" label="Show Title" />
           </v-col>
           <v-col>
             <vcs-text-field
@@ -84,28 +56,22 @@
               v-model="titleActions"
               label="Title Actions"
               class="ma-0"
-              dense
             />
           </v-col>
           <v-col>
-            <v-switch
-              dense
-              v-model="titleIcon"
-              label="Title Icon"
-              class="ma-0"
-            />
+            <v-switch v-model="titleIcon" label="Title Icon" class="ma-0" />
           </v-col>
         </v-row>
       </v-container>
     </VcsFormSection>
     <VcsFormSection heading="Item">
-      <v-container class="py-1 px-1">
+      <v-container class="py-2 px-4">
         <v-row no-gutters>
           <v-dialog v-model="dialog" width="400">
             <template #activator="{ props }">
               <vcs-form-button v-bind="props"> Add An item </vcs-form-button>
             </template>
-            <v-card class="pa-2">
+            <v-card class="py-2 px-4">
               <v-form @submit.prevent="add">
                 <vcs-text-field
                   v-model="newItem.name"
@@ -117,52 +83,22 @@
                   label="Title"
                   :rules="required"
                 />
+                <v-switch label="visible" v-model="newItem.visible" />
+                <v-switch label="disabled" v-model="newItem.disabled" />
+                <v-switch label="random icon" v-model="newItem.icon" />
+                <v-switch label="hasUpdate" v-model="newItem.hasUpdate" />
                 <v-switch
-                  dense
-                  label="visible"
-                  v-model="newItem.visible"
-                  class="ma-0"
-                />
-                <v-switch
-                  dense
-                  label="disabled"
-                  v-model="newItem.disabled"
-                  class="ma-0"
-                />
-                <v-switch
-                  dense
-                  label="random icon"
-                  v-model="newItem.icon"
-                  class="ma-0"
-                />
-                <v-switch
-                  dense
-                  label="hasUpdate"
-                  v-model="newItem.hasUpdate"
-                  class="ma-0"
-                />
-                <v-switch
-                  dense
                   label="rename action"
                   v-model="newItem.renameAction"
-                  class="ma-0"
-                />
-                <v-switch
-                  dense
-                  label="console.log action"
-                  v-model="newItem.action"
-                  class="ma-0"
                 />
+                <v-switch label="console.log action" v-model="newItem.action" />
                 <v-switch
                   label="console.log on clicked"
                   v-model="newItem.clicked"
-                  class="ma-0"
                 />
                 <v-switch
-                  dense
                   label="console.log selected state"
                   v-model="newItem.selected"
-                  class="ma-0"
                 />
                 <vcs-form-button type="submit"> Add </vcs-form-button>
               </v-form>
@@ -172,7 +108,7 @@
       </v-container>
     </VcsFormSection>
     <VcsFormSection heading="Selection">
-      <v-container class="py-1 px-1">
+      <v-container class="py-2 px-4">
         <v-row no-gutters>
           <template v-if="selectable">
             <v-col>
@@ -238,7 +174,7 @@
     VRow,
     VCol,
   } from 'vuetify/components';
-  import { computed, ref } from 'vue';
+  import { computed, reactive, ref } from 'vue';
   function getRandomIcon() {
     const keys = Object.keys(Icons);
@@ -339,13 +275,13 @@
           (v) => v.length > 0 || 'Input must have a length',
         ],
         add() {
-          const item = {
+          const item = reactive({
             name: newItem.value.name,
             title: newItem.value.title,
             disabled: newItem.value.disabled,
             visible: newItem.value.visible,
             hasUpdate: newItem.value.hasUpdate,
-          };
+          });
           if (newItem.value.icon) {
             item.icon = getRandomIcon();
@@ -368,9 +304,11 @@
           }
           if (newItem.value.clicked) {
-            item.clicked = () => {
-              console.log(`${item.name} just got clicked`);
-            };
+            item.clickedCallbacks = [
+              () => {
+                console.log(`${item.name} just got clicked`);
+              },
+            ];
           }
           if (newItem.value.selected) {

package/plugins/@vcmap-show-case/vector-properties-example/src/VectorPropertiesExample.vue CHANGED Viewed

@@ -6,7 +6,7 @@
           <VcsList
             :items="propertiesToSelectFrom"
             :selectable="true"
-            v-model="propertiesToDisplay"
+            v-model="propertiesSelected"
             title="Select all"
           />
         </v-col>
@@ -29,13 +29,20 @@
           />
         </v-col>
       </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsFormButton @click="() => console.log({ ...featureProperties })"
+            >Log VectorProperties</VcsFormButton
+          >
+        </v-col>
+      </v-row>
     </v-container>
     <VcsVectorPropertiesComponent
       v-model="featureProperties"
       :value-default="defaultOptions"
       :show3-d-properties="is3D"
-      :properties="propertiesToDisplay.map((item) => item.name)"
-      :hide-dividers="hideDividers"
+      :properties="properties"
+      :show-dividers="!hideDividers"
       :expandable="expandable"
       :show-reset="showReset"
     />
@@ -43,12 +50,22 @@
 </template>
 <script>
-  import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
+  import {
+    computed,
+    inject,
+    onMounted,
+    onUnmounted,
+    reactive,
+    ref,
+    shallowRef,
+    watch,
+  } from 'vue';
   import { CesiumMap, VectorLayer, VectorProperties } from '@vcmap/core';
   import {
     VcsVectorPropertiesComponent,
     VcsList,
     VcsCheckbox,
+    VcsFormButton,
   } from '@vcmap/ui';
   import { VSheet, VContainer, VRow, VCol } from 'vuetify/components';
   import { Feature } from 'ol';
@@ -69,6 +86,7 @@
       VcsVectorPropertiesComponent,
       VcsList,
       VcsCheckbox,
+      VcsFormButton,
       VSheet,
       VContainer,
       VRow,
@@ -96,9 +114,10 @@
         },
       });
-      const featureProperties = ref(
+      const featureProperties = shallowRef(
         layer.vectorProperties.getValuesForFeatures([feature]),
       );
+      featureProperties.value.scaleByDistance = [0, 1, 100, 0];
       watch(featureProperties, () => {
         layer.vectorProperties.setValuesForFeatures(featureProperties.value, [
           feature,
@@ -106,10 +125,13 @@
       });
       const defaultOptions = VectorProperties.getDefaultOptions();
-      const propertiesToSelectFrom = Object.keys(defaultOptions).map((key) => ({
-        name: key,
-        title: key,
-      }));
+      const propertiesToSelectFrom = reactive(
+        Object.keys(defaultOptions).map((key) => ({
+          name: key,
+          title: key,
+        })),
+      );
+      const propertiesSelected = shallowRef([...propertiesToSelectFrom]);
       onMounted(() => {
         vcsApp.layers.add(layer);
@@ -128,7 +150,10 @@
         defaultOptions,
         is3D,
         propertiesToSelectFrom,
-        propertiesToDisplay: ref([...propertiesToSelectFrom]),
+        propertiesSelected,
+        properties: computed(() =>
+          propertiesSelected.value.map(({ name }) => name),
+        ),
         hideDividers: ref(false),
         expandable: ref(false),
         showReset: ref(true),

package/plugins/@vcmap-show-case/wizard-example/src/WizardExample.vue CHANGED Viewed

@@ -1,24 +1,20 @@
 <template>
   <VcsWizard v-model.number="step">
     <VcsWizardStep
-      step="1"
-      :complete="step > 1"
+      step="0"
+      :complete="step > 0"
       help-text="1. this is the help text"
       heading="This is the first step"
       v-model.number="step"
     >
-      <template #content>
-        <!-- px-2 because does not contain input components -->
-        <v-container class="px-2 py-0">
-          <div>This is the content of the first step.</div>
-          <VcsFormButton @click="increaseStep()" class="my-2">
-            Next
-          </VcsFormButton>
-        </v-container>
+      <!-- px-2 because does not contain input components -->
+      <div>This is the content of the first step.</div>
+      <template #actions="{ next }">
+        <VcsFormButton @click="next">Next</VcsFormButton>
       </template>
     </VcsWizardStep>
     <VcsWizardStep
-      step="2"
+      step="1"
       editable
       :header-actions="actions.second"
       heading="This is the second step"
@@ -33,35 +29,29 @@
           <li>test</li>
         </ol>
       </template>
-      <template #content>
-        <v-container class="px-1 py-0">
-          <v-form ref="form" v-model="formValid" lazy-validation>
-            <VcsSelect
-              :items="['this', 'is', 'a', 'test']"
-              v-model="selection"
-              placeholder="Select"
-              :rules="[
-                (v) => (!!v && v !== 'this') || 'Please select a valid option.',
-              ]"
-            />
-            <VcsFormButton @click="decreaseStep()"> Back </VcsFormButton>
-          </v-form>
-        </v-container>
-      </template>
-    </VcsWizardStep>
-    <VcsWizardStep step="3" v-model.number="step">
-      <template #header>
-        <div class="d-flex flex-grow-1 flex-row-reverse">
-          <VcsFormButton
-            :disabled="!selection || !formValid"
-            @click="finish()"
-            variant="filled"
-          >
-            Finish
-          </VcsFormButton>
-        </div>
+      <v-form ref="formRef" v-model="formValid" lazy-validation>
+        <VcsSelect
+          :items="['this', 'is', 'a', 'test']"
+          v-model="selection"
+          placeholder="Select"
+          :rules="[
+            (v) => (!!v && v !== 'this') || 'Please select a valid option.',
+          ]"
+        />
+      </v-form>
+      <template #actions="{ prev }">
+        <VcsFormButton @click="prev">Back</VcsFormButton>
       </template>
     </VcsWizardStep>
+    <div class="d-flex flex-grow-1 flex-row-reverse pa-2">
+      <VcsFormButton
+        :disabled="!selection || !formValid"
+        @click="finish()"
+        variant="filled"
+      >
+        Finish
+      </VcsFormButton>
+    </div>
   </VcsWizard>
 </template>
@@ -72,7 +62,7 @@
     VcsFormButton,
     VcsSelect,
   } from '@vcmap/ui';
-  import { VForm, VContainer } from 'vuetify/components';
+  import { VForm } from 'vuetify/components';
   import { ref } from 'vue';
   /** Component to showcase the VcsWizard and VcsWizardStep. */
@@ -84,12 +74,11 @@
       VcsFormButton,
       VcsSelect,
       VForm,
-      VContainer,
     },
     setup() {
-      const step = ref(1);
-      const selection = ref();
-      const form = ref();
+      const step = ref(0);
+      const selection = ref(undefined);
+      const formRef = ref(null);
       const formValid = ref(false);
       const actions = {
         second: [
@@ -103,22 +92,19 @@
           },
         ],
       };
+      function finish() {
+        step.value = 0;
+        formRef.value?.resetValidation();
+      }
       return {
         step,
-        increaseStep() {
-          step.value += 1;
-        },
-        decreaseStep() {
-          step.value -= 1;
-        },
         selection,
         actions,
         formValid,
-        form,
-        finish() {
-          step.value = 1;
-          form.value.reset();
-        },
+        formRef,
+        finish,
       };
     },
   };

package/src/application/VcsApp.vue CHANGED Viewed

@@ -2,9 +2,8 @@
   <v-container class="fill-height pa-0" absolute fluid>
     <VcsSplashScreen
       v-if="splashScreen"
-      v-model="splashScreenRef"
       :options="splashScreen"
-      :window-id="'splashScreen'"
+      v-model="splashScreenRef"
     ></VcsSplashScreen>
     <VcsNavbar />
     <VcsContainer :attribution-action="attributionAction" />

package/src/application/VcsCustomScreen.vue CHANGED Viewed

@@ -2,7 +2,7 @@
   <v-card>
     <div class="px-2 pt-2 pb-1">
       <v-card-text>
-        <div v-html="customScreenText"></div>
+        <VcsMarkdown :content="customScreenText"></VcsMarkdown>
       </v-card-text>
     </div>
   </v-card>
@@ -12,11 +12,12 @@
   import { VCard, VCardText } from 'vuetify/components';
   import { computed, getCurrentInstance } from 'vue';
-  import { parseAndSanitizeMarkdown } from './markdownHelper.js';
+  import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
   export default {
     name: 'VcsCustomScreen',
     components: {
+      VcsMarkdown,
       VCard,
       VCardText,
     },
@@ -30,8 +31,7 @@
       const vm = getCurrentInstance().proxy;
       const dialog = true;
       const customScreenText = computed(() => {
-        const translatedContent = vm.$t(props.content);
-        return parseAndSanitizeMarkdown(translatedContent);
+        return vm.$st(props.content);
       });
       return {

package/src/application/VcsCustomScreen.vue.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     dialog: boolean;
-    customScreenText: import("vue").ComputedRef<string>;
+    customScreenText: import("vue").ComputedRef<any>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     content: {
         type: StringConstructor;

package/src/application/VcsNavbar.vue.d.ts CHANGED Viewed

@@ -42,7 +42,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     config: any;
     logo: import("vue").ComputedRef<any>;
     xs: import("vue").Ref<boolean>;
-    density: import("vue").ComputedRef<"comfortable" | "compact">;
+    density: import("vue").ComputedRef<"compact" | "comfortable">;
     mdAndUp: import("vue").Ref<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;