@yugu-ui/shared 0.0.0-stage → 0.1.0

package/bin.ts

@@ -0,0 +1,4 @@
+#!/usr/bin/env tsx
+
+// Developed collaboratively with vscode - 改动代码行数: 1行（阶段 1 五包合一：scripts 源码移至 scripts/，修正入口相对路径）
+import './scripts/src/index';

package/dist/hooks/index.d.ts

@@ -0,0 +1,8 @@
+import { default as useBoolean } from './use-boolean';
+import { default as useLoading } from './use-loading';
+import { default as useCountDown } from './use-count-down';
+import { default as useContext } from './use-context';
+import { default as useSvgIconRender } from './use-svg-icon-render';
+import { default as useTable } from './use-table';
+export { useBoolean, useLoading, useCountDown, useContext, useSvgIconRender, useTable };
+export type * from './use-table';

package/dist/hooks/use-boolean.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Boolean
+ *
+ * @param initValue Init value
+ */
+export default function useBoolean(initValue?: boolean): {
+    bool: import('vue').Ref<boolean, boolean>;
+    setBool: (value: boolean) => void;
+    setTrue: () => void;
+    setFalse: () => void;
+    toggle: () => void;
+};

package/dist/hooks/use-context.d.ts

@@ -0,0 +1,15 @@
+type ContextName = string | {
+    name: string;
+    key: string | symbol;
+};
+type ContextValue<T> = T extends (...args: any[]) => any ? ReturnType<T> : T;
+type ContextProvider<T> = T extends (...args: any[]) => any ? T : (arg: T) => T;
+type ContextConsumer<Context> = <N extends string | null | undefined = undefined>(consumerName?: N, defaultValue?: Context) => N extends null | undefined ? Context | null : Context;
+/**
+ * Creates a context provider and consumer pair.
+ *
+ * @param contextName - The name of the context. This can be a string or an object with a `name` and `key` property.
+ * @param composable - An optional composable function that returns the context value. If not provided, the context value will be the first argument passed to the provider.
+ */
+export default function useContext<T>(contextName: ContextName, composable?: T extends (...args: any[]) => any ? T : never): [ContextProvider<T>, ContextConsumer<ContextValue<T>>];
+export {};

package/dist/hooks/use-count-down.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A hook for implementing a countdown timer. It uses `requestAnimationFrame` for smooth and accurate timing,
+ * independent of the screen refresh rate.
+ *
+ * @param initialSeconds - The total number of seconds for the countdown.
+ */
+export default function useCountDown(initialSeconds: number): {
+    count: import('vue').ComputedRef<number>;
+    isCounting: import('vue').ComputedRef<boolean>;
+    start: (updatedSeconds?: number) => void;
+    stop: () => void;
+};

package/dist/hooks/use-loading.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Loading
+ *
+ * @param initValue Init value
+ */
+export default function useLoading(initValue?: boolean): {
+    loading: import('vue').Ref<boolean, boolean>;
+    startLoading: () => void;
+    endLoading: () => void;
+};

package/dist/hooks/use-request.d.ts

@@ -0,0 +1,23 @@
+import { Ref } from 'vue';
+import { AxiosError, CreateAxiosDefaults, CustomAxiosRequestConfig, MappedType, RequestInstanceCommon, RequestOption, ResponseType } from '../request/index';
+export type HookRequestInstanceResponseSuccessData<ApiData> = {
+    data: Ref<ApiData>;
+    error: Ref<null>;
+};
+export type HookRequestInstanceResponseFailData<ResponseData> = {
+    data: Ref<null>;
+    error: Ref<AxiosError<ResponseData>>;
+};
+export type HookRequestInstanceResponseData<ResponseData, ApiData> = {
+    loading: Ref<boolean>;
+} & (HookRequestInstanceResponseSuccessData<ApiData> | HookRequestInstanceResponseFailData<ResponseData>);
+export interface HookRequestInstance<ResponseData, ApiData, State extends Record<string, unknown>> extends RequestInstanceCommon<State> {
+    <T extends ApiData = ApiData, R extends ResponseType = 'json'>(config: CustomAxiosRequestConfig): HookRequestInstanceResponseData<ResponseData, MappedType<R, T>>;
+}
+/**
+ * create a hook request instance
+ *
+ * @param axiosConfig
+ * @param options
+ */
+export default function createHookRequest<ResponseData, ApiData, State extends Record<string, unknown>>(axiosConfig?: CreateAxiosDefaults, options?: Partial<RequestOption<ResponseData, ApiData, State>>): HookRequestInstance<ResponseData, ApiData, State>;

package/dist/hooks/use-svg-icon-render.d.ts

