v-uni-app-ui 1.1.4 → 1.1.6

package/components/config/css/basic.scss

@@ -0,0 +1,19 @@
+.loading-icon {
+	margin: 0 8rpx 0 0;
+	.spinner {
+		width: 20rpx;
+		height: 20rpx;
+		border: 1rpx solid;
+		border-radius: 50%;
+		border-top-color: white;
+		animation: spin 1s ease-in-out infinite;
+	}
+}
+
+
+
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}

package/components/config/interface/basic-type.ts

@@ -0,0 +1,17 @@
+// 基础类型定义
+export type BasicType = 'default' | 'delete' | 'success' | 'info' | 'warning'
+export type BasicSize = 'small' | 'medium' | 'large'
+export type BasicDetailedSize = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'
+export type BasicShape = 'semicircle' | 'square' | 'round'
+export type BasicHorizontallyPosition = 'left' | 'right' | 'center'
+export type BasicVerticalPosition = 'top' | 'bottom' | 'center'
+export type BasicPosition = 'left' | 'right' | 'top' | 'bottom' | 'center'
+
+// 交互类型
+export type InteractionMode = 'hover' | 'active' | 'focus' | 'disabled'
+
+//组件类型定义
+export type ButtonShape = 'default' | 'none' | 'circle'
+export type InputType = 'text' | 'id' | 'safe-password' | 'password' | 'number' | 'digit' | 'numeric' | 'decimal' |
+	'email' | 'phone' | 'url' | 'textarea' | 'name' | 'search' | 'none'
+export type validateTriggerType = 'input' | 'blur' | 'change'

package/components/config/interface/monitor/property-monitor.ts

@@ -0,0 +1,136 @@
+import { watch, onUnmounted, WatchStopHandle, WatchSource, Ref } from 'vue';
+
+type EmitFn = (event: string, ...args: any[]) => void;
+
+interface MonitorOptions<T = any> {
+	deep?: boolean;
+	immediate?: boolean;
+	onChange?: (newValue: T, oldValue: T) => void;
+	emitEvent?: string;
+	lazy?: boolean;
+	enabled?: Ref<boolean>;
+}
+
+interface MonitorInstance extends WatchStopHandle {
+	start: () => void;
+}
+
+interface BaseConfig<T = any> extends MonitorOptions<T> {
+	propertyName: string;
+}
+
+interface PropsConfig<T = any> extends BaseConfig<T> {
+	source?: never; // 明确禁止source
+}
+
+interface SourceConfig<T = any> extends BaseConfig<T> {
+	source: WatchSource<T>;
+}
+
+type ConfigItem<T = any> = PropsConfig<T> | SourceConfig<T>;
+
+function isSourceConfig<T = any>(config: ConfigItem<T>): config is SourceConfig<T> {
+	return 'source' in config && config.source !== undefined;
+}
+
+export function usePropertyMonitor<T = any>(props: Record<string, any>, propertyName: string, emit: EmitFn, options?: MonitorOptions<T>): MonitorInstance;
+
+export function usePropertyMonitor<T = any>(config: SourceConfig<T>, emit: EmitFn): MonitorInstance;
+
+export function usePropertyMonitor<T = any>(configs: ConfigItem<T>[], emit: EmitFn): MonitorInstance;
+
+export function usePropertyMonitor<T = any>(
+	propsOrConfigs: any,
+	propertyNameOrEmit: string | EmitFn,
+	emitOrOptions?: EmitFn | MonitorOptions<T>,
+	options?: MonitorOptions<T>
+): MonitorInstance {
+	// 参数解析
+	const isBatch = Array.isArray(propsOrConfigs);
+	const emitFn = typeof propertyNameOrEmit === 'function' ? propertyNameOrEmit : (emitOrOptions as EmitFn);
+
+	const configs: ConfigItem<T>[] = [];
+
+	if (isBatch) {
+		configs.push(...propsOrConfigs);
+	} else if (typeof propsOrConfigs === 'object' && !('source' in propsOrConfigs)) {
+		// Props模式：提取 propertyName 和 options
+		const propertyName = propertyNameOrEmit as string;
+		const monitorOptions = typeof emitOrOptions === 'function' ? options : (emitOrOptions as MonitorOptions<T>);
+
+		configs.push({
+			propertyName,
+			...(monitorOptions || {})
+		});
+	} else {
+		// 单配置模式
+		configs.push(propsOrConfigs as ConfigItem<T>);
+	}
+
+	let stopHandles: WatchStopHandle[] = [];
+	let started = false;
+
+	const createWatchers = () => {
+		if (stopHandles.length) {
+			stopHandles.forEach((stop) => stop());
+			stopHandles = [];
+		}
+
+		configs.forEach((config) => {
+			const { propertyName, onChange, emitEvent, enabled, ...watchOpts } = config;
+
+			const shouldWatch = enabled ? enabled.value : true;
+			if (!shouldWatch) return;
+
+			const watchSource = isSourceConfig(config) ? config.source : () => (propsOrConfigs as Record<string, any>)[propertyName!];
+
+			const stop = watch(
+				watchSource,
+				(newValue, oldValue) => {
+					onChange?.(newValue, oldValue);
+					emitFn(emitEvent ?? `update:${propertyName}`, newValue);
+				},
+				watchOpts
+			);
+
+			stopHandles.push(stop);
+		});
+	};
+
+	// 监听enabled变化
+	configs.forEach((config) => {
+		if (config.enabled) {
+			watch(
+				config.enabled,
+				() => {
+					if (started) {
+						createWatchers();
+					}
+				},
+				{ immediate: false }
+			);
+		}
+	});
+
+	const start = () => {
+		if (!started) {
+			started = true;
+			createWatchers();
+		}
+	};
+
+	const stop = () => {
+		stopHandles.forEach((handle) => handle());
+		stopHandles = [];
+		started = false;
+	};
+
+	const isLazy = configs.some((c) => c.lazy);
+	if (!isLazy) {
+		start();
+	}
+
+	onUnmounted(stop);
+
+	return Object.assign(stop, { start });
+}

