hy-app 0.5.4 → 0.5.6

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

@@ -33,33 +33,6 @@ export interface FormItemRule {
     [key: string]: FormRule | FormRule[]
 }
 
-export default interface HyFormSimpleProps {
-    /**
-     * 表单数据对象
-     */
-    model?: Record<string, any>
-    /**
-     * 验证规则
-     */
-    rules?: FormItemRule
-    /**
-     * 标签宽度
-     */
-    labelWidth?: string | number
-    /**
-     * 标签位置
-     */
-    labelPosition?: 'left' | 'top'
-    /**
-     * 标签对齐方式
-     */
-    labelAlign?: 'left' | 'center' | 'right'
-    /**
-     * 表单列底部边框
-     * */
-    border: boolean
-}
-
 export interface IFormEmits {
     /** 提交表单 */
     (e: 'submit', data: FormRule): void

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

@@ -4,11 +4,13 @@
             <text v-if="isRequired" class="hy-form-item__label--required">*</text>
             {{ label }}
         </view>
-        <view :class="['hy-form-item__content', formContext.border.value && 'hy-border__bottom']">
-            <slot></slot>
-        </view>
-        <view v-if="errorMessage" class="hy-form-item__error">
-            {{ errorMessage }}
+        <view class="hy-form-item__content">
+            <view :class="[formContext.border.value && 'hy-border__bottom']">
+                <slot></slot>
+            </view>
+            <view v-if="errorMessage" class="hy-form-item__error">
+                {{ errorMessage }}
+            </view>
         </view>
     </view>
 </template>

package/components/hy-form-item/typing.d.ts

@@ -22,25 +22,6 @@ export interface FormItemContext {
     handleChange: (value: string | number) => void
 }
 
-export default interface HyFormItemProps {
-    /**
-     * 标签文本
-     */
-    label?: string
-    /**
-     * 表单字段名
-     */
-    prop?: string
-    /**
-     * 是否必填
-     */
-    required?: boolean
-    /**
-     * 验证规则
-     */
-    rules?: any
-}
-
 export interface IFormItemEmits {
     /** 提交表单 */
     (e: 'change', value: any): void

package/components/hy-grid/props.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, PropType } from 'vue'
-import type HyIconProps from '../hy-icon/typing'
+import type { HyIconProps } from '../hy-icon/typing'
 import type { CustomKeysVo, GridItemVo } from './typing'
 
 const gridProps = {

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

@@ -1,5 +1,4 @@
-import { CSSProperties } from 'vue'
-import type HyIconProps from '../hy-icon/typing'
+import type { HyIconProps } from '../hy-icon/typing'
 
 export interface GridItemVo {
     /**
@@ -30,49 +29,6 @@ export interface CustomKeysVo {
     icon: string
 }
 
-export default interface HyGridProps {
-    /**
-     * @description 数据集
-     * */
-    list: GridItemVo[]
-    /**
-     * @description 自定义键值
-     * */
-    customKeys?: CustomKeysVo
-    /**
-     * @description 宫格的列数（默认 3 ）
-     * */
-    col?: number
-    /**
-     * @description 是否显示宫格的边框（默认 false ）
-     * */
-    border?: boolean
-    /**
-     * @description 单个宫格高度（默认 60px ）
-     * */
-    itemHeight?: number | string
-    /**
-     * @description 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右 （默认 'left' ）
-     * */
-    align?: 'center' | HyApp.LeftRightType
-    /**
-     * @description 间隔（默认 0px）
-     * */
-    gap?: number | string
-    /**
-     * @description 宫格的背景颜色 （默认 'transparent' ）
-     * */
-    bgColor?: string
-    /**
-     * @description 图标属性api配置集合
-     * */
-    iconConfig?: Partial<HyIconProps>
-    /**
-     * @description 定义需要用到的外部样式
-     * */
-    customStyle?: CSSProperties
-}
-
 export interface IGridEmits {
     /** 点击小菜单触发 */
     (e: 'click', name: string | Record<string, any>): void

package/components/hy-icon/props.ts

@@ -74,6 +74,6 @@ const iconProps = {
     customStyle: Object as PropType<CSSProperties>,
     /** 自定义外部类名 */
     customClass: String
-}
+} as const
 
 export default iconProps

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

@@ -1,88 +1,7 @@
-import { CSSProperties } from 'vue'
+import type { ExtractPropTypes } from 'vue'
+import iconProps from './props'
 
-export default interface HyIconProps {
-    /**
-     * @description 图标名称，见示例图标集
-     * */
-    name: string | HyIconConfig
-    /**
-     * @description 图标颜色
-     * */
-    color?: string
-    /**
-     * @description 图标字体大小，单位px （默认 '16px' ）
-     * */
-    size?: string | number
-
-    /**
-     * @description 是否显示粗体 （默认 false ）
-     * */
-    bold?: boolean
-    /**
-     * @description 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
-     * */
-    index?: string | number
-    /**
-     * @description 自定义扩展前缀，方便用户扩展自己的图标库 （默认 'hy-icon' ）
-     * */
-    customPrefix?: string
-    /**
-     * @description 图标右侧的label文字
-     * */
-    label?: string
-    /**
-     * @description label相对于图标的位置，只能right或bottom （默认 'right' ）
-     * */
-    labelPos?: 'right' | 'bottom'
-    /**
-     * @description label字体大小，单位px （默认 '15px' ）
-     * */
-    labelSize?: string | number
-    /**
-     * @description 图标右侧的label文字颜色
-     * */
-    labelColor?: string
-    /**
-     * @description label与图标的距离，单位px （默认 '3px' ）
-     * */
-    space?: string | number
-    /**
-     * @description 图片的mode
-     * */
-    imgMode?: string
-    /**
-     * @description 显示图片小图标时的宽度
-     * */
-    width?: string | number
-    /**
-     * @description 显示图片小图标时的高度
-     * */
-    height?: string | number
-    /**
-     * @description 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途  （默认 0 ）
-     * */
-    top?: number | string
-    /**
-     * @description 是否阻止事件传播 （默认 false ）
-     * */
-    stop?: boolean
-    /**
-     * @description 是否旋转 （默认 false ）
-     * */
-    isRotate?: boolean
-    /**
-     * @description 图标圆角
-     * */
-    round?: string | number
-    /**
-     * @description 自定义样式
-     * */
-    customStyle?: CSSProperties
-    /**
-     * @description 自定义类名
-     * */
-    customClass?: string
-}
+export interface HyIconProps extends ExtractPropTypes<typeof iconProps> {}
 
 export interface IIconEmits {
     /** 点击图标触发 */

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

@@ -1,85 +1,5 @@
-import type { CSSProperties } from 'vue'
 import type { ImageOnErrorEvent, ImageOnLoadEvent } from '@uni-helper/uni-types'
 
-export default interface HyImageProps {
-    /**
-     * @description 图片地址
-     * */
-    src?: string
-    /**
-     * @description 裁剪模式，见官网说明 （默认 'aspectFill' ）
-     * */
-    mode?: HyApp.ImageModeVo
-    /**
-     * @description 宽度，单位任意，如果为数值，则为px单位 （默认 '300' ）
-     * */
-    width?: string | number
-    /**
-     * @description 高度，单位任意，如果为数值，则为px单位 （默认 '225' ）
-     * */
-    height?: string | number
-    /**
-     * @description 图片形状，circle-圆形，square-方形 （默认 'square' ）
-     * */
-    shape?: HyApp.ShapeType
-    /**
-     * @description 圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
-     * */
-    radius?: number | string
-    /**
-     * @description 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 （默认 true ）
-     * */
-    lazyLoad?: boolean
-    /**
-     * @description 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 （默认 true ）
-     * */
-    showMenuByLongPress?: boolean
-    /**
-     * @description 加载中的图标，或者小图片 （默认 'photo' ）
-     * */
-    loadingIcon?: string
-    /**
-     * @description 加载失败的图标，或者小图片 （默认 'error-circle' ）
-     * */
-    errorIcon?: string
-    /**
-     * @description 是否显示加载中的图标或者自定义的slot （默认 true ）
-     * */
-    showLoading?: boolean
-    /**
-     * @description 是否显示加载错误的图标或者自定义的slot （默认 true ）
-     * */
-    showError?: boolean
-    /**
-     * @description 是否需要淡入效果 （默认 true ）
-     * */
-    fade?: boolean
-    /**
-     * @description 只支持网络资源，只对微信小程序有效 （默认 false ）
-     * */
-    webp?: boolean
-    /**
-     * @description 搭配fade参数的过渡时间，单位ms （默认 500 ）
-     * */
-    duration?: number
-    /**
-     * @description 背景颜色，用于深色页面加载图片时，为了和背景色融合  (默认 '#f3f4f6' )
-     * */
-    bgColor?: string
-    /**
-     * @description 是否模糊图片  (默认 false )
-     * */
-    indistinct?: boolean
-    /**
-     * @description 是否预览图片  (默认 false )
-     * */
-    previewImage?: boolean
-    /**
-     * @description 定义需要用到的外部样式
-     * */
-    customStyle?: CSSProperties
-}
-
 export interface IImageEmits {
     /** 点击触发 */
     (e: 'click'): void

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

@@ -40,7 +40,7 @@
                     :type="type"
                     :focus="focus"
                     :cursor="cursor"
-                    :value="String(innerValue)"
+                    :value="innerValue"
                     :auto-blur="autoBlur"
                     :disabled="disabled || readonly"
                     :maxlength="maxlength"
@@ -148,13 +148,14 @@ const innerFormatter = (value: string) => value
 watch(
     () => props.modelValue,
     (newVal) => {
-        if (changeFromInner.value || innerValue.value === newVal) {
-            changeFromInner.value = false // 重要否则会出现双向绑定失效问题https://github.com/ijry/uview-plus/issues/419
+        if (changeFromInner.value || innerValue.value === newVal || newVal === undefined) {
+            changeFromInner.value = false
             return
         }
+        console.log(newVal, 'newVal')
         innerValue.value = newVal
         // 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
-        if (firstChange.value === false && changeFromInner.value === false) {
+        if (!firstChange.value && !changeFromInner.value) {
             valueChange(innerValue.value, true)
         }
         firstChange.value = false
@@ -165,14 +166,14 @@ watch(
 )
 
 /**
- * @description 是否显示清除控件
+ * 是否显示清除控件
  * */
 const isShowClear = computed(() => {
     const { clearable, readonly, disabled } = props
     return clearable && !readonly && !disabled && innerValue.value !== ''
 })
 /**
- * @description 组件的类名
+ * 组件的类名
  * */
 const inputClass = computed((): string => {
     let classes: string[] = [],
@@ -185,7 +186,7 @@ const inputClass = computed((): string => {
 })
 
 /**
- * @description 组件的样式
+ * 组件的样式
  * */
 const wrapperStyle = computed((): CSSProperties => {
     const style: CSSProperties = {}
@@ -200,9 +201,9 @@ const wrapperStyle = computed((): CSSProperties => {
     return Object.assign(style, props.customStyle)
 })
 /**
- * @description 输入框的样式
+ * 输入框的样式
  * */
-const inputStyle = computed((): CSSProperties => {
+const inputStyle = computed(() => {
     return {
         color: props.color,
         fontSize: addUnit(props.fontSize),
@@ -211,7 +212,7 @@ const inputStyle = computed((): CSSProperties => {
 })
 
 /**
- * @description 边框颜色
+ * 边框颜色
  * */
 const borderStyle = computed(() => {
     return (isFocus: boolean) => {
@@ -233,13 +234,10 @@ const borderStyle = computed(() => {
 })
 
 /**
- * @description 当键盘输入时，触发input事件
+ * 当键盘输入时，触发input事件
  */
 const onInput = (e: any) => {
     let { value = '' } = e.detail || {}
-    // 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
-    // console.log('onInput', value, this.innerValue)
-    innerValue.value = value
     nextTick(() => {
         let formatValue = innerFormatter(value)
         innerValue.value = formatValue
@@ -247,7 +245,7 @@ const onInput = (e: any) => {
     })
 }
 /**
- * @description 输入框失去焦点时触发
+ * 输入框失去焦点时触发
  * */
 const onBlur = async (event: InputOnBlurEvent) => {
     emit('blur', event, event.detail.value)
@@ -256,7 +254,7 @@ const onBlur = async (event: InputOnBlurEvent) => {
     focused.value = false
 }
 /**
- * @description 输入框聚焦时触发
+ * 输入框聚焦时触发
  * */
 const onFocus = (e: InputOnFocusEvent) => {
     focused.value = true
@@ -264,7 +262,7 @@ const onFocus = (e: InputOnFocusEvent) => {
 }
 
 /**
- * @description 点击完成按钮时触发
+ * 点击完成按钮时触发
  * */
 const onConfirm = (e: InputOnConfirmEvent) => {
     emit('confirm', e, innerValue.value)
@@ -288,15 +286,14 @@ const valueChange = (value: string | number, isOut = false) => {
         if (!isOut || clearInput.value) {
             // 标识value值的变化是由内部引起的
             changeFromInner.value = true
+            emit('update:modelValue', value)
             emit('change', value)
             if (formItem) formItem.handleChange(value)
-
-            emit('update:modelValue', value)
         }
     })
 }
 /**
- * @description 点击清除控件
+ * 点击清除控件
  */
 const onClear = () => {
     clearInput.value = true
@@ -319,13 +316,13 @@ const clickHandler = () => {
 }
 
 /**
- * @description 点击前缀
+ * 点击前缀
  * */
 const onPrefix = () => {
     emit('onPrefix')
 }
 /**
- * @description 点击后缀
+ * 点击后缀
  * */
 const onSuffix = () => {
     emit('onSuffix')

package/components/hy-input/props.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties, PropType } from 'vue'
 import type { InputConfirmType } from '@uni-helper/uni-types'
-import type HyIconProps from '../hy-icon/typing'
+import type { HyIconProps } from '../hy-icon/typing'
 
 const inputProps = {
     /** 输入的值 */

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

@@ -1,5 +1,3 @@
-import type { CSSProperties } from 'vue'
-import type HyIconProps from '../hy-icon/typing'
 import type {
     InputOnBlurEvent,
     InputOnConfirmEvent,
@@ -7,153 +5,6 @@ import type {
     InputOnKeyboardheightchange
 } from '@uni-helper/uni-types'
 
-export default interface HyInputProps {
-    /**
-     * @description 输入的值
-     * */
-    modelValue: string | number
-    /**
-     * @description 输入框类型，见上方说明 （ 默认 'text' ）
-     * */
-    type?: HyApp.InputType
-    /**
-     * @description 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true，兼容性：微信小程序、百度小程序、字节跳动小程序、QQ小程序 （ 默认 false ）
-     * */
-    fixed?: boolean
-    /**
-     * @description 是否禁用输入框 （ 默认 false ）
-     * */
-    disabled?: boolean
-    /**
-     * @description 禁用状态时的背景色（ 默认 '#f5f7fa' ）
-     * */
-    disabledColor?: string
-    /**
-     * @description 是否显示清除控件 （ 默认 false ）
-     * */
-    clearable?: boolean
-    /**
-     * @description 是否密码类型 （ 默认 false ）
-     * */
-    password?: boolean
-    /**
-     * @description 最大输入长度，设置为 -1 的时候不限制最大长度 （ 默认 -1 ）
-     * */
-    maxlength?: number
-    /**
-     * @description 输入框为空时的占位符
-     * */
-    placeholder?: string | null
-    /**
-     * @description 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ （ 默认 'input-placeholder' ）
-     * */
-    placeholderClass?: string
-    /**
-     * @description 指定placeholder的样式，字符串/对象形式，如"color: red;"
-     * */
-    placeholderStyle?: CSSProperties
-    /**
-     * @description 是否显示输入字数统计，只在 type ="text"或type ="textarea"时有效 （ 默认 false ）
-     * */
-    showWordLimit?: boolean
-    /**
-     * @description 设置右下角按钮的文字，兼容性详见uni-app文档 （ 默认 'done' ）
-     * */
-    confirmType?: string
-    /**
-     * @description 点击键盘右下角按钮时是否保持键盘不收起，H5无效 （ 默认 false ）
-     * */
-    confirmHold?: boolean
-    /**
-     * @description focus时，点击页面的时候不收起键盘，微信小程序有效 （ 默认 false ）
-     * */
-    holdKeyboard?: boolean
-    /**
-     * @description 自动获取焦点，在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点 （ 默认 false ）
-     * */
-    focus?: boolean
-    /**
-     * @description 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效 （ 默认 false ）
-     * */
-    autoBlur?: boolean
-    /**
-     * @description 是否去掉 iOS 下的默认内边距，仅微信小程序，且type=textarea时有效 （ 默认 false ）
-     * */
-    disableDefaultPadding?: boolean
-    /**
-     * @description 指定focus时光标的位置（ 默认 140 ）
-     * */
-    cursor?: number
-    /**
-     * @description 输入框聚焦时底部与键盘的距离 （ 默认 30 ）
-     * */
-    cursorSpacing?: number
-    /**
-     * @description 光标起始位置，自动聚集时有效，需与selection-end搭配使用 （ 默认 -1 ）
-     * */
-    selectionStart?: number
-    /**
-     * @description 光标结束位置，自动聚集时有效，需与selection-start搭配使用 （ 默认 -1 ）
-     * */
-    selectionEnd?: number
-    /**
-     * @description 键盘弹起时，是否自动上推页面 （ 默认 true ）
-     * */
-    adjustPosition?: boolean
-    /**
-     * @description 输入框内容对齐方式（ 默认 'left' ）
-     * */
-    inputAlign?: HyApp.RowCenterType
-    /**
-     * @description 输入框字体的大小 （ 默认 '15px' ）
-     * */
-    fontSize?: string | number
-    /**
-     * @description 输入框字体颜色	（ 默认 '#303133' ）
-     * */
-    color?: string
-    /**
-     * @description 输入框前置图标
-     * */
-    prefixIcon?: Partial<HyIconProps>
-    /**
-     * @description 输入框后置图标
-     * */
-    suffixIcon?: Partial<HyIconProps>
-    /**
-     * @description 边框类型，surround-四周边框，bottom-底部边框，none-无边框 （ 默认 'surround' ）
-     * */
-    border?: HyApp.BorderType
-    /**
-     * @description 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会 （ 默认 false ）
-     * */
-    readonly?: boolean
-    /**
-     * @description 输入框形状，circle-圆形，square-方形 （ 默认 'square' ）
-     * */
-    shape?: HyApp.ShapeType
-    /**
-     * @description 内容式化函数
-     * */
-    formatter?: Function | null
-    /**
-     * @description 定义需要用到的外部样式
-     * */
-    customStyle?: CSSProperties
-    /**
-     * @description 值变化事件
-     * */
-    onChange?: Function
-    /**
-     * @description 失去焦点事件
-     * */
-    onBlur?: Function
-    /**
-     * @description 是否忽略组件内对文本合成系统事件的处理。
-     * */
-    ignoreCompositionEvent?: boolean
-}
-
 export interface IInputEmits {
     /** 输入框失去焦点时触发 */
     (e: 'blur', event: InputOnBlurEvent, value: string | number): void