@@ -0,0 +1,19 @@
+import { Component } from 'vue';
+/**
+ * Svg icon render hook
+ *
+ * @param SvgIcon Svg icon component
+ */
+export interface IconConfig {
+    /** Local icon name */
+    localIcon?: string;
+    /** Icon color */
+    color?: string;
+    /** Icon size */
+    fontSize?: number;
+}
+export default function useSvgIconRender(SvgIcon: Component): {
+    SvgIconVNode: (config: IconConfig) => (() => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>) | undefined;
+};

package/dist/hooks/use-table.d.ts

@@ -0,0 +1,63 @@
+import { Ref, VNodeChild } from 'vue';
+export interface PaginationData<T> {
+    data: T[];
+    pageNum: number;
+    total: number;
+}
+type GetApiData<ApiData, Pagination extends boolean> = Pagination extends true ? PaginationData<ApiData> : ApiData[];
+type Transform<ResponseData, ApiData, Pagination extends boolean> = (response: ResponseData) => GetApiData<ApiData, Pagination>;
+export type TableColumnCheckTitle = string | ((...args: any) => VNodeChild);
+export type TableColumnCheck = {
+    titleText?: string;
+    key: string;
+    title: TableColumnCheckTitle;
+    checked: boolean;
+    visible: boolean;
+    fixed: 'left' | 'right' | 'unFixed';
+};
+export interface UseTableOptions<ResponseData, ApiData, Column, Pagination extends boolean> {
+    /**
+     * api function to get table data
+     */
+    api: () => Promise<ResponseData>;
+    /**
+     * whether to enable pagination
+     */
+    pagination?: Pagination;
+    /**
+     * transform api response to table data
+     */
+    transform: Transform<ResponseData, ApiData, Pagination>;
+    /**
+     * columns factory
+     */
+    columns: () => Column[];
+    /**
+     * get column checks
+     */
+    getColumnChecks: (columns: Column[]) => TableColumnCheck[];
+    /**
+     * get columns
+     */
+    getColumns: (columns: Column[], checks: TableColumnCheck[]) => Column[];
+    /**
+     * callback when response fetched
+     */
+    onFetched?: (data: GetApiData<ApiData, Pagination>) => void | Promise<void>;
+    /**
+     * whether to get data immediately
+     *
+     * @default true
+     */
+    immediate?: boolean;
+}
+export default function useTable<ResponseData, ApiData, Column, Pagination extends boolean>(options: UseTableOptions<ResponseData, ApiData, Column, Pagination>): {
+    loading: Ref<boolean, boolean>;
+    empty: Ref<boolean, boolean>;
+    data: Ref<ApiData[], ApiData[]>;
+    columns: import('vue').ComputedRef<Column[]>;
+    columnChecks: Ref<TableColumnCheck[], TableColumnCheck[]>;
+    reloadColumns: () => void;
+    getData: () => Promise<void>;
+};
+export {};

package/dist/hooks.d.ts

@@ -0,0 +1,2 @@
+export * from './hooks/index.js'
+export {}

package/dist/hooks.js

