@vcmap/ui 5.3.2 → 6.0.0-rc.1

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[];

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

@@ -3,75 +3,53 @@
     v-model="menuOpen"
     :close-on-content-click="false"
     transition="scale-transition"
-    offset-y
     max-width="290px"
     min-width="290px"
   >
-    <template #activator="{ on, attrs }">
-      <v-text-field
-        v-model="formattedDate"
+    <template #activator="{ props }">
+      <VcsTextField
         :placeholder="formatDate(new Date().toISOString())"
-        v-bind="{ ...$attrs, ...attrs }"
-        v-on="{ ...$listeners, ...on }"
         :prepend-icon="icon"
-        :dense="isDense"
         readonly
         hide-details
         class="ma-0 py-1"
-        :class="{
-          'input--dense': isDense,
-          'input--not-dense': !isDense,
-        }"
+        v-bind="props"
+        v-model="formattedDate"
       />
     </template>
     <v-date-picker
       v-model="date"
-      no-title
-      @input="menuOpen = false"
-      :locale="locale"
+      hide-header
+      @update:model-value="menuOpen = false"
       color="primary"
     >
-      <v-btn color="primary" @click="goToToday">
-        {{ $t('datePicker.today') }}
-      </v-btn>
+      <template #actions>
+        <v-btn color="primary" @click="goToToday">
+          {{ $t('datePicker.today') }}
+        </v-btn>
+      </template>
     </v-date-picker>
   </v-menu>
 </template>
-<style lang="scss" scoped>
-  ::v-deep {
-    .v-input__control {
-      padding: 0 4px;
-    }
-    .v-input__prepend-outer {
-      margin-right: 4px;
-    }
-    .v-icon {
-      font-size: 16px;
-    }
-  }
-</style>
+<style lang="scss" scoped></style>
 <script>
