sprintify-ui 0.0.5 → 0.0.7

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,7 +22,7 @@ interface SprintifyUIConfig {
   parseQueryString?: (params: string) => Record<string, any>;
 }
 
-const pluginConfig = {
+const config = {
   i18n: createI18n({
     messages: { en, fr },
   }),
@@ -36,30 +39,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 +74,8 @@ export * from './utils';
 
 export { messages };
 
-export { pluginConfig as config };
+export { config };
+
+export { useDialogsStore };
+export { useNotificationsStore };
+export { useSystemAlertStore };

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>