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

package/src/components/icons/WandIcon.vue

@@ -2,164 +2,116 @@
 
 <template>
   <svg
-    id="icon_wizard"
     xmlns="http://www.w3.org/2000/svg"
     width="16"
     height="16"
     viewBox="0 0 16 16"
   >
     <g id="wand" transform="translate(1.706 1.705)">
-      <g
-        id="Gruppe_1465"
-        data-name="Gruppe 1465"
-        transform="translate(0 10.491)"
-      >
-        <g id="Gruppe_1464" data-name="Gruppe 1464">
+      <g id="Gruppe_1465" transform="translate(0 10.491)">
+        <g id="Gruppe_1464">
           <path
             id="Pfad_540"
-            data-name="Pfad 540"
             d="M1.574,22.1a.476.476,0,0,1-.367-.157L.157,20.892a.507.507,0,0,1,0-.734.507.507,0,0,1,.734,0l1.049,1.049a.507.507,0,0,1,0,.734A.476.476,0,0,1,1.574,22.1Z"
             transform="translate(0 -20)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g
-        id="Gruppe_1467"
-        data-name="Gruppe 1467"
-        transform="translate(1.049 1.049)"
-      >
-        <g id="Gruppe_1466" data-name="Gruppe 1466">
+      <g id="Gruppe_1467" transform="translate(1.049 1.049)">
+        <g id="Gruppe_1466">
           <path
             id="Pfad_541"
-            data-name="Pfad 541"
             d="M2.525,13.54a.476.476,0,0,1-.367-.157.507.507,0,0,1,0-.734L12.648,2.157a.519.519,0,1,1,.734.734L2.892,13.382A.476.476,0,0,1,2.525,13.54Z"
             transform="translate(-2 -2)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g
-        id="Gruppe_1469"
-        data-name="Gruppe 1469"
-        transform="translate(10.491 0)"
-      >
-        <g id="Gruppe_1468" data-name="Gruppe 1468">
+      <g id="Gruppe_1469" transform="translate(10.491 0)">
+        <g id="Gruppe_1468">
           <path
             id="Pfad_542"
-            data-name="Pfad 542"
             d="M21.574,2.1a.476.476,0,0,1-.367-.157L20.157.892a.507.507,0,0,1,0-.734.507.507,0,0,1,.734,0l1.049,1.049a.507.507,0,0,1,0,.734A.476.476,0,0,1,21.574,2.1Z"
             transform="translate(-20 0)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g id="Gruppe_1471" data-name="Gruppe 1471" transform="translate(0 0)">
-        <g id="Gruppe_1470" data-name="Gruppe 1470">
+      <g id="Gruppe_1471" transform="translate(0 0)">
+        <g id="Gruppe_1470">
           <path
             id="Pfad_543"
-            data-name="Pfad 543"
             d="M.525,11.54a.476.476,0,0,1-.367-.157.507.507,0,0,1,0-.734L10.648.157a.507.507,0,0,1,.734,0,.507.507,0,0,1,0,.734L.892,11.382A.476.476,0,0,1,.525,11.54Z"
             transform="translate(0 0)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g
-        id="Gruppe_1473"
-        data-name="Gruppe 1473"
-        transform="translate(8.393 2.098)"
-      >
-        <g id="Gruppe_1472" data-name="Gruppe 1472">
+      <g id="Gruppe_1473" transform="translate(8.393 2.098)">
+        <g id="Gruppe_1472">
           <path
             id="Pfad_544"
-            data-name="Pfad 544"
             d="M17.574,6.1a.476.476,0,0,1-.367-.157L16.157,4.892a.519.519,0,0,1,.734-.734l1.049,1.049a.507.507,0,0,1,0,.734A.476.476,0,0,1,17.574,6.1Z"
             transform="translate(-16 -4)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g
-        id="Gruppe_1475"
-        data-name="Gruppe 1475"
-        transform="translate(7.344 7.344)"
-      >
-        <g id="Gruppe_1474" data-name="Gruppe 1474">
+      <g id="Gruppe_1475" transform="translate(7.344 7.344)">
+        <g id="Gruppe_1474">
           <path
             id="Pfad_545"
-            data-name="Pfad 545"
             d="M14.525,16.1A.5.5,0,0,1,14,15.574V14.525a.525.525,0,1,1,1.049,0v1.049A.5.5,0,0,1,14.525,16.1Z"
             transform="translate(-14 -14)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g id="Gruppe_1477" data-name="Gruppe 1477" transform="translate(7.344)">
-        <g id="Gruppe_1476" data-name="Gruppe 1476">
+      <g id="Gruppe_1477" transform="translate(7.344)">
+        <g id="Gruppe_1476">
           <path
             id="Pfad_546"
-            data-name="Pfad 546"
             d="M14.525,2.1A.5.5,0,0,1,14,1.574V.525a.525.525,0,0,1,1.049,0V1.574A.5.5,0,0,1,14.525,2.1Z"
             transform="translate(-14)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g
-        id="Gruppe_1479"
-        data-name="Gruppe 1479"
-        transform="translate(3.147 4.196)"
-      >
-        <g id="Gruppe_1478" data-name="Gruppe 1478">
+      <g id="Gruppe_1479" transform="translate(3.147 4.196)">
+        <g id="Gruppe_1478">
           <path
             id="Pfad_547"
-            data-name="Pfad 547"
             d="M7.574,9.049H6.525A.525.525,0,0,1,6.525,8H7.574a.525.525,0,0,1,0,1.049Z"
             transform="translate(-6 -8)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g
-        id="Gruppe_1481"
-        data-name="Gruppe 1481"
-        transform="translate(10.491 4.196)"
-      >
-        <g id="Gruppe_1480" data-name="Gruppe 1480">
+      <g id="Gruppe_1481" transform="translate(10.491 4.196)">
+        <g id="Gruppe_1480">
           <path
             id="Pfad_548"
-            data-name="Pfad 548"
             d="M21.574,9.049H20.525a.525.525,0,0,1,0-1.049h1.049a.525.525,0,1,1,0,1.049Z"
             transform="translate(-20 -8)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g
-        id="Gruppe_1483"
-        data-name="Gruppe 1483"
-        transform="translate(3.986 0.839)"
-      >
-        <g id="Gruppe_1482" data-name="Gruppe 1482">
+      <g id="Gruppe_1483" transform="translate(3.986 0.839)">
+        <g id="Gruppe_1482">
           <path
             id="Pfad_549"
-            data-name="Pfad 549"
             d="M9.279,3.8a.476.476,0,0,1-.367-.157L7.757,2.492a.519.519,0,0,1,.734-.734l1.1,1.1a.507.507,0,0,1,0,.734A.326.326,0,0,1,9.279,3.8Z"
             transform="translate(-7.6 -1.6)"
             fill="currentColor"
           />
         </g>
       </g>
-      <g
-        id="Gruppe_1485"
-        data-name="Gruppe 1485"
-        transform="translate(9.599 6.452)"
-      >
-        <g id="Gruppe_1484" data-name="Gruppe 1484">
+      <g id="Gruppe_1485" transform="translate(9.599 6.452)">
+        <g id="Gruppe_1484">
           <path
             id="Pfad_550"
-            data-name="Pfad 550"
             d="M19.926,14.451a.476.476,0,0,1-.367-.157l-1.1-1.1a.519.519,0,1,1,.734-.734l1.1,1.1a.507.507,0,0,1,0,.734A.567.567,0,0,1,19.926,14.451Z"
             transform="translate(-18.3 -12.3)"
             fill="currentColor"

package/src/components/lists/VcsList.vue

@@ -324,17 +324,23 @@
        */
       let draggedItem = null;
 
+      const isDraggable = computed(() => {
+        return query.value === '' && props.draggable;
+      });
+
       /**
        * @param {MouseEvent} e
        * @param {number} targetIndex
        */
       function drop(e, targetIndex) {
-        if (draggedItem !== null && targetIndex !== undefined) {
-          emit('item-moved', { item: draggedItem, targetIndex });
+        if (isDraggable.value) {
+          if (draggedItem !== null && targetIndex !== undefined) {
+            emit('item-moved', { item: draggedItem, targetIndex });
+          }
+          draggedItem = null;
+          dragging.value = undefined;
+          document.removeEventListener('mouseup', drop);
         }
-        draggedItem = null;
-        dragging.value = undefined;
-        document.removeEventListener('mouseup', drop);
       }
 
       /**
@@ -343,19 +349,19 @@
        * @param {number} index
        */
       function drag(e, item, index) {
-        dragging.value = index;
-        draggedItem = item;
-        e.dataTransfer.effectAllowed = 'move';
-        document.addEventListener('mouseup', drop);
+        if (isDraggable.value) {
+          dragging.value = index;
+          draggedItem = item;
+          e.dataTransfer.effectAllowed = 'move';
+          document.addEventListener('mouseup', drop);
+        }
       }
 
       return {
         query,
         hovering,
         dragging,
-        isDraggable: computed(() => {
-          return query.value === '' && props.draggable;
-        }),
+        isDraggable,
         borderBottom,
         borderTop,
         lightenEven,

package/src/components/plugins/AbstractConfigEditor.vue

@@ -0,0 +1,84 @@
+<template>
+  <v-container class="pa-0">
+    <v-form v-model="isValid" @submit.prevent="submit">
+      <slot />
+      <div class="d-flex gap-2 px-2 pt-2 pb-1">
+        <div class="d-flex gap-2 w-full justify-start">
+          <VcsFormButton v-if="showReset" icon="$vcsReturn" @click="reset" />
+        </div>
+        <div class="d-flex gap-2 w-full justify-end">
+          <VcsFormButton type="submit" variant="filled" :disabled="!isValid">
+            {{ $t('components.apply') }}
+          </VcsFormButton>
+          <VcsFormButton @click.stop="cancel">
+            {{ $t('components.cancel') }}
+          </VcsFormButton>
+          <VcsActionButtonList :actions="actions" button="VcsFormButton" />
+        </div>
+      </div>
+    </v-form>
+  </v-container>
+</template>
+
+<script>
+  import { VContainer, VForm } from 'vuetify/lib';
+  import { ref, inject } from 'vue';
+  import VcsFormButton from '../buttons/VcsFormButton.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+
+  /**
+   * @description Basic wrapper for all config editor components using {@link https://vuetifyjs.com/en/api/v-form/ |vuetify form}.
+   * Providing a footer with submit, cancel and optionally reset button.
+   * @vue-prop {boolean} [showReset=false] - Flag to show a reset button in the footer. You need to handle @reset in a child component.
+   * @vue-prop {Array<VcsAction>} [actions] - Optional actions rendered as ActionButtonList in the footer.
+   * @vue-event {Event} submit - Event fired on clicking the submit button.
+   * @vue-event {Event} cancel - Event fired on clicking the cancel button.
+   * @vue-event {Event} reset - Event fired on clicking the reset button.
+   */
+  export default {
+    name: 'AbstractConfigEditor',
+    components: {
+      VContainer,
+      VForm,
+      VcsFormButton,
+      VcsActionButtonList,
+    },
+    props: {
+      showReset: {
+        type: Boolean,
+        default: false,
+      },
+      actions: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    setup(props, { attrs, emit }) {
+      const app = inject('vcsApp');
+
+      const close = () => {
+        if (app.windowManager.has(attrs['window-state'].id)) {
+          app.windowManager.remove(attrs['window-state'].id);
+        }
+      };
+
+      return {
+        isValid: ref(true),
+        submit(e) {
+          close();
+          emit('submit', e);
+        },
+        cancel(e) {
+          close();
+          attrs.setConfig();
+          emit('cancel', e);
+        },
+        reset(e) {
+          emit('reset', e);
+        },
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/src/components/style/VcsImageSelector.vue

@@ -74,14 +74,15 @@
               :min="input.range?.[0] || 0"
               :max="input.range?.[1] || undefined"
               :rules="[
-                (v) => !input.isRequired || !!v || 'components.style.required',
+                (v) =>
+                  !input.isRequired || !!v || 'components.validation.required',
                 (v) =>
                   !input.range ||
                   (!input.isRequired && !v) ||
                   between(v, input.range) ||
-                  `${$t('components.style.allowedRange')}: ${input.range.join(
-                    ' - ',
-                  )}`,
+                  `${$t(
+                    'components.validation.allowedRange',
+                  )}: ${input.range.join(' - ')}`,
               ]"
               :show-spin-buttons="true"
             />
@@ -458,7 +459,7 @@
                 if (Array.isArray(props.value?.scale)) {
                   return props.value.scale[index];
                 } else {
-                  return props.value.scale;
+                  return props.value?.scale;
                 }
               },
               set(value) {

package/src/components/style/VcsTextSelector.vue

@@ -32,7 +32,7 @@
             type="number"
             unit="px"
             v-model="fontSize"
-            :rules="[(v) => (!!v && v > 0) || 'components.style.notValid']"
+            :rules="[(v) => (!!v && v > 0) || 'components.validation.notValid']"
           />
         </v-col>
       </v-row>

package/src/components/tables/VcsDataTable.vue

@@ -52,7 +52,7 @@
       <template v-slot:header.data-table-select="{ props, on }">
         <div v-if="on">
           <v-icon
-            v-if="value.length === totalNumber"
+            v-if="props.value"
             @click="on.input(false)"
             class="vcs-select-icon"
           >