hy-app 0.6.4 → 0.6.6

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

@@ -1,220 +1,220 @@
-<template>
-    <view class="hy-form">
-        <slot></slot>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-form',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-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({})
-
-const props = defineProps(formProps)
-const emit = defineEmits<IFormEmits>()
-
-// 表单数据
-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
-                }
-            }
-
-            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 (isValid) {
-            delete errors[field]
-        } else {
-            errors[field] = errorMessage
-        }
-
-        return isValid
-    },
-    setFieldValue: (field: string, value: any) => {
-        formData[field] = value
-    },
-    getFieldValue: (field: string) => {
-        return formData[field]
-    }
-}
-
-// 提供表单上下文给子组件
-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]
-                }
-            }
-        })
-
-        emit('validate', isValid, allErrors)
-        if (isValid) {
-            resolve(isValid)
-        } else {
-            reject(allErrors)
-        }
-    })
-}
-
-// 重置表单
-const resetFields = () => {
-    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]
-        })
-    }
-}
-
-// 提交表单
-const submit = async () => {
-    if (await validate()) {
-        emit('submit', { ...formData })
-        return formData
-    }
-    return false
-}
-
-defineExpose({
-    validate,
-    resetFields,
-    clearValidate,
-    submit,
-    formData,
-    errors
-})
-</script>
-
-<style lang="scss" scoped>
-.hy-form {
-    width: 100%;
-}
-</style>
+<template>
+    <view class="hy-form">
+        <slot></slot>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-form',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+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({})
+
+const props = defineProps(formProps)
+const emit = defineEmits<IFormEmits>()
+
+// 表单数据
+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
+                }
+            }
+
+            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 (isValid) {
+            delete errors[field]
+        } else {
+            errors[field] = errorMessage
+        }
+
+        return isValid
+    },
+    setFieldValue: (field: string, value: any) => {
+        formData[field] = value
+    },
+    getFieldValue: (field: string) => {
+        return formData[field]
+    }
+}
+
+// 提供表单上下文给子组件
+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]
+                }
+            }
+        })
+
+        emit('validate', isValid, allErrors)
+        if (isValid) {
+            resolve(isValid)
+        } else {
+            reject(allErrors)
+        }
+    })
+}
+
+// 重置表单
+const resetFields = () => {
+    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]
+        })
+    }
+}
+
+// 提交表单
+const submit = async () => {
+    if (await validate()) {
+        emit('submit', { ...formData })
+        return formData
+    }
+    return false
+}
+
+defineExpose({
+    validate,
+    resetFields,
+    clearValidate,
+    submit,
+    formData,
+    errors
+})
+</script>
+
+<style lang="scss" scoped>
+.hy-form {
+    width: 100%;
+}
+</style>

package/components/hy-icon/hy-icon.vue

