hy-app 0.2.1 → 0.2.4

package/components/hy-swipe-action/typing.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties, PropType } from "vue";
 
 interface SwipeActionOptionsVo {
   text: string;
@@ -6,36 +6,33 @@ interface SwipeActionOptionsVo {
   icon?: string;
   iconSize?: string | number;
 }
+export type SwipeActionStatus = "close" | "left" | "right";
+// 点击关闭按钮、滑动关闭按钮、通过控制value关闭按钮
+export type SwipeActionReason = "click" | "swipe" | "value";
+export type SwipeActionPosition = SwipeActionStatus | "inside";
+export type SwipeActionBeforeClose = (
+  reason: SwipeActionReason,
+  position: SwipeActionPosition,
+) => void;
 
 export default interface SwipeActionProps {
   /**
-   * @description 数据列表
+   * @description 滑动按钮的状态，使用v-model进行双向绑定。
+   * 选值为：'left'（左滑）、'close'（关闭状态）、'right'（右滑）。
    * */
-  list: Record<string, any>[];
+  modelValue?: SwipeActionStatus;
   /**
-   * @description 控制打开或者关闭（默认 false ）
-   * */
-  show?: boolean;
-  /**
-   * @description 标识符，如果是v-for，可用index索引值
-   * */
-  name?: string;
-  /**
-   * @description 唯一键值
-   * */
-  key?: string;
-  /**
-   * @description 是否禁用（默认 false ）
+   * @description 是否禁用滑动操作
    * */
   disabled?: boolean;
-  /**
-   * @description 滑动距离阈值，只有大于此值，才被认为是要打开菜单（默认 30 ）
-   * */
-  threshold?: number;
   /**
    * @description 是否自动关闭其他swipe按钮组（默认 true ）
    * */
   autoClose?: boolean;
+  /**
+   * @description 显示底部边框
+   * */
+  borderBottom?: boolean;
   /**
    * @description 右侧按钮内容
    * */
@@ -45,9 +42,10 @@ export default interface SwipeActionProps {
    * */
   duration?: number;
   /**
-   * @description 是否关闭
+   * @description 在关闭滑动按钮前调用的钩子函数
+   * @desc 可以在此函数中执行一些关闭前的操作，如确认提示等。
    * */
-  closeOnClick: boolean;
+  beforeClose?: funtion | PropType<SwipeActionBeforeClose>;
   /**
    * @description 定义需要用到的外部样式
    * */

package/components/hy-swiper/index.scss

@@ -12,6 +12,10 @@
   &__wrapper {
     flex: 1;
 
+    :deep(.uni-swiper-wrapper) {
+      background-color: $hy-background;
+    }
+
     &__item {
       flex: 1;
 
@@ -22,6 +26,7 @@
         transition: transform 0.3s;
         flex: 1;
 
+
         &__image {
           flex: 1;
         }

package/components/hy-tabBar/hy-tabBar.vue

@@ -0,0 +1,96 @@
+<template>
+  <view class="hy-tabBar--placeholder"></view>
+  <view class="hy-tabBar">
+    <view class="hy-tabBar--box" :style="{ backgroundColor: barBgColor }">
+      <view class="hy-tabBar--container">
+        <view
+          :class="[
+            'hy-tabBar--container__item',
+            'list',
+            current === i ? 'is-active' : '',
+          ]"
+          v-for="(item, i) in list"
+          :key="i"
+          @click="checkItem(i)"
+        >
+          <view class="hy-tabBar--container__item--bar">
+            <view class="icon">
+              <HyBadge
+                :value="item?.badge"
+                absolute
+                :offset="[-13, 25]"
+                :max="badge?.max"
+                :is-dot="badge?.isDot"
+                :inverted="badge?.inverted"
+                :bg-color="badge?.bgColor"
+                :type="badge?.type"
+                :number-type="badge?.numberType"
+                :shape="badge?.shape"
+                :show-zero="badge?.showZero"
+                :show="!!item?.badge"
+              ></HyBadge>
+              <HyIcon :name="item.icon" :color="color" size="25"></HyIcon>
+            </view>
+            <text class="text" :style="[{ color: color }]">{{
+              item.name
+            }}</text>
+            <text class="circle"></text>
+          </view>
+        </view>
+        <view
+          class="hy-tabBar--indicator"
+          :style="{
+            '--num': `translateX(calc(((100vw - 110rpx - ${list.length} * 70rpx) / ${list.length - 1} + 70rpx) * ${current}))`,
+            background: activeColor,
+          }"
+        ></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, watch } from "vue";
+import defaultProps from "./props";
+import type IProps from "./typing";
+
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+import HyBadge from "../hy-badge/hy-badge.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { modelValue, baseBgColor } = toRefs(props);
+const emit = defineEmits(["clickTab"]);
+
+const baseBackgroundColor = baseBgColor.value
+  ? baseBgColor.value
+  : "var(--hy-background)";
+const current = ref(0);
+watch(
+  () => modelValue.value,
+  (newVal) => {
+    current.value = newVal;
+  },
+);
+
+const checkItem = (index: number) => {
+  current.value = index;
+  emit("clickTab", index);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+.hy-tabBar {
+  background: v-bind(baseBackgroundColor);
+  &--indicator {
+    border: 12rpx solid v-bind(baseBackgroundColor);
+    &::before {
+      box-shadow: 1px -15rpx 0 v-bind(baseBackgroundColor);
+    }
+    &::after {
+      box-shadow: -1px -15rpx 0 v-bind(baseBackgroundColor);
+    }
+  }
+}
+</style>

package/components/hy-tabBar/index.scss

@@ -0,0 +1,169 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(tabBar) {
+  height: 135rpx;
+  z-index: 999;
+  position: fixed;
+  bottom: 0;
+  @include m(placeholder) {
+    height: 135rpx;
+    position: relative;
+    bottom: 0;
+  }
+
+  @include m(box) {
+    margin-top: 15rpx;
+    position: relative;
+    width: 100vw;
+    height: 120rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 15rpx 15rpx 0 0;
+    padding: 0 20rpx;
+    /* #ifndef APP-PLUS-NVUE */
+    box-sizing: border-box;
+    /* #endif */
+    background-color: $hy-background--container;
+  }
+  @include m(container) {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20rpx;
+    &__item {
+      position: relative;
+      width: 100rpx;
+      height: 70rpx;
+      z-index: 1;
+
+      /* #ifndef APP-PLUS-NVUE */
+      &:nth-child(1).is-active ~ .hy-tabBar--indicator {
+        transform: var(--num);
+      }
+
+      &:nth-child(2).is-active ~ .hy-tabBar--indicator {
+        transform: var(--num);
+      }
+
+      &:nth-child(3).is-active ~ .hy-tabBar--indicator {
+        transform: var(--num);
+      }
+
+      &:nth-child(4).is-active ~ .hy-tabBar--indicator {
+        transform: var(--num);
+      }
+
+      &:nth-child(5).is-active ~ .hy-tabBar--indicator {
+        transform: var(--num);
+      }
+      /* #endif */
+
+      &--bar {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+        text-align: center;
+        font-weight: 500;
+        .icon {
+          /* #ifndef APP-PLUS-NVUE */
+          transition: 0.5s;
+          /* #endif */
+          position: relative;
+        }
+        .text {
+          position: absolute;
+          font-weight: 400;
+          font-size: 0.75em;
+          /* #ifndef APP-PLUS-NVUE */
+          letter-spacing: 0.05em;
+          transition: 0.5s;
+          /* #endif */
+          transform: translateY(20px) scale(0);
+        }
+        .circle {
+          position: absolute;
+          /* #ifndef APP-PLUS-NVUE */
+          display: block;
+          /* #endif */
+          width: 75rpx;
+          height: 75rpx;
+          background: transparent;
+          border-radius: 50%;
+          border: 3rpx solid #fff;
+          transform: translateY(-70rpx) scale(0);
+        }
+      }
+
+      @include is(active) {
+        @include b(tabBar--container__item--bar) {
+          .icon {
+            transform: translate(2rpx, -56rpx);
+            :deep(.hy-icon) {
+              color: #FFFFFF;
+            }
+          }
+          .text {
+            opacity: 1;
+            transform: translateY(20rpx);
+          }
+          .circle {
+            /* #ifndef APP-PLUS-NVUE */
+            margin: 0 auto;
+            transition: 0.5s;
+            /* #endif */
+            transition-delay: 0.5s;
+            transform: translate(2rpx, -56rpx) scale(1);
+          }
+        }
+      }
+    }
+  }
+
+  @include m(indicator) {
+    position: absolute;
+    top: -59%;
+    left: 30rpx;
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: $hy-primary;
+    /* #ifndef APP-PLUS-NVUE */
+    transition: 0.5s;
+    /* #endif */
+
+    @include pseudo(before) {
+      /* #ifndef APP-PLUS-NVUE */
+      content: "";
+      /* #endif */
+      position: absolute;
+      top: 59%;
+      left: -45rpx;
+      width: 50rpx;
+      height: 40rpx;
+      background: transparent;
+      border-top-right-radius: 20px;
+    }
+
+    @include pseudo(after) {
+      /* #ifndef APP-PLUS-NVUE */
+      content: "";
+      /* #endif */
+      position: absolute;
+      top: 58%;
+      right: -49rpx;
+      width: 50rpx;
+      height: 40rpx;
+      background: transparent;
+      border-top-left-radius: 40rpx;
+    }
+  }
+}

package/components/hy-tabBar/props.ts

@@ -0,0 +1,13 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  modelValue: 0,
+  list: [],
+  color: "",
+  baseBgColor: "",
+  barBgColor: "",
+  activeColor: "",
+  badge: {},
+};
+
+export default defaultProps;

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

@@ -0,0 +1,54 @@
+import type HyBadgeProps from "../hy-badge/typing";
+
+export interface TabListVo {
+  /**
+   * @description 标题
+   * */
+  name: string;
+  /**
+   * @description icon图标或者图片
+   * */
+  icon: string;
+  /**
+   * @description 徽标值
+   * */
+  badge?: number;
+}
+
+export default interface HyTabBarProps {
+  /**
+   * @description tab当前值
+   * */
+  modelValue: number;
+  /**
+   * @description 导航栏值
+   * {
+   *     name: 中文名,
+   *     icon: uview-plus里面的矢量图标库
+   * }
+   * */
+  list: TabListVo[];
+  /**
+   * @description 文字颜色
+   * */
+  color?: string;
+  /**
+   * @description 底部导航栏底部背景颜色（颜色设置必须要和页面背景颜色一样，才有重合感觉）
+   * 支持渐变色--linear-gradient(155deg, #192b6e, #a6307c)
+   * */
+  baseBgColor?: string;
+  /**
+   * @description 底部导航栏背景颜色
+   * 支持渐变色--linear-gradient(155deg, #192b6e, #a6307c)
+   * */
+  barBgColor?: string;
+  /**
+   * @description 点击突出按钮的背景颜色
+   * 支持渐变色--linear-gradient(0deg, #ffa576,#0951eb)
+   * */
+  activeColor?: string;
+  /**
+   * @description 徽标属性集合
+   * */
+  badge?: Partial<HyBadgeProps>;
+}

package/components/hy-tabs/index.scss

@@ -47,10 +47,10 @@
         &--text {
           font-size: 15px;
           color: $hy-text-color;
-          white-space: nowrap !important;
+          white-space: nowrap;
 
           &--disabled {
-            color: $hy-light-background-disabled !important;
+            color: $hy-background--disabled !important;
           }
         }
       }

package/components/hy-tag/index.scss

@@ -13,7 +13,7 @@
   }
 
   /*禁用*/
-  @include themeColor(disabled, $hy-background--disabled, $hy-color-disable-icon,
+  @include themeColor(disabled, $hy-background--disabled, $hy-text-color--disabled,
 $hy-background--disabled);
 
   /*圆角*/

package/components/hy-text/index.scss

@@ -32,9 +32,9 @@
     @include themeColor(success, "", "", $hy-success);
     @include themeColor(info, "", "", $hy-info);
     @include themeColor(error, "", "", $hy-error);
-    @include themeColor(main, "", "", $hy-light-color);
+    @include themeColor(main, "", "", $hy-text-color);
     @include themeColor(content, "", "", $hy-text-color--grey);
-    @include themeColor(tips, "", "",$hy-tips-color);
+    @include themeColor(tips, "", "",$hy-text-color--grey);
     @include themeColor(light, "", "", $hy-border-color-light);
 
   }

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

@@ -5,7 +5,7 @@
     :style="[textareaStyle, borderStyle(isFocus)]"
   >
     <textarea
-      class="hy-textarea__field"
+      class="hy-textarea--field"
       :value="innerValue"
       :style="{ height: addUnit(height) }"
       :placeholder="placeholder || ''"
@@ -47,13 +47,13 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-textarea',
+  name: "hy-textarea",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
+    styleIsolation: "shared",
+  },
+};
 </script>
 
 <script setup lang="ts">

package/components/hy-textarea/index.scss

@@ -8,31 +8,30 @@
   flex: 1;
   padding: $hy-border-margin-padding-base;
 
-  &--radius {
+  @include m(radius) {
     border-radius: $hy-border-radius-sm;
   }
 
-  &--no-radius {
+  @include m(no-radius) {
     border-radius: $hy-border-radius-no;
   }
 
-  &--disabled {
+  @include m(disabled) {
     background-color: $hy-background--disabled;
     color: $hy-text-color--disabled;
   }
 
-  &__field {
+  @include m(field) {
     flex: 1;
     font-size: 15px;
     width: 100%;
   }
 
-  &--count {
+  @include m(count) {
     position: absolute;
     right: 5px;
     bottom: 2px;
     font-size: 12px;
-    color: $hy-text-color--2;
     background-color: $hy-background--3;
     padding: 1px 4px;
     border-radius: $hy-border-radius-sm;

package/components/hy-tooltip/index.scss

@@ -21,7 +21,7 @@
       justify-content: center;
 
       &__list {
-        background-color: #060607;
+        background-color: rgb(50, 50, 51);
         position: relative;
         flex: 1;
         border-radius: $hy-border-radius-sm;
@@ -49,7 +49,7 @@
 
       &__indicator {
         position: absolute;
-        background-color: #060607;
+        background-color: rgb(50, 50, 51);
         width: 14px;
         height: 14px;
         bottom: -4px;

package/components/hy-upload/index.scss

@@ -37,7 +37,7 @@ $hy-upload-text-font-size: 11px !default;
 
         &__text {
           font-size: $hy-upload-text-font-size;
-          color: $hy-tips-color;
+          color: $hy-text-color--grey;
           margin-top: 2px;
         }
       }
@@ -126,7 +126,6 @@ $hy-upload-text-font-size: 11px !default;
 .material-sent {
   width: 100%;
   height: 100%;
-  background: rgba(245, 245, 245, 0.3);
   backdrop-filter: blur(4px);
   position: absolute;
   display: flex;