@fangzhongya/fang-ui 0.0.14 → 0.0.15

package/dist/directives/drag/index.ts

@@ -0,0 +1,105 @@
+import type { Directive } from 'vue';
+import { getCss } from '@fangzhongya/utils/css/getCss';
+import { setCss } from '@fangzhongya/utils/css/setCss';
+import { getLocus } from '@fangzhongya/utils/dom/getLocus';
+import { pressEvent } from '@fangzhongya/utils/dom/getShiftEvent';
+const interval = 0;
+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) => {
+		obj[key] = Number(getCss(el, key).replace(/[a-z|A-Z]*$/, ''));
+	});
+	return obj;
+}
+
+function setDom(
+	dom: HTMLElement,
+	el: HTMLElement,
+	value: {
+		[key: string]: any;
+	},
+) {
+	if (dom) {
+		let ecs: Positions;
+		let mousedownEvent: SeatEvent;
+		const bodyStyle = document.body.style;
+		const cursor = bodyStyle.cursor;
+		const setValue = (event: SeatEvent) => {
+			const x = event.clientX - mousedownEvent.clientX;
+			const y = event.clientY - mousedownEvent.clientY;
+			setCss(el, {
+				left: ecs.left + x + 'px',
+				top: ecs.top + y + 'px',
+			});
+		};
+		const handleMouseMove = (event: SeatEvent) => {
+			if (typeof value.often == 'undefined' || value.often) {
+				setValue(event);
+			}
+		};
+		const handleMouseUp = (event: SeatEvent) => {
+			setValue(event);
+			if (value.onMouseup) {
+				value.onMouseup(
+					event,
+					mousedownEvent,
+					getPosition(el),
+					getLocus(event, mousedownEvent),
+				);
+			}
+			bodyStyle.cursor = cursor;
+		};
+
+		const mousedown = (e: SeatEvent) => {
+			const eps = dom.getBoundingClientRect();
+			if (
+				e.clientX > eps.right - interval ||
+				e.clientX < eps.left + interval ||
+				e.clientY > eps.bottom - interval ||
+				e.clientY < eps.top + interval
+			) {
+				return;
+			}
+			ecs = getPosition(el);
+			if (value.onMousedown) {
+				const rv = value.onMousedown(e, ecs);
+				if (rv) {
+					ecs = rv;
+				}
+			}
+			mousedownEvent = e;
+			bodyStyle.cursor = 'move';
+			return true;
+		};
+		pressEvent(dom, mousedown, handleMouseMove, handleMouseUp);
+		setCss(dom, 'cursor', 'move');
+	}
+}
+/**
+ *  Drag
+ *  ��ק
+ */
+export default {
+	name: 'Drag',
+	mounted(el, binding) {
+		const value = binding.value;
+		let dom: HTMLElement;
+		if (value.dom) {
+			if (typeof value.dom == 'string') {
+				dom = el.querySelector(value.dom);
+			} else {
+				dom = value.dom;
+			}
+		} else {
+			dom = el;
+		}
+		setDom(dom, el, value);
+	},
+} as Directive;

package/dist/directives/expose/index.ts

@@ -0,0 +1,28 @@
+import type { Directive, ComponentPublicInstance } from 'vue';
+import { hasOwn } from '@fangzhongya/utils/basic/object/hasOwn';
+/**
+ * 解决暴露方法问题
+ * @param {string} value 暴露的对应属性上
+ */
+export default {
+	name: 'expose',
+	created(el, binding, vnode: any) {
+		const exposed = vnode.ctx.exposed;
+		if (exposed) {
+			if (binding.instance) {
+				const instance = binding.instance as any;
+				let value = binding.value;
+				if (value && typeof value == 'string') {
+					instance[value] = exposed;
+				} else {
+					Object.keys(exposed).forEach((key) => {
+						if (!hasOwn(instance, key)) {
+							instance[key] = exposed[key];
+						}
+					});
+				}
+				binding.instance = instance as ComponentPublicInstance;
+			}
+		}
+	},
+} as Directive;

