hy-app 0.5.10 → 0.5.11

package/components/hy-form-group/props.ts

@@ -1,105 +1,105 @@
-import type { FormColumnsType } from '../../libs'
-import type HyInputProps from '../hy-input/typing'
-import type HyTextareaProps from '../hy-textarea/typing'
-import type HySwitchProps from '../hy-switch/typing'
-import type HyPickerProps from '../hy-picker/typing'
-import type HyRadioProps from '../hy-radio/typing'
-import type HyCheckButtonProps from '../hy-check-button/typing'
-import type { PropType } from 'vue'
-
-const formGroupProps = {
-    /**
-     * 表单域提示文字的位置
-     * @values left, top
-     * */
-    labelPosition: {
-        type: String,
-        default: 'left'
-    },
-    /**
-     * label宽度
-     * */
-    labelWidth: {
-        type: [String, Number],
-        default: 'auto'
-    },
-    /**
-     * 是否右对齐
-     * */
-    right: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * label字体的对齐方式
-     * @values left,center,right
-     * */
-    labelAlign: {
-        type: String,
-        default: 'left'
-    },
-    /**
-     * 显示底部下划线
-     * */
-    border: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 是否全部禁用
-     * */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 输入框属性api集合
-     * */
-    input: {
-        type: Object as PropType<Partial<HyInputProps>>
-    },
-    /**
-     * 文本域属性api集合
-     * */
-    textarea: {
-        type: Array as PropType<Partial<HyTextareaProps>>
-    },
-    /**
-     * 选择器属性api集合
-     * */
-    picker: {
-        type: Array as PropType<Partial<HyPickerProps>>
-    },
-    /**
-     * 开关属性api集合
-     * */
-    switchItem: {
-        type: Array as PropType<Partial<HySwitchProps>>
-    },
-    /**
-     * 单选属性api集合
-     * */
-    radio: {
-        type: Array as PropType<Partial<HyRadioProps>>
-    },
-    /**
-     * 选择按钮属性api集合
-     * */
-    checkButton: {
-        type: Array as PropType<Partial<HyCheckButtonProps>>
-    },
-    /**
-     * 表单配置
-     * */
-    columns: {
-        type: Array as PropType<FormColumnsType[]>
-    },
-    /**
-     * 表单值
-     * */
-    formData: {
-        type: Object as PropType<Record<string, any>>
-    }
-}
-
-export default formGroupProps
+import type { FormColumnsType } from '../../libs'
+import type HyInputProps from '../hy-input/typing'
+import type HyTextareaProps from '../hy-textarea/typing'
+import type HySwitchProps from '../hy-switch/typing'
+import type HyPickerProps from '../hy-picker/typing'
+import type HyRadioProps from '../hy-radio/typing'
+import type HyCheckButtonProps from '../hy-check-button/typing'
+import type { PropType } from 'vue'
+
+const formGroupProps = {
+    /**
+     * 表单域提示文字的位置
+     * @values left, top
+     * */
+    labelPosition: {
+        type: String,
+        default: 'left'
+    },
+    /**
+     * label宽度
+     * */
+    labelWidth: {
+        type: [String, Number],
+        default: 'auto'
+    },
+    /**
+     * 是否右对齐
+     * */
+    right: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * label字体的对齐方式
+     * @values left,center,right
+     * */
+    labelAlign: {
+        type: String,
+        default: 'left'
+    },
+    /**
+     * 显示底部下划线
+     * */
+    border: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 是否全部禁用
+     * */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 输入框属性api集合
+     * */
+    input: {
+        type: Object as PropType<Partial<HyInputProps>>
+    },
+    /**
+     * 文本域属性api集合
+     * */
+    textarea: {
+        type: Array as PropType<Partial<HyTextareaProps>>
+    },
+    /**
+     * 选择器属性api集合
+     * */
+    picker: {
+        type: Array as PropType<Partial<HyPickerProps>>
+    },
+    /**
+     * 开关属性api集合
+     * */
+    switchItem: {
+        type: Array as PropType<Partial<HySwitchProps>>
+    },
+    /**
+     * 单选属性api集合
+     * */
+    radio: {
+        type: Array as PropType<Partial<HyRadioProps>>
+    },
+    /**
+     * 选择按钮属性api集合
+     * */
+    checkButton: {
+        type: Array as PropType<Partial<HyCheckButtonProps>>
+    },
+    /**
+     * 表单配置
+     * */
+    columns: {
+        type: Array as PropType<FormColumnsType[]>
+    },
+    /**
+     * 表单值
+     * */
+    formData: {
+        type: Object as PropType<Record<string, any>>
+    }
+}
+
+export default formGroupProps

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

@@ -1,176 +1,176 @@
-<template>
-    <view class="hy-form-item" :class="[`hy-form-item--${labelPos}`]">
-        <view v-if="label" class="hy-form-item__label" :style="labelStyle">
-            <text v-if="isRequired" class="hy-form-item__label--required">*</text>
-            {{ label }}
-        </view>
-        <view class="hy-form-item__content">
-            <view :class="[formContext.border.value && 'hy-border__bottom']">
-                <slot></slot>
-            </view>
-            <view v-if="errorMessage" class="hy-form-item__error">
-                {{ errorMessage }}
-            </view>
-        </view>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-form-item',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { computed, inject, onMounted, onUnmounted, provide, ref } from 'vue'
-import type { IFormItemEmits, IFormContext } from './typing'
-import { addUnit } from '../../libs'
-import formItemProps from './props'
-
-/**
- * 表单组件子组件，需要搭配hy-form
- * @displayName hy-form-item
- */
-defineOptions({})
-
-const props = defineProps(formItemProps)
-const emit = defineEmits<IFormItemEmits>()
-
-// 注入表单上下文
-const formContext = inject<IFormContext>('formContext')
-const formItem = {
-    // 处理子组件事件
-    handleChange(value: any) {
-        if (props.prop && formContext) {
-            formContext.setFieldValue(props.prop, value)
-            validate('change')
-        }
-        emit('change', value)
-    },
-    handleBlur(value: any) {
-        if (props.prop && formContext) {
-            validate('blur')
-        }
-        emit('blur', value)
-    }
-}
-provide('formItem', formItem)
-
-// 当前组件的引用
-const formItemRef = ref()
-
-// 错误信息
-const errorMessage = computed(() => {
-    if (!formContext || !props.prop) return ''
-    return formContext.errors[props.prop] || ''
-})
-
-// 是否必填
-const isRequired = computed(() => {
-    if (props.required) return true
-    if (!formContext || !props.prop) return false
-
-    const fieldRules = formContext.rules?.value?.[props.prop]
-    if (!fieldRules) return false
-
-    const rules = Array.isArray(fieldRules) ? fieldRules : [fieldRules]
-    return rules.some((rule) => rule.required)
-})
-
-// 标签样式
-const labelStyle = computed(() => {
-    if (!formContext) return {}
-
-    const style: Record<string, any> = {}
-
-    if (formContext.labelWidth?.value !== 'auto') {
-        style.width = addUnit(formContext.labelWidth?.value)
-    }
-
-    if (formContext.labelAlign?.value) {
-        style.textAlign = formContext.labelAlign.value
-    }
-
-    return style
-})
-
-// 标签位置
-const labelPos = computed(() => {
-    return formContext?.labelPosition?.value || 'left'
-})
-
-// 监听表单数据变化
-// watch(
-//   () => formContext?.formData[props.prop],
-//   (newVal) => {
-//     if (props.prop && formContext) {
-//       formContext.setFieldValue(props.prop, newVal)
-//       validate('change')
-//     }
-//   },
-//   { immediate: true },
-// )
-
-// 验证字段
-const validate = (trigger?: 'blur' | 'change') => {
-    if (!formContext || !props.prop) return true
-
-    const value = formContext.getFieldValue(props.prop)
-    return formContext.validateField(props.prop, value, trigger)
-}
-
-// 重置字段
-const resetField = () => {
-    if (!formContext || !props.prop) return
-
-    formContext.setFieldValue(props.prop, undefined)
-    formContext.validateField(props.prop, undefined)
-}
-
-// 清除验证
-const clearValidate = () => {
-    if (!formContext || !props.prop) return
-
-    delete formContext.errors[props.prop]
-}
-
-// 组件挂载时注册到表单
-onMounted(() => {
-    if (formContext) {
-        formContext.addFormItem({
-            props: props,
-            validate,
-            resetField,
-            clearValidate
-        })
-    }
-})
-
-// 组件卸载时从表单中移除
-onUnmounted(() => {
-    if (formContext) {
-        formContext.removeFormItem({
-            props: props,
-            validate,
-            resetField,
-            clearValidate
-        })
-    }
-})
-
-// 暴露方法给父组件
-defineExpose({
-    validate,
-    resetField,
-    clearValidate
-})
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <view class="hy-form-item" :class="[`hy-form-item--${labelPos}`]">
+        <view v-if="label" class="hy-form-item__label" :style="labelStyle">
+            <text v-if="isRequired" class="hy-form-item__label--required">*</text>
+            {{ label }}
+        </view>
+        <view class="hy-form-item__content">
+            <view :class="[formContext.border.value && 'hy-border__bottom']">
+                <slot></slot>
+            </view>
+            <view v-if="errorMessage" class="hy-form-item__error">
+                {{ errorMessage }}
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-form-item',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, onUnmounted, provide, ref } from 'vue'
+import type { IFormItemEmits, IFormContext } from './typing'
+import { addUnit } from '../../libs'
+import formItemProps from './props'
+
+/**
+ * 表单组件子组件，需要搭配hy-form
+ * @displayName hy-form-item
+ */
+defineOptions({})
+
+const props = defineProps(formItemProps)
+const emit = defineEmits<IFormItemEmits>()
+
+// 注入表单上下文
+const formContext = inject<IFormContext>('formContext')
+const formItem = {
+    // 处理子组件事件
+    handleChange(value: any) {
+        if (props.prop && formContext) {
+            formContext.setFieldValue(props.prop, value)
+            validate('change')
+        }
+        emit('change', value)
+    },
+    handleBlur(value: any) {
+        if (props.prop && formContext) {
+            validate('blur')
+        }
+        emit('blur', value)
+    }
+}
+provide('formItem', formItem)
+
+// 当前组件的引用
+const formItemRef = ref()
+
+// 错误信息
+const errorMessage = computed(() => {
+    if (!formContext || !props.prop) return ''
+    return formContext.errors[props.prop] || ''
+})
+
+// 是否必填
+const isRequired = computed(() => {
+    if (props.required) return true
+    if (!formContext || !props.prop) return false
+
+    const fieldRules = formContext.rules?.value?.[props.prop]
+    if (!fieldRules) return false
+
+    const rules = Array.isArray(fieldRules) ? fieldRules : [fieldRules]
+    return rules.some((rule) => rule.required)
+})
+
+// 标签样式
+const labelStyle = computed(() => {
+    if (!formContext) return {}
+
+    const style: Record<string, any> = {}
+
+    if (formContext.labelWidth?.value !== 'auto') {
+        style.width = addUnit(formContext.labelWidth?.value)
+    }
+
+    if (formContext.labelAlign?.value) {
+        style.textAlign = formContext.labelAlign.value
+    }
+
+    return style
+})
+
+// 标签位置
+const labelPos = computed(() => {
+    return formContext?.labelPosition?.value || 'left'
+})
+
+// 监听表单数据变化
+// watch(
+//   () => formContext?.formData[props.prop],
+//   (newVal) => {
+//     if (props.prop && formContext) {
+//       formContext.setFieldValue(props.prop, newVal)
+//       validate('change')
+//     }
+//   },
+//   { immediate: true },
+// )
+
+// 验证字段
+const validate = (trigger?: 'blur' | 'change') => {
+    if (!formContext || !props.prop) return true
+
+    const value = formContext.getFieldValue(props.prop)
+    return formContext.validateField(props.prop, value, trigger)
+}
+
+// 重置字段
+const resetField = () => {
+    if (!formContext || !props.prop) return
+
+    formContext.setFieldValue(props.prop, undefined)
+    formContext.validateField(props.prop, undefined)
+}
+
+// 清除验证
+const clearValidate = () => {
+    if (!formContext || !props.prop) return
+
+    delete formContext.errors[props.prop]
+}
+
+// 组件挂载时注册到表单
+onMounted(() => {
+    if (formContext) {
+        formContext.addFormItem({
+            props: props,
+            validate,
+            resetField,
+            clearValidate
+        })
+    }
+})
+
+// 组件卸载时从表单中移除
+onUnmounted(() => {
+    if (formContext) {
+        formContext.removeFormItem({
+            props: props,
+            validate,
+            resetField,
+            clearValidate
+        })
+    }
+})
+
+// 暴露方法给父组件
+defineExpose({
+    validate,
+    resetField,
+    clearValidate
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-form-item/index.scss

@@ -17,7 +17,6 @@
   @include e(label) {
     position: relative;
     padding-right: 8px;
-    font-size: 14px;
     color: $hy-text-color;
     line-height: 2.5;
 

package/components/hy-form-item/props.ts

@@ -1,25 +1,25 @@
-import type { PropType } from 'vue'
-
-const formItemProps = {
-    /**
-     * 标签文本
-     */
-    label: String,
-    /**
-     * 表单字段名
-     */
-    prop: String,
-    /**
-     * 是否必填
-     */
-    required: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 验证规则
-     */
-    rules: Object as PropType<any>
-}
-
-export default formItemProps
+import type { PropType } from 'vue'
+
+const formItemProps = {
+    /**
+     * 标签文本
+     */
+    label: String,
+    /**
+     * 表单字段名
+     */
+    prop: String,
+    /**
+     * 是否必填
+     */
+    required: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 验证规则
+     */
+    rules: Object as PropType<any>
+}
+
+export default formItemProps

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

@@ -1,30 +1,30 @@
-import HyFormSimpleProps, { type FormRule } from '../hy-form/typing'
-import type { ToRefs } from 'vue'
-
-export interface IFormContext extends ToRefs<HyFormSimpleProps> {
-    formData: AnyObject
-    errors: Record<string, string>
-    addFormItem: (item: any) => void
-    removeFormItem: (item: any) => void
-    validateField: (field: string, value: any, trigger?: 'blur' | 'change') => boolean
-    setFieldValue: (field: string, value: any) => void
-    getFieldValue: (field: string) => any
-}
-
-export interface FormItemContext {
-    /**
-     * 失去焦点触发表单校验
-     * */
-    handleBlur: (value: string | number) => void
-    /**
-     * 值改变触发表单校验
-     * */
-    handleChange: (value: string | number) => void
-}
-
-export interface IFormItemEmits {
-    /** 提交表单 */
-    (e: 'change', value: any): void
-    /** 表单校验 */
-    (e: 'blur', value: any): void
-}
+import HyFormSimpleProps, { type FormRule } from '../hy-form/typing'
+import type { ToRefs } from 'vue'
+
+export interface IFormContext extends ToRefs<HyFormSimpleProps> {
+    formData: AnyObject
+    errors: Record<string, string>
+    addFormItem: (item: any) => void
+    removeFormItem: (item: any) => void
+    validateField: (field: string, value: any, trigger?: 'blur' | 'change') => boolean
+    setFieldValue: (field: string, value: any) => void
+    getFieldValue: (field: string) => any
+}
+
+export interface FormItemContext {
+    /**
+     * 失去焦点触发表单校验
+     * */
+    handleBlur: (value: string | number) => void
+    /**
+     * 值改变触发表单校验
+     * */
+    handleChange: (value: string | number) => void
+}
+
+export interface IFormItemEmits {
+    /** 提交表单 */
+    (e: 'change', value: any): void
+    /** 表单校验 */
+    (e: 'blur', value: any): void
+}