@vcmap/ui 5.3.2 → 6.0.0-rc.1

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

@@ -1,225 +1,100 @@
 <template>
-  <div @mouseover="hover = true" @mouseleave="hover = false">
-    <VcsTooltip
-      :tooltip-position="tooltipPosition"
-      :tooltip="errorMessage"
-      color="error"
-      :max-width="200"
-    >
-      <template #activator="{ attrs, on }">
-        <component
-          :is="inputComponent"
-          ref="textFieldRef"
-          hide-details
-          :hide-spin-buttons="!showSpinButtons"
-          :dense="isDense"
-          :clearable="isClearable"
-          @focus="onFocus"
-          @blur="onBlur"
-          @keydown.esc="onEscape"
-          @keydown="$emit('keydown', $event)"
-          :type="type"
-          outlined
-          v-model="visibleValue"
-          v-bind="{ ...$attrs, ...attrs }"
-          v-on="{ ...$listeners, ...on }"
-          :height="isDense ? 24 : 32"
-          :rules="rules"
-          class="primary--placeholder align-center"
-          :class="{
-            'py-1': !noPadding,
-            'remove-outline': !isOutlined,
-            'outline--current': focus,
-            'outline--error': !!errorMessage,
-            'input--unit': !!unit,
-            'input--dense': isDense,
-            'input--not-dense': !isDense,
-            'file-border-bottom':
-              inputComponent === 'VFileInput' &&
-              !focus &&
-              !hover &&
-              !errorMessage,
-          }"
-        >
-          <template #append>
-            <slot name="append">{{ unit }}</slot>
-          </template>
-        </component>
-      </template>
-    </VcsTooltip>
-  </div>
+  <v-text-field
+    ref="textFieldRef"
+    variant="outlined"
+    clear-icon="$close"
+    :hide-details="false"
+    :rules="rules"
+    :type="type"
+    class="primary--placeholder"
+    :class="{
+      'py-1': !paddingProvided,
+    }"
+    v-bind="$attrs"
+    v-model="visibleValue"
+    v-model:focused="focused"
+  >
+    <template #append-inner v-if="unit">
+      <slot name="append-inner">{{ unit }}</slot>
+    </template>
+    <template v-for="slot of Object.keys($slots)" #[slot]="scope">
+      <slot :name="slot" v-bind="scope" />
+    </template>
+    <template #message="{ message }">
+      <v-tooltip
+        ref="errorTooltipRef"
+        :activator="textFieldRef"
+        v-if="message"
+        :text="message"
+        content-class="bg-error"
+        :location="tooltipPosition"
+      />
+    </template>
+    <v-tooltip
+      v-if="tooltip && !errorTooltipRef"
+      :activator="textFieldRef"
+      :location="tooltipPosition"
+      :text="tooltip"
+    ></v-tooltip>
+  </v-text-field>
 </template>
 
 <style lang="scss" scoped>
-  .primary--placeholder {
-    ::v-deep {
-      input::placeholder {
-        color: var(--v-primary-base);
-        font-style: italic;
-        opacity: 1;
-        padding: 0 3px 0 0;
-      }
-      input::-moz-placeholder {
-        font-style: initial;
-      }
-    }
-  }
-  .remove-outline {
-    ::v-deep {
-      fieldset {
-        border-width: 0;
-        border-radius: 0;
-      }
-    }
-  }
-  .outline--current {
-    ::v-deep {
-      .v-input__slot fieldset {
-        border-color: currentColor;
-        transition: border-color 0.5s ease;
-      }
-      .v-text-field__slot input {
-        border-color: transparent;
-      }
-    }
-  }
-  .outline--error {
-    ::v-deep {
-      .v-input__slot fieldset,
-      .v-text-field__slot input {
-        border-color: var(--v-error-base);
-      }
-    }
-  }
-  div[type='number'] {
-    ::v-deep {
-      .v-text-field__slot input {
-        text-align: right;
-      }
-    }
-  }
-  .input--unit {
-    ::v-deep {
-      .v-text-field__slot input {
-        text-align: right;
-        padding-right: 3px;
-      }
-      .v-input__append-inner {
-        margin-top: 6px !important;
-        &:last-child {
-          border-bottom: 1px solid var(--v-base-base);
-          height: 24px;
-          margin-top: 0 !important;
-          align-items: center;
-        }
-      }
-    }
-  }
-  .input--unit.input--not-dense {
-    ::v-deep {
-      .v-input__append-inner {
-        &:last-child {
-          height: 32px;
-          padding-top: 2px;
-        }
-      }
-    }
-  }
-  .input--dense {
-    ::v-deep {
-      .v-text-field__slot input {
-        height: 24px;
-      }
-      .v-input__slot {
-        padding: 0 4px !important;
-      }
-      fieldset {
-        padding-left: 2px;
-      }
-    }
-  }
-  .input--not-dense {
-    ::v-deep {
-      .v-input__slot {
-        padding: 0 8px !important;
-      }
-      fieldset {
-        padding-left: 6px;
-      }
-    }
-  }
-  .file-border-bottom {
-    ::v-deep {
-      .v-file-input__text {
-        border-bottom: 1px solid var(--v-base-base);
-        border-radius: 0;
-      }
-    }
-  }
-  .v-input {
-    ::v-deep {
-      input {
-        height: 32px;
-        border-bottom: 1px solid var(--v-base-base);
-        border-radius: 0;
-      }
-      input::selection {
-        background-color: var(--v-primary-base);
-      }
-      .v-text-field__prefix {
-        padding-right: 8px;
-      }
-      .v-text-field__suffix {
-        padding-left: 4px;
-      }
-      .v-input__prepend-outer {
-        margin-right: 4px;
-      }
-      .v-icon {
-        font-size: 16px;
-      }
-      .v-text-field--rounded fieldset {
-        border-radius: 2px;
-        border-color: var(--v-base-base);
+  @import './vcsTextField.scss';
+</style>
+<script>
+  import { computed, ref } from 'vue';
+  import { VTextField, VTooltip } from 'vuetify/components';
+  import { usePadding } from '../composables.js';
+  import { useProxiedAtomicModel } from '../modelHelper.js';
+
+  function countDecimalPlaces(value) {
+    if (value) {
+      const str = value.toString();
+      const decimalIndex = str.indexOf('.');
+      if (decimalIndex > 0) {
+        return str.length - decimalIndex - 1;
       }
     }
+    return 0;
   }
-</style>
-
-<script>
-  import { computed, onMounted, ref } from 'vue';
-  import { VTextField, VFileInput } from 'vuetify/lib';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
-  import { useErrorSync } from './composables.js';
 
   /**
    * @description extends API of {@link https://vuetifyjs.com/en/api/v-text-field v-text-field}.
-   * Provides two height options depending on "dense" property:
-   * - if dense is set true (default), height is 24 px
-   * - if dense is set false, height is 32 px
    * Provides VcsTooltip to
    * - show error messages on focus
-   * - show tooltips, if supplied, when hovered over append-icon
+   * - show tooltips, if no error messages are available
    * When clicking esc key, previous input is restored.
-   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+   * @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
    * @vue-prop {string}                                 unit - Unit for number input fields. Is displayed behind the number.
    * @vue-prop {number|undefined}                       [decimals] - An optional number of decimal places the visible value will be rounded to. Does not affect the input value!
-   * @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.
-   * @vue-computed {string | number}                    visibleValue - Returns the number input as string with unit, in case unit is provided.
-   * @vue-computed {string}                             type - The input field type. If number input field is blurred and unit is provided, type changes to text field, so unit can be displayed in input field.
    */
   export default {
     name: 'VcsTextField',
+    inheritAttrs: false,
     components: {
-      VcsTooltip,
+      VTooltip,
       VTextField,
-      VFileInput,
     },
     props: {
+      type: {
+        type: String,
+        default: 'text',
+      },
+      modelValue: {
+        type: [String, Number],
+        default(rawProps) {
+          if (rawProps.type === 'number') {
+            return 0;
+          }
+          return '';
+        },
+      },
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
       tooltipPosition: {
         type: String,
         default: 'right',
@@ -232,72 +107,35 @@
         type: Number,
         default: undefined,
       },
-      showSpinButtons: {
-        type: Boolean,
-        default: false,
-      },
-      noPadding: {
-        type: Boolean,
-        default: false,
-      },
     },
-    setup(props, { attrs, emit }) {
-      const hover = ref(false);
-      const focus = ref(false);
+    setup(props, { attrs }) {
       const textFieldRef = ref();
+      const errorTooltipRef = ref();
+      const focused = ref(attrs.autofocus);
 
-      onMounted(() => {
-        // fix for autofocus
-        focus.value = attrs.autofocus != null;
-      });
+      // local value without emitting new value
+      const localValue = useProxiedAtomicModel(props, 'modelValue', () => {});
 
-      const errorMessage = useErrorSync(textFieldRef);
-
-      const inputComponent = computed(() => {
-        if (attrs.type === 'file') {
-          return 'VFileInput';
-        }
-        return 'VTextField';
-      });
-      const isClearable = computed(() => {
-        return (
-          attrs.clearable !== undefined &&
-          attrs.clearable !== false &&
-          (hover.value || focus.value || !!errorMessage.value)
-        );
-      });
-      const isDense = computed(() => attrs.dense !== false);
-      const isOutlined = computed(() => {
-        return (
-          (hover.value || focus.value || !!errorMessage.value) &&
-          !(attrs.disabled || attrs.disabled === '')
-        );
-      });
       const visibleValue = computed({
         get() {
           if (
-            attrs.type === 'number' &&
-            Number.isFinite(attrs.value) &&
-            props.decimals >= 0
+            !focused.value &&
+            props.type === 'number' &&
+            props.decimals &&
+            countDecimalPlaces(localValue.value) > props.decimals
           ) {
-            return parseFloat(attrs.value.toFixed(props.decimals));
+            const v = parseFloat(localValue.value);
+            if (Number.isFinite(v)) {
+              return v.toFixed(props.decimals);
+            }
           }
-          return attrs.value ?? '';
+          return localValue.value ?? '';
         },
         set(value) {
-          if (attrs.type === 'file') {
-            emit('input', value);
-          }
-          // emit is not needed for other types, the vuetify component already emits an @input event. (forwarded listeners)
+          localValue.value = value;
+          // emit is not needed since the vuetify component already emits an @input event. (forwarded listeners)
         },
       });
-      const type = computed(() => {
-        if (attrs.type === 'number' && !focus.value) {
-          return 'text';
-        } else {
-          return attrs.type || 'text';
-        }
-      });
 
       const rules = computed(() => {
         if (attrs.type === 'number' && Array.isArray(attrs.rules)) {
@@ -309,36 +147,15 @@
         }
       });
 
-      function onEscape(event) {
-        textFieldRef.value.blur();
-        emit('input', textFieldRef.value.initialValue);
-        emit('keydown', event);
-      }
-
-      function onBlur(event) {
-        focus.value = false;
-        emit('blur', event);
-      }
-      function onFocus(event) {
-        focus.value = true;
-        emit('focus', event);
-      }
+      const paddingProvided = usePadding(attrs);
 
       return {
-        hover,
-        focus,
-        inputComponent,
-        isClearable,
-        isDense,
-        isOutlined,
+        paddingProvided,
         visibleValue,
-        type,
         rules,
-        onEscape,
         textFieldRef,
-        errorMessage,
-        onBlur,
-        onFocus,
+        errorTooltipRef,
+        focused,
       };
     },
   };

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

@@ -1,4 +1,16 @@
 declare const _default: import("vue").DefineComponent<{
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default(rawProps: any): 0 | "";
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
     tooltipPosition: {
         type: StringConstructor;
         default: string;
@@ -11,30 +23,26 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: undefined;
     };
-    showSpinButtons: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    noPadding: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }, {
-    hover: import("vue").Ref<boolean>;
-    focus: import("vue").Ref<boolean>;
-    inputComponent: import("vue").ComputedRef<"VFileInput" | "VTextField">;
-    isClearable: import("vue").ComputedRef<boolean>;
-    isDense: import("vue").ComputedRef<boolean>;
-    isOutlined: import("vue").ComputedRef<boolean>;
-    visibleValue: import("vue").WritableComputedRef<{}>;
-    type: import("vue").ComputedRef<{}>;
+    paddingProvided: import("vue").ComputedRef<boolean>;
+    visibleValue: import("vue").WritableComputedRef<any>;
     rules: import("vue").ComputedRef<unknown>;
-    onEscape: (event: any) => void;
     textFieldRef: import("vue").Ref<any>;
-    errorMessage: import("vue").Ref<string>;
-    onBlur: (event: any) => void;
-    onFocus: (event: any) => void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    errorTooltipRef: import("vue").Ref<any>;
+    focused: import("vue").Ref<unknown>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default(rawProps: any): 0 | "";
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
     tooltipPosition: {
         type: StringConstructor;
         default: string;
@@ -47,19 +55,12 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: undefined;
     };
-    showSpinButtons: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    noPadding: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }>>, {
+    type: string;
+    modelValue: string | number;
+    tooltip: string;
     tooltipPosition: string;
     unit: string;
     decimals: number;
-    showSpinButtons: boolean;
-    noPadding: boolean;
-}>;
+}, {}>;
 export default _default;