hy-app 0.2.18 → 0.3.0

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

@@ -0,0 +1,77 @@
+import type { FormColumnsType } from "../../typing";
+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>;
+}

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

@@ -0,0 +1,199 @@
+<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>
+    <view class="hy-form-item__content">
+      <slot></slot>
+      <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, type PropType, provide, ref } from 'vue'
+import type { FormContext } from './typing'
+
+/**
+ * 表单组件子组件，需要搭配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]
+}>()
+
+// 注入表单上下文
+const formContext = inject<FormContext>('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 =
+      typeof formContext.labelWidth.value === 'number'
+        ? `${formContext.labelWidth.value}px`
+        : formContext.labelWidth.value
+  }
+
+  if (formContext.labelAlign.value) {
+    style.textAlign = formContext.labelAlign.value
+  }
+
+  return style
+})
+
+// 标签位置
+const labelPosition = 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

@@ -0,0 +1,41 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(form-item) {
+  display: flex;
+  margin-bottom: 16px;
+
+  @include m(left) {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  @include m(top) {
+    flex-direction: column;
+  }
+
+  @include e(label) {
+    position: relative;
+    padding-right: 8px;
+    font-size: 14px;
+    color: #333;
+    line-height: 1.5;
+
+    @include m(required) {
+      color: #ff4d4f;
+      margin-right: 2px;
+    }
+  }
+
+  @include e(content) {
+    flex: 1;
+    min-width: 0;
+  }
+
+  @include e(error) {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #ff4d4f;
+    line-height: 1.5;
+  }
+}

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

@@ -0,0 +1,43 @@
+export interface FormContext {
+  formData: Record<string, any>
+  errors: Record<string, string>
+  rules: any
+  labelWidth: any
+  labelPosition: any
+  labelAlign: any
+  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 default interface HyFormItemProps {
+  /**
+   * 标签文本
+   */
+  label?: string
+  /**
+   * 表单字段名
+   */
+  prop?: string
+  /**
+   * 是否必填
+   */
+  required?: boolean
+  /**
+   * 验证规则
+   */
+  rules?: any
+}

package/components/hy-input/hy-input.vue

@@ -103,13 +103,15 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, nextTick, ref, toRefs, watch, getCurrentInstance, PropType } from 'vue'
-import type { CSSProperties } from 'vue'
+import { computed, nextTick, ref, toRefs, watch, getCurrentInstance, inject } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import HyIcon from '../hy-icon/hy-icon.vue'
 import { addUnit, formatObject } from '../../utils'
 import { IconConfig } from '../../config'
 import type { IInputEmits } from './typing'
-import HyIconProps from '@/package/components/hy-icon/typing'
+import type HyIconProps from '../hy-icon/typing'
+import { FormItemContext } from '@/package/components/hy-form-item/typing'
+import { TextAlign } from 'csstype'
 
 /**
  * 为一个输入框，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
@@ -236,7 +238,7 @@ const props = defineProps({
    * @values left,center,right
    * */
   inputAlign: {
-    type: String,
+    type: String as PropType<TextAlign>,
     default: 'left',
   },
   /** 输入框字体的大小 */
@@ -303,6 +305,7 @@ const {
   placeholderStyle,
 } = toRefs(props)
 const emit = defineEmits<IInputEmits>()
+const formItem = inject<FormItemContext>('formItem')
 
 const instance = getCurrentInstance()
 // 清除操作
@@ -424,8 +427,9 @@ const onInput = (e: any) => {
 /**
  * @description 输入框失去焦点时触发
  * */
-const onBlur = (event: Event) => {
+const onBlur = (event: any) => {
   emit('blur', event.detail.value)
+  formItem.handleBlur(event.detail.value)
   // H5端的blur会先于点击清除控件的点击click事件触发，导致focused
   // 瞬间为false，从而隐藏了清除控件而无法被点击到
   setTimeout(() => {
@@ -466,6 +470,7 @@ const valueChange = (value: string | number, isOut = false) => {
       // 标识value值的变化是由内部引起的
       changeFromInner.value = true
       emit('change', value)
+      formItem.handleChange(value)
 
       emit('update:modelValue', value)
     }