hy-app 0.2.18 → 0.3.1

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

@@ -0,0 +1,201 @@
+<template>
+  <view
+    class="hy-form-item"
+    :class="[`hy-form-item--${labelPosition}`, formContext.border && 'hy-border__bottom']"
+  >
+    <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, provide, ref } from 'vue'
+import type { PropType } from 'vue'
+import type { FormContext } from './typing'
+import { addUnit } from '../../utils'
+
+/**
+ * 表单组件子组件，需要搭配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 !== 'auto') {
+    style.width = addUnit(formContext.labelWidth)
+  }
+
+  if (formContext.labelAlign) {
+    style.textAlign = formContext.labelAlign
+  }
+
+  return style
+})
+
+// 标签位置
+const labelPosition = computed(() => {
+  return formContext?.labelPosition || '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: $hy-text-color;
+    line-height: 2.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,40 @@
+import HyFormSimpleProps from '../hy-form/typing'
+
+export interface FormContext extends HyFormSimpleProps {
+  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 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)
     }

package/components/hy-login/TheUserLogin.vue

@@ -21,52 +21,52 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from "vue";
-import { onHide } from "@dcloudio/uni-app";
-import { storeToRefs } from "pinia";
-import { useUserInfo } from "../../store";
-import { decryptData, encryptData } from "../../utils";
-import { FormTypeEnum } from "../../typing";
-import { IconConfig } from "../../config";
-import type { UserLoginInfoVo } from "./typing";
+import { ref, reactive, onMounted, computed } from 'vue'
+import { onHide } from '@dcloudio/uni-app'
+import { storeToRefs } from 'pinia'
+import { useUserInfo } from '../../store'
+import { decryptData, encryptData } from '../../utils'
+import { FormTypeEnum } from '../../typing'
+import { IconConfig } from '../../config'
+import type { UserLoginInfoVo } from './typing'
 
 // 组件
-import HyCheckbox from "../hy-checkbox/hy-checkbox.vue";
-import HyForm from "../hy-form/hy-form.vue";
+import HyCheckbox from '../hy-checkbox/hy-checkbox.vue'
+import HyForm from '@/package/components/hy-form-group/hy-form-group.vue'
 
 interface IProps {
-  themeColor: string;
-  prefix: string;
-  isShowPwd: boolean;
-  userPlaceholder: string;
-  pwdPlaceholder: string;
-  customUserValidator: Record<string, any>;
-  customPwdValidator: Record<string, any>;
-  userNumValidator: Record<string, any>;
-  pwdNumValidator: Record<string, any>;
+  themeColor: string
+  prefix: string
+  isShowPwd: boolean
+  userPlaceholder: string
+  pwdPlaceholder: string
+  customUserValidator: Record<string, any>
+  customPwdValidator: Record<string, any>
+  userNumValidator: Record<string, any>
+  pwdNumValidator: Record<string, any>
 }
 
 const props = withDefaults(defineProps<IProps>(), {
-  themeColor: "",
-  prefix: "hy",
+  themeColor: '',
+  prefix: 'hy',
   isShowPwd: false,
-  userPlaceholder: "",
-  pwdPlaceholder: "",
+  userPlaceholder: '',
+  pwdPlaceholder: '',
   customUserValidator: () => ({}),
   customPwdValidator: () => ({}),
   userNumValidator: () => ({}),
   pwdNumValidator: () => ({}),
-});
-const emit = defineEmits(["handleHistory", "handleCheckbox"]);
-const userInfoStore = useUserInfo();
-const { userForm, choiceList, rememberPsw } = storeToRefs(userInfoStore);
+})
+const emit = defineEmits(['handleHistory', 'handleCheckbox'])
+const userInfoStore = useUserInfo()
+const { userForm, choiceList, rememberPsw } = storeToRefs(userInfoStore)
 
-const showChoice = ref<boolean>(false);
-const showPwd = ref<boolean>(false);
+const showChoice = ref<boolean>(false)
+const showPwd = ref<boolean>(false)
 const userColumns = computed(() => [
   {
-    field: "userName",
-    label: "",
+    field: 'userName',
+    label: '',
     type: FormTypeEnum.TEXT,
     input: {
       clearable: true,
@@ -76,20 +76,18 @@ const userColumns = computed(() => [
         color: props.themeColor,
       },
       suffixIcon: {
-        name: showChoice.value
-          ? IconConfig.ARROW_UP_FILL
-          : IconConfig.ARROW_DOWN_FILL,
+        name: showChoice.value ? IconConfig.ARROW_UP_FILL : IconConfig.ARROW_DOWN_FILL,
         color: props.themeColor,
       },
       onSuffix: () => {
-        showChoice.value = !showChoice.value;
+        showChoice.value = !showChoice.value
       },
     },
     rules: [props.customUserValidator, props.userNumValidator],
   },
   {
-    field: "password",
-    label: "",
+    field: 'password',
+    label: '',
     type: showPwd.value ? FormTypeEnum.TEXT : FormTypeEnum.PASSWORD,
     input: {
       clearable: true,
@@ -103,22 +101,22 @@ const userColumns = computed(() => [
         color: props.themeColor,
       },
       onSuffix: () => {
-        showPwd.value = !showPwd.value;
+        showPwd.value = !showPwd.value
       },
     },
     rules: [props.customUserValidator, props.pwdNumValidator],
   },
-]);
-const rememberList = reactive([{ label: "记住密码", value: 1 }]);
-const form_1Ref = ref<InstanceType<typeof HyForm>>();
+])
+const rememberList = reactive([{ label: '记住密码', value: 1 }])
+const form_1Ref = ref<InstanceType<typeof HyForm>>()
 // 效验用户名和密码
 const userRules = reactive({
   userName: [
     {
       required: true,
-      message: "请先输入账号",
+      message: '请先输入账号',
       // 可以单个或者同时写两个触发验证方式
-      trigger: ["blur", "change"],
+      trigger: ['blur', 'change'],
     },
     props.customUserValidator,
     props.userNumValidator,
@@ -126,44 +124,44 @@ const userRules = reactive({
   password: [
     {
       required: true,
-      message: "请输入密码",
+      message: '请输入密码',
       // 可以单个或者同时写两个触发验证方式
-      trigger: ["blur", "change"],
+      trigger: ['blur', 'change'],
     },
     props.pwdNumValidator,
     props.customPwdValidator,
   ],
-});
-const rememberPassword = ref(false);
-const account = uni.getStorageSync(`${props.prefix}_account`);
-const accountList = uni.getStorageSync(`${props.prefix}_choiceList`);
+})
+const rememberPassword = ref(false)
+const account = uni.getStorageSync(`${props.prefix}_account`)
+const accountList = uni.getStorageSync(`${props.prefix}_choiceList`)
 
 onMounted(() => {
-  if (!account) return;
-  const result = decryptData(account);
-  console.log(result);
+  if (!account) return
+  const result = decryptData(account)
+  console.log(result)
   //有缓存就赋值给文本没有就清空
-  rememberPsw.value = result?.rememberPsw;
+  rememberPsw.value = result?.rememberPsw
   //获取缓存的账号和密码
-  userForm.value.userName = result?.userName;
-  userForm.value.password = result?.password;
+  userForm.value.userName = result?.userName
+  userForm.value.password = result?.password
 
   if (accountList) {
-    choiceList.value = decryptData(accountList) as UserLoginInfoVo[];
+    choiceList.value = decryptData(accountList) as UserLoginInfoVo[]
   }
-});
+})
 
 onHide(() => {
   // if (!account) return;
   //获取缓存的账号和密码
-  const { userName, password } = decryptData(account);
+  const { userName, password } = decryptData(account)
   if (choiceList.value.length) {
     // 过滤数判断是否有一样的账号
     const filterArr = choiceList.value.filter((item) => {
-      return item.user === userName;
-    });
+      return item.user === userName
+    })
     // 有一样的账号退出函数不执行下面的
-    if (filterArr.length) return;
+    if (filterArr.length) return
   }
   // 判断是否有保存账号和密码
   if (userName && password) {
@@ -171,17 +169,14 @@ onHide(() => {
     choiceList.value.unshift({
       user: userName,
       pwd: password,
-    });
+    })
     // 数组最多只放三个账号
     if (choiceList.value.length >= 5) {
-      choiceList.value.splice(5, 1);
+      choiceList.value.splice(5, 1)
     }
-    uni.setStorageSync(
-      `${props.prefix}_choiceList`,
-      encryptData(choiceList.value),
-    );
+    uni.setStorageSync(`${props.prefix}_choiceList`, encryptData(choiceList.value))
   }
-});
+})
 
 /**
  * 登录效验
@@ -191,30 +186,30 @@ const loginFn = () => {
     form_1Ref.value
       ?.handleSubmit()
       .then((res) => {
-        resolve("success" + res);
+        resolve('success' + res)
       })
       .catch((err) => {
-        reject("error" + err);
-      });
-  });
-};
+        reject('error' + err)
+      })
+  })
+}
 
 /**
  * 勾选是否记住密码
  * */
 const checkboxChange = () => {
-  emit("handleCheckbox", rememberPassword.value);
-};
+  emit('handleCheckbox', rememberPassword.value)
+}
 
 /**
  * 选择历史账号
  * */
 const btnChoiceClick = (index: number) => {
-  showChoice.value = false;
-  userForm.value.name = choiceList.value[index].user;
-  userForm.value.pwd = choiceList.value[index].pwd;
-  emit("handleHistory");
-};
+  showChoice.value = false
+  userForm.value.name = choiceList.value[index].user
+  userForm.value.pwd = choiceList.value[index].pwd
+  emit('handleHistory')
+}
 
 /**
  * 长按操作历史账户
@@ -224,21 +219,18 @@ const btnChoiceClick = (index: number) => {
 const extensionFun = (index: number, username: string) => {
   switch (index) {
     case 0:
-      const i = choiceList.value.findIndex((item) => item.user === username);
-      choiceList.value.splice(i, 1);
-      uni.setStorageSync(
-        `${props.prefix}_choiceList`,
-        encryptData(choiceList.value),
-      );
-      break;
+      const i = choiceList.value.findIndex((item) => item.user === username)
+      choiceList.value.splice(i, 1)
+      uni.setStorageSync(`${props.prefix}_choiceList`, encryptData(choiceList.value))
+      break
     default:
-      break;
+      break
   }
-};
+}
 
 defineExpose({
   loginFn,
-});
+})
 </script>
 
 <style lang="scss" scoped>

package/components/hy-swipe-action/hy-swipe-action.vue

@@ -28,8 +28,8 @@
           <view v-if="!slots.left" class="hy-swipe-action--right__action">
             <view
               class="hy-swipe-action--right__action-btn"
-              :style="item.style"
               v-for="(item, i) in options"
+              :style="item.style"
               @tap.stop="onActiveClick(item, i)"
             >
               {{ item.text }}
@@ -61,10 +61,15 @@ import {
   ref,
   watch,
   useSlots,
-  PropType,
+  type PropType,
 } from 'vue'
-import type { ISwipeActionEmits } from './typing'
-import type { SwipeActionStatus, SwipeActionPosition, SwipeActionReason } from './typing'
+import type {
+  ISwipeActionEmits,
+  SwipeActionStatus,
+  SwipeActionPosition,
+  SwipeActionReason,
+  SwipeActionOptionsVo,
+} from './typing'
 import { useTouch } from '../../composables'
 import { closeOther, pushToQueue, removeFromQueue } from './index'
 import { getRect, guid } from '../../utils'
@@ -81,7 +86,7 @@ const props = defineProps({
    * 滑动按钮的状态，使用v-model进行双向绑定。
    * @values left,close,right
    * */
-  modelValue: String,
+  modelValue: String as PropType<SwipeActionStatus>,
   /** 是否禁用滑动操作 */
   disabled: {
     type: Boolean,
@@ -94,7 +99,7 @@ const props = defineProps({
   },
   /** 右侧按钮内容 */
   options: {
-    type: Array as unknown as PropType<SwipeActionStatus>,
+    type: Array as unknown as PropType<SwipeActionOptionsVo[]>,
     default: () => [
       {
         text: '收藏',
@@ -115,6 +120,8 @@ const props = defineProps({
     type: Number,
     default: 300,
   },
+  /** 关闭滑动按钮前的钩子函数 */
+  beforeClose: Function,
 })
 const emit = defineEmits<ISwipeActionEmits>()
 const leftClass = `hy-swipe-action--left--${guid()}`

package/components/hy-swipe-action/typing.d.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties, PropType } from 'vue'
 
-interface SwipeActionOptionsVo {
+export interface SwipeActionOptionsVo {
   text: string
   style?: CSSProperties
   icon?: string