sprintify-ui 0.1.15 → 0.1.16

package/dist/types/src/index.d.ts

@@ -1,6 +1,5 @@
 import { AxiosInstance } from 'axios';
 import { App } from 'vue';
-import { I18n } from 'vue-i18n';
 import { useDialogsStore } from './stores/dialogs';
 import { useNotificationsStore } from './stores/notifications';
 import { useSystemAlertStore } from './stores/systemAlerts';
@@ -187,7 +186,6 @@ import { Locales } from './types';
 import { Country } from './types/Country';
 import { Region } from './types/Region';
 export interface Options {
-    i18n?: I18n<typeof messages, {}, {}, string, true>;
     http?: AxiosInstance;
     upload_url?: string;
     locales?: Locales;
@@ -197,182 +195,6 @@ export interface Options {
     regions?: Region[];
 }
 declare const config: {
-    i18n: I18n<{
-        en: {
-            cancel: string;
-            cropper: string;
-            drag_to_reposition: string;
-            save: string;
-            sui: {
-                address: string;
-                address_1_placeholder: string;
-                address_2_description: string;
-                and: string;
-                apply: string;
-                apply_filters: string;
-                autocomplete_placeholder: string;
-                cancel: string;
-                city: string;
-                clear: string;
-                click_or_select_date: string;
-                click_to_copy: string;
-                columns: string;
-                confirm: string;
-                copied: string;
-                country: string;
-                create_new: string;
-                day: string;
-                delete: string;
-                delete_record: string;
-                delete_record_description: string;
-                deselect_all: string;
-                download: string;
-                drag_to_reposition: string;
-                drop_or_click_to_upload: string;
-                edit: string;
-                error: string;
-                file_must_be_of_type: string;
-                filters: string;
-                go_to_page: string;
-                invalid_value: string;
-                just_now: string;
-                maximum_x_decimal_places: string;
-                min_x_characters: string;
-                month: string;
-                more: string;
-                next: string;
-                next_month: string;
-                none: string;
-                nothing_found: string;
-                notifications_empty: string;
-                of: string;
-                or: string;
-                page: string;
-                pagination_detail_1: string;
-                pagination_detail_2: string;
-                postal_code_zip_code: string;
-                previous: string;
-                previous_month: string;
-                read_more: string;
-                region: string;
-                remove: string;
-                remove_file: string;
-                remove_file_description: string;
-                save: string;
-                search: string;
-                see_all_notifications: string;
-                select_an_item: string;
-                select_an_option: string;
-                success: string;
-                the_file_size_must_not_exceed_x: string;
-                the_file_type_is_invalid: string;
-                type_to_start_your_search: string;
-                units: {
-                    b: string;
-                    gb: string;
-                    kb: string;
-                    mb: string;
-                    tb: string;
-                };
-                up_to_x: string;
-                upload_failed: string;
-                whoops: string;
-                x_ago: string;
-                x_rows_selected: string;
-                year: string;
-                yes_delete: string;
-                you_can_upload_up_to_n_files: string;
-                you_cannot_select_more_than_x_items: string;
-            };
-        };
-        fr: {
-            cancel: string;
-            cropper: string;
-            drag_to_reposition: string;
-            save: string;
-            sui: {
-                address: string;
-                address_1_placeholder: string;
-                address_2_description: string;
-                and: string;
-                apply: string;
-                apply_filters: string;
-                autocomplete_placeholder: string;
-                cancel: string;
-                city: string;
-                clear: string;
-                click_or_select_date: string;
-                click_to_copy: string;
-                columns: string;
-                confirm: string;
-                copied: string;
-                country: string;
-                create_new: string;
-                day: string;
-                delete: string;
-                delete_record: string;
-                delete_record_description: string;
-                deselect_all: string;
-                download: string;
-                drag_to_reposition: string;
-                drop_or_click_to_upload: string;
-                edit: string;
-                error: string;
-                file_must_be_of_type: string;
-                filters: string;
-                go_to_page: string;
-                invalid_value: string;
-                just_now: string;
-                maximum_x_decimal_places: string;
-                min_x_characters: string;
-                month: string;
-                more: string;
-                next: string;
-                next_month: string;
-                none: string;
-                nothing_found: string;
-                notifications_empty: string;
-                of: string;
-                or: string;
-                page: string;
-                pagination_detail_1: string;
-                pagination_detail_2: string;
-                postal_code_zip_code: string;
-                previous: string;
-                previous_month: string;
-                read_more: string;
-                region: string;
-                remove: string;
-                remove_file: string;
-                remove_file_description: string;
-                save: string;
-                search: string;
-                see_all_notifications: string;
-                select_an_item: string;
-                select_an_option: string;
-                success: string;
-                the_file_size_must_not_exceed_x: string;
-                the_file_type_is_invalid: string;
-                type_to_start_your_search: string;
-                units: {
-                    b: string;
-                    gb: string;
-                    kb: string;
-                    mb: string;
-                    tb: string;
-                };
-                up_to_x: string;
-                upload_failed: string;
-                whoops: string;
-                x_ago: string;
-                x_rows_selected: string;
-                year: string;
-                yes_delete: string;
-                you_can_upload_up_to_n_files: string;
-                you_cannot_select_more_than_x_items: string;
-            };
-        };
-    }, {}, {}, string, true>;
     http: AxiosInstance;
     locales: Locales;
     upload_url: string;

package/dist/types/src/stores/i18n.d.ts

@@ -0,0 +1,5 @@
+export declare const useI18nStore: import("pinia").StoreDefinition<"i18n", {
+    locale: string;
+}, {}, {
+    set(locale: string): void;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -10,7 +10,7 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "prepack": "npm run build",
-    "prepare": "husky install",
+    "prepare": "husky install && relative-deps",
     "release": "standard-version",
     "commit": "cz"
   },
@@ -20,7 +20,7 @@
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
     "@vueup/vue-quill": "^1.0.0",
-    "@vueuse/core": "^9.0.0",
+    "@vueuse/core": "^10.0.0",
     "axios": "^0.26.1",
     "croppie": "^2.6.5",
     "flatpickr": "^4.6.13",
@@ -35,7 +35,6 @@
     "sortablejs": "^1.15.0",
     "tailwindcss": "^3.0.0",
     "vue": "^3.0.0",
-    "vue-i18n": "^9.0.0",
     "vue-router": "^4.0.0"
   },
   "dependencies": {
@@ -71,7 +70,7 @@
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-typescript": "^11.0.2",
     "@vueup/vue-quill": "^1.1.0",
-    "@vueuse/core": "^9.13.0",
+    "@vueuse/core": "^10.0.2",
     "autoprefixer": "^10.4.13",
     "axios": "^0.26.1",
     "babel-loader": "^8.3.0",
@@ -98,6 +97,7 @@
     "prettier": "^2.8.4",
     "prettier-plugin-tailwindcss": "^0.2.2",
     "qs": "^6.11.0",
+    "relative-deps": "^1.0.7",
     "rimraf": "^3.0.2",
     "rollup-plugin-analyzer": "^4.0.0",
     "scroll-lock": "^2.1.5",
@@ -134,5 +134,6 @@
     "commitizen": {
       "path": "cz-conventional-changelog"
     }
-  }
+  },
+  "relativeDependencies": {}
 }

