hy-app 0.3.2 → 0.3.3

package/components/hy-tag/hy-tag.vue

@@ -101,7 +101,7 @@ const props = defineProps({
   },
   /**
    * tag的形状
-   * @values circle,square
+   * @values circle,square,opposite
    * */
   shape: {
     type: String,
@@ -143,7 +143,7 @@ const props = defineProps({
   /** 定义需要用到的外部样式 */
   customStyle: {
     type: Object as PropType<CSSProperties>,
-    default: "",
+    default: () => {},
   },
   /** 自定义外部类名 */
   customClass: {

package/components/hy-tag/index.scss

@@ -19,41 +19,42 @@ $hy-background--disabled);
   /*圆角*/
   @include borderRadio(circle);
   @include borderRadio(square);
+  @include borderRadio(opposite);
 
-  &__icon {
+  @include e(icon) {
     margin-right: $hy-border-margin-padding-sm;
   }
 
-  &__text {
-    &--small {
+  @include e(text) {
+    @include m(small) {
       font-size: $hy-font-size-sm;
       line-height: $hy-font-size-sm;
     }
 
-    &--medium {
+    @include m(medium) {
       font-size: $hy-font-size-base;
       line-height: $hy-font-size-base;
     }
 
-    &--large {
+    @include m(large) {
       font-size: $hy-font-size-lg;
       line-height: $hy-font-size-lg;
     }
   }
 
-  &--small {
+  @include m(small) {
     height: 22px;
     line-height: 22px;
     padding: 0 $hy-border-margin-padding-sm;
   }
 
-  &--medium {
+  @include m(medium) {
     height: 26px;
     line-height: 26px;
     padding: 0 $hy-border-margin-padding-base;
   }
 
-  &--large {
+  @include m(large) {
     height: 32px;
     line-height: 32px;
     padding: 0 15px;
@@ -82,7 +83,7 @@ $hy-background--disabled);
   @include themeColor(info--plain__fill, $hy-info-light, $hy-info, $hy-info);
 
   /* 关闭按钮 */
-  &__close {
+  @include e(close) {
     position: absolute;
     z-index: 999;
     top: 10px;
@@ -99,17 +100,17 @@ $hy-background--disabled);
     transform: scale(0.6) translate(50%, -50%);
     /* #endif */
 
-    &--small {
+    @include m(small) {
       width: 18px;
       height: 18px;
     }
 
-    &--medium {
+    @include m(medium) {
       width: 22px;
       height: 22px;
     }
 
-    &--large {
+    @include m(large) {
       width: 25px;
       height: 25px;
     }

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

@@ -25,7 +25,7 @@
             class="hy-upload__wrap__preview__other"
             @tap="onClickPreview(item, index)"
           >
-            <u-icon
+            <HyIcon
               color="#80CBF9"
               size="26"
               :name="
@@ -33,7 +33,7 @@
                   ? 'movie'
                   : 'folder'
               "
-            ></u-icon>
+            ></HyIcon>
             <text class="hy-upload__wrap__preview__other__text">
               {{
                 item.isVideo || (item.type && item.type === "video")
@@ -139,8 +139,8 @@ export default {
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import type { PropType, CSSProperties } from "vue";
-import type { FileVo, ReadFunctionVo } from "./typing";
-import { addUnit, chooseFile, isArray } from "../../utils";
+import type { FileVo, IUploadEmits, ReadFunctionVo } from "./typing";
+import { addUnit, bytesToSize, chooseFile, isArray } from "../../utils";
 import { IconConfig } from "../../config";
 // 组件
 import HyIcon from "../hy-icon/hy-icon.vue";
@@ -278,14 +278,7 @@ const props = defineProps({
     type: Object as PropType<CSSProperties>,
   },
 });
-const emit = defineEmits([
-  "clickPreview",
-  "beforeRead",
-  "error",
-  "delete",
-  "afterRead",
-  "oversize",
-]);
+const emit = defineEmits<IUploadEmits>();
 
 const lists = ref<FileVo[]>([]);
 // 上传按钮

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

@@ -150,3 +150,24 @@ export default interface HyUploadProps {
    * */
   customStyle?: CSSProperties;
 }
+
+export interface UploadFileParams {
+  file: FileVo | FileVo[];
+  name: string;
+  index: number;
+}
+
+export interface IUploadEmits {
+  /** 点击预览大图触发 */
+  (e: "clickPreview", params: UploadFileParams): void;
+  /** 上传前触发 */
+  (e: "beforeRead", params: UploadFileParams): void;
+  /** 上传错误触发 */
+  (e: "error", error: any): void;
+  /** 删除触发 */
+  (e: "delete", params: UploadFileParams): void;
+  /** 上传完成触发 */
+  (e: "afterRead", params: UploadFileParams): void;
+  /** 超出最大值 */
+  (e: "oversize", params: UploadFileParams): void;
+}

package/libs/css/mixin.scss

@@ -139,9 +139,12 @@
     @if $shape == circle {
       border-radius:  theme.$hy-border-radius-semicircle;
     }
-    @else {
+    @else if($shape == square) {
       border-radius: theme.$hy-border-radius-sm;
     }
+    @else {
+      border-radius: 28rpx theme.$hy-border-radius-sm;
+    }
   }
 }
 

package/libs/css/vars.css

@@ -20,6 +20,7 @@
   --hy-background--hover: rgba(0,0,0,0.05);
   --hy-background--active: #FFFFFF;
   --hy-background--close:  #f0f0f0;
+  --hy-background--box:  #FFFFFF;
 
   --hy-border-line: 1rpx solid #e8e8e8;
   --hy-border-color: #c2c2c4;
@@ -52,6 +53,7 @@
   --hy-background--hover: rgba(255,255,255,0.2);
   --hy-background--active: #000000;
   --hy-background--close:  #323233;
+  --hy-background--box:  #4b4c4d;
 
   --hy-border-line: 1rpx solid #3c3f44;
   --hy-border-color: #3c3f44;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.3.2",
-  "description": "修复上传提示功能",
+  "version": "0.3.3",
+  "description": "scss添加颜色变量",
   "main": "./index.ts",
   "private": false,
   "scripts": {},

package/theme.scss

@@ -49,6 +49,7 @@ $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, #FFFFFF); // 选中背景色
 $hy-background--close: var(--hy-background--close, #f0f0f0); // 选中背景色
+$hy-background--box: var(--hy-background--box, #FFFFFF); // 选中背景色
 
 /* 文字尺寸 */
 $hy-font-size-sm: 24rpx; // 提示文字大小