@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.10

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-flex d-inline-block align-center"
+    class="d-flex d-inline-block align-center vcs-chip-array-input"
     :class="{
       'py-1': !paddingProvided,
     }"
@@ -23,24 +23,21 @@
       <div v-for="({ key, value }, index) in localValue" :key="key">
         <v-chip
           v-if="selected !== index"
-          v-bind="{ ...noListenerAttrs }"
           size="small"
           :disabled="disabled"
           :closable="deletableChips"
           @click="select(index)"
           @click:close="remove(index)"
+          v-bind="{ ...noListenerAttrs }"
         >
           <span class="text-truncate d-inline-block">{{ value }}</span>
         </v-chip>
         <VcsTextField
           v-else
-          v-bind="{ ...noListenerAttrs }"
           rounded
           filled
           autofocus
           hide-spin-buttons
-          :height="useItemHeight().value - 8"
-          v-model="editValue"
           @keydown.esc="selected = -1"
           @blur="selected = -1"
           @keydown.enter="submitChange($event)"
@@ -48,27 +45,26 @@
           append-inner-icon="mdi-check"
           :style="{ width: `${inputWidth}px` }"
           class="py-0"
+          v-bind="{ ...noListenerAttrs }"
+          v-model="editValue"
         />
       </div>
       <div>
         <v-chip
           v-if="adding === false"
-          v-bind="{ ...noListenerAttrs }"
           size="small"
           :disabled="disabled"
           @click="adding = true"
+          v-bind="{ ...noListenerAttrs }"
         >
           <v-icon>$vcsPlus</v-icon>
         </v-chip>
         <VcsTextField
           v-else
-          v-bind="{ ...noListenerAttrs }"
           rounded
           filled
           autofocus
           hide-spin-buttons
-          :height="useItemHeight().value - 8"
-          v-model="newValue"
           @keydown.enter="add($event, newValue)"
           @click:append-inner="add($event, newValue)"
           @keydown.esc="cancel"
@@ -76,6 +72,8 @@
           append-inner-icon="mdi-check"
           :style="{ width: `${inputWidth}px` }"
           class="py-0"
+          v-bind="{ ...noListenerAttrs }"
+          v-model="newValue"
         />
       </div>
     </div>
@@ -96,10 +94,11 @@
     display: none;
   }
   .v-chip.v-chip--size-small {
-    --v-chip-height: calc(var(--v-vcs-item-height) - 8px);
+    --v-chip-height: calc(var(--v-vcs-font-size) * 2 - 2px);
+    padding: 0 calc(var(--v-vcs-font-size) - 3px);
   }
   :deep(.v-icon--size-x-small) {
-    font-size: 18px;
+    font-size: calc(var(--v-vcs-font-size) + 3px);
   }
   .row-gap {
     row-gap: 8px !important;
@@ -111,7 +110,6 @@
   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';
@@ -166,8 +164,8 @@
     setup(props, { attrs, emit }) {
       const selected = ref(-1);
       const adding = ref(false);
-      const editValue = ref(undefined);
-      const newValue = ref(undefined);
+      const editValue = ref(null);
+      const newValue = ref(null);
       const vcsChipArrayInput = ref();
       const hasScrollbar = ref();
 
@@ -247,7 +245,7 @@
       }
 
       function cancel() {
-        newValue.value = undefined;
+        newValue.value = null;
         adding.value = false;
       }
 
@@ -271,7 +269,7 @@
           vcsChipArrayInput.value.scrollLeft =
             vcsChipArrayInput.value.scrollWidth;
         }
-        newValue.value = undefined;
+        newValue.value = null;
         adding.value = true;
       }
 
@@ -294,7 +292,6 @@
         submitChange,
         add,
         cancel,
-        useItemHeight,
       };
     },
   };

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

@@ -29,8 +29,8 @@ declare const _default: import("vue").DefineComponent<{
     noListenerAttrs: import("vue").ComputedRef<Record<string, unknown>>;
     selected: import("vue").Ref<number>;
     adding: import("vue").Ref<boolean>;
-    editValue: import("vue").Ref<undefined>;
-    newValue: import("vue").Ref<undefined>;
+    editValue: import("vue").Ref<null>;
+    newValue: import("vue").Ref<null>;
     vcsChipArrayInput: import("vue").Ref<any>;
     hasScrollbar: import("vue").Ref<any>;
     remove: (index: any) => void;
@@ -38,7 +38,6 @@ declare const _default: import("vue").DefineComponent<{
     submitChange: (e: any) => void;
     add: (e: any, v: any) => Promise<void>;
     cancel: () => void;
-    useItemHeight: typeof useItemHeight;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ArrayConstructor;
@@ -75,4 +74,3 @@ declare const _default: import("vue").DefineComponent<{
     scrollDx: number;
 }, {}>;
 export default _default;
-import { useItemHeight } from '../../vuePlugins/vuetify.js';

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

@@ -1,20 +1,28 @@
 <template>
-  <v-row no-gutters v-if="localValue">
+  <v-row
+    no-gutters
+    v-if="localValue"
+    class="vcs-coordinate"
+    :class="{
+      'py-1': !paddingProvided,
+    }"
+  >
     <slot name="prepend" v-bind="{ ...$props }" />
     <template v-for="(_, idx) in localValue">
-      <v-col :key="`${prefixes[idx]}-coordinate`" v-if="!hideZ || idx < 2">
+      <v-col :key="`coordinate-${idx}`" v-if="!hideZ || idx < 2">
         <VcsTextField
-          :id="`${prefixes[idx]}-coordinate`"
           :hide-spin-buttons="true"
           type="number"
+          class="py-0"
           :min="getRangeFromExtent(idx, extent)?.[0]"
           :max="getRangeFromExtent(idx, extent)?.[1]"
           :step="steps[idx]"
-          :prefix="prefixes[idx]"
           :unit="units[idx]"
+          :prefix="prefixes[idx]"
+          force-prefix
           :decimals="decimals[idx]"
           v-bind="noListenerAttrs"
-          v-model="localValue[idx]"
+          v-model.number="localValue[idx]"
           :rules="getRulesForAxis(idx)"
         />
       </v-col>
@@ -33,6 +41,7 @@
   import { between } from '../style/composables.js';
   import { useProxiedComplexModel } from '../modelHelper.js';
   import { removeListenersFromAttrs } from '../attrsHelpers.js';
+  import { usePadding } from '../composables.js';
 
   /**
    *
@@ -114,11 +123,14 @@
         default: () => [[], [], []],
       },
     },
+    emits: ['update:modelValue'],
     setup(props, { attrs, emit }) {
       const localValue = useProxiedComplexModel(props, 'modelValue', emit);
       const noListenerAttrs = computed(() => removeListenersFromAttrs(attrs));
+      const paddingProvided = usePadding(attrs);
 
       return {
+        paddingProvided,
         localValue,
         noListenerAttrs,
         getRangeFromExtent,

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

@@ -32,11 +32,12 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[][];
     };
 }, {
+    paddingProvided: import("vue").ComputedRef<boolean>;
     localValue: import("vue").Ref<any>;
     noListenerAttrs: import("vue").ComputedRef<Record<string, unknown>>;
     getRangeFromExtent: typeof getRangeFromExtent;
     getRulesForAxis(idx: any): any[];
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ArrayConstructor;
         default: () => number[];
@@ -69,7 +70,9 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => never[][];
     };
-}>>, {
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     modelValue: unknown[];
     decimals: unknown[];
     extent: unknown[];

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

@@ -1,47 +1,44 @@
 <template>
-  <v-menu
-    v-model="menuOpen"
-    :close-on-content-click="false"
-    transition="scale-transition"
-    max-width="290px"
-    min-width="290px"
+  <VcsTextField
+    :prepend-icon="icon"
+    class="vcs-date-picker"
+    readonly
+    v-bind="$attrs"
+    v-model="formattedDate"
   >
-    <template #activator="{ props }">
-      <VcsTextField
-        :placeholder="formatDate(new Date().toISOString())"
-        :prepend-icon="icon"
-        readonly
-        hide-details
-        class="ma-0 py-1"
-        v-bind="props"
-        v-model="formattedDate"
-      />
-    </template>
-    <v-date-picker
-      v-model="date"
-      hide-header
-      @update:model-value="menuOpen = false"
-      color="primary"
+    <v-menu
+      activator="parent"
+      v-model="menuOpen"
+      :close-on-content-click="false"
+      transition="scale-transition"
+      max-width="290px"
+      min-width="290px"
     >
-      <template #actions>
-        <v-btn color="primary" @click="goToToday">
-          {{ $t('datePicker.today') }}
-        </v-btn>
-      </template>
-    </v-date-picker>
-  </v-menu>
+      <v-date-picker
+        v-model="localValue"
+        hide-header
+        @update:model-value="menuOpen = false"
+        color="primary"
+      >
+        <template #actions>
+          <v-btn color="primary" @click="goToToday">
+            {{ $t('datePicker.today') }}
+          </v-btn>
+        </template>
+      </v-date-picker>
+    </v-menu>
+  </VcsTextField>
 </template>
 <style lang="scss" scoped></style>
 <script>
-  import { computed, ref, watch, onBeforeMount } from 'vue';
+  import { computed, ref, watch } 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} modelValue - value of the date picker in {@link https://tc39.es/ecma262/#sec-date-time-string-format | Date Time String Format}
+   * @description stylized wrapper around {@link https://vuetifyjs.com/en/components/date-pickers/#internationalization}.
+   * @vue-prop {Date} modelValue - value of the date picker as a Date (changes to the Date Object are not tracked, handled as atomic value)
    * @vue-prop {string} [icon] - specify optional prepend icon, defaults to mdi-calendar
    */
   export default {
@@ -65,27 +62,35 @@
     emits: ['update:modelValue'],
     setup(props, { emit }) {
       const i18n = useI18n();
-      const localValue = ref(props.modelValue);
       const menuOpen = ref(false);
+      const internal = ref(props.modelValue);
 
-      const isValid = (date) => !Number.isNaN(date.getTime());
-      const setFromValue = () => {
-        if (isValid(props.modelValue)) {
-          localValue.value = props.modelValue;
-        } else if (localValue.value) {
-          getLogger('VcsDatePicker').error(
-            'Invalid date provided: ',
-            props.modelValue,
-          );
-        }
-      };
-      onBeforeMount(() => setFromValue());
+      watch(
+        () => props.modelValue,
+        (newValue) => {
+          if (!menuOpen.value) {
+            internal.value = newValue;
+          }
+        },
+      );
+
+      const localValue = computed({
+        get() {
+          return internal.value;
+        },
+        set(newValue) {
+          if (internal.value?.getTime() !== newValue?.getTime()) {
+            internal.value = newValue;
+            emit('update:modelValue', newValue);
+          }
+        },
+      });
 
       const formatDate = (date) => {
         if (date) {
           return new Intl.DateTimeFormat(i18n.locale.value, {
             dateStyle: 'short',
-          }).format(Date.parse(date));
+          }).format(date);
         }
         return '';
       };
@@ -93,27 +98,16 @@
         localValue.value = new Date();
         menuOpen.value = false;
       };
-      watch(
-        () => props.modelValue,
-        () => setFromValue(),
-      );
       const formattedDate = computed({
         get: () => {
           return formatDate(localValue.value);
         },
         set: () => {},
       });
-      const date = computed({
-        get: () => localValue.value,
-        set: (nv) => {
-          localValue.value = nv;
-          emit('update:modelValue', localValue.value);
-        },
-      });
 
       return {
         formattedDate,
-        date,
+        localValue,
         menuOpen,
         formatDate,
         goToToday,

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

@@ -9,69 +9,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     formattedDate: import("vue").WritableComputedRef<string>;
-    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;
-        };
-    }>;
+    localValue: import("vue").WritableComputedRef<Date>;
     menuOpen: import("vue").Ref<boolean>;
     formatDate: (date: any) => string;
     goToToday: () => void;
@@ -87,7 +25,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: Date;
     icon: string;
+    modelValue: Date;
 }, {}>;
 export default _default;

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

@@ -4,39 +4,36 @@
     variant="outlined"
     clear-icon="$close"
     :hide-details="false"
+    color="primary vcs-file-input"
     class="primary--placeholder"
     :class="{
       'py-1': !paddingProvided,
     }"
     v-bind="$attrs"
   >
-    <template #message="{ message }">
+    <template v-for="slot of forwardSlots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope ?? {}" />
+    </template>
+    <template #message="scope">
       <v-tooltip
         ref="errorTooltipRef"
         :activator="fileInputRef"
-        v-if="message"
-        :text="message"
+        v-if="scope?.message"
+        :text="$st(scope?.message)"
         content-class="bg-error"
         :location="tooltipPosition"
       />
+      <slot name="message" v-bind="scope ?? {}"></slot>
     </template>
-    <template #append-inner>
-      <slot name="append-inner"></slot>
+    <template #append-inner="scope">
+      <slot name="append-inner" v-bind="scope ?? {}"></slot>
       <v-tooltip
         :activator="fileInputRef"
         v-if="tooltip && !errorTooltipRef"
-        :text="tooltip"
+        :text="$st(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>
 
@@ -44,19 +41,19 @@
   @import './vcsTextField.scss';
 
   // set text overflow for file input
-  :deep(.v-field__field) {
-    display: inline-block;
-    max-width: 100%;
+  :deep(.v-field__input) {
+    display: unset;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    line-height: calc(var(--v-vcs-font-size) * 2 - 3px);
   }
 </style>
 
 <script>
   import { ref } from 'vue';
   import { VFileInput, VTooltip } from 'vuetify/components';
-  import { usePadding } from '../composables.js';
+  import { getForwardSlots, usePadding } from '../composables.js';
 
   /**
    * @description extends API of {@link https://vuetifyjs.com/en/api/v-file-input v-text-field}.
@@ -84,13 +81,15 @@
         default: 'right',
       },
     },
-    setup(props, { attrs }) {
+    setup(props, { attrs, slots }) {
       const fileInputRef = ref();
       const errorTooltipRef = ref();
 
       const paddingProvided = usePadding(attrs);
+      const forwardSlots = getForwardSlots(slots, ['append-inner', 'message']);
 
       return {
+        forwardSlots,
         paddingProvided,
         fileInputRef,
         errorTooltipRef,

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

@@ -8,6 +8,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
+    forwardSlots: string[];
     paddingProvided: import("vue").ComputedRef<boolean>;
     fileInputRef: import("vue").Ref<any>;
     errorTooltipRef: import("vue").Ref<any>;

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

@@ -5,20 +5,43 @@
     :class="{
       'vcs-label-required': required,
       'vcs-label-disabled': disabled,
+      'pa-1': !paddingProvided,
     }"
   >
-    <slot />
+    <span class="ellipsis-text" ref="labelTextRef">
+      <slot />
+      <v-tooltip
+        v-if="labelTooltip"
+        activator="parent"
+        :location="tooltipPosition"
+        :text="$st(labelTooltip)"
+      ></v-tooltip>
+    </span>
+    <vcs-help-tooltip :text="helpText" v-if="helpText || $slots.help">
+      <slot name="help" />
+    </vcs-help-tooltip>
   </label>
 </template>
 
 <style lang="scss" scoped>
+  .ellipsis-text {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .vcs-label {
+    box-sizing: content-box;
     display: flex;
+    flex-direction: row;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     align-items: center;
-    height: var(--v-vcs-item-height);
+    height: calc(var(--v-vcs-font-size) * 2 - 2px);
     font-size: var(--v-vcs-font-size);
   }
-  .vcs-label-required:after {
+  .vcs-label-required .ellipsis-text:after {
     content: ' *';
     color: rgb(var(--v-theme-error));
   }
@@ -27,15 +50,26 @@
   }
 </style>
 <script>
+  import { VTooltip } from 'vuetify/components';
+  import { computed, ref } from 'vue';
+  import { createEllipseTooltip, usePadding } from '../composables.js';
+  import VcsHelpTooltip from '../notification/VcsHelpTooltip.vue';
+
   /**
    * @description Stylized wrapper around {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label |label label}.
    * Pass the label text as innerHtml.
    * @vue-prop {string} htmlFor - an id reference the label is meant for.
    * @vue-prop {boolean} [required=false] - Marks an input field as required by adding an asterisk after the label.
    * @vue-prop {boolean} [disabled=false] - Marks an input field as disabled by adding transparency to the label.
+   * @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: 'VcsLabel',
+    components: {
+      VcsHelpTooltip,
+      VTooltip,
+    },
     props: {
       htmlFor: {
         type: String,
@@ -49,6 +83,34 @@
         type: Boolean,
         default: false,
       },
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+      helpText: {
+        type: String,
+        default: undefined,
+      },
+    },
+    setup(props, { attrs }) {
+      const paddingProvided = usePadding(attrs);
+      const labelTextRef = ref();
+      const labelTooltip = createEllipseTooltip(
+        computed(() => {
+          return labelTextRef.value;
+        }),
+        computed(() => props.tooltip),
+        computed(() => labelTextRef.value?.textContent),
+      );
+      return {
+        paddingProvided,
+        labelTooltip,
+        labelTextRef,
+      };
     },
   };
 </script>