hy-app 0.4.15 → 0.5.0

package/components/hy-form/hy-form.vue

@@ -1,260 +1,220 @@
 <template>
-  <view class="hy-form">
-    <slot></slot>
-  </view>
+    <view class="hy-form">
+        <slot></slot>
+    </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-form",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-form',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { provide, reactive, ref, toRefs } from "vue";
-import type { PropType } from "vue";
-import type { FormItemRule } from "./typing";
-import { clearVal, isArray } from "../../libs";
+import { provide, reactive, ref, toRefs } from 'vue'
+import { clearVal, isArray } from '../../libs'
+import formProps from './props'
+import type { IFormEmits } from './typing'
 
 /**
  * 表单组件父组件，需要搭配hy-form-item
  * @displayName hy-form
  */
-defineOptions({});
+defineOptions({})
 
-const props = defineProps({
-  /** 表单数据对象 */
-  model: Object as PropType<AnyObject>,
-  /** 表单校验规则 */
-  rules: Object as PropType<FormItemRule>,
-  /** 表单底部边框 */
-  border: {
-    type: Boolean,
-    default: false,
-  },
-  /** label标签的宽度，单位rpx */
-  labelWidth: {
-    type: String,
-    default: "auto",
-  },
-  /**
-   * 标签位置
-   * @values left,top
-   * */
-  labelPosition: {
-    type: String as PropType<HyApp.LabelPosition>,
-    default: "left",
-  },
-  /**
-   * 标签位置
-   * @values left,center,right
-   * */
-  labelAlign: {
-    type: String as PropType<HyApp.ColumnCenterType>,
-    default: "left",
-  },
-});
-
-const emit = defineEmits<{
-  submit: [data: Record<string, any>];
-  validate: [valid: boolean, errors: Record<string, string>];
-}>();
+const props = defineProps(formProps)
+const emit = defineEmits<IFormEmits>()
 
 // 表单数据
