sprintify-ui 0.0.6 → 0.0.8

package/src/components/BaseFileUploader.vue

@@ -36,13 +36,17 @@ import { config } from '@/index';
 import { PropType } from 'vue';
 import { UploadedFile } from '@/types/UploadedFile';
 import { toHumanList, fileSizeFormat } from '../utils';
-//import { useNotificationsStore } from '../stores/notifications';
+import { useNotificationsStore } from '../stores/notifications';
 
 const http = config.http;
 const i18n = useI18n();
-//const notifications = useNotificationsStore();
+const notifications = useNotificationsStore();
 
 const props = defineProps({
+  url: {
+    default: undefined,
+    type: String,
+  },
   disabled: {
     default: false,
     type: Boolean,
@@ -91,13 +95,13 @@ async function onPictureUpload(file: File) {
 
   try {
     if (file.size > props.maxSize) {
-      /* notifications.push({
+      notifications.push({
         color: 'danger',
         title: i18n.t('sui.error'),
         text: i18n.t('sui.the_file_size_must_not_exceed_x', {
           x: fileSizeFormat(props.maxSize),
         }),
-      }); */
+      });
       return;
     }
 
@@ -109,7 +113,7 @@ async function onPictureUpload(file: File) {
       props.acceptedExtensions.length
     ) {
       if (!props.acceptedExtensions.includes(extension)) {
-        /* notifications.push({
+        notifications.push({
           color: 'danger',
           title: i18n.t('sui.error'),
           text:
@@ -119,7 +123,7 @@ async function onPictureUpload(file: File) {
             ' ' +
             toHumanList(props.acceptedExtensions, i18n.t('sui.or')) +
             '.',
-        }); */
+        });
         return;
       }
     }
@@ -131,7 +135,7 @@ async function onPictureUpload(file: File) {
     uploading.value = true;
     emit('upload:start');
 
-    const response = await http.post(config.upload_url, formData);
+    const response = await http.post(props.url ?? config.upload_url, formData);
 
     const payload = response.data as UploadedFile;
     payload.original_file = file;
@@ -154,6 +158,11 @@ async function onPictureUpload(file: File) {
     }
   } catch (e: unknown) {
     emit('upload:fail');
+    notifications.push({
+      color: 'danger',
+      title: i18n.t('sui.error'),
+      text: i18n.t('sui.upload_failed'),
+    });
   } finally {
     emit('upload:end');
     uploading.value = false;

package/src/components/BaseInputLabel.vue

@@ -1,7 +1,7 @@
 <template>
-  <label :class="classes"
-    >{{ label }}<span v-if="required" class="text-red-600"> *</span></label
-  >
+  <label :class="classes">
+    {{ label }}<span v-if="required" class="text-red-600"> *</span>
+  </label>
 </template>
 
 <script lang="ts">

package/src/components/BaseMediaLibrary.vue

@@ -91,15 +91,15 @@ import { Media } from '@/types/Media';
 import _, { cloneDeep, get } from 'lodash';
 import { PropType } from 'vue';
 import { MediaLibraryPayload } from '@/types/types';
-//import { useDialogsStore } from '../stores/dialogs';
-//import { useNotificationsStore } from '../stores/notifications';
+import { useDialogsStore } from '../stores/dialogs';
+import { useNotificationsStore } from '../stores/notifications';
 import { capitalize } from 'lodash';
 import { fileSizeFormat } from 'src/utils';
 
 const i18n = useI18n();
 
-//const dialogs = useDialogsStore();
-//const notifications = useNotificationsStore();
+const dialogs = useDialogsStore();
+const notifications = useNotificationsStore();
 
 const emit = defineEmits([
   'update',
@@ -188,11 +188,11 @@ function onUploadSuccess(file: UploadedFile) {
   }
 
   if (numberOfFiles.value >= props.max && props.max > 1) {
-    /* notifications.push({
+    notifications.push({
       title: i18n.t('sui.whoops'),
       text: i18n.t('sui.you_can_upload_up_to_n_files', { count: props.max }),
       color: 'danger',
-    }); */
+    });
     return;
   }
 
@@ -213,25 +213,25 @@ function onUploadSuccess(file: UploadedFile) {
 }
 
 function promptRemoveUploadedFile(index: number, length = 1) {
-  /* dialogs.push({
+  dialogs.push({
     title: i18n.t('sui.remove_file'),
     message: i18n.t('sui.remove_file_description'),
     color: 'warning',
     onConfirm() {
       removeUploadedFile(index, length);
     },
-  }); */
+  });
 }
 
 function promptRemoveMedia(index: number) {
-  /* dialogs.push({
+  dialogs.push({
     title: i18n.t('sui.remove_file'),
     message: i18n.t('sui.remove_file_description'),
     color: 'warning',
     onConfirm() {
       removeMedia(index);
     },
-  }); */
+  });
 }
 
 function removeUploadedFile(index: number, length = 1) {

package/src/components/BaseTagAutocomplete.vue

@@ -83,7 +83,7 @@ import { PropType, Ref, ComputedRef } from 'vue';
 import { NormalizedOption, Option, OptionValue } from '@/types/types';
 import { useInfiniteScroll } from '@vueuse/core';
 import BaseLoadingCover from './BaseLoadingCover.vue';
-//import { useNotificationsStore } from '../../stores/notifications';
+import { useNotificationsStore } from '@/stores/notifications';
 
 const props = defineProps({
   modelValue: {
@@ -140,7 +140,7 @@ const emit = defineEmits([
 ]);
 
 const i18n = useI18n();
-//const notifications = useNotificationsStore();
+const notifications = useNotificationsStore();
 
 const timerId = ref(0);
 const keywords = ref('');
@@ -308,11 +308,11 @@ const toggleOption = (option: NormalizedOption) => {
 
 const addOption = (option: NormalizedOption) => {
   if (props.max && normalizedModelValue.value.length >= props.max) {
-    /* notifications.push({
+    notifications.push({
       title: i18n.t('sui.whoops'),
       text: i18n.t('sui.you_cannot_select_more_than_x_items', { x: props.max }),
       color: 'warning',
-    }); */
+    });
     return;
   }
 

package/src/components/index.ts

@@ -1,4 +1,7 @@
 import BaseAlert from './BaseAlert.vue';
+import BaseApp from './BaseApp.vue';
+import BaseAppDialogs from './BaseAppDialogs.vue';
+import BaseAppNotifications from './BaseAppNotifications.vue';
 import BaseAutocomplete from './BaseAutocomplete.vue';
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
 import BaseAvatar from './BaseAvatar.vue';
@@ -16,7 +19,11 @@ import BaseDataIterator from './BaseDataIterator.vue';
 import BaseDataTable from './BaseDataTable.vue';
 import BaseDatePicker from './BaseDatePicker.vue';
 import BaseDateSelect from './BaseDateSelect.vue';
-
+import BaseDescriptionList from './BaseDescriptionList.vue';
+import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
+import BaseDialog from './BaseDialog.vue';
+import BaseFilePicker from './BaseFilePicker.vue';
+import BaseFileUploader from './BaseFileUploader.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseLoadingCover from './BaseLoadingCover.vue';
 import BaseMenu from './BaseMenu.vue';
@@ -26,6 +33,9 @@ import BaseTableColumn from './BaseTableColumn.vue';
 
 export {
   BaseAlert,
+  BaseApp,
+  BaseAppDialogs,
+  BaseAppNotifications,
   BaseAutocomplete,
   BaseAutocompleteFetch,
   BaseAvatar,
@@ -43,6 +53,11 @@ export {
   BaseDataTable,
   BaseDatePicker,
   BaseDateSelect,
+  BaseDescriptionList,
+  BaseDescriptionListItem,
+  BaseDialog,
+  BaseFilePicker,
+  BaseFileUploader,
   BaseIcon,
   BaseLoadingCover,
   BaseMenu,

package/src/index.ts

@@ -5,12 +5,15 @@ 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';
+import { useNotificationsStore } from './stores/notifications';
+import { useSystemAlertStore } from './stores/systemAlerts';
 
 const messages = { en, fr };
 
 import './assets/main.css';
 
-interface SprintifyUIConfig {
+export interface Options {
   // eslint-disable-next-line @typescript-eslint/ban-types
   i18n?: I18n<typeof messages, {}, {}, string, true>;
   http?: AxiosInstance;
@@ -19,8 +22,10 @@ interface SprintifyUIConfig {
   parseQueryString?: (params: string) => Record<string, any>;
 }
 
-const pluginConfig = {
+const config = {
   i18n: createI18n({
+    locale: 'en',
+    fallbackLocale: 'en',
     messages: { en, fr },
   }),
   http: axios.create(),
@@ -36,30 +41,30 @@ const pluginConfig = {
   },
 };
 
-function install(app: App, config?: SprintifyUIConfig) {
+function install(app: App, options?: Options) {
   for (const key in components) {
     // @ts-expect-error Will throw
     app.component(key, components[key]);
   }
 
-  if (config?.i18n) {
-    pluginConfig.i18n = config.i18n;
+  if (options?.i18n) {
+    config.i18n = options.i18n;
   }
 
-  if (config?.http) {
-    pluginConfig.http = config.http;
+  if (options?.http) {
+    config.http = options.http;
   }
 
-  if (config?.upload_url) {
-    pluginConfig.upload_url = config.upload_url;
+  if (options?.upload_url) {
+    config.upload_url = options.upload_url;
   }
 
-  if (config?.formatQueryString) {
-    pluginConfig.formatQueryString = config.formatQueryString;
+  if (options?.formatQueryString) {
+    config.formatQueryString = options.formatQueryString;
   }
 
-  if (config?.parseQueryString) {
-    pluginConfig.parseQueryString = config.parseQueryString;
+  if (options?.parseQueryString) {
+    config.parseQueryString = options.parseQueryString;
   }
 }
 
@@ -71,4 +76,8 @@ export * from './utils';
 
 export { messages };
 
-export { pluginConfig as config };
+export { config };
+
+export { useDialogsStore };
+export { useNotificationsStore };
+export { useSystemAlertStore };

package/src/lang/en.json

@@ -38,19 +38,20 @@
     "the_file_size_must_not_exceed_x": "The file size must not exceed {x}",
     "the_file_type_is_invalid": "The file type is invalid",
     "type_to_start_your_search": "Type to start your search",
-    "up_to_x": "Up to {x}",
-    "whoops": "Whoops",
-    "x_rows_selected": "1 item selected | {count} items selected",
-    "year": "Year",
-    "yes_delete": "Yes, delete",
-    "you_can_upload_up_to_n_files": "You can upload one file at most|You can upload up to {count} files",
-    "you_cannot_select_more_than_x_items": "You can't select more than one item|You can't select more than {x} items",
     "units": {
       "b": "B",
       "gb": "GB",
       "kb": "kB",
       "mb": "MB",
       "tb": "TB"
-    }
+    },
+    "up_to_x": "Up to {x}",
+    "upload_failed": "Upload failed",
+    "whoops": "Whoops",
+    "x_rows_selected": "1 item selected | {count} items selected",
+    "year": "Year",
+    "yes_delete": "Yes, delete",
+    "you_can_upload_up_to_n_files": "You can upload one file at most|You can upload up to {count} files",
+    "you_cannot_select_more_than_x_items": "You can't select more than one item|You can't select more than {x} items"
   }
 }

package/src/lang/fr.json

@@ -38,19 +38,20 @@
     "the_file_size_must_not_exceed_x": "La taille du fichier ne doit pas dépasser {x}",
     "the_file_type_is_invalid": "Le type de fichier n'est pas valide",
     "type_to_start_your_search": "Tapez pour lancer votre recherche",
-    "up_to_x": "Jusqu'à {x}",
-    "whoops": "Oups",
-    "x_rows_selected": "1 item sélectionné | \n{count} items sélectionnés",
-    "year": "An",
-    "yes_delete": "Oui, supprimer",
-    "you_can_upload_up_to_n_files": "Vous pouvez télécharger un fichier au maximum|Vous pouvez télécharger jusqu'à {count} fichiers",
-    "you_cannot_select_more_than_x_items": "Vous ne pouvez pas sélectionner plus de un élément|Vous ne pouvez pas sélectionner plus de {x} éléments",
     "units": {
       "b": "o",
       "gb": "Go",
       "kb": "Ko",
       "mb": "Mo",
       "tb": "To"
-    }
+    },
+    "up_to_x": "Jusqu'à {x}",
+    "upload_failed": "Le téléchargement a échoué",
+    "whoops": "Oups",
+    "x_rows_selected": "1 item sélectionné | \n{count} items sélectionnés",
+    "year": "An",
+    "yes_delete": "Oui, supprimer",
+    "you_can_upload_up_to_n_files": "Vous pouvez télécharger un fichier au maximum|Vous pouvez télécharger jusqu'à {count} fichiers",
+    "you_cannot_select_more_than_x_items": "Vous ne pouvez pas sélectionner plus de un élément|Vous ne pouvez pas sélectionner plus de {x} éléments"
   }
 }

package/src/stores/dialogs.ts

@@ -0,0 +1,45 @@
+import { defineStore } from 'pinia';
+import { config } from '@/index';
+import { Dialog, DialogOptions } from '../types/types';
+
+export const useDialogsStore = defineStore('dialogs', {
+  state: () => {
+    return {
+      count: 0,
+      dialogs: [] as Dialog[],
+    };
+  },
+  actions: {
+    push(options: DialogOptions) {
+      this.count++;
+      this.dialogs.push({
+        id: this.count,
+        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'),
+        closeOnOutsideClick: options.closeOnOutsideClick ?? true,
+        onConfirm:
+          options.onConfirm ??
+          function () {
+            return;
+          },
+        onCancel:
+          options.onCancel ??
+          function () {
+            return;
+          },
+      });
+    },
+    remove(dialog: Dialog) {
+      this.dialogs.splice(
+        this.dialogs.findIndex((a) => a.id === dialog.id),
+        1
+      );
+    },
+    clear() {
+      this.dialogs = [];
+    },
+  },
+});

package/src/stores/notifications.ts

@@ -0,0 +1,47 @@
+import { defineStore } from 'pinia';
+import { Notification, NotificationOptions } from '../types/types';
+
+export const useNotificationsStore = defineStore('notifications', {
+  state: () => {
+    return {
+      count: 0,
+      notifications: [] as Notification[],
+      timeouts: {} as Record<number, number>,
+    };
+  },
+  actions: {
+    push(options: NotificationOptions) {
+      this.count++;
+
+      const id = this.count;
+
+      const notification = {
+        id: id,
+        color: options.color ?? 'info',
+        title: options.title,
+        text: options.text,
+        duration: options.duration ?? 3000,
+      };
+
+      this.notifications.push(notification);
+
+      this.timeouts[id] = setTimeout(() => {
+        this.remove(notification);
+      }, notification.duration);
+    },
+    remove(notification: Notification) {
+      this.notifications.splice(
+        this.notifications.findIndex((n) => n.id === notification.id),
+        1
+      );
+      clearTimeout(this.timeouts[notification.id]);
+    },
+    clear() {
+      this.notifications = [];
+      Object.values(this.timeouts).forEach((timeout) => {
+        clearTimeout(timeout);
+      });
+      this.timeouts = [];
+    },
+  },
+});

package/src/stores/systemAlerts.ts

@@ -0,0 +1,33 @@
+import { defineStore } from 'pinia';
+import { SystemAlert, SystemAlertOptions } from '../types/types';
+
+export const useSystemAlertStore = defineStore('systemAlerts', {
+  state: () => {
+    return {
+      count: 0,
+      systemAlerts: [] as SystemAlert[],
+    };
+  },
+  actions: {
+    push(systemAlert: SystemAlertOptions) {
+      this.count++;
+      this.systemAlerts.push({
+        id: this.count,
+        color: systemAlert.color ?? 'info',
+        message: systemAlert.message,
+        to: systemAlert.to,
+        action: systemAlert.action,
+        closable: systemAlert.closable ?? false,
+      });
+    },
+    remove(systemAlert: SystemAlert) {
+      this.systemAlerts.splice(
+        this.systemAlerts.findIndex((a) => a.id === systemAlert.id),
+        1
+      );
+    },
+    clear() {
+      this.systemAlerts = [];
+    },
+  },
+});

package/src/types/types.ts

@@ -110,3 +110,70 @@ export interface BaseTableColumn {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   tdAttrs: (row: Row, column: BaseTableColumn) => Record<string, any>;
 }
+
+/**
+ * System alert
+ */
+
+export interface SystemAlertOptions {
+  color?: 'info' | 'success' | 'danger' | 'warning';
+  message: string;
+  to?: RouteLocationRaw;
+  action?: () => void;
+  closable?: boolean;
+}
+
+export interface SystemAlert {
+  id: number;
+  color: 'info' | 'success' | 'danger' | 'warning';
+  message: string;
+  to?: RouteLocationRaw;
+  action?: () => void;
+  closable: boolean;
+}
+
+/**
+ * Dialog
+ */
+
+export interface DialogOptions {
+  color?: 'info' | 'success' | 'danger' | 'warning';
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  closeOnOutsideClick?: boolean;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+}
+
+export interface Dialog {
+  id: number;
+  color: 'info' | 'success' | 'danger' | 'warning';
+  title: string;
+  message: string;
+  confirmText: string;
+  cancelText: string;
+  closeOnOutsideClick: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+/**
+ * Notification
+ */
+
+export interface NotificationOptions {
+  title: string;
+  text: string;
+  color?: 'info' | 'success' | 'danger' | 'warning';
+  duration?: number;
+}
+
+export interface Notification {
+  id: number;
+  title: string;
+  text: string;
+  color: 'info' | 'success' | 'danger' | 'warning';
+  duration: number;
+}

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

@@ -1,2 +0,0 @@
-declare const _default: any;
-export default _default;

package/src/components/BaseLoadingPage.vue

@@ -1,19 +0,0 @@
-<template>
-  <div
-    class="fixed inset-0 z-loading flex h-full w-full items-center justify-center bg-white"
-  >
-    <div class="flex flex-col items-center">
-      <img
-        :src="'/img/logo/icon-color.svg'"
-        alt="Loading"
-        class="mb-14 w-16 animate-pulse"
-      />
-      <svg class="h-6 w-6 animate-spin text-primary-500" viewBox="0 0 24 24">
-        <path
-          fill="currentColor"
-          d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
-        />
-      </svg>
-    </div>
-  </div>
-</template>