@basmilius/common 3.0.0

package/dist/store/defineStore.d.ts

@@ -0,0 +1,8 @@
+export default function<
+	Id extends string,
+	Setup extends (...args: any[]) => any,
+	Context = ReturnType<Setup>
+>(id: Id, setup: Setup): UseStore<Context>;
+type UseStore<R> = {
+	(): R;
+};

package/dist/store/index.d.ts

@@ -0,0 +1,2 @@
+export { default as defineStore } from "./defineStore";
+export { createPinia, getActivePinia, setActivePinia } from "pinia";

package/dist/util/emptyNull.d.ts

@@ -0,0 +1 @@
+export default function emptyNull(str: string | undefined | null): string | null;

package/dist/util/generateColorPalette.d.ts

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

package/dist/util/guarded.d.ts

@@ -0,0 +1,3 @@
+export default function<T extends Function>(fn: T): T;
+export default function<T extends Function>(fn: T, onError: (err: Error) => void): T;
+export default function<T extends Function>(fn: T, snackbarTitle: string, snackbarMessage: string): T;

package/dist/util/index.d.ts

@@ -0,0 +1,9 @@
+export { default as emptyNull } from "./emptyNull";
+export { default as generateColorPalette } from "./generateColorPalette";
+export { default as guarded } from "./guarded";
+export { default as onError } from "./onError";
+export { default as onErrorSnackbar } from "./onErrorSnackbar";
+export { default as persistentRef } from "./persistentRef";
+export { default as persistentStringRef } from "./persistentStringRef";
+export { default as runBefore } from "./runBefore";
+export { default as unrefAll } from "./unrefAll";

package/dist/util/onError.d.ts

@@ -0,0 +1 @@
+export default function<T extends Function>(onError: (err: Error) => void): T;

package/dist/util/onErrorSnackbar.d.ts

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

package/dist/util/persistentRef.d.ts

@@ -0,0 +1,4 @@
+import { type Ref } from "vue";
+type Deserializer<T> = (value: string) => T;
+type Serializer<T> = (value: T) => string;
+export default function<T>(key: string, defaultValue: T, serialize?: Serializer<T>, deserialize?: Deserializer<T>): Ref<T | null>;

package/dist/util/persistentStringRef.d.ts

@@ -0,0 +1,2 @@
+import type { Ref } from "vue";
+export default function(key: string, defaultValue: string | null): Ref<string | null>;

package/dist/util/runBefore.d.ts

@@ -0,0 +1 @@
+export default function<T extends Function>(before: () => void): T;

package/dist/util/unrefAll.d.ts

@@ -0,0 +1,3 @@
+import { type Ref } from "vue";
+type UnrefAll<T extends readonly unknown[]> = { [K in keyof T] : T[K] extends Ref<infer U> ? NonNullable<U> : T[K] };
+export default function<T extends readonly unknown[]>(...deps: T): UnrefAll<T>;

package/package.json