-const formData = reactive(props.model || {});
-const formItems = ref<any[]>([]);
-const errors = reactive<Record<string, string>>({});
+const formData = reactive(props.model || {})
+const formItems = ref<any[]>([])
+const errors = reactive<Record<string, string>>({})
 
 // 表单上下文
 const formContext = {
-  ...toRefs(props),
-  formData,
-  errors,
-  addFormItem: (item: any) => {
-    formItems.value.push(item);
-  },
-  removeFormItem: (item: any) => {
-    const index = formItems.value.indexOf(item);
-    if (index > -1) {
-      formItems.value.splice(index, 1);
-    }
-  },
-  validateField: (field: string, value: any, trigger?: "blur" | "change") => {
-    const fieldRules = props.rules?.[field];
-    if (!fieldRules) return true;
-
-    const rules = isArray(fieldRules) ? fieldRules : [fieldRules];
-    let isValid = true;
-    let errorMessage = "";
-
-    for (const rule of rules) {
-      // 检查触发时机
-      if (
-        (trigger && !rule.trigger) ||
-        (trigger && rule.trigger && !rule.trigger.includes(trigger))
-      ) {
-        continue;
-      }
-
-      // 必填校验
-      if (rule.required && (!value || value === "")) {
-        errorMessage = rule.message || `${field} 是必填项`;
-        isValid = false;
-        break;
-      }
-
-      // 长度校验
-      if (rule.min && String(value).length < rule.min) {
-        errorMessage =
-          rule.message || `${field} 长度不能少于 ${rule.min} 个字符`;
-        isValid = false;
-        break;
-      }
-
-      if (rule.max && String(value).length > rule.max) {
-        errorMessage =
-          rule.message || `${field} 长度不能超过 ${rule.max} 个字符`;
-        isValid = false;
-        break;
-      }
-
-      // 类型校验
-      if (rule.type === "phone") {
-        const phoneRegex = /^1[3-9]\d{9}$/;
-        if (!phoneRegex.test(String(value))) {
-          errorMessage = rule.message || "请输入正确的手机号";
-          isValid = false;
-          break;
+    ...toRefs(props),
+    formData,
+    errors,
+    addFormItem: (item: any) => {
+        formItems.value.push(item)
+    },
+    removeFormItem: (item: any) => {
+        const index = formItems.value.indexOf(item)
+        if (index > -1) {
+            formItems.value.splice(index, 1)
         }
-      }
-
-      if (rule.type === "email") {
-        const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
-        if (!emailRegex.test(String(value))) {
-          errorMessage = rule.message || "请输入正确的邮箱格式";
-          isValid = false;
-          break;
+    },
+    validateField: (field: string, value: any, trigger?: 'blur' | 'change') => {
+        const fieldRules = props.rules?.[field]
+        if (!fieldRules) return true
+
+        const rules = isArray(fieldRules) ? fieldRules : [fieldRules]
+        let isValid = true
+        let errorMessage = ''
+
+        for (const rule of rules) {
+            // 检查触发时机
+            if (
+                (trigger && !rule.trigger) ||
+                (trigger && rule.trigger && !rule.trigger.includes(trigger))
+            ) {
+                continue
+            }
+
+            // 必填校验
+            if (rule.required && (!value || value === '')) {
+                errorMessage = rule.message || `${field} 是必填项`
+                isValid = false
+                break
+            }
+
+            // 长度校验
+            if (rule.min && String(value).length < rule.min) {
+                errorMessage = rule.message || `${field} 长度不能少于 ${rule.min} 个字符`
+                isValid = false
+                break
+            }
+
+            if (rule.max && String(value).length > rule.max) {
+                errorMessage = rule.message || `${field} 长度不能超过 ${rule.max} 个字符`
+                isValid = false
+                break
+            }
+
+            // 类型校验
+            if (rule.type === 'phone') {
+                const phoneRegex = /^1[3-9]\d{9}$/
+                if (!phoneRegex.test(String(value))) {
+                    errorMessage = rule.message || '请输入正确的手机号'
+                    isValid = false
+                    break
+                }
+            }
+
+            if (rule.type === 'email') {
+                const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/
+                if (!emailRegex.test(String(value))) {
+                    errorMessage = rule.message || '请输入正确的邮箱格式'
+                    isValid = false
+                    break
+                }
+            }
+
+            if (rule.type === 'password') {
+                const passwordRegex =
+                    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,}$/
+                if (!passwordRegex.test(String(value))) {
+                    errorMessage = rule.message || '密码至少8个字符，包含大小写字母、数字和特殊符号'
+                    isValid = false
+                    break
+                }
+            }
+
+            // 自定义校验
+            if (rule.validator) {
+                const result = rule.validator(value)
+                if (result === false || typeof result === 'string') {
+                    errorMessage =
+                        typeof result === 'string' ? result : rule.message || `${field} 校验失败`
+                    isValid = false
+                    break
+                }
+            }
         }
-      }
 
-      if (rule.type === "password") {
-        const passwordRegex =
-          /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,}$/;
-        if (!passwordRegex.test(String(value))) {
-          errorMessage =
-            rule.message || "密码至少8个字符，包含大小写字母、数字和特殊符号";
-          isValid = false;
-          break;
+        if (isValid) {
+            delete errors[field]
+        } else {
+            errors[field] = errorMessage
         }
-      }
 
-      // 自定义校验
-      if (rule.validator) {
-        const result = rule.validator(value);
-        if (result === false || typeof result === "string") {
-          errorMessage =
-            typeof result === "string"
-              ? result
-              : rule.message || `${field} 校验失败`;
-          isValid = false;
-          break;
-        }
-      }
-    }
-
-    if (isValid) {
-      delete errors[field];
-    } else {
-      errors[field] = errorMessage;
+        return isValid
+    },
+    setFieldValue: (field: string, value: any) => {
+        formData[field] = value
+    },
+    getFieldValue: (field: string) => {
+        return formData[field]
     }
-
-    return isValid;
-  },
-  setFieldValue: (field: string, value: any) => {
-    formData[field] = value;
-  },
-  getFieldValue: (field: string) => {
-    return formData[field];
-  },
-};
+}
 
 // 提供表单上下文给子组件
-provide("formContext", formContext);
+provide('formContext', formContext)
 
 // 验证所有字段
 const validate = () => {
-  return new Promise((resolve, reject) => {
-    let isValid = true;
-    const allErrors: Record<string, string> = {};
-
-    formItems.value.forEach((item) => {
-      const field = item.props?.prop;
-      if (field) {
-        const value = formData[field];
-        const fieldValid = formContext.validateField(field, value);
-        if (!fieldValid) {
-          isValid = false;
-          allErrors[field] = errors[field];
+    return new Promise((resolve, reject) => {
+        let isValid = true
+        const allErrors: Record<string, string> = {}
+
+        formItems.value.forEach((item) => {
+            const field = item.props?.prop
+            if (field) {
+                const value = formData[field]
+                const fieldValid = formContext.validateField(field, value)
+                if (!fieldValid) {
+                    isValid = false
+                    allErrors[field] = errors[field]
+                }
+            }
+        })
+
+        emit('validate', isValid, allErrors)
+        if (isValid) {
+            resolve(isValid)
+        } else {
+            reject(allErrors)
         }
-      }
-    });
-
-    emit("validate", isValid, allErrors);
-    if (isValid) {
-      resolve(isValid);
-    } else {
-      reject(allErrors);
-    }
-  });
-};
+    })
+}
 
 // 重置表单
 const resetFields = () => {
-  clearVal(formData);
-  Object.keys(errors).forEach((key) => {
-    delete errors[key];
-  });
-};
+    clearVal(formData)
+    Object.keys(errors).forEach((key) => {
+        delete errors[key]
+    })
+}
 
 // 清除验证
 const clearValidate = (fields?: string[]) => {
-  if (fields) {
-    fields.forEach((field) => {
-      delete errors[field];
-    });
-  } else {
-    Object.keys(errors).forEach((key) => {
-      delete errors[key];
-    });
-  }
-};
+    if (fields) {
+        fields.forEach((field) => {
+            delete errors[field]
+        })
+    } else {
+        Object.keys(errors).forEach((key) => {
+            delete errors[key]
+        })
+    }
+}
 
 // 提交表单
 const submit = async () => {
-  if (await validate()) {
-    emit("submit", { ...formData });
-    return formData;
-  }
-  return false;
-};
+    if (await validate()) {
+        emit('submit', { ...formData })
+        return formData
+    }
+    return false
+}
 
 defineExpose({
-  validate,
-  resetFields,
-  clearValidate,
-  submit,
-  formData,
-  errors,
-});
+    validate,
+    resetFields,
+    clearValidate,
+    submit,
+    formData,
+    errors
+})
 </script>
 
 <style lang="scss" scoped>
 .hy-form {
-  width: 100%;
+    width: 100%;
 }
 </style>

