hy-app 0.5.3 → 0.5.5

package/components/{hy-tabBar → hy-tabbar}/index.scss

@@ -1,27 +1,26 @@
 @use "../../libs/css/theme" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-@include b(tabBar) {
-  height: 135rpx;
-  z-index: 999;
-  position: fixed;
+@include b(tabbar) {
+  height: 70px;
   bottom: 0;
+  left: 0;
+  right: 0;
+  position: relative;
   @include m(placeholder) {
-    height: 135rpx;
-    position: relative;
+    height: 137rpx;
     bottom: 0;
   }
 
   @include m(box) {
-    margin-top: 15rpx;
-    position: relative;
-    width: 100vw;
-    height: 120rpx;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 60px;
     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 */
@@ -30,38 +29,38 @@
   @include m(container) {
     width: 100%;
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     align-items: center;
     padding: 0 20rpx;
     &__item {
       position: relative;
-      width: 100rpx;
-      height: 70rpx;
+      width: 60px;
+      height: 100%;
       z-index: 1;
 
       /* #ifndef APP-PLUS-NVUE */
-      &:nth-child(1).is-active ~ .hy-tabBar--indicator {
+      &:nth-child(1).is-active ~ .hy-tabbar--indicator {
         transform: var(--num);
       }
 
-      &:nth-child(2).is-active ~ .hy-tabBar--indicator {
+      &:nth-child(2).is-active ~ .hy-tabbar--indicator {
         transform: var(--num);
       }
 
-      &:nth-child(3).is-active ~ .hy-tabBar--indicator {
+      &:nth-child(3).is-active ~ .hy-tabbar--indicator {
         transform: var(--num);
       }
 
-      &:nth-child(4).is-active ~ .hy-tabBar--indicator {
+      &:nth-child(4).is-active ~ .hy-tabbar--indicator {
         transform: var(--num);
       }
 
-      &:nth-child(5).is-active ~ .hy-tabBar--indicator {
+      &:nth-child(5).is-active ~ .hy-tabbar--indicator {
         transform: var(--num);
       }
       /* #endif */
 
-      &--bar {
+      @include m(bar) {
         position: relative;
         display: flex;
         justify-content: center;
@@ -91,19 +90,20 @@
           /* #ifndef APP-PLUS-NVUE */
           display: block;
           /* #endif */
-          width: 75rpx;
-          height: 75rpx;
+          width: 40px;
+          height: 40px;
           background: transparent;
           border-radius: 50%;
           border: 3rpx solid #fff;
           transform: translateY(-70rpx) scale(0);
+          z-index: -1;
         }
       }
 
       @include is(active) {
-        @include b(tabBar--container__item--bar) {
+        @include b(tabbar--container__item--bar) {
           .icon {
-            transform: translate(2rpx, -56rpx);
+            transform: translate(0, -36px);
             :deep(.hy-icon) {
               color: #FFFFFF;
             }
@@ -118,7 +118,7 @@
             transition: 0.5s;
             /* #endif */
             transition-delay: 0.5s;
-            transform: translate(2rpx, -56rpx) scale(1);
+            transform: translate(-1px, -36px) scale(1);
           }
         }
       }
@@ -127,10 +127,10 @@
 
   @include m(indicator) {
     position: absolute;
-    top: -59%;
-    left: 30rpx;
-    width: 100rpx;
-    height: 100rpx;
+    top: -36px;
+    left: 0;
+    width: 50px;
+    height: 50px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
@@ -146,7 +146,7 @@
       /* #endif */
       position: absolute;
       top: 59%;
-      left: -45rpx;
+      left: -46rpx;
       width: 50rpx;
       height: 40rpx;
       background: transparent;
@@ -159,7 +159,7 @@
       /* #endif */
       position: absolute;
       top: 58%;
-      right: -49rpx;
+      right: -46rpx;
       width: 50rpx;
       height: 40rpx;
       background: transparent;

package/components/hy-tabbar/props.ts

@@ -0,0 +1,59 @@
+import type { CSSProperties, PropType } from 'vue'
+import type HyBadgeProps from '../hy-badge/typing'
+
+const tabBarProps = {
+    /** 选中项的索引值 */
+    modelValue: {
+        type: Number,
+        default: 0
+    },
+    /** 导航栏数据集合 */
+    list: {
+        type: Array,
+        default: () => []
+    },
+    /** 是否固定在底部 */
+    fixed: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示占位元素 */
+    placeholder: {
+        type: Boolean,
+        default: false
+    },
+    zIndex: {
+        type: Number,
+        default: 10086
+    },
+    /** 图标和字体颜色 */
+    color: {
+        type: String,
+        default: ''
+    },
+    /** 轨道颜色 */
+    baseBgColor: {
+        type: String,
+        default: ''
+    },
+    /** 背景颜色 */
+    bgColor: {
+        type: String,
+        default: ''
+    },
+    /** 激活圆形背景颜色 */
+    activeColor: {
+        type: String,
+        default: ''
+    },
+    /** 徽标部分属性 */
+    badgeProps: {
+        type: Object as PropType<HyBadgeProps>
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default tabBarProps

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

@@ -0,0 +1,21 @@
+export interface TabListVo {
+    /**
+     * @description 标题
+     * */
+    name: string
+    /**
+     * @description icon图标或者图片
+     * */
+    icon: string
+    /**
+     * @description 徽标值
+     * */
+    badge?: number
+}
+
+export interface ITabBarEmits {
+    /** 更新选中索引 */
+    (e: 'update:modelValue', index: number): void
+    /** 变化事件 */
+    (e: 'change', index: number): void
+}

package/components/hy-tabbar-group/hy-tabbar-group.vue

@@ -0,0 +1,87 @@
+<template>
+    <view
+        :class="{
+            'hy-tabbar-group__placeholder':
+                fixed && placeholder && safeAreaInsetBottom && shape === 'round'
+        }"
+    >
+        <view :class="rootClass" :style="rootStyle">
+            <slot></slot>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-tabbar-group',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, provide, toRefs, type CSSProperties, ref, onUnmounted } from 'vue'
+import tabbarGroupProps from './props'
+import type { ITabBarGroupEmits } from './typing'
+
+/**
+ * 底部导航栏，用于在不同页面之间进行切换。
+ * @displayName hy-tabbar-group
+ */
+defineOptions({})
+
+const props = defineProps(tabbarGroupProps)
+const emit = defineEmits<ITabBarGroupEmits>()
+
+const index = ref(0) // 递增用
+const getIndex = () => {
+    return index.value++
+}
+
+provide('hy-tabbar', {
+    ...toRefs(props),
+    setChange,
+    getIndex
+})
+
+// 父属性值
+const rootStyle = computed(() => {
+    const style: CSSProperties = {
+        background: props.bgColor,
+        zIndex: props.zIndex
+    }
+    return Object.assign(style, props.customStyle)
+})
+// 父类名
+const rootClass = computed(() => {
+    return [
+        'hy-tabbar-group',
+        `hy-tabbar-group--${props.shape}`,
+        props.customClass,
+        props.fixed && 'is-fixed',
+        props.safeAreaInsetBottom && 'is-safe',
+        props.border && 'is-border'
+    ]
+})
+
+onUnmounted(() => {
+    index.value = 0
+})
+
+/**
+ * 子项状态变更
+ * @param index 子项
+ */
+function setChange(index: string | number) {
+    emit('update:modelValue', index)
+    emit('change', {
+        value: index
+    })
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-tabbar-group/index.scss

@@ -0,0 +1,57 @@
+@use "../../libs/css/theme" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(tabbar-group) {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  position: relative;
+  background: $hy-background--container;
+  height: 100rpx;
+
+  @include e(placeholder) {
+    box-sizing: content-box;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+    height: 100rpx;
+  }
+
+  @include m(circle) {
+    margin-left: $hy-border-margin-padding-lg;
+    margin-right: $hy-border-margin-padding-lg;
+    border-radius: $hy-border-radius-semicircle;
+    box-shadow: $hy-box-shadow;
+
+    @include is(fixed) {
+      @include is(safe) {
+        bottom: constant(safe-area-inset-bottom);
+        bottom: env(safe-area-inset-bottom);
+      }
+    }
+
+  }
+
+  @include m(square) {
+
+    @include is(fixed) {
+      @include is(safe) {
+        box-sizing: content-box;
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+      }
+    }
+
+
+    @include is(border) {
+      border-top: $hy-border-line;
+    }
+  }
+
+  @include is(fixed) {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 500;
+  }
+}

package/components/hy-tabbar-group/props.ts

@@ -0,0 +1,78 @@
+import type { CSSProperties, PropType } from 'vue'
+import type HyBadgeProps from '../hy-badge/typing'
+
+const tabbarGroupProps = {
+    /** 选中项的索引值 */
+    modelValue: {
+        type: Number,
+        default: 0
+    },
+    /** 是否固定在底部 */
+    fixed: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否显示顶部边框 */
+    border: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示占位元素 */
+    placeholder: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 导航栏的形状
+     * @values square, circle
+     * */
+    shape: {
+        type: String,
+        default: 'square'
+    },
+    /** 背景颜色 */
+    bgColor: {
+        type: String,
+        default: ''
+    },
+    /** 激活颜色 */
+    activeColor: {
+        type: String,
+        default: ''
+    },
+    /** 非激活颜色 */
+    inactiveColor: {
+        type: String,
+        default: ''
+    },
+    /** 底部安全区域适配 - 主要用于iPhone X及以上机型 */
+    safeAreaInsetBottom: {
+        type: Boolean,
+        default: true
+    },
+    /** 图标大小 */
+    iconSize: {
+        type: [String, Number],
+        default: ''
+    },
+    /** 文字大小 */
+    fontSize: {
+        type: [String, Number],
+        default: ''
+    },
+    /** 徽标部分属性 */
+    badgeProps: {
+        type: Object as PropType<HyBadgeProps>
+    },
+    /** z-index层级 */
+    zIndex: {
+        type: Number,
+        default: 10086
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
+} as const
+
+export default tabbarGroupProps

package/components/hy-tabbar-group/typing.ts

@@ -0,0 +1,16 @@
+import type { ExtractPropTypes, ToRefs } from 'vue'
+import type tabbarGroupProps from './props'
+
+export type TabBarGroupProps = ToRefs<ExtractPropTypes<typeof tabbarGroupProps>>
+
+export type ParamType = {
+    value: string | number
+}
+
+// ITabBarGroupEmits 接口定义组件的自定义事件
+export interface ITabBarGroupEmits {
+    /** 更新选中索引 */
+    (e: 'update:modelValue', value: string | number): void
+    /** 变化事件 */
+    (e: 'change', param: ParamType): void
+}

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

@@ -0,0 +1,103 @@
+<template>
+    <view class="hy-tabbar-item" @click="handleClick">
+        <view class="hy-tabbar-item__body">
+            <hy-badge
+                :value="value"
+                :show="!!value"
+                absolute
+                :offset="tabbarConfig?.badgeProps.value?.offset || [-10, 18]"
+                :isDot="tabbarConfig?.badgeProps.value?.isDot"
+                :max="tabbarConfig?.badgeProps.value?.max"
+                :type="tabbarConfig?.badgeProps.value?.type"
+                :bgColor="tabbarConfig?.badgeProps.value?.bgColor"
+                :color="tabbarConfig?.badgeProps.value?.color"
+                :shape="tabbarConfig?.badgeProps.value?.shape"
+                :numberType="tabbarConfig?.badgeProps.value?.numberType"
+                :inverted="tabbarConfig?.badgeProps.value?.inverted"
+            >
+            </hy-badge>
+            <slot v-if="$slots.icon" name="icon" :active="active"></slot>
+            <hy-icon
+                v-else
+                :name="icon"
+                :color="iconColor"
+                :size="tabbarConfig?.iconSize?.value"
+                :custom-class="`hy-tabbar-item__body-icon ${active ? 'is-active' : 'is-inactive'}`"
+            ></hy-icon>
+            <text
+                v-if="title"
+                :style="{ color: iconColor, fontSize: tabbarConfig?.fontSize?.value }"
+                :class="`hy-tabbar-item__body-title ${active ? 'is-active' : 'is-inactive'}`"
+            >
+                {{ title }}
+            </text>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-tabbar-item',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue'
+import tabbarItemProps from './props'
+import type { ITabbarConfig } from './typing'
+
+// 组件
+import HyBadge from '../hy-badge/hy-badge.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
+
+/**
+ * 底部导航栏，用于在不同页面之间进行切换。
+ * @displayName hy-tabbar-item
+ */
+defineOptions({})
+
+const props = defineProps(tabbarItemProps)
+
+// 尝试从父组件注入配置
+const tabbarConfig = inject<ITabbarConfig>('hy-tabbar')
+// 获取唯一 ID
+const uid = ref<number>(tabbarConfig?.getIndex()!)
+
+const iconColor = computed(() => {
+    if (tabbarConfig) {
+        if (active.value && tabbarConfig.activeColor?.value) {
+            return tabbarConfig.activeColor.value
+        }
+        if (!active.value && tabbarConfig.inactiveColor?.value) {
+            return tabbarConfig.inactiveColor.value
+        }
+    }
+})
+
+const active = computed(() => {
+    const name = props.name || uid.value
+    if (tabbarConfig) {
+        return tabbarConfig.modelValue.value === name
+    } else {
+        return false
+    }
+})
+
+/**
+ * 点击tabbar选项
+ */
+function handleClick() {
+    const index: string | number = props.name || uid.value
+    if (tabbarConfig && index !== tabbarConfig?.modelValue?.value) {
+        tabbarConfig.setChange(index)
+    }
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-tabbar-item/index.scss

@@ -0,0 +1,43 @@
+@use "../../libs/css/theme" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+
+@include b(tabbar-item) {
+  flex: 1;
+  text-align: center;
+  text-decoration: none;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @include e(body) {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    line-height: 1;
+    padding: 0;
+    position: relative;
+
+    :deep(){
+      @include is(active) {
+        color: $hy-primary;
+      }
+
+      @include is(inactive) {
+        color: $hy-text-color--grey;
+      }
+    }
+  }
+
+
+  @include e(body-title) {
+    font-size: $hy-font-size-sm;
+    line-height: initial;
+  }
+
+  @include edeep(body-icon) {
+    font-size: 40rpx;
+  }
+
+}

package/components/hy-tabbar-item/props.ts

@@ -0,0 +1,24 @@
+const tabBarItemProps = {
+    /** 图标 */
+    icon: {
+        type: String,
+        default: ''
+    },
+    /** 标题 */
+    title: {
+        type: String,
+        default: ''
+    },
+    /** 唯一标识 */
+    name: {
+        type: [String, Number],
+        default: ''
+    },
+    /** 徽标显示值，当为徽标为点时候，必须要value设置true或者有值 */
+    value: {
+        type: [String, Number, Boolean],
+        default: ''
+    }
+}
+
+export default tabBarItemProps

package/components/hy-tabbar-item/typing.ts

@@ -0,0 +1,10 @@
+import type { TabBarGroupProps } from '../hy-tabbar-group/typing'
+
+export interface ITabbarConfig extends TabBarGroupProps {
+    /**
+     * 子项状态变更触发父方法
+     * */
+    setChange: (option: string | number) => void
+    /** 获取默认唯一值，递增 */
+    getIndex: () => number
+}