@zfqh/uview-x 0.0.5 → 0.0.7

package/components/uv-form/uv-form.vue

@@ -1,254 +1,252 @@
 <template>
-	<view
-		class="uv-form"
-		:class="[p.customClass]"
-		:style="[$uv.addStyle(p.customStyle)]"
-	>
-		<slot />
-	</view>
+  <view class="uv-form" :class="[p.customClass]" :style="[addStyle(p.customStyle)]">
+    <slot />
+  </view>
 </template>
 
 <script setup lang="ts">
-	import { nextTick, provide, reactive, watch } from 'vue'
-	import { $uv } from '../../utils'
-	import props from './props'
-	import { useI18n } from '../../hooks'
-	import { buildFormValidationMessages } from '../../locales'
-
-	import Schema from './valid.ts'
-
-	// 去除警告信息
-	Schema.warning = function () {}
-
-	// 内置校验文案（locales/ 的 uv.form.*），用户 rules[].message 仍优先
-	const { t } = useI18n({ useScope: 'global' })
-
-	defineOptions({
-		name: 'uv-form',
-		// #ifdef UNI-APP-X
-		styleIsolation: 'app-and-page',
-		// #endif
-		virtualHost: true,
-	})
-
-	/**
-	 * Form 表单
-	 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
-	 * @tutorial https://www.uvui.cn/components/form.html
-	 * @property {Object}						model			当前form的需要验证字段的集合
-	 * @property {Object | Function | Array}	rules			验证规则
-	 * @property {String}						errorType		错误的提示方式，见上方说明 ( 默认 message )
-	 * @property {Boolean}						borderBottom	是否显示表单域的下划线边框   ( 默认 true ）
-	 * @property {String}						labelPosition	表单域提示文字的位置，left-左侧，top-上方 ( 默认 'left' ）
-	 * @property {String | Number}				labelWidth		提示文字的宽度，单位px  ( 默认 45 ）
-	 * @property {String}						labelAlign		lable字体的对齐方式   ( 默认 'left' ）
-	 * @property {Object}						labelStyle		lable的样式，对象形式
-	 * @property {Object}						customStyle		定义需要用到的外部样式
-	 * @example <uv-form labelPosition="left" :model="model1" :rules="rules" ref="form1"></uv-form>
-	 */
-	const p = defineProps(props)
-
-	// 原始model快照，用于resetFields方法重置表单时使用
-	let originalModel: any = null
-	// 校验规则（函数形式的规则由 setRules 手动赋值，避免小程序过滤函数）
-	let formRules: any = {}
-
-	// 表单上下文：provide/inject 替代 $parent/children 链
-	// 表单上下文 key（与 uv-form-item/uv-input 内 inject 的字符串保持一致）
-	const formContext: any = reactive({
-		model: p.model,
-		originalModel: null,
-		errorType: p.errorType,
-		borderBottom: p.borderBottom,
-		labelPosition: p.labelPosition,
-		labelWidth: p.labelWidth,
-		labelAlign: p.labelAlign,
-		labelStyle: p.labelStyle,
-		// 已注册的 uv-form-item 句柄
-		items: []
-	})
-
-	// 手动设置校验的规则，如果规则中有函数的话，微信小程序中会过滤掉，所以只能手动调用设置规则
-	const setRules = (rules: any) => {
-		// 判断是否有规则
-		if (!rules || Object.keys(rules).length === 0) return
-		if (process.env.NODE_ENV === 'development' && Object.keys(formContext.model || {}).length === 0) {
-			$uv.error('设置rules，model必须设置！如果已经设置，请刷新页面。')
-			return
-		}
-		formRules = rules
-	}
-
-	// 注册/注销表单子项
-	const register = (handle: any) => {
-		formContext.items.push(handle)
-	}
-	const unregister = (handle: any) => {
-		const index = formContext.items.indexOf(handle)
-		if (index > -1) formContext.items.splice(index, 1)
-	}
-
-	// 重置model为初始值的快照
-	const resetModel = () => {
-		// 历遍所有uv-form-item，根据其prop属性，还原model的原始快照
-		formContext.items.forEach((child: any) => {
-			const prop = child.prop
-			const value = $uv.getProperty(originalModel, prop)
-			$uv.setProperty(formContext.model, prop, value)
-		})
-	}
-
-	// 清空所有uv-form-item组件的内容，本质上是调用了uv-form-item组件中的resetField()方法
-	const resetFields = () => {
-		resetModel()
-	}
-
-	// 清空校验结果
-	const clearValidate = (props?: any) => {
-		const propsArr = ([] as any[]).concat(props)
-		formContext.items.forEach((child: any) => {
-			// 如果uv-form-item的prop在props数组中，则清除对应的校验结果信息
-			if (propsArr[0] === undefined || propsArr.includes(child.prop)) {
-				child.setMessage(null)
-			}
-		})
-	}
-
-	// 对部分表单字段进行校验
-	const validateField = (value: any, callback?: any, event: string | null = null) => {
-		// nextTick是必须的，否则model的变更，可能会延后于此方法的执行
-		nextTick(() => {
-			// 校验错误信息，返回给回调方法，用于存放所有form-item的错误信息
-			const errorsRes: any[] = []
-			// 如果为字符串，转为数组
-			const values = ([] as any[]).concat(value)
-			// 历遍所有子form-item
-			formContext.items.forEach((child: any) => {
-				// 用于存放form-item的错误信息
-				const childErrors: any[] = []
-				if (!values.includes(child.prop)) return
-				// 获取对应的属性，通过类似'a.b.c'的形式
-				const propertyVal = $uv.getProperty(formContext.model, child.prop)
-				// 属性链数组
-				const propertyChain = String(child.prop).split('.')
-				const propertyName = propertyChain[propertyChain.length - 1]
-				const rule = formRules[child.prop]
-				// 如果不存在对应的规则，直接返回，否则校验器会报错
-				if (!rule) return
-				// rule规则可为数组形式，也可为对象形式，此处拼接成为数组
-				const rules = ([] as any[]).concat(rule)
-				// 对rules数组进行校验
-				for (let i = 0; i < rules.length; i++) {
-					const ruleItem = rules[i]
-					// 将uv-form-item的触发器转为数组形式
-					const trigger = ([] as any[]).concat(ruleItem && ruleItem.trigger)
-					// 如果是有传入触发事件，但是此form-item却没有配置此触发器的话，不执行校验操作
-					if (event && !trigger.includes(event)) continue
-					// 实例化校验对象，传入构造规则
-					const validator = new Schema({
-						[propertyName]: ruleItem
-					})
-					// 使用内置 i18n 校验文案（显式 ruleItem.message 仍优先）
-					validator.messages(buildFormValidationMessages((key: string) => String(t(key))))
-					validator.validate(
-						{
-							[propertyName]: propertyVal
-						},
-						(errors: any) => {
-							if ($uv.test.array(errors)) {
-								errorsRes.push(...errors)
-								childErrors.push(...errors)
-							}
-							nextTick(() => {
-								child.setMessage(childErrors[0] && childErrors[0].message ? childErrors[0].message : null)
-							})
-						}
-					)
-				}
-			})
-			// 执行回调函数
-			if (typeof callback === 'function') callback(errorsRes)
-		})
-	}
-
-	// 校验全部数据
-	const validate = () => {
-		return new Promise((resolve, reject) => {
-			nextTick(() => {
-				// 获取所有form-item的prop，交给validateField方法进行校验
-				const formItemProps = formContext.items.map((item: any) => item.prop)
-				validateField(formItemProps, (errors: any[]) => {
-					if (errors.length) {
-						// 如果错误提示方式为toast，则进行提示
-						if (formContext.errorType === 'toast') $uv.toast(errors[0].message)
-						reject(errors)
-					} else {
-						resolve(true)
-					}
-				})
-			})
-		})
-	}
-
-	formContext.register = register
-	formContext.unregister = unregister
-	formContext.setRules = setRules
-	formContext.resetFields = resetFields
-	formContext.resetModel = resetModel
-	formContext.clearValidate = clearValidate
-	formContext.validateField = validateField
-	formContext.validate = validate
-
-	provide('uv-form-context', formContext)
-
-	// 监听规则的变化
-	watch(
-		() => p.rules,
-		(rules: any) => {
-			setRules(rules)
-		},
-		{ immediate: true }
-	)
-
-	// 监听model的初始值作为重置表单的快照
-	watch(
-		() => p.model,
-		(model: any) => {
-			formContext.model = model
-			if (!originalModel) {
-				originalModel = $uv.deepClone(model)
-				formContext.originalModel = originalModel
-			}
-		},
-		{ immediate: true }
-	)
-
-	// 监听属性的变化，供 uv-form-item 响应式读取
-	watch(
-		() => [p.errorType, p.borderBottom, p.labelPosition, p.labelWidth, p.labelAlign, p.labelStyle],
-		() => {
-			formContext.errorType = p.errorType
-			formContext.borderBottom = p.borderBottom
-			formContext.labelPosition = p.labelPosition
-			formContext.labelWidth = p.labelWidth
-			formContext.labelAlign = p.labelAlign
-			formContext.labelStyle = p.labelStyle
-		}
-	)
-
-	defineExpose({
-		setRules,
-		resetFields,
-		resetModel,
-		clearValidate,
-		validateField,
-		validate
-	})
+import { nextTick, provide, reactive, watch } from 'vue';
+import { addStyle, error, getProperty, setProperty, toast } from '../../utils/function'
+import { deepClone } from '../../utils/merge'
+import { array as isArray } from '../../utils/test'
+import props from './props';
+import { useI18n } from '../../hooks';
+import { buildFormValidationMessages } from '../../utils/locale';
+
+import Schema from './valid.ts';
+
+// 去除警告信息
+Schema.warning = function () {};
+
+// 内置校验文案（locales/ 的 uv.form.*），用户 rules[].message 仍优先
+const { t } = useI18n({ useScope: 'global' });
+
+defineOptions({
+  name: 'uv-form',
+  // #ifdef UNI-APP-X
+  styleIsolation: 'app-and-page',
+  // #endif
+  virtualHost: true,
+});
+
+/**
+ * Form 表单
+ * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
+ * @tutorial https://www.uvui.cn/components/form.html
+ * @property {Object}						model			当前form的需要验证字段的集合
+ * @property {Object | Function | Array}	rules			验证规则
+ * @property {String}						errorType		错误的提示方式，见上方说明 ( 默认 message )
+ * @property {Boolean}						borderBottom	是否显示表单域的下划线边框   ( 默认 true ）
+ * @property {String}						labelPosition	表单域提示文字的位置，left-左侧，top-上方 ( 默认 'left' ）
+ * @property {String | Number}				labelWidth		提示文字的宽度，单位px  ( 默认 45 ）
+ * @property {String}						labelAlign		lable字体的对齐方式   ( 默认 'left' ）
+ * @property {Object}						labelStyle		lable的样式，对象形式
+ * @property {Object}						customStyle		定义需要用到的外部样式
+ * @example <uv-form labelPosition="left" :model="model1" :rules="rules" ref="form1"></uv-form>
+ */
+const p = defineProps(props);
+
+// 原始model快照，用于resetFields方法重置表单时使用
+let originalModel: any = null;
+// 校验规则（函数形式的规则由 setRules 手动赋值，避免小程序过滤函数）
+let formRules: any = {};
+
+// 表单上下文：provide/inject 替代 $parent/children 链
+// 表单上下文 key（与 uv-form-item/uv-input 内 inject 的字符串保持一致）
+const formContext: any = reactive({
+  model: p.model,
+  originalModel: null,
+  errorType: p.errorType,
+  borderBottom: p.borderBottom,
+  labelPosition: p.labelPosition,
+  labelWidth: p.labelWidth,
+  labelAlign: p.labelAlign,
+  labelStyle: p.labelStyle,
+  // 已注册的 uv-form-item 句柄
+  items: [],
+});
+
+// 手动设置校验的规则，如果规则中有函数的话，微信小程序中会过滤掉，所以只能手动调用设置规则
+const setRules = (rules: any) => {
+  // 判断是否有规则
+  if (!rules || Object.keys(rules).length === 0) return;
+  if (process.env.NODE_ENV === 'development' && Object.keys(formContext.model || {}).length === 0) {
+    error('设置rules，model必须设置！如果已经设置，请刷新页面。');
+    return;
+  }
+  formRules = rules;
+};
+
+// 注册/注销表单子项
+const register = (handle: any) => {
+  formContext.items.push(handle);
+};
+const unregister = (handle: any) => {
+  const index = formContext.items.indexOf(handle);
+  if (index > -1) formContext.items.splice(index, 1);
+};
+
+// 重置model为初始值的快照
+const resetModel = () => {
+  // 历遍所有uv-form-item，根据其prop属性，还原model的原始快照
+  formContext.items.forEach((child: any) => {
+    const prop = child.prop;
+    const value = getProperty(originalModel, prop);
+    setProperty(formContext.model, prop, value);
+  });
+};
+
+// 清空所有uv-form-item组件的内容，本质上是调用了uv-form-item组件中的resetField()方法
+const resetFields = () => {
+  resetModel();
+};
+
+// 清空校验结果
+const clearValidate = (props?: any) => {
+  const propsArr = ([] as any[]).concat(props);
+  formContext.items.forEach((child: any) => {
+    // 如果uv-form-item的prop在props数组中，则清除对应的校验结果信息
+    if (propsArr[0] === undefined || propsArr.includes(child.prop)) {
+      child.setMessage(null);
+    }
+  });
+};
+
+// 对部分表单字段进行校验
+const validateField = (value: any, callback?: any, event: string | null = null) => {
+  // nextTick是必须的，否则model的变更，可能会延后于此方法的执行
+  nextTick(() => {
+    // 校验错误信息，返回给回调方法，用于存放所有form-item的错误信息
+    const errorsRes: any[] = [];
+    // 如果为字符串，转为数组
+    const values = ([] as any[]).concat(value);
+    // 历遍所有子form-item
+    formContext.items.forEach((child: any) => {
+      // 用于存放form-item的错误信息
+      const childErrors: any[] = [];
+      if (!values.includes(child.prop)) return;
+      // 获取对应的属性，通过类似'a.b.c'的形式
+      const propertyVal = getProperty(formContext.model, child.prop);
+      // 属性链数组
+      const propertyChain = String(child.prop).split('.');
+      const propertyName = propertyChain[propertyChain.length - 1];
+      const rule = formRules[child.prop];
+      // 如果不存在对应的规则，直接返回，否则校验器会报错
+      if (!rule) return;
+      // rule规则可为数组形式，也可为对象形式，此处拼接成为数组
+      const rules = ([] as any[]).concat(rule);
+      // 对rules数组进行校验
+      for (let i = 0; i < rules.length; i++) {
+        const ruleItem = rules[i];
+        // 将uv-form-item的触发器转为数组形式
+        const trigger = ([] as any[]).concat(ruleItem && ruleItem.trigger);
+        // 如果是有传入触发事件，但是此form-item却没有配置此触发器的话，不执行校验操作
+        if (event && !trigger.includes(event)) continue;
+        // 实例化校验对象，传入构造规则
+        const validator = new Schema({
+          [propertyName]: ruleItem,
+        });
+        // 使用内置 i18n 校验文案（显式 ruleItem.message 仍优先）
+        validator.messages(buildFormValidationMessages((key: string) => String(t(key))));
+        validator.validate(
+          {
+            [propertyName]: propertyVal,
+          },
+          (errors: any) => {
+            if (isArray(errors)) {
+              errorsRes.push(...errors);
+              childErrors.push(...errors);
+            }
+            nextTick(() => {
+              child.setMessage(childErrors[0] && childErrors[0].message ? childErrors[0].message : null);
+            });
+          },
+        );
+      }
+    });
+    // 执行回调函数
+    if (typeof callback === 'function') callback(errorsRes);
+  });
+};
+
+// 校验全部数据
+const validate = () => {
+  return new Promise((resolve, reject) => {
+    nextTick(() => {
+      // 获取所有form-item的prop，交给validateField方法进行校验
+      const formItemProps = formContext.items.map((item: any) => item.prop);
+      validateField(formItemProps, (errors: any[]) => {
+        if (errors.length) {
+          // 如果错误提示方式为toast，则进行提示
+          if (formContext.errorType === 'toast') toast(errors[0].message);
+          reject(errors);
+        } else {
+          resolve(true);
+        }
+      });
+    });
+  });
+};
+
+formContext.register = register;
+formContext.unregister = unregister;
+formContext.setRules = setRules;
+formContext.resetFields = resetFields;
+formContext.resetModel = resetModel;
+formContext.clearValidate = clearValidate;
+formContext.validateField = validateField;
+formContext.validate = validate;
+
+provide('uv-form-context', formContext);
+
+// 监听规则的变化
+watch(
+  () => p.rules,
+  (rules: any) => {
+    setRules(rules);
+  },
+  { immediate: true },
+);
+
+// 监听model的初始值作为重置表单的快照
+watch(
+  () => p.model,
+  (model: any) => {
+    formContext.model = model;
+    if (!originalModel) {
+      originalModel = deepClone(model);
+      formContext.originalModel = originalModel;
+    }
+  },
+  { immediate: true },
+);
+
+// 监听属性的变化，供 uv-form-item 响应式读取
+watch(
+  () => [p.errorType, p.borderBottom, p.labelPosition, p.labelWidth, p.labelAlign, p.labelStyle],
+  () => {
+    formContext.errorType = p.errorType;
+    formContext.borderBottom = p.borderBottom;
+    formContext.labelPosition = p.labelPosition;
+    formContext.labelWidth = p.labelWidth;
+    formContext.labelAlign = p.labelAlign;
+    formContext.labelStyle = p.labelStyle;
+  },
+);
+
+defineExpose({
+  setRules,
+  resetFields,
+  resetModel,
+  clearValidate,
+  validateField,
+  validate,
+});
 </script>
 
 <style lang="scss">
-	.uv-form {
-		display: flex;
-		flex-direction: column;
-	}
+.uv-form {
+  display: flex;
+  flex-direction: column;
+}
 </style>

package/components/uv-form-item/uv-form-item.vue

@@ -69,7 +69,8 @@
 
 <script setup lang="ts">
 	import { computed, inject, onUnmounted, provide, reactive, ref, watch } from 'vue'
-	import { $uv } from '../../utils'
+	import { addStyle, addUnit, error, getProperty, setProperty } from '../../utils/function'
+	import { deepMerge } from '../../utils/merge'
 	import props from './props'
 	import UvIcon from '../uv-icon/uv-icon.vue'
 	import UvTransition from '../uv-transition/uv-transition.vue'
@@ -120,7 +121,7 @@
 	if (formContext) {
 		formContext.register(handle)
 	} else {
-		$uv.error('uv-form-item需要结合uv-form组件使用')
+		error('uv-form-item需要结合uv-form组件使用')
 	}
 
 	watch(
@@ -168,16 +169,16 @@
 
 	const bodyStyle = computed(() => {
 		// 与旧版保持一致：自定义样式在前，flexDirection 在后覆盖
-		const customStyle = $uv.addStyle(p.customStyle) || {}
+		const customStyle = addStyle(p.customStyle) || {}
 		const style: any = {
 			flexDirection: parentData.value.labelPosition === 'left' ? 'row' : 'column'
 		}
-		return $uv.deepMerge(customStyle, style)
+		return deepMerge(customStyle, style)
 	})
 
 	const leftStyle = computed(() => {
 		const style: any = {
-			width: $uv.addUnit(parentData.value.labelWidth),
+			width: addUnit(parentData.value.labelWidth),
 			marginBottom: parentData.value.labelPosition === 'left' ? 0 : '5px'
 		}
 		return style
@@ -192,12 +193,12 @@
 						? 'center'
 						: 'flex-end'
 		}
-		return $uv.deepMerge($uv.addStyle(parentData.value.labelStyle), style)
+		return deepMerge(addStyle(parentData.value.labelStyle), style)
 	})
 
 	const messageStyle = computed(() => {
 		const style: any = {
-			marginLeft: $uv.addUnit(parentData.value.labelPosition === 'top' ? 0 : parentData.value.labelWidth)
+			marginLeft: addUnit(parentData.value.labelPosition === 'top' ? 0 : parentData.value.labelWidth)
 		}
 		return style
 	})
@@ -211,9 +212,9 @@
 	const resetField = () => {
 		if (!formContext) return
 		// 找到原始值
-		const value = $uv.getProperty(formContext.originalModel, p.prop)
+		const value = getProperty(formContext.originalModel, p.prop)
 		// 将uv-form的model的prop属性链还原原始值
-		$uv.setProperty(formContext.model, p.prop, value)
+		setProperty(formContext.model, p.prop, value)
 		// 移除校验结果
 		message.value = null
 	}

package/components/uv-icon/uv-icon.vue

@@ -5,13 +5,13 @@
       class="uv-icon__img"
       :src="p.name"
       :mode="p.imgMode"
-      :style="[imgStyle, $uv.addStyle(p.customStyle)]"
+      :style="[imgStyle, addStyle(p.customStyle)]"
     ></image>
     <text
       v-else
       class="uv-icon__icon"
       :class="uClasses"
-      :style="[iconStyle, $uv.addStyle(p.customStyle)]"
+      :style="[iconStyle, addStyle(p.customStyle)]"
       :hover-class="p.hoverClass"
       >{{ icon }}</text
     >
@@ -20,11 +20,11 @@
       class="uv-icon__label"
       :style="{
         color: p.labelColor,
-        fontSize: $uv.addUnit(p.labelSize),
-        marginLeft: p.labelPos === 'right' ? $uv.addUnit(p.space) : 0,
-        marginTop: p.labelPos === 'bottom' ? $uv.addUnit(p.space) : 0,
-        marginRight: p.labelPos === 'left' ? $uv.addUnit(p.space) : 0,
-        marginBottom: p.labelPos === 'top' ? $uv.addUnit(p.space) : 0,
+        fontSize: addUnit(p.labelSize),
+        marginLeft: p.labelPos === 'right' ? addUnit(p.space) : 0,
+        marginTop: p.labelPos === 'bottom' ? addUnit(p.space) : 0,
+        marginRight: p.labelPos === 'left' ? addUnit(p.space) : 0,
+        marginBottom: p.labelPos === 'top' ? addUnit(p.space) : 0,
       }"
       >{{ p.label }}</text
     >
@@ -33,7 +33,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { $uv } from '../../utils';
+import { addStyle, addUnit } from '../../utils/function'
 import props from './props';
 import { preventEvent } from '../../utils/compat';
 
@@ -111,10 +111,10 @@ const uClasses = computed(() => {
 
 const iconStyle = computed(() => {
   const style: any = {
-    fontSize: $uv.addUnit(p.size),
-    lineHeight: $uv.addUnit(p.size),
+    fontSize: addUnit(p.size),
+    lineHeight: addUnit(p.size),
     fontWeight: p.bold ? 'bold' : 'normal',
-    top: $uv.addUnit(p.top),
+    top: addUnit(p.top),
   };
   if (p.color && !colorType.includes(p.color)) {
     style.color = p.color;
@@ -129,8 +129,8 @@ const iconStyle = computed(() => {
 
 const imgStyle = computed(() => {
   const style: any = {};
-  style.width = p.width ? $uv.addUnit(p.width) : $uv.addUnit(p.size);
-  style.height = p.height ? $uv.addUnit(p.height) : $uv.addUnit(p.size);
+  style.width = p.width ? addUnit(p.width) : addUnit(p.size);
+  style.height = p.height ? addUnit(p.height) : addUnit(p.size);
   return style;
 });