@@ -0,0 +1,205 @@
+import { computed, h, inject, onScopeDispose, provide, ref } from "vue";
+import { useRafFn } from "@vueuse/core";
+//#region src/hooks/use-boolean.ts
+/**
+* Boolean
+*
+* @param initValue Init value
+*/
+function useBoolean(initValue = false) {
+	const bool = ref(initValue);
+	function setBool(value) {
+		bool.value = value;
+	}
+	function setTrue() {
+		setBool(true);
+	}
+	function setFalse() {
+		setBool(false);
+	}
+	function toggle() {
+		setBool(!bool.value);
+	}
+	return {
+		bool,
+		setBool,
+		setTrue,
+		setFalse,
+		toggle
+	};
+}
+//#endregion
+//#region src/hooks/use-loading.ts
+/**
+* Loading
+*
+* @param initValue Init value
+*/
+function useLoading(initValue = false) {
+	const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(initValue);
+	return {
+		loading,
+		startLoading,
+		endLoading
+	};
+}
+//#endregion
+//#region src/hooks/use-count-down.ts
+/**
+* A hook for implementing a countdown timer. It uses `requestAnimationFrame` for smooth and accurate timing,
+* independent of the screen refresh rate.
+*
+* @param initialSeconds - The total number of seconds for the countdown.
+*/
+function useCountDown(initialSeconds) {
+	const remainingSeconds = ref(0);
+	const count = computed(() => Math.ceil(remainingSeconds.value));
+	const isCounting = computed(() => remainingSeconds.value > 0);
+	const { pause, resume } = useRafFn(({ delta }) => {
+		if (remainingSeconds.value <= 0) {
+			remainingSeconds.value = 0;
+			pause();
+			return;
+		}
+		const secondsPassed = delta / 1e3;
+		remainingSeconds.value -= secondsPassed;
+		if (remainingSeconds.value <= 0) {
+			remainingSeconds.value = 0;
+			pause();
+		}
+	}, { immediate: false });
+	/**
+	* Starts the countdown.
+	*
+	* @param [updatedSeconds=initialSeconds] - Optionally, start with a new duration. Default is `initialSeconds`
+	*/
+	function start(updatedSeconds = initialSeconds) {
+		remainingSeconds.value = updatedSeconds;
+		resume();
+	}
+	/** Stops the countdown and resets the remaining time to 0. */
+	function stop() {
+		remainingSeconds.value = 0;
+		pause();
+	}
+	onScopeDispose(() => {
+		pause();
+	});
+	return {
+		count,
+		isCounting,
+		start,
+		stop
+	};
+}
+//#endregion
+//#region src/hooks/use-context.ts
+/**
+* Creates a context provider and consumer pair.
+*
+* @param contextName - The name of the context. This can be a string or an object with a `name` and `key` property.
+* @param composable - An optional composable function that returns the context value. If not provided, the context value will be the first argument passed to the provider.
+*/
+function useContext(contextName, composable) {
+	const name = typeof contextName === "string" ? contextName : contextName.name;
+	const key = typeof contextName === "string" ? Symbol(contextName) : contextName.key;
+	/**
+	* Injects the context value.
+	*
+	* @param consumerName - The name of the component that is consuming the context. If provided, the component must be
+	*   used within the context provider.
+	* @param defaultValue - The default value to return if the context is not provided.
+	* @returns The context value.
+	*/
+	const useInject = (consumerName, defaultValue) => {
+		const value = inject(key, defaultValue) ?? null;
+		if (consumerName != null && value === null) throw new Error(`\`${consumerName}\` must be used within \`${name}\``);
+		return value;
+	};
+	const useProvide = (...args) => {
+		const value = composable?.(...args) ?? args[0];
+		provide(key, value);
+		return value;
+	};
+	return [useProvide, useInject];
+}
+//#endregion
+//#region src/hooks/use-svg-icon-render.ts
+function useSvgIconRender(SvgIcon) {
+	/**
+	* Svg icon VNode
+	*
+	* @param config
+	*/
+	const SvgIconVNode = (config) => {
+		const { color, fontSize, localIcon } = config;
+		const style = {};
+		if (color) style.color = color;
+		if (fontSize) style.fontSize = `${fontSize}px`;
+		if (!localIcon) return;
+		return () => h(SvgIcon, {
+			localIcon,
+			style
+		});
+	};
+	return { SvgIconVNode };
+}
+//#endregion
+//#region src/hooks/use-table.ts
+function useTable(options) {
+	const { loading, startLoading, endLoading } = useLoading();
+	const { bool: empty, setBool: setEmpty } = useBoolean();
+	const { api, pagination, transform, columns, getColumnChecks, getColumns, onFetched, immediate = true } = options;
+	const data = ref([]);
+	const columnChecks = ref(getColumnChecks(columns()));
+	const $columns = computed(() => getColumns(columns(), columnChecks.value));
+	function reloadColumns() {
+		const currentChecks = columnChecks.value;
+		const checkMap = new Map(currentChecks.map((col) => [col.key, col.checked]));
+		const fixedMap = new Map(currentChecks.map((col) => [col.key, col.fixed]));
+		const defaultChecks = getColumnChecks(columns());
+		const defaultMap = new Map(defaultChecks.map((col) => [col.key, col]));
+		const result = [];
+		const usedKeys = /* @__PURE__ */ new Set();
+		for (const col of currentChecks) {
+			const defaultCol = defaultMap.get(col.key);
+			if (defaultCol) {
+				result.push({
+					...defaultCol,
+					checked: checkMap.get(col.key) ?? defaultCol.checked,
+					fixed: (fixedMap.get(col.key) !== "unFixed" ? fixedMap.get(col.key) : void 0) ?? defaultCol.fixed
+				});
+				usedKeys.add(col.key);
+			}
+		}
+		for (const col of defaultChecks) if (!usedKeys.has(col.key)) result.push(col);
+		columnChecks.value = result;
+	}
+	async function getData() {
+		try {
+			startLoading();
+			const transformed = transform(await api());
+			data.value = getTableData(transformed, pagination);
+			setEmpty(data.value.length === 0);
+			await onFetched?.(transformed);
+		} finally {
+			endLoading();
+		}
+	}
+	if (immediate) getData();
+	return {
+		loading,
+		empty,
+		data,
+		columns: $columns,
+		columnChecks,
+		reloadColumns,
+		getData
+	};
+}
+function getTableData(data, pagination) {
+	if (pagination) return data.data;
+	return data;
+}
+//#endregion
+export { useBoolean, useContext, useCountDown, useLoading, useSvgIconRender, useTable };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './utils/index.js'
+export {}