hy-app 0.6.4 → 0.6.6

package/components/hy-tabs/props.ts

@@ -1,77 +1,84 @@
-import type { TabsItemVo } from './typing'
-import type { CSSProperties, PropType } from 'vue'
-import type { HyBadgeProps } from '../hy-badge/typing'
-
-const tabsProps = {
-    /** 标签数组，元素为对象，如[{name: '推荐'}] */
-    list: {
-        type: Array as unknown as PropType<TabsItemVo[]>,
-        default: []
-    },
-    /** 当前选中标签的索引 */
-    current: {
-        type: Number,
-        default: 0
-    },
-    /** 从list元素对象中读取的键名 */
-    keyName: {
-        type: String,
-        default: 'name'
-    },
-    /** 滑块移动一次所需的时间，单位秒 */
-    duration: {
-        type: Number,
-        default: 300
-    },
-    /** 滑块颜色 */
-    lineColor: String,
-    /** 菜单选择中时的样式 */
-    activeStyle: {
-        type: Object as PropType<CSSProperties>,
-        default: {}
-    },
-    /** 菜单非选中时的样式 */
-    inactiveStyle: {
-        type: Object as PropType<CSSProperties>,
-        default: {}
-    },
-    /** 滑块长度 */
-    lineWidth: {
-        type: [String, Number],
-        default: 20
-    },
-    /** 滑块高度 */
-    lineHeight: {
-        type: [String, Number],
-        default: 3
-    },
-    /** 滑块背景显示大小，当滑块背景设置为图片时使用 */
-    lineBgSize: {
-        type: [String, Number],
-        default: 'cover'
-    },
-    /** 菜单item的样式 */
-    itemStyle: Object as PropType<CSSProperties>,
-    /** 轮播图高度 */
-    swiperHeight: {
-        type: [String, Number],
-        default: 'calc(100vh - 44px)'
-    },
-    /** 菜单是否可滚动 */
-    scrollable: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * @description 徽标props全局定义
-     * */
-    propsBadge: Object as PropType<HyBadgeProps>,
-    /** 标签左侧图标样式自定义 */
-    iconStyle: Object as PropType<CSSProperties>,
-    /** 定义需要用到的外部样式 */
-    customStyle: Object as PropType<CSSProperties>,
-    /** 自定义外部类名 */
-    customClass: String
-}
-
-export default tabsProps
+import type { TabsItemVo } from './typing'
+import type { CSSProperties, PropType } from 'vue'
+import type { HyBadgeProps } from '../hy-badge/typing'
+
+const tabsProps = {
+    /** 标签数组，元素为对象，如[{name: '推荐'}] */
+    list: {
+        type: Array as unknown as PropType<TabsItemVo[]>,
+        default: []
+    },
+    /** 当前选中标签的索引 */
+    current: {
+        type: Number,
+        default: 0
+    },
+    /** 从list元素对象中读取的键名 */
+    keyName: {
+        type: String,
+        default: 'name'
+    },
+    /** 滑块移动一次所需的时间，单位秒 */
+    duration: {
+        type: Number,
+        default: 300
+    },
+    /** 滑块颜色 */
+    lineColor: String,
+    /** 菜单选择中时的样式 */
+    activeStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: {}
+    },
+    /** 菜单非选中时的样式 */
+    inactiveStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: {}
+    },
+    /** 滑块长度 */
+    lineWidth: {
+        type: [String, Number],
+        default: 20
+    },
+    /** 滑块高度 */
+    lineHeight: {
+        type: [String, Number],
+        default: 3
+    },
+    /** 滑块背景显示大小，当滑块背景设置为图片时使用 */
+    lineBgSize: {
+        type: [String, Number],
+        default: 'cover'
+    },
+    /** 菜单item的样式 */
+    itemStyle: Object as PropType<CSSProperties>,
+    /** 轮播图高度 */
+    swiperHeight: {
+        type: [String, Number],
+        default: 'calc(100% - 44px)'
+    },
+    /** 菜单是否可滚动 */
+    scrollable: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 徽标props全局定义
+     * */
+    badgeProps: Object as PropType<HyBadgeProps>,
+    /**
+     * 是否出现内容轮播
+     * */
+    isSwiper: {
+        type: Boolean,
+        default: false
+    },
+    /** 标签左侧图标样式自定义 */
+    iconStyle: Object as PropType<CSSProperties>,
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default tabsProps

package/components/hy-tag/hy-tag.vue

@@ -1,173 +1,173 @@
-<template>
-    <hy-transition mode="fade" :show="show" :custom-style="{ display: 'inline-block' }">
-        <view class="hy-tag__wrapper cursor-pointer">
-            <view :class="tagClass" @tap="clickHandler" :style="tagStyle">
-                <slot v-if="$slots.icon" name="icon"></slot>
-                <hy-icon
-                    v-else-if="icon?.name"
-                    :name="icon?.name"
-                    :color="hyIconColor"
-                    :size="hyIconSize"
-                    :bold="icon?.bold"
-                    :customPrefix="icon?.customPrefix"
-                    :imgMode="icon?.imgMode"
-                    :width="icon?.width"
-                    :height="icon?.height"
-                    :top="icon?.top"
-                    :stop="icon?.stop"
-                    :round="icon?.round"
-                    :customStyle="Object.assign({ marginRight: '3px' }, icon?.customStyle)"
-                ></hy-icon>
-                <view :class="textClass" :style="textStyle">
-                    <slot v-if="$slots.default"></slot>
-                    <template v-else>{{ text }}</template>
-                </view>
-                <!-- 关闭按钮 -->
-                <view
-                    :class="['hy-tag__close', `hy-tag__close--${size}`]"
-                    v-if="closable"
-                    @tap.stop="closeHandler"
-                    :style="{ backgroundColor: closeColor }"
-                >
-                    <hy-icon :name="IconConfig.CLOSE" :size="closeSize" color="#ffffff"></hy-icon>
-                </view>
-            </view>
-        </view>
-    </hy-transition>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-tag',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { CSSProperties } from 'vue'
-import type { ITagEmits } from './typing'
-import { IconConfig, colorGradient } from '../../libs'
-import tagProps from './props'
-
-// 组件
-import HyTransition from '../hy-transition/hy-transition.vue'
-import HyIcon from '../hy-icon/hy-icon.vue'
-
-/**
- * tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
- * @displayName hy-tag
- */
-defineOptions({})
-
-const props = defineProps(tagProps)
-const emit = defineEmits<ITagEmits>()
-
-/**
- * @description tag类名
- * */
-const tagClass = computed((): string[] => {
-    let classes = ['hy-tag', `hy-tag--${props.shape}`, `hy-tag--${props.size}`, props.customClass]
-    if (props.disabled) {
-        classes.push('hy-tag--disabled')
-    } else {
-        const arr = [
-            props.plain ? `hy-tag--${props.type}--plain` : `hy-tag--${props.type}`,
-            props.plain && props.plainFill && `hy-tag--${props.type}--plain__fill`
-        ].filter(Boolean)
-        classes = classes.concat(arr as string[])
-    }
-    return classes
-})
-/**
- * @description tag样式
- * */
-const tagStyle = computed<CSSProperties>(() => {
-    const style: CSSProperties = {
-        marginRight: props.closable ? '10px' : 0,
-        marginTop: props.closable ? '10px' : 0,
-        background: props.bgColor,
-        borderColor: props.borderColor
-    }
-
-    if (props.color) {
-        if (props.plain) {
-            style.borderColor = props.color
-            if (props.plainFill) {
-                style.background = colorGradient(props.color, '#FFFFFF', 100)[90]
-            }
-        } else {
-            style.background = props.color
-            style.borderColor = props.color
-        }
-    }
-
-    return Object.assign(style, props.customStyle)
-})
-
-/**
- * @description 文本样式
- * */
-const textStyle = computed(() => {
-    const style: CSSProperties = {}
-    if (props.color && props.plain) style.color = props.color
-    return style
-})
-/**
- * @description 文本类名
- * */
-const textClass = computed((): string[] => {
-    return [`hy-tag__text`, `hy-tag__text--${props.size}`]
-})
-
-/**
- * @description 关闭图标icon大小
- */
-const closeSize = computed(() => {
-    return props.size === 'large' ? 15 : props.size === 'medium' ? 13 : 11
-})
-/**
- * @description 图标大小
- * */
-const hyIconSize = computed(() => {
-    if (props.icon?.size) {
-        return props.icon.size
-    } else {
-        return props.size === 'large' ? 18 : props.size === 'medium' ? 14 : 10
-    }
-})
-/**
- * @description 图标颜色
- * */
-const hyIconColor = computed(() => {
-    return props.icon?.color ? props.icon.color : props.plain ? props.type : '#ffffff'
-})
-
-/**
- * @description 点击关闭按钮
- * */
-const closeHandler = () => {
-    if (!props.disabled) {
-        emit('close', props.text)
-    }
-}
-/**
- * @description 点击标签
- * */
-const clickHandler = () => {
-    if (!props.disabled) {
-        emit('click', {
-            value: props.text,
-            name: props.name
-        })
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <hy-transition mode="fade" :show="show" :custom-style="{ display: 'inline-block' }">
+        <view class="hy-tag__wrapper cursor-pointer">
+            <view :class="tagClass" @tap="clickHandler" :style="tagStyle">
+                <slot v-if="$slots.icon" name="icon"></slot>
+                <hy-icon
+                    v-else-if="icon?.name"
+                    :name="icon?.name"
+                    :color="hyIconColor"
+                    :size="hyIconSize"
+                    :bold="icon?.bold"
+                    :customPrefix="icon?.customPrefix"
+                    :imgMode="icon?.imgMode"
+                    :width="icon?.width"
+                    :height="icon?.height"
+                    :top="icon?.top"
+                    :stop="icon?.stop"
+                    :round="icon?.round"
+                    :customStyle="Object.assign({ marginRight: '3px' }, icon?.customStyle)"
+                ></hy-icon>
+                <view :class="textClass" :style="textStyle">
+                    <slot v-if="$slots.default"></slot>
+                    <template v-else>{{ text }}</template>
+                </view>
+                <!-- 关闭按钮 -->
+                <view
+                    :class="['hy-tag__close', `hy-tag__close--${size}`]"
+                    v-if="closable"
+                    @tap.stop="closeHandler"
+                    :style="{ backgroundColor: closeColor }"
+                >
+                    <hy-icon :name="IconConfig.CLOSE" :size="closeSize" color="#ffffff"></hy-icon>
+                </view>
+            </view>
+        </view>
+    </hy-transition>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-tag',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import type { ITagEmits } from './typing'
+import { IconConfig, colorGradient } from '../../libs'
+import tagProps from './props'
+
+// 组件
+import HyTransition from '../hy-transition/hy-transition.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
+
+/**
+ * tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
+ * @displayName hy-tag
+ */
+defineOptions({})
+
+const props = defineProps(tagProps)
+const emit = defineEmits<ITagEmits>()
+
+/**
+ * @description tag类名
+ * */
+const tagClass = computed((): string[] => {
+    let classes = ['hy-tag', `hy-tag--${props.shape}`, `hy-tag--${props.size}`, props.customClass]
+    if (props.disabled) {
+        classes.push('hy-tag--disabled')
+    } else {
+        const arr = [
+            props.plain ? `hy-tag--${props.type}--plain` : `hy-tag--${props.type}`,
+            props.plain && props.plainFill && `hy-tag--${props.type}--plain__fill`
+        ].filter(Boolean)
+        classes = classes.concat(arr as string[])
+    }
+    return classes
+})
+/**
+ * @description tag样式
+ * */
+const tagStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {
+        marginRight: props.closable ? '10px' : 0,
+        marginTop: props.closable ? '10px' : 0,
+        background: props.bgColor,
+        borderColor: props.borderColor
+    }
+
+    if (props.color) {
+        if (props.plain) {
+            style.borderColor = props.color
+            if (props.plainFill) {
+                style.background = colorGradient(props.color, '#FFFFFF', 100)[90]
+            }
+        } else {
+            style.background = props.color
+            style.borderColor = props.color
+        }
+    }
+
+    return Object.assign(style, props.customStyle)
+})
+
+/**
+ * @description 文本样式
+ * */
+const textStyle = computed(() => {
+    const style: CSSProperties = {}
+    if (props.color && props.plain) style.color = props.color
+    return style
+})
+/**
+ * @description 文本类名
+ * */
+const textClass = computed((): string[] => {
+    return [`hy-tag__text`, `hy-tag__text--${props.size}`]
+})
+
+/**
+ * @description 关闭图标icon大小
+ */
+const closeSize = computed(() => {
+    return props.size === 'large' ? 15 : props.size === 'medium' ? 13 : 11
+})
+/**
+ * @description 图标大小
+ * */
+const hyIconSize = computed(() => {
+    if (props.icon?.size) {
+        return props.icon.size
+    } else {
+        return props.size === 'large' ? 18 : props.size === 'medium' ? 14 : 10
+    }
+})
+/**
+ * @description 图标颜色
+ * */
+const hyIconColor = computed(() => {
+    return props.icon?.color ? props.icon.color : props.plain ? props.type : '#ffffff'
+})
+
+/**
+ * @description 点击关闭按钮
+ * */
+const closeHandler = () => {
+    if (!props.disabled) {
+        emit('close', props.text)
+    }
+}
+/**
+ * @description 点击标签
+ * */
+const clickHandler = () => {
+    if (!props.disabled) {
+        emit('click', {
+            value: props.text,
+            name: props.name
+        })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>