@@ -0,0 +1,66 @@
+{
+    "name": "@basmilius/common",
+    "description": "Common code shared in personal projects.",
+    "version": "3.0.0",
+    "type": "module",
+    "license": "MIT",
+    "funding": "https://github.com/sponsors/basmilius",
+    "author": {
+        "name": "Bas Milius",
+        "email": "bas@mili.us",
+        "url": "https://bas.dev"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/basmilius/packages.git",
+        "directory": "packages/common"
+    },
+    "keywords": [
+        "common",
+        "bun",
+        "vue",
+        "store",
+        "pinia",
+        "router"
+    ],
+    "files": [
+        "dist",
+        "src",
+        "CODEOWNERS",
+        "LICENSE"
+    ],
+    "publishConfig": {
+        "access": "public",
+        "provenance": false
+    },
+    "scripts": {
+        "build": "tsgo --noEmit && bun -b build.ts"
+    },
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "typings": "./dist/index.d.ts",
+    "sideEffects": false,
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./*": "./*"
+    },
+    "dependencies": {
+        "@basmilius/http-client": "3.0.0",
+        "@basmilius/utils": "3.0.0",
+        "@flux-ui/components": "^3.0.0-next.26",
+        "@flux-ui/internals": "^3.0.0-next.26",
+        "pinia": "^3.0.4",
+        "vue": "^3.6.0-beta.6",
+        "vue-router": "^5.0.3"
+    },
+    "devDependencies": {
+        "@basmilius/tools": "3.0.0",
+        "@types/culori": "^4.0.1",
+        "@types/lodash-es": "^4.17.12",
+        "culori": "^4.0.2",
+        "lodash-es": "^4.17.23"
+    }
+}

package/src/composable/index.ts

@@ -0,0 +1,16 @@
+export { default as useCopy } from './useCopy';
+export { default as useDebounced } from './useDebounced';
+export { default as useDtoForm } from './useDtoForm';
+export { default as useInterval } from './useInterval';
+export { default as useLoaded } from './useLoaded';
+export { default as useLoadedAction } from './useLoadedAction';
+export { default as useLocalFile } from './useLocalFile';
+export { default as useMounted } from './useMounted';
+export { default as useNamedRoute } from './useNamedRoute';
+export { default as useNavigate } from './useNavigate';
+export { default as usePagination } from './usePagination';
+export { default as usePasswordStrength } from './usePasswordStrength';
+export { default as useRouteMeta } from './useRouteMeta';
+export { default as useRouteNames } from './useRouteNames';
+export { default as useRouteParam } from './useRouteParam';
+export { default as useService } from './useService';

package/src/composable/useCopy.ts

@@ -0,0 +1,8 @@
+import { type Ref, unref } from 'vue';
+
+export default function (contents: Ref<string>, onSuccess?: Function) {
+    return async () => {
+        await navigator.clipboard.writeText(unref(contents));
+        onSuccess?.();
+    };
+}

package/src/composable/useDebounced.ts

@@ -0,0 +1,5 @@
+import { debounce } from '@basmilius/utils';
+
+export default function <T extends (...args: any[]) => any>(fn: T, delay: number): T {
+    return debounce(fn, delay) as T;
+}

package/src/composable/useDtoForm.ts

@@ -0,0 +1,17 @@
+import { cloneDto, markDtoClean } from '@basmilius/http-client';
+import { ref, type Ref, watch } from 'vue';
+
+export default function <T>(dtoRef: Ref<T | null>) {
+    const form = ref<T>();
+
+    watch(dtoRef, dto => {
+        if (!dto) {
+            return;
+        }
+
+        form.value = cloneDto(dto);
+        markDtoClean(form.value);
+    }, {immediate: true});
+
+    return form;
+}

package/src/composable/useInterval.ts

@@ -0,0 +1,22 @@
+import { onMounted, onUnmounted, type Ref, ref, unref } from 'vue';
+
+export default function (interval: Ref<number> | number, fn: Function): void {
+    const intervalRef = ref<any>();
+
+    onMounted(() => {
+        tick();
+    });
+
+    onUnmounted(() => {
+        clearTimeout(intervalRef.value);
+    });
+
+    function schedule(): void {
+        intervalRef.value = setTimeout(() => requestAnimationFrame(tick), unref(interval));
+    }
+
+    function tick(): void {
+        schedule();
+        fn();
+    }
+}

package/src/composable/useLoaded.ts

@@ -0,0 +1,38 @@
+import { useDebouncedRef } from '@flux-ui/internals';
+import { computed, type ComputedRef, ref, unref, watch } from 'vue';
+
+export default function (debounce: number = 0, initial: boolean = false): UseLoaded {
+    const first = ref(initial);
+    const tasks = ref(0);
+
+    const isLoading = computed(() => unref(first) || unref(tasks) > 0);
+
+    function loaded<T extends Function>(fn: T): T {
+        return (async (...args: any[]) => {
+            tasks.value++;
+
+            return await fn(...args)
+                .finally(() => tasks.value--);
+        }) as unknown as T;
+    }
+
+    const isLoadingDebounced = useDebouncedRef(isLoading, debounce) as unknown as ComputedRef<boolean>;
+
+    watch(tasks, () => {
+        if (!unref(first)) {
+            return;
+        }
+
+        first.value = false;
+    });
+
+    return {
+        isLoading: isLoadingDebounced,
+        loaded
+    };
+}
+
+type UseLoaded = {
+    readonly isLoading: ComputedRef<boolean>;
+    loaded<T extends Function>(fn: T): T;
+};

package/src/composable/useLoadedAction.ts

@@ -0,0 +1,13 @@
+import type { ComputedRef } from 'vue';
+import useLoaded from './useLoaded';
+
+export default function <T extends ((...args: any[]) => Promise<any>)>(fn: T): [T, ComputedRef<boolean>] {
+    const {isLoading, loaded} = useLoaded();
+
+    const action = loaded(fn);
+
+    return [
+        action,
+        isLoading
+    ];
+};

package/src/composable/useLocalFile.ts

@@ -0,0 +1,40 @@
+import { ref, watch } from 'vue';
+
+export default function () {
+    const file = ref<File | null>(null);
+    const url = ref<string | null>(null);
+
+    const deleteFile = (): void => {
+        file.value = null;
+        url.value = null;
+    };
+
+    const uploadFile = (uploadedFile: File): void => {
+        file.value = uploadedFile;
+    };
+
+    watch(file, (file, _, onCleanup) => {
+        if (!file) {
+            return;
+        }
+
+        url.value = URL.createObjectURL(file);
+
+        onCleanup(() => {
+            if (!url.value) {
+                return;
+            }
+
+            URL.revokeObjectURL(url.value);
+            url.value = null;
+        });
+    }, {immediate: true});
+
+    return {
+        file,
+        url,
+
+        delete: deleteFile,
+        upload: uploadFile
+    };
+}

package/src/composable/useMounted.ts

@@ -0,0 +1,9 @@
+import { onMounted, type Ref, ref } from 'vue';
+
+export default function (): Ref<boolean> {
+    const mounted = ref(false);
+
+    onMounted(() => mounted.value = true);
+
+    return mounted;
+}

package/src/composable/useNamedRoute.ts

@@ -0,0 +1,17 @@
+import { computed, provide, type Ref, unref } from 'vue';
+import { useRoute, viewDepthKey } from 'vue-router';
+
+export default function (nameRef: Ref<string> | string) {
+    const route = useRoute();
+
+    const depth = computed(() => route.matched.findIndex(m => !!m.components && unref(nameRef) in m.components));
+    const matched = computed(() => route.matched[unref(depth)]);
+    const viewKey = computed(() => unref(matched)?.path);
+
+    provide(viewDepthKey, depth);
+
+    return {
+        route,
+        viewKey
+    };
+}

package/src/composable/useNavigate.ts

@@ -0,0 +1,28 @@
+import { type NavigationFailure, type RouteLocationRaw, useRouter } from 'vue-router';
+
+type To = Omit<RouteLocationRaw, 'replace'>;
+type Navigate = (to: To, replace?: boolean) => Promise<NavigationFailure | void | undefined>;
+type Wrap = (fn: Navigate) => Navigate;
+
+export default function (...wrap: Wrap[]) {
+    const router = useRouter();
+
+    let navigate = async (to: To, replace: boolean = false) => {
+        if (replace) {
+            return await router.replace(to);
+        }
+
+        return await router.push(to);
+    };
+
+    for (let wrapper of wrap) {
+        navigate = wrapper(navigate);
+    }
+
+    return {
+        navigate,
+
+        push: (to: To) => navigate(to),
+        replace: (to: To) => navigate(to, true)
+    };
+}

package/src/composable/usePagination.ts

@@ -0,0 +1,35 @@
+import { ref } from 'vue';
+
+const DEFAULT_LIMITS = [5, 10, 25, 50, 100];
+const DEFAULT_PAGE = 1;
+const DEFAULT_PER_PAGE = 25;
+
+export default function () {
+    const limits = ref(DEFAULT_LIMITS);
+    const page = ref(DEFAULT_PAGE);
+    const perPage = ref(DEFAULT_PER_PAGE);
+    const total = ref(0);
+
+    function setPage(num: number): void {
+        page.value = num;
+    }
+
+    function setPerPage(num: number): void {
+        perPage.value = num;
+    }
+
+    function setTotal(num: number): void {
+        total.value = num;
+    }
+
+    return {
+        limits,
+        page,
+        perPage,
+        total,
+
+        setPage,
+        setPerPage,
+        setTotal
+    };
+};

package/src/composable/usePasswordStrength.ts

@@ -0,0 +1,67 @@
+import { computed, type Ref, unref } from 'vue';
+
+type PasswordRuleType =
+    | 'lowercase'
+    | 'uppercase'
+    | 'number'
+    | 'symbol';
+
+type PasswordStrengthType =
+    | 'too_weak'
+    | 'weak'
+    | 'medium'
+    | 'strong';
+
+type Result = {
+    readonly length: number;
+    readonly rules: PasswordRuleType[];
+    readonly strength: PasswordStrengthType;
+};
+
+type PasswordRule = {
+    readonly regex: RegExp;
+    readonly type: PasswordRuleType;
+};
+
+type PasswordStrength = {
+    readonly index: number;
+    readonly type: PasswordStrengthType;
+    readonly minimumDiversity: number;
+    readonly minimumLength: number;
+};
+
+const strengths: PasswordStrength[] = [
+    {index: 0, type: 'too_weak', minimumDiversity: 0, minimumLength: 0},
+    {index: 1, type: 'weak', minimumDiversity: 2, minimumLength: 6},
+    {index: 2, type: 'medium', minimumDiversity: 3, minimumLength: 8},
+    {index: 3, type: 'strong', minimumDiversity: 4, minimumLength: 10}
+] as const;
+
+const rules: PasswordRule[] = [
+    {regex: new RegExp('[a-z]'), type: 'lowercase'},
+    {regex: new RegExp('[A-Z]'), type: 'uppercase'},
+    {regex: new RegExp('[0-9]'), type: 'number'},
+    {regex: new RegExp('[!"#\$%&\'\(\)\*\+,-\./:;<=>\?@\[\\\\\\]\^_`\{|\}~]'), type: 'symbol'}
+];
+
+export default function (passwordRef: Ref<string>) {
+    return computed<Result | null>(() => {
+        const password = unref(passwordRef);
+
+        if (password.length === 0) {
+            return null;
+        }
+
+        const foundRules = rules
+            .filter(r => r.regex.test(password))
+            .map(r => r.type);
+
+        return {
+            length: password.length,
+            strength: strengths
+                .sort((a, b) => b.index - a.index)
+                .find(s => foundRules.length >= s.minimumDiversity && password.length >= s.minimumLength)!.type,
+            rules: foundRules
+        } satisfies Result;
+    });
+}

package/src/composable/useRouteMeta.ts

@@ -0,0 +1,34 @@
+import { merge } from 'lodash-es';
+import { computed, type Ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+type RouteMeta = {
+    readonly name?: string;
+};
+
+export default function (): Ref<RouteMeta> {
+    const route = useRoute();
+
+    return computed(() => {
+        let meta: RouteMeta = {};
+
+        for (let i = route.matched.length - 1; i >= 0; --i) {
+            const record = route.matched[i];
+
+            if (!record || typeof record.meta !== 'object') {
+                continue;
+            }
+
+            let matchMeta = {...record.meta};
+
+            if ('navigation' in meta) {
+                const {navigation: _, ...matchMetaWithoutNavigation} = matchMeta;
+                matchMeta = matchMetaWithoutNavigation;
+            }
+
+            meta = merge(meta, matchMeta);
+        }
+
+        return meta;
+    });
+}

package/src/composable/useRouteNames.ts

@@ -0,0 +1,14 @@
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+export default function () {
+    const route = useRoute();
+
+    return computed(() => {
+        const names: string[] = [];
+
+        route.matched.forEach(m => m.name && names.push(m.name as string));
+
+        return names;
+    });
+};

package/src/composable/useRouteParam.ts

@@ -0,0 +1,13 @@
+import { type Ref, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+export default function (name: string, defaultValue: string | null = null): Ref<string | null> {
+    const route = useRoute();
+    const param = ref<string | null>((route.params[name] as string | undefined) ?? defaultValue);
+
+    watch(() => route.params[name], (value) => {
+        param.value = (value || null) as string | null;
+    }, {immediate: true});
+
+    return param;
+}

package/src/composable/useService.ts

@@ -0,0 +1,20 @@
+import type { BaseService } from '@basmilius/http-client';
+import { guarded } from '../util';
+
+type ServiceClass<T extends BaseService> = { new(): T; };
+type Wrap = (fn: Function) => Function;
+
+export default function <T extends BaseService>(serviceClass: ServiceClass<T>, ...wrap: Wrap[]): T {
+    const service = new serviceClass;
+    const methods = Object.getOwnPropertyNames(serviceClass.prototype)
+        .filter(m => m !== 'constructor');
+
+    const functions: Record<string, Function> = {};
+
+    for (let method of methods) {
+        functions[method] = guarded((service as any)[method].bind(service));
+        wrap.forEach(w => functions[method] = w(functions[method]!));
+    }
+
+    return functions as unknown as T;
+}

package/src/error/ForbiddenException.ts

@@ -0,0 +1,2 @@
+export class ForbiddenException extends Error {
+}

package/src/error/HandledException.ts

@@ -0,0 +1,2 @@
+export class HandledException extends Error {
+}

package/src/error/UnauthorizedException.ts

@@ -0,0 +1,2 @@
+export class UnauthorizedException extends Error {
+}

package/src/error/index.ts

@@ -0,0 +1,3 @@
+export * from './ForbiddenException';
+export * from './HandledException';
+export * from './UnauthorizedException';

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './composable';
+export * from './error';
+export * from './store';
+export * from './util';

package/src/store/defineStore.ts

@@ -0,0 +1,31 @@
+import { defineStore, type StoreGeneric, storeToRefs } from 'pinia';
+
+export default function <Id extends string, Setup extends (...args: any[]) => any, Context = ReturnType<Setup>>(id: Id, setup: Setup): UseStore<Context> {
+    const storeFn = defineStore(id, setup);
+
+    return () => {
+        const store: StoreGeneric = storeFn();
+        const keys = Object.getOwnPropertyNames(store);
+        const refs = storeToRefs(store as StoreGeneric);
+        const result: Record<string, unknown> = {};
+
+        for (const key of keys) {
+            if (key.startsWith('$') || key.startsWith('_')) {
+                continue;
+            }
+
+            if (key in refs) {
+                result[key] = refs[key];
+                continue;
+            }
+
+            result[key] = store[key];
+        }
+
+        return result as Context;
+    };
+}
+
+type UseStore<R> = {
+    (): R;
+}

package/src/store/index.ts

@@ -0,0 +1,7 @@
+export { default as defineStore } from './defineStore';
+
+export {
+    createPinia,
+    getActivePinia,
+    setActivePinia
+} from 'pinia';

package/src/util/emptyNull.ts

@@ -0,0 +1,3 @@
+export default function emptyNull(str: string | undefined | null): string | null {
+    return str || null;
+}