@@ -1,112 +1,112 @@
-<template>
-    <view :class="`hy-icon ${customClass} hy-icon--${labelPos}`" @tap="clickHandler">
-        <image
-            class="hy-icon__img"
-            v-if="isImg"
-            :src="name"
-            :mode="imgMode"
-            :style="[imgStyle, customStyle]"
-        ></image>
-        <text v-else :class="iconClass" :style="[iconStyle, customStyle]"></text>
-        <!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
-        <text
-            v-if="label"
-            class="hy-icon__label"
-            :style="{
-                color: labelColor,
-                fontSize: addUnit(labelSize),
-                marginLeft: labelPos == 'right' ? addUnit(space) : 0,
-                marginTop: labelPos == 'bottom' ? addUnit(space) : 0
-            }"
-        >
-            {{ label }}
-        </text>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-icon',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { CSSProperties } from 'vue'
-import { addUnit } from '../../libs'
-import type { IIconEmits } from './typing'
-import iconProps from './props'
-
-/**
- * 基于字体的图标集，包含了大多数常见场景的图标，使用简单，开箱即用，无需自己再写每个图标的样式，直接简单配置即可。支持自定义图标。
- * @displayName hy-icon
- */
-defineOptions({})
-
-const props = defineProps(iconProps)
-const emit = defineEmits<IIconEmits>()
-
-const iconClass = computed(() => {
-    let classes: string | string[] = [
-        'hy-icon__icon',
-        props.customPrefix,
-        `${props.customPrefix}-${props.name}`
-    ]
-    if (props.isRotate) classes.push('hy-rotate')
-    if (props.color)
-        // 主题色，通过类配置
-        classes.push('hy-icon__icon--' + props.color)
-    // 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
-    // 故需将其拆成一个字符串的形式，通过空格隔开各个类名
-    //#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
-    classes = classes.join(' ')
-    //#endif
-    return classes
-})
-const iconStyle = computed<CSSProperties>(() => {
-    const style: CSSProperties = {
-        fontSize: addUnit(props.size),
-        lineHeight: addUnit(props.size),
-        fontWeight: props.bold ? 'bold' : 'normal',
-        // 某些特殊情况需要设置一个到顶部的距离，才能更好地垂直居中
-        top: addUnit(props.top),
-        borderRadius: addUnit(props.round),
-        color: props.color
-    }
-
-    return style
-})
-
-/**
- * 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
- * */
-const isImg = computed(() => {
-    return props.name?.indexOf('/') !== -1
-})
-const imgStyle = computed((): CSSProperties => {
-    let style: CSSProperties = {}
-    // 如果设置width和height属性，则优先使用，否则使用size属性
-    style.width = props.width ? addUnit(props.width) : addUnit(props.size)
-    style.height = props.height ? addUnit(props.height) : addUnit(props.size)
-    style.borderRadius = addUnit(props.round)
-    return style
-})
-
-/**
- * 点击icon图标执行
- * */
-const clickHandler = (e: Event) => {
-    emit('click', props.index, e)
-    // 是否阻止事件冒泡
-    props.stop && e.stopPropagation()
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <view :class="`hy-icon ${customClass} hy-icon--${labelPos}`" @tap="clickHandler">
+        <image
+            class="hy-icon__img"
+            v-if="isImg"
+            :src="name"
+            :mode="imgMode"
+            :style="[imgStyle, customStyle]"
+        ></image>
+        <text v-else :class="iconClass" :style="[iconStyle, customStyle]"></text>
+        <!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
+        <text
+            v-if="label"
+            class="hy-icon__label"
+            :style="{
+                color: labelColor,
+                fontSize: addUnit(labelSize),
+                marginLeft: labelPos == 'right' ? addUnit(space) : 0,
+                marginTop: labelPos == 'bottom' ? addUnit(space) : 0
+            }"
+        >
+            {{ label }}
+        </text>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-icon',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { addUnit } from '../../libs'
+import type { IIconEmits } from './typing'
+import iconProps from './props'
+
+/**
+ * 基于字体的图标集，包含了大多数常见场景的图标，使用简单，开箱即用，无需自己再写每个图标的样式，直接简单配置即可。支持自定义图标。
+ * @displayName hy-icon
+ */
+defineOptions({})
+
+const props = defineProps(iconProps)
+const emit = defineEmits<IIconEmits>()
+
+const iconClass = computed(() => {
+    let classes: string | string[] = [
+        'hy-icon__icon',
+        props.customPrefix,
+        `${props.customPrefix}-${props.name}`
+    ]
+    if (props.isRotate) classes.push('hy-rotate')
+    if (props.color)
+        // 主题色，通过类配置
+        classes.push('hy-icon__icon--' + props.color)
+    // 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
+    // 故需将其拆成一个字符串的形式，通过空格隔开各个类名
+    //#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+    classes = classes.join(' ')
+    //#endif
+    return classes
+})
+const iconStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {
+        fontSize: addUnit(props.size),
+        lineHeight: addUnit(props.size),
+        fontWeight: props.bold ? 'bold' : 'normal',
+        // 某些特殊情况需要设置一个到顶部的距离，才能更好地垂直居中
+        top: addUnit(props.top),
+        borderRadius: addUnit(props.round),
+        color: props.color
+    }
+
+    return style
+})
+
+/**
+ * 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+ * */
+const isImg = computed(() => {
+    return props.name?.indexOf('/') !== -1
+})
+const imgStyle = computed((): CSSProperties => {
+    let style: CSSProperties = {}
+    // 如果设置width和height属性，则优先使用，否则使用size属性
+    style.width = props.width ? addUnit(props.width) : addUnit(props.size)
+    style.height = props.height ? addUnit(props.height) : addUnit(props.size)
+    style.borderRadius = addUnit(props.round)
+    return style
+})
+
+/**
+ * 点击icon图标执行
+ * */
+const clickHandler = (e: Event) => {
+    emit('click', props.index, e)
+    // 是否阻止事件冒泡
+    props.stop && e.stopPropagation()
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>