hy-app 0.2.2 → 0.2.5

package/components/hy-signature/index.scss

@@ -22,10 +22,8 @@
     justify-content: flex-end;
     display: flex;
 
-    :deep(){
-      @include b(button) {
-        margin-left: $hy-border-margin-padding-base;
-      }
+    :deep(.hy-button) {
+      margin-left: $hy-border-margin-padding-base;
     }
   }
 }

package/components/hy-signature/props.ts

@@ -2,7 +2,7 @@ import type IProps from "./typing";
 
 const defaultProps: IProps = {
   penColor: "#000",
-  lineWidth: 1,
+  lineWidth: 2,
   clearText: "清空",
   revokeText: "撤销",
   restoreText: "恢复",
@@ -13,6 +13,7 @@ const defaultProps: IProps = {
   disabled: false,
   height: 1,
   width: 1,
+  round: "10rpx",
   backgroundColor: "",
   disableScroll: true,
   enableHistory: false,

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

@@ -6,7 +6,7 @@ export default interface HySignatureProps {
    * */
   penColor?: string;
   /**
-   * @description 签名笔宽度（默认 1 ）
+   * @description 签名笔宽度（默认 2 ）
    * */
   lineWidth?: number;
   /**
@@ -49,6 +49,10 @@ export default interface HySignatureProps {
    * @description 画布的宽度
    * */
   width?: number;
+  /**
+   * @description 边框圆角
+   * */
+  round?: string | number;
   /**
    * @description 画板的背景色
    * */

package/components/hy-subsection/hy-subsection.vue

@@ -22,17 +22,17 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-subsection',
+  name: "hy-subsection",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
+    styleIsolation: "shared",
+  },
+};
 </script>
 
 <script setup lang="ts">
-import {computed, toRefs, ref, onMounted, watch, getCurrentInstance} from "vue";
+import { computed, toRefs, ref, onMounted, getCurrentInstance } from "vue";
 import type { CSSProperties } from "vue";
 import defaultProps from "./props";
 import type IProps from "./typing";
@@ -50,7 +50,7 @@ const {
   bold,
   bgColor,
   inactiveColor,
-  fieldNames,
+  customKeys,
 } = toRefs(props);
 const emit = defineEmits(["change", "update:modelValue"]);
 
@@ -83,7 +83,7 @@ const wrapperClass = computed(() => {
       "hy-subsection__item",
       "cursor-pointer",
       `hy-subsection__item--${innerCurrent.value}__${guidClass}`,
-        `hy-subsection__item--${mode.value}`,
+      `hy-subsection__item--${mode.value}`,
       index < list.value.length - 1 && "hy-subsection__item--no-border-right",
       index === 0 && "hy-subsection__item--first",
       index === list.value.length - 1 && "hy-subsection__item--last",
@@ -175,7 +175,7 @@ const init = () => {
     if (typeof item === "string" || typeof item === "number") {
       return item === modelValue.value;
     } else {
-      return item[fieldNames.value.value] === modelValue.value;
+      return item[customKeys.value.value] === modelValue.value;
     }
   });
 
@@ -184,23 +184,25 @@ const init = () => {
     innerCurrent.value === -1 ? current.value : innerCurrent.value;
 
   // TODO： 多个数组在一起计算宽度， 宽度不一样会有问题，所以必须加guidClass随机数
-  getRect(`.hy-subsection__item--0__${guidClass}`, false, instance).then((size) => {
-    itemRect.value = size as UniApp.NodeInfo;
-  });
+  getRect(`.hy-subsection__item--0__${guidClass}`, false, instance).then(
+    (size) => {
+      itemRect.value = size as UniApp.NodeInfo;
+    },
+  );
 };
 
 /**
  * @description 判断值
  * */
 const getValue = (item: SubSectionVo) => {
-  return typeof item === "object" ? item[fieldNames.value.value] : item;
+  return typeof item === "object" ? item[customKeys.value.value] : item;
 };
 
 /**
  * @description 判断展示文本
  * */
 const getName = (item: SubSectionVo) => {
-  return typeof item === "object" ? item[fieldNames.value.label] : item;
+  return typeof item === "object" ? item[customKeys.value.name] : item;
 };
 
 /**

package/components/hy-subsection/props.ts

@@ -5,8 +5,8 @@ const defaultProps: IProps = {
   modelValue: "",
   current: 0,
   list: [],
-  fieldNames: {
-    label: "name",
+  customKeys: {
+    name: "name",
     value: "value",
   },
   activeColor: "",

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

@@ -24,7 +24,7 @@ export default interface HySubsectionProps {
   /**
    * @description list的键值
    * */
-  fieldNames?: HyApp.IFieldNames;
+  customKeys?: HyApp.IFieldNames;
   /**
    * @description 激活时的颜色（默认 '#3c9cff' ）
    * */

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>;
+}