package/dist/directives/index.cjs

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const index = require("./adjust/index.cjs");
-const index$1 = require("./expose/index.cjs");
-const index$2 = require("./drag/index.cjs");
-const index$3 = require("./scroll/index.cjs");
-const index$4 = require("./locus/index.cjs");
+const index$1 = require("./drag/index.cjs");
+const index$2 = require("./locus/index.cjs");
+const index$3 = require("./expose/index.cjs");
+const index$4 = require("../components/loading/src/index.cjs");
 const index$5 = require("./stick/index.cjs");
-const index$6 = require("../components/loading/src/index.cjs");
+const index$6 = require("./scroll/index.cjs");
 exports.Adjust = index.default;
-exports.Expose = index$1.default;
-exports.Drag = index$2.default;
-exports.Scroll = index$3.default;
-exports.Locus = index$4.default;
+exports.Drag = index$1.default;
+exports.Locus = index$2.default;
+exports.Expose = index$3.default;
+exports.VLoading = index$4.vLoading;
 exports.Stick = index$5.default;
-exports.VLoading = index$6.vLoading;
+exports.Scroll = index$6.default;

package/dist/directives/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Adjust } from './adjust';
-export { default as Expose } from './expose';
 export { default as Drag } from './drag';
-export { default as Scroll } from './scroll';
 export { default as Locus } from './locus';
-export { default as Stick } from './stick';
+export { default as Expose } from './expose';
 export { default as VLoading } from './v-loading';
+export { default as Stick } from './stick';
+export { default as Scroll } from './scroll';

package/dist/directives/index.js

@@ -1,16 +1,16 @@
 import { default as default2 } from "./adjust/index.js";
-import { default as default3 } from "./expose/index.js";
-import { default as default4 } from "./drag/index.js";
-import { default as default5 } from "./scroll/index.js";
-import { default as default6 } from "./locus/index.js";
-import { default as default7 } from "./stick/index.js";
+import { default as default3 } from "./drag/index.js";
+import { default as default4 } from "./locus/index.js";
+import { default as default5 } from "./expose/index.js";
 import { vLoading } from "../components/loading/src/index.js";
+import { default as default6 } from "./stick/index.js";
+import { default as default7 } from "./scroll/index.js";
 export {
   default2 as Adjust,
-  default4 as Drag,
-  default3 as Expose,
-  default6 as Locus,
-  default5 as Scroll,
-  default7 as Stick,
+  default3 as Drag,
+  default5 as Expose,
+  default4 as Locus,
+  default7 as Scroll,
+  default6 as Stick,
   vLoading as VLoading
 };

package/dist/directives/index.ts

@@ -0,0 +1,7 @@
+export { default as Adjust } from './adjust';
+export { default as Drag } from './drag';
+export { default as Locus } from './locus';
+export { default as Expose } from './expose';
+export { default as VLoading } from './v-loading';
+export { default as Stick } from './stick';
+export { default as Scroll } from './scroll';

package/dist/directives/locus/index.ts

@@ -0,0 +1,44 @@
+import type { Directive } from 'vue';
+import { getLocus } from '@fangzhongya/utils/dom/getLocus';
+/**
+ *  Locus
+ */
+function setDom(
+	el: HTMLElement,
+	value: {
+		[key: string]: any;
+	},
+) {
+	if (el) {
+		let mousedownEvent: MouseEvent;
+		const handleMouseUp = (event: MouseEvent) => {
+			if (value.callback) {
+				value.callback(
+					getLocus(event, mousedownEvent),
+					event,
+					mousedownEvent,
+				);
+			}
+			document.removeEventListener('mouseup', handleMouseUp);
+		};
+		const mousedown = (e: MouseEvent) => {
+			mousedownEvent = e;
+			//鼠标指针的位置发生变化时
+			document.addEventListener('mouseup', handleMouseUp);
+		};
+		// 在鼠标键点下的时候触发（包括左键和右键）
+		el.addEventListener('mousedown', mousedown);
+	}
+}
+/**
+ *  Locus
+ */
+export default {
+	name: 'Locus',
+	mounted(el, binding) {
+		const value = binding.value;
+		if (value) {
+			setDom(el, value);
+		}
+	},
+} as Directive;

package/dist/directives/scroll/index.ts

@@ -0,0 +1,37 @@
+import type { Directive } from 'vue';
+/**
+ *  scroll
+ */
+export default {
+    name: 'scroll',
+    mounted(el, binding) {
+        let t: NodeJS.Timeout;
+        let tm = () => {
+            clearTimeout(t);
+            t = setTimeout(() => {
+                binding.value();
+            }, 100);
+        };
+        const selector = el.getAttribute(`scroll-selector`);
+        const distance =
+            el.getAttribute(`scroll-distance`) || 10;
+        let dom = el;
+        if (selector) {
+            dom = el.querySelector(selector);
+        }
+        dom.addEventListener(
+            'scroll',
+            function (this: HTMLElement) {
+                let d = this;
+                const s = d.scrollHeight - d.scrollTop;
+                const h = d.clientHeight;
+                if (s - distance < h) {
+                    tm();
+                }
+            },
+            {
+                passive: true,
+            },
+        );
+    },
+} as Directive;

package/dist/directives/stick/index.ts

@@ -0,0 +1,92 @@
+import type { Directive } from 'vue';
+import { setCss } from '@fangzhongya/utils/css/setCss';
+import { pressEvent } from '@fangzhongya/utils/dom/getShiftEvent';
+import { attrValueSort } from '@fangzhongya/utils/basic/object/attrValueSort';
+type SeatEvent = MouseEvent | Touch;
+function setDom(
+	dom: HTMLElement,
+	el: HTMLElement,
+	value: {
+		[key: string]: any;
+	},
+) {
+	if (dom) {
+		const obj: {
+			[key: string]: string;
+		} = {
+			position: 'fixed',
+			display: 'flex',
+			left: 'initial',
+			top: 'initial',
+			right: 'initial',
+			bottom: 'initial',
+		};
+		let key: string = value.direction;
+		obj[key] = '0';
+		obj['flex-direction'] =
+			key == 'left' || key == 'right' ? 'column' : 'row';
+		setCss(el, obj);
+		function getDirection(obj: { [key: string]: number }) {
+			return attrValueSort(
+				obj,
+				value.directions || ['left', 'right', 'top', 'bottom'],
+			)[0];
+		}
+		const bodyStyle = document.body.style;
+		const cursor = bodyStyle.cursor;
+		const setValue = (event: SeatEvent) => {
+			setCss(el, key, 'initial');
+			key = getDirection({
+				left: event.clientX,
+				top: event.clientY,
+				right: window.innerWidth - event.clientX,
+				bottom: window.innerHeight - event.clientY,
+			});
+			setCss(el, {
+				[key]: '0',
+				'flex-direction':
+					key == 'left' || key == 'right' ? 'column' : 'row',
+			});
+		};
+		// 在鼠标键点下的时候触发（包括左键和右键）
+		pressEvent(
+			dom,
+			() => {
+				//鼠标指针的位置发生变化时
+				bodyStyle.cursor = 'move';
+				return true;
+			},
+			(event) => {
+				if (value.often) {
+					setValue(event);
+				}
+			},
+			(event) => {
+				setValue(event);
+				bodyStyle.cursor = cursor;
+			},
+		);
+		setCss(dom, 'cursor', 'move');
+	}
+}
+/**
+ *  Stick
+ *  贴边框
+ */
+export default {
+	name: 'Stick',
+	mounted(el, binding) {
+		const value = binding.value;
+		let dom: HTMLElement;
+		if (value.dom) {
+			if (typeof value.dom == 'string') {
+				dom = el.querySelector(value.dom);
+			} else {
+				dom = value.dom;
+			}
+		} else {
+			dom = el;
+		}
+		setDom(dom, el, value);
+	},
+} as Directive;

package/dist/directives/v-loading/index.ts

@@ -0,0 +1,6 @@
+import type { Directive } from 'vue';
+import { vLoading } from '../../components/loading/index';
+/**
+ *  VLoading
+ */
+export default vLoading as Directive;

package/dist/hooks/cssname/index.cjs

@@ -10,8 +10,11 @@ const com = {
   state: "is-"
 };
 function getName() {
-  const alias = enums.DefaultConfig.alias;
-  const namespace = index.useGlobalConfig("cssname", enums.DefaultConfig.namespace).value;
+  const alias = index.useGlobalConfig("alias", enums.DefaultConfig.alias).value;
+  const namespace = index.useGlobalConfig(
+    "cssname",
+    enums.DefaultConfig.aliasspace
+  ).value;
   if (alias) {
     if (namespace) {
       return namespace + com.common + alias + com.common;
@@ -39,11 +42,32 @@ function getClassName(block, blockSuffix, element, modifier) {
   }
   return cls;
 }
+function getElSpace() {
+  const namespace = index.useGlobalConfig(
+    "namespace",
+    enums.DefaultConfig.namespace
+  ).value;
+  return namespace ? namespace + com.common : "";
+}
 const useCssName = (block) => {
   const z = (blockSuffix = "", element = "", modifier = "") => getClassName(block, blockSuffix, element, modifier);
   const is = (name, state) => {
     return name && state ? `${com.state}${name}` : "";
   };
+  const e = () => getElSpace();
+  const el = (blockSuffix = "", element = "", modifier = "") => {
+    let cls = e() + block;
+    if (blockSuffix) {
+      cls += `${com.common}${blockSuffix}`;
+    }
+    if (element) {
+      cls += `${com.element}${element}`;
+    }
+    if (modifier) {
+      cls += `${com.modifier}${modifier}`;
+    }
+    return cls;
+  };
   const zis = (blockSuffix = "", modifier = "", state) => {
     return state ? z(blockSuffix, "", modifier) : "";
   };
@@ -70,6 +94,8 @@ const useCssName = (block) => {
   return {
     name: getName(),
     z,
+    e,
+    el,
     is,
     zis,
     vo,

package/dist/hooks/cssname/index.d.ts

@@ -1,6 +1,8 @@
 export declare const useCssName: (block: string) => {
     name: string;
     z: (blockSuffix?: string, element?: string, modifier?: string) => string;
+    e: () => string;
+    el: (blockSuffix?: string, element?: string, modifier?: string) => string;
     is: (name: string, state?: boolean) => string;
     zis: (blockSuffix?: string, modifier?: string, state?: boolean) => string;
     vo: (object: Record<string, string>) => Record<string, string>;

package/dist/hooks/cssname/index.js

@@ -8,8 +8,11 @@ const com = {
   state: "is-"
 };
 function getName() {
-  const alias = DefaultConfig.alias;
-  const namespace = useGlobalConfig("cssname", DefaultConfig.namespace).value;
+  const alias = useGlobalConfig("alias", DefaultConfig.alias).value;
+  const namespace = useGlobalConfig(
+    "cssname",
+    DefaultConfig.aliasspace
+  ).value;
   if (alias) {
     if (namespace) {
       return namespace + com.common + alias + com.common;
@@ -37,11 +40,32 @@ function getClassName(block, blockSuffix, element, modifier) {
   }
   return cls;
 }
+function getElSpace() {
+  const namespace = useGlobalConfig(
+    "namespace",
+    DefaultConfig.namespace
+  ).value;
+  return namespace ? namespace + com.common : "";
+}
 const useCssName = (block) => {
   const z = (blockSuffix = "", element = "", modifier = "") => getClassName(block, blockSuffix, element, modifier);
   const is = (name, state) => {
     return name && state ? `${com.state}${name}` : "";
   };
+  const e = () => getElSpace();
+  const el = (blockSuffix = "", element = "", modifier = "") => {
+    let cls = e() + block;
+    if (blockSuffix) {
+      cls += `${com.common}${blockSuffix}`;
+    }
+    if (element) {
+      cls += `${com.element}${element}`;
+    }
+    if (modifier) {
+      cls += `${com.modifier}${modifier}`;
+    }
+    return cls;
+  };
   const zis = (blockSuffix = "", modifier = "", state) => {
     return state ? z(blockSuffix, "", modifier) : "";
   };
@@ -68,6 +92,8 @@ const useCssName = (block) => {
   return {
     name: getName(),
     z,
+    e,
+    el,
     is,
     zis,
     vo,

package/dist/hooks/cssname/index.ts

@@ -0,0 +1,133 @@
+import { useGlobalConfig } from '../global-config';
+import { humpToLine } from '@fangzhongya/utils/name/humpToLine';
+
+import { DefaultConfig } from '../../utils/enums';
+
+const com = {
+	common: '-',
+	element: '__',
+	modifier: '--',
+	state: 'is-',
+};
+
+function getName() {
+	const alias = useGlobalConfig('alias', DefaultConfig.alias).value;
+	const namespace = useGlobalConfig(
+		'cssname',
+		DefaultConfig.aliasspace,
+	).value;
+	if (alias) {
+		if (namespace) {
+			return namespace + com.common + alias + com.common;
+		} else {
+			return alias + com.common;
+		}
+	} else {
+		if (namespace) {
+			return namespace + com.common;
+		} else {
+			return '';
+		}
+	}
+}
+
+function getClassName(
+	// 组件名称
+	block: string,
+	// 子样式名称
+	blockSuffix: string,
+
+	// 下标样式 __
+	element: string,
+
+	// 后缀样式 --
+	modifier: string,
+): string {
+	let cls = getName() + block;
+	if (blockSuffix) {
+		cls += `${com.common}${blockSuffix}`;
+	}
+	if (element) {
+		cls += `${com.element}${element}`;
+	}
+	if (modifier) {
+		cls += `${com.modifier}${modifier}`;
+	}
+	return cls;
+}
+function getElSpace() {
+	const namespace = useGlobalConfig(
+		'namespace',
+		DefaultConfig.namespace,
+	).value;
+	return namespace ? namespace + com.common : '';
+}
+
+export const useCssName = (block: string) => {
+	// 设置组件和子样式
+	const z = (blockSuffix = '', element = '', modifier = '') =>
+		getClassName(block, blockSuffix, element, modifier);
+
+	const is = (name: string, state?: boolean) => {
+		return name && state! ? `${com.state}${name}` : '';
+	};
+
+	const e = () => getElSpace();
+
+	const el = (blockSuffix = '', element = '', modifier = '') => {
+		let cls = e() + block;
+		if (blockSuffix) {
+			cls += `${com.common}${blockSuffix}`;
+		}
+		if (element) {
+			cls += `${com.element}${element}`;
+		}
+		if (modifier) {
+			cls += `${com.modifier}${modifier}`;
+		}
+		return cls;
+	};
+
+	const zis = (blockSuffix = '', modifier = '', state?: boolean) => {
+		return state ? z(blockSuffix, '', modifier) : '';
+	};
+
+	const vo = (object: Record<string, string>) => {
+		const styles: Record<string, string> = {};
+		for (const key in object) {
+			if (object[key]) {
+				styles[`--${getName() + humpToLine(key)}`] = object[key];
+			}
+		}
+		return styles;
+	};
+
+	const vdo = (object: Record<string, string | undefined>) => {
+		const styles: Record<string, string> = {};
+		for (const key in object) {
+			if (object[key]) {
+				styles[
+					`--${getName() + block + com.common + humpToLine(key)}`
+				] = object[key];
+			}
+		}
+		return styles;
+	};
+
+	const vm = (name: string) => `--${getName() + name}`;
+	const vdm = (name: string) => `--${getName() + block + com.common + name}`;
+	return {
+		name: getName(),
+		z,
+		e,
+		el,
+		is,
+		zis,
+		vo,
+		vm,
+		vdo,
+		vdm,
+	};
+};
+
+export type UseCssNameReturn = ReturnType<typeof useCssName>;

package/dist/hooks/default-config/index.ts

@@ -0,0 +1 @@
+export {};