hy-app 0.6.9 → 0.7.1

package/components/hy-tabs/index.scss

@@ -68,11 +68,11 @@
       }
     }
   }
+}
 
-  .swiper-item {
-    width: 100%;
-    height: 100%;
-    @include flex(column);
-    box-sizing: border-box;
-  }
+.swiper-item {
+  width: 100%;
+  height: 100%;
+  @include flex(column);
+  box-sizing: border-box;
 }

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

@@ -1,33 +1,41 @@
-import BadgeProps from '../hy-badge/typing'
-export interface TabsItemVo extends AnyObject {
-    /**
-     * @description tab名称
-     * */
-    name: string
-    /**
-     * @description 徽标接收的props
-     * */
-    badge?: BadgeProps
-    /**
-     * @description 是否禁用
-     * */
-    disabled?: boolean
-    /**
-     * @description swiper内容值
-     * */
-    content?: any
-}
-
-export interface TabsParamsVo extends TabsParamsVo {
-    index: number
-}
-export interface ITabsEmits {
-    /** 点击标签时触发 */
-    (e: 'click', params: TabsParamsVo): void
-    /** 标签索引改变时触发 */
-    (e: 'change', item: TabsItemVo, index: number): void
-    /** 长按标签时触发 */
-    (e: 'longPress', params: TabsParamsVo): void
-    /** 标签索引改变时触发 */
-    (e: 'update:current', index: number): void
-}
+import type { HyBadgeProps } from '../../index'
+export interface TabsItemVo {
+    /**
+     * tab名称
+     * */
+    name: string
+    /**
+     * 徽标接收的props
+     * */
+    badge?: HyBadgeProps
+    /**
+     * 是否禁用
+     * */
+    disabled?: boolean
+    /**
+     * swiper内容值
+     * */
+    content?: any
+    [key: string]: any
+}
+
+export interface ITabsExpose {
+    /**
+     * 计算滑块距离左边距离
+     * */
+    resize: () => void
+}
+
+export interface TabsParamsVo extends TabsParamsVo {
+    index: number
+}
+export interface ITabsEmits {
+    /** 点击标签时触发 */
+    (e: 'click', params: TabsParamsVo): void
+    /** 标签索引改变时触发 */
+    (e: 'change', item: TabsItemVo, index: number): void
+    /** 长按标签时触发 */
+    (e: 'longPress', params: TabsParamsVo): void
+    /** 标签索引改变时触发 */
+    (e: 'update:current', index: number): void
+}

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

