@hairy/vue-lib 1.47.0 → 1.49.0

package/dist/index.mjs

@@ -0,0 +1,387 @@
+import { Transition, computed, defineComponent, h, render } from "vue-demi";
+import CssRender from "css-render";
+import { extendRef, unrefElement, useAsyncState, useElementSize, useEventListener, useOffsetPagination } from "@vueuse/core";
+import debounce from "lodash/debounce";
+import throttle from "lodash/throttle";
+import { computed as computed$1, nextTick, reactive, ref, unref, watch } from "vue";
+import { unit } from "@hairy/utils";
+
+//#region src/components/c-field.ts
+const Field = defineComponent({
+	name: "Field",
+	props: { is: {
+		type: [
+			String,
+			Number,
+			Object
+		],
+		default: ""
+	} },
+	setup(props) {
+		return () => {
+			if (typeof props.is === "string" || typeof props.is === "number") return props.is;
+			return props.is ? h(props.is) : null;
+		};
+	}
+});
+
+//#endregion
+//#region src/components/collapse-transition.ts
+const { c } = CssRender();
+const CollapseTransition = defineComponent({
+	name: "CollapseTransition",
+	setup(_, { slots }) {
+		const on = {
+			onBeforeEnter(el) {
+				el.classList.add("collapse-transition");
+				if (!el.dataset) el.dataset = {};
+				el.dataset.oldPaddingTop = el.style.paddingTop;
+				el.dataset.oldPaddingBottom = el.style.paddingBottom;
+				el.style.height = "0";
+				el.style.paddingTop = "0";
+				el.style.paddingBottom = "0";
+			},
+			onEnter(el) {
+				el.dataset.oldOverflow = el.style.overflow;
+				if (el.scrollHeight !== 0) {
+					el.style.height = `${el.scrollHeight}px`;
+					el.style.paddingTop = el.dataset.oldPaddingTop || "0";
+					el.style.paddingBottom = el.dataset.oldPaddingBottom || "0";
+				} else {
+					el.style.height = "";
+					el.style.paddingTop = el.dataset.oldPaddingTop || "0";
+					el.style.paddingBottom = el.dataset.oldPaddingBottom || "0";
+				}
+				el.style.overflow = "hidden";
+			},
+			onAfterEnter(el) {
+				el.classList.remove("collapse-transition");
+				el.style.height = "";
+				el.style.overflow = el.dataset.oldOverflow || "0";
+			},
+			onBeforeLeave(el) {
+				if (!el.dataset) el.dataset = {};
+				el.dataset.oldPaddingTop = el.style.paddingTop;
+				el.dataset.oldPaddingBottom = el.style.paddingBottom;
+				el.dataset.oldOverflow = el.style.overflow;
+				el.style.height = `${el.scrollHeight}px`;
+				el.style.overflow = "hidden";
+			},
+			onLeave(el) {
+				if (el.scrollHeight !== 0) {
+					el.classList.add("collapse-transition");
+					el.style.transitionProperty = "height";
+					el.style.height = "0";
+					el.style.paddingTop = "0";
+					el.style.paddingBottom = "0";
+				}
+			},
+			onAfterLeave(el) {
+				el.classList.remove("collapse-transition");
+				el.style.height = "";
+				el.style.overflow = el.dataset.oldOverflow || "0";
+				el.style.paddingTop = el.dataset.oldPaddingTop || "0";
+				el.style.paddingBottom = el.dataset.oldPaddingBottom || "0";
+			}
+		};
+		style.mount();
+		return () => h(Transition, on, slots);
+	}
+});
+const style = c(".collapse-transition", { transition: "0.2s height ease-in-out, 0.2s padding-top ease-in-out,0.2s padding-bottom ease-in-out" });
+
+//#endregion
+//#region src/hooks/syncElementScroll/index.ts
+/**
+* Synchronize scrolling between two DOM with the same scrollbar
+* @param fromTarget DOM-A
+* @param toTarget DOM-B
+* @param options
+* @todo optimizes the reuse of useEventListener
+* @todo may have bugs when using wait
+*/
+function syncElementSyncScroll(fromTarget, toTarget, options = {}) {
+	const { left = true, top = true, wait, immediate = true } = options;
+	const debounceScrollLocks = reactive({
+		from: false,
+		to: false
+	});
+	const onChangeLockScrollListener = debounce((type) => {
+		debounceScrollLocks[type] = true;
+	}, 20, {
+		leading: true,
+		trailing: false
+	});
+	const offChangeLockScrollListener = debounce((type) => {
+		debounceScrollLocks[type] = false;
+	}, 20, {
+		leading: false,
+		trailing: true
+	});
+	const syncScroll = (type) => {
+		const positive = type;
+		const opposite = type === "from" ? "to" : "from";
+		const elements = reactive({
+			from: fromTarget,
+			to: toTarget
+		});
+		if (debounceScrollLocks[type]) return;
+		onChangeLockScrollListener(opposite);
+		const aElement = elements[positive];
+		const bElement = elements[opposite];
+		const options = {};
+		if (left) options.left = aElement.scrollLeft;
+		if (top) options.top = aElement.scrollTop;
+		if (!aElement || !bElement) return;
+		bElement?.scroll(options);
+		offChangeLockScrollListener(opposite);
+	};
+	const syncFromTo = () => syncScroll("from");
+	const syncToFrom = () => syncScroll("to");
+	let toStopHandle;
+	let formStopHandle;
+	const stop = () => {
+		toStopHandle?.();
+		formStopHandle?.();
+	};
+	const start = () => {
+		toStopHandle = useEventListener(fromTarget, "scroll", throttle(syncFromTo, wait));
+		formStopHandle = useEventListener(toTarget, "scroll", throttle(syncToFrom, wait));
+	};
+	if (immediate) start();
+	return {
+		stop,
+		start,
+		syncFromTo,
+		syncToFrom
+	};
+}
+
+//#endregion
+//#region src/hooks/syncElementSize/index.ts
+/**
+* Synchronize the width or height of from DOM to the specified to DOM
+* @param fromTarget width and height source element
+* @param toTarget width and height setting elements
+* @param options
+*/
+function syncElementSize(fromTarget, toTarget, options = {}) {
+	const { width: isOnWidth = true, height: isOnHeight = false } = options;
+	const defaultSize = {
+		width: "",
+		height: ""
+	};
+	const fromSize = useElementSize(fromTarget);
+	let widthStopHandle;
+	let heightStopHandle;
+	const sync = (type) => {
+		const sources = [fromSize[type], toTarget];
+		const callback = () => {
+			const element = unrefElement(toTarget);
+			if (!element) return void 0;
+			element.style[type] = unit(fromSize[type].value);
+		};
+		return watch(sources, callback, {
+			immediate: true,
+			...options
+		});
+	};
+	const stop = () => {
+		widthStopHandle?.();
+		heightStopHandle?.();
+		const element = unrefElement(toTarget);
+		element.style.width = defaultSize.width;
+		element.style.height = defaultSize.height;
+	};
+	const start = () => {
+		if (isOnWidth) widthStopHandle = sync("width");
+		if (isOnHeight) heightStopHandle = sync("height");
+	};
+	watch(() => unref(toTarget), () => {
+		const element = unrefElement(toTarget);
+		defaultSize.width = element.style.width;
+		defaultSize.height = element.style.height;
+	});
+	start();
+	return {
+		start,
+		stop
+	};
+}
+
+//#endregion
+//#region src/hooks/useChecked/index.ts
+/**
+* Get the status of checked and customize the value of checked | unchecked
+* @param target
+* @param checked
+* @param unchecked
+*/
+function useChecked(target, checked = true, unchecked = false) {
+	return computed$1({
+		get: () => target.value === unref(checked),
+		set: (_value) => {
+			target.value = _value ? unref(checked) : unref(unchecked);
+		}
+	});
+}
+
+//#endregion
+//#region src/hooks/usePaginationServer/index.ts
+function useServerPagination(options) {
+	const total = ref(Infinity);
+	const pagination = useOffsetPagination({
+		total,
+		...options
+	});
+	const resolveOptions = reactive({
+		currentPage: pagination.currentPage,
+		currentPageSize: pagination.currentPageSize,
+		total
+	});
+	const paginationRef = reactive({
+		currentPage: pagination.currentPage,
+		currentPageSize: pagination.currentPageSize,
+		pageCount: pagination.pageCount,
+		isFirstPage: pagination.isFirstPage,
+		isLastPage: pagination.isLastPage,
+		total
+	});
+	const state = ref([]);
+	const { execute: _execute, isLoading: loading, error } = useAsyncState(async () => {
+		return await options.resolve(resolveOptions);
+	}, []);
+	const execute = debounce(async () => {
+		state.value = await _execute();
+	}, 100);
+	nextTick(() => {
+		watch([pagination.currentPageSize, ...options.sources || []], execute, {
+			immediate: true,
+			...options
+		});
+		watch(pagination.currentPage, (newValue, oldValue) => newValue !== oldValue && execute());
+	});
+	return {
+		state,
+		loading,
+		error,
+		execute,
+		pagination: paginationRef,
+		next: pagination.next,
+		prev: pagination.prev
+	};
+}
+
+//#endregion
+//#region src/hooks/utils/extendSelected.ts
+function extendSelected(array, fieldName) {
+	watch(array, (items) => {
+		for (const item of items) if (typeof item[fieldName] === "undefined") extendRef(item, { [fieldName]: ref(false) });
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+}
+
+//#endregion
+//#region src/hooks/useSelectedMultiple/index.ts
+function useSelectedMultiple(array, options = {}) {
+	const { fieldName = "select", disabled } = options;
+	extendSelected(array, fieldName);
+	/** 当前选中的项列表 */
+	const selected = computed$1(() => unref(array).filter((item) => item[fieldName]));
+	return {
+		selected,
+		isSelectedAll: computed$1({
+			get: () => !selected.value?.length && !unref(array).some((item) => !item[fieldName]),
+			set: (value) => unref(array).forEach((item, index) => {
+				if (!disabled?.(item, index)) item[fieldName] = value;
+			})
+		}),
+		isSelected: computed$1(() => !!unref(array).some((item) => item[fieldName])),
+		isIndeterminate: computed$1(() => {
+			const selectCount = selected.value.length;
+			return selectCount > 0 && selectCount < unref(array).length;
+		})
+	};
+}
+
+//#endregion
+//#region src/hooks/useSelectedSingle/index.ts
+function useSelectedSingle(array, options = {}) {
+	const fieldName = options.fieldName ?? "select";
+	const required = options.required ?? false;
+	extendSelected(array, fieldName);
+	const SELECTED_SINGLE_KEY = "selected_single_key";
+	const isLocked = ref(false);
+	/** 当前是否已经选择 */
+	const isSelected = computed$1(() => !!unref(array).some((item) => item.select));
+	if (required) {
+		const recover = (bool) => {
+			const index = required === true ? 0 : required;
+			if (!bool && unref(array).length > 0) unref(array)[index][fieldName] = true;
+		};
+		watch(isSelected, recover, {
+			flush: "sync",
+			immediate: true
+		});
+	}
+	const itemChange = (neglect) => {
+		if (isLocked.value) return;
+		isLocked.value = true;
+		const _array = unref(array);
+		const _value = !_array[neglect][fieldName];
+		if (required && !_value) _array[neglect][fieldName] = true;
+		_array.forEach((target, index) => {
+			if (neglect === index) return void 0;
+			if (!target[fieldName]) return void 0;
+			target[fieldName] = false;
+		});
+		isLocked.value = false;
+	};
+	const targetEffect = (target, index) => {
+		if (!target[SELECTED_SINGLE_KEY]) return watch(() => target[fieldName], () => itemChange(index), { flush: "sync" });
+		Object.defineProperty(target, SELECTED_SINGLE_KEY, { value: true });
+	};
+	watch(array, () => {
+		unref(array).forEach(targetEffect);
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	return {
+		selected: computed$1(() => unref(array).find((v) => v[fieldName])),
+		isSelected
+	};
+}
+
+//#endregion
+//#region src/utils/index.ts
+/**
+* Directly render the incoming function components
+* @param component
+* @param tag Rendering container (default div)
+*/
+function ehr(component, tag) {
+	const container = document.createElement(tag || "dev");
+	render(h(component), container);
+	return container;
+}
+/**
+* Convert the properties of an object to ref
+* @param data
+* @param prop
+*/
+function propertyToRef(data, prop) {
+	return computed({
+		get() {
+			return data[prop];
+		},
+		set(v) {
+			data[prop] = v;
+		}
+	});
+}
+
+//#endregion
+export { CollapseTransition, Field, ehr, propertyToRef, syncElementSize, syncElementSyncScroll, useChecked, useSelectedMultiple, useSelectedSingle, useServerPagination };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hairy/vue-lib",
   "type": "module",
-  "version": "1.47.0",
+  "version": "1.49.0",
   "description": "Library for vue",
   "author": "Hairyf <wwu710632@gmail.com>",
   "license": "MIT",
@@ -14,13 +14,22 @@
   "bugs": "https://github.com/hairyf/hairylib/issues",
   "keywords": [],
   "sideEffects": false,
-  "main": "./dist/index.js",
-  "publishConfig": {
-    "jsdelivr": "./dist/index.global.js"
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
   },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "files": [
     "dist"
   ],
+  "publishConfig": {
+    "jsdelivr": "./dist/index.iife.js"
+  },
   "peerDependencies": {
     "@vue/composition-api": "^1.0.0-rc.1",
     "vue": "^2.0.0 || >=3.0.0"
@@ -35,26 +44,16 @@
     "css-render": "^0.15.14",
     "lodash": "^4.17.21",
     "vue-demi": "latest",
-    "@hairy/utils": "1.47.0"
+    "@hairy/utils": "1.49.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.17.16",
     "vue": "^3.2.29"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
     "start": "tsx src/index.ts"
   },
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "unpkg": "./dist/index.global.js",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
-    },
-    "./*": "./*"
-  }
+  "unpkg": "./dist/index.iife.js"
 }

package/dist/index.d.ts

@@ -1,175 +0,0 @@
-import * as vue from 'vue';
-import { WatchOptions, Ref, UnwrapRef, ComputedRef } from 'vue';
-import { PropType, VNode, Component, DefineComponent, FunctionalComponent } from 'vue-demi';
-import { MaybeRef, MaybeElementRef, UseOffsetPaginationReturn, UseOffsetPaginationOptions } from '@vueuse/core';
-import { Noop } from '@hairy/utils';
-import { DebouncedFunc } from 'lodash';
-
-declare const Field: vue.DefineComponent<vue.ExtractPropTypes<{
-    is: {
-        type: PropType<string | number | VNode | Component>;
-        default: string;
-    };
-}>, () => string | number | VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    is: {
-        type: PropType<string | number | VNode | Component>;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    is: string | number | VNode<vue.RendererNode, vue.RendererElement, {
-        [key: string]: any;
-    }> | Component;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-
-declare const CollapseTransition: DefineComponent;
-
-interface SyncElementSyncScrollOptions {
-    left?: boolean;
-    top?: boolean;
-    wait?: number;
-    immediate?: boolean;
-}
-/**
- * Synchronize scrolling between two DOM with the same scrollbar
- * @param fromTarget DOM-A
- * @param toTarget DOM-B
- * @param options
- * @todo optimizes the reuse of useEventListener
- * @todo may have bugs when using wait
- */
-declare function syncElementSyncScroll(fromTarget: MaybeRef<EventTarget | null | undefined>, toTarget: MaybeRef<EventTarget | null | undefined>, options?: SyncElementSyncScrollOptions): {
-    stop: () => void;
-    start: () => void;
-    syncFromTo: () => void;
-    syncToFrom: () => void;
-};
-
-interface SyncElementSizeOptions extends WatchOptions {
-    /** Is the width enabled @default true */
-    width?: boolean;
-    /** Is the height enabled @default true */
-    height?: boolean;
-}
-interface SyncElementSizeReturn {
-    start?: Noop;
-    stop?: Noop;
-}
-/**
- * Synchronize the width or height of from DOM to the specified to DOM
- * @param fromTarget width and height source element
- * @param toTarget width and height setting elements
- * @param options
- */
-declare function syncElementSize(fromTarget: MaybeElementRef, toTarget: MaybeElementRef, options?: SyncElementSizeOptions): SyncElementSizeReturn;
-
-type CheckedState = string | boolean | number | symbol;
-/**
- * Get the status of checked and customize the value of checked | unchecked
- * @param target
- * @param checked
- * @param unchecked
- */
-declare function useChecked(target: Ref<any>, checked?: MaybeRef<CheckedState>, unchecked?: MaybeRef<CheckedState>): vue.WritableComputedRef<boolean, boolean>;
-
-type UseServerPaginationResolve = UnwrapRef<Pick<UseOffsetPaginationReturn, 'currentPage' | 'currentPageSize'> & {
-    total: number;
-}>;
-type UseServerPagination = UnwrapRef<Omit<UseOffsetPaginationReturn, 'next' | 'prev'> & {
-    total: Ref<number>;
-}>;
-interface UseServerPaginationOptions<T> extends UseOffsetPaginationOptions, WatchOptions {
-    resolve: (pagination: UseServerPaginationResolve) => T | Promise<T>;
-    /** Monitor the source, trigger reset when the source data changes, default to monitoring page generation */
-    sources?: any[];
-}
-interface UseServerPaginationReturn<T> {
-    state: Ref<T>;
-    loading: Ref<boolean>;
-    error: Ref<any>;
-    pagination: UseServerPagination;
-    next: () => void;
-    prev: () => void;
-    execute: DebouncedFunc<() => Promise<void>>;
-}
-declare function useServerPagination<T extends any[]>(options: UseServerPaginationOptions<T>): UseServerPaginationReturn<T>;
-
-type SelectedMultipleArray = MaybeRef<{
-    [key: string]: any;
-}[]>;
-interface SelectedMultipleOptions<T extends SelectedMultipleArray> {
-    /**
-     * Select Field
-     *
-     * @default 'select'
-     */
-    fieldName?: string;
-    /**
-     * Processing disabled, takes effect when isSelectAll is changed
-     */
-    disabled?: (item: UnwrapRef<T>[number], index: number) => boolean | void;
-}
-interface SelectedMultipleResult<T extends SelectedMultipleArray> {
-    /**
-     * All currently selected items
-     */
-    selected: ComputedRef<UnwrapRef<T>>;
-    /**
-     * Is it currently all selected, Changing it will affect the selection of the list
-     */
-    isSelectedAll: Ref<boolean>;
-    /**
-     * Whether to choose
-     */
-    isSelected: ComputedRef<boolean>;
-    /**
-     * Selected, but not fully selected (usually used for checkbox components)
-     */
-    isIndeterminate: ComputedRef<boolean>;
-}
-declare function useSelectedMultiple<T extends SelectedMultipleArray>(array: T, options?: SelectedMultipleOptions<T>): SelectedMultipleResult<T>;
-
-type SelectedSingleArray = MaybeRef<{
-    [key: string]: any;
-}[]>;
-interface SelectedSingleOptions {
-    /**
-     * Select Field
-     *
-     * @default 'select'
-     */
-    fieldName?: string;
-    /**
-     * Is it mandatory, What is the mandatory option
-     * @default false
-     *
-     */
-    required?: true | number;
-}
-interface SelectedSingleResult<T extends SelectedSingleArray> {
-    /**
-     * 当前选中项
-     */
-    selected: ComputedRef<UnwrapRef<T>[number] | undefined>;
-    /**
-     * 是否已经选择
-     */
-    isSelected: ComputedRef<boolean>;
-}
-declare function useSelectedSingle<T extends SelectedSingleArray>(array: T, options?: SelectedSingleOptions): SelectedSingleResult<T>;
-
-/**
- * Directly render the incoming function components
- * @param component
- * @param tag Rendering container (default div)
- */
-declare function ehr<K extends keyof HTMLElementTagNameMap = 'div'>(component: FunctionalComponent, tag?: K): HTMLElementTagNameMap[K];
-/**
- * Convert the properties of an object to ref
- * @param data
- * @param prop
- */
-declare function propertyToRef<T>(data: T, prop: keyof T): vue.WritableComputedRef<T[keyof T], T[keyof T]>;
-
-export { type CheckedState, CollapseTransition, Field, type SelectedMultipleArray, type SelectedMultipleOptions, type SelectedMultipleResult, type SelectedSingleArray, type SelectedSingleOptions, type SelectedSingleResult, type SyncElementSizeOptions, type SyncElementSizeReturn, type UseServerPagination, type UseServerPaginationOptions, type UseServerPaginationResolve, type UseServerPaginationReturn, ehr, propertyToRef, syncElementSize, syncElementSyncScroll, useChecked, useSelectedMultiple, useSelectedSingle, useServerPagination };