sprintify-ui 0.1.15 → 0.1.16

package/src/components/BaseDatePicker.vue

@@ -15,7 +15,7 @@
       :disabled="disabled"
       class="flatpickr w-full rounded pl-10 pr-16 disabled:cursor-not-allowed disabled:text-slate-300"
       :class="[hasErrorInternal ? 'border-red-500' : 'border-slate-300']"
-      :placeholder="$t('sui.click_or_select_date')"
+      :placeholder="t('sui.click_or_select_date')"
     />
     <div
       v-if="modelValueFormatted && !disabled"
@@ -41,9 +41,11 @@ import { useField } from '@/composables/field';
 import flatpickr from 'flatpickr';
 import 'flatpickr/dist/flatpickr.css';
 
+import { t } from '@/i18n';
 import { French } from 'flatpickr/dist/l10n/fr';
 import { english } from 'flatpickr/dist/l10n/default';
 import { Instance } from 'flatpickr/dist/types/instance';
+import { useI18nStore } from '@/stores/i18n';
 
 const props = withDefaults(
   defineProps<{
@@ -78,8 +80,6 @@ const props = withDefaults(
   }
 );
 
-const i18n = useI18n();
-
 const emit = defineEmits(['update:modelValue']);
 
 const formatInternal = computed(() => {
@@ -140,7 +140,7 @@ function parseDate(date: string): string {
 }
 
 const locale = computed(() => {
-  if (i18n.locale.value == 'fr') {
+  if (useI18nStore().locale == 'fr') {
     return French;
   }
 

package/src/components/BaseDateSelect.vue

@@ -14,11 +14,11 @@
             },
             [hasErrorInternal ? 'border-red-500' : 'border-slate-300'],
           ]"
-          :placeholder="$t('sui.year')"
+          :placeholder="t('sui.year')"
           @change="update()"
         >
           <option disabled selected hidden :value="null">
-            {{ $t('sui.year') }}
+            {{ t('sui.year') }}
           </option>
           <option v-for="year in years" :key="year" :value="year">
             {{ year }}
@@ -39,11 +39,11 @@
             },
             [hasErrorInternal ? 'border-red-500' : 'border-slate-300'],
           ]"
-          :placeholder="$t('sui.month')"
+          :placeholder="t('sui.month')"
           @change="update()"
         >
           <option disabled selected hidden :value="null">
-            {{ $t('sui.month') }}
+            {{ t('sui.month') }}
           </option>
           <option v-for="(month, i) in months" :key="month" :value="i + 1">
             {{ month }}
@@ -64,11 +64,11 @@
             },
             [hasErrorInternal ? 'border-red-500' : 'border-slate-300'],
           ]"
-          :placeholder="$t('sui.day')"
+          :placeholder="t('sui.day')"
           @change="update()"
         >
           <option disabled selected hidden :value="null">
-            {{ $t('sui.day') }}
+            {{ t('sui.day') }}
           </option>
           <option v-for="day in days" :key="day" :value="day">
             {{ day }}
@@ -83,7 +83,7 @@
       class="mt-1 appearance-none border-transparent bg-transparent text-sm text-slate-700 underline outline-none disabled:cursor-not-allowed disabled:opacity-50"
       @click="clear()"
     >
-      <span>{{ $t('sui.clear') }}</span>
+      <span>{{ t('sui.clear') }}</span>
     </button>
   </div>
 </template>
@@ -93,6 +93,8 @@ import { PropType } from 'vue';
 import { range, padStart } from 'lodash';
 import { DateTime, Info } from 'luxon';
 import { useField } from '@/composables/field';
+import { t } from '@/i18n';
+import { useI18nStore } from '@/stores/i18n';
 
 const props = defineProps({
   modelValue: {
@@ -134,10 +136,8 @@ const { hasErrorInternal, emitUpdate } = useField({
   emit: emit,
 });
 
-const i18n = useI18n();
-
 const years = range(props.maxYear, props.minYear) as number[];
-const months = Info.months('short', { locale: i18n.locale.value });
+const months = Info.months('short', { locale: useI18nStore().locale });
 const days = computed(() => {
   if (!date.value.year) {
     return [];

package/src/components/BaseDialog.vue

@@ -62,14 +62,14 @@
         }"
         @click="$emit('confirm')"
       >
-        {{ confirmText ?? $t('sui.confirm') }}
+        {{ confirmText ?? t('sui.confirm') }}
       </button>
       <button
         type="button"
         class="btn w-full sm:mr-2 sm:w-auto"
         @click="$emit('cancel')"
       >
-        {{ cancelText ?? $t('sui.cancel') }}
+        {{ cancelText ?? t('sui.cancel') }}
       </button>
     </div>
   </div>
@@ -78,6 +78,7 @@
 <script lang="ts" setup>
 import { PropType } from 'vue';
 import { Icon as BaseIcon } from '@iconify/vue';
+import { t } from '@/i18n';
 
 defineProps({
   color: {
@@ -94,15 +95,13 @@ defineProps({
   },
   confirmText: {
     default() {
-      const i18n = useI18n();
-      return i18n.t('sui.confirm');
+      return t('sui.confirm');
     },
     type: String,
   },
   cancelText: {
     default() {
-      const i18n = useI18n();
-      return i18n.t('sui.cancel');
+      return t('sui.cancel');
     },
     type: String,
   },

package/src/components/BaseDisplayRelativeTime.vue

@@ -15,6 +15,8 @@
 </template>
 
 <script lang="ts" setup>
+import { t } from '@/i18n';
+import { useI18nStore } from '@/stores/i18n';
 import humanizeDuration from 'humanize-duration';
 import { DateTime } from 'luxon';
 import { PropType } from 'vue';
@@ -89,12 +91,10 @@ const intervalId = setInterval(() => {
   now.value = DateTime.now().toSeconds();
 }, intervalValue);
 
-const i18n = useI18n();
-
 const readableDate = computed(() => {
   const duration = getDuration();
   const durationHuman = humanizeDuration(duration, {
-    language: i18n.locale.value,
+    language: useI18nStore().locale,
     round: true,
     largest: 1,
   });
@@ -102,15 +102,15 @@ const readableDate = computed(() => {
   const minutes = getMinutes(duration);
 
   if (minutes < 1) {
-    return i18n.t('sui.just_now');
+    return t('sui.just_now');
   }
 
-  return i18n.t('sui.x_ago', { duration: durationHuman });
+  return t('sui.x_ago', { duration: durationHuman });
 });
 
 const tooltip = computed(() => {
   return DateTime.fromISO(props.value)
-    .setLocale(i18n.locale.value)
+    .setLocale(useI18nStore().locale)
     .toLocaleString(DateTime.DATETIME_FULL);
 });
 

package/src/components/BaseFilePicker.vue

@@ -24,6 +24,7 @@
 </template>
 
 <script lang="ts" setup>
+import { t } from '@/i18n';
 import { useNotificationsStore } from '@/stores/notifications';
 import { fileSizeFormat, toHumanList } from '@/utils';
 import { maxSize, validExtension } from '@/utils/fileValidations';
@@ -49,8 +50,6 @@ const emit = defineEmits(['select']);
 
 const notifications = useNotificationsStore();
 
-const i18n = useI18n();
-
 const selecting = ref(false);
 const dragging = ref(false);
 const input = ref<HTMLInputElement | undefined>();
@@ -95,8 +94,8 @@ async function select(files: File[]) {
     if (!maxSize(file, props.maxSize)) {
       notifications.push({
         color: 'danger',
-        title: i18n.t('sui.error'),
-        text: i18n.t('sui.the_file_size_must_not_exceed_x', {
+        title: t('sui.error'),
+        text: t('sui.the_file_size_must_not_exceed_x', {
           x: fileSizeFormat(props.maxSize),
         }),
       });
@@ -108,13 +107,13 @@ async function select(files: File[]) {
     if (!validExtension(file, props.acceptedExtensions)) {
       notifications.push({
         color: 'danger',
-        title: i18n.t('sui.error'),
+        title: t('sui.error'),
         text:
-          i18n.t('sui.the_file_type_is_invalid') +
+          t('sui.the_file_type_is_invalid') +
           ' ' +
-          i18n.t('sui.file_must_be_of_type') +
+          t('sui.file_must_be_of_type') +
           ' ' +
-          toHumanList(props.acceptedExtensions as string[], i18n.t('sui.or')) +
+          toHumanList(props.acceptedExtensions as string[], t('sui.or')) +
           '.',
       });
 

package/src/components/BaseFileUploader.vue

@@ -37,9 +37,9 @@ import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
 import { BaseCropperConfig } from '@/types';
 import BaseFilePicker from './BaseFilePicker.vue';
 import BaseFilePickerCrop from './BaseFilePickerCrop.vue';
+import { t } from '@/i18n';
 
 const http = config.http;
-const i18n = useI18n();
 const notifications = useNotificationsStore();
 
 const props = withDefaults(
@@ -148,8 +148,8 @@ async function onFileSelect(file: File) {
     emit('upload:fail');
     notifications.push({
       color: 'danger',
-      title: i18n.t('sui.error'),
-      text: i18n.t('sui.upload_failed'),
+      title: t('sui.error'),
+      text: t('sui.upload_failed'),
     });
   } finally {
     emit('upload:end');

package/src/components/BaseForm.vue

@@ -45,6 +45,7 @@ import { Method, DataFormat } from '@/types';
 import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
 import { config, useNotificationsStore } from '@/index';
 import { get, isArray } from 'lodash';
+import { t } from '@/i18n';
 
 const notifications = useNotificationsStore();
 
@@ -107,7 +108,6 @@ const props = defineProps({
   },
 });
 
-const i18n = useI18n();
 const emit = defineEmits(['error', 'success']);
 
 const form = ref<null | HTMLFormElement>(null);
@@ -226,7 +226,7 @@ function query() {
       if (props.showNotificationOnError && errorMessage) {
         notifications.push({
           color: 'danger',
-          title: i18n.t('sui.error'),
+          title: t('sui.error'),
           text: errorMessage,
         });
       }
@@ -248,7 +248,7 @@ function successHandler(response: AxiosResponse<any, any>) {
     if (props.showNotificationOnSuccess) {
       notifications.push({
         color: 'success',
-        title: i18n.t('sui.success'),
+        title: t('sui.success'),
         text: message,
       });
     }

package/src/components/BaseIconPicker.vue

@@ -19,7 +19,7 @@
       <input
         v-model="keywords"
         type="text"
-        :placeholder="$t('sui.search') + '...'"
+        :placeholder="t('sui.search') + '...'"
         class="min-w-[40px] grow rounded-r border-slate-300 py-0 px-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-300 sm:text-sm"
       />
     </div>
@@ -48,6 +48,7 @@
 
 <script lang="ts" setup>
 import { Icon as BaseIcon } from '@iconify/vue';
+import { t } from '@/i18n';
 
 const props = withDefaults(
   defineProps<{

package/src/components/BaseLayoutNotificationDropdown.vue

@@ -41,7 +41,7 @@
             class="mx-auto mb-2 h-8 w-8 text-slate-400"
           ></BaseIcon>
           <p class="text-center text-sm text-slate-700">
-            {{ $t('sui.notifications_empty') }}
+            {{ t('sui.notifications_empty') }}
           </p>
         </div>
       </div>
@@ -59,7 +59,7 @@
               {{
                 notificationsConfig.footerLabel
                   ? notificationsConfig.footerLabel
-                  : $t('sui.see_all_notifications')
+                  : t('sui.see_all_notifications')
               }}
             </div>
           </RouterLink>
@@ -79,6 +79,7 @@ import { useBreakpoints } from '@/composables/breakpoints';
 import { NotificationsConfig } from '../types';
 import { MenuItem } from '@headlessui/vue';
 import { Notification } from '@/types/Notification';
+import { t } from '@/i18n';
 
 const emit = defineEmits(['click', 'open']);
 

package/src/components/BaseMediaLibrary.vue

@@ -38,7 +38,7 @@
               />
               <div class="text-center">
                 <p class="mb-0 text-sm font-medium leading-tight">
-                  {{ $t('sui.drop_or_click_to_upload') }}
+                  {{ t('sui.drop_or_click_to_upload') }}
                 </p>
 
                 <div class="mt-1 text-xs leading-tight text-slate-500">
@@ -110,8 +110,7 @@ import { BaseIcon } from '.';
 import BaseMediaList from './BaseMediaList.vue';
 import BaseMediaPictures from './BaseMediaPictures.vue';
 import BaseMediaGallery from './BaseMediaGallery.vue';
-
-const i18n = useI18n();
+import { t } from '@/i18n';
 
 const dialogs = useDialogsStore();
 const notifications = useNotificationsStore();
@@ -228,15 +227,13 @@ const normalizedMax = computed(() => {
 });
 
 const maxFileText = computed(() => {
-  return i18n.t('sui.you_can_upload_up_to_n_files', {
+  return t('sui.you_can_upload_up_to_n_files', {
     count: normalizedMax.value,
   });
 });
 
 const maxFileSize = computed(() => {
-  return capitalize(
-    i18n.t('sui.up_to_x', { x: fileSizeFormat(props.maxSize) })
-  );
+  return capitalize(t('sui.up_to_x', { x: fileSizeFormat(props.maxSize) }));
 });
 
 // Upload
@@ -252,8 +249,8 @@ function onUploadSuccess(file: UploadedFile) {
     normalizedMax.value > 1
   ) {
     notifications.push({
-      title: i18n.t('sui.whoops'),
-      text: i18n.t('sui.you_can_upload_up_to_n_files', {
+      title: t('sui.whoops'),
+      text: t('sui.you_can_upload_up_to_n_files', {
         count: normalizedMax.value,
       }),
       color: 'danger',
@@ -279,8 +276,8 @@ function onUploadSuccess(file: UploadedFile) {
 
 function promptRemove(index: number, length = 1) {
   dialogs.push({
-    title: i18n.t('sui.remove_file'),
-    message: i18n.t('sui.remove_file_description'),
+    title: t('sui.remove_file'),
+    message: t('sui.remove_file_description'),
     color: 'warning',
     onConfirm() {
       removeByIndex(index, length);

package/src/components/BaseMediaListItem.vue

@@ -54,7 +54,7 @@
             class="h-10 shrink-0 pr-2 pl-3 text-sm text-blue-600"
             @click="saveName"
           >
-            {{ $t('sui.save') }}
+            {{ t('sui.save') }}
           </button>
         </div>
       </div>
@@ -68,7 +68,7 @@
           @click="$emit('remove')"
         >
           <span class="hidden sm:inline">
-            {{ $t('sui.delete') }}
+            {{ t('sui.delete') }}
           </span>
           <BaseIcon
             icon="heroicons-solid:x"
@@ -82,7 +82,7 @@
           target="_blank"
         >
           <span class="hidden sm:inline">
-            {{ $t('sui.download') }}
+            {{ t('sui.download') }}
           </span>
           <BaseIcon
             icon="heroicons-solid:download"
@@ -100,6 +100,7 @@ import { UploadedFile } from '@/types/UploadedFile';
 import { PropType } from 'vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import { cloneDeep } from 'lodash';
+import { t } from '@/i18n';
 
 const emit = defineEmits(['remove', 'update', 'save:name']);
 

package/src/components/BaseNumber.vue

@@ -14,8 +14,11 @@
         >
           <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.maximum_x_decimal_places', { count: precision }) }}
+            {{ t('sui.invalid_value') }}
           </span>
         </div>
       </div>
@@ -74,6 +77,7 @@ 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;
@@ -183,22 +187,38 @@ 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 realValueInternal.value != valueInternal.value;
+  return realValueInternalAsString.value != (valueInternal.value ?? '');
 });
 
 const tooBig = computed(() => {
-  if (valueInternal.value === null) return false;
-  return hasMax.value && valueInternal.value > (props.max as number);
+  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;
-  return hasMin.value && valueInternal.value < (props.min as number);
+  const parts = (valueInternal.value + '').split('.');
+
+  if (parts.length === 1) return false;
+
+  return parts[1].length > precision.value;
 });
 
 valueInternal.value = convertToNumber(props.modelValue);

package/src/components/BasePagination.vue

@@ -41,7 +41,7 @@
         class="mx-3 flex shrink-0 items-center justify-end"
       >
         <span class="mr-2 text-sm font-normal text-slate-500">
-          {{ $t('sui.page') }}
+          {{ t('sui.page') }}
         </span>
         <input
           v-model="manualPageMobile"
@@ -55,7 +55,7 @@
           @blur="setPageFromManualPageMobile"
         />
         <span class="ml-2 text-sm font-normal text-slate-500">
-          {{ $t('sui.of') }} {{ lastPage }}
+          {{ t('sui.of') }} {{ lastPage }}
         </span>
       </div>
       <div class="-mt-px flex flex-1 justify-end">
@@ -76,7 +76,7 @@
       class="mt-3 ml-4 flex shrink-0 items-center justify-end"
     >
       <span class="mr-3 text-sm font-medium text-slate-500">
-        {{ $t('sui.go_to_page') }}
+        {{ t('sui.go_to_page') }}
       </span>
       <input
         v-model="manualPage"
@@ -96,6 +96,7 @@
 <script lang="ts" setup>
 import { useResizeObserver } from '@vueuse/core';
 import { debounce, isNumber, range } from 'lodash';
+import { t } from '@/i18n';
 
 const props = defineProps({
   modelValue: {

package/src/components/BaseReadMore.vue

@@ -13,7 +13,7 @@
       class="mt-1 inline appearance-none border-b border-dashed border-slate-400 bg-transparent px-0.5 py-0 text-slate-900 hover:text-slate-600"
       @click="showMore = true"
     >
-      <span class="text-base font-medium">{{ $t('sui.read_more') }}</span>
+      <span class="text-base font-medium">{{ t('sui.read_more') }}</span>
     </button>
   </div>
 </template>
@@ -21,6 +21,7 @@
 <script lang="ts" setup>
 import { useMutationObserver } from '@vueuse/core';
 import { StyleValue } from 'vue';
+import { t } from '@/i18n';
 
 const content = ref<null | HTMLParagraphElement>(null);
 

package/src/components/BaseSelect.vue

@@ -14,12 +14,12 @@
   >
     <template v-if="requiredInternal">
       <option disabled hidden :value="EMPTY_VALUE_INTERNAL">
-        {{ placeholder ? placeholder : $t('sui.select_an_option') }}
+        {{ placeholder ? placeholder : t('sui.select_an_option') }}
       </option>
     </template>
     <template v-else>
       <option :value="EMPTY_VALUE_INTERNAL">
-        {{ placeholder ? placeholder : $t('sui.select_an_option') }}
+        {{ placeholder ? placeholder : t('sui.select_an_option') }}
       </option>
     </template>
 
@@ -43,6 +43,7 @@ import { get, isArray, isEqual } from 'lodash';
 import { useMutationObserver } from '@vueuse/core';
 import { useField } from '@/composables/field';
 import { NormalizedOption, OptionValue, Option } from '@/types';
+import { t } from '@/i18n';
 
 type SelectOption = string | number | null;
 

package/src/components/BaseTagAutocomplete.vue

@@ -38,7 +38,7 @@
             ref="inputElement"
             :value="keywords"
             type="text"
-            :placeholder="placeholder ? placeholder : $t('sui.select_an_item')"
+            :placeholder="placeholder ? placeholder : t('sui.select_an_item')"
             class="w-full min-w-[50px] border-none p-0 pl-1 shadow-none outline-none focus:border-none focus:shadow-none focus:outline-none focus:ring-0 disabled:cursor-not-allowed"
             :class="[inputClass]"
             autocomplete="off"
@@ -96,8 +96,8 @@ import { useField } from '@/composables/field';
 import { useClickOutside } from '@/composables/clickOutside';
 import { useNotificationsStore } from '@/stores/notifications';
 import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
+import { t } from '@/i18n';
 
-const i18n = useI18n();
 const notifications = useNotificationsStore();
 
 const props = defineProps({
@@ -283,8 +283,8 @@ const onSelect = (option: NormalizedOption) => {
 
   if (props.max && normalizedModelValue.value.length >= props.max) {
     notifications.push({
-      title: i18n.t('sui.whoops'),
-      text: i18n.t('sui.you_cannot_select_more_than_x_items', {
+      title: t('sui.whoops'),
+      text: t('sui.you_cannot_select_more_than_x_items', {
         count: props.max,
       }),
       color: 'warning',

package/src/components/BaseTagAutocompleteFetch.vue

@@ -31,7 +31,7 @@
           v-if="firstSearch"
           class="flex h-[80px] items-center justify-center px-3 text-center text-base leading-tight text-slate-600"
         >
-          {{ $t('sui.nothing_found') }}
+          {{ t('sui.nothing_found') }}
         </div>
       </slot>
     </template>
@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts" setup>
-import { debounce, isArray, throttle } from 'lodash';
+import { debounce, throttle } from 'lodash';
 import { config } from '@/index';
 import { PropType } from 'vue';
 import {
@@ -50,6 +50,7 @@ import {
 } from '@/types';
 import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
 import { useHasPaginatedData } from '@/composables/paginatedData';
+import { t } from '@/i18n';
 
 const props = defineProps({
   modelValue: {

package/src/composables/mediaQuery.ts

@@ -1,8 +1,8 @@
 import { ref, watchEffect } from 'vue';
-import type { MaybeComputedRef } from '@vueuse/shared';
+import type { MaybeRefOrGetter } from '@vueuse/shared';
 import { resolveRef, tryOnScopeDispose } from '@vueuse/shared';
 
-export function useMediaQuery(query: MaybeComputedRef<string>) {
+export function useMediaQuery(query: MaybeRefOrGetter<string>) {
   const isSupported = () =>
     window && 'matchMedia' in window && typeof window.matchMedia === 'function';