sprintify-ui 0.8.62 → 0.8.63

package/dist/types/index.d.ts

@@ -210,6 +210,7 @@ import { Locales } from './types';
 import { Country } from './types/Country';
 import { Region } from './types/Region';
 import { Size } from './utils/sizes';
+import { SettingsStorage } from './utils/storage';
 export interface OptionProps {
     size?: Size;
 }
@@ -219,6 +220,7 @@ export interface Options {
     locales?: Locales;
     formatQueryString?: (params: Record<string, any>) => string;
     parseQueryString?: (params: string) => Record<string, any>;
+    settingsStorage?: SettingsStorage;
     countries?: Country[];
     regions?: Region[];
     props?: OptionProps;
@@ -229,6 +231,7 @@ declare const config: {
     upload_url: string;
     formatQueryString(params: Record<string, any>): string;
     parseQueryString(params: string): Record<string, any>;
+    settingsStorage: SettingsStorage;
     countries: Country[];
     regions: Region[];
     props: OptionProps | undefined;

package/dist/types/utils/storage.d.ts

@@ -1,2 +1,10 @@
-declare const storageKeyPrefix = "sui.";
-export { storageKeyPrefix };
+type SettingsStorageGetFunction = (key: string) => Promise<string | null>;
+type SettingsStorageSetFunction = (key: string, value: string) => Promise<void>;
+declare class SettingsStorage {
+    private getFunction;
+    private setFunction;
+    constructor(getFunction?: SettingsStorageGetFunction, setFunction?: SettingsStorageSetFunction);
+    get(key: string): Promise<string | null>;
+    set(key: string, value: string): Promise<void>;
+}
+export { SettingsStorage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.8.62",
+  "version": "0.8.63",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseDataTable.vue

@@ -256,7 +256,6 @@ import { useInputSize } from '@/composables/inputSize';
 import BaseButton from './BaseButton.vue';
 import BaseDataTableTemplate from './BaseDataTableTemplate.vue';
 import { customKeyActions } from '@/services/table/customKeyActions';
-import { storageKeyPrefix } from '@/utils/storage';
 
 const http = config.http;
 
@@ -660,6 +659,7 @@ const onDelete = (row: CollectionItem) => {
 };
 
 const componentStorageKey = 'base_data_table.';
+const settingsStorage = config.settingsStorage;
 
 /*
 |--------------------------------------------------------------------------
@@ -668,41 +668,42 @@ const componentStorageKey = 'base_data_table.';
 */
 
 const visibleColumns = ref<string[]>([]);
+const visibleColumnsKey = componentStorageKey + props.storageKey + '.visible_columns';
 
-// Find visible columns in local storage
-const VISIBLE_COLUMNS_LOCAL_STORAGE_KEY = storageKeyPrefix + componentStorageKey + props.storageKey + '.visible_columns';
+onMounted(async () => {
 
-const visibleColumnsFromStorage = JSON.parse(
-  localStorage.getItem(VISIBLE_COLUMNS_LOCAL_STORAGE_KEY) + ''
-) as string[];
+  const value = await settingsStorage.get(visibleColumnsKey);
 
-// If found, set visibleColumns
-if (
-  visibleColumnsFromStorage &&
-  isArray(visibleColumnsFromStorage) &&
-  visibleColumnsFromStorage.length > 0
-) {
-  visibleColumns.value = visibleColumnsFromStorage;
-}
+  const visibleColumnsFromStorage = JSON.parse(value + '') as string[];
 
-// If nothing is found, set visibleColumns to all columns from table
-const unWatchTable = watch(
-  () => table.value,
-  () => {
-    if (
-      table.value &&
-      table.value.newColumns.length &&
-      visibleColumns.value.length == 0
-    ) {
-      visibleColumns.value = table.value.newColumns
-        .filter((c) => c.toggle)
-        .filter((c) => c.toggleDefault ?? true)
-        .map((c) => c.newKey);
-
-      unWatchTable();
-    }
+  // If found, set visibleColumns
+  if (
+    visibleColumnsFromStorage &&
+    isArray(visibleColumnsFromStorage) &&
+    visibleColumnsFromStorage.length > 0
+  ) {
+    visibleColumns.value = visibleColumnsFromStorage;
   }
-);
+
+  // If nothing is found, set visibleColumns to all columns from table
+  const unWatchTable = watch(
+    () => table.value,
+    () => {
+      if (
+        table.value &&
+        table.value.newColumns.length &&
+        visibleColumns.value.length == 0
+      ) {
+        visibleColumns.value = table.value.newColumns
+          .filter((c) => c.toggle)
+          .filter((c) => c.toggleDefault ?? true)
+          .map((c) => c.newKey);
+
+        unWatchTable();
+      }
+    }
+  );
+});
 
 /**
  * Update local storage when check input update
@@ -711,8 +712,8 @@ function onUpdateVisibleColumn(columns: string[]) {
 
   visibleColumns.value = columns;
 
-  localStorage.setItem(
-    VISIBLE_COLUMNS_LOCAL_STORAGE_KEY,
+  settingsStorage.set(
+    visibleColumnsKey,
     JSON.stringify(visibleColumns.value)
   );
 }
@@ -725,12 +726,13 @@ function onUpdateVisibleColumn(columns: string[]) {
 
 const columnOrder = ref<string[]>([]);
 
-const COLUMN_ORDER_LOCAL_STORAGE_KEY = storageKeyPrefix + componentStorageKey + props.storageKey + '.column_order';
+const columnOrderKey = componentStorageKey + props.storageKey + '.column_order';
+
+onMounted(async () => {
+
+  const value = await settingsStorage.get(columnOrderKey);
 
-onMounted(() => {
-  const columnOrderFromStorage = JSON.parse(
-    localStorage.getItem(COLUMN_ORDER_LOCAL_STORAGE_KEY) + ''
-  ) as string[];
+  const columnOrderFromStorage = JSON.parse(value + '') as string[];
 
   // If found, set columnOrder
   if (
@@ -751,8 +753,8 @@ function onUpdateColumnOrder(value: string[]) {
 
   columnOrder.value = value;
 
-  localStorage.setItem(
-    COLUMN_ORDER_LOCAL_STORAGE_KEY,
+  settingsStorage.set(
+    columnOrderKey,
     JSON.stringify(value)
   );
 

package/src/index.ts

@@ -18,6 +18,7 @@ import { Country } from './types/Country';
 import { Region } from './types/Region';
 import { useI18nStore } from './stores/i18n';
 import { Size } from './utils/sizes';
+import { SettingsStorage } from './utils/storage';
 
 export interface OptionProps {
   size?: Size;
@@ -31,6 +32,7 @@ export interface Options {
   formatQueryString?: (params: Record<string, any>) => string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   parseQueryString?: (params: string) => Record<string, any>;
+  settingsStorage?: SettingsStorage;
   countries?: Country[];
   regions?: Region[];
   props?: OptionProps
@@ -56,6 +58,7 @@ const config = {
       //comma: true,
     });
   },
+  settingsStorage: new SettingsStorage(),
   countries: [] as Country[],
   regions: [] as Region[],
   props: {
@@ -89,6 +92,10 @@ function install(app: App, options?: Options) {
     config.parseQueryString = options.parseQueryString;
   }
 
+  if (options?.settingsStorage) {
+    config.settingsStorage = options.settingsStorage;
+  }
+
   if (options?.countries) {
     config.countries = options.countries;
   }

package/src/utils/storage.ts

@@ -1,3 +1,36 @@
 const storageKeyPrefix = 'sui.';
 
-export { storageKeyPrefix };
+type SettingsStorageGetFunction = (key: string) => Promise<string | null>;
+type SettingsStorageSetFunction = (key: string, value: string) => Promise<void>;
+
+class SettingsStorage {
+
+    private getFunction: SettingsStorageGetFunction;
+    private setFunction: SettingsStorageSetFunction;
+
+    constructor(getFunction?: SettingsStorageGetFunction, setFunction?: SettingsStorageSetFunction) {
+
+        const localStorageGet = (key: string) => {
+            key = storageKeyPrefix + key;
+            return Promise.resolve(localStorage.getItem(key));
+        }
+
+        const localStorageSet = (key: string, value: string) => {
+            key = storageKeyPrefix + key;
+            return Promise.resolve(localStorage.setItem(key, value));
+        }
+
+        this.getFunction = getFunction ? getFunction : localStorageGet;
+        this.setFunction = setFunction ? setFunction : localStorageSet;
+    }
+
+    get(key: string): Promise<string | null> {
+        return this.getFunction(key);
+    }
+
+    set(key: string, value: string): Promise<void> {
+        return this.setFunction(key, value);
+    }
+}
+
+export { SettingsStorage };