package/components/hy-form/props.ts

@@ -0,0 +1,37 @@
+import type { PropType } from 'vue'
+import type { FormItemRule } from './typing'
+
+const formProps = {
+    /** 表单数据对象 */
+    model: Object as PropType<AnyObject>,
+    /** 表单校验规则 */
+    rules: Object as PropType<FormItemRule>,
+    /** 表单底部边框 */
+    border: {
+        type: Boolean,
+        default: false
+    },
+    /** label标签的宽度，单位rpx */
+    labelWidth: {
+        type: String,
+        default: 'auto'
+    },
+    /**
+     * 标签位置
+     * @values left,top
+     * */
+    labelPosition: {
+        type: String as PropType<HyApp.LabelPosition>,
+        default: 'left'
+    },
+    /**
+     * 标签位置
+     * @values left,center,right
+     * */
+    labelAlign: {
+        type: String as PropType<HyApp.ColumnCenterType>,
+        default: 'left'
+    }
+}
+
+export default formProps

package/components/hy-form/typing.d.ts

@@ -1,61 +1,68 @@
-export interface FormRule {
-  /**
-   * 是否必填
-   */
-  required?: boolean
-  /**
-   * 验证失败时的提示信息
-   */
-  message?: string
-  /**
-   * 自定义验证函数
-   */
-  validator?: (value: any) => boolean | string
-  /**
-   * 触发验证的时机
-   */
-  trigger?: ('blur' | 'change')[]
-  /**
-   * 最小长度
-   */
-  min?: number
-  /**
-   * 最大长度
-   */
-  max?: number
-  /**
-   * 验证类型
-   */
-  type?: 'phone' | 'email' | 'password'
-}
-
-export interface FormItemRule {
-  [key: string]: FormRule | FormRule[]
-}
-
-export default interface HyFormSimpleProps {
-  /**
-   * 表单数据对象
-   */
-  model?: Record<string, any>
-  /**
-   * 验证规则
-   */
-  rules?: FormItemRule
-  /**
-   * 标签宽度
-   */
-  labelWidth?: string | number
-  /**
-   * 标签位置
-   */
-  labelPosition?: 'left' | 'top'
-  /**
-   * 标签对齐方式
-   */
-  labelAlign?: 'left' | 'center' | 'right'
-  /**
-   * 表单列底部边框
-   * */
-  border: boolean
-}
+export interface FormRule {
+    /**
+     * 是否必填
+     */
+    required?: boolean
+    /**
+     * 验证失败时的提示信息
+     */
+    message?: string
+    /**
+     * 自定义验证函数
+     */
+    validator?: (value: any) => boolean | string
+    /**
+     * 触发验证的时机
+     */
+    trigger?: ('blur' | 'change')[]
+    /**
+     * 最小长度
+     */
+    min?: number
+    /**
+     * 最大长度
+     */
+    max?: number
+    /**
+     * 验证类型
+     */
+    type?: 'phone' | 'email' | 'password'
+}
+
+export interface FormItemRule {
+    [key: string]: FormRule | FormRule[]
+}
+
+export default interface HyFormSimpleProps {
+    /**
+     * 表单数据对象
+     */
+    model?: Record<string, any>
+    /**
+     * 验证规则
+     */
+    rules?: FormItemRule
+    /**
+     * 标签宽度
+     */
+    labelWidth?: string | number
+    /**
+     * 标签位置
+     */
+    labelPosition?: 'left' | 'top'
+    /**
+     * 标签对齐方式
+     */
+    labelAlign?: 'left' | 'center' | 'right'
+    /**
+     * 表单列底部边框
+     * */
+    border: boolean
+}
+
+export interface IFormEmits {
+    /** 提交表单 */
+    (e: 'submit', data: FormRule): void
+    /** 表单校验 */
+    (e: 'validate', valid: boolean, errors: AnyObject): void
+}