sprintify-ui 0.0.145 → 0.0.146

package/src/components/BaseNumber.vue

@@ -0,0 +1,280 @@
+<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="invalidInput" class="absolute left-0 top-full">
+        <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="step"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :min="min"
+        :max="max"
+        :class="[
+          ['full', 'left'].includes(rounded) ? 'rounded-l' : '',
+          invalidInput ? '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 { round } from 'lodash';
+import { PropType } from 'vue';
+
+const AUTO_CORRECT_TIMEOUT = 2000;
+
+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'>,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'keydown']);
+
+const { hasErrorInternal, emitUpdate } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
+const precision = computed(() => {
+  if (props.step === undefined) return 0;
+  if (props.step === 0) return 0;
+  const parts = props.step.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);
+
+  timeoutId = setTimeout(() => {
+    updateInternalValueToRealValue();
+  }, AUTO_CORRECT_TIMEOUT);
+}
+
+function onBlur(e: Event) {
+  emit('blur', e);
+  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);
+}
+
+function updateInternalValueToRealValue() {
+  if (realValueInternal.value === null) {
+    valueInternal.value = '';
+    return;
+  }
+  valueInternal.value = round(realValueInternal.value ?? 0, precision.value);
+}
+
+function increment() {
+  if (props.disabled) return;
+  if (realValueInternal.value === null) {
+    valueInternal.value = 0;
+  } else {
+    const newValue = round(
+      realValueInternal.value + props.step,
+      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 = 0;
+  } else {
+    const newValue = round(
+      realValueInternal.value - props.step,
+      precision.value
+    );
+    if (!hasMin.value || newValue >= (props.min as number)) {
+      valueInternal.value = newValue;
+    }
+  }
+  emitUpdate(realValueInternal.value);
+}
+
+const borderColor = computed(() => {
+  if (hasErrorInternal.value) return 'border-red-500';
+  return 'border-slate-300';
+});
+</script>

package/src/components/index.ts

@@ -53,6 +53,7 @@ import BaseModalSide from './BaseModalSide.vue';
 import BaseNavbar from './BaseNavbar.vue';
 import BaseNavbarItem from './BaseNavbarItem.vue';
 import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
+import BaseNumber from './BaseNumber.vue';
 import BasePagination from './BasePagination.vue';
 import BasePanel from './BasePanel.vue';
 import BasePassword from './BasePassword.vue';
@@ -140,6 +141,7 @@ export {
   BaseNavbar,
   BaseNavbarItem,
   BaseNavbarItemContent,
+  BaseNumber,
   BasePagination,
   BasePanel,
   BasePassword,

package/src/lang/en.json

@@ -20,6 +20,9 @@
     "file_must_be_of_type": "The file must be of type",
     "filters": "Filters",
     "go_to_page": "Go to ",
+    "invalid_value": "Invalid value",
+    "just_now": "Just now",
+    "maximum_x_decimal_places": "Maximum 1 decimal place|Maximum {count} decimal places",
     "min_x_characters": "{x} characters minimum",
     "month": "Month",
     "next": "Next",
@@ -59,7 +62,6 @@
     "year": "Year",
     "yes_delete": "Yes, delete",
     "you_can_upload_up_to_n_files": "You can upload one file at most|You can upload up to {count} files",
-    "you_cannot_select_more_than_x_items": "You can't select more than one item|You can't select more than {count} items",
-    "just_now": "Just now"
+    "you_cannot_select_more_than_x_items": "You can't select more than one item|You can't select more than {count} items"
   }
 }

package/src/lang/fr.json

@@ -20,6 +20,9 @@
     "file_must_be_of_type": "Le fichier doit être de type",
     "filters": "Filtres",
     "go_to_page": "Page",
+    "invalid_value": "Valeur invalide",
+    "just_now": "à l’instant",
+    "maximum_x_decimal_places": "Maximum 1 décimale|Maximum {count} décimales",
     "min_x_characters": "{x} caractères minimum",
     "month": "Mois",
     "next": "Suivant",
@@ -59,7 +62,6 @@
     "year": "Année",
     "yes_delete": "Oui, supprimer",
     "you_can_upload_up_to_n_files": "Vous pouvez télécharger un fichier au maximum|Vous pouvez télécharger jusqu'à {count} fichiers",
-    "you_cannot_select_more_than_x_items": "Vous ne pouvez pas sélectionner plus de un élément|Vous ne pouvez pas sélectionner plus de {count} éléments",
-    "just_now": "à l’instant"
+    "you_cannot_select_more_than_x_items": "Vous ne pouvez pas sélectionner plus de un élément|Vous ne pouvez pas sélectionner plus de {count} éléments"
   }
 }