package/src/components/BaseAddressForm.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseField
-    :label="$t('sui.address')"
+    :label="t('sui.address')"
     :name="`${namePrefix}address_1`"
     class="mb-2"
     required
@@ -8,7 +8,7 @@
     <BaseInput
       ref="address1Ref"
       :model-value="normalizedModelValue.address_1 ?? ''"
-      :placeholder="$t('sui.address_1_placeholder')"
+      :placeholder="t('sui.address_1_placeholder')"
       class="w-full"
       prevent-submit
       name="address_search_field"
@@ -21,7 +21,7 @@
   <BaseField :name="`${namePrefix}address_2`" class="mb-4">
     <BaseInput
       :model-value="normalizedModelValue.address_2 ?? ''"
-      :placeholder="$t('sui.address_2_description')"
+      :placeholder="t('sui.address_2_description')"
       class="w-full"
       @update:model-value="update('address_2', $event)"
     />
@@ -29,7 +29,7 @@
 
   <div class="sm:flex sm:space-x-3">
     <BaseField
-      :label="$t('sui.city')"
+      :label="t('sui.city')"
       required
       :name="`${namePrefix}city`"
       class="mb-4 flex-1"
@@ -41,7 +41,7 @@
       />
     </BaseField>
     <BaseField
-      :label="$t('sui.postal_code_zip_code')"
+      :label="t('sui.postal_code_zip_code')"
       required
       :name="`${namePrefix}postal_code`"
       class="mb-4 flex-1"