-  import {
-    computed,
-    ref,
-    watch,
-    inject,
-    onUnmounted,
-    onBeforeMount,
-  } from 'vue';
-  import { VMenu, VTextField, VDatePicker, VBtn } from 'vuetify/lib';
+  import { computed, ref, watch, onBeforeMount } from 'vue';
+  import { VMenu, VDatePicker, VBtn } from 'vuetify/components';
+  import { useI18n } from 'vue-i18n';
+  import { getLogger } from '@vcsuite/logger';
+  import VcsTextField from './VcsTextField.vue';
+
   /**
    * @description stylized wrapper around {@link https://v15.vuetifyjs.com/en/components/date-pickers/#month-pickers-in-dialog-and-menu}.
-   * @vue-prop {string} value - value of the date picker in {@link https://tc39.es/ecma262/#sec-date-time-string-format | Date Time String Format}
-   * @vue-prop {string} icon - specify optional prepend icon, defaults to mdi-calendar
-   * @vue-event {string} input - raised when calendar date is selected
+   * @vue-prop {string} modelValue - value of the date picker in {@link https://tc39.es/ecma262/#sec-date-time-string-format | Date Time String Format}
+   * @vue-prop {string} [icon] - specify optional prepend icon, defaults to mdi-calendar
    */
   export default {
     name: 'VcsDatePicker',
     props: {
-      value: {
-        type: String,
-        default: new Date().toISOString().substring(0, 10),
+      modelValue: {
+        type: Date,
+        default: new Date(),
       },
       icon: {
         type: String,
@@ -80,52 +58,43 @@
     },
     components: {
       VMenu,
-      VTextField,
+      VcsTextField,
       VDatePicker,
       VBtn,
     },
-    setup(props, { emit, attrs }) {
-      /**
-       * @type {import("@vcmap/ui").VcsUiApp}
-       */
-      const app = /** @type {import("@vcmap/ui").VcsUiApp} */ (
-        inject('vcsApp')
-      );
-      const localValue = ref(props.value);
+    emits: ['update:modelValue'],
+    setup(props, { emit }) {
+      const i18n = useI18n();
+      const localValue = ref(props.modelValue);
       const menuOpen = ref(false);
-      const locale = ref(app.locale);
-
-      const isDense = computed(() => attrs.dense !== false);
 
-      const isValid = (date) => !Number.isNaN(new Date(date).getTime());
+      const isValid = (date) => !Number.isNaN(date.getTime());
       const setFromValue = () => {
-        if (isValid(props.value)) {
-          localValue.value = props.value;
+        if (isValid(props.modelValue)) {
+          localValue.value = props.modelValue;
         } else if (localValue.value) {
-          // eslint-disable-next-line no-console
-          console.error('Invalid date provided: ', props.value);
+          getLogger('VcsDatePicker').error(
+            'Invalid date provided: ',
+            props.modelValue,
+          );
         }
       };
       onBeforeMount(() => setFromValue());
-      const destroyLocaleChanged = app.localeChanged.addEventListener(() => {
-        locale.value = app.locale;
-      });
-      onUnmounted(() => destroyLocaleChanged());
 
       const formatDate = (date) => {
         if (date) {
-          return new Intl.DateTimeFormat(locale.value, {
+          return new Intl.DateTimeFormat(i18n.locale.value, {
             dateStyle: 'short',
           }).format(Date.parse(date));
         }
         return '';
       };
       const goToToday = () => {
-        localValue.value = new Date(Date.now()).toISOString().substring(0, 10);
+        localValue.value = new Date();
         menuOpen.value = false;
       };
       watch(
-        () => props.value,
+        () => props.modelValue,
         () => setFromValue(),
       );
       const formattedDate = computed({
@@ -138,17 +107,15 @@
         get: () => localValue.value,
         set: (nv) => {
           localValue.value = nv;
-          emit('input', localValue.value);
+          emit('update:modelValue', localValue.value);
         },
       });
 
       return {
         formattedDate,
         date,
-        isDense,
         menuOpen,
         formatDate,
-        locale,
         goToToday,
       };
     },

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

@@ -1,7 +1,7 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
-        type: StringConstructor;
-        default: string;
+    modelValue: {
+        type: DateConstructor;
+        default: Date;
     };
     icon: {
         type: StringConstructor;
@@ -9,23 +9,85 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     formattedDate: import("vue").WritableComputedRef<string>;
-    date: import("vue").WritableComputedRef<any>;
-    isDense: import("vue").ComputedRef<boolean>;
+    date: import("vue").WritableComputedRef<{
+        toString: () => string;
+        toDateString: () => string;
+        toTimeString: () => string;
+        toLocaleString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        toLocaleDateString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        toLocaleTimeString: {
+            (): string;
+            (locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
+            (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
+        };
+        valueOf: () => number;
+        getTime: () => number;
+        getFullYear: () => number;
+        getUTCFullYear: () => number;
+        getMonth: () => number;
+        getUTCMonth: () => number;
+        getDate: () => number;
+        getUTCDate: () => number;
+        getDay: () => number;
+        getUTCDay: () => number;
+        getHours: () => number;
+        getUTCHours: () => number;
+        getMinutes: () => number;
+        getUTCMinutes: () => number;
+        getSeconds: () => number;
+        getUTCSeconds: () => number;
+        getMilliseconds: () => number;
+        getUTCMilliseconds: () => number;
+        getTimezoneOffset: () => number;
+        setTime: (time: number) => number;
+        setMilliseconds: (ms: number) => number;
+        setUTCMilliseconds: (ms: number) => number;
+        setSeconds: (sec: number, ms?: number | undefined) => number;
+        setUTCSeconds: (sec: number, ms?: number | undefined) => number;
+        setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
+        setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
+        setDate: (date: number) => number;
+        setUTCDate: (date: number) => number;
+        setMonth: (month: number, date?: number | undefined) => number;
+        setUTCMonth: (month: number, date?: number | undefined) => number;
+        setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
+        toUTCString: () => string;
+        toISOString: () => string;
+        toJSON: (key?: any) => string;
+        [Symbol.toPrimitive]: {
+            (hint: "default"): string;
+            (hint: "string"): string;
+            (hint: "number"): number;
+            (hint: string): string | number;
+        };
+    }>;
     menuOpen: import("vue").Ref<boolean>;
     formatDate: (date: any) => string;
-    locale: import("vue").Ref<string>;
     goToToday: () => void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
-        type: StringConstructor;
-        default: string;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: DateConstructor;
+        default: Date;
     };
     icon: {
         type: StringConstructor;
         default: string;
     };
-}>>, {
-    value: string;
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: Date;
     icon: string;
-}>;
+}, {}>;
 export default _default;

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

@@ -0,0 +1,100 @@
+<template>
+  <v-file-input
+    ref="fileInputRef"
+    variant="outlined"
+    clear-icon="$close"
+    :hide-details="false"
+    class="primary--placeholder"
+    :class="{
+      'py-1': !paddingProvided,
+    }"
+    v-bind="$attrs"
+  >
+    <template #message="{ message }">
+      <v-tooltip
+        ref="errorTooltipRef"
+        :activator="fileInputRef"
+        v-if="message"
+        :text="message"
+        content-class="bg-error"
+        :location="tooltipPosition"
+      />
+    </template>
+    <template #append-inner>
+      <slot name="append-inner"></slot>
+      <v-tooltip
+        :activator="fileInputRef"
+        v-if="tooltip && !errorTooltipRef"
+        :text="tooltip"
+        :location="tooltipPosition"
+      />
+    </template>
+    <template
+      v-for="slot of Object.keys($slots).filter(
+        (name) => name !== 'append-inner',
+      )"
+      #[slot]="scope"
+    >
+      <slot :name="slot" v-bind="scope" />
+    </template>
+  </v-file-input>
+</template>
+
+<style lang="scss" scoped>
+  @import './vcsTextField.scss';
+
+  // set text overflow for file input
+  :deep(.v-field__field) {
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>
+
+<script>
+  import { ref } from 'vue';
+  import { VFileInput, VTooltip } from 'vuetify/components';
+  import { usePadding } from '../composables.js';
+
+  /**
+   * @description extends API of {@link https://vuetifyjs.com/en/api/v-file-input v-text-field}.
+   * Provides VcsTooltip to
+   * - show error messages on focus
+   * - show tooltips, if supplied, when hovered over append-icon
+   * When clicking esc key, previous input is restored.
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the tooltip.
+   * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
+   */
+  export default {
+    name: 'VcsTextField',
+    inheritAttrs: false,
+    components: {
+      VTooltip,
+      VFileInput,
+    },
+    props: {
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+    },
+    setup(props, { attrs }) {
+      const fileInputRef = ref();
+      const errorTooltipRef = ref();
+
+      const paddingProvided = usePadding(attrs);
+
+      return {
+        paddingProvided,
+        fileInputRef,
+        errorTooltipRef,
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,27 @@
+declare const _default: import("vue").DefineComponent<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    paddingProvided: import("vue").ComputedRef<boolean>;
+    fileInputRef: import("vue").Ref<any>;
+    errorTooltipRef: import("vue").Ref<any>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    tooltip: string;
+    tooltipPosition: string;
+}, {}>;
+export default _default;

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

@@ -2,30 +2,29 @@
   <section class="vcs-form-section">
     <slot name="header" :heading="heading" :actions="actions">
       <div
-        class="vcs-form-section-header d-flex base lighten-3"
+        class="vcs-form-section-header d-flex bg-base-lighten-3"
         :aria-expanded="open"
       >
-        <div class="d-flex justify-space-between w-full">
+        <div class="d-flex justify-space-between w-100">
           <div class="d-flex align-center" :class="{ 'px-2': !expandable }">
             <v-btn
               :ripple="false"
               dense
-              plain
+              variant="plain"
               icon
-              small
-              text
+              :size="useItemHeight().value - 4"
               :disabled="disabled"
               elevation="0"
               @click="open = !open"
               v-if="expandable"
               :aria-expanded="open"
             >
-              <v-icon>{{
+              <v-icon :size="useItemHeight().value - 8">{{
                 open ? 'mdi-chevron-down' : 'mdi-chevron-right'
               }}</v-icon>
             </v-btn>
-            <strong :class="{ 'text--disabled': disabled }">{{
-              $t(heading)
+            <strong :class="{ 'text-disabled': disabled }">{{
+              $st(heading)
             }}</strong>
           </div>
           <VcsActionButtonList
@@ -37,7 +36,7 @@
         </div>
       </div>
     </slot>
-    <VcsHelp :text="helpText" :show="showHelp" class="base lighten-4">
+    <VcsHelp :text="helpText" :show="showHelp">
       <slot name="help" />
     </VcsHelp>
     <article class="section-content" v-if="showContent">
@@ -48,7 +47,8 @@
 
 <script>
   import { computed, reactive, ref } from 'vue';
-  import { VBtn, VIcon } from 'vuetify/lib';
+  import { VBtn, VIcon } from 'vuetify/components';
+  import { useItemHeight } from '../../vuePlugins/vuetify.js';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsHelp from '../notification/VcsHelp.vue';
 
@@ -139,15 +139,15 @@
         showContent,
         showHelp,
         actions,
+        useItemHeight,
       };
     },
   };
 </script>
 
 <style lang="scss" scoped>
-  @import '../../styles/shades.scss';
   .vcs-form-section-header {
-    height: 40px;
+    height: calc(var(--v-vcs-item-height) + 8px);
   }
   .v-alert--text:before {
     background-color: transparent;