sprintify-ui 0.1.14 → 0.1.16

package/dist/types/src/components/BaseSwitch.vue.d.ts

@@ -24,10 +24,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-    hasIcon: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
     checkedIcon: {
         default: string;
         type: StringConstructor;
@@ -36,14 +32,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: StringConstructor;
     };
-    checkedIconColor: {
-        default: string;
-        type: StringConstructor;
-    };
-    unCheckedIconColor: {
-        default: string;
-        type: StringConstructor;
-    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: boolean;
@@ -69,10 +57,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-    hasIcon: {
-        default: boolean;
-        type: BooleanConstructor;
-    };
     checkedIcon: {
         default: string;
         type: StringConstructor;
@@ -81,14 +65,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: StringConstructor;
     };
-    checkedIconColor: {
-        default: string;
-        type: StringConstructor;
-    };
-    unCheckedIconColor: {
-        default: string;
-        type: StringConstructor;
-    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -98,11 +74,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: string | number | boolean | null | undefined;
     hasError: boolean;
     size: "base" | "xs" | "sm" | "lg" | "xl";
-    hasIcon: boolean;
     checkedIcon: string;
     unCheckedIcon: string;
-    checkedIconColor: string;
-    unCheckedIconColor: string;
 }>, {
     default: (_: {}) => any;
 }>;

package/dist/types/src/components/BaseTableColumn.vue.d.ts

@@ -155,8 +155,8 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     meta: unknown[] | Record<string, any>;
     label: string;
-    toggle: boolean;
     width: number;
+    toggle: boolean;
     field: string;
     padding: string;
     position: "left" | "right" | "center";

package/dist/types/src/components/BaseTagAutocomplete.vue.d.ts

@@ -146,6 +146,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     filter: (option: NormalizedOption) => boolean;
     name: string;
     required: boolean;
+    inline: boolean;
     placeholder: string;
     disabled: boolean;
     max: number;
@@ -153,7 +154,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     loading: boolean;
     loadingBottom: boolean;
     size: "base" | "xs" | "sm";
-    inline: boolean;
     dropdownShow: "focus" | "always";
 }>, {
     empty: (_: {

package/dist/types/src/composables/mediaQuery.d.ts

@@ -1,2 +1,2 @@
-import type { MaybeComputedRef } from '@vueuse/shared';
-export declare function useMediaQuery(query: MaybeComputedRef<string>): import("vue").Ref<boolean>;
+import type { MaybeRefOrGetter } from '@vueuse/shared';
+export declare function useMediaQuery(query: MaybeRefOrGetter<string>): import("vue").Ref<boolean>;

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

@@ -0,0 +1 @@
+export declare function t(key: string, args?: Record<string, any> | undefined): string;

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/dist/types/src/types/index.d.ts

@@ -50,6 +50,7 @@ export interface ResourceCollection {
 export interface PaginatedCollection extends PaginationMetadata {
     data: Collection;
 }
+export type ActionColors = 'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary' | 'secondary';
 export interface MenuItemInterface {
     label?: string;
     href?: string;
@@ -57,7 +58,7 @@ export interface MenuItemInterface {
     action?: () => Promise<void> | void;
     icon?: string;
     count?: number;
-    color?: 'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary';
+    color?: ActionColors;
     line?: boolean;
 }
 export interface ActionItem {
@@ -67,7 +68,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.1.14",
+  "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/BaseActionItemButton.vue

@@ -36,6 +36,8 @@ const classes = computed(() => {
 
   if (props.action.color == 'primary') {
     classList.push('btn-primary');
+  } else if (props.action.color == 'secondary') {
+    classList.push('btn-secondary-outline');
   } else if (props.action.color == 'danger') {
     classList.push('btn-danger');
   } else if (props.action.color == 'warning') {

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

@@ -6,7 +6,7 @@ export default {
   argTypes: {
     color: {
       control: { type: 'select' },
-      options: ['primary', 'danger', 'dark', 'light', 'white'],
+      options: ['primary', 'secondary', 'danger', 'dark', 'light', 'white'],
     },
     size: {
       control: { type: 'select' },

package/src/components/BaseCounter.vue

@@ -8,6 +8,7 @@
 </template>
 
 <script lang="ts" setup>
+import { ActionColors } from '@/types';
 import { padStart } from 'lodash';
 import { PropType } from 'vue';
 
@@ -26,9 +27,7 @@ const props = defineProps({
   },
   color: {
     default: 'danger',
-    type: String as PropType<
-      'danger' | 'primary' | 'success' | 'warning' | 'dark' | 'light' | 'white'
-    >,
+    type: String as PropType<ActionColors>,
   },
 });
 
@@ -69,6 +68,9 @@ const colorClass = computed((): string => {
   if (props.color == 'primary') {
     return 'bg-primary-500 text-white';
   }
+  if (props.color == 'secondary') {
+    return 'bg-primary-200 text-primary-800';
+  }
   if (props.color == 'dark') {
     return 'bg-slate-900 text-white';
   }

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;