hy-app 0.2.16 → 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-grid/hy-grid.vue

@@ -33,11 +33,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式
- * @displayName hy-grid
- */
-defineOptions({})
 export default {
   name: 'hy-grid',
   options: {
@@ -53,25 +48,30 @@ import { computed, toRefs } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import type { CustomKeysVo, GridItemVo, IGridEmits } from './typing'
 import { addUnit } from '../../utils'
-
+import type HyIconProps from '../hy-icon/typing'
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
-import type HyIconProps from '@/package/components/hy-icon/typing'
+
+/**
+ * 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式
+ * @displayName hy-grid
+ */
+defineOptions({})
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 数据列表 */
   list: {
     type: Array as PropType<GridItemVo[]>,
-    default: [],
+    default: () => [],
   },
   /** 自定义键值 */
   customKeys: {
     type: Object as PropType<CustomKeysVo>,
-    default: {
+    default: () => ({
       name: 'name',
       icon: 'icon',
-    },
+    }),
   },
   /** 宫格的列数 */
   col: {
@@ -109,9 +109,7 @@ const props = defineProps({
   /** 图标属性api配置集合 */
   iconConfig: Object as PropType<HyIconProps>,
   /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
+  customStyle: Object as PropType<CSSProperties>,
   /** 自定义外部类名 */
   customClass: String,
 })

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

@@ -75,5 +75,5 @@ export default interface HyGridProps {
 
 export interface IGridEmits {
   /** 点击小菜单触发 */
-  (e: 'click', name: string | Record<string, any>)): void
+  (e: 'click', name: string | Record<string, any>): void
 }

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

@@ -10,7 +10,7 @@
     <text v-else class="hy-icon__icon" :class="uClasses" :style="[iconStyle, customStyle]"></text>
     <!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
     <text
-      v-if="label !== ''"
+      v-if="label"
       class="hy-icon__label"
       :style="{
         color: labelColor,
@@ -25,11 +25,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 基于字体的图标集，包含了大多数常见场景的图标，使用简单，开箱即用，无需自己再写每个图标的样式，直接简单配置即可。支持自定义图标。
- * @displayName hy-icon
- */
-defineOptions({})
 export default {
   name: 'hy-icon',
   options: {
@@ -41,10 +36,17 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, type PropType, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
+import type { PropType, CSSProperties } from 'vue'
 import { addUnit } from '../../utils'
 import type { IIconEmits } from './typing'
 
+/**
+ * 基于字体的图标集，包含了大多数常见场景的图标，使用简单，开箱即用，无需自己再写每个图标的样式，直接简单配置即可。支持自定义图标。
+ * @displayName hy-icon
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /** 图标名称 */
@@ -90,12 +92,12 @@ const props = defineProps({
   /** 图片的mode */
   imgMode: String,
   /** 显示图片小图标时的宽度 */
-  width: String,
+  width: [String, Number],
   /** 显示图片小图标时的高度 */
-  height: String,
+  height: [String, Number],
   /** 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途 */
   top: {
-    type: Number,
+    type: [String, Number],
     default: 0,
   },
   /** 是否阻止事件传播 */
@@ -110,13 +112,11 @@ const props = defineProps({
   },
   /** 图标圆角 */
   round: {
-    type: Number,
+    type: [String, Number],
     default: 0,
   },
   /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
+  customStyle: Object as PropType<CSSProperties>,
   /** 自定义外部类名 */
   customClass: String,
 })
@@ -174,7 +174,7 @@ const iconStyle = computed<CSSProperties>(() => {
  * @description 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
  * */
 const isImg = computed(() => {
-  return name.value.indexOf('/') !== -1
+  return name.value?.indexOf('/') !== -1
 })
 const imgStyle = computed((): CSSProperties => {
   let style: CSSProperties = {}

package/components/hy-image/hy-image.vue

@@ -50,11 +50,6 @@
 </template>
 
 <script lang="ts">
-/**
- * uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
- * @displayName hy-image
- */
-defineOptions({})
 export default {
   name: 'hy-image',
   options: {
@@ -70,12 +65,17 @@ import { computed, onMounted, ref, toRefs, watch } from 'vue'
 import type { PropType, CSSProperties } from 'vue'
 import type { IImageEmits } from './typing'
 import { addUnit, getPx } from '../../utils'
-
+import { IconConfig } from '../../config'
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
 import HyTransition from '../hy-transition/hy-transition.vue'
 import HyLoading from '../hy-loading/hy-loading.vue'
-import { IconConfig } from '@/package'
+
+/**
+ * uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
+ * @displayName hy-image
+ */
+defineOptions({})
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -87,9 +87,15 @@ const props = defineProps({
     default: 'aspectFill',
   },
   /** 宽度，单位任意，如果为数值，则为px单位 */
-  width: String,
+  width: {
+    type: [String, Number],
+    default: '',
+  },
   /** 高度，单位任意，如果为数值，则为px单位 */
-  height: String,
+  height: {
+    type: [String, Number],
+    default: '',
+  },
   /**
    * 图片形状
    * @values circle,square

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

@@ -92,11 +92,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 为一个输入框，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
- * @displayName hy-input
- */
-defineOptions({})
 export default {
   name: 'hy-input',
   options: {
@@ -108,13 +103,21 @@ 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'
+
+/**
+ * 为一个输入框，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
+ * @displayName hy-input
+ */
+defineOptions({})
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -235,7 +238,7 @@ const props = defineProps({
    * @values left,center,right
    * */
   inputAlign: {
-    type: String,
+    type: String as PropType<TextAlign>,
     default: 'left',
   },
   /** 输入框字体的大小 */
@@ -278,7 +281,7 @@ const props = defineProps({
   },
   /** 是否忽略组件内对文本合成系统事件的处理 */
   ignoreCompositionEvent: {
-    type: String,
+    type: Boolean,
     default: false,
   },
   /** 内容式化函数 */
@@ -302,6 +305,7 @@ const {
   placeholderStyle,
 } = toRefs(props)
 const emit = defineEmits<IInputEmits>()
+const formItem = inject<FormItemContext>('formItem')
 
 const instance = getCurrentInstance()
 // 清除操作
@@ -423,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(() => {
@@ -465,6 +470,7 @@ const valueChange = (value: string | number, isOut = false) => {
       // 标识value值的变化是由内部引起的
       changeFromInner.value = true
       emit('change', value)
+      formItem.handleChange(value)
 
       emit('update:modelValue', value)
     }

package/components/hy-line/hy-line.vue

@@ -3,11 +3,6 @@
 </template>
 
 <script lang="ts">
-/**
- * 一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单。
- * @displayName hy-line
- */
-defineOptions({})
 export default {
   name: 'hy-line',
   options: {
@@ -19,9 +14,16 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, type PropType, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import { addUnit } from '../../utils'
 
+/**
+ * 一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单。
+ * @displayName hy-line
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 线条的颜色 */