@fangzhongya/fang-ui 0.0.21 → 0.0.22

package/dist/directives/adjust/index.ts

@@ -1,775 +0,0 @@
-import type { Directive } from 'vue';
-import { lineToSmallHump } from '@fangzhongya/utils/name/lineToSmallHump';
-import { getCss } from '@fangzhongya/utils/css/getCss';
-import { splitUpper } from '@fangzhongya/utils/basic/string/splitUpper';
-import { shiftEvent } from '@fangzhongya/utils/dom/getShiftEvent';
-import { setCss } from '@fangzhongya/utils/css/setCss';
-const interval = 8;
-const interval2 = 14;
-const overstep = 1000;
-const unit = 'px';
-type Positions = {
-	[key: string]: number;
-};
-
-type SeatEvent = MouseEvent | Touch;
-
-function getPosition(el?: HTMLElement) {
-	const keys = ['left', 'right', 'top', 'bottom', 'width', 'height'];
-	const obj: Positions = {};
-	keys.forEach((key) => {
-		if (el) {
-			obj[key] = Number(getCss(el, key).replace(/[a-z|A-Z|%]*$/, ''));
-		} else {
-			obj[key] = 0;
-		}
-	});
-	return obj;
-}
-function getNext(el: HTMLElement, paren?: HTMLElement) {
-	if (!paren) {
-		paren = el.parentElement || el;
-	}
-	const cs = paren.childNodes;
-	let index = 0;
-	let k = cs.length;
-	for (; index < cs.length; index++) {
-		const element = cs[index];
-		if (element === el) {
-			k = index;
-		}
-		if (k < index && element.nodeType == 1) {
-			break;
-		}
-	}
-	return cs[index] as HTMLElement;
-}
-function getFront(el: HTMLElement, paren?: HTMLElement) {
-	if (!paren) {
-		paren = el.parentElement || el;
-	}
-	const cs = paren.childNodes;
-	let index = cs.length - 1;
-	let k = -1;
-	for (; index >= 0; index--) {
-		const element = cs[index];
-		if (element === el) {
-			k = index;
-		}
-		if (k > index && element.nodeType == 1) {
-			break;
-		}
-	}
-	return cs[index] as HTMLElement;
-}
-
-function getAdjoin(el: HTMLElement, type: string) {
-	if (type == 'bottom' || type == 'right') {
-		return getNext(el);
-	} else {
-		return getFront(el);
-	}
-}
-
-function getHeight(el?: HTMLElement) {
-	if (el) {
-		const h = getCss(el, 'height');
-		const d = Number(h.replace(/[a-z|A-Z]*$/, '')) || el.clientHeight;
-		return d;
-	} else {
-		return 0;
-	}
-}
-function getWidth(el?: HTMLElement) {
-	if (el) {
-		const w = getCss(el, 'width');
-		const d = Number(w.replace(/[a-z|A-Z]*$/, '')) || el.clientWidth;
-		return d;
-	} else {
-		return 0;
-	}
-}
-
-function getDomHeight() {
-	const dom = document.querySelector('.v-adjust-xux-height');
-	if (dom) {
-		return dom as HTMLElement;
-	} else {
-		const xux = document.createElement('div');
-		xux.className = 'v-adjust-xux-height';
-		xux.style.zIndex = '100000';
-		xux.style.position = 'fixed';
-		xux.style.left = '0';
-		xux.style.right = '0';
-		xux.style.height = '0';
-		xux.style.display = 'none';
-		xux.style.borderBottom = '3px dashed #1d8bfa';
-		document.body.appendChild(xux);
-		return xux;
-	}
-}
-
-function getDomWidth() {
-	const dom = document.querySelector('.v-adjust-xux-width');
-	if (dom) {
-		return dom as HTMLElement;
-	} else {
-		const xux = document.createElement('div');
-		xux.className = 'v-adjust-xux-width';
-		xux.style.zIndex = '100000';
-		xux.style.position = 'fixed';
-		xux.style.top = '0';
-		xux.style.bottom = '0';
-		xux.style.width = '0';
-		xux.style.display = 'none';
-		xux.style.borderLeft = '3px dashed #1d8bfa';
-		document.body.appendChild(xux);
-		return xux;
-	}
-}
-
-/**
- * 光标样式
- * @param type
- * @returns
- */
-function getCursor(type: string) {
-	if (type == 'bottom' || type == 'top') {
-		return 'row-resize';
-	} else if (type == 'right' || type == 'left') {
-		return 'col-resize';
-	} else if (type == 'topRight') {
-		return 'ne-resize';
-	} else if (type == 'topLeft') {
-		return 'nw-resize';
-	} else if (type == 'bottomRight') {
-		return 'se-resize';
-	} else if (type == 'bottomLeft') {
-		return 'sw-resize';
-	} else {
-		return '';
-	}
-}
-type DomObjSet = (a: number, b: number) => void;
-
-type AdjustObjDomObj = {
-	show: () => void;
-	set: DomObjSet;
-};
-
-type AdjustObj = {
-	key: string;
-	el: HTMLElement;
-	param: any;
-	adjoin?: HTMLElement;
-
-	cursor: string;
-
-	domObj: AdjustObjDomObj;
-
-	setMousemove: (
-		mousedownEvent: SeatEvent,
-		rect: DOMRect,
-		event: SeatEvent,
-	) => void;
-
-	setMousedown: (mousedownEvent: SeatEvent) => void;
-
-	setValue: (
-		dom: HTMLElement,
-		z: number,
-		y: number,
-		obj: Positions,
-		acs: Positions,
-	) => void;
-	setMouseup: (
-		mousedownEvent: SeatEvent,
-		event: SeatEvent,
-		obj: Positions,
-		acs: Positions,
-	) => void;
-};
-
-/**
- * 获取计算方法，配置什么位置触发可以拖动
- * @param key
- * @returns
- */
-function getX(key: string, disabled: () => boolean) {
-	const ks = splitUpper(key);
-	if (ks.length == 1) {
-		if (key == 'bottom' || key == 'top') {
-			return (event: SeatEvent, rect: DOMRect) => {
-				if (disabled && disabled()) {
-					return overstep;
-				}
-				return rect[key] - event.pageY;
-			};
-		} else if (key == 'right' || key == 'left') {
-			return (event: SeatEvent, rect: DOMRect) => {
-				if (disabled && disabled()) {
-					return overstep;
-				}
-				return rect[key] - event.pageX;
-			};
-		} else {
-			return (event: SeatEvent, rect: DOMRect) => {
-				if (disabled && disabled()) {
-					return overstep;
-				}
-				return 0;
-			};
-		}
-	} else {
-		const k1 = ks[0] as 'bottom' | 'top';
-		const k2 = ks[1] as 'right' | 'left';
-		return (event: SeatEvent, rect: DOMRect) => {
-			if (disabled && disabled()) {
-				return overstep;
-			}
-			const y = rect[k1] - event.pageY;
-			const x = rect[k2] - event.pageX;
-			if (
-				x < interval2 &&
-				x > 0 - interval2 &&
-				y < interval &&
-				y > 0 - interval2
-			) {
-				return 0;
-			} else {
-				return overstep;
-			}
-		};
-	}
-}
-
-/**
- * 获取设置dom的方法
- * @param key
- * @returns
- */
-function getDomsObj(key: string) {
-	if (key == 'bottom' || key == 'top') {
-		const dom = getDomHeight();
-		return {
-			show: () => {
-				setCss(dom, 'display', 'block');
-			},
-			set: (top: number) => {
-				setCss(dom, 'top', top + unit);
-			},
-		};
-	} else if (key == 'right' || key == 'left') {
-		const dom = getDomWidth();
-		return {
-			show: () => {
-				setCss(dom, 'display', 'block');
-			},
-			set: (top: number) => {
-				setCss(dom, 'left', top + unit);
-			},
-		};
-	} else {
-		const dom1 = getDomWidth();
-		const dom2 = getDomHeight();
-		return {
-			show: () => {
-				setCss(dom1, 'display', 'block');
-				setCss(dom2, 'display', 'block');
-			},
-			set: (left: number, top: number) => {
-				setCss(dom1, 'left', left + unit);
-				setCss(dom2, 'top', top + unit);
-			},
-		};
-	}
-}
-
-/**
- * 移动dom线
- * @param key
- * @param set
- * @returns
- */
-function getMousemove(key: string, set: DomObjSet) {
-	if (key == 'bottom') {
-		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
-			const y = event.clientY - mousedownEvent.clientY + rect.bottom;
-			set(y, 0);
-		};
-	} else if (key == 'top') {
-		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
-			const y = event.clientY - mousedownEvent.clientY + rect.top;
-			set(y, 0);
-		};
-	} else if (key == 'right') {
-		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
-			const y = event.clientX - mousedownEvent.clientX + rect.right;
-			set(y, 0);
-		};
-	} else if (key == 'left') {
-		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
-			const y = event.clientX - mousedownEvent.clientX + rect.left;
-			set(y, 0);
-		};
-	} else if (key == 'topRight') {
-		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
-			const x = event.clientX - mousedownEvent.clientX + rect.right;
-			const y = event.clientY - mousedownEvent.clientY + rect.top;
-			set(x, y);
-		};
-	} else if (key == 'bottomRight') {
-		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
-			const x = event.clientX - mousedownEvent.clientX + rect.right;
-			const y = event.clientY - mousedownEvent.clientY + rect.bottom;
-			set(x, y);
-		};
-	} else if (key == 'topLeft') {
-		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
-			const x = event.clientX - mousedownEvent.clientX + rect.left;
-			const y = event.clientY - mousedownEvent.clientY + rect.top;
-			set(x, y);
-		};
-	} else if (key == 'bottomLeft') {
-		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
-			const x = event.clientX - mousedownEvent.clientX + rect.left;
-			const y = event.clientY - mousedownEvent.clientY + rect.bottom;
-			set(x, y);
-		};
-	} else {
-		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
-			const x = event.clientX - mousedownEvent.clientX + rect.right;
-			const y = event.clientY - mousedownEvent.clientY + rect.top;
-			set(x, y);
-		};
-	}
-}
-
-/**
- * 设置变动值
- * @param key
- * @param adjoin
- * @returns
- */
-function getValue(key: string, adjoin?: HTMLElement, position?: boolean) {
-	if (key == 'bottom') {
-		return (
-			dom: HTMLElement,
-			z: number,
-			y: number,
-			obj: Positions,
-			apo: Positions,
-		) => {
-			const v = obj.height + z;
-			if (v > 0) {
-				setCss(dom, 'height', v + unit);
-				if (adjoin) {
-					setCss(adjoin, 'height', apo.height - z + unit);
-				}
-			}
-		};
-	} else if (key == 'top') {
-		return (
-			dom: HTMLElement,
-			z: number,
-			y: number,
-			obj: Positions,
-			apo: Positions,
-		) => {
-			const v = obj.height + z;
-			if (v > 0) {
-				setCss(dom, 'height', v + unit);
-				if (adjoin) {
-					setCss(adjoin, 'height', apo.height - z + unit);
-				}
-				if (position) {
-					setCss(dom, 'top', obj.top - z + unit);
-				}
-			}
-		};
-	} else if (key == 'right') {
-		return (
-			dom: HTMLElement,
-			z: number,
-			y: number,
-			obj: Positions,
-			apo: Positions,
-		) => {
-			const v = obj.width + z;
-			if (v > 0) {
-				setCss(dom, 'width', v + unit);
-				if (adjoin) {
-					setCss(adjoin, 'width', apo.width - z + unit);
-				}
-			}
-		};
-	} else if (key == 'left') {
-		return (
-			dom: HTMLElement,
-			z: number,
-			y: number,
-			obj: Positions,
-			apo: Positions,
-		) => {
-			const v = obj.width + z;
-			if (v > 0) {
-				setCss(dom, 'width', v + unit);
-				if (adjoin) {
-					setCss(adjoin, 'width', apo.width - z + unit);
-				}
-				if (position) {
-					setCss(dom, 'left', obj.left - z + unit);
-				}
-			}
-		};
-	} else if (key == 'topRight') {
-		return (
-			dom: HTMLElement,
-			x: number,
-			y: number,
-			obj: Positions,
-			apo: Positions,
-		) => {
-			const v = obj.width + x;
-			if (v > 0) {
-				setCss(dom, 'width', v + unit);
-				if (adjoin) {
-					setCss(adjoin, 'width', apo.width - x + unit);
-				}
-			}
-			const n = obj.height + y;
-			if (n > 0) {
-				setCss(dom, 'height', n + unit);
-				if (adjoin) {
-					setCss(adjoin, 'height', apo.height - y + unit);
-				}
-				if (position) {
-					setCss(dom, 'top', obj.top - y + unit);
-				}
-			}
-		};
-	} else if (key == 'bottomRight') {
-		return (
-			dom: HTMLElement,
-			x: number,
-			y: number,
-			obj: Positions,
-			apo: Positions,
-		) => {
-			const v = obj.width + x;
-			if (v > 0) {
-				setCss(dom, 'width', v + unit);
-				if (adjoin) {
-					setCss(adjoin, 'width', apo.width - x + unit);
-				}
-			}
-			const n = obj.height + y;
-			if (n > 0) {
-				setCss(dom, 'height', n + unit);
-				if (adjoin) {
-					setCss(adjoin, 'height', apo.height - y + unit);
-				}
-			}
-		};
-	} else if (key == 'topLeft') {
-		return (
-			dom: HTMLElement,
-			x: number,
-			y: number,
-			obj: Positions,
-			apo: Positions,
-		) => {
-			const v = obj.width + x;
-			if (v > 0) {
-				setCss(dom, 'width', v + unit);
-				if (adjoin) {
-					setCss(adjoin, 'width', apo.width - x + unit);
-				}
-				if (position) {
-					setCss(dom, 'left', obj.left - x + unit);
-				}
-			}
-			const n = obj.height + y;
-			if (n > 0) {
-				setCss(dom, 'height', n + unit);
-				if (adjoin) {
-					setCss(adjoin, 'height', apo.height - y + unit);
-				}
-				if (position) {
-					setCss(dom, 'top', obj.top - y + unit);
-				}
-			}
-		};
-	} else if (key == 'bottomLeft') {
-		return (
-			dom: HTMLElement,
-			x: number,
-			y: number,
-			obj: Positions,
-			apo: Positions,
-		) => {
-			const v = obj.width + x;
-			if (v > 0) {
-				setCss(dom, 'width', v + unit);
-				if (adjoin) {
-					setCss(adjoin, 'width', apo.width - x + unit);
-				}
-				if (position) {
-					setCss(dom, 'left', obj.left - x + unit);
-				}
-			}
-			const n = obj.height + y;
-			if (n > 0) {
-				setCss(dom, 'height', n + unit);
-				if (adjoin) {
-					setCss(adjoin, 'height', apo.height - y + unit);
-				}
-			}
-		};
-	} else {
-		return (
-			dom: HTMLElement,
-			z: number,
-			y: number,
-			obj: Positions,
-			apo: Positions,
-		) => {};
-	}
-}
-
-const types = [
-	'bottom',
-	'top',
-	'right',
-	'left',
-	'topRight',
-	'bottomRight',
-	'topLeft',
-	'bottomLeft',
-];
-
-/**
- * 获取对应对象
- * @param el
- * @param key
- * @param param
- * @returns
- */
-function getAdjustObj(el: HTMLElement, key: string, param: any) {
-	key = lineToSmallHump(key);
-	let obj = {
-		key: key,
-		el: el,
-		param,
-	} as AdjustObj;
-	const noxux = param.noxux;
-	if (param.adjoin) {
-		if (typeof param.adjoin == 'boolean') {
-			obj.adjoin = getAdjoin(el, key);
-		} else if (typeof param.adjoin == 'string') {
-			obj.adjoin = el.parentElement?.querySelector(param.adjoin);
-		} else {
-			obj.adjoin = param.adjoin;
-		}
-	}
-	obj.cursor = getCursor(key);
-
-	obj.domObj = getDomsObj(key);
-
-	obj.setMousemove = getMousemove(key, obj.domObj.set);
-
-	obj.setMousedown = (mousedownEvent: SeatEvent) => {
-		if (key == 'bottom' || key == 'top') {
-			obj.domObj.set(mousedownEvent.clientY, 0);
-		} else if (key == 'right' || key == 'left') {
-			obj.domObj.set(mousedownEvent.clientX, 0);
-		} else {
-			obj.domObj.set(mousedownEvent.clientX, mousedownEvent.clientY);
-		}
-		if (!noxux) {
-			obj.domObj.show();
-		}
-	};
-
-	obj.setValue = getValue(key, obj.adjoin, param.position);
-	obj.setMouseup = (
-		mousedownEvent: SeatEvent,
-		event: SeatEvent,
-		ecs: Positions,
-		acs: Positions,
-	) => {
-		let x = 0;
-		let y = 0;
-		if (key == 'bottom') {
-			x = event.clientY - mousedownEvent.clientY;
-		} else if (key == 'top') {
-			x = mousedownEvent.clientY - event.clientY;
-		} else if (key == 'right') {
-			x = event.clientX - mousedownEvent.clientX;
-		} else if (key == 'left') {
-			x = mousedownEvent.clientX - event.clientX;
-		} else if (key == 'topRight') {
-			y = mousedownEvent.clientY - event.clientY;
-			x = event.clientX - mousedownEvent.clientX;
-		} else if (key == 'bottomRight') {
-			y = event.clientY - mousedownEvent.clientY;
-			x = event.clientX - mousedownEvent.clientX;
-		} else if (key == 'topLeft') {
-			y = mousedownEvent.clientY - event.clientY;
-			x = mousedownEvent.clientX - event.clientX;
-		} else if (key == 'bottomLeft') {
-			y = event.clientY - mousedownEvent.clientY;
-			x = mousedownEvent.clientX - event.clientX;
-		}
-		obj.setValue(el, x, y, ecs, acs);
-	};
-
-	const setX = getX(key, param.getDisabled);
-
-	return (event: SeatEvent, rect: DOMRect): typeof obj | undefined => {
-		const x = setX(event, rect);
-		if (x < interval && x > 0 - interval) {
-			return obj;
-		}
-	};
-}
-
-function getArr(obj: { [key: string]: any }, el: HTMLElement) {
-	const arr = obj.all ? types : Object.keys(obj);
-	return arr
-		.sort((a: string, b: string) => {
-			return b.length - a.length;
-		})
-		.map((key) => {
-			const v = obj.all ? obj.all : obj[key];
-			return getAdjustObj(el, key, v);
-		});
-}
-
-/**
- *  Adjust
- *  改变窗口大小
- */
-export default {
-	name: 'Adjust',
-	mounted(el, binding) {
-		const value = binding.value;
-		const often = value.often;
-		const onChange = value.onChange;
-		delete value.onChange;
-		delete value.often;
-		if (value && Object.keys(value).length > 0) {
-			const arr = getArr(value, el);
-
-			let vobj: AdjustObj;
-
-			const bodyStyle = document.body.style;
-			const cursor = bodyStyle.cursor;
-
-			let status = true;
-			let isCur = false;
-
-			let eps: DOMRect;
-			let ecs: Positions;
-			let acs: Positions;
-
-			function getVobj(e: SeatEvent) {
-				let is = true;
-				for (let index = 0; index < arr.length; index++) {
-					const v = arr[index](e, eps);
-					if (v) {
-						vobj = v;
-						isCur = true;
-						is = false;
-						bodyStyle.cursor = vobj.cursor;
-						return true;
-					}
-				}
-				if (is) {
-					isCur = false;
-					bodyStyle.cursor = cursor;
-					return false;
-				}
-			}
-
-			const mousemove = (e: MouseEvent) => {
-				if (status) {
-					eps = el.getBoundingClientRect();
-					getVobj(e);
-				}
-			};
-			const mouseout = (e: Event) => {
-				if (status) {
-					remove();
-				}
-			};
-
-			let mousedownEvent: SeatEvent;
-
-			const handleMouseMove = (event: SeatEvent) => {
-				vobj.setMousemove(mousedownEvent, eps, event);
-				if (often) {
-					vobj.setMouseup(mousedownEvent, event, ecs, acs);
-				}
-			};
-			const handleMouseUp = (event: SeatEvent) => {
-				if (isCur) {
-					vobj.setMouseup(mousedownEvent, event, ecs, acs);
-					if (onChange && typeof onChange == 'function') {
-						onChange(vobj, {
-							start: mousedownEvent,
-							end: event,
-							startPosit: ecs,
-							endPosit: getPosition(vobj.el),
-						});
-					}
-				}
-				remove();
-			};
-
-			function remove() {
-				bodyStyle.cursor = cursor;
-				status = true;
-				if (isCur) {
-					setCss(getDomHeight(), 'display', 'none');
-					setCss(getDomWidth(), 'display', 'none');
-				}
-				isCur = false;
-			}
-
-			const mousedown = (e: SeatEvent, type: 'touch' | 'mouse') => {
-				if (isCur) {
-					mousedownEvent = e;
-					ecs = getPosition(el);
-					acs = getPosition(vobj.adjoin);
-
-					status = false;
-
-					vobj.setMousedown(e);
-
-					bodyStyle.cursor = vobj.cursor;
-
-					shiftEvent(type, document, handleMouseMove, handleMouseUp);
-				}
-			};
-
-			el.addEventListener('mousemove', mousemove);
-
-			el.addEventListener('mouseout', mouseout);
-
-			el.addEventListener('touchstart', (e: TouchEvent) => {
-				const changedTouches = e.changedTouches[0];
-				eps = el.getBoundingClientRect();
-				const is = getVobj(changedTouches);
-				if (is) {
-					mousedown(changedTouches, 'touch');
-				}
-			});
-			el.addEventListener('mousedown', (e: MouseEvent) => {
-				if (isCur) {
-					mousedown(e, 'mouse');
-				}
-			});
-		}
-	},
-} as Directive;