hy-app 0.4.13 → 0.5.0

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
+}

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

@@ -1,77 +1,77 @@
-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 { 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'
 
 export default interface HyFormProps {
-  /**
-   * @description 表单域提示文字的位置
-   * left - 左侧
-   * top - 上方
-   * */
-  labelPosition?: "left" | "top";
-  /**
-   * @description label宽度
-   * 数字 - 固定值
-   * auto - 自适应
-   * */
-  labelWidth?: string | number;
-  /**
-   * @description 是否右对齐
-   * */
-  right?: boolean;
-  /**
-   * @description label字体的对齐方式
-   * left - 左对齐
-   * center - 中间对齐
-   * right - 右对齐
-   * */
-  labelAlign?: HyApp.RowCenterType;
-  /**
-   * @description 显示冒号符号
-   * */
-  symbol?: boolean;
-  /**
-   * @description 显示底部下划线
-   * */
-  borderBottom?: boolean;
-  /**
-   * @description 当行内容高度
-   * */
-  itemHeight?: number | string;
-  /**
-   * @description 输入框属性api集合
-   * */
-  input?: Partial<HyInputProps>;
-  /**
-   * @description 文本域属性api集合
-   * */
-  textarea?: Partial<HyTextareaProps>;
-  /**
-   * @description 选择器属性api集合
-   * */
-  picker?: Partial<HyPickerProps>;
-  /**
-   * @description 开关属性api集合
-   * */
-  switchItem?: Partial<HySwitchProps>;
-  /**
-   * @description 单选属性api集合
-   * */
-  radio?: Partial<HyRadioProps>;
-  /**
-   * @description 选择按钮属性api集合
-   * */
-  checkButton?: Partial<HyCheckButtonProps>;
-  /**
-   * @description 表单配置
-   * */
-  columns: FormColumnsType[];
-  /**
-   * @description 表单值
-   * */
-  formData: Record<string, any>;
+    /**
+     * @description 表单域提示文字的位置
+     * left - 左侧
+     * top - 上方
+     * */
+    labelPosition?: 'left' | 'top'
+    /**
+     * @description label宽度
+     * 数字 - 固定值
+     * auto - 自适应
+     * */
+    labelWidth?: string | number
+    /**
+     * @description 是否右对齐
+     * */
+    right?: boolean
+    /**
+     * @description label字体的对齐方式
+     * left - 左对齐
+     * center - 中间对齐
+     * right - 右对齐
+     * */
+    labelAlign?: HyApp.RowCenterType
+    /**
+     * @description 显示冒号符号
+     * */
+    symbol?: boolean
+    /**
+     * @description 显示底部下划线
+     * */
+    borderBottom?: boolean
+    /**
+     * @description 当行内容高度
+     * */
+    itemHeight?: number | string
+    /**
+     * @description 输入框属性api集合
+     * */
+    input?: Partial<HyInputProps>
+    /**
+     * @description 文本域属性api集合
+     * */
+    textarea?: Partial<HyTextareaProps>
+    /**
+     * @description 选择器属性api集合
+     * */
+    picker?: Partial<HyPickerProps>
+    /**
+     * @description 开关属性api集合
+     * */
+    switchItem?: Partial<HySwitchProps>
+    /**
+     * @description 单选属性api集合
+     * */
+    radio?: Partial<HyRadioProps>
+    /**
+     * @description 选择按钮属性api集合
+     * */
+    checkButton?: Partial<HyCheckButtonProps>
+    /**
+     * @description 表单配置
+     * */
+    columns: FormColumnsType[]
+    /**
+     * @description 表单值
+     * */
+    formData: Record<string, any>
 }

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

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

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

@@ -0,0 +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