hy-app 0.2.18 → 0.3.1

package/components/hy-back-top/hy-back-top.vue

@@ -35,12 +35,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-/**
- * 该组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
- * @displayName hy-back-top
- */
-defineOptions({})
-import { computed, type CSSProperties, PropType, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import { addUnit, getPx } from '../../utils'
 import { IconConfig } from '../../config'
 import type { IBackTopEmit } from './typing'
@@ -49,6 +45,12 @@ import type HyIconProps from '../hy-icon/typing'
 import HyTransition from '../hy-transition/hy-transition.vue'
 import HyIcon from '../hy-icon/hy-icon.vue'
 
+/**
+ * 该组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
+ * @displayName hy-back-top
+ */
+defineOptions({})
+
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
   /**

package/components/hy-config-provider/hy-config-provider.vue

@@ -49,7 +49,7 @@ const props = defineProps({
   customClass: String,
   /** 定义需要用到的外部样式 */
   customStyle: {
-    type: Object as PropType<CSSProperties>,
+    type: [Object, Array] as PropType<CSSProperties | CSSProperties[]>,
   },
 })
 const { theme, themeColor, customClass, customStyle, padding } = toRefs(props)

package/components/hy-flex/hy-flex.vue

@@ -0,0 +1,73 @@
+<template>
+  <view :class="cls" :style="style">
+    <slot />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType } from 'vue'
+import { FlexAlign, FlexDirection, FlexJustify, FlexWrap } from './typing'
+import { addUnit, isArray } from '../../utils'
+
+const props = defineProps({
+  /** flex 主轴的方向是否垂直，使用 flex-direction: column */
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+  /** 快捷设置 flex-direction */
+  direction: String as PropType<FlexDirection>,
+  /** 设置元素在主轴方向上的对齐方式 */
+  justify: {
+    type: String as PropType<FlexJustify>,
+    default: 'flex-start',
+  },
+  /** 设置元素在交叉轴方向上的对齐方式 */
+  align: {
+    type: String as PropType<FlexAlign>,
+    default: 'flex-start',
+  },
+  /** 设置元素单行显示还是多行显示 */
+  wrap: {
+    type: String as PropType<FlexWrap>,
+    default: 'nowrap',
+  },
+  /** flex 属性，支持数字或字符串。如 1 或 'none' */
+  flex: {
+    type: [String, Number],
+    default: 'initial',
+  },
+  /** 设置网格之间的间隙 */
+  gap: {
+    type: [String, Number, Array] as PropType<string | number | (string | number)[]>,
+    default: 0,
+  },
+  /** 快捷设置 */
+  basis: {
+    type: [String, Number],
+    default: 'auto',
+  },
+})
+
+// 计算 class
+const cls = computed(() => ['hy-flex', props.vertical && 'hy-flex--vertical'])
+
+// 计算 style
+const style = computed(() => {
+  const gap = isArray(props.gap) ? props.gap : [props.gap, props.gap]
+  const [rowGap, colGap] = gap.map((v) => addUnit(v))
+
+  return {
+    display: 'flex',
+    'justify-content': props.justify,
+    'align-items': props.align,
+    'flex-wrap': props.wrap,
+    flex: props.flex,
+    'flex-basis': props.basis,
+    'row-gap': colGap,
+    'column-gap': rowGap,
+  }
+})
+</script>
+
+<style scoped></style>

package/components/hy-flex/index.scss

@@ -0,0 +1,8 @@
+@use "../../libs/css/mixin.scss" as *;
+@include b(flex) {
+  box-sizing: border-box;
+
+  @include m(vertical) {
+    flex-direction: column;
+  }
+}

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

@@ -0,0 +1,23 @@
+export type FlexAlign = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'
+
+export type FlexJustify = HyApp.JustifyContentType
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
+export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse'
+
+export interface FlexProps {
+  /** 主轴方向，等价于 flex-direction */
+  vertical?: boolean
+  direction?: FlexDirection
+  /** justify-content */
+  justify?: FlexJustify
+  /** align-items */
+  align?: FlexAlign
+  /** flex-wrap */
+  wrap?: FlexWrap
+  /** flex 属性，支持数字或字符串。如 1 或 'none' */
+  flex?: number | string
+  /** 子元素间距，支持数字（px）、字符串或数组 [row, column] */
+  gap?: number | string | [number | string, number | string]
+  /** flex-basis */
+  basis?: number | string
+}