package/components/config/interface/props/basic-props.ts

@@ -0,0 +1,88 @@
+// 简化 BasicPropsDefinition 类型
+type VuePropDefinition = {
+	type: any;
+	default?: any;
+	required?: boolean;
+	validator?: (value: any) => boolean;
+};
+
+/**
+ * 通用组件基础 props 定义
+ * 所有组件都会自动继承这些 props
+ */
+export const BasicProps = {
+	id: {
+		type: String,
+		default: ''
+	},
+	className: {
+		type: String,
+		default: ''
+	},
+	boxStyle: {
+		type: Object,
+		default: () => ({})
+	},
+	style: {
+		type: Object,
+		default: () => ({})
+	},
+	accessibility:{
+		type:Object,
+		default:()=>({})
+	}
+} as const;
+
+// 获取基础属性的键名类型
+type BasicPropsKeys = keyof typeof BasicProps;
+
+/**
+ * 创建扩展基础 props 的验证器
+ */
+export function extendWithBasicProps<T extends Record<string, VuePropDefinition>>(
+	componentProps: T,
+	options: {
+		exclude?: BasicPropsKeys[];
+		override?: Partial<Record<BasicPropsKeys, any>>;
+	} = {}
+): Record<string, VuePropDefinition> {
+	const { exclude = [], override = {} } = options;
+	const mergedProps: Record<string, VuePropDefinition> = {};
+
+	// 添加基础 props
+	Object.entries(BasicProps).forEach(([key, value]) => {
+		if (!exclude.includes(key as BasicPropsKeys)) {
+			const propKey = key as BasicPropsKeys;
+			if (override[propKey] !== undefined) {
+				// 修复：正确处理覆盖值
+				mergedProps[key] = {
+					...value,
+					default: typeof override[propKey] === 'object' && override[propKey] !== null && 'default' in override[propKey] ? override[propKey].default : override[propKey]
+				};
+			} else {
+				mergedProps[key] = value;
+			}
+		}
+	});
+
+	// 添加组件特定 props
+	Object.entries(componentProps).forEach(([key, value]) => {
+		mergedProps[key] = value;
+	});
+
+	return mergedProps;
+}
+
+/**
+ * 从 props 配置中提取类型
+ */
+export type ExtractPropTypes<T> = {
+	[K in keyof T]: T[K] extends { type: any } ? (T[K] extends { default?: infer D } ? (D extends () => infer R ? R : D) : any) : any;
+};
+
+/**
+ * 创建 Vue 兼容的 props 定义
+ */
+export function createVueProps<T extends Record<string, VuePropDefinition>>(props: T): T {
+	return props;
+}

package/components/config/interface/props/components/button-props.ts

