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

package/src/components/form-inputs-controls/VcsChipArrayInput.vue

@@ -0,0 +1,282 @@
+<template>
+  <div id="vcs-chip-array-input" class="d-flex d-inline-block align-center">
+    <v-btn
+      v-if="hasScrollbar"
+      :dense="isDense"
+      x-small
+      icon
+      :ripple="false"
+      elevation="0"
+      @click="vcsChipArrayInput.scrollLeft -= scrollDx"
+    >
+      <v-icon>mdi-chevron-left</v-icon>
+    </v-btn>
+    <div
+      id="vcs-chip-array-input"
+      ref="vcsChipArrayInput"
+      class="d-flex d-inline-block"
+      :class="{
+        'overflow-x-auto': !column,
+        'hide-scrollbar': !column,
+        row: column,
+        'ma-1': !hasScrollbar,
+      }"
+    >
+      <div v-for="(item, index) in value" :key="index" class="py-1 pr-1">
+        <v-chip
+          v-if="selected !== index"
+          v-bind="{ ...$attrs }"
+          :small="isDense"
+          :disabled="disabled"
+          :close="deletableChips"
+          @click="select(index)"
+          @click:close="remove(index)"
+          class="pa-2"
+        >
+          <span class="text-truncate d-inline-block">{{ item }}</span>
+        </v-chip>
+        <VcsTextField
+          v-else
+          hide-details
+          :dense="isDense"
+          rounded
+          filled
+          autofocus
+          no-padding
+          :height="24"
+          v-bind="{ ...$attrs }"
+          v-model="editValue"
+          @keydown.esc="selected = -1"
+          @blur="selected = -1"
+          @keydown.enter="submitChange"
+          @click:append="submitChange"
+          @update:error="(err) => (isEditValid = !err)"
+          append-icon="mdi-check"
+          :style="{ width: `${inputWidth}px` }"
+        />
+      </div>
+      <div class="py-1">
+        <v-chip
+          v-if="adding === false"
+          v-bind="{ ...$attrs }"
+          :small="isDense"
+          :disabled="disabled"
+          @click="adding = true"
+          class="pa-2"
+        >
+          <v-icon>$vcsPlus</v-icon>
+        </v-chip>
+        <VcsTextField
+          v-else
+          hide-details
+          :dense="isDense"
+          rounded
+          filled
+          autofocus
+          no-padding
+          :height="24"
+          class="vcs-inside-chip"
+          v-model="newValue"
+          v-bind="{ ...$attrs }"
+          @keydown.enter="add(newValue)"
+          @keydown.esc="cancel"
+          @blur="cancel"
+          @click:append="add(newValue)"
+          @update:error="(err) => (isNewValid = !err)"
+          append-icon="mdi-check"
+          :style="{ width: `${inputWidth}px` }"
+        />
+      </div>
+    </div>
+    <v-btn
+      v-if="hasScrollbar"
+      :dense="isDense"
+      x-small
+      icon
+      :ripple="false"
+      elevation="0"
+      @click="vcsChipArrayInput.scrollLeft += scrollDx"
+    >
+      <v-icon>mdi-chevron-right</v-icon>
+    </v-btn>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .hide-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .v-chip {
+    display: flex;
+    max-width: 260px;
+    padding: 0 8px;
+    .v-chip__content {
+      display: flex;
+    }
+  }
+  .vcs-inside-chip {
+    ::v-deep {
+      .v-input__slot {
+        .v-input__append-inner {
+          margin-top: 5px;
+        }
+      }
+      .v-text-field--filled > .v-input__control > .v-input__slot,
+      .v-text-field--outlined > .v-input__control > .v-input__slot {
+        min-height: unset;
+      }
+    }
+  }
+</style>
+
+<script>
+  import { computed, nextTick, onMounted, ref } from 'vue';
+  import { VBtn, VChip, VIcon } from 'vuetify/lib';
+  import VcsTextField from './VcsTextField.vue';
+
+  /**
+   * @description Renders elements of an array as chips with an input field to edit or add new elements.
+   * Provides two height options depending on "dense" property
+   * Provides VcsTooltip to show error messages on focus
+   * When clicking esc key, previous input is restored.
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+   * @vue-prop {string}                                 [type] - The input type (string or number)
+   * @vue-prop {boolean}                                [disabled] - Disables adding or removing new elements
+   * @vue-prop {boolean}                                [column] - Remove horizontal pagination and wrap items as needed
+   * @vue-prop {boolean}                                [scrollDx=20] - scroll amount in px
+   * @vue-prop {boolean}                                [deletableChips=true] - Adds a delete button to elements to remove them from array
+   * @vue-prop {number}                                 [inputWidth=50] - Width of the text fields in px.
+   */
+  export default {
+    name: 'VcsChipArrayInput',
+    components: {
+      VBtn,
+      VcsTextField,
+      VChip,
+      VIcon,
+    },
+    props: {
+      value: {
+        type: Array,
+        required: true,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+      deletableChips: {
+        type: Boolean,
+        default: true,
+      },
+      inputWidth: {
+        type: Number,
+        default: 50,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      column: {
+        type: Boolean,
+        default: false,
+      },
+      scrollDx: {
+        type: Number,
+        default: 20,
+      },
+    },
+    setup(props, { attrs, emit }) {
+      const selected = ref(-1);
+      const adding = ref(false);
+      const isEditValid = ref(true);
+      const editValue = ref(undefined);
+      const isNewValid = ref(true);
+      const newValue = ref(undefined);
+      const vcsChipArrayInput = ref();
+      const hasScrollbar = ref();
+      const isDense = computed(() => attrs.dense !== false);
+
+      function emitValue(value) {
+        if (attrs.type === 'number') {
+          emit(
+            'input',
+            value.map((v) => parseFloat(v)),
+          );
+        } else {
+          emit('input', value);
+        }
+      }
+
+      function updateHasScrollbar() {
+        if (!props.column) {
+          hasScrollbar.value =
+            vcsChipArrayInput.value.scrollWidth -
+              vcsChipArrayInput.value.clientWidth >
+            36; // size of the scroll buttons
+        }
+      }
+
+      onMounted(() => updateHasScrollbar());
+
+      function remove(index) {
+        emitValue(props.value.toSpliced(index, 1));
+        updateHasScrollbar();
+      }
+
+      function select(index) {
+        if (!props.disabled) {
+          selected.value = index;
+          editValue.value = props.value[index];
+        }
+      }
+
+      function submitChange() {
+        if (isEditValid.value) {
+          emitValue(props.value.toSpliced(selected.value, 1, editValue.value));
+          selected.value = -1;
+        }
+      }
+
+      function cancel() {
+        newValue.value = undefined;
+        adding.value = false;
+      }
+
+      async function add(value) {
+        if (isNewValid.value) {
+          if (value) {
+            emitValue([...props.value, value]);
+            await nextTick();
+            updateHasScrollbar();
+            await nextTick();
+            vcsChipArrayInput.value.scrollLeft =
+              vcsChipArrayInput.value.scrollWidth;
+          }
+          newValue.value = undefined;
+          adding.value = true;
+        }
+      }
+
+      return {
+        selected,
+        adding,
+        editValue,
+        isEditValid,
+        newValue,
+        isNewValid,
+        isDense,
+        vcsChipArrayInput,
+        hasScrollbar,
+        remove,
+        select,
+        submitChange,
+        add,
+        cancel,
+      };
+    },
+  };
+</script>

package/src/components/form-inputs-controls/VcsTextField.vue

@@ -25,8 +25,9 @@
           v-on="{ ...$listeners, ...on }"
           :height="isDense ? 24 : 32"
           :rules="rules"
-          class="py-1 primary--placeholder align-center"
+          class="primary--placeholder align-center"
           :class="{
+            'py-1': !noPadding,
             'remove-outline': !isOutlined,
             'outline--current': focus,
             'outline--error': !!errorMessage,
@@ -134,7 +135,7 @@
       .v-icon {
         font-size: 16px;
       }
-      fieldset {
+      .v-text-field--rounded fieldset {
         border-radius: 2px;
         border-color: var(--v-base-base);
       }
@@ -160,6 +161,7 @@
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
    * @vue-prop {string}                                 unit - Unit for number input fields. Is displayed behind the number.
    * @vue-prop {boolean}                                showSpinButtons - If true, spin buttons are displayed in number input fields. Overrides Vuetify hide-spin-buttons.
+   * @vue-prop {boolean}                                noPadding - Padding is required for usage within rows. For standalone usage this prop removes class py-1.
    * @vue-computed {boolean}                            isClearable - Whether textfield is isClearable. Makes sure icon is only shown on focus, hover or error.
    * @vue-computed {boolean}                            isDense - Whether size of textfield is dense.
    * @vue-computed {boolean}                            isOutlined - Textfield is outlined on either hover, focus or error, if not disabled.
@@ -186,6 +188,10 @@
         type: Boolean,
         default: false,
       },
+      noPadding: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props, { attrs, emit }) {
       const hover = ref(false);
@@ -223,7 +229,7 @@
         get() {
           if (
             attrs.type === 'number' &&
-            attrs.value &&
+            Number.isFinite(attrs.value) &&
             props.unit &&
             !focus.value &&
             !hover.value

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('appConfigurator.apply') }}
+          </VcsFormButton>
+          <VcsFormButton @click.stop="cancel">
+            {{ $t('appConfigurator.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>