sprintify-ui 0.1.14 → 0.1.16

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,
       },
     ];

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

@@ -35,11 +35,6 @@ const attributes = [
 ];
 
 const actions = [
-  {
-    label: 'Edit',
-    to: '/articles',
-    icon: 'heroicons:pencil-solid',
-  },
   {
     label: 'View',
     icon: 'heroicons:link-solid',
@@ -47,6 +42,18 @@ const actions = [
       alert('View');
     },
   },
+  {
+    label: 'Edit',
+    to: '/articles',
+    icon: 'heroicons:pencil-solid',
+  },
+  {
+    label: 'Publish 2',
+    to: '/articles',
+    color: 'secondary',
+    icon: 'heroicons:check-solid',
+  },
+
   {
     label: 'Publish',
     to: '/articles',

package/src/components/BaseHeader.vue

@@ -61,46 +61,38 @@
         </div>
       </div>
 
-      <div v-if="compactLayout" class="mt-5 flex gap-2">
-        <BaseActionItemButton
-          v-if="primaryAction"
-          :action="primaryAction"
-          size="sm"
-        />
-
-        <BaseMenu
-          v-if="secondaryActions.length > 1"
-          :items="secondaryActions"
-          size="sm"
-          position="bottom-right"
+      <div class="mt-5">
+        <div
+          class="flex gap-2"
+          :class="{
+            'lg:mt-0 lg:ml-4': !compactLayout,
+          }"
         >
-          <template #button="{ open }">
-            <div
-              class="btn btn-sm flex items-center gap-1 hover:border-slate-400"
-              :class="[open ? 'bg-slate-100' : '']"
-            >
-              <span>{{ $t('sui.more') }}</span>
-              <BaseIcon
-                icon="heroicons:chevron-down-solid"
-                class="h-5 w-5 text-slate-500"
-              />
-            </div>
-          </template>
-        </BaseMenu>
-        <BaseActionItemButton
-          v-else-if="secondaryActions.length === 1"
-          :action="secondaryActions[0]"
-          size="sm"
-        />
-      </div>
-
-      <div v-else class="mt-5 flex gap-2 lg:mt-0 lg:ml-4">
-        <BaseActionItemButton
-          v-for="action in actions"
-          :key="action.label"
-          :action="action"
-          size="sm"
-        />
+          <BaseActionItemButton
+            v-for="(primaryAction, i) in primaryActions"
+            :key="i"
+            :action="primaryAction"
+            size="sm"
+          />
+          <BaseMenu
+            v-if="secondaryActions.length"
+            :items="secondaryActions"
+            size="sm"
+            :position="compactLayout ? 'bottom-right' : 'bottom-left'"
+          >
+            <template #button="{ open }">
+              <div
+                class="btn btn-sm flex items-center rounded-full p-2 hover:border-slate-400"
+                :class="[open ? 'bg-slate-100' : '']"
+              >
+                <BaseIcon
+                  icon="heroicons-outline:dots-horizontal"
+                  class="h-4 w-4 text-slate-500"
+                />
+              </div>
+            </template>
+          </BaseMenu>
+        </div>
       </div>
     </div>
   </div>
@@ -113,6 +105,7 @@ import { BaseBreadcrumbs, BaseIcon } from '..';
 import BaseActionItemButton from './BaseActionItemButton.vue';
 import BaseBadge from './BaseBadge.vue';
 import BaseMenu from './BaseMenu.vue';
+import { cloneDeep } from 'lodash';
 
 const props = withDefaults(
   defineProps<{
@@ -123,6 +116,7 @@ const props = withDefaults(
     badge?: { icon: string; label: string; color: string };
     layout?: 'default' | 'compact';
     breadcrumbs?: Breadcrumb[];
+    maxActions?: number;
   }>(),
   {
     subtitle: undefined,
@@ -131,59 +125,64 @@ const props = withDefaults(
     badge: undefined,
     layout: 'default',
     breadcrumbs: undefined,
+    maxActions: 3,
   }
 );
 
-const primaryActionIndex = computed(() => {
-  if (!props.actions || props.actions.length === 0) {
-    return undefined;
-  }
-
-  if (props.actions?.length === 1) {
-    return 0;
-  }
+const baseHeaderRef = ref<HTMLElement | null>(null);
 
-  const primaryIndex = props.actions?.findIndex((a) => a.color == 'primary');
+const width = ref(800);
+useResizeObserver(baseHeaderRef, () => {
+  width.value = baseHeaderRef.value?.clientWidth ?? 800;
+});
 
-  if (primaryIndex !== -1) {
-    return primaryIndex;
+const compactLayout = computed(() => {
+  if (props.layout === 'compact') {
+    return true;
   }
-
-  return 0;
+  return width.value < 500;
 });
 
-const primaryAction = computed(() => {
-  if (!props.actions) {
-    return undefined;
+const maxActionsInternal = computed(() => {
+  if (compactLayout.value) {
+    return 1;
   }
+  return Math.max(1, props.maxActions);
+});
 
-  const index = primaryActionIndex.value;
-
-  if (index !== undefined) {
-    return props.actions[index];
+const primaryActions = computed(() => {
+  if (!props.actions) {
+    return [];
   }
 
-  return null;
+  return cloneDeep(props.actions)
+    .sort(sortByColor(false))
+    .slice(0, maxActionsInternal.value)
+    .sort(sortByColor(true));
 });
 
+function sortByColor(reverse = false) {
+  const sortingArr = ['secondary', 'primary'];
+
+  return (a: ActionItem, b: ActionItem) => {
+    if (!reverse) {
+      return (
+        sortingArr.indexOf(b.color ?? '') - sortingArr.indexOf(a.color ?? '')
+      );
+    }
+    return (
+      sortingArr.indexOf(a.color ?? '') - sortingArr.indexOf(b.color ?? '')
+    );
+  };
+}
+
 const secondaryActions = computed(() => {
   if (!props.actions) {
     return [];
   }
-  return props.actions?.filter((a, i) => i !== primaryActionIndex.value);
-});
 
-const baseHeaderRef = ref<HTMLElement | null>(null);
-
-const width = ref(800);
-useResizeObserver(baseHeaderRef, () => {
-  width.value = baseHeaderRef.value?.clientWidth ?? 800;
-});
-
-const compactLayout = computed(() => {
-  if (props.layout === 'compact') {
-    return true;
-  }
-  return width.value < 500;
+  return props.actions.filter(
+    (a) => !primaryActions.value.map((a) => a.label).includes(a.label)
+  );
 });
 </script>