@@ -56,7 +56,7 @@
   <div class="sm:flex sm:space-x-3">
     <BaseField
       v-if="!props.hideCountry"
-      :label="$t('sui.country')"
+      :label="t('sui.country')"
       :name="`${namePrefix}country`"
       required
       class="mb-4 flex-1"
@@ -74,7 +74,7 @@
     </BaseField>
     <BaseField
       v-if="!props.hideRegion"
-      :label="$t('sui.region')"
+      :label="t('sui.region')"
       :name="`${namePrefix}region`"
       required
       class="mb-4 flex-1"
@@ -101,6 +101,7 @@ import { Region } from '@/types/Region';
 import BaseField from './BaseField.vue';
 import BaseInput from './BaseInput.vue';
 import BaseSelect from './BaseSelect.vue';
+import { t } from '@/i18n';
 import { config } from '..';
 
 const DEFAULT_COUNTRY = 'ca';

package/src/components/BaseAutocomplete.vue

@@ -27,7 +27,7 @@
             :value="keywords"
             type="text"
             :placeholder="
-              placeholder ? placeholder : $t('sui.autocomplete_placeholder')
+              placeholder ? placeholder : t('sui.autocomplete_placeholder')
             "
             class="relative w-full pr-9 disabled:cursor-not-allowed disabled:text-slate-300"
             :class="[
@@ -127,6 +127,7 @@ import { Icon as BaseIcon } from '@iconify/vue';
 import { useClickOutside } from '@/composables/clickOutside';
 import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
 import { SelectConfiguration } from '@/types';
+import { t } from '@/i18n';
 
 const props = defineProps({
   modelValue: {
@@ -204,8 +205,7 @@ const props = defineProps({
   },
   emptyOptionLabel: {
     default() {
-      const i18n = useI18n();
-      return i18n.t('sui.none');
+      return t('sui.none');
     },
     type: String,
   },

package/src/components/BaseAutocompleteDrawer.vue

@@ -10,7 +10,7 @@
         <div
           class="flex items-center justify-center px-5 py-10 text-center text-slate-600"
         >
-          {{ $t('sui.nothing_found') }}
+          {{ t('sui.nothing_found') }}
         </div>
       </slot>
 
@@ -102,6 +102,7 @@ import { isArray, isObject, throttle } from 'lodash';
 import BaseSkeleton from './BaseSkeleton.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseSpinnerSmall from '../svg/BaseSpinnerSmall.vue';
+import { t } from '@/i18n';
 
 const props = defineProps({
   selected: {

package/src/components/BaseAutocompleteFetch.vue

@@ -41,7 +41,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>
@@ -61,6 +61,7 @@ import {
 } from '@/types';
 import BaseAutocomplete from './BaseAutocomplete.vue';
 import { useHasPaginatedData } from '@/composables/paginatedData';
+import { t } from '@/i18n';
 
 /**
  * Behavior notes

package/src/components/BaseCharacterCounter.vue

@@ -9,13 +9,14 @@
       {{ length }}/{{ max }}
     </div>
     <div v-else-if="min && length < min" class="text-red-600">
-      {{ $t('sui.min_x_characters', { x: min }) }} ({{ length }}/{{ min }})
+      {{ t('sui.min_x_characters', { x: min }) }} ({{ length }}/{{ min }})
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { trim } from 'lodash';
+import { t } from '@/i18n';
 
 const props = defineProps({
   text: {

package/src/components/BaseClipboard.vue

@@ -27,10 +27,10 @@
               class="mr-1 text-green-500"
               icon="heroicons:check-circle-solid"
             />
-            {{ $t('sui.copied') }}
+            {{ t('sui.copied') }}
           </div>
           <div v-else>
-            {{ $t('sui.click_to_copy') }}
+            {{ t('sui.click_to_copy') }}
           </div>
         </div>
       </div>
@@ -39,6 +39,8 @@
 </template>
 
 <script lang="ts" setup>
+import { t } from '@/i18n';
+
 const tooltipShown = ref(false);
 const showCopied = ref(false);
 

package/src/components/BaseCropper.vue

@@ -69,7 +69,7 @@
         >
           <BaseIcon icon="ri:drag-move-2-fill" class="mr-1 h-5 w-5" />
           <span>
-            {{ $t('drag_to_reposition') }}
+            {{ t('drag_to_reposition') }}
           </span>
         </div>
       </div>
@@ -100,6 +100,7 @@ import { cloneDeep, debounce } from 'lodash';
 import { CropperConfig } from '../types';
 import { BaseIcon, BaseLoadingCover } from '.';
 import { presets } from '@/utils/cropper/presets';
+import { t } from '@/i18n';
 
 const props = defineProps<{
   source: string;
@@ -216,8 +217,6 @@ const cropperConfiguration = computed<CroppieOptions>(() => {
 });
 
 function init() {
-  console.log('init');
-
   if (initializing.value) {
     return;
   }
@@ -275,8 +274,6 @@ async function initCropper() {
 }
 
 async function resizeImage(url: string): Promise<string> {
-  console.log('resizeImage');
-
   await getOriginalDimensions();
 
   try {

package/src/components/BaseCropperModal.vue

@@ -21,7 +21,7 @@
                 :disabled="initializing"
                 @click="close()"
               >
-                {{ $t('cancel') }}
+                {{ t('cancel') }}
               </button>
               <BaseButton
                 type="button"
@@ -30,7 +30,7 @@
                 :disabled="initializing"
                 @click="save()"
               >
-                {{ $t('save') }}
+                {{ t('save') }}
               </BaseButton>
             </div>
           </div>
@@ -46,6 +46,7 @@ import BaseCropper from './BaseCropper.vue';
 import { BaseCropperConfig } from '@/types';
 import { debounce } from 'lodash';
 import { BaseButton } from '.';
+import { t } from '@/i18n';
 
 const props = defineProps<{
   modelValue?: boolean;

package/src/components/BaseDataIterator.vue

@@ -28,7 +28,7 @@
                 v-model="searchQuery"
                 type="text"
                 class="h-11 w-full overflow-hidden rounded-md border border-slate-300 bg-white pl-10 pr-9 shadow-sm"
-                :placeholder="$t('sui.autocomplete_placeholder')"
+                :placeholder="t('sui.autocomplete_placeholder')"
                 @input="onSearch"
               />
               <div
@@ -102,11 +102,11 @@
           <p
             class="text-center text-sm text-slate-500 sm:text-right [&>b]:font-medium [&>b]:text-slate-600"
           >
-            {{ $t('sui.pagination_detail_1') }}
+            {{ t('sui.pagination_detail_1') }}
 
             <b>{{ paginationStart }}</b> - <b>{{ paginationEnd }}</b>
 
-            {{ $t('sui.pagination_detail_2') }}
+            {{ t('sui.pagination_detail_2') }}
 
             <b>{{ paginationMetadata.total }}</b>
           </p>
@@ -164,7 +164,7 @@
 
 <script lang="ts">
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
+import { t } from '@/i18n';
 type Direction = 'asc' | 'desc';
 
 const DEFAULT_QUERY = {
@@ -276,7 +276,6 @@ const props = defineProps({
   },
 });
 
-const i18n = useI18n();
 const http = config.http;
 
 const emit = defineEmits([
@@ -730,8 +729,8 @@ const sectionsInternal = computed<DataIteratorSection[]>(() => {
     return [
       {
         name: 'filters',
-        title: i18n.t('sui.filters'),
-        closeText: i18n.t('sui.apply_filters'),
+        title: t('sui.filters'),
+        closeText: t('sui.apply_filters'),
         icon: 'heroicons:adjustments-horizontal-solid',
         opened: true,
       },

package/src/components/BaseDataTable.vue

@@ -32,7 +32,7 @@
             <div>
               <span class="mr-3 text-slate-500"
                 >{{
-                  $t('sui.x_rows_selected', {
+                  t('sui.x_rows_selected', {
                     count: newCheckedRows.length,
                   })
                 }}.</span
@@ -42,7 +42,7 @@
                 class="mr-3 inline text-slate-700 underline"
                 @click="uncheckAll()"
               >
-                {{ $t('sui.deselect_all') }}
+                {{ t('sui.deselect_all') }}
               </button>
             </div>
             <BaseMenu
@@ -135,7 +135,7 @@
                   class="h-10 w-10 text-red-600"
                 />
                 <p class="mt-3 text-center text-sm text-slate-600">
-                  {{ $t('sui.whoops') }}
+                  {{ t('sui.whoops') }}
                 </p>
               </div>
             </div>
@@ -147,7 +147,7 @@
                 <BaseEmptyState class="w-32"></BaseEmptyState>
 
                 <p class="mt-3 text-center text-sm text-slate-600">
-                  {{ $t('sui.nothing_found') }}
+                  {{ t('sui.nothing_found') }}
                 </p>
               </div>
             </div>
@@ -192,6 +192,7 @@
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
+import { t } from '@/i18n';
 import {
   Collection,
   CollectionItem,
@@ -217,7 +218,6 @@ import { RouteLocationRaw } from 'vue-router';
 import BaseMenu from './BaseMenu.vue';
 import BaseDataTableRowAction from './BaseDataTableRowAction.vue';
 
-const i18n = useI18n();
 const router = useRouter();
 
 const http = config.http;
@@ -468,11 +468,11 @@ const canDelete = (row: CollectionItem): boolean => {
 
 function onDeleteClick(row: CollectionItem) {
   dialogs.push({
-    title: i18n.t('sui.delete_record') + '?',
-    message: i18n.t('sui.delete_record_description'),
+    title: t('sui.delete_record') + '?',
+    message: t('sui.delete_record_description'),
     color: 'danger',
     closeOnOutsideClick: true,
-    confirmText: i18n.t('sui.yes_delete'),
+    confirmText: t('sui.yes_delete'),
     onConfirm: () => onDelete(row),
   });
 }
@@ -487,7 +487,7 @@ const onDelete = (row: CollectionItem) => {
     .then((response) => {
       if (response.data && response.data.message) {
         notifications.push({
-          title: i18n.t('sui.success'),
+          title: t('sui.success'),
           text: response.data.message,
           color: 'success',
         });
@@ -499,7 +499,7 @@ const onDelete = (row: CollectionItem) => {
     })
     .catch((error) => {
       notifications.push({
-        title: i18n.t('sui.error'),
+        title: t('sui.error'),
         text: error.response.data?.message ?? 'Unknown error',
         color: 'danger',
       });
@@ -572,7 +572,7 @@ const rowActionsInternal = computed<RowAction[]>(() => {
 
   if (props.editUrl && props.editButton) {
     actions.push({
-      label: i18n.t('sui.edit'),
+      label: t('sui.edit'),
       icon: 'heroicons:cog-6-tooth-solid',
       to: (row: CollectionItem) => (props.editUrl ? props.editUrl(row) : ''),
       disabled: (row: CollectionItem) => !canUpdate(row),
@@ -581,7 +581,7 @@ const rowActionsInternal = computed<RowAction[]>(() => {
 
   if (props.deleteUrl && props.deleteButton) {
     actions.push({
-      label: i18n.t('sui.delete'),
+      label: t('sui.delete'),
       icon: 'heroicons:trash-20-solid',
       action: onDeleteClick,
       disabled: (row: CollectionItem) => !canDelete(row),
@@ -643,8 +643,8 @@ const sectionsInternal = computed<DataIteratorSection[]>(() => {
       {
         name: 'columns',
         icon: 'heroicons:table-cells-20-solid',
-        title: i18n.t('sui.columns'),
-        closeText: i18n.t('sui.apply'),
+        title: t('sui.columns'),
+        closeText: t('sui.apply'),
         opened: false,
       },
     ];