@vcmap/ui 5.0.2 → 5.1.0-rc.2

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

@@ -0,0 +1,18 @@
+declare const _default: import("vue").DefineComponent<{
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    checkbox: import("vue").Ref<any>;
+    errorMessage: import("vue").Ref<string>;
+    isDense: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    tooltipPosition: string;
+}>;
+export default _default;

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

@@ -0,0 +1,82 @@
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    deletableChips: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inputWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    column: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scrollDx: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    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>;
+    cancel: () => void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+    deletableChips: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inputWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    column: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scrollDx: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    tooltipPosition: string;
+    disabled: boolean;
+    column: boolean;
+    deletableChips: boolean;
+    inputWidth: number;
+    scrollDx: number;
+}>;
+export default _default;

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

@@ -0,0 +1,152 @@
+<template>
+  <v-row no-gutters v-if="coordinate">
+    <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>
+    <slot name="append" v-bind="{ ...$props }" />
+  </v-row>
+</template>
+
+<style lang="scss" scoped></style>
+
+<script>
+  import { computed } from 'vue';
+  import { VRow, VCol } from 'vuetify/lib';
+  import { Extent } from '@vcmap/core';
+  import VcsTextField from './VcsTextField.vue';
+  import { between } from '../style/composables.js';
+
+  /**
+   *
+   * @param {number} idx
+   * @param {import("ol/extent").Extent} extent
+   * @returns {undefined|number[]}
+   */
+  function getRangeFromExtent(idx, extent) {
+    if (idx === 0) {
+      return [extent[0], extent[2]];
+    } else if (idx === 1) {
+      return [extent[1], extent[3]];
+    }
+    return undefined;
+  }
+
+  /**
+   * @param {number} number
+   * @param {number[]} range
+   * @returns {boolean|string}
+   */
+  function isInRange(number, range) {
+    return between(number, range) || 'components.coordinate.outOfRange';
+  }
+
+  /**
+   * @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 {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
+   * @vue-prop {Array<number>}  [decimals=[8,8,2]] - An optional array of length three, with number of decimal places for each input
+   * @vue-prop {Array<number>}  [steps=[0.00001,0.00001,1]] - An optional array of length three, with step for each input. Default steps are for WGS84 coordinates.
+   * @vue-prop {import("ol/extent").Extent}  [extent=[-180,-90,180,90]] - An optional extent as range for x and y inputs. Default is WGS84 extent.
+   * @vue-prop {Array<Array<()=>boolean|string)>>}  [axisRules] - An optional array of length three, with additional rules for corresponding input
+   * @vue-data {slot}  [#prepend] - A slot to prepend column(s) in row
+   * @vue-data {slot}  [#append] - A slot to append column(s) in row
+   */
+  export default {
+    name: 'VcsCoordinate',
+    components: {
+      VRow,
+      VCol,
+      VcsTextField,
+    },
+    props: {
+      value: {
+        type: Array,
+        default: () => [0, 0, 0],
+      },
+      hideZ: {
+        type: Boolean,
+        default: false,
+      },
+      prefixes: {
+        type: Array,
+        default: () => ['X', 'Y', 'Z'],
+      },
+      units: {
+        type: Array,
+        default: () => ['°', '°', 'm'],
+      },
+      decimals: {
+        type: Array,
+        default: () => [8, 8, 2],
+      },
+      steps: {
+        type: Array,
+        default: () => [0.00001, 0.00001, 1],
+      },
+      extent: {
+        type: Array,
+        default: () => Extent.WGS_84_EXTENT,
+      },
+      axisRules: {
+        type: Array,
+        default: () => [[], [], []],
+      },
+    },
+    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);
+        },
+      });
+
+      return {
+        coordinate,
+        emitInput,
+        forwardListener(listener) {
+          const { input, ...rest } = listener;
+          return rest;
+        },
+        getRangeFromExtent,
+        getRulesForAxis(idx) {
+          const rules = [];
+          const range = getRangeFromExtent(idx, props.extent);
+          if (range) {
+            rules.push((v) => isInRange(v, range));
+          }
+          if (Array.isArray(props.axisRules[idx])) {
+            rules.push(...props.axisRules[idx]);
+          }
+          if (Array.isArray(attrs.rules)) {
+            rules.push(...attrs.rules);
+          }
+          return rules;
+        },
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,90 @@
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    hideZ: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prefixes: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    units: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    decimals: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    steps: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    extent: {
+        type: ArrayConstructor;
+        default: () => import("ol/extent.js").Extent;
+    };
+    axisRules: {
+        type: ArrayConstructor;
+        default: () => never[][];
+    };
+}, {
+    coordinate: import("vue").WritableComputedRef<any>;
+    emitInput: (value: any) => void;
+    forwardListener(listener: any): any;
+    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: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    hideZ: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prefixes: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    units: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    decimals: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    steps: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    extent: {
+        type: ArrayConstructor;
+        default: () => import("ol/extent.js").Extent;
+    };
+    axisRules: {
+        type: ArrayConstructor;
+        default: () => never[][];
+    };
+}>>, {
+    value: unknown[];
+    decimals: unknown[];
+    extent: unknown[];
+    hideZ: boolean;
+    prefixes: unknown[];
+    units: unknown[];
+    steps: unknown[];
+    axisRules: unknown[];
+}>;
+export default _default;
+/**
+ *
+ * @param {number} idx
+ * @param {import("ol/extent").Extent} extent
+ * @returns {undefined|number[]}
+ */
+declare function getRangeFromExtent(idx: number, extent: any): undefined | number[];

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