@@ -125,7 +125,7 @@ const textareaStyle = computed(() => {
     return Object.assign(style, props.customStyle)
 })
 /**
- * @description 边框颜色
+ * 边框颜色
  * */
 const borderStyle = computed(() => {
     return (isFocus: boolean) => {
@@ -173,7 +173,7 @@ const onInput = (e: any) => {
     })
 }
 /**
- * @description 内容发生变化，进行处理
+ * 内容发生变化，进行处理
  * */
 const valueChange = () => {
     const value = innerValue.value

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

@@ -3,6 +3,10 @@ import type {
     InputOnConfirmEvent,
     InputOnFocusEvent
 } from '@uni-helper/uni-types'
+import type { ExtractPropTypes } from 'vue'
+import type textareaProps from './props'
+
+export interface HyTextareaProps extends ExtractPropTypes<typeof textareaProps> {}
 
 export interface ITextareaEmits {
     /** 输入框失去焦点时触发 */

package/components/hy-toast/hy-toast.vue

@@ -1,8 +1,8 @@
 <template>
     <hy-overlay
         :show="isShow"
-        :zIndex="tmpConfig.overlay ? 10070 : -1"
-        :LockScroll="false"
+        :LockScroll="!tmpConfig.overlay"
+        :opacity="tmpConfig.cover ? 0.5 : 0"
         :custom-style="overlayStyle"
     >
         <view :style="[contentStyle]" :class="contentClass">
@@ -18,7 +18,13 @@
                 v-else-if="iconNameCom"
                 :class="['hy-toast__content--icon', `hy-toast__content--icon__${tmpConfig.type}`]"
             >
-                <hy-icon :name="iconNameCom" size="17" color="#FFFFFF"></hy-icon>
+                <hy-icon
+                    :name="iconNameCom"
+                    :size="(typeof tmpConfig.icon === 'object' && tmpConfig.icon?.size) || 17"
+                    :color="
+                        (typeof tmpConfig.icon === 'object' && tmpConfig.icon?.color) || '#FFFFFF'
+                    "
+                ></hy-icon>
             </view>
             <text
                 :class="[
@@ -48,8 +54,8 @@ export default {
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
 import type { CSSProperties } from 'vue'
-import type ToastOptions from './typing'
-import { ColorConfig, iconName, getWindowInfo, hexToRgb, deepMerge } from '../../libs'
+import type { IToastExpose, ToastOptions } from './typing'
+import { ColorConfig, iconName, getWindowInfo, hexToRgb } from '../../libs'
 // 组件
 import HyOverlay from '../hy-overlay/hy-overlay.vue'
 import HyIcon from '../hy-icon/hy-icon.vue'
@@ -85,8 +91,6 @@ const overlayStyle = computed(() => {
         display: 'flex',
         flexDirection: 'column'
     }
-    // 将遮罩设置为100%透明度，避免出现灰色背景
-    style.backgroundColor = 'rgba(0, 0, 0, 0)'
     return style
 })
 
@@ -102,7 +106,11 @@ const iconNameCom = computed(() => {
             return ''
         }
     } else {
-        return tmpConfig.value.icon
+        const icon = tmpConfig.value.icon
+        if (typeof icon === 'string') {
+            return icon
+        }
+        return icon?.name
     }
 })
 
@@ -189,7 +197,7 @@ const clearTimer = () => {
     // config.loading = false
 }
 
-defineExpose({
+defineExpose<IToastExpose>({
     show,
     hide
 })

package/components/hy-toast/index.scss

@@ -13,7 +13,7 @@
     max-width: 600rpx;
     /* #endif */
     position: relative;
-    z-index: 10090;
+    z-index: 11000;
 
     @include m(loading) {
       flex-direction: column;

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

@@ -1,38 +1,57 @@
-export default interface ToastOptions {
-  /**
-   * @description 显示文本
-   * */
-  message?: string;
-  /**
-   * @description 主题类型，primary，success，error，warning，info
-   * */
-  type?: HyApp.ThemeType | "";
-  /**
-   * @description toast出现的位置
-   * */
-  position?: HyApp.ColumnCenterType;
-  /**
-   * @description 显示的图标
-   * */
-  icon?: boolean | string;
-  /**
-   * @description 是否防止触摸穿透
-   * */
-  overlay?: boolean;
-  /**
-   * @description 是否加载中状态
-   * */
-  loading?: boolean;
-  /**
-   * @description 加载状态
-   * */
-  loadMode?: HyApp.LoadingMode;
-  /**
-   * @description 显示的时间，毫秒
-   * */
-  duration?: number;
-  /**
-   * @description 执行完后的回调函数
-   * */
-  complete?: Function | null;
+import type { HyIconProps } from '../hy-icon/typing'
+
+export interface ToastOptions {
+    /**
+     * 显示文本
+     * */
+    message?: string
+    /**
+     * 主题类型，primary，success，error，warning，info
+     * */
+    type?: HyApp.ThemeType | ''
+    /**
+     * toast出现的位置
+     * */
+    position?: HyApp.ColumnCenterType
+    /**
+     * 显示的图标
+     * */
+    icon?: boolean | string | HyIconProps
+    /**
+     * 是否防止触摸穿透
+     * */
+    overlay?: boolean
+    /**
+     * 是否显示透明遮罩层
+     * */
+    cover?: boolean
+    /**
+     * 是否加载中状态
+     * */
+    loading?: boolean
+    /**
+     * 加载状态
+     * */
+    loadMode?: HyApp.LoadingMode
+    /**
+     * 显示的时间，毫秒
+     * */
+    duration?: number
+    /**
+     * 执行完后的回调函数
+     * */
+    complete?: Function | null
+}
+
+/** HyToast 组件实例暴露的方法 */
+export interface IToastExpose {
+    /**
+     * 显示 Toast
+     * @param options Toast 配置选项
+     */
+    show: (options: ToastOptions) => void
+    /**
+     * 隐藏 Toast
+     */
+    hide: () => void
 }

package/components/hy-tooltip/hy-tooltip.vue

@@ -2,7 +2,7 @@
     <view class="hy-tooltip">
         <hy-overlay
             :show="showTooltip && tooltipTop !== -10000 && overlay"
-            :customStyle="{ backgroundColor: 'rgba(0, 0, 0, 0)' }"
+            :opacity="0"
             @click="closeHandler"
         ></hy-overlay>
         <!-- 文本内容区域 -->

package/components/hy-tooltip/index.scss

@@ -76,6 +76,7 @@ $hy-tooltip--background-color: rgb(50, 50, 51);
         @include m(text) {
           font-size: 13px;
           color: #ffffff;
+          white-space: nowrap;
         }
       }
     }

package/components/hy-tooltip/props.ts

@@ -21,7 +21,7 @@ const tooltipProps = {
     },
     /**
      * 指定 popover 的放置位置
-     * @values top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end
+     * @values top,bottom,left,right
      * */
     placement: {
         type: String,

package/components/hy-upload/hy-upload.vue

@@ -68,7 +68,10 @@
                     <!-- 删除图片图标 -->
 
                     <!-- 上传成功图标 -->
-                    <view class="hy-upload__success" v-if="item.status === 'success'">
+                    <view
+                        class="hy-upload__status hy-upload__success"
+                        v-if="item.status === 'success'"
+                    >
                         <view class="hy-upload__success--icon">
                             <hy-icon
                                 :name="IconConfig.CHECK_MASK"
@@ -77,6 +80,18 @@
                             ></hy-icon>
                         </view>
                     </view>
+                    <view
+                        class="hy-upload__status hy-upload__error"
+                        v-if="item.status === 'failed'"
+                    >
+                        <view class="hy-upload__success--icon">
+                            <hy-icon
+                                :name="IconConfig.CLOSE_CIRCLE"
+                                color="#ffffff"
+                                size="12"
+                            ></hy-icon>
+                        </view>
+                    </view>
                     <!-- 上传成功图标 -->
                 </view>
             </template>

package/components/hy-upload/index.scss

@@ -1,145 +1,150 @@
-@use "../../libs/css/mixin" as *;
-@use "../../libs/css/theme" as *;
-
-$hy-upload-image-width: 80px !default;
-$hy-upload-text-font-size: 11px !default;
-
-
-@include b(upload) {
-  @include flex(column);
-  flex: 1;
-
-  @include e(wrap) {
-    @include flex;
-    flex-wrap: wrap;
-    flex: 1;
-
-    @include m(preview) {
-      border-radius: 2px;
-      margin: 0 8px 8px 0;
-      position: relative;
-      overflow: hidden;
-      @include flex;
-
-      @include e(image) {
-        width: $hy-upload-image-width;
-        height: $hy-upload-image-width;
-      }
-
-      @include e(other) {
-        width: $hy-upload-image-width;
-        height: $hy-upload-image-width;
-        background-color: rgb(242, 242, 242);
-        flex: 1;
-        @include flex(column);
-        justify-content: center;
-        align-items: center;
-
-        @include m(text) {
-          font-size: $hy-upload-text-font-size;
-          color: $hy-text-color--grey;
-          margin-top: 2px;
-        }
-      }
-
-      /* 进度条样式 */
-      @include e(progress) {
-        width: 100%;
-        height: 100%;
-        backdrop-filter: blur(6px);
-        position: absolute;
-        z-index: 10;
-        display: grid;
-        place-content: center;
-
-        @include m(number) {
-          width: 70px;
-          margin-bottom: 6rpx;
-        }
-
-        @include m(value) {
-          font-size: 20rpx;
-          color: $hy-primary;
-        }
-      }
-    }
-  }
-
-  @include e(deletable) {
-    position: absolute;
-    top: 0;
-    right: 0;
-    background-color: rgb(55, 55, 55);
-    height: 14px;
-    width: 14px;
-    @include flex;
-    border-bottom-left-radius: 100px;
-    align-items: center;
-    justify-content: center;
-    z-index: 9;
-
-    @include m(icon) {
-      position: absolute;
-      transform: scale(0.7);
-      top: 0;
-      right: 0;
-    }
-  }
-
-  @include e(success) {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    @include flex;
-    // 由于weex(nvue)为阿里巴巴的KPI(部门业绩考核)的laji产物，不支持css绘制三角形
-    // 所以在nvue下使用图片，非nvue下使用css实现
-    /* #ifndef APP-NVUE */
-    border-style: solid;
-    border-color: transparent $hy-success $hy-success transparent;
-    border-width: 9px;
-    align-items: center;
-    justify-content: center;
-    /* #endif */
-
-    @include m(icon) {
-      /* #ifndef APP-NVUE */
-      position: absolute;
-      transform: scale(0.7);
-      bottom: -10px;
-      right: -10px;
-      /* #endif */
-      /* #ifdef APP-NVUE */
-      width: 16px;
-      height: 16px;
-      /* #endif */
-    }
-  }
-
-  @include e(button) {
-    @include flex(column);
-    align-items: center;
-    justify-content: center;
-    width: $hy-upload-image-width;
-    height: $hy-upload-image-width;
-    background-color: $hy-background--empty;
-    border-radius: 2px;
-    margin: 0 8px 8px 0;
-    /* #ifndef APP-NVUE */
-    box-sizing: border-box;
-    /* #endif */
-
-    @include m(text) {
-      font-size: $hy-upload-text-font-size;
-      color: $hy-text-color--grey;
-      margin-top: 2px;
-    }
-
-    @include m(hover) {
-      background-color: $hy-background--hover;
-    }
-
-    @include m(disabled) {
-      opacity: 0.5;
-    }
-  }
+@use "../../libs/css/mixin" as *;
+@use "../../libs/css/theme" as *;
+
+$hy-upload-image-width: 80px !default;
+$hy-upload-text-font-size: 11px !default;
+
+
+@include b(upload) {
+  @include flex(column);
+  flex: 1;
+
+  @include e(wrap) {
+    @include flex;
+    flex-wrap: wrap;
+    flex: 1;
+
+    @include m(preview) {
+      border-radius: 2px;
+      margin: 0 8px 8px 0;
+      position: relative;
+      overflow: hidden;
+      @include flex;
+
+      @include e(image) {
+        width: $hy-upload-image-width;
+        height: $hy-upload-image-width;
+      }
+
+      @include e(other) {
+        width: $hy-upload-image-width;
+        height: $hy-upload-image-width;
+        background-color: rgb(242, 242, 242);
+        flex: 1;
+        @include flex(column);
+        justify-content: center;
+        align-items: center;
+
+        @include m(text) {
+          font-size: $hy-upload-text-font-size;
+          color: $hy-text-color--grey;
+          margin-top: 2px;
+        }
+      }
+
+      /* 进度条样式 */
+      @include e(progress) {
+        width: 100%;
+        height: 100%;
+        backdrop-filter: blur(6px);
+        position: absolute;
+        z-index: 10;
+        display: grid;
+        place-content: center;
+
+        @include m(number) {
+          width: 70px;
+          margin-bottom: 6rpx;
+        }
+
+        @include m(value) {
+          font-size: 20rpx;
+          color: $hy-primary;
+        }
+      }
+    }
+  }
+
+  @include e(deletable) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: rgb(55, 55, 55);
+    height: 14px;
+    width: 14px;
+    @include flex;
+    border-bottom-left-radius: 100px;
+    align-items: center;
+    justify-content: center;
+    z-index: 9;
+
+    @include m(icon) {
+      position: absolute;
+      transform: scale(0.7);
+      top: 0;
+      right: 0;
+    }
+  }
+
+  @include e(status) {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    @include flex;
+    /* #ifndef APP-NVUE */
+    border-style: solid;
+    border-width: 9px;
+    align-items: center;
+    justify-content: center;
+    /* #endif */
+  }
+
+  @include e(success) {
+    border-color: transparent $hy-success $hy-success transparent;
+
+    @include m(icon) {
+      /* #ifndef APP-NVUE */
+      position: absolute;
+      transform: scale(0.7);
+      bottom: -10px;
+      right: -10px;
+      /* #endif */
+      /* #ifdef APP-NVUE */
+      width: 16px;
+      height: 16px;
+      /* #endif */
+    }
+  }
+
+  @include e(error) {
+    border-color: transparent $hy-error $hy-error transparent;
+  }
+
+  @include e(button) {
+    @include flex(column);
+    align-items: center;
+    justify-content: center;
+    width: $hy-upload-image-width;
+    height: $hy-upload-image-width;
+    background-color: $hy-background--empty;
+    border-radius: 2px;
+    margin: 0 8px 8px 0;
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    /* #endif */
+
+    @include m(text) {
+      font-size: $hy-upload-text-font-size;
+      color: $hy-text-color--grey;
+      margin-top: 2px;
+    }
+
+    @include m(hover) {
+      background-color: $hy-background--hover;
+    }
+
+    @include m(disabled) {
+      opacity: 0.5;
+    }
+  }
 }