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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.0.0-rc.2",
+  "version": "6.0.0-rc.5",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -45,47 +45,47 @@
   ],
   "dependencies": {
     "@intlify/core-base": "^9.13.1",
-    "@vcsuite/check": "^1.1.2",
+    "@vcsuite/check": "^2.1.0",
     "@vcsuite/logger": "^1.0.1",
     "@vcsuite/parsers": "^1.0.3",
     "dompurify": "^3.1.6",
     "fast-deep-equal": "^3.1.3",
-    "marked": "^13.0.2",
-    "semver": "^7.5.4",
+    "marked": "^14.0.0",
+    "semver": "^7.6.3",
     "uuid": "^10.0.0",
     "vue-i18n": "^9.13.1"
   },
   "peerDependencies": {
     "@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"
+    "@vcmap/core": "6.0.0-rc.3",
+    "ol": "^10.0.0",
+    "vue": "~3.4.38",
+    "vuetify": "^3.7.0"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.17.17",
     "@vcmap/rollup-plugin-vcs-ol": "^1.0.2",
     "@vcsuite/eslint-config": "^3.0.5",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vitest/coverage-v8": "^1.6.0",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitest/coverage-v8": "^2.0.5",
     "@vue/test-utils": "^2.4.6",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-vuetify": "^2.4.0",
     "histoire": "^0.17.17",
     "jest-canvas-mock": "^2.5.2",
-    "jsdoc": "^3.6.7",
+    "jsdoc": "^4.0.3",
     "jsdoc-plugin-intersection": "^1.0.4",
-    "jsdoc-plugin-typescript": "^2.0.6",
-    "jsdom": "^22.1.0",
+    "jsdoc-plugin-typescript": "^2.2.1",
+    "jsdom": "^24.1.1",
     "resize-observer-polyfill": "1.5.1",
     "rollup-plugin-strip-pragma": "^1.0.0",
-    "sass": "^1.77.1",
-    "tar": "^6.1.14",
+    "sass": "^1.77.8",
+    "tar": "^7.4.3",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
-    "vite-plugin-vuetify": "^2.0.3",
-    "vitest": "^1.6.0",
-    "vue-tsc": "^2.0.17"
+    "vite": "^5.4.1",
+    "vite-plugin-vuetify": "^2.0.4",
+    "vitest": "^2.0.5",
+    "vue-tsc": "^2.0.29"
   },
   "stylelint": {
     "extends": "stylelint-config-standard",

package/plugins/@vcmap-show-case/flight-component-example/src/FlightExample.vue

@@ -17,7 +17,16 @@
 
 <script>
   import { VSheet } from 'vuetify/components';
-  import { provide, ref, shallowRef, nextTick } from 'vue';
+  import {
+    provide,
+    ref,
+    shallowRef,
+    nextTick,
+    toRaw,
+    isReactive,
+    reactive,
+    watch,
+  } from 'vue';
   import { VcsFlightComponent, VcsFormButton } from '@vcmap/ui';
   import { FlightInstance } from '@vcmap/core';
 
@@ -36,6 +45,37 @@
       const hasFlightInstance = ref(true);
       provide('flightInstance', flightInstance);
 
+      const obj = ref({
+        foo: {
+          bar: true,
+          array: [1, 2, 3],
+          obj: {
+            baz: 'abc',
+          },
+        },
+      });
+      console.log('obj', obj);
+      const raw = toRaw(obj);
+      console.log('toRaw obj', raw);
+      console.log('isReactive obj', isReactive(raw));
+      console.log('isReactive foo', isReactive(raw.foo));
+      console.log('isReactive array', isReactive(raw.array));
+
+      const props = reactive({
+        raw,
+      });
+
+      const internal = ref(structuredClone(toRaw(props.raw)));
+
+      watch(
+        internal,
+        (newObj) => {
+          console.log('watch', newObj);
+        },
+        { deep: true },
+      );
+      internal.value.foo.array[2] = 5;
+
       return {
         hasFlightInstance,
         async reset() {

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

@@ -20,13 +20,18 @@
       <template #default>
         <v-container class="py-0 px-1">
           <v-row no-gutters>
-            <v-col class="w-max-half">
-              <VcsLabel html-for="selectInput">
+            <v-col>
+              <VcsLabel
+                :disabled="disabled"
+                html-for="selectInput"
+                tooltip="labelTooltip"
+              >
                 {{ $t('form-inputs-example.select') }}
               </VcsLabel>
             </v-col>
-            <v-col class="w-max-half">
+            <v-col>
               <VcsSelect
+                :disabled="disabled"
                 id="selectInput"
                 loading="primary"
                 :items="selectOptions"
@@ -37,12 +42,13 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="conditionalInput">
+              <VcsLabel :disabled="disabled" html-for="conditionalInput">
                 ConditionalInput
               </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 id="conditionalInput"
                 clearable
                 :rules="[
@@ -54,16 +60,24 @@
             </v-col>
           </v-row>
           <v-row no-gutters>
-            <v-col class="w-max-half">
-              <VcsLabel html-for="arrayInput"> Array Input </VcsLabel>
+            <v-col>
+              <VcsCheckbox :disabled="disabled" label="Checkbox"></VcsCheckbox>
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsLabel :disabled="disabled" html-for="arrayInput">
+                Array Input
+              </VcsLabel>
             </v-col>
           </v-row>
           <v-row no-gutters>
             <v-col>
               <VcsChipArrayInput
+                :disabled="disabled"
                 id="arrayInput"
                 type="number"
-                v-model="array"
+                v-model="state.arrayInput"
                 :rules="[arrayTest]"
               />
             </v-col>
@@ -71,6 +85,7 @@
           <v-row no-gutters>
             <v-col>
               <VcsChipArrayInput
+                :disabled="disabled"
                 id="arrayInput"
                 v-model="state.arrayInputString"
                 column
@@ -80,6 +95,7 @@
           <v-row no-gutters>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 v-model="state.initialTextInput"
                 :rules="[isValidText]"
                 :loading="
@@ -98,7 +114,7 @@
           <v-row no-gutters>
             <v-col>
               <VcsTextArea
-                :dense="dense"
+                :disabled="disabled"
                 :rules="[(v) => !!v || 'text area must not be empty']"
                 placeholder="This is a text area"
                 tooltip="This is a tooltip"
@@ -108,10 +124,13 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="emailInput" required> Email </VcsLabel>
+              <VcsLabel :disabled="disabled" html-for="emailInput" required>
+                Email
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 id="emailInput"
                 type="email"
                 :rules="[isValidEmail]"
@@ -122,10 +141,13 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="prependedInput"> String With Icon </VcsLabel>
+              <VcsLabel :disabled="disabled" html-for="prependedInput">
+                String With Icon
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 id="prependedInput"
                 prepend-icon="mdi-map-marker"
                 v-model="state.prependedInput"
@@ -135,10 +157,13 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="fileInput"> File input </VcsLabel>
+              <VcsLabel :disabled="disabled" html-for="fileInput">
+                File input
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsFileInput
+                :disabled="disabled"
                 id="fileInput"
                 multiple
                 tooltip="Click to select a file."
@@ -148,10 +173,12 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="dateInput"> Date </VcsLabel>
+              <VcsLabel :disabled="disabled" html-for="dateInput">
+                Date
+              </VcsLabel>
             </v-col>
             <v-col>
-              <VcsDatePicker id="dateInput" v-model="state.dateInput" />
+              <VcsDatePicker :disabled="disabled" id="dateInput" />
             </v-col>
           </v-row>
         </v-container>
@@ -165,10 +192,13 @@
         <v-container class="py-0 px-1">
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="numberInput"> NumberInput </VcsLabel>
+              <VcsLabel :disabled="disabled" html-for="numberInput">
+                NumberInput
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 id="numberInput"
                 type="number"
                 step="1"
@@ -180,12 +210,14 @@
           </v-row>
           <v-row no-gutters class="align-center">
             <v-col>
-              <VcsLabel html-for="sliderInput"> Slider </VcsLabel>
+              <VcsLabel :disabled="disabled" html-for="sliderInput">
+                Slider
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsSlider
+                :disabled="disabled"
                 id="sliderInput"
-                :dense="dense"
                 type="number"
                 step="1"
                 v-model.number="state.numberInput"
@@ -194,53 +226,53 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="formattedNumber">
+              <VcsLabel :disabled="disabled" html-for="formattedNumber">
                 VcsFormattedNumber
               </VcsLabel>
             </v-col>
             <v-col class="d-flex justify-end">
               <VcsFormattedNumber
+                :disabled="disabled"
                 id="formattedNumber"
                 :value="state.numberInput"
                 unit="cm"
                 :fraction-digits="1"
-                :dense="dense"
               />
             </v-col>
           </v-row>
           <v-row no-gutters class="gc-2">
             <v-col>
               <VcsFormattedNumber
+                :disabled="disabled"
                 id="formattedNumber"
                 :value="state.numberInput"
                 prefix="X"
                 unit="cm"
                 :fraction-digits="1"
-                :dense="dense"
               />
             </v-col>
             <v-col>
               <VcsFormattedNumber
+                :disabled="disabled"
                 id="formattedNumber"
                 :value="state.numberInput"
                 prefix="Y"
                 unit="cm"
                 :fraction-digits="1"
-                :dense="dense"
               />
             </v-col>
             <v-col>
               <VcsFormattedNumber
+                :disabled="disabled"
                 id="formattedNumber"
                 :value="state.numberInput"
                 prefix="Z"
                 unit="cm"
                 :fraction-digits="1"
-                :dense="dense"
               />
             </v-col>
           </v-row>
-          <VcsCoordinate v-model="array" />
+          <VcsCoordinate :disabled="disabled" v-model="state.arrayInput" />
         </v-container>
       </template>
     </VcsFormSection>
@@ -254,6 +286,7 @@
         <v-row no-gutters>
           <v-col>
             <VcsRadio
+              :disabled="disabled"
               :items="[
                 ...selectOptions,
                 {
@@ -270,12 +303,13 @@
         </v-row>
         <v-row no-gutters>
           <v-col>
-            <VcsLabel> Radio with img label </VcsLabel>
+            <VcsLabel :disabled="disabled"> Radio with img label </VcsLabel>
           </v-col>
         </v-row>
         <v-row no-gutters>
           <v-col>
             <VcsRadio
+              :disabled="disabled"
               v-model="state.selected"
               :items="[
                 { value: 'AAAAAAAA', src: 'mdi-circle-outline' },
@@ -283,7 +317,6 @@
                 { value: 'C', src: 'mdi-triangle-outline' },
                 { value: 'D', src: 'mdi-square-outline' },
               ]"
-              :dense="dense"
               :rules="[(v) => v !== 'D' || 'Square is not allowed']"
               tooltip="This is a radio grid"
               inline
@@ -313,6 +346,7 @@
         <v-row no-gutters>
           <v-col>
             <VcsCheckbox
+              :disabled="disabled"
               id="checkboxInput"
               label="CheckboxInput"
               tooltip="This is a checkbox for terms of usage"
@@ -324,6 +358,7 @@
           </v-col>
           <v-col>
             <VcsFormButton
+              :disabled="disabled"
               :is-active="state.checkboxInput"
               @click="state.checkboxInput = !state.checkboxInput"
               tooltip="toggle button"
@@ -349,29 +384,35 @@
         <v-container class="py-0 px-1">
           <v-row>
             <v-col cols="1">
-              <VcsLabel html-for="textInput" class="text-caption"> 1 </VcsLabel>
+              <VcsLabel
+                :disabled="disabled"
+                html-for="textInput"
+                class="text-caption"
+              >
+                1
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsSelect
+                :disabled="disabled"
                 :items="[
                   { value: 'one', i18n: 'form-inputs-example.numbers.one' },
                   { value: 'two', i18n: 'form-inputs-example.numbers.two' },
                   { value: 'three', i18n: 'form-inputs-example.numbers.three' },
                 ]"
                 :item-text="(item) => item.i18n"
-                :dense="dense"
                 placeholder="Numbers"
               />
             </v-col>
             <v-col>
               <VcsSelect
+                :disabled="disabled"
                 :items="[
                   { value: 'Anna', fullName: 'Annabella' },
                   { value: 'Bella', fullName: 'Belladonna' },
                   { value: 'Claudi', fullName: 'Claudine' },
                 ]"
                 :item-text="(item) => item.fullName"
-                :dense="dense"
                 multiple
                 v-model="state.selectedMultiple"
                 :rules="[
@@ -404,16 +445,15 @@
       <template #default>
         <v-container class="py-0 px-1">
           <v-row no-gutters>
-            <v-col class="w-max-half">
+            <v-col>
               <VcsLabel html-for="selectInput2" disabled>
                 {{ $t('form-inputs-example.select') }}
               </VcsLabel>
             </v-col>
-            <v-col class="w-max-half">
+            <v-col>
               <VcsSelect
                 id="selectInput2"
                 :items="selectOptions"
-                :dense="dense"
                 :rules="[(v) => v !== 'D' || 'D is not allowed']"
                 v-model="state.selected"
                 :disabled="true"
@@ -499,7 +539,7 @@
         type: Array,
         required: true,
       },
