@vcmap/ui 5.3.1 → 6.0.0-rc.1

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

@@ -1,70 +1,60 @@
 <template>
   <div
-    class="d-flex d-inline-block align-center mb-1"
-    :class="{ 'mt-1': !column }"
+    class="d-flex d-inline-block align-center"
+    :class="{
+      'py-1': !paddingProvided,
+    }"
   >
-    <v-btn
+    <VcsButton
       v-if="hasScrollbar"
-      :dense="isDense"
-      x-small
-      icon
-      :ripple="false"
-      elevation="0"
+      icon="mdi-chevron-left"
       @click="vcsChipArrayInput.scrollLeft -= scrollDx"
-    >
-      <v-icon>mdi-chevron-left</v-icon>
-    </v-btn>
+    />
     <div
       ref="vcsChipArrayInput"
-      class="d-flex d-inline-block mx-1 my-0"
+      class="d-flex d-inline-block mx-1 my-0 ga-1"
       :class="{
         'overflow-x-auto': !column,
         'hide-scrollbar': !column,
-        row: column,
+        'v-row': column,
+        'row-gap': column,
       }"
     >
-      <div
-        v-for="(item, index) in value"
-        :key="index"
-        class="pr-1"
-        :class="{ 'pt-1': column }"
-      >
+      <div v-for="({ key, value }, index) in localValue" :key="key">
         <v-chip
           v-if="selected !== index"
-          v-bind="{ ...$attrs }"
-          :small="isDense"
+          v-bind="{ ...noListenerAttrs }"
+          size="small"
           :disabled="disabled"
-          :close="deletableChips"
+          :closable="deletableChips"
           @click="select(index)"
           @click:close="remove(index)"
         >
-          <span class="text-truncate d-inline-block">{{ item }}</span>
+          <span class="text-truncate d-inline-block">{{ value }}</span>
         </v-chip>
         <VcsTextField
           v-else
-          hide-details
-          :dense="isDense"
+          v-bind="{ ...noListenerAttrs }"
           rounded
           filled
           autofocus
-          no-padding
-          :height="24"
-          v-bind="{ ...$attrs }"
+          hide-spin-buttons
+          :height="useItemHeight().value - 8"
           v-model="editValue"
           @keydown.esc="selected = -1"
           @blur="selected = -1"
           @keydown.enter="submitChange($event)"
-          @click:append="submitChange($event)"
-          @update:error="(err) => (isEditValid = !err)"
-          append-icon="mdi-check"
+          @click:append-inner="submitChange($event)"
+          append-inner-icon="mdi-check"
           :style="{ width: `${inputWidth}px` }"
+          class="py-0"
         />
       </div>
-      <div :class="{ 'pt-1': column }">
+      <div>
         <v-chip
           v-if="adding === false"
-          v-bind="{ ...$attrs }"
-          :small="isDense"
+          v-bind="{ ...noListenerAttrs }"
+          size="small"
           :disabled="disabled"
           @click="adding = true"
         >
@@ -72,37 +62,28 @@
         </v-chip>
         <VcsTextField
           v-else
-          hide-details
-          :dense="isDense"
+          v-bind="{ ...noListenerAttrs }"
           rounded
           filled
           autofocus
-          no-padding
-          :height="24"
-          class="vcs-inside-chip"
+          hide-spin-buttons
+          :height="useItemHeight().value - 8"
           v-model="newValue"
-          v-bind="{ ...$attrs }"
           @keydown.enter="add($event, newValue)"
+          @click:append-inner="add($event, newValue)"
           @keydown.esc="cancel"
           @blur="cancel"
-          @click:append="add($event, newValue)"
-          @update:error="(err) => (isNewValid = !err)"
-          append-icon="mdi-check"
+          append-inner-icon="mdi-check"
           :style="{ width: `${inputWidth}px` }"
+          class="py-0"
         />
       </div>
     </div>
-    <v-btn
+    <VcsButton
       v-if="hasScrollbar"
-      :dense="isDense"
-      x-small
-      icon
-      :ripple="false"
-      elevation="0"
+      icon="mdi-chevron-right"
       @click="vcsChipArrayInput.scrollLeft += scrollDx"
-    >
-      <v-icon>mdi-chevron-right</v-icon>
-    </v-btn>
+    />
   </div>
 </template>
 
@@ -114,63 +95,51 @@
   .hide-scrollbar::-webkit-scrollbar {
     display: none;
   }