@@ -71,7 +71,7 @@
     props: {
       value: {
         type: String,
-        required: true,
+        default: new Date().toISOString().substring(0, 10),
       },
       icon: {
         type: String,
@@ -99,7 +99,7 @@
 
       const isValid = (date) => !Number.isNaN(new Date(date).getTime());
       const setFromValue = () => {
-        if (isValid(localValue.value)) {
+        if (isValid(props.value)) {
           localValue.value = props.value;
         } else if (localValue.value) {
           // eslint-disable-next-line no-console

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

@@ -0,0 +1,31 @@
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    formattedDate: import("vue").WritableComputedRef<string>;
+    date: import("vue").WritableComputedRef<any>;
+    isDense: import("vue").ComputedRef<boolean>;
+    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;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    value: string;
+    icon: string;
+}>;
+export default _default;

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

@@ -0,0 +1,122 @@
+<template>
+  <v-container class="py-0 px-1">
+    <v-row no-gutters v-if="value.projection">
+      <v-col :cols="firstCols">
+        <VcsLabel html-for="projection" dense>
+          {{ $t('components.extent.projection') }}
+        </VcsLabel>
+      </v-col>
+      <v-col>
+        <VcsTextField
+          id="projection"
+          disabled
+          dense
+          :value="value.projection.epsg"
+        />
+      </v-col>
+    </v-row>
+    <VcsCoordinate
+      hide-z
+      v-model="min"
+      :disabled="disabled"
+      :axis-rules="[
+        [(v) => checkInput(v, max[0])],
+        [(v) => checkInput(v, max[1])],
+      ]"
+    >
+      <template #prepend="{ prefixes }">
+        <v-col :cols="firstCols">
+          <VcsLabel :html-for="`${prefixes[0]}-coordinate`" dense>
+            {{ $t('components.extent.min') }}
+          </VcsLabel>
+        </v-col>
+      </template>
+    </VcsCoordinate>
+    <VcsCoordinate
+      hide-z
+      v-model="max"
+      :disabled="disabled"
+      :axis-rules="[
+        [(v) => checkInput(min[0], v)],
+        [(v) => checkInput(min[1], v)],
+      ]"
+    >
+      <template #prepend="{ prefixes }">
+        <v-col :cols="firstCols">
+          <VcsLabel :html-for="`${prefixes[0]}-coordinate`" dense>
+            {{ $t('components.extent.max') }}
+          </VcsLabel>
+        </v-col>
+      </template>
+    </VcsCoordinate>
+  </v-container>
+</template>
+
+<script>
+  import { computed } from 'vue';
+  import { VCol, VContainer, VRow } from 'vuetify/lib';
+  import { Extent } from '@vcmap/core';
+  import VcsLabel from './VcsLabel.vue';
+  import VcsTextField from './VcsTextField.vue';
+  import VcsCoordinate from './VcsCoordinate.vue';
+
+  function checkInput(min, max) {
+    return min < max || 'components.extent.invalid';
+  }
+
+  /**
+   * An input for modelling @vcmap/core ExtentOptions
+   * @vue-prop {import("@vcmap/core").ExtentOptions} value - the extent options to be modeled.
+   * @vue-prop {boolean} disabled - Disable coordinate input.
+   * @vue-prop {number} [firstCols=4] - Property to set the column distribution. Default is 4 (one-third/two-third). Use 6 for half-half.
+   */
+  export default {
+    name: 'VcsExtent',
+    components: {
+      VcsCoordinate,
+      VContainer,
+      VRow,
+      VCol,
+      VcsLabel,
+      VcsTextField,
+    },
+    props: {
+      value: {
+        type: Object,
+        required: true,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      firstCols: {
+        type: Number,
+        default: 4,
+      },
+    },
+    setup(props, { emit }) {
+      const getCoordinate = (start, end = 4) =>
+        computed({
+          get() {
+            return props.value.coordinates.slice(start, end);
+          },
+          set(value) {
+            const clone = structuredClone(props.value);
+            clone.coordinates[start] = value[0];
+            clone.coordinates[end - 1] = value[1];
+            if (Extent.validateOptions(clone)) {
+              emit('input', clone);
+            }
+          },
+        });
+
+      return {
+        min: getCoordinate(0, 2),
+        max: getCoordinate(2),
+        checkInput,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,36 @@
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    firstCols: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    min: import("vue").WritableComputedRef<any>;
+    max: import("vue").WritableComputedRef<any>;
+    checkInput: typeof checkInput;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    firstCols: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    disabled: boolean;
+    firstCols: number;
+}>;
+export default _default;
+declare function checkInput(min: any, max: any): true | "components.extent.invalid";

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

@@ -1,7 +1,10 @@
 <template>
   <section class="vcs-form-section">
     <slot name="header" :heading="heading" :actions="actions">
-      <div class="vcs-form-section-header d-flex base lighten-3">
+      <div
+        class="vcs-form-section-header d-flex base lighten-3"
+        :aria-expanded="open"
+      >
         <div class="d-flex justify-space-between w-full">
           <div class="d-flex align-center" :class="{ 'px-2': !expandable }">
             <v-btn
@@ -15,6 +18,7 @@
               elevation="0"
               @click="open = !open"
               v-if="expandable"
+              :aria-expanded="open"
             >
               <v-icon>{{
                 open ? 'mdi-chevron-down' : 'mdi-chevron-right'
@@ -28,6 +32,7 @@
             :actions="actions"
             :overflow-count="actionButtonListOverflowCount"
             class="pa-2"
+            :disabled="disabled"
           />
         </div>
       </div>

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

@@ -0,0 +1,75 @@
+declare const _default: import("vue").DefineComponent<{
+    heading: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    expandable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    startOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    headerActions: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    actionButtonListOverflowCount: {
+        type: NumberConstructor;
+        required: false;
+        default: undefined;
+    };
+    helpText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}, {
+    open: any;
+    showContent: import("vue").ComputedRef<any>;
+    showHelp: import("vue").ComputedRef<boolean>;
+    actions: import("vue").ComputedRef<VcsAction>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    heading: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    expandable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    startOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    headerActions: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    actionButtonListOverflowCount: {
+        type: NumberConstructor;
+        required: false;
+        default: undefined;
+    };
+    helpText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>>, {
+    disabled: boolean;
+    headerActions: unknown[];
+    heading: string;
+    actionButtonListOverflowCount: number;
+    expandable: boolean;
+    startOpen: boolean;
+    helpText: string;
+}>;
+export default _default;