package/components/hy-form/README.md

@@ -0,0 +1,301 @@
+# 表单组件 (hy-form-simple)
+
+一个简单易用的表单组件，包含 `hy-form-simple` 和 `hy-form-item-simple` 两个组件，支持表单验证、数据绑定等功能。
+
+## 组件特性
+
+- ✅ 表单数据双向绑定
+- ✅ 表单验证（必填、长度、类型、自定义验证）
+- ✅ 实时验证和失焦验证
+- ✅ 支持多种表单控件
+- ✅ 灵活的标签布局
+- ✅ 错误信息显示
+- ✅ 表单重置和清除验证
+
+## 基础用法
+
+```vue
+<template>
+  <hy-form-simple
+    ref="formRef"
+    :model="formData"
+    :rules="rules"
+    label-width="80px"
+    @submit="handleSubmit"
+  >
+    <hy-form-item-simple label="用户名" prop="username" required>
+      <hy-input v-model="formData.username" placeholder="请输入用户名" />
+    </hy-form-item-simple>
+    
+    <hy-form-item-simple label="手机号" prop="phone" required>
+      <hy-input v-model="formData.phone" type="number" placeholder="请输入手机号" />
+    </hy-form-item-simple>
+    
+    <hy-form-item-simple label="性别" prop="gender">
+      <hy-radio v-model="formData.gender" :columns="genderOptions" />
+    </hy-form-item-simple>
+  </hy-form-simple>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+
+const formData = reactive({
+  username: '',
+  phone: '',
+  gender: ''
+})
+
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名' },
+    { min: 2, max: 20, message: '用户名长度在 2 到 20 个字符' }
+  ],
+  phone: [
+    { required: true, message: '请输入手机号' },
+    { type: 'phone', message: '请输入正确的手机号' }
+  ]
+}
+
+const formRef = ref()
+
+const handleSubmit = (data: any) => {
+  console.log('表单数据:', data)
+}
+</script>
+```
+
+## API
+
+### hy-form-simple Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| model | 表单数据对象 | `Record<string, any>` | `{}` |
+| rules | 验证规则 | `FormItemRule` | `{}` |
+| labelWidth | 标签宽度 | `string \| number` | `'auto'` |
+| labelPosition | 标签位置 | `'left' \| 'top'` | `'left'` |
+| labelAlign | 标签对齐方式 | `'left' \| 'center' \| 'right'` | `'left'` |
+
+### hy-form-simple Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| submit | 表单提交时触发 | `(data: Record<string, any>)` |
+| validate | 表单验证时触发 | `(valid: boolean, errors: Record<string, string>)` |
+
+### hy-form-simple Methods
+
+| 方法名 | 说明 | 参数 |
+|--------|------|------|
+| validate | 验证表单 | - |
+| resetFields | 重置表单 | - |
+| clearValidate | 清除验证 | `(fields?: string[])` |
+| submit | 提交表单 | - |
+
+### hy-form-item-simple Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| label | 标签文本 | `string` | `''` |
+| prop | 表单字段名 | `string` | `''` |
+| required | 是否必填 | `boolean` | `false` |
+| rules | 验证规则 | `any` | `{}` |
+
+### hy-form-item-simple Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| change | 值变化时触发 | `(value: any)` |
+| blur | 失焦时触发 | `(value: any)` |
+
+### hy-form-item-simple Methods
+
+| 方法名 | 说明 | 参数 |
+|--------|------|------|
+| validate | 验证字段 | `(trigger?: 'blur' \| 'change')` |
+| resetField | 重置字段 | - |
+| clearValidate | 清除验证 | - |
+
+## 验证规则
+
+### 基础验证
+
+```javascript
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名' },
+    { min: 2, max: 20, message: '用户名长度在 2 到 20 个字符' }
+  ]
+}
+```
+
+### 类型验证
+
+```javascript
+const rules = {
+  phone: [
+    { required: true, message: '请输入手机号' },
+    { type: 'phone', message: '请输入正确的手机号' }
+  ],
+  email: [
+    { type: 'email', message: '请输入正确的邮箱格式' }
+  ],
+  password: [
+    { type: 'password', message: '密码格式不正确' }
+  ]
+}
+```
+
+### 自定义验证
+
+```javascript
+const rules = {
+  confirmPassword: [
+    { required: true, message: '请确认密码' },
+    {
+      validator: (value: string) => {
+        if (value !== formData.password) {
+          return '两次输入的密码不一致'
+        }
+        return true
+      }
+    }
+  ]
+}
+```
+
+### 触发时机
+
+```javascript
+const rules = {
+  username: [
+    { 
+      required: true, 
+      message: '请输入用户名',
+      trigger: ['blur', 'change'] // 失焦和变化时都验证
+    }
+  ]
+}
+```
+
+## 支持的表单控件
+
+- `hy-input` - 输入框
+- `hy-textarea` - 文本域
+- `hy-radio` - 单选框
+- `hy-check-button` - 选择按钮
+- `hy-switch` - 开关
+- `hy-picker` - 选择器
+- `hy-datetime-picker` - 时间选择器
+- `hy-address-picker` - 地址选择器
+- 其他自定义组件
+
+## 完整示例
+
+```vue
+<template>
+  <view class="form-demo">
+    <hy-form-simple
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      label-width="100px"
+      label-position="left"
+      @submit="handleSubmit"
+    >
+      <hy-form-item-simple label="用户名" prop="username" required>
+        <hy-input v-model="formData.username" placeholder="请输入用户名" />
+      </hy-form-item-simple>
+      
+      <hy-form-item-simple label="手机号" prop="phone" required>
+        <hy-input v-model="formData.phone" type="number" placeholder="请输入手机号" />
+      </hy-form-item-simple>
+      
+      <hy-form-item-simple label="邮箱" prop="email">
+        <hy-input v-model="formData.email" placeholder="请输入邮箱" />
+      </hy-form-item-simple>
+      
+      <hy-form-item-simple label="性别" prop="gender">
+        <hy-radio v-model="formData.gender" :columns="genderOptions" />
+      </hy-form-item-simple>
+      
+      <hy-form-item-simple label="爱好" prop="hobbies">
+        <hy-check-button
+          v-model="formData.hobbies"
+          :columns="hobbyOptions"
+          select-type="multiple"
+        />
+      </hy-form-item-simple>
+      
+      <hy-form-item-simple label="备注" prop="remark">
+        <hy-textarea v-model="formData.remark" placeholder="请输入备注" />
+      </hy-form-item-simple>
+    </hy-form-simple>
+    
+    <view class="form-actions">
+      <hy-button type="primary" @click="handleSubmit">提交</hy-button>
+      <hy-button @click="handleReset">重置</hy-button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+
+const formData = reactive({
+  username: '',
+  phone: '',
+  email: '',
+  gender: '',
+  hobbies: [],
+  remark: ''
+})
+
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名' },
+    { min: 2, max: 20, message: '用户名长度在 2 到 20 个字符' }
+  ],
+  phone: [
+    { required: true, message: '请输入手机号' },
+    { type: 'phone', message: '请输入正确的手机号' }
+  ],
+  email: [
+    { type: 'email', message: '请输入正确的邮箱格式' }
+  ]
+}
+
+const genderOptions = [
+  { text: '男', value: 'male' },
+  { text: '女', value: 'female' }
+]
+
+const hobbyOptions = [
+  { text: '阅读', value: 'reading' },
+  { text: '音乐', value: 'music' },
+  { text: '运动', value: 'sports' }
+]
+
+const formRef = ref()
+
+const handleSubmit = () => {
+  const result = formRef.value?.submit()
+  if (result) {
+    console.log('表单提交成功:', result)
+  }
+}
+
+const handleReset = () => {
+  formRef.value?.resetFields()
+}
+</script>
+```
+
+## 注意事项
+
+1. 表单组件使用 `provide/inject` 进行数据通信，确保 `hy-form-item-simple` 组件在 `hy-form-simple` 内部使用
+2. 验证规则支持数组形式，可以设置多个验证规则
+3. 自定义验证函数返回 `true` 表示验证通过，返回 `false` 或字符串表示验证失败
+4. 表单数据会自动双向绑定，无需手动处理数据同步
+5. 支持实时验证和失焦验证，可以通过 `trigger` 属性控制验证时机