hy-app 0.2.18 → 0.3.0

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.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

package/components/hy-textarea/hy-textarea.vue

@@ -57,10 +57,11 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, toRefs, watch, nextTick } from 'vue'
+import { computed, ref, toRefs, watch, nextTick, inject } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import type { ITextareaEmits } from './typing'
 import { addUnit } from '../../utils'
+import { FormItemContext } from '@/package/components/hy-form-item/typing'
 
 /**
  * 用于输入多行文本信息,聊天输入框等。
@@ -177,6 +178,7 @@ const props = defineProps({
 })
 const { modelValue, customStyle, border, disabled, formatter } = toRefs(props)
 const emit = defineEmits<ITextareaEmits>()
+const formItem = inject<FormItemContext>('formItem')
 
 // 输入框的值
 const innerValue = ref<string>('')
@@ -249,16 +251,17 @@ const onFocus = (e: FocusEvent) => {
   isFocus.value = true
   emit('focus', e)
 }
-const onBlur = (e: FocusEvent) => {
+const onBlur = (e: any) => {
   isFocus.value = false
   emit('blur', e)
+  formItem.handleBlur(e.detail.value)
   // 尝试调用u-form的验证方法
   // formValidate(this, "blur");
 }
-const onLinechange = (e: Event) => {
-  emit('linechange', e)
+const onLinechange = (e: any) => {
+  emit('lineChange', e)
 }
-const onInput = (e: Event) => {
+const onInput = (e: any) => {
   let { value } = e?.detail
   // 格式化过滤方法
   const format = formatter.value || innerFormatter
@@ -280,8 +283,7 @@ const valueChange = () => {
     // 标识value值的变化是由内部引起的
     changeFromInner.value = true
     emit('change', value)
-    // 尝试调用u-form的验证方法
-    // formValidate(this, "change");
+    formItem.handleChange(value)
   })
 }
 const onConfirm = (e: Event) => {

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

@@ -36,7 +36,7 @@ export interface ITextareaEmits {
   /** 点击完成时， 触发 confirm 事件 */
   (e: 'confirm', event: any): void
   /** 输入框行数变化时调用 */
-  (e: 'linechange'): void
+  (e: 'lineChange', event: any): void
   /** 当键盘输入时，触发 input 事件 */
   (e: 'update:modelValue', value: string): void
   /** 键盘高度发生变化的时候触发此事件 */

package/components/index.ts

@@ -19,7 +19,9 @@ import HyDropdownItem from './hy-dropdown-item/hy-dropdown-item.vue'
 import YkEmpty from './hy-empty/hy-empty.vue'
 import YkFloatButton from './hy-float-button/hy-float-button.vue'
 import HyFoldingPanel from './hy-folding-panel/hy-folding-panel.vue'
-import HyForm from './hy-form/hy-form.vue'
+import HyForm from '@/package/components/hy-form-group/hy-form.vue'
+import HyFormSimple from '@/package/components/hy-form/hy-form-simple.vue'
+import HyFormItem from './hy-form-item/hy-form-item.vue'
 import HyGrid from './hy-grid/hy-grid.vue'
 import HyIcon from './hy-icon/hy-icon.vue'
 import HyImage from './hy-image/hy-image.vue'
@@ -80,6 +82,8 @@ const install = (Vue: any) => {
   Vue.component('YkFloatButton', YkFloatButton)
   Vue.component('HyFoldingPanel', HyFoldingPanel)
   Vue.component('HyForm', HyForm)
+  Vue.component('HyFormSimple', HyFormSimple)
+  Vue.component('HyFormItem', HyFormItem)
   Vue.component('HyGrid', HyGrid)
   Vue.component('HyIcon', HyIcon)
   Vue.component('HyImage', HyImage)
@@ -139,6 +143,8 @@ export {
   YkFloatButton,
   HyFoldingPanel,
   HyForm,
+  HyFormSimple,
+  HyFormItem,
   HyGrid,
   HyIcon,
   HyImage,

package/global.d.ts

@@ -24,7 +24,9 @@ declare module 'vue' {
     HyEmpty: (typeof import('./components/hy-empty/hy-empty.vue'))['default']
     HyFloatButton: (typeof import('./components/hy-float-button/hy-float-button.vue'))['default']
     HyFloatingPanel: (typeof import('./components/hy-floating-panel/hy-floating-panel.vue'))['default']
-    HyForm: (typeof import('./components/hy-form/hy-form.vue'))['default']
+    HyForm: (typeof import('@/package/components/hy-form-group/hy-form.vue'))['default']
+    HyFormItem: (typeof import('./components/hy-form-item/hy-form-item.vue'))['default']
+    HyFormGroup: (typeof import('./components/hy-form-group/hy-form-group.vue'))['default']
     HyGrid: (typeof import('./components/hy-grid/hy-grid.vue'))['default']
     HyIcon: (typeof import('./components/hy-icon/hy-icon.vue'))['default']
     HyImage: (typeof import('./components/hy-image/hy-image.vue'))['default']

package/libs/css/mixin.scss

@@ -11,6 +11,7 @@
   }
 }
 
+/* 加上-- */
 @mixin m($modifier) {
   $selector: &;
   $currentSelector: '';
@@ -29,7 +30,7 @@
   }
 }
 