-  .v-chip {
-    display: flex;
-    max-width: 260px;
-    padding: 0 8px;
-    .v-chip__content {
-      display: flex;
-    }
+  .v-chip.v-chip--size-small {
+    --v-chip-height: calc(var(--v-vcs-item-height) - 8px);
   }
-  .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;
-      }
-    }
+  :deep(.v-icon--size-x-small) {
+    font-size: 18px;
+  }
+  .row-gap {
+    row-gap: 8px !important;
   }
 </style>
 
 <script>
-  import { computed, nextTick, onMounted, ref } from 'vue';
-  import { VBtn, VChip, VIcon } from 'vuetify/lib';
+  import { computed, nextTick, onMounted, ref, shallowRef, watch } from 'vue';
+  import { VChip, VIcon } from 'vuetify/components';
+  import { v4 as uuid } from 'uuid';
+  import { usePadding } from '../composables.js';
+  import { useItemHeight } from '../../vuePlugins/vuetify.js';
+  import VcsButton from '../buttons/VcsButton.vue';
   import VcsTextField from './VcsTextField.vue';
+  import { removeListenersFromAttrs } from '../attrsHelpers.js';
 
   /**
    * @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 {T[]} modelValue
    * @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.
+   * @vue-prop {number}                                 [inputWidth=75] - Width of the text fields in px.
    */
   export default {
     name: 'VcsChipArrayInput',
     components: {
-      VBtn,
+      VcsButton,
       VcsTextField,
       VChip,
       VIcon,
     },
     props: {
-      value: {
+      modelValue: {
         type: Array,
-        required: true,
-      },
-      tooltipPosition: {
-        type: String,
-        default: 'right',
+        default: () => [],
       },
       deletableChips: {
         type: Boolean,
@@ -178,7 +147,7 @@
       },
       inputWidth: {
         type: Number,
-        default: 50,
+        default: 75,
       },
       disabled: {
         type: Boolean,
@@ -193,27 +162,14 @@
         default: 20,
       },
     },
+    emits: ['update:modelValue'],
     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) {
@@ -226,25 +182,68 @@
 
       onMounted(() => updateHasScrollbar());
 
+      function isValid(value) {
+        if (attrs.rules) {
+          return !attrs.rules.some((r) => {
+            if (typeof r === 'function') {
+              return r(value) !== true;
+            }
+            return r !== true;
+          });
+        }
+        return true;
+      }
+
+      function parseValue(value) {
+        return attrs.type === 'number' ? parseFloat(value) : value;
+      }
+
+      function mapModelValue(modelValue) {
+        return modelValue.map((value) => ({
+          key: uuid(),
+          value: parseValue(value),
+        }));
+      }
+
+      function emitValue(value) {
+        emit(
+          'update:modelValue',
+          value.map((i) => i.value),
+        );
+      }
+
+      const localValue = shallowRef(mapModelValue(props.modelValue));
+
+      watch(
+        () => props.modelValue,
+        () => {
+          localValue.value = mapModelValue(props.modelValue);
+        },
+      );
+
       function remove(index) {
-        emitValue(props.value.toSpliced(index, 1));
+        localValue.value.splice(index, 1);
+        emitValue(localValue.value);
         updateHasScrollbar();
       }
 
       function select(index) {
         if (!props.disabled) {
           selected.value = index;
-          editValue.value = props.value[index];
+          editValue.value = localValue.value[index].value;
         }
       }
 
       function submitChange(e) {
         e.stopPropagation();
         e.preventDefault();
-        if (isEditValid.value) {
-          emitValue(props.value.toSpliced(selected.value, 1, editValue.value));
-          selected.value = -1;
+        const value = parseValue(editValue.value);
+        if (!isValid(value)) {
+          return;
         }
+        localValue.value[selected.value].value = value;
+        emitValue(localValue.value);
+        selected.value = -1;
       }
 
       function cancel() {
@@ -252,31 +251,42 @@
         adding.value = false;
       }
 
-      async function add(e, value) {
+      async function add(e, v) {
         e.stopPropagation();
         e.preventDefault();
-        if (isNewValid.value) {
-          if (value) {
-            emitValue([...props.value, value]);
-            await nextTick();
-            updateHasScrollbar();
-            await nextTick();
-            vcsChipArrayInput.value.scrollLeft =
-              vcsChipArrayInput.value.scrollWidth;
+
+        if (v) {
+          const value = parseValue(v);
+          if (!isValid(value)) {
+            return;
           }
-          newValue.value = undefined;
-          adding.value = true;
+          localValue.value.push({
+            key: uuid(),
+            value,
+          });
+          emitValue(localValue.value);
+          await nextTick();
+          updateHasScrollbar();
+          await nextTick();
+          vcsChipArrayInput.value.scrollLeft =
+            vcsChipArrayInput.value.scrollWidth;
         }
+        newValue.value = undefined;
+        adding.value = true;
       }
 
+      const noListenerAttrs = computed(() => removeListenersFromAttrs(attrs));
+
+      const paddingProvided = usePadding(attrs);
+
       return {
+        paddingProvided,
+        localValue,
+        noListenerAttrs,
         selected,
         adding,
         editValue,
-        isEditValid,
         newValue,
-        isNewValid,
-        isDense,
         vcsChipArrayInput,
         hasScrollbar,
         remove,
@@ -284,6 +294,7 @@
         submitChange,
         add,
         cancel,
+        useItemHeight,
       };
     },
   };

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

@@ -1,11 +1,7 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ArrayConstructor;
-        required: true;
-    };
-    tooltipPosition: {
-        type: StringConstructor;
-        default: string;
+        default: () => never[];
     };
     deletableChips: {
         type: BooleanConstructor;
@@ -28,28 +24,25 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
 }, {
+    paddingProvided: import("vue").ComputedRef<boolean>;
+    localValue: import("vue").ShallowRef<any>;
+    noListenerAttrs: import("vue").ComputedRef<Record<string, unknown>>;
     selected: import("vue").Ref<number>;
     adding: import("vue").Ref<boolean>;
     editValue: import("vue").Ref<undefined>;
-    isEditValid: import("vue").Ref<boolean>;
     newValue: import("vue").Ref<undefined>;
-    isNewValid: import("vue").Ref<boolean>;
-    isDense: import("vue").ComputedRef<boolean>;
     vcsChipArrayInput: import("vue").Ref<any>;
     hasScrollbar: import("vue").Ref<any>;
     remove: (index: any) => void;
     select: (index: any) => void;
     submitChange: (e: any) => void;
-    add: (e: any, value: any) => Promise<void>;
+    add: (e: any, v: any) => Promise<void>;
     cancel: () => void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+    useItemHeight: typeof useItemHeight;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ArrayConstructor;
-        required: true;
-    };
-    tooltipPosition: {
-        type: StringConstructor;
-        default: string;
+        default: () => never[];
     };
     deletableChips: {
         type: BooleanConstructor;
@@ -71,12 +64,15 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-}>>, {
-    tooltipPosition: string;
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     disabled: boolean;
-    column: boolean;
+    modelValue: unknown[];
     deletableChips: boolean;
     inputWidth: number;
+    column: boolean;
     scrollDx: number;
-}>;
+}, {}>;
 export default _default;
+import { useItemHeight } from '../../vuePlugins/vuetify.js';

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

@@ -1,24 +1,25 @@
 <template>
-  <v-row no-gutters v-if="coordinate">
+  <v-row no-gutters v-if="localValue">
     <slot name="prepend" v-bind="{ ...$props }" />
-    <v-col v-for="(_, idx) in coordinate" :key="`${prefixes[idx]}-coordinate`">
-      <VcsTextField
-        :id="`${prefixes[idx]}-coordinate`"
-        dense
-        type="number"
-        :min="getRangeFromExtent(idx, extent)?.[0]"
-        :max="getRangeFromExtent(idx, extent)?.[1]"
-        :step="steps[idx]"
-        :prefix="prefixes[idx]"
-        :unit="units[idx]"
-        :decimals="decimals[idx]"
-        v-model.number="coordinate[idx]"
-        v-bind="{ ...$attrs }"
-        @input="emitInput(coordinate, idx)"
-        :rules="getRulesForAxis(idx)"
-        v-on="{ ...forwardListener($listeners) }"
-      />
-    </v-col>
+    <template v-for="(_, idx) in localValue">
+      <v-col :key="`${prefixes[idx]}-coordinate`" v-if="!hideZ || idx < 2">
+        <VcsTextField
+          :id="`${prefixes[idx]}-coordinate`"
+          :hide-spin-buttons="true"
+          type="number"
+          :min="getRangeFromExtent(idx, extent)?.[0]"
+          :max="getRangeFromExtent(idx, extent)?.[1]"
+          :step="steps[idx]"
+          :prefix="prefixes[idx]"
+          :unit="units[idx]"
+          :decimals="decimals[idx]"
+          v-bind="noListenerAttrs"
+          v-model="localValue[idx]"
+          :rules="getRulesForAxis(idx)"
+        />
+      </v-col>
+    </template>
+
     <slot name="append" v-bind="{ ...$props }" />
   </v-row>
 </template>
@@ -27,10 +28,11 @@
 
 <script>
   import { computed } from 'vue';
-  import { VRow, VCol } from 'vuetify/lib';
-  import { Extent } from '@vcmap/core';
+  import { VRow, VCol } from 'vuetify/components';
   import VcsTextField from './VcsTextField.vue';
   import { between } from '../style/composables.js';
+  import { useProxiedComplexModel } from '../modelHelper.js';
+  import { removeListenersFromAttrs } from '../attrsHelpers.js';
 
   /**
    *
@@ -59,7 +61,7 @@
   /**
    * @description An input for a coordinate providing a VcsTextField for each dimension.
    * All attrs and listeners are forwarded to the input fields.
-   * @vue-prop {import("ol").Coordinate}  value - A coordinate, with x, y and optionally z value.
+   * @vue-prop {import("ol").Coordinate}  modelValue - A coordinate, with x, y and optionally z value.
    * @vue-prop {boolean}  [hideZ=false] - Hide z input field.
    * @vue-prop {Array<string>}  [prefixes=['X','Y','Z']] - An optional array of length three, with prefixes for each input
    * @vue-prop {Array<string>}  [units=['°','°','m']] - An optional array of length three, with units for each input
@@ -72,13 +74,14 @@
    */
   export default {
     name: 'VcsCoordinate',
+    inheritAttrs: false,
     components: {
       VRow,
       VCol,
       VcsTextField,
     },
     props: {
-      value: {
+      modelValue: {
         type: Array,
         default: () => [0, 0, 0],
       },
@@ -104,7 +107,7 @@
       },
       extent: {
         type: Array,
-        default: () => Extent.WGS_84_EXTENT,
+        default: () => [-180, -90, 180, 90],
       },
       axisRules: {
         type: Array,
@@ -112,25 +115,12 @@
       },
     },
     setup(props, { attrs, emit }) {
-      function emitInput(value) {
-        emit('input', structuredClone(value));
-      }
-      const coordinate = computed({
-        get() {
-          return props.value?.slice(0, props.hideZ ? 2 : 3);
-        },
-        set(value) {
-          emitInput(value);
-        },
-      });
+      const localValue = useProxiedComplexModel(props, 'modelValue', emit);
+      const noListenerAttrs = computed(() => removeListenersFromAttrs(attrs));
 
       return {
-        coordinate,
-        emitInput,
-        forwardListener(listener) {
-          const { input, ...rest } = listener;
-          return rest;
-        },
+        localValue,
+        noListenerAttrs,
         getRangeFromExtent,
         getRulesForAxis(idx) {
           const rules = [];

package/src/components/form-inputs-controls/VcsCoordinate.vue.d.ts

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ArrayConstructor;
         default: () => number[];
     };
@@ -25,20 +25,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     extent: {
         type: ArrayConstructor;
-        default: () => import("ol/extent.js").Extent;
+        default: () => number[];
     };
     axisRules: {
         type: ArrayConstructor;
         default: () => never[][];
     };
 }, {
-    coordinate: import("vue").WritableComputedRef<any>;
-    emitInput: (value: any) => void;
-    forwardListener(listener: any): any;
+    localValue: import("vue").Ref<any>;
+    noListenerAttrs: import("vue").ComputedRef<Record<string, unknown>>;
     getRangeFromExtent: typeof getRangeFromExtent;
     getRulesForAxis(idx: any): any[];
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ArrayConstructor;
         default: () => number[];
     };
@@ -64,14 +63,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     extent: {
         type: ArrayConstructor;
-        default: () => import("ol/extent.js").Extent;
+        default: () => number[];
     };
     axisRules: {
         type: ArrayConstructor;
         default: () => never[][];
     };
 }>>, {
-    value: unknown[];
+    modelValue: unknown[];
     decimals: unknown[];
     extent: unknown[];
     hideZ: boolean;
@@ -79,7 +78,7 @@ declare const _default: import("vue").DefineComponent<{
     units: unknown[];
     steps: unknown[];
     axisRules: unknown[];
-}>;
+}, {}>;
 export default _default;
 /**
  *
@@ -87,4 +86,4 @@ export default _default;
  * @param {import("ol/extent").Extent} extent
  * @returns {undefined|number[]}
  */
-declare function getRangeFromExtent(idx: number, extent: any): undefined | number[];
+declare function getRangeFromExtent(idx: number, extent: import("ol/extent").Extent): undefined | number[];