@fangzhongya/icons 0.0.50 → 0.0.52

package/dist/humpToLine-gLzuzWOm.cjs

@@ -0,0 +1,30 @@
+//#region node_modules/.pnpm/@fangzhongya+utils@0.0.82/node_modules/@fangzhongya/utils/dist/name/humpToLine.js
+/**
+* 驼峰命名转 - 方式
+* @param { string } name 要转换的字符串
+* @returns { string } 转换后字符串
+*/
+function humpToLine(name) {
+	const reg = /(([A-Z])([^A-Z]*))/g;
+	let result;
+	const arr = [];
+	let i = 0;
+	while ((result = reg.exec(name)) !== null) {
+		if (i == 0 && result.index != 0) arr.push(name.substring(0, result.index));
+		i++;
+		arr.push(result[1].toLowerCase());
+	}
+	if (arr.length == 0) return name;
+	else {
+		let a = arr.join("-");
+		a = a.replace(/[-]{2,}/g, "-");
+		return a;
+	}
+}
+//#endregion
+Object.defineProperty(exports, "humpToLine", {
+	enumerable: true,
+	get: function() {
+		return humpToLine;
+	}
+});

package/dist/icon/index.cjs

@@ -1,13 +1,229 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-
-var _chunkU4CNUH3Acjs = require('../chunk-U4CNUH3A.cjs');
-require('../chunk-YW7CKAOG.cjs');
-require('../chunk-3376ZTRC.cjs');
-require('../chunk-IIVF4KK5.cjs');
-require('../chunk-XHXN5JNR.cjs');
-require('../chunk-75ZPJI57.cjs');
-
-
-
-exports.Icon = _chunkU4CNUH3Acjs.Icon; exports.default = _chunkU4CNUH3Acjs.icon_default;
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_config = require("../config.cjs");
+const require_humpToLine = require("../humpToLine-gLzuzWOm.cjs");
+const require_util = require("../util.cjs");
+let vue = require("vue");
+//#region packages/icon/index.ts
+const reg = /<svg([^>]*)>((.|\n|\r|\t)*)<\/svg>/g;
+const reg1 = /<path([^>]*)>((.|\n|\r|\t)*)<\/path>/g;
+const reg2 = /<g([^>]*)>((.|\n|\r|\t)*)<\/g>/g;
+const prefix = require_humpToLine.humpToLine(require_config.defaultPrefix) + "-";
+const className = "icon";
+const directory = "/svg";
+const isImg = (name) => {
+	if (name) {
+		if (name.startsWith("data:") || name.startsWith("/") || name.startsWith("./") || name.startsWith("../") || name.includes("://")) return true;
+	}
+	return false;
+};
+const contStyle = {
+	border: 0,
+	display: "inline-flex",
+	"align-items": "center",
+	"object-fit": "contain",
+	"justify-content": "center",
+	"font-size": "inherit",
+	width: "inherit",
+	height: "inherit"
+};
+const svgStyle = {
+	"--color": "inherit",
+	height: "1em",
+	width: "1em",
+	"line-height": "1em",
+	display: "inline-flex",
+	"justify-content": "center",
+	"align-items": "center",
+	position: "relative",
+	fill: "currentColor",
+	color: "var(--color)",
+	"font-size": "inherit"
+};
+const component = (0, vue.defineComponent)({
+	name: "Icon",
+	props: {
+		/**
+		* @props { String, Object } name= ( )
+		* 图标名称
+		*/
+		name: {
+			type: [String, Object],
+			default: ""
+		},
+		/**
+		* @props { String} iconClass= ( )
+		* 图标样式名称
+		*/
+		iconClass: { type: String },
+		color: { type: String },
+		/**
+		* @props { String} type= ( 'css' | 'id' | 'img' | 'font' | 'str' | 'com' )
+		* 图标类型
+		*/
+		type: { type: String },
+		/**
+		* @props { String, Number } size= ( )
+		* 图标大小
+		*/
+		size: { type: [String, Number] },
+		/**
+		* @props { String } flip='' ( 'horizontal' | 'vertical' | 'both' | '' )
+		* 图标方向
+		*/
+		flip: {
+			type: String,
+			default: ""
+		},
+		/**
+		* @props { Number } rotate=0
+		* 图标旋转角度
+		*/
+		rotate: {
+			type: Number,
+			default: 0
+		},
+		default: { type: String },
+		directory: {
+			type: String,
+			default: directory
+		},
+		prefix: {
+			type: String,
+			default: prefix
+		}
+	},
+	setup(props, { slots }) {
+		const outputType = (0, vue.computed)(() => {
+			if (props.type) return props.type;
+			else {
+				const name = props.name || "";
+				if (typeof name == "object") return "vue";
+				else if (reg.test(name) || reg1.test(name) || reg2.test(name)) return "svg";
+				else if (isImg(name)) return "img";
+				return props.default;
+			}
+		});
+		const setPrefix = (name) => {
+			name = require_humpToLine.humpToLine(name);
+			if (name.startsWith(props.prefix)) return name;
+			else return props.prefix + name;
+		};
+		const transformStyle = (0, vue.computed)(() => {
+			const style = [];
+			if (props.flip !== "") switch (props.flip) {
+				case "horizontal":
+					style.push("rotateY(180deg)");
+					break;
+				case "vertical":
+					style.push("rotateX(180deg)");
+					break;
+				case "both":
+					style.push("rotateX(180deg)", "rotateY(180deg)");
+					break;
+			}
+			if (props.rotate !== 0) style.push(`rotate(${props.rotate % 360}deg)`);
+			const styleObj = { ...svgStyle };
+			styleObj.transform = style.join(" ");
+			if (props.color) styleObj.color = props.color;
+			if (props.size) {
+				let s = props.size;
+				if (typeof s == "number") s = s + "px";
+				styleObj.width = s;
+				styleObj.height = s;
+				styleObj["font-size"] = s;
+			}
+			return styleObj;
+		});
+		const outputName = (0, vue.computed)(() => {
+			const name = props.name;
+			if (typeof name == "string") switch (outputType.value) {
+				case "svg":
+					const rs = reg.exec(name);
+					const rs1 = reg1.exec(name) || reg2.exec(name);
+					if (rs && rs.length > 0) return rs[1];
+					else if (rs1 && rs1.length > 0) return rs1[0];
+					else return name;
+				case "css": return setPrefix(name);
+				case "id": return setPrefix(name);
+				case "font": return setPrefix(name);
+				default: return name;
+			}
+			return name;
+		});
+		const dom = (0, vue.computed)(() => {
+			if (!outputName.value) return;
+			else if (outputType.value === "pub") {
+				const src = props.directory + "/" + outputName.value + ".svg";
+				return (0, vue.h)("img", {
+					class: [props.iconClass],
+					style: contStyle,
+					src
+				});
+			} else if (outputType.value === "css" || outputType.value === "font") return (0, vue.h)("i", {
+				class: [props.iconClass, outputName.value],
+				style: contStyle
+			});
+			else if (outputType.value === "img") return (0, vue.h)("img", {
+				class: [props.iconClass],
+				style: contStyle,
+				src: outputName.value
+			});
+			else if (outputType.value === "svg") {
+				let v;
+				let viewBox;
+				if (typeof outputName.value === "string") {
+					v = outputName.value;
+					viewBox = "0 0 1024 1024";
+				} else {
+					v = outputName.value?.body;
+					viewBox = `${outputName.value?.left || 0} ${outputName.value?.top || 0} ${outputName.value?.width || 1024} ${outputName.value?.height || 1024}`;
+				}
+				return (0, vue.h)("svg", {
+					class: [props.iconClass],
+					style: contStyle,
+					viewBox,
+					xmlns: "http://www.w3.org/2000/svg",
+					innerHTML: v
+				});
+			} else if (outputType.value === "id") return (0, vue.h)("svg", {
+				class: [props.iconClass],
+				style: contStyle,
+				"aria-hidden": true
+			}, (0, vue.h)("use", { "xlink:href": "#" + outputName.value }));
+			else if (outputType.value === "vue") if (typeof outputName.value == "string") return (0, vue.h)((0, vue.resolveComponent)(outputName.value), {
+				class: [props.iconClass],
+				style: contStyle
+			});
+			else return (0, vue.h)(outputName.value, {
+				class: [props.iconClass],
+				style: contStyle
+			});
+			else if (typeof outputName.value == "string") {
+				const m = setPrefix(outputName.value);
+				const v = (0, vue.resolveComponent)(m);
+				if (typeof v == "string") return (0, vue.h)("i", {
+					class: [props.iconClass, m],
+					style: contStyle
+				});
+				else return (0, vue.h)(v, {
+					class: [props.iconClass],
+					style: contStyle
+				});
+			} else return (0, vue.h)(outputName.value, {
+				class: [props.iconClass],
+				style: contStyle
+			});
+		});
+		return () => (0, vue.h)("span", {
+			class: [className],
+			style: transformStyle.value
+		}, Object.keys(slots).length > 0 ? slots : dom.value);
+	}
+});
+const Icon = require_util.withInstall(component, "FangIcon");
+//#endregion
+exports.Icon = Icon;
+exports.default = Icon;

package/dist/icon/index.js

@@ -1,13 +1,223 @@
-import {
-  Icon,
-  icon_default
-} from "../chunk-66OLJGLO.js";
-import "../chunk-E3I6537N.js";
-import "../chunk-BYXBJQAS.js";
-import "../chunk-MOHILOKE.js";
-import "../chunk-DSTHXXIG.js";
-import "../chunk-MLKGABMK.js";
-export {
-  Icon,
-  icon_default as default
+import { defaultPrefix } from "../config.js";
+import { t as humpToLine } from "../humpToLine-Czhat99x.js";
+import { withInstall } from "../util.js";
+import { computed, defineComponent, h, resolveComponent } from "vue";
+//#region packages/icon/index.ts
+const reg = /<svg([^>]*)>((.|\n|\r|\t)*)<\/svg>/g;
+const reg1 = /<path([^>]*)>((.|\n|\r|\t)*)<\/path>/g;
+const reg2 = /<g([^>]*)>((.|\n|\r|\t)*)<\/g>/g;
+const prefix = humpToLine(defaultPrefix) + "-";
+const className = "icon";
+const directory = "/svg";
+const isImg = (name) => {
+	if (name) {
+		if (name.startsWith("data:") || name.startsWith("/") || name.startsWith("./") || name.startsWith("../") || name.includes("://")) return true;
+	}
+	return false;
 };
+const contStyle = {
+	border: 0,
+	display: "inline-flex",
+	"align-items": "center",
+	"object-fit": "contain",
+	"justify-content": "center",
+	"font-size": "inherit",
+	width: "inherit",
+	height: "inherit"
+};
+const svgStyle = {
+	"--color": "inherit",
+	height: "1em",
+	width: "1em",
+	"line-height": "1em",
+	display: "inline-flex",
+	"justify-content": "center",
+	"align-items": "center",
+	position: "relative",
+	fill: "currentColor",
+	color: "var(--color)",
+	"font-size": "inherit"
+};
+const Icon = withInstall(defineComponent({
+	name: "Icon",
+	props: {
+		/**
+		* @props { String, Object } name= ( )
+		* 图标名称
+		*/
+		name: {
+			type: [String, Object],
+			default: ""
+		},
+		/**
+		* @props { String} iconClass= ( )
+		* 图标样式名称
+		*/
+		iconClass: { type: String },
+		color: { type: String },
+		/**
+		* @props { String} type= ( 'css' | 'id' | 'img' | 'font' | 'str' | 'com' )
+		* 图标类型
+		*/
+		type: { type: String },
+		/**
+		* @props { String, Number } size= ( )
+		* 图标大小
+		*/
+		size: { type: [String, Number] },
+		/**
+		* @props { String } flip='' ( 'horizontal' | 'vertical' | 'both' | '' )
+		* 图标方向
+		*/
+		flip: {
+			type: String,
+			default: ""
+		},
+		/**
+		* @props { Number } rotate=0
+		* 图标旋转角度
+		*/
+		rotate: {
+			type: Number,
+			default: 0
+		},
+		default: { type: String },
+		directory: {
+			type: String,
+			default: directory
+		},
+		prefix: {
+			type: String,
+			default: prefix
+		}
+	},
+	setup(props, { slots }) {
+		const outputType = computed(() => {
+			if (props.type) return props.type;
+			else {
+				const name = props.name || "";
+				if (typeof name == "object") return "vue";
+				else if (reg.test(name) || reg1.test(name) || reg2.test(name)) return "svg";
+				else if (isImg(name)) return "img";
+				return props.default;
+			}
+		});
+		const setPrefix = (name) => {
+			name = humpToLine(name);
+			if (name.startsWith(props.prefix)) return name;
+			else return props.prefix + name;
+		};
+		const transformStyle = computed(() => {
+			const style = [];
+			if (props.flip !== "") switch (props.flip) {
+				case "horizontal":
+					style.push("rotateY(180deg)");
+					break;
+				case "vertical":
+					style.push("rotateX(180deg)");
+					break;
+				case "both":
+					style.push("rotateX(180deg)", "rotateY(180deg)");
+					break;
+			}
+			if (props.rotate !== 0) style.push(`rotate(${props.rotate % 360}deg)`);
+			const styleObj = { ...svgStyle };
+			styleObj.transform = style.join(" ");
+			if (props.color) styleObj.color = props.color;
+			if (props.size) {
+				let s = props.size;
+				if (typeof s == "number") s = s + "px";
+				styleObj.width = s;
+				styleObj.height = s;
+				styleObj["font-size"] = s;
+			}
+			return styleObj;
+		});
+		const outputName = computed(() => {
+			const name = props.name;
+			if (typeof name == "string") switch (outputType.value) {
+				case "svg":
+					const rs = reg.exec(name);
+					const rs1 = reg1.exec(name) || reg2.exec(name);
+					if (rs && rs.length > 0) return rs[1];
+					else if (rs1 && rs1.length > 0) return rs1[0];
+					else return name;
+				case "css": return setPrefix(name);
+				case "id": return setPrefix(name);
+				case "font": return setPrefix(name);
+				default: return name;
+			}
+			return name;
+		});
+		const dom = computed(() => {
+			if (!outputName.value) return;
+			else if (outputType.value === "pub") {
+				const src = props.directory + "/" + outputName.value + ".svg";
+				return h("img", {
+					class: [props.iconClass],
+					style: contStyle,
+					src
+				});
+			} else if (outputType.value === "css" || outputType.value === "font") return h("i", {
+				class: [props.iconClass, outputName.value],
+				style: contStyle
+			});
+			else if (outputType.value === "img") return h("img", {
+				class: [props.iconClass],
+				style: contStyle,
+				src: outputName.value
+			});
+			else if (outputType.value === "svg") {
+				let v;
+				let viewBox;
+				if (typeof outputName.value === "string") {
+					v = outputName.value;
+					viewBox = "0 0 1024 1024";
+				} else {
+					v = outputName.value?.body;
+					viewBox = `${outputName.value?.left || 0} ${outputName.value?.top || 0} ${outputName.value?.width || 1024} ${outputName.value?.height || 1024}`;
+				}
+				return h("svg", {
+					class: [props.iconClass],
+					style: contStyle,
+					viewBox,
+					xmlns: "http://www.w3.org/2000/svg",
+					innerHTML: v
+				});
+			} else if (outputType.value === "id") return h("svg", {
+				class: [props.iconClass],
+				style: contStyle,
+				"aria-hidden": true
+			}, h("use", { "xlink:href": "#" + outputName.value }));
+			else if (outputType.value === "vue") if (typeof outputName.value == "string") return h(resolveComponent(outputName.value), {
+				class: [props.iconClass],
+				style: contStyle
+			});
+			else return h(outputName.value, {
+				class: [props.iconClass],
+				style: contStyle
+			});
+			else if (typeof outputName.value == "string") {
+				const m = setPrefix(outputName.value);
+				const v = resolveComponent(m);
+				if (typeof v == "string") return h("i", {
+					class: [props.iconClass, m],
+					style: contStyle
+				});
+				else return h(v, {
+					class: [props.iconClass],
+					style: contStyle
+				});
+			} else return h(outputName.value, {
+				class: [props.iconClass],
+				style: contStyle
+			});
+		});
+		return () => h("span", {
+			class: [className],
+			style: transformStyle.value
+		}, Object.keys(slots).length > 0 ? slots : dom.value);
+	}
+}), "FangIcon");
+//#endregion
+export { Icon, Icon as default };

package/dist/iconify.cjs

@@ -1,16 +1,102 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-
-
-
-var _chunkYJVFENGGcjs = require('./chunk-YJVFENGG.cjs');
-require('./chunk-BXEIRESQ.cjs');
-require('./chunk-3376ZTRC.cjs');
-require('./chunk-IIVF4KK5.cjs');
-require('./chunk-75ZPJI57.cjs');
-
-
-
-
-
-exports.getIconifySVG = _chunkYJVFENGGcjs.getIconifySVG; exports.getViewBox = _chunkYJVFENGGcjs.getViewBox; exports.iconify = _chunkYJVFENGGcjs.iconify; exports.iconifySVG = _chunkYJVFENGGcjs.iconifySVG;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_config = require("./config.cjs");
+const require_lineToLargeHump = require("./lineToLargeHump-BajF216g.cjs");
+let vue = require("vue");
+//#region packages/iconify.ts
+const xmlns = "http://www.w3.org/2000/svg";
+function getViewBox(obj) {
+	return [
+		obj.left || 0,
+		obj.top || 0,
+		obj.width || 1024,
+		obj.height || 1024
+	].join(" ");
+}
+/**
+* 创建SVG图标组件
+* @param obj - 图标配置对象，包含图标的各项属性
+* @returns 返回一个Vue组件实例，用于渲染SVG图标
+*/
+function createSVG(obj) {
+	const viewBox = getViewBox(obj);
+	const name = "icon-" + obj.name;
+	return (0, vue.defineComponent)({
+		name: require_lineToLargeHump.lineToLargeHump(name),
+		props: {},
+		render() {
+			return (0, vue.h)("svg", {
+				xmlns,
+				"aria-hidden": true,
+				id: name,
+				ctype: "hcom",
+				role: "img",
+				class: "iconify iconify-" + obj.prefix,
+				viewBox,
+				innerHTML: obj.body
+			});
+		}
+	});
+}
+/**
+* 将图标配置转换为Vue组件并注册到应用中
+* @param app - Vue应用实例，用于注册组件
+* @param ify - 图标配置对象，包含前缀、尺寸和图标数据
+* @param options - 安装选项，可选参数
+* @param options.prefix - 组件名称前缀，默认使用defaultPrefix
+*/
+const iconify = (app, ify, { prefix = require_config.defaultPrefix } = {}) => {
+	const obj = {
+		prefix: ify.prefix,
+		width: ify.width,
+		height: ify.height
+	};
+	const icons = ify.icons;
+	for (const key of Object.keys(icons)) app.component(prefix + require_lineToLargeHump.lineToLargeHump(key), createSVG({
+		...obj,
+		name: key,
+		...icons[key]
+	}));
+	const aliases = ify.aliases;
+	for (const key of Object.keys(aliases)) {
+		const a = aliases[key];
+		app.component(prefix + require_lineToLargeHump.lineToLargeHump(key), createSVG({
+			...obj,
+			name: key,
+			...icons[a.parent]
+		}));
+	}
+};
+/**
+* 创建SVG图标组件
+* @param obj - 图标配置对象，包含图标的各项属性
+* @returns 返回一个Vue组件实例，用于渲染SVG图标
+*/
+function iconifySVG(obj, name) {
+	const icons = obj.icons;
+	const ap = obj.aliases[name]?.parent;
+	const n = icons[name] ?? (ap ? icons[ap] : void 0);
+	if (n) return createSVG({
+		prefix: obj.prefix,
+		name,
+		width: obj.width,
+		height: obj.height,
+		...n
+	});
+}
+function getIconifySVG(obj, name, str = "") {
+	const icons = obj.icons;
+	const ap = obj.aliases[name]?.parent;
+	const n = icons[name] ?? (ap ? icons[ap] : void 0);
+	if (n) return `<svg ${str} xmlns="${xmlns}" viewBox="${getViewBox({
+		prefix: obj.prefix,
+		name,
+		width: obj.width,
+		height: obj.height,
+		...n
+	})}">${n.body}</svg>`;
+}
+//#endregion
+exports.getIconifySVG = getIconifySVG;
+exports.getViewBox = getViewBox;
+exports.iconify = iconify;
+exports.iconifySVG = iconifySVG;