hy-app 0.5.3 → 0.5.5

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

@@ -1,65 +1,21 @@
-import type { CSSProperties } from 'vue'
-
 export interface StepListVo {
-  /**
-   * @description 标题
-   * */
-  title?: string
-  /**
-   * @description 描述
-   * */
-  desc?: string
-  /**
-   * @description 是否错误
-   * */
-  error?: boolean
-}
-export default interface HyStepsProps {
-  /**
-   * @description 设置当前处于第几步 (默认 0 )
-   * */
-  current: number
-  /**
-   * @description 步骤条的数据集
-   * */
-  list: StepListVo[]
-  /**
-   * @description row-横向，column-竖向 (默认 'row' )
-   * */
-  direction?: HyApp.DirectionType
-  /**
-   * @description 激活状态颜色 (默认 '#3c9cff' )
-   * */
-  activeColor?: string
-  /**
-   * @description 未激活状态颜色 (默认 '#969799' )
-   * */
-  inactiveColor?: string
-  /**
-   * @description 激活状态的图标
-   * */
-  activeIcon?: string
-  /**
-   * @description 未激活状态图标
-   * */
-  inactiveIcon?: string
-  /**
-   * @description 是否显示点类型 (默认 false )
-   * */
-  dot?: boolean
-  /**
-   * @description 图标大小  (默认 17 )
-   * */
-  iconSize?: string | number
-  /**
-   * @description 定义需要用到的外部样式
-   * */
-  customStyle?: CSSProperties
+    /**
+     * @description 标题
+     * */
+    title?: string
+    /**
+     * @description 描述
+     * */
+    desc?: string
+    /**
+     * @description 是否错误
+     * */
+    error?: boolean
 }
 
 export interface IStepsEmits {
-  /** 值改成触发 */
-  (e: 'change', index: number): void
-  /** 值改成触发 */
-  (e: 'update:current', index: number): void
+    /** 值改成触发 */
+    (e: 'change', index: number): void
+    /** 值改成触发 */
+    (e: 'update:current', index: number): void
 }

package/components/hy-submit-bar/typing.d.ts

