sprintify-ui 0.1.14 → 0.1.16

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/BaseMenuItem.vue

@@ -13,6 +13,7 @@
 <script lang="ts" setup>
 import { PropType } from 'vue';
 import BaseCounter from './BaseCounter.vue';
+import { ActionColors } from '@/types';
 
 const props = defineProps({
   label: {
@@ -33,9 +34,7 @@ const props = defineProps({
   },
   color: {
     default: 'dark',
-    type: String as PropType<
-      'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary'
-    >,
+    type: String as PropType<ActionColors>,
   },
   size: {
     default: 'md',
@@ -56,6 +55,8 @@ const textColor = computed((): string => {
     return 'text-yellow-600';
   } else if (props.color == 'primary') {
     return 'text-primary-600';
+  } else if (props.color == 'secondary') {
+    return 'text-slate-600';
   }
 
   return '';

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/BaseSwitch.stories.js

@@ -118,11 +118,14 @@ const Icons = (args) => ({
     return { args, value };
   },
   template: `
-    <BaseSwitch v-model="value" :hasIcon="true" v-bind="args">
+    <BaseSwitch v-model="value" v-bind="args">
       <span class="text-slate-600">Label</span>
     </BaseSwitch>
   `,
 });
 
 export const WithIcons = Icons.bind({});
-WithIcons.args = {};
+WithIcons.args = {
+  checkedIcon: 'heroicons-solid:check',
+  unCheckedIcon: 'heroicons-solid:x',
+};

package/src/components/BaseSwitch.vue

@@ -20,12 +20,11 @@
             height: sizePx + 'px',
             width: sizePx + 'px',
             transform: `translateX(${translateX}px)`,
-            color: iconColor,
             fontSize: sizePx - 7 + 'px',
           }"
-          class="flex items-center justify-center inline-block transition duration-200 ease-in-out bg-white rounded-full shadow pointer-events-none ring-0"
+          class="flex items-center justify-center transition duration-200 ease-in-out bg-white rounded-full shadow pointer-events-none text-slate-500 ring-0"
         >
-          <BaseIcon v-if="hasIcon" :icon="icon" />
+          <BaseIcon v-if="icon" :icon="icon" />
         </span>
       </Switch>
       <SwitchLabel v-if="$slots.default" class="cursor-pointer">
@@ -70,24 +69,12 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  hasIcon: {
-    default: false,
-    type: Boolean,
-  },
   checkedIcon: {
-    default: 'heroicons-solid:check',
+    default: '',
     type: String,
   },
   unCheckedIcon: {
-    default: 'heroicons-solid:x',
-    type: String,
-  },
-  checkedIconColor: {
-    default: '#9ca3af',
-    type: String,
-  },
-  unCheckedIconColor: {
-    default: '#9ca3af',
+    default: '',
     type: String,
   },
 });
@@ -206,26 +193,12 @@ const translateX = computed(() => {
   return padding.value;
 });
 
-const iconColor = computed(() => {
-  if (props.hasIcon) {
-    if (props.modelValue) {
-      return props.checkedIconColor;
-    }
-    if (!props.modelValue) {
-      return props.unCheckedIconColor;
-    }
-  }
-  return '';
-});
-
 const icon = computed(() => {
-  if (props.hasIcon) {
-    if (props.modelValue) {
-      return props.checkedIcon;
-    }
-    if (!props.modelValue) {
-      return props.unCheckedIcon;
-    }
+  if (props.modelValue && props.checkedIcon) {
+    return props.checkedIcon;
+  }
+  if (!props.modelValue && props.unCheckedIcon) {
+    return props.unCheckedIcon;
   }
   return 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';
 

package/src/i18n/index.ts

@@ -0,0 +1,60 @@
+import { useI18nStore } from '@/stores/i18n';
+import en from '@/lang/en.json';
+import fr from '@/lang/fr.json';
+import { get } from 'lodash';
+
+export function t(key: string, args?: Record<string, any> | undefined): string {
+  const value = getTranslationValue(key);
+
+  return replaceArgs(value, args);
+}
+
+function getCurrentLocale() {
+  try {
+    const i18nStore = useI18nStore();
+    return i18nStore.locale;
+  } catch (error) {
+    console.error(error);
+    return 'en';
+  }
+}
+
+function getTranslationValue(key: string) {
+  const locale = getCurrentLocale();
+
+  if (locale === 'fr') {
+    const frValue = get(fr, key);
+    if (frValue) return frValue;
+  }
+
+  return get(en, key, key);
+}
+
+function replaceArgs(
+  value: string,
+  args: Record<string, any> | undefined
+): string {
+  let result = value;
+
+  if (!args) return result;
+
+  if (args.count !== undefined && value.includes('|')) {
+    const parts = value.split('|');
+
+    if (parts.length == 2) {
+      const [singular, plural] = value.split('|');
+      result = args.count > 1 ? plural : singular;
+    } else if (parts.length == 3) {
+      const [zero, singular, plural] = value.split('|');
+      result = args.count == 0 ? zero : args.count > 1 ? plural : singular;
+    }
+
+    result.trim();
+  }
+
+  Object.keys(args).forEach((key: any) => {
+    result = result.replace(`{${key}}`, args[key]);
+  });
+
+  return result;
+}

package/src/index.ts

@@ -2,7 +2,6 @@ import axios, { AxiosInstance } from 'axios';
 import { App } from 'vue';
 import * as components from './components';
 import QueryString from 'qs';
-import { createI18n, I18n } from 'vue-i18n';
 import en from '@/lang/en.json';
 import fr from '@/lang/fr.json';
 import { useDialogsStore } from './stores/dialogs';
@@ -17,10 +16,10 @@ import './assets/main.css';
 import { Locales } from './types';
 import { Country } from './types/Country';
 import { Region } from './types/Region';
+import { useI18nStore } from './stores/i18n';
 
 export interface Options {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  i18n?: I18n<typeof messages, {}, {}, string, true>;
   http?: AxiosInstance;
   upload_url?: string;
   locales?: Locales;
@@ -31,11 +30,6 @@ export interface Options {
 }
 
 const config = {
-  i18n: createI18n({
-    locale: 'en',
-    fallbackLocale: 'en',
-    messages: { en, fr },
-  }),
   http: axios.create(),
   locales: {
     en: 'English',
@@ -61,10 +55,6 @@ function install(app: App, options?: Options) {
     app.component(key, components[key]);
   }
 
-  if (options?.i18n) {
-    config.i18n = options.i18n;
-  }
-
   if (options?.http) {
     config.http = options.http;
   }
@@ -92,6 +82,16 @@ function install(app: App, options?: Options) {
   if (options?.regions) {
     config.regions = options.regions;
   }
+
+  if (app.config.globalProperties.$i18n) {
+    watch(
+      () => app.config.globalProperties.$i18n.locale,
+      (locale) => {
+        useI18nStore().set(locale);
+      },
+      { immediate: true }
+    );
+  }
 }
 
 export default { install };

package/src/stores/dialogs.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
-import { config } from '@/index';
 import { Dialog, DialogOptions } from '../types';
+import { t } from '@/i18n';
 
 export const useDialogsStore = defineStore('dialogs', {
   state: () => {
@@ -17,8 +17,8 @@ export const useDialogsStore = defineStore('dialogs', {
         color: options.color ?? 'info',
         title: options.title,
         message: options.message,
-        confirmText: options.confirmText ?? config.i18n.global.t('sui.confirm'),
-        cancelText: options.cancelText ?? config.i18n.global.t('sui.cancel'),
+        confirmText: options.confirmText ?? t('sui.confirm'),
+        cancelText: options.cancelText ?? t('sui.cancel'),
         closeOnOutsideClick: options.closeOnOutsideClick ?? true,
         onConfirm:
           options.onConfirm ??

package/src/stores/i18n.ts

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia';
+
+export const useI18nStore = defineStore('i18n', {
+  state: () => {
+    return {
+      locale: 'en',
+    };
+  },
+  actions: {
+    set(locale: string) {
+      this.locale = locale;
+    },
+  },
+});

package/src/types/index.ts

@@ -65,6 +65,15 @@ export interface PaginatedCollection extends PaginationMetadata {
   data: Collection;
 }
 
+export type ActionColors =
+  | 'dark'
+  | 'light'
+  | 'danger'
+  | 'success'
+  | 'warning'
+  | 'primary'
+  | 'secondary';
+
 export interface MenuItemInterface {
   label?: string;
   href?: string;
@@ -72,7 +81,7 @@ export interface MenuItemInterface {
   action?: () => Promise<void> | void;
   icon?: string;
   count?: number;
-  color?: 'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary';
+  color?: ActionColors;
   line?: boolean;
 }
 
@@ -83,7 +92,7 @@ export interface ActionItem {
   action?: () => Promise<void> | void;
   icon?: string;
   count?: number;
-  color?: 'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary';
+  color?: ActionColors;
   disabled?: boolean;
   meta?: Record<string, any>;
   actions?: ActionItem[];

package/src/utils/fileSizeFormat.ts

@@ -1,14 +1,14 @@
-import { config } from '@/index';
+import { t } from '@/i18n';
 
 export default function (size: number): string {
   const i = Math.floor(Math.log(size) / Math.log(1024));
 
   const units = [
-    config.i18n.global.t('sui.units.b'),
-    config.i18n.global.t('sui.units.kb'),
-    config.i18n.global.t('sui.units.mb'),
-    config.i18n.global.t('sui.units.gb'),
-    config.i18n.global.t('sui.units.tb'),
+    t('sui.units.b'),
+    t('sui.units.kb'),
+    t('sui.units.mb'),
+    t('sui.units.gb'),
+    t('sui.units.tb'),
   ];
 
   return +(size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + units[i];