-      dense: {
+      disabled: {
         type: Boolean,
         required: true,
       },
@@ -516,7 +556,6 @@
       return {
         // no object-destruction of reactive objects! or use toRef()
         state: plugin.state,
-        array: ref([1, 2, 3]),
         // do not put the whole config here, since it would become reactive
         selectOptions: plugin.config.selectOptions,
         form,

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

@@ -1,21 +1,17 @@
 import { reactive, ref } from 'vue';
 
 export default function createExampleActions() {
-  const dense = ref(false);
+  const disabled = ref(false);
   const showSection = ref(true);
 
   const actions = [
     reactive({
-      name: 'denseSelection',
-      title: 'change row height',
-      icon: dense.value
-        ? 'mdi-arrow-split-horizontal'
-        : 'mdi-arrow-collapse-vertical',
+      name: 'disabledSelection',
+      title: 'Changed Disabled',
+      icon: disabled.value ? 'mdi-airplane' : 'mdi-airplane-off',
       callback() {
-        dense.value = !dense.value;
-        this.icon = dense.value
-          ? 'mdi-arrow-split-horizontal'
-          : 'mdi-arrow-collapse-vertical';
+        disabled.value = !disabled.value;
+        this.icon = disabled.value ? 'mdi-airplane' : 'mdi-airplane-off';
       },
     }),
     {
@@ -32,5 +28,5 @@ export default function createExampleActions() {
     },
   ];
 
-  return { actions, dense, showSection };
+  return { actions, disabled, showSection };
 }

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

@@ -178,7 +178,7 @@ export default function formInputsExample(config) {
     getSerializedState,
     setSerializedState,
     onVcsAppMounted(app) {
-      const { actions, dense } = createExampleActions();
+      const { actions, disabled } = createExampleActions();
 
       const { action, destroy } = createToggleAction(
         {
@@ -199,7 +199,7 @@ export default function formInputsExample(config) {
           },
           props: reactive({
             actions,
-            dense,
+            disabled,
           }),
         },
         app.windowManager,

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

@@ -87,9 +87,10 @@
                 <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 label="rename action" v-model="newItem.renamable" />
                 <v-switch
-                  label="rename action"
-                  v-model="newItem.renameAction"
+                  label="toggle rename action"
+                  v-model="newItem.toggleRename"
                 />
                 <v-switch label="console.log action" v-model="newItem.action" />
                 <v-switch
@@ -162,7 +163,6 @@
     VcsTextField,
     Icons,
     VcsFormSection,
-    createListItemRenameAction,
   } from '@vcmap/ui';
   import {
     VSwitch,
@@ -247,7 +247,8 @@
         disabled: false,
         visible: true,
         icon: false,
-        renameAction: false,
+        renamable: false,
+        toggleRename: false,
         action: false,
         clicked: false,
         selected: false,
@@ -281,6 +282,7 @@
             disabled: newItem.value.disabled,
             visible: newItem.value.visible,
             hasUpdate: newItem.value.hasUpdate,
+            renamable: newItem.value.renamable,
           });
 
           if (newItem.value.icon) {
@@ -289,9 +291,13 @@
 
           item.actions = [];
 
-          if (newItem.value.renameAction) {
-            item.rename = false;
-            item.actions.push(createListItemRenameAction(item));
+          if (newItem.value.toggleRename) {
+            item.actions.push({
+              name: 'toggle rename',
+              callback() {
+                item.renamable = !item.renamable;
+              },
+            });
           }
 
           if (newItem.value.action) {
@@ -320,6 +326,13 @@
               }
             };
           }
+
+          if (newItem.value.renamable) {
+            item.titleChanged = (newTitle) => {
+              item.title = newTitle;
+            };
+          }
+
           items.value.push(item);
           newItem.value = {
             name: 'foo',
@@ -327,7 +340,7 @@
             disabled: false,
             visible: true,
             icon: false,
-            renameAction: false,
+            renamable: false,
             action: false,
             clicked: false,
             selected: false,

package/plugins/@vcmap-show-case/project-selector/src/ModulesListComponent.vue

@@ -10,29 +10,36 @@
         @click="toggle(module)"
       >
         {{ module.name || module.configUrl }}
-        <VcsTooltip
+        <v-icon
           v-if="module.description && toggleable"
-          :tooltip="module.description"
+          right
+          v-bind="{ ...$attrs, ...props }"
         >
-          <template #activator="{ props }">
-            <v-icon right v-bind="{ ...$attrs, ...props }">
-              mdi-help-circle
-            </v-icon>
-          </template>
-        </VcsTooltip>
+          mdi-help-circle
+        </v-icon>
+        <v-tooltip
+          v-if="module.description && toggleable"
+          :text="module.description"
+          activator="parent"
+        />
       </v-chip>
     </v-list>
   </v-container>
 </template>
 
 <script>
-  import { VcsTooltip } from '@vcmap/ui';
-  import { VChip, VContainer, VIcon, VList } from 'vuetify/components';
+  import {
+    VChip,
+    VContainer,
+    VIcon,
+    VList,
+    VTooltip,
+  } from 'vuetify/components';
 
   export default {
     name: 'ModulesListComponent',
     components: {
-      VcsTooltip,
+      VTooltip,
       VContainer,
       VList,
       VChip,

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

@@ -65,6 +65,7 @@ export default function searchExample(config) {
         config.lines ?? defaultLines,
         config.withIcon ?? true,
         config.withPOI ?? true,
+        config.withActions ?? true,
       );
       app.search.add(impl, name);
     },