@@ -0,0 +1,85 @@
+import type { PropType } from 'vue';
+import { extendWithBasicProps, ExtractPropTypes } from '@/components/config/interface/props/basic-props';
+import { BasicType, ButtonShape, BasicSize } from '@/components/config/interface/basic-type.js';
+import { Validators } from '@/components/utils/validator';
+import { PropTools } from '@/components/config/interface/props/props-tools';
+/**
+ * 按钮组件 props 定义
+ */
+const buttonProps = extendWithBasicProps(
+	{
+		//使用PropTools简写
+		shape: PropTools.enum<ButtonShape>(['default', 'none', 'circle'], 'default', 'buttonShape'),
+		type: {
+			type: String as PropType<BasicType>,
+			default: 'default',
+			validator: Validators.enum(['default', 'success', 'warning', 'info', 'delete'], 'buttonType')
+		},
+		size: PropTools.enum<BasicSize>(['small', 'medium', 'large'], 'medium', 'buttonSize'),
+		disabled: PropTools.boolean(false),
+		loading: PropTools.boolean(false),
+		plain: PropTools.boolean(false),
+		text: PropTools.boolean(false),
+		stabilizationTime: {
+			type: Number,
+			default: 0,
+			validator: Validators.numberRange(0, 1_000_000, 'Stabilization time must be between 0 and 1,000,000 ms.')
+		},
+		debounceTime: {
+			type: Number,
+			default: 0,
+			validator: Validators.numberRange(0, 1_000_000, 'The anti-shake waiting time must be between 0 and 1,000,000 milliseconds.')
+		},
+		intervalUpdateTime: {
+			type: Number,
+			default: 1000,
+			validator: Validators.numberRange(100, 100_000, 'Interval must be between 100 and 100,000 ms.')
+		},
+		degressionTime: {
+			type: Number,
+			default: 1000,
+			validator: Validators.numberRange(100, 10_000, 'Degression time must be between 100 and 10,000 ms.')
+		},
+		resetOnClick: PropTools.boolean(false),
+		hoverStartTime: {
+			type: Number,
+			default: 20,
+			validator: Validators.numberRange(10, 10_000, 'hover start time must be between 10 and 10,000 ms.')
+		},
+		hoverStayTime: {
+			type: Number,
+			default: 70,
+			validator: Validators.numberRange(10, 10_000, 'hover stay time must be between 10 and 10,000 ms.')
+		},
+		//组合校验
+		// customProp: {
+		// 	type: String,
+		// 	default: '',
+		// 	validator: Validators.combine(
+		// 		Validators.required('This field is required.'),
+		// 		Validators.length(3, 20, 'Length must be 3-20 characters.'),
+		// 		Validators.pattern(/^[a-zA-Z0-9_]+$/, 'Only letters, numbers and underscore are allowed.')
+		// 	)
+		// }
+	},
+	{
+		override: {
+			id: {
+				default: 'VButton'
+			},
+			className: {
+				default: 'v-button'
+			},
+			boxStyle: {
+				default: {
+					width: 'auto',
+					height: '50rpx',
+					padding: '14rpx 2rpx'
+				}
+			},
+			accessibility: {}
+		}
+	}
+);
+export default buttonProps;
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>;

package/components/config/interface/props/components/input-props.ts

@@ -0,0 +1,97 @@
+import { extendWithBasicProps, ExtractPropTypes } from '@/components/config/interface/props/basic-props';
+import {
+	InputType,
+	BasicSize,
+	BasicHorizontallyPosition,
+	validateTriggerType
+} from '@/components/config/interface/basic-type';
+import { Validators } from '@/components/utils/validator';
+import { PropTools } from '@/components/config/interface/props/props-tools';
+
+/**
+ * 文本框组件 props 定义
+ */
+const inputProps = extendWithBasicProps(
+	{
+		value: PropTools.string(),
+		size: PropTools.enum<BasicSize>(['small', 'medium', 'large'], 'medium', 'inputSize'),
+		placeholder: PropTools.array(),
+		placeholderStyle: PropTools.object(),
+		placeholderTimeNumber: {
+			type: Number,
+			default: 0,
+			validator: Validators.numberRange(
+				0,
+				1_000_000,
+				'The prompt switching time must be between 0 and 1,000,000 milliseconds.'
+			)
+		},
+		maxlength: {
+			type: Number,
+			default: 150,
+			validator: Validators.numberRange(-1, 1_0000_0000, 'maxlength must be between -1 and 100,000,000.')
+		},
+		disabled: PropTools.boolean(false),
+		type: PropTools.enum<InputType>(
+			[
+				'text',
+				'id',
+				'safe-password',
+				'password',
+				'number',
+				'digit',
+				'numeric',
+				'decimal',
+				'email',
+				'phone',
+				'url',
+				'textarea',
+				'name',
+				'search',
+				'none'
+			],
+			'text',
+			'inputType'
+		),
+		isWordCounter: PropTools.boolean(false),
+		textPosition: PropTools.enum<BasicHorizontallyPosition>(
+			['left', 'right', 'center'],
+			'left',
+			'inputTextPosition'
+		),
+		focus: PropTools.boolean(false),
+		validators: PropTools.string(),
+		validateTrigger: PropTools.enum<validateTriggerType>(['input', 'blur', 'change'], 'input', 'validateTrigger'),
+		selectionStart: {
+			type: Number,
+			default: -1,
+			validator: Validators.numberRange(-1, 10_000, 'selection start must be between -1 and 10,000 milliseconds.')
+		},
+		isIcon: PropTools.boolean(false),
+		selectionEnd: {
+			type: Number,
+			default: -1,
+			validator: Validators.numberRange(-1, 10_000, 'selection end must be between -1 and 10,000 milliseconds.')
+		},
+		randomNumber: PropTools.boolean(false),
+		cursorColor: PropTools.string(),
+		autoBlur: PropTools.boolean(false),
+		cursorSpacing: PropTools.number(0),
+		autocomplete: PropTools.boolean(true),
+	},
+	{
+		override: {
+			id: {
+				default: 'VInput'
+			},
+			className: {
+				default: 'v-input'
+			},
+			boxStyle: {
+				default: {}
+			}
+		}
+	}
+);
+export default inputProps;
+export type inputProps = ExtractPropTypes<typeof inputProps>;

package/components/config/interface/props/components/uni-input-props.ts

@@ -0,0 +1,30 @@
+import { ExtractPropTypes } from '@/components/config/interface/props/basic-props';
+import { PropTools } from '@/components/config/interface/props/props-tools';
+import { Validators } from '@/components/utils/validator';
+import { BasicSize, BasicHorizontallyPosition } from '@/components/config/interface/basic-type';
+
+/**
+ * uni-input 包装组件 props 定义
+ */
+const uniInputProps = {
+	value: PropTools.string(),
+	type: PropTools.string('text'),
+	size: PropTools.enum<BasicSize>(['small', 'medium', 'large'], 'medium', 'inputSize'),
+	placeholder: PropTools.string(),
+	fontStyle: PropTools.object(),
+	placeholderStyle: PropTools.object(),
+	placeholderClass: PropTools.string(),
+	disabled: PropTools.boolean(false),
+	maxlength: {
+		type: Number,
+		default: -1,
+		validator: Validators.numberRange(-1, 1_0000_0000, 'maxlength must be between -1 and 100,000,000.')
+	},
+	autocomplete: PropTools.boolean(false),
+	focus: PropTools.boolean(false),
+	textPosition: PropTools.enum<BasicHorizontallyPosition>(['left', 'right', 'center'], 'left', 'inputTextPosition'),
+	isAppPlus: PropTools.boolean(false)
+};
+
+export default uniInputProps;
+export type UniInputProps = ExtractPropTypes<typeof uniInputProps>;

package/components/config/interface/props/props-tools.ts

@@ -0,0 +1,64 @@
+import { Validators } from '@/components/utils/validator';
+
+// 简化类型定义
+type SimplePropDefinition = {
+	type: any;
+	default?: any;
+	required?: boolean;
+	validator?: (value: any) => boolean;
+};
+
+// 简化的属性创建函数
+export function createProp<T>(type: any, defaultValue?: T, validator?: (value: any) => boolean): SimplePropDefinition {
+	const prop: SimplePropDefinition = { type };
+
+	if (defaultValue !== undefined) {
+		prop.default = defaultValue;
+	}
+
+	if (validator) {
+		prop.validator = validator;
+	}
+
+	return prop;
+}
+
+// 快捷方法
+export const PropTools = {
+	// 基础类型
+	string: (defaultValue: string = '', validator?: (value: string) => boolean) => createProp(String, defaultValue, validator),
+
+	number: (defaultValue: number = 0, validator?: (value: number) => boolean) => createProp(Number, defaultValue, validator),
+
+	boolean: (defaultValue: boolean = false) => createProp(Boolean, defaultValue),
+
+	array: <T>(defaultValue: T[] = []) => createProp(Array, () => defaultValue),
+
+	object: <T extends Record<string, any>>(defaultValue: T = {} as T) => createProp(Object, () => defaultValue),
+
+	function: <T extends Function>(defaultValue?: T) => createProp(Function, defaultValue),
+
+	// 枚举类型
+	enum: <T extends string>(allowedValues: readonly T[], defaultValue: T, displayName?: string) =>
+		createProp(String, defaultValue, Validators.enum(allowedValues, `${displayName || '属性'}必须是以下值之一: ${allowedValues.join(', ')}`)),
+
+	// 任意类型
+	any: (defaultValue: any = null) => createProp(null, defaultValue),
+
+	// 常用属性
+	id: () => createProp(String, ''),
+	className: () => createProp(String, ''),
+	style: () => createProp(Object, () => ({})),
+
+	// 带验证的属性
+	stringLength: (defaultValue: string = '', min?: number, max?: number) => createProp(String, defaultValue, Validators.length(min, max)),
+
+	numberRange: (defaultValue: number, min: number, max: number) => createProp(Number, defaultValue, Validators.numberRange(min, max)),
+
+	// 格式验证
+	email: (defaultValue: string = '') => createProp(String, defaultValue, Validators.email()),
+
+	phoneNumber: (defaultValue: string = '') => createProp(String, defaultValue, Validators.phoneNumber()),
+
+	url: (defaultValue: string = '') => createProp(String, defaultValue, Validators.url())
+};