v-uni-app-ui 1.0.4 → 1.0.7

package/components/config/style/components-style.js

@@ -1,622 +0,0 @@
-import {
-	computed,
-	watch,
-	onUnmounted,
-	ref
-} from 'vue'
-import {
-	PropertyMapper
-} from '@/components/config/style/property-mapper.js'
-import {
-	getComponentStyleConfig
-} from '@/components/config/style/component-registry.js'
-import {
-	mergeWithPseudo
-} from "@/components/config/style/pseudo-processor.js"
-
-/**
- * 增强的样式生成工具 - 使用属性映射器（支持父子分离样式）
- */
-export const StyleGenerator = {
-	/**
-	 * 根据组件名称和 props 生成分离的样式对象
-	 */
-	generateSeparatedStyle(componentName, props, customMaps = {}) {
-		const componentConfig = getComponentStyleConfig(componentName)
-		const mapper = new PropertyMapper(componentName, componentConfig, customMaps)
-		const style = mapper.mapAllProperties(props)
-		const separatedStyle = {
-			parent: {
-				...style
-			},
-			son: {}
-		}
-
-		if (componentConfig && componentConfig.default && componentConfig.default.son) {
-			let sonConfig = componentConfig.default.son;
-			if (typeof sonConfig === 'function') {
-				sonConfig = sonConfig(props);
-			}
-
-			if (sonConfig && typeof sonConfig === 'object') {
-				// 处理每个 son 元素的配置
-				for (const [elementName, elementConfig] of Object.entries(sonConfig)) {
-					if (elementConfig && typeof elementConfig === 'object') {
-						// 处理每个子元素的样式
-						separatedStyle.son[elementName] = this.processSonElementStyle(
-							elementConfig,
-							componentName,
-							props,
-							customMaps,
-							elementName
-						);
-					}
-				}
-			}
-
-			// 应用 son 相关的属性映射（保持向后兼容）
-			for (const [propName, propValue] of Object.entries(props)) {
-				if (mapper.shouldSkipProperty(propName)) {
-					continue
-				}
-				if (propName.startsWith('son')) {
-					const mappedStyle = mapper.mapProperty(propName, propValue, props)
-					if (mappedStyle && typeof mappedStyle === 'object') {
-						Object.assign(separatedStyle.son, mappedStyle)
-					}
-				}
-			}
-		}
-
-		return separatedStyle
-	},
-	/**
-	 * 处理子元素样式，应用属性映射
-	 */
-	processSonElementStyle(elementConfig, componentName, props, customMaps, elementName) {
-		const result = {};
-
-		// 1. 先应用默认样式
-		if (elementConfig.default && typeof elementConfig.default === 'object') {
-			Object.assign(result, elementConfig.default);
-		}
-
-		// 2. 根据 props 应用对应的样式
-		for (const [propName, propValue] of Object.entries(props)) {
-			if (propValue === undefined || propValue === null) continue;
-
-			// 检查是否有该属性对应的配置
-			const propConfig = elementConfig[propName];
-			if (propConfig && propConfig[propValue]) {
-				Object.assign(result, propConfig[propValue]);
-			}
-		}
-
-		return result;
-	},
-
-
-	/**
-	 * 获取组件的分离伪类样式配置
-	 */
-	getSeparatedPseudoStyles(componentName, customMaps = {}) {
-		const componentConfig = getComponentStyleConfig(componentName)
-
-		const pseudoStyles = {
-			parent: {},
-			son: {}
-		}
-
-		if (componentConfig && componentConfig.default) {
-			// 获取父容器的伪类配置
-			if (componentConfig.default._pseudo) {
-				pseudoStyles.parent = componentConfig.default._pseudo
-			}
-
-			// 获取子元素的伪类配置
-			if (componentConfig.default.son) {
-				let sonConfig = componentConfig.default.son;
-				if (typeof sonConfig === 'function') {
-					// 如果 son 是函数，需要传入 props 来获取配置
-					sonConfig = sonConfig({});
-				}
-
-				if (sonConfig && typeof sonConfig === 'object') {
-					for (const [elementName, elementConfig] of Object.entries(sonConfig)) {
-						if (elementConfig && elementConfig._pseudo) {
-							pseudoStyles.son[elementName] = elementConfig._pseudo;
-						}
-					}
-				}
-			}
-		}
-
-		return pseudoStyles
-	},
-
-	/**
-	 * 根据伪类状态合并分离样式
-	 */
-	mergeSeparatedPseudo(baseStyles, pseudoStyles, pseudoKey, isActive, componentProps = {}) {
-		if (!isActive) {
-			return {
-				parent: {
-					...baseStyles.parent
-				},
-				son: {
-					...baseStyles.son
-				}
-			};
-		}
-
-		const result = {
-			parent: {
-				...baseStyles.parent
-			},
-			son: {
-				...baseStyles.son
-			}
-		};
-
-		// 合并父容器伪类样式
-		if (pseudoStyles.parent && pseudoStyles.parent[pseudoKey]) {
-			result.parent = this.mergeWithPseudo(
-				result.parent,
-				pseudoStyles.parent,
-				pseudoKey,
-				true,
-				componentProps
-			);
-		}
-
-		// 合并子元素伪类样式
-		if (pseudoStyles.son && Object.keys(pseudoStyles.son).length > 0) {
-			for (const [elementName, elementPseudo] of Object.entries(pseudoStyles.son)) {
-				if (elementPseudo && elementPseudo[pseudoKey]) {
-					// 确保子元素基础样式存在
-					if (!result.son[elementName]) {
-						result.son[elementName] = {};
-					}
-
-					// 合并子元素伪类样式
-					const mergedElementStyle = this.mergeWithPseudo(
-						result.son[elementName],
-						elementPseudo,
-						pseudoKey,
-						true,
-						componentProps
-					);
-
-					result.son[elementName] = mergedElementStyle;
-				}
-			}
-		}
-
-		return result;
-	},
-
-	/**
-	 * 根据伪类状态合并样式，支持关联样式
-	 */
-	mergeWithPseudo(baseStyle, pseudoStyles, pseudoKey, isActive, componentProps = {}) {
-		return mergeWithPseudo(
-			baseStyle,
-			pseudoStyles,
-			pseudoKey,
-			isActive,
-			componentProps
-		);
-	},
-
-
-	/**
-	 * 生成内联样式对象（兼容原有接口）
-	 */
-	generateInlineStyle(componentName, props, customMaps = {}) {
-		const {
-			parent
-		} = this.generateSeparatedStyle(componentName, props, customMaps)
-		return this.toInlineStyle(parent)
-	},
-
-	/**
-	 * 生成分离的内联样式对象
-	 */
-	generateSeparatedInlineStyle(componentName, props, customMaps = {}) {
-		const separatedStyle = this.generateSeparatedStyle(componentName, props, customMaps);
-		const processedSon = {};
-
-		// 处理 son 对象的每个元素
-		for (const [elementName, elementStyle] of Object.entries(separatedStyle.son)) {
-			processedSon[elementName] = this.toInlineStyle(elementStyle);
-		}
-
-		return {
-			parent: this.toInlineStyle(separatedStyle.parent),
-			son: processedSon
-		}
-	},
-
-	/**
-	 * 获取伪类样式配置（兼容原有接口）
-	 */
-	getPseudoStyles(componentName, customMaps = {}) {
-		const {
-			parent
-		} = this.getSeparatedPseudoStyles(componentName, customMaps)
-		return parent
-	},
-
-	/**
-	 * 将伪类样式转换为 SCSS 变量
-	 */
-	pseudoToScssVariables(pseudoStyles) {
-		if (!pseudoStyles || typeof pseudoStyles !== 'object') {
-			return ''
-		}
-
-		let scss = ''
-		for (const [pseudoKey, styles] of Object.entries(pseudoStyles)) {
-			// 转换伪类键名（--hover -> hover）
-			const pseudoName = pseudoKey.replace('--', '')
-			scss += `// ${pseudoName} 伪类样式\n`
-
-			for (const [property, value] of Object.entries(styles)) {
-				// 生成 SCSS 变量名
-				const varName = `--${property.replace(/([A-Z])/g, '-$1').toLowerCase()}`
-				scss += `${varName}: ${value};\n`
-			}
-			scss += '\n'
-		}
-
-		return scss
-	},
-
-	/**
-	 * 生成 SCSS 伪类代码块
-	 */
-	generatePseudoScss(pseudoStyles) {
-		if (!pseudoStyles || typeof pseudoStyles !== 'object') {
-			return ''
-		}
-
-		let scss = ''
-		for (const [pseudoKey, styles] of Object.entries(pseudoStyles)) {
-			// 转换伪类键名（--hover -> :hover）
-			const pseudoClass = pseudoKey.replace('--', ':')
-
-			// 生成 SCSS 代码块
-			scss += `  ${pseudoClass} {\n`
-			for (const [property, value] of Object.entries(styles)) {
-				scss += `    ${property}: ${value};\n`
-			}
-			scss += `  }\n`
-		}
-
-		return scss
-	},
-
-	/**
-	 * 生成 CSS 字符串
-	 */
-	generateCSS(componentName, props, customMaps = {}) {
-		const styleObj = this.generateSeparatedStyle(componentName, props, customMaps)
-		return this.toCSS(styleObj.parent)
-	},
-
-	/**
-	 * 生成类名数组
-	 */
-	generateClassNames(componentName, props) {
-		const classes = []
-
-		// 添加自定义类名
-		if (props.className) {
-			classes.push(props.className)
-		}
-
-		// 遍历属性生成类名
-		for (const [propName, propValue] of Object.entries(props)) {
-			// 跳过不需要生成类名的属性
-			if (this.shouldSkipClassProperty(propName)) {
-				continue
-			}
-
-			// 布尔属性
-			if (typeof propValue === 'boolean' || typeof propValue === 'number' && propValue) {
-				classes.push(`${componentName}--${propName}`)
-			}
-			// 字符串/数字属性
-			else if (typeof propValue === 'string' && propValue.trim()) {
-				classes.push(`${componentName}--${propName}--${propValue}`)
-			}
-		}
-
-		return classes.filter(Boolean)
-	},
-
-	/**
-	 * 检查是否应该跳过生成类名的属性
-	 */
-	shouldSkipClassProperty(propName) {
-		const skipProps = [
-			'id', 'key', 'ref', 'class', 'className', 'style',
-			'modelValue', 'onUpdate:modelValue', 'children',
-			'stabilizationTime', 'intervalUpdateTime', 'degressionTime'
-		]
-
-		// 跳过事件处理器
-		if (propName.startsWith('on') || propName.startsWith('@')) {
-			return true
-		}
-
-		return skipProps.includes(propName)
-	},
-
-	/**
-	 * 将样式对象转换为 CSS 字符串
-	 */
-	toCSS(styleObject) {
-		if (!styleObject || typeof styleObject !== 'object') {
-			return ''
-		}
-
-		return Object.entries(styleObject)
-			.map(([key, value]) => {
-				if (value === undefined || value === null) return ''
-				return `${key}: ${value};`
-			})
-			.filter(Boolean)
-			.join(' ')
-	},
-
-	/**
-	 * 将样式对象转换为内联样式对象（驼峰命名）
-	 */
-	toInlineStyle(styleObject) {
-		if (!styleObject || typeof styleObject !== 'object') {
-			return {}
-		}
-
-		return Object.entries(styleObject).reduce((result, [key, value]) => {
-			if (value === undefined || value === null) return result
-
-			const camelKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
-			result[camelKey] = value
-			return result
-		}, {})
-	},
-
-	/**
-	 * 合并多个样式对象
-	 */
-	mergeStyles(...styleObjects) {
-		return styleObjects.reduce((result, current) => {
-			if (!current) return result
-			return {
-				...result,
-				...current
-			}
-		}, {})
-	}
-}
-
-/**
- * 组件样式钩子（支持父子分离样式）
- */
-export function useComponentStyle(componentName, props, customMaps = {}) {
-	const isHovered = ref(false);
-	const isFocused = ref(false);
-	const isActive = ref(false);
-	const isDisabled = ref(false);
-
-	/* 生成分离的基础样式 */
-	const baseSeparatedStyle = computed(() => {
-		return StyleGenerator.generateSeparatedInlineStyle(componentName, props, customMaps);
-	});
-
-	/* 获取分离的伪类样式配置 */
-	const separatedPseudoStyles = computed(() => {
-		return StyleGenerator.getSeparatedPseudoStyles(componentName, customMaps);
-	});
-
-	/* 根据伪类状态计算最终分离样式 */
-	const separatedStyle = computed(() => {
-		let currentStyles = {
-			parent: {
-				...baseSeparatedStyle.value.parent
-			},
-			son: {
-				...baseSeparatedStyle.value.son
-			}
-		};
-
-		// 按照优先级合并伪类样式
-		if (isDisabled.value) {
-			currentStyles = StyleGenerator.mergeSeparatedPseudo(
-				currentStyles,
-				separatedPseudoStyles.value,
-				'--disabled',
-				true,
-				props
-			);
-		}
-
-		// 2. focus 状态
-		if (isFocused.value) {
-			currentStyles = StyleGenerator.mergeSeparatedPseudo(
-				currentStyles,
-				separatedPseudoStyles.value,
-				'--focus',
-				true,
-				props
-			);
-		}
-
-		// 3. hover 状态（只在非 disabled 时生效）
-		if (isHovered.value && !isDisabled.value) {
-			currentStyles = StyleGenerator.mergeSeparatedPseudo(
-				currentStyles,
-				separatedPseudoStyles.value,
-				'--hover',
-				true,
-				props
-			);
-		}
-
-		// 4. active 状态
-		if (isActive.value) {
-			currentStyles = StyleGenerator.mergeSeparatedPseudo(
-				currentStyles,
-				separatedPseudoStyles.value,
-				'--active',
-				true,
-				props
-			);
-		}
-
-		return currentStyles;
-	});
-
-	/* 兼容原有接口的样式 */
-	const computedStyle = computed(() => {
-		const {
-			son,
-			...rest
-		} = separatedStyle.value.parent;
-		return rest;
-	});
-
-	const sonStyle = computed(() => separatedStyle.value.son);
-
-	/* 生成类名 */
-	const computedClasses = computed(() => {
-		const classes = StyleGenerator.generateClassNames(componentName, props)
-
-		// 添加伪类状态类名
-		if (isHovered.value) classes.push(`${componentName}--hover`);
-		if (isFocused.value) classes.push(`${componentName}--focus`);
-		if (isActive.value) classes.push(`${componentName}--active`);
-		if (isDisabled.value) classes.push(`${componentName}--disabled`);
-
-		return classes
-	})
-
-	/* 生成css样式（字符串） */
-	const computedCSS = computed(() => {
-		return StyleGenerator.toCSS(computedStyle.value)
-	})
-
-	/* 生成 SCSS 变量 */
-	const scssVariables = computed(() => {
-		return StyleGenerator.pseudoToScssVariables(separatedPseudoStyles.value.parent)
-	})
-
-	/* 生成 SCSS 代码块 */
-	const scssCode = computed(() => {
-		return StyleGenerator.generatePseudoScss(separatedPseudoStyles.value.parent)
-	})
-
-	/* 实时监控 props 变化 */
-	const stop = watch(
-		() => props.style,
-		newVal => {
-			// 更新父容器样式
-			Object.assign(baseSeparatedStyle.value.parent, newVal);
-		}, {
-			deep: true,
-			immediate: true
-		}
-	)
-
-	// 监听 sonStyle 变化
-	watch(() => props.sonStyle, (newVal) => {
-		if (newVal) {
-			Object.assign(baseSeparatedStyle.value.son, newVal);
-		}
-	}, {
-		immediate: true
-	});
-
-	// 监听 disabled 状态
-	watch(() => props.disabled, (disabled) => {
-		isDisabled.value = disabled;
-	}, {
-		immediate: true
-	});
-
-	onUnmounted(stop)
-
-	return {
-		// 分离样式
-		separatedStyle,
-		// 父容器样式（兼容原有）
-		style: computedStyle,
-		// 子元素样式
-		sonStyle,
-		classes: computedClasses,
-		css: computedCSS,
-		pseudo: separatedPseudoStyles,
-		scssVariables: scssVariables,
-		scssCode: scssCode,
-		stopWatchStyle: stop,
-
-		// 伪类状态控制函数
-		hover: (state) => {
-			isHovered.value = state;
-		},
-		focus: (state) => {
-			isFocused.value = state;
-		},
-		active: (state) => {
-			isActive.value = state;
-		},
-		disabled: (state) => {
-			isDisabled.value = state;
-		},
-		resetPseudoStates: () => {
-			isHovered.value = false;
-			isFocused.value = false;
-			isActive.value = false;
-			// disabled 状态由 props.disabled 控制，不重置
-		},
-
-		// 当前状态值（用于调试或外部访问）
-		states: {
-			hover: isHovered,
-			focus: isFocused,
-			active: isActive,
-			disabled: isDisabled
-		},
-
-		// 原始生成器方法
-		generateStyle: (customProps = {}) =>
-			StyleGenerator.generateSeparatedStyle(componentName, {
-				...props,
-				...customProps
-			}, customMaps),
-
-		generateCSS: (customProps = {}) =>
-			StyleGenerator.generateCSS(componentName, {
-				...props,
-				...customProps
-			}, customMaps),
-
-		// 伪类样式相关方法
-		getPseudoStyles: () => StyleGenerator.getSeparatedPseudoStyles(componentName, customMaps),
-		pseudoToScssVariables: () => StyleGenerator.pseudoToScssVariables(separatedPseudoStyles.value.parent),
-		generatePseudoScss: () => StyleGenerator.generatePseudoScss(separatedPseudoStyles.value.parent),
-
-		// 工具方法
-		mergeStyles: StyleGenerator.mergeStyles,
-		toCSS: StyleGenerator.toCSS,
-		toInlineStyle: StyleGenerator.toInlineStyle
-	}
-}
-
-/**
- * 快捷方式：为常用组件创建特定的钩子
- */
-export function useButtonStyle(props, customMaps = {}) {
-	return useComponentStyle('button', props, customMaps)
-}