-/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
+/* 定义元素（e）__，对于伪类，会自动将 e 嵌套在 伪类 底下 */
 @mixin e($element...) {
   $selector: &;
   $selectors: "";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.2.18",
-  "description": "bug修复",
+  "version": "0.3.0",
+  "description": "添加分离式表单组件",
   "main": "./index.ts",
   "private": false,
   "scripts": {},

package/utils/inspect.ts

@@ -1,7 +1,7 @@
 /**
  * @description 判断字符串是否是数字
- * @param {string | number} text 值
- * @return {boolean}
+ * @param {String | Number} text 值
+ * @return {Boolean}
  * */
 export const isNumericString = (text: string | number): boolean => {
   return typeof text === 'string' && !isNaN(Number(text))
@@ -9,8 +9,8 @@ export const isNumericString = (text: string | number): boolean => {
 
 /**
  * @description 判断是否是数字
- * @param {string | number} text 值
- * @return {boolean}
+ * @param {String | Number} text 值
+ * @return {Boolean}
  * */
 export const isNumber = (text: string | number): boolean => {
   return typeof text === 'number' || isNumericString(text)
@@ -18,8 +18,8 @@ export const isNumber = (text: string | number): boolean => {
 
 /**
  * @description 判断是否数组
- * @param arr 传入数组值
- * @return {boolean}
+ * @param {any} arr 传入数组值
+ * @return {Boolean}
  */
 export const isArray = (arr: any): arr is Array<any> => {
   // 如果 Array.isArray 函数可用，直接使用该函数检查
@@ -33,12 +33,32 @@ export const isArray = (arr: any): arr is Array<any> => {
 /**
  * @description 判断是否对象
  * @param obj 传入对象值
- * @return {boolean}
+ * @return {Boolean}
  */
 export const isObject = (obj: any): obj is Object => {
   return Object.prototype.toString.call(obj) === '[object Object]'
 }
 
+/**
+ * @description 是否为base64图片
+ * @param {String} url
+ * @return
+ */
+export function isBase64Image(url: string) {
+  // 使用正则表达式检查URL是否以"data:image"开头，这是Base64图片的常见前缀
+  return /^data:image\/(png|jpg|jpeg|gif|bmp);base64,/.test(url)
+}
+
+/**
+ * @description 是否图片
+ * @param {String} url
+ * @return
+ */
+export function isImage(url: string) {
+  // 使用正则表达式检查URL是否以"data:image"开头，这是Base64图片的常见前缀
+  return /(\.jpg|\.jpeg|\.png|\.gif|\.bmp|\.webp)$/i.test(url)
+}
+
 /**
  * 是否视频格式
  * @param {String} value
@@ -50,7 +70,7 @@ export function isVideo(value: string): boolean {
 
 /**
  * 判断是否是日期格式
- * @param {number | string} value yyyy-mm-dd hh:mm:ss 或 时间戳
+ * @param {Number | String} value yyyy-mm-dd hh:mm:ss 或 时间戳
  */
 export const isDate = (value: string | number) => {
   if (!value) return false
@@ -88,7 +108,7 @@ export const isDate = (value: string | number) => {
 
 /**
  * @description 验证是否是手机号格式
- * @param phone {string} 手机号
+ * @param {String} phone 手机号
  */
 export const isPhone = (phone: string): boolean => {
   return /^1[23456789]\d{9}$/.test(phone)
@@ -96,8 +116,8 @@ export const isPhone = (phone: string): boolean => {
 
 /**
  * @description 验证身份证号码
- * @param idCard {string} 身份证号
- * @return {boolean}
+ * @param {String} idCard 身份证号
+ * @return {Boolean}
  */
 export const isIdCard = (idCard: string): boolean => {
   return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(idCard)
@@ -105,34 +125,14 @@ export const isIdCard = (idCard: string): boolean => {
 
 /**
  * @description 验证是否是中文
- * @param {string} zh 校验值
- * @return {boolean}
+ * @param {String} zh 校验值
+ * @return {Boolean}
  */
 export const isChinese = (zh: string): boolean => {
   const reg = /^[\u4e00-\u9fa5]+$/gi
   return reg.test(zh)
 }
 
-/**
- * @description 是否为base64图片
- * @param {string} url
- * @return
- */
-export function isBase64Image(url: string) {
-  // 使用正则表达式检查URL是否以"data:image"开头，这是Base64图片的常见前缀
-  return /^data:image\/(png|jpg|jpeg|gif|bmp);base64,/.test(url)
-}
-
-/**
- * @description 是否图片
- * @param {string} url
- * @return
- */
-export function isImage(url: string) {
-  // 使用正则表达式检查URL是否以"data:image"开头，这是Base64图片的常见前缀
-  return /(\.jpg|\.jpeg|\.png|\.gif|\.bmp|\.webp)$/i.test(url)
-}
-
 /**
  * @description 判断环境是否是H5
  */

package/utils/utils.ts

@@ -364,7 +364,7 @@ export type RectResultType<T extends boolean> = T extends true ? UniApp.NodeInfo
  * @param ins 在微信小程序里，因为utils文件里面获取不到instance值所以必须通过ins这个传过来
  * @param useFields 是否使用 fields 方法获取节点信息
  */
-const getRect = (
+const getRect = <T extends boolean>(
   selector: string,
   all?: T,
   ins?: any,
@@ -395,24 +395,6 @@ const getRect = (
     } else {
       query[method](selector).boundingClientRect(callback).exec()
     }
-    // // #ifdef MP-WEIXIN
-    // instance = ins;
-    // // #endif
-    // // #ifndef APP-NVUE
-    // uni
-    //   .createSelectorQuery()
-    //   .in(instance)
-    //   [all ? "selectAll" : "select"](selector)
-    //   .boundingClientRect((rect) => {
-    //     if (all && Array.isArray(rect) && rect.length) {
-    //       resolve(rect as UniApp.NodeInfo[]);
-    //     }
-    //     if (!all && rect) {
-    //       resolve(rect as UniApp.NodeInfo);
-    //     }
-    //   })
-    //   .exec();
-    // // #endif
   })
 }