@@ -1,4 +1,3 @@
-import type { CSSProperties } from 'vue'
 import type BadgeProps from '../hy-badge/props'
 
 export interface SubmitBarIconMenus {
@@ -17,77 +16,6 @@ export interface SubmitBarIconMenus {
     [key: string]: any
 }
 
-export default interface HySubmitBarProps {
-    /**
-     * @description 左边菜单栏
-     * */
-    menus?: IconMenus[]
-    /**
-     * @description 绝对定位
-     * */
-    fixed?: boolean
-    /**
-     * @description 是否显示边框
-     * */
-    border?: boolean
-    /**
-     * @description 加载左边按钮loading
-     * */
-    leftLoading?: boolean
-    /**
-     * @description 加载右边按钮loading
-     * */
-    rightLoading?: boolean
-    /**
-     * @description 左边icon的颜色
-     * */
-    iconColor?: string
-    /**
-     * @description 左边文字的颜色
-     * */
-    iconLabelColor?: string
-    /**
-     * @description 右边按钮文字颜色
-     * */
-    textColor?: string
-    /**
-     * @description 显示左边按钮
-     * */
-    showLeftBtn?: boolean
-    /**
-     * @description 显示右边按钮
-     * */
-    showRightBtn?: boolean
-    /**
-     * @description 左边按钮文字
-     * */
-    leftBtnText?: string
-    /**
-     * @description 右边按钮文字
-     * */
-    rightBtnText?: string
-    /**
-     * @description 左边按钮颜色，支持渐变色
-     * */
-    leftBtnColor?: string
-    /**
-     * @description 有边按钮颜色，支持渐变色
-     * */
-    rightBtnColor?: string
-    /**
-     * @description 按钮的形状
-     * */
-    shape?: HyApp.ShapeType
-    /**
-     * @description 按钮点击等待时长（运用了节流方法）
-     * */
-    warn?: number
-    /**
-     * @description 定义需要用到的外部样式
-     * */
-    customStyle?: CSSProperties
-}
-
 export interface ISubmitBarEmits {
     /** 点击按钮触发 */
     (e: 'click', index: number): void

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

@@ -1,5 +1,3 @@
-import type { CSSProperties } from 'vue'
-
 export interface SubSectionItemVo extends AnyObject {
     name: string
     value: string | number
@@ -7,53 +5,6 @@ export interface SubSectionItemVo extends AnyObject {
 
 export type SubSectionVo = string | number | SubSectionItemVo
 
-export default interface HySubsectionProps {
-    /**
-     * @description 接收值
-     * */
-    modelValue: string | number
-    /**
-     * @description 默认值 (默认0)
-     * */
-    current?: number
-    /**
-     * @description tab的数据
-     * */
-    list: SubSectionVo[]
-    /**
-     * @description list的键值
-     * */
-    customKeys?: HyApp.IFieldNames
-    /**
-     * @description 激活时的颜色（默认 '#3c9cff' ）
-     * */
-    activeColor?: string
-    /**
-     * @description 未激活时的颜色（默认 '#303133' ）
-     * */
-    inactiveColor?: string
-    /**
-     * @description 模式选择，mode=button为按钮形式，mode=subsection时为分段模式（默认 'button' ）
-     * */
-    mode?: 'button' | 'subsection'
-    /**
-     * @description 字体大小，单位px（默认 12 ）
-     * */
-    fontSize?: number | string
-    /**
-     * @description 激活选项的字体是否加粗（默认 true ）
-     * */
-    bold?: boolean
-    /**
-     * @description 组件背景颜色，mode为button时有效（默认 '#eeeeef' ）
-     * */
-    bgColor?: string
-    /**
-     * @description 定义需要用到的外部样式
-     * */
-    customStyle?: CSSProperties
-}
-
 export interface ISubsectionEmits {
     /** 改变触发 */
     (e: 'change', index: number): void

package/components/hy-swipe-action/index.ts

@@ -1,34 +1,25 @@
-/*
- * @Author: weisheng
- * @Date: 2023-07-02 22:51:06
- * @LastEditTime: 2024-03-16 19:59:07
- * @LastEditors: weisheng
- * @Description:
- * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/common/clickoutside.ts
- * 记得注释
- */
-let queue: any[] = [];
+let queue: any[] = []
 
 export function pushToQueue(comp: any) {
-  queue.push(comp);
+    queue.push(comp)
 }
 
 export function removeFromQueue(comp: any) {
-  queue = queue.filter((item) => {
-    return item.$.uid !== comp.$.uid;
-  });
+    queue = queue.filter((item) => {
+        return item.$.uid !== comp.$.uid
+    })
 }
 
 export function closeOther(comp: any) {
-  queue.forEach((item) => {
-    if (item.$.uid !== comp.$.uid) {
-      item.$.exposed.close();
-    }
-  });
+    queue.forEach((item) => {
+        if (item.$.uid !== comp.$.uid) {
+            item.$.exposed.close()
+        }
+    })
 }
 
 export function closeOutside() {
-  queue.forEach((item) => {
-    item.$.exposed.close();
-  });
+    queue.forEach((item) => {
+        item.$.exposed.close()
+    })
 }

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

@@ -1,4 +1,4 @@
-import type { CSSProperties, PropType } from 'vue'
+import type { CSSProperties } from 'vue'
 
 export interface SwipeActionOptionsVo {
     text: string
@@ -15,43 +15,6 @@ export type SwipeActionBeforeClose = (
     position: SwipeActionPosition
 ) => void
 
-export default interface SwipeActionProps {
-    /**
-     * @description 滑动按钮的状态，使用v-model进行双向绑定。
-     * 选值为：'left'（左滑）、'close'（关闭状态）、'right'（右滑）。
-     * */
-    modelValue?: SwipeActionStatus
-    /**
-     * @description 是否禁用滑动操作
-     * */
-    disabled?: boolean
-    /**
-     * @description 是否自动关闭其他swipe按钮组（默认 true ）
-     * */
-    autoClose?: boolean
-    /**
-     * @description 显示底部边框
-     * */
-    borderBottom?: boolean
-    /**
-     * @description 右侧按钮内容
-     * */
-    options?: SwipeActionOptionsVo[]
-    /**
-     * @description 动画过渡时间，单位ms（默认 350 ）
-     * */
-    duration?: number
-    /**
-     * @description 在关闭滑动按钮前调用的钩子函数
-     * @desc 可以在此函数中执行一些关闭前的操作，如确认提示等。
-     * */
-    beforeClose?: funtion | PropType<SwipeActionBeforeClose>
-    /**
-     * @description 定义需要用到的外部样式
-     * */
-    customStyle?: CSSProperties
-}
-
 export interface ISwipeActionEmits {
     /** 当滑动按钮打开时，点击整个滑动操作容器触发 click 事件 */
     (e: 'click', value: SwipeActionPosition): void

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

@@ -1,104 +1,3 @@
-import type { CSSProperties } from 'vue'
-
-export default interface HySwiperProps {
-    /**
-     * @description 轮播图数据
-     * */
-    list: (string | Record<string, unknown>)[]
-    /**
-     * @description list数组中指定对象的目标属性名（默认 'url' ）
-     * */
-    keyName?: string
-    /**
-     * @description 是否显示面板指示器（默认 false ）
-     * */
-    indicator?: boolean
-    /**
-     * @description 指示器非激活颜色（默认 '#FFFFFF' ）
-     * */
-    indicatorActiveColor?: string
-    /**
-     * @description 指示器的激活颜色（默认 'rgba(255, 255, 255, 0.35)' ）
-     * */
-    indicatorInactiveColor?: string
-    /**
-     * @description 指示器样式，可通过bottom，left，right进行定位
-     * */
-    indicatorStyle?: CSSProperties
-    /**
-     * @description 指示器模式（默认 'line' ）
-     * */
-    indicatorMode?: HyApp.SwiperIndicatorModeType
-    /**
-     * @description 是否自动切换（默认 true ）
-     * */
-    autoplay?: boolean
-    /**
-     * @description 当前所在滑块的 index（默认 0 ）
-     * */
-    current?: number | string
-    /**
-     * @description 当前所在滑块的 item-id ，不能与 current 被同时指定
-     * */
-    currentItemId?: string
-    /**
-     * @description 滑块自动切换时间间隔（ms）（默认 3000 ）
-     * */
-    interval?: number
-    /**
-     * @description 滑块切换过程所需时间（ms）（默认 300 ）
-     * */
-    duration?: number
-    /**
-     * @description 播放到末尾后是否重新回到开头（默认 false ）
-     * */
-    circular?: boolean
-    /**
-     * @description 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持（默认 0 ）
-     * */
-    previousMargin?: number | string
-    /**
-     * @description 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持（默认 0 ）
-     * */
-    nextMargin?: number | string
-    /**
-     * @description 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持（默认 false ）
-     * */
-    acceleration?: boolean
-    /**
-     * @description 同时显示的滑块数量，nvue、支付宝小程序不支持（默认 1 ）
-     * */
-    displayMultipleItems?: number
-    /**
-     * @description 指定swiper切换缓动动画类型， 只对微信小程序有效（默认 'default' ）
-     * */
-    easingFunction?: string
-    /**
-     * @description 图片的裁剪模式（默认 'aspectFill' ）
-     * */
-    imgMode?: HyApp.ImageModeVo
-    /**
-     * @description 组件高度（默认 130 ）
-     * */
-    height?: number
-    /**
-     * @description 背景颜色（默认 	'#f3f4f6' ）
-     * */
-    bgColor?: string
-    /**
-     * @description 组件圆角，数值或带单位的字符串（默认 4 ）
-     * */
-    radius?: number | string
-    /**
-     * @description 是否加载中（默认 false ）
-     * */
-    loading?: boolean
-    /**
-     * @description 是否显示标题，要求数组对象中有title属性（默认 false ）
-     * */
-    showTitle?: boolean
-}
-
 export interface SwiperList {
     [key: string]: any
     /** 线上地址 */

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

@@ -1,65 +1,3 @@
-import type { CSSProperties } from 'vue'
-import type IconProps from '../hy-icon/typing'
-
-export default interface HySwitchProps {
-    /**
-     * @description 通过v-model双向绑定的值 （默认 false ）
-     * */
-    modelValue: boolean | string | number
-    /**
-     * @description 是否处于加载中（默认 false ）
-     * */
-    loading?: boolean
-    /**
-     * @description 是否禁用（默认 false ）
-     * */
-    disabled?: boolean
-    /**
-     * @description 开关尺寸，单位px （默认 25 ）
-     * */
-    size?: HyApp.SizeType | string | number
-    /**
-     * @description 打开时的背景色 （默认 '#2979ff' ）
-     * */
-    activeColor?: string
-    /**
-     * @description 关闭时的背景色 （默认 '#ffffff' ）
-     * */
-    inactiveColor?: string
-    /**
-     * @description 打开选择器时通过change事件发出的值 （默认 true ）
-     * */
-    activeValue?: boolean | string | number
-    /**
-     * @description 关闭选择器时通过change事件发出的值 （默认 false ）
-     * */
-    inactiveValue?: boolean | string | number
-    /**
-     * @description 打开选择器时图标
-     * */
-    activeIcon?: string
-    /**
-     * @description 关闭选择器时图标
-     * */
-    inactiveIcon?: string
-    /**
-     * @description 图标
-     * */
-    icon?: IconProps
-    /**
-     * @description 是否开启异步变更，开启后需要手动控制输入值 （默认 false ）
-     * */
-    asyncChange?: boolean
-    /**
-     * @description 圆点与外边框的距离 （默认 0 ）
-     * */
-    space?: number
-    /**
-     * @description 定义需要用到的外部样式
-     * */
-    customStyle?: CSSProperties
-}
-
 export type SwitchValue = boolean | number | string
 
 export interface ISwitchEmits {

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

@@ -0,0 +1,137 @@
+<template>
+    <view class="hy-tabbar" :style="tabBarStyle">
+        <view v-if="placeholder" class="hy-tabbar--placeholder"></view>
+
+        <view class="hy-tabbar--box" :style="{ background: bgColor }">
+            <view class="hy-tabbar--container">
+                <view
+                    :class="[
+                        'hy-tabbar--container__item',
+                        'list',
+                        current === i ? 'is-active' : ''
+                    ]"
+                    v-for="(item, i) in list"
+                    :key="i"
+                    ref="itemRef"
+                    @click="checkItem(i)"
+                >
+                    <view class="hy-tabbar--container__item--bar">
+                        <view class="icon">
+                            <hy-badge
+                                :value="item?.badge"
+                                absolute
+                                :offset="[-13, 25]"
+                                :max="badgeProps?.max"
+                                :is-dot="badgeProps?.isDot"
+                                :inverted="badgeProps?.inverted"
+                                :bg-color="badgeProps?.bgColor"
+                                :type="badgeProps?.type"
+                                :number-type="badgeProps?.numberType"
+                                :shape="badgeProps?.shape"
+                                :show-zero="badgeProps?.showZero"
+                                :show="!!item?.badge"
+                            ></hy-badge>
+                            <!-- 图标插槽 -->
+                            <slot v-if="$slots.icon" name="icon"></slot>
+                            <hy-icon v-else :name="item.icon" :color="color" size="25"></hy-icon>
+                        </view>
+                        <text class="text" :style="[{ color: color }]">{{ item.name }}</text>
+                        <text class="circle"></text>
+                    </view>
+                </view>
+                <view
+                    class="hy-tabbar--indicator"
+                    :style="{
+                        '--num': `translateX(${rectList[current]?.left}px)`,
+                        background: activeColor
+                    }"
+                ></view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-tabbar',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
+import tabBarProps from './props'
+import type { ITabBarEmits } from './typing'
+
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyBadge from '../hy-badge/hy-badge.vue'
+import { getRect } from '@/package'
+
+/**
+ * 底部导航栏，用于在不同页面之间进行切换。
+ * @displayName hy-tabbar
+ */
+defineOptions({})
+
+const props = defineProps(tabBarProps)
+const emit = defineEmits<ITabBarEmits>()
+
+const instance = getCurrentInstance()
+const rectList = ref<UniNamespace.NodeInfo[]>([])
+const baseBackgroundColor = props.baseBgColor ? props.baseBgColor : 'var(--hy-background)'
+const current = ref<number>(props.modelValue)
+watch(
+    () => props.modelValue,
+    (newVal) => {
+        current.value = newVal
+    }
+)
+
+onMounted(() => {
+    nextTick(() => {
+        getRect('.list', true, instance).then((res) => {
+            console.log(res, current.value)
+            rectList.value = res
+        })
+    })
+})
+
+// tabbar属性值
+const tabBarStyle = computed(() => {
+    const style = {
+        position: props.fixed ? 'fixed' : '',
+        zIndex: props.zIndex
+    }
+
+    return Object.assign(style, props.customStyle)
+})
+
+const checkItem = (index: number) => {
+    if (current.value !== index) {
+        current.value = index
+        emit('change', index)
+        emit('update:modelValue', index)
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+.hy-tabbar {
+    background: v-bind(baseBackgroundColor);
+    &--indicator {
+        border: 5px solid v-bind(baseBackgroundColor);
+        &::before {
+            box-shadow: 1px -15rpx 0 v-bind(baseBackgroundColor);
+        }
+        &::after {
+            box-shadow: -1px -15rpx 0 v-bind(baseBackgroundColor);
+        }
+    }
+}
+</style>