hy-app 0.2.18 → 0.3.1

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

@@ -18,8 +18,10 @@ import HyDropdown from './hy-dropdown/hy-dropdown.vue'
 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 HyFoldingPanel from '@/package/components/hy-folding-panel/hy-folding-panel.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

@@ -22,9 +22,12 @@ declare module 'vue' {
     HyDropdown: (typeof import('./components/hy-dropdown/hy-dropdown.vue'))['default']
     HyDropdownItem: (typeof import('./components/hy-dropdown-item/hy-dropdown-item.vue'))['default']
     HyEmpty: (typeof import('./components/hy-empty/hy-empty.vue'))['default']
+    HyFlex: (typeof import('./components/hy-flex/hy-flex.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.1",
+  "description": "feat: 弹性布局组件",
   "main": "./index.ts",
   "private": false,
   "scripts": {},

package/theme.scss

@@ -40,14 +40,14 @@ $hy-text-color--hover: var(--hy-text-color--hover, #58595b)!default; // 点击
 /* 背景色 */
 $hy-background: var(--hy-background, #f8f8f8) !default; // 背景色
 $hy-background--2: var(--hy-background--2, #ffffff) !default; // 弹窗背景色
-$hy-background--3: var(--hy-background--3, #646566) !default; // 弹窗背景色
+$hy-background--3: var(--hy-background--3, rgb(238, 238, 239)) !default; // 弹窗背景色
 $hy-background--container: var(--hy-background--container, #ffffff) !default; // 容器背景色
-$hy-background--disabled: var(--hy-background--disabled, #F5F5F5); // 禁用背景色
+$hy-background--disabled: var(--hy-background--disabled, rgba(0, 0, 0, 0.04)); // 禁用背景色
 $hy-background--track: var(--hy-background--track, #F6F6F6) !default; // 轨道背景色
 $hy-background--empty: var(--hy-background--empty, #F3F3F3) !default; // 搜索背景色
-$hy-background--hover: var(--hy-background--hover, rgba(0,0,0,0.1)) !default; // 点击状态
+$hy-background--hover: var(--hy-background--hover, rgba(0,0,0,0.05)) !default; // 点击状态
 $hy-light-background-mask: var(--hy-light-background-mask, rgba(0, 0, 0, 0.5)); //遮罩颜色
-$hy-background--active: var(--hy-background--active, #131313); // 选中背景色
+$hy-background--active: var(--hy-background--active, #FFFFFF); // 选中背景色
 $hy-background--close: var(--hy-background--close, #f0f0f0); // 选中背景色
 
 /* 文字尺寸 */
@@ -88,4 +88,4 @@ $hy-border-margin-padding-sm: var(--hy-border-margin-padding-sm, 10rpx) !default
 $hy-border-margin-padding-base: var(--hy-border-margin-padding-base, 20rpx) !default;
 $hy-border-margin-padding-lg: var(--hy-border-margin-padding-lg, 30rpx) !default;
 /* 底部线条 */
-$hy-border-line: var(--hy-border-line, 1rpx solid rgba(0, 0, 0, 0.02)) !default;
+$hy-border-line: var(--hy-border-line, 1rpx solid #e8e8e8) !default;

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
   })
 }