v-uni-app-ui 1.0.0 → 1.0.4

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

@@ -0,0 +1,98 @@
+import {
+	styleConfig
+} from "@/components/config/style/basic.js"
+export default {
+	size: {
+		'small': {
+			height: styleConfig.components.VInput.height.small
+		},
+		'medium': {
+			height: styleConfig.components.VInput.height.medium
+		},
+		'large': {
+			height: styleConfig.components.VInput.height.large
+		}
+	},
+	default: {
+		borderColor: styleConfig.basic.border.color.primary,
+		borderRadius: styleConfig.basic.borderRadius.default,
+		borderWidth: styleConfig.basic.border.width.primary,
+		borderStyle: styleConfig.basic.border.style.solid,
+		transition: styleConfig.basic.animation.transition.default,
+		display: 'flex',
+		_pseudo: {
+			'--focus': {
+				borderColor: styleConfig.basic.border.color.default,
+				boxShadow: styleConfig.basic.shadow.default
+			},
+		},
+		son: {
+			leftSlot: {
+				default: {
+					minWidth: '0.5%',
+					marginRight: '2%',
+					height: '100%',
+					display: 'flex',
+					alignItems: 'center',
+				}
+			},
+			input: {
+				size: {
+					'small': {
+						fontSize: styleConfig.basic.fontSize.smallText
+					},
+					'medium': {
+						fontSize: styleConfig.basic.fontSize.mediumText
+					},
+					'large': {
+						fontSize: styleConfig.basic.fontSize.largeText
+					}
+				},
+				default: {
+					maxWidth: '95%',
+					width: '-webkit-fill-available',
+					height: '85%',
+					margin: 'auto',
+					color: styleConfig.basic.fontColor.primary
+				}
+			},
+			rightSlot: {
+				default: {
+					minWidth: '2.5%',
+					height: '100%',
+					display: 'flex',
+					alignItems: 'center',
+				}
+			},
+			placeholder: {
+				default: {
+					color: styleConfig.basic.fontColor.placeholder
+				}
+			},
+			icon: {
+				default: {
+					width: '100%',
+					height: '100%',
+					paddingLeft: '10rpx',
+					display: 'flex',
+					alignItems: 'center',
+				}
+			},
+			iconFill: {
+				default: {
+					width: '1px',
+					height: '100%',
+					marginLeft: '10rpx',
+					borderRightColor: styleConfig.basic.border.color.primary,
+					borderRightStyle: styleConfig.basic.border.style.solid,
+					borderRightWidth: styleConfig.basic.border.width.primary
+				},
+				_pseudo: {
+					'--focus': {
+						borderRightColor: styleConfig.basic.border.color.default
+					},
+				},
+			},
+		}
+	}
+}

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

@@ -0,0 +1,622 @@
+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)
+}