hy-app 0.5.10 → 0.5.12

package/components/hy-switch/props.ts

@@ -1,61 +1,61 @@
-import type { CSSProperties, PropType } from 'vue'
-import type { SwitchValue } from './typing'
-import type { HyIconProps } from '../hy-icon/typing'
-
-const switchProps = {
-    /** 通过v-model双向绑定的值 */
-    modelValue: {
-        type: [String, Number, Boolean] as PropType<SwitchValue>,
-        default: false
-    },
-    /** 是否处于加载中 */
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否禁用 */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /** 开关尺寸，单位px */
-    size: {
-        type: [String, Number],
-        default: 'medium'
-    },
-    /** 打开时的背景色 */
-    activeColor: String,
-    /** 关闭时的背景色 */
-    inactiveColor: String,
-    /** 打开选择器时通过change事件发出的值 */
-    activeValue: {
-        type: [String, Number, Boolean] as PropType<SwitchValue>,
-        default: true
-    },
-    /** 关闭选择器时通过change事件发出的值 */
-    inactiveValue: {
-        type: [String, Number, Boolean] as PropType<SwitchValue>,
-        default: false
-    },
-    /** 打开选择器时图标 */
-    activeIcon: String,
-    /** 关闭选择器时图标 */
-    inactiveIcon: String,
-    /** 图标 */
-    icon: Object as PropType<HyIconProps>,
-    /** 是否开启异步变更，开启后需要手动控制输入值 */
-    asyncChange: {
-        type: Boolean,
-        default: false
-    },
-    /** 圆点与外边框的距离 */
-    space: {
-        type: Number,
-        default: 0
-    },
-    /** 定义需要用到的外部样式 */
-    customStyle: Object as PropType<CSSProperties>,
-    /** 自定义外部类名 */
-    customClass: String
-}
-export default switchProps
+import type { CSSProperties, PropType } from 'vue'
+import type { SwitchValue } from './typing'
+import type { HyIconProps } from '../hy-icon/typing'
+
+const switchProps = {
+    /** 通过v-model双向绑定的值 */
+    modelValue: {
+        type: [String, Number, Boolean] as PropType<SwitchValue>,
+        default: false
+    },
+    /** 是否处于加载中 */
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否禁用 */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /** 开关尺寸，单位px */
+    size: {
+        type: [String, Number],
+        default: 'medium'
+    },
+    /** 打开时的背景色 */
+    activeColor: String,
+    /** 关闭时的背景色 */
+    inactiveColor: String,
+    /** 打开选择器时通过change事件发出的值 */
+    activeValue: {
+        type: [String, Number, Boolean] as PropType<SwitchValue>,
+        default: true
+    },
+    /** 关闭选择器时通过change事件发出的值 */
+    inactiveValue: {
+        type: [String, Number, Boolean] as PropType<SwitchValue>,
+        default: false
+    },
+    /** 打开选择器时图标 */
+    activeIcon: String,
+    /** 关闭选择器时图标 */
+    inactiveIcon: String,
+    /** 图标 */
+    icon: Object as PropType<HyIconProps>,
+    /** 是否开启异步变更，开启后需要手动控制输入值 */
+    asyncChange: {
+        type: Boolean,
+        default: false
+    },
+    /** 圆点与外边框的距离 */
+    space: {
+        type: Number,
+        default: 0
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
+}
+export default switchProps

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

@@ -1,8 +1,8 @@
-export type SwitchValue = boolean | number | string
-
-export interface ISwitchEmits {
-    /** 改变值触发 */
-    (e: 'change', value: SwitchValue): void
-    /** 改变值触发 */
-    (e: 'update:modelValue', value: SwitchValue): void
-}
+export type SwitchValue = boolean | number | string
+
+export interface ISwitchEmits {
+    /** 改变值触发 */
+    (e: 'change', value: SwitchValue): void
+    /** 改变值触发 */
+    (e: 'update:modelValue', value: SwitchValue): void
+}

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

@@ -1,136 +1,136 @@
-<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) => {
-            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>
+<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) => {
+            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>

package/components/hy-tabbar/props.ts

@@ -1,59 +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
+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

@@ -1,21 +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
-}
+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
+}