@basmilius/common 3.1.0 → 3.3.0

package/dist/util/generateColorPalette.d.ts

@@ -1 +1 @@
-export default function(baseHex: string, prefix?: string);
+export default function(baseHex: string, prefix?: string): Record<string, string>;

package/dist/util/onErrorSnackbar.d.ts

@@ -1,2 +1,2 @@
-declare const _default;
+declare const _default: <T extends Function>() => T;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@basmilius/common",
     "description": "Common code shared in personal projects.",
-    "version": "3.1.0",
+    "version": "3.3.0",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -48,8 +48,8 @@
         "./*": "./*"
     },
     "dependencies": {
-        "@basmilius/http-client": "3.1.0",
-        "@basmilius/utils": "3.1.0",
+        "@basmilius/http-client": "3.3.0",
+        "@basmilius/utils": "3.3.0",
         "@flux-ui/components": "^3.0.0-next.26",
         "@flux-ui/internals": "^3.0.0-next.26",
         "pinia": "^3.0.4",
@@ -57,7 +57,7 @@
         "vue-router": "^5.0.3"
     },
     "devDependencies": {
-        "@basmilius/tools": "3.1.0",
+        "@basmilius/tools": "3.3.0",
         "@types/culori": "^4.0.1",
         "@types/lodash-es": "^4.17.12",
         "culori": "^4.0.2",

package/src/composable/index.ts

@@ -1,4 +1,5 @@
 export { default as useCopy } from './useCopy';
+export { default as useDataTable } from './useDataTable';
 export { default as useDebounced } from './useDebounced';
 export { default as useDtoForm } from './useDtoForm';
 export { default as useInterval } from './useInterval';

package/src/composable/useDataTable.ts

@@ -0,0 +1,90 @@
+import { BaseResponse, Paginated } from '@basmilius/http-client';
+import { type ComputedRef, type MultiWatchSources, ref, type Ref, unref, watch } from 'vue';
+import useLoaded from './useLoaded';
+import usePagination from './usePagination';
+
+export default function <T>(fetcher: (offset: number, limit: number) => Promise<BaseResponse<Paginated<T>> | false>, dependencies: MultiWatchSources = []): UseDataTable<T> {
+    const {
+        isLoading,
+        loaded
+    } = useLoaded();
+
+    const {
+        limits,
+        page,
+        perPage,
+        total,
+        setPage,
+        setPerPage,
+        setTotal
+    } = usePagination();
+
+    const displayEmpty = ref(false);
+    const isFirstLoad = ref(true);
+    const items = ref<T[]>([]) as Ref<T[]>;
+
+    async function fetch(): Promise<void> {
+        const _page = unref(page);
+        const _perPage = unref(perPage);
+
+        try {
+            const response = await loaded(fetcher)((_page - 1) * _perPage, _perPage);
+
+            if (response === false) {
+                return;
+            }
+
+            if (isFirstLoad.value) {
+                isFirstLoad.value = false;
+
+                if (response.data.items.length === 0) {
+                    displayEmpty.value = true;
+                }
+            } else if (response.data.items.length > 0) {
+                displayEmpty.value = false;
+            }
+
+            items.value = response.data.items;
+            setTotal(response.data.total);
+        } catch (err) {
+            if (err instanceof Error && err.message === 'Dep is null or undefined.') {
+                // In this case, the error is expected and valid. Something is probably still loading.
+                return;
+            }
+
+            throw err;
+        }
+    }
+
+    watch([page, perPage, ...dependencies], fetch, {immediate: true});
+
+    return {
+        displayEmpty,
+        isLoading,
+        items,
+        limits,
+        page,
+        perPage,
+        total,
+
+        reload: fetch,
+        setPage,
+        setPerPage,
+        setTotal
+    };
+}
+
+type UseDataTable<T> = {
+    readonly displayEmpty: Ref<boolean>;
+    readonly isLoading: ComputedRef<boolean>;
+    readonly items: Ref<T[]>;
+    readonly limits: Ref<number[]>;
+    readonly page: Ref<number>;
+    readonly perPage: Ref<number>;
+    readonly total: Ref<number>;
+
+    reload(): Promise<void>;
+    setPage(num: number): void;
+    setPerPage(num: number): void;
+    setTotal(num: number): void;
+};

package/src/util/generateColorPalette.ts

@@ -33,11 +33,11 @@ const POSITION: Record<Shade, number> = {
     950: 0.98
 };
 
-function clamp(v: number, min = 0, max = 1) {
+function clamp(v: number, min = 0, max = 1): number {
     return Math.min(max, Math.max(min, v));
 }
 
-export default function (baseHex: string, prefix = 'color') {
+export default function (baseHex: string, prefix = 'color'): Record<string, string> {
     const base = toOklch(baseHex);
 
     if (!base || base.mode !== 'oklch') {

package/src/util/onErrorSnackbar.ts

@@ -2,7 +2,7 @@ import { isRequestError } from '@basmilius/http-client';
 import { showSnackbar } from '@flux-ui/components';
 import onError from './onError';
 
-export default <T extends Function>() => onError<T>(err => {
+export default <T extends Function>(): T => onError<T>(err => {
     if (!isRequestError(err)) {
         throw err;
     }