sprintify-ui 0.1.15 → 0.1.17

package/src/components/BaseNumber.vue

@@ -1,346 +1,366 @@
-<template>
-  <div class="base-number relative">
-    <Transition
-      enter-active-class="transition duration-200 ease-out"
-      enter-from-class="transform scale-90 opacity-0"
-      enter-to-class="transform scale-100 opacity-100"
-      leave-active-class="transition duration-75 ease-in"
-      leave-from-class="transform scale-100 opacity-100"
-      leave-to-class="transform scale-90 opacity-0"
-    >
-      <div v-if="showInvalidInput" class="absolute left-0 top-full z-[1]">
-        <div
-          class="mt-1 ml-1 rounded bg-red-500 px-2 py-1 text-xs font-medium text-white"
-        >
-          <span v-if="tooBig"> Maximum {{ max }} </span>
-          <span v-else-if="tooSmall"> Minimum {{ min }} </span>
-          <span v-else>
-            {{ $t('sui.maximum_x_decimal_places', { count: precision }) }}
-          </span>
-        </div>
-      </div>
-    </Transition>
-
-    <div
-      class="relative flex"
-      :class="[borderColor, borderless ? '' : 'rounded border']"
-    >
-      <input
-        v-model="valueInternal"
-        :required="required"
-        :name="name"
-        :step="stepNormalized"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :min="min"
-        :max="max"
-        :class="[
-          ['full', 'left'].includes(rounded) ? 'rounded-l' : '',
-          showInvalidInput ? 'focus:ring-red-400' : 'focus:ring-primary-500',
-        ]"
-        class="w-full border-none focus:z-[1] focus:border-none focus:border-transparent focus:shadow-none focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300"
-        type="text"
-        @input="onInput"
-        @blur="onBlur"
-        @focus="onFocus"
-        @keydown="onKeydown"
-      />
-      <div class="border-l border-slate-300">
-        <button
-          type="button"
-          :class="[['full', 'right'].includes(rounded) ? 'rounded-tr' : '']"
-          class="block h-1/2 border-b border-slate-300 bg-white enabled:hover:bg-slate-100 disabled:cursor-not-allowed disabled:text-slate-400"
-          :disabled="disabled"
-          @click="increment"
-        >
-          <BaseIcon icon="mdi:chevron-up"></BaseIcon>
-        </button>
-        <button
-          type="button"
-          :class="[['full', 'right'].includes(rounded) ? 'rounded-br' : '']"
-          class="block h-1/2 bg-white enabled:hover:bg-slate-100 disabled:cursor-not-allowed disabled:text-slate-400"
-          :disabled="disabled"
-          @click="decrement"
-        >
-          <BaseIcon icon="mdi:chevron-down"></BaseIcon>
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useField } from '@/composables/field';
-import { isNumber, round } from 'lodash';
-import { PropType } from 'vue';
-import { BaseIcon } from '.';
-
-const AUTO_CORRECT_TIMEOUT = 2000;
-const SHOW_INVALID_INPUT_TIMEOUT = 500;
-
-const props = defineProps({
-  modelValue: {
-    default: undefined,
-    type: [Number, null] as PropType<number | null>,
-  },
-  /**
-   * The step of the input. Can be a number or null.
-   */
-  step: {
-    default: 1,
-    type: Number,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  placeholder: {
-    default: '',
-    type: String,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  required: {
-    default: false,
-    type: Boolean,
-  },
-  min: {
-    default: undefined,
-    type: Number,
-  },
-  max: {
-    default: undefined,
-    type: Number,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-  borderless: {
-    default: false,
-    type: Boolean,
-  },
-  rounded: {
-    default: 'full',
-    type: String as PropType<'full' | 'left' | 'right' | 'none'>,
-  },
-  autoFix: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'keydown']);
-
-const { hasErrorInternal, emitUpdate, enableForm, disableForm } = useField({
-  name: computed(() => props.name),
-  required: computed(() => props.required),
-  hasError: computed(() => props.hasError),
-  emit: emit,
-});
-
-const showInvalidInput = ref(false);
-
-const stepNormalized = computed<number>(() => {
-  if (props.step === undefined) return 1;
-  if (props.step === 0) return 1;
-  if (props.step === null) return 1;
-  if (!isNumber(props.step)) return 1;
-  return props.step;
-});
-
-const precision = computed(() => {
-  const parts = stepNormalized.value.toString().split('.');
-  if (parts.length === 1) return 0;
-  return parts[1].length;
-});
-
-const hasMax = computed(() => props.max !== undefined && props.max !== null);
-const hasMin = computed(() => props.min !== undefined && props.min !== null);
-
-function convertToNumber(
-  value: string | number | null | undefined
-): number | null {
-  if (value === null) return null;
-  let number = parseFloat(value + '');
-  if (Number.isNaN(number)) {
-    return null;
-  }
-  if (hasMax.value) {
-    number = Math.min(number, props.max as number);
-  }
-  if (hasMin.value) {
-    number = Math.max(number, props.min as number);
-  }
-  return round(number, precision.value);
-}
-
-const valueInternal = ref<null | string | number>(null);
-
-const realValueInternal = computed<number | null>(() => {
-  return convertToNumber(valueInternal.value);
-});
-
-const invalidInput = computed(() => {
-  if (realValueInternal.value == null && valueInternal.value == '') {
-    return false;
-  }
-
-  return realValueInternal.value != valueInternal.value;
-});
-
-const tooBig = computed(() => {
-  if (valueInternal.value === null) return false;
-  return hasMax.value && valueInternal.value > (props.max as number);
-});
-
-const tooSmall = computed(() => {
-  if (valueInternal.value === null) return false;
-  return hasMin.value && valueInternal.value < (props.min as number);
-});
-
-valueInternal.value = convertToNumber(props.modelValue);
-
-if (valueInternal.value != props.modelValue) {
-  emitUpdate(realValueInternal.value);
-}
-
-let timeoutId = undefined as undefined | number;
-
-function onInput(event: any) {
-  clearTimeout(timeoutId);
-
-  let value = (event.target.value + '' ?? '').replace(/[^\d.-]/g, '');
-
-  // remove all n + 1 dots
-  const parts = value.split('.');
-  value = parts.shift() + '';
-
-  if (parts.length > 0) {
-    value += '.' + parts.join('');
-  }
-
-  valueInternal.value = value;
-
-  emitUpdate(realValueInternal.value);
-
-  nextTick(() => {
-    showHideInvalidOnInput();
-  });
-
-  timeoutId = setTimeout(() => {
-    updateInternalValueToRealValue();
-  }, AUTO_CORRECT_TIMEOUT);
-}
-
-let showInvalidInputTimeoutId = undefined as undefined | number;
-
-function showHideInvalidOnInput() {
-  clearTimeout(showInvalidInputTimeoutId);
-
-  if (!invalidInput.value) {
-    showInvalidInput.value = false;
-    return;
-  }
-
-  showInvalidInputTimeoutId = setTimeout(() => {
-    showInvalidInput.value = true;
-  }, SHOW_INVALID_INPUT_TIMEOUT);
-}
-
-function onBlur(e: Event) {
-  emit('blur', e);
-
-  if (invalidInput.value) {
-    showInvalidInput.value = true;
-  }
-
-  updateInternalValueToRealValue();
-}
-
-function onFocus(e: Event) {
-  emit('focus', e);
-}
-
-function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'ArrowUp') {
-    increment();
-    e.preventDefault();
-  } else if (e.key === 'ArrowDown') {
-    decrement();
-    e.preventDefault();
-  }
-  emit('keydown', e);
-}
-
-const defaultValue = computed<number>(() => {
-  return Math.max(0, props.min ?? 0);
-});
-
-function updateInternalValueToRealValue() {
-  if (!props.autoFix) {
-    return;
-  }
-  if (realValueInternal.value === null) {
-    valueInternal.value = '';
-    return;
-  }
-  valueInternal.value = round(
-    realValueInternal.value ?? defaultValue.value,
-    precision.value
-  );
-}
-
-function increment() {
-  if (props.disabled) return;
-  if (realValueInternal.value === null) {
-    valueInternal.value = defaultValue.value;
-  } else {
-    const newValue = round(
-      realValueInternal.value + stepNormalized.value,
-      precision.value
-    );
-    if (!hasMax.value || newValue <= (props.max as number)) {
-      valueInternal.value = newValue;
-    }
-  }
-  emitUpdate(realValueInternal.value);
-}
-
-function decrement() {
-  if (props.disabled) return;
-  if (realValueInternal.value === null) {
-    valueInternal.value = defaultValue.value;
-  } else {
-    const newValue = round(
-      realValueInternal.value - stepNormalized.value,
-      precision.value
-    );
-    if (!hasMin.value || newValue >= (props.min as number)) {
-      valueInternal.value = newValue;
-    }
-  }
-  emitUpdate(realValueInternal.value);
-}
-
-const borderColor = computed(() => {
-  if (hasErrorInternal.value || invalidInput.value) return 'border-red-500';
-  return 'border-slate-300';
-});
-
-/** Disable form */
-
-watch(
-  () => invalidInput.value,
-  () => {
-    if (invalidInput.value) {
-      disableForm();
-    } else {
-      enableForm();
-    }
-  },
-  { immediate: true }
-);
-</script>
+<template>
+  <div class="base-number relative">
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="transform scale-90 opacity-0"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-active-class="transition duration-75 ease-in"
+      leave-from-class="transform scale-100 opacity-100"
+      leave-to-class="transform scale-90 opacity-0"
+    >
+      <div v-if="showInvalidInput" class="absolute left-0 top-full z-[1]">
+        <div
+          class="mt-1 ml-1 rounded bg-red-500 px-2 py-1 text-xs font-medium text-white"
+        >
+          <span v-if="tooBig"> Maximum {{ max }} </span>
+          <span v-else-if="tooSmall"> Minimum {{ min }} </span>
+          <span v-else-if="tooPrecise">
+            {{ t('sui.maximum_x_decimal_places', { count: precision }) }}
+          </span>
+          <span v-else>
+            {{ t('sui.invalid_value') }}
+          </span>
+        </div>
+      </div>
+    </Transition>
+
+    <div
+      class="relative flex"
+      :class="[borderColor, borderless ? '' : 'rounded border']"
+    >
+      <input
+        v-model="valueInternal"
+        :required="required"
+        :name="name"
+        :step="stepNormalized"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :min="min"
+        :max="max"
+        :class="[
+          ['full', 'left'].includes(rounded) ? 'rounded-l' : '',
+          showInvalidInput ? 'focus:ring-red-400' : 'focus:ring-primary-500',
+        ]"
+        class="w-full border-none focus:z-[1] focus:border-none focus:border-transparent focus:shadow-none focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300"
+        type="text"
+        @input="onInput"
+        @blur="onBlur"
+        @focus="onFocus"
+        @keydown="onKeydown"
+      />
+      <div class="border-l border-slate-300">
+        <button
+          type="button"
+          :class="[['full', 'right'].includes(rounded) ? 'rounded-tr' : '']"
+          class="block h-1/2 border-b border-slate-300 bg-white enabled:hover:bg-slate-100 disabled:cursor-not-allowed disabled:text-slate-400"
+          :disabled="disabled"
+          @click="increment"
+        >
+          <BaseIcon icon="mdi:chevron-up"></BaseIcon>
+        </button>
+        <button
+          type="button"
+          :class="[['full', 'right'].includes(rounded) ? 'rounded-br' : '']"
+          class="block h-1/2 bg-white enabled:hover:bg-slate-100 disabled:cursor-not-allowed disabled:text-slate-400"
+          :disabled="disabled"
+          @click="decrement"
+        >
+          <BaseIcon icon="mdi:chevron-down"></BaseIcon>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useField } from '@/composables/field';
+import { isNumber, round } from 'lodash';
+import { PropType } from 'vue';
+import { BaseIcon } from '.';
+import { t } from '@/i18n';
+
+const AUTO_CORRECT_TIMEOUT = 2000;
+const SHOW_INVALID_INPUT_TIMEOUT = 500;
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [Number, null] as PropType<number | null>,
+  },
+  /**
+   * The step of the input. Can be a number or null.
+   */
+  step: {
+    default: 1,
+    type: Number,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  placeholder: {
+    default: '',
+    type: String,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  min: {
+    default: undefined,
+    type: Number,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+  borderless: {
+    default: false,
+    type: Boolean,
+  },
+  rounded: {
+    default: 'full',
+    type: String as PropType<'full' | 'left' | 'right' | 'none'>,
+  },
+  autoFix: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'keydown']);
+
+const { hasErrorInternal, emitUpdate, enableForm, disableForm } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
+const showInvalidInput = ref(false);
+
+const stepNormalized = computed<number>(() => {
+  if (props.step === undefined) return 1;
+  if (props.step === 0) return 1;
+  if (props.step === null) return 1;
+  if (!isNumber(props.step)) return 1;
+  return props.step;
+});
+
+const precision = computed(() => {
+  const parts = stepNormalized.value.toString().split('.');
+  if (parts.length === 1) return 0;
+  return parts[1].length;
+});
+
+const hasMax = computed(() => props.max !== undefined && props.max !== null);
+const hasMin = computed(() => props.min !== undefined && props.min !== null);
+
+function convertToNumber(
+  value: string | number | null | undefined
+): number | null {
+  if (value === null) return null;
+  let number = parseFloat(value + '');
+  if (Number.isNaN(number)) {
+    return null;
+  }
+  if (hasMax.value) {
+    number = Math.min(number, props.max as number);
+  }
+  if (hasMin.value) {
+    number = Math.max(number, props.min as number);
+  }
+  return round(number, precision.value);
+}
+
+const valueInternal = ref<null | string | number>(null);
+
+const realValueInternal = computed<number | null>(() => {
+  return convertToNumber(valueInternal.value);
+});
+
+const realValueInternalAsString = computed<string>(() => {
+  if (realValueInternal.value === null) return '';
+  return realValueInternal.value.toLocaleString('fullwide', {
+    useGrouping: false,
+  });
+});
+
+const invalidInput = computed(() => {
+  if (realValueInternal.value == null && valueInternal.value == '') {
+    return false;
+  }
+
+  return realValueInternalAsString.value != (valueInternal.value ?? '');
+});
+
+const tooBig = computed(() => {
+  if (realValueInternal.value === null) return false;
+  return hasMax.value && realValueInternal.value > (props.max as number);
+});
+
+const tooSmall = computed(() => {
+  if (realValueInternal.value === null) return false;
+  return hasMin.value && realValueInternal.value < (props.min as number);
+});
+
+const tooPrecise = computed(() => {
+  if (valueInternal.value === null) return false;
+  const parts = (valueInternal.value + '').split('.');
+
+  if (parts.length === 1) return false;
+
+  return parts[1].length > precision.value;
+});
+
+valueInternal.value = convertToNumber(props.modelValue);
+
+if (valueInternal.value != props.modelValue) {
+  emitUpdate(realValueInternal.value);
+}
+
+let timeoutId = undefined as undefined | number;
+
+function onInput(event: any) {
+  clearTimeout(timeoutId);
+
+  let value = (event.target.value + '' ?? '').replace(/[^\d.-]/g, '');
+
+  // remove all n + 1 dots
+  const parts = value.split('.');
+  value = parts.shift() + '';
+
+  if (parts.length > 0) {
+    value += '.' + parts.join('');
+  }
+
+  valueInternal.value = value;
+
+  emitUpdate(realValueInternal.value);
+
+  nextTick(() => {
+    showHideInvalidOnInput();
+  });
+
+  timeoutId = setTimeout(() => {
+    updateInternalValueToRealValue();
+  }, AUTO_CORRECT_TIMEOUT);
+}
+
+let showInvalidInputTimeoutId = undefined as undefined | number;
+
+function showHideInvalidOnInput() {
+  clearTimeout(showInvalidInputTimeoutId);
+
+  if (!invalidInput.value) {
+    showInvalidInput.value = false;
+    return;
+  }
+
+  showInvalidInputTimeoutId = setTimeout(() => {
+    showInvalidInput.value = true;
+  }, SHOW_INVALID_INPUT_TIMEOUT);
+}
+
+function onBlur(e: Event) {
+  emit('blur', e);
+
+  if (invalidInput.value) {
+    showInvalidInput.value = true;
+  }
+
+  updateInternalValueToRealValue();
+}
+
+function onFocus(e: Event) {
+  emit('focus', e);
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'ArrowUp') {
+    increment();
+    e.preventDefault();
+  } else if (e.key === 'ArrowDown') {
+    decrement();
+    e.preventDefault();
+  }
+  emit('keydown', e);
+}
+
+const defaultValue = computed<number>(() => {
+  return Math.max(0, props.min ?? 0);
+});
+
+function updateInternalValueToRealValue() {
+  if (!props.autoFix) {
+    return;
+  }
+  if (realValueInternal.value === null) {
+    valueInternal.value = '';
+    return;
+  }
+  valueInternal.value = round(
+    realValueInternal.value ?? defaultValue.value,
+    precision.value
+  );
+}
+
+function increment() {
+  if (props.disabled) return;
+  if (realValueInternal.value === null) {
+    valueInternal.value = defaultValue.value;
+  } else {
+    const newValue = round(
+      realValueInternal.value + stepNormalized.value,
+      precision.value
+    );
+    if (!hasMax.value || newValue <= (props.max as number)) {
+      valueInternal.value = newValue;
+    }
+  }
+  emitUpdate(realValueInternal.value);
+}
+
+function decrement() {
+  if (props.disabled) return;
+  if (realValueInternal.value === null) {
+    valueInternal.value = defaultValue.value;
+  } else {
+    const newValue = round(
+      realValueInternal.value - stepNormalized.value,
+      precision.value
+    );
+    if (!hasMin.value || newValue >= (props.min as number)) {
+      valueInternal.value = newValue;
+    }
+  }
+  emitUpdate(realValueInternal.value);
+}
+
+const borderColor = computed(() => {
+  if (hasErrorInternal.value || invalidInput.value) return 'border-red-500';
+  return 'border-slate-300';
+});
+
+/** Disable form */
+
+watch(
+  () => invalidInput.value,
+  () => {
+    if (invalidInput.value) {
+      disableForm();
+    } else {
+      enableForm();
+    }
+  },
+  { immediate: true }
+);
+</script>