sprintify-ui 0.2.12 → 0.2.13

package/src/components/BaseNumber.vue

@@ -1,383 +0,0 @@
-<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 && invalidInput"
-        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" />
-        </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" />
-        </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;
-  const number = parseFloat(value + '');
-  if (Number.isNaN(number)) {
-    return null;
-  }
-  return number;
-}
-
-function convertToValidNumber(
-  value: string | number | null | undefined
-): number | null {
-  let number = convertToNumber(value);
-
-  if (number === null) 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 valueInternalNumber = computed<number | null>(() => {
-  return convertToNumber(valueInternal.value);
-});
-
-const valueInternalValidNumber = computed<number | null>(() => {
-  return convertToValidNumber(valueInternal.value);
-});
-
-const realValueInternalAsString = computed<string>(() => {
-  if (valueInternalValidNumber.value === null) return '';
-  return valueInternalValidNumber.value.toLocaleString('fullwide', {
-    useGrouping: false,
-  });
-});
-
-const invalidInput = computed(() => {
-  if (valueInternalValidNumber.value == null && valueInternal.value == '') {
-    return false;
-  }
-
-  return realValueInternalAsString.value != (valueInternal.value ?? '');
-});
-
-const tooBig = computed(() => {
-  if (valueInternalNumber.value === null) return false;
-  return hasMax.value && valueInternalNumber.value > (props.max as number);
-});
-
-const tooSmall = computed(() => {
-  if (valueInternalNumber.value === null) return false;
-  return hasMin.value && valueInternalNumber.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;
-});
-
-if (convertToValidNumber(props.modelValue) != props.modelValue) {
-  emitUpdate(valueInternalValidNumber.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(valueInternalValidNumber.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 (valueInternalValidNumber.value === null) {
-    valueInternal.value = '';
-    return;
-  }
-  valueInternal.value = round(
-    valueInternalValidNumber.value ?? defaultValue.value,
-    precision.value
-  );
-}
-
-function increment() {
-  if (props.disabled) return;
-  if (valueInternalValidNumber.value === null) {
-    valueInternal.value = defaultValue.value;
-  } else {
-    const newValue = round(
-      valueInternalValidNumber.value + stepNormalized.value,
-      precision.value
-    );
-    if (!hasMax.value || newValue <= (props.max as number)) {
-      valueInternal.value = newValue;
-    }
-  }
-  emitUpdate(valueInternalValidNumber.value);
-}
-
-function decrement() {
-  if (props.disabled) return;
-  if (valueInternalValidNumber.value === null) {
-    valueInternal.value = defaultValue.value;
-  } else {
-    const newValue = round(
-      valueInternalValidNumber.value - stepNormalized.value,
-      precision.value
-    );
-    if (!hasMin.value || newValue >= (props.min as number)) {
-      valueInternal.value = newValue;
-    }
-  }
-  emitUpdate(valueInternalValidNumber.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>