fusions-ui 1.2.7 → 1.2.8

package/components/{fu-notice-bar/fu-notice-bar.vue → notice-bar/src/notice-bar.vue}

@@ -52,18 +52,17 @@
 	</view>
 </template>
 
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import NoticeRow from './notice-row.vue'
-	import NoticeColumn from './notice-column.vue'
-	import props from './props.js'
+<script lang="ts" setup>
 	/**
 	 * NoticeBar 通知栏
 	 * @description 此组件用于滚动通告场景，有多种模式可供选择
+	 * @tutorial http://www.fusions.top/components/noticeBar.html
 	 * @property {Array} list 显示的内容
 	 * @property {Boolean} show = [true|false] 是否显示（默认 false）
-	 * @property {Number,String} radius 定义圆角（默认 0）
+	 * @property {Number | String} radius 定义圆角（默认 0）
 	 * @property {String} mode = [row|column] 滚动方向 (默认 row)
+	 * 	@value row 水平滚动
+	 * 	@value column 垂直滚动
 	 * @property {Boolean} leftIcon = [true|false] 是否显示左边图标（默认 true）
 	 * @property {String} leftIconName 左边图标的名称 (默认 volume)
 	 * @property {Number} leftIconSize 左边图标的大小 (默认 20)
@@ -77,7 +76,7 @@
 	 * @property {Boolean} circular = [true|false] 水平滚动的时候是否采用衔接的模式（默认 true）
 	 * @property {Boolean} autoHidden = [true|false] 没有数据时是否显示通知（默认 true）
 	 * @property {String} color 字体颜色
-	 * @property {String,Number} size 字体大小（默认 14）
+	 * @property {String | Number} size 字体大小（默认 14）
 	 * @property {String} bgColor 背景颜色
 	 * 
 	 * @event {Function} click 点击通知栏文字触发
@@ -85,40 +84,28 @@
 	 * @event {Function} end 一个周期滚动结束触发（仅mode=column时生效）
 	 * @example <fu-notice-bar :list="list"></fu-notice-bar>
 	 */
-	export default {
-		name:"FuNoticeBar",
-		emits: ['click', 'clickRight', 'end'],
-		mixins: [mpMixin, props],
-		components: {
-			NoticeRow,
-			NoticeColumn
-		},
-		computed: {
-		  // 当设置了show为false，或者autoHidden为true且list为空时，不显示通知
-		  showNotice() {
-		    if (this.show === false || (this.autoHidden && this.list.length === 0)) {
-                return false
-            }
-		    return true
-		  }
-		},
-		methods: {
-			// 点击通知栏
-			handleClick(index) {
-			  this.$emit('click', index)
-			},
-			
-			// 点击右边图标
-			handleClickRight(e) {
-			  this.$emit('clickRight', e)
-			},
-			
-			// 一个周期滚动结束
-			handleEnd() {
-			  this.$emit('end')
-			}
-		}
-	}
+	import { defineComponent } from 'vue';
+	import { noticeBarEmits, noticeBarProps } from './notice-bar';
+	import { useNoticeBar } from './composables';
+	import NoticeRow from './notice-row.vue';
+	import NoticeColumn from './notice-column.vue';
+	
+	defineOptions({ name: 'FuNoticeBar', options: { virtualHost: true } });
+	
+	defineComponent({
+		NoticeRow,
+		NoticeColumn
+	});
+	
+	const props = defineProps(noticeBarProps);
+	const $emit = defineEmits(noticeBarEmits);
+	
+	const {
+		showNotice,
+		handleClick,
+		handleClickRight,
+		handleEnd
+	} = useNoticeBar(props, $emit);
 </script>
 
 <style lang="scss" scoped>

package/components/notice-bar/src/notice-column.ts

@@ -0,0 +1,172 @@
+import type { ExtractPropTypes } from 'vue';
+
+/**
+ * 通知栏 mode 有效值
+ */
+export const noticeBarModes = ['row', 'column'] as const;
+
+export const noticeColumnProps = {
+	/**
+	 * @description 显示的内容
+	 */
+	list: {
+		type: Array,
+		default() {
+			return []
+		}
+	},
+	/**
+	 * @description 是否显示
+	 * @default true
+	 */
+	show: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 滚动方向
+	 * @values @values 'row' - 水平滚动, 'column' - 垂直滚动
+	 * @default 'row'
+	 */
+	mode: {
+		type: String,
+		values: noticeBarModes,
+		default: 'row'
+	},
+	/**
+	 * @description 是否显示左边图标
+	 * @default true
+	 */
+	leftIcon: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 左边图标的名称
+	 * @default 'volume'
+	 */
+	leftIconName: {
+		type: String,
+		default: 'volume'
+	},
+	/**
+	 * @description 左边图标的大小
+	 * @default 20
+	 */
+	leftIconSize: {
+		type: Number,
+		default: 20
+	},
+	/**
+	 * @description 左边图标的颜色
+	 * @default '#333333'
+	 */
+	leftIconColor: {
+		type: String,
+		default: '#333333'
+	},
+	/**
+	 * @description 是否显示右边的图标
+	 * @default false
+	 */
+	rightIcon: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 右边图标的名称
+	 * @default 'right'
+	 */
+	rightIconName: {
+		type: String,
+		default: 'right'
+	},
+	/**
+	 * @description 右边图标的大小
+	 * @default 20
+	 */
+	rightIconSize: {
+		type: [String, Number],
+		default: 20
+	},
+	/**
+	 * @description 右边图标的颜色
+	 * @default '#333333'
+	 */
+	rightIconColor: {
+		type: String,
+		default: '#333333'
+	},
+	/**
+	 * @description 设置圆角
+	 */
+	radius: {
+		type: Number,
+		default: 0
+	},
+	/**
+	 * @description 内边距
+	 * @default '9px 12px'
+	 */
+	padding: {
+		type: String,
+		default: '9px 12px'
+	},
+	/**
+	 * @description 自动播放
+	 * @default true
+	 */
+	autoPlay: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 滚动周期
+	 * @default 2000
+	 */
+	duration: {
+		type: Number,
+		default: 2000
+	},
+	/**
+	 * @description 背景颜色
+	 */
+	bgColor: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 字体颜色
+	 * @default '#333333'
+	 */
+	fontColor: {
+		type: String,
+		default: '#333333'
+	},
+	/**
+	 * @description 字体大小
+	 * @default 14
+	 */
+	fontSize: {
+		type: [String, Number],
+		default: 14
+	}
+};
+
+export const noticeColumnEmits = {
+	/**
+	 * @description 点击通知栏文字触发
+	 */
+	click: (_e: any) => true,
+	/**
+	 * @description 点击右侧图标触发
+	 */
+	clickRight: (_e: any) => true,
+	/**
+	 * @description 一个周期滚动结束触发（仅mode=column时生效）
+	 */
+	end: () => true
+};
+
+export type NoticeColumnProps = ExtractPropTypes<typeof noticeColumnProps>;
+export type NoticeColumnEmits = typeof noticeColumnEmits;

package/components/notice-bar/src/notice-column.vue

@@ -0,0 +1,129 @@
+<template>
+	<view class="fu-column-notice" :style="[noticeStyle]" @tap="handleClick" v-if="show">
+		<!-- 左图标 -->
+		<view class="fu-column-notice__icon--left" v-if="leftIcon">
+			<fu-icon :name="leftIconName" :size="leftIconSize" :color="leftIconColor"></fu-icon>
+		</view>
+
+		<!-- 滚动显示内容 -->
+		<swiper class="fu-column-notice__swiper" :style="[swiperStyle]" :vertical="vertical" circular
+			:autoplay="autoPlay" :interval="duration" @change="change">
+			<swiper-item v-for="(item, index) in list" :key="index" class="fu-column-notice__swiper__item">
+				<view class="fu-column-notice__swiper__content fu-text-ellipsis" :style="[textStyle]">
+					{{item}}
+				</view>
+			</swiper-item>
+		</swiper>
+
+		<!-- 右图标 -->
+		<view class="fu-column-notice__icon--right" @click="handleClickRight" v-if="rightIcon">
+			<fu-icon :name="rightIconName" :size="rightIconSize" :color="rightIconColor"></fu-icon>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * @description 垂直
+	 * @property {Array} list 显示的内容
+	 * @property {Boolean} show = [true|false] 是否显示（默认 false）
+	 * @property {String} mode = [row|column] 滚动方向 (默认 row)
+	 * 	@value row 水平滚动
+	 * 	@value column 垂直滚动
+	 * @property {Boolean} leftIcon = [true|false] 是否显示左边图标（默认 false）
+	 * @property {String} leftIconName 左边图标的名称 (默认 sound)
+	 * @property {String | Number} leftIconSize 左边图标的大小 (默认 20)
+	 * @property {String} leftIconColor 左边边图标的颜色（默认 '#333333'）
+	 * @property {Boolean} rightIcon = [true|false] 是否显示左边图标（默认 false）
+	 * @property {String} rightIconName 右边图标的名称 (默认 sound)
+	 * @property {String | Number} rightIconSize 右边图标的大小 (默认 20)
+	 * @property {String} rightIconColor 右边图标的颜色（默认 '#333333'）
+	 * @property {String} padding 内边距（默认 '9px 12px'）
+	 * @property {Boolean} autoPlay = [true|false] 自动播放（默认 true）
+	 * @property {Number} duration 滚动周期 (默认 2000)
+	 * @property {String} fontColor  字体颜色
+	 * @property {String | Number} fontSize 字体大小（默认 14）
+	 * @property {String} bgColor 背景颜色
+	 * 
+	 * @event {Function} click 点击通知栏文字触发
+	 * @event {Function} clickRight 点击右侧图标触发
+	 * @event {Function} end 一个周期滚动结束触发
+	 * @example <notice-column :list="list"></notice-column>
+	 */
+	import { noticeColumnEmits, noticeColumnProps } from './notice-column';
+	import { useNoticeColumn, useNoticeColumnCustomStyle } from './composables';
+	
+	defineOptions({ name: 'NoticeColumn', options: {  } });
+	
+	const props = defineProps(noticeColumnProps);
+	const $emit = defineEmits(noticeColumnEmits);
+	
+	const {
+		handleClick,
+		handleClickRight,
+		change
+	} = useNoticeColumn(props, $emit);
+	
+	const {
+		textStyle,
+		noticeStyle,
+		swiperStyle,
+		vertical
+	} = useNoticeColumnCustomStyle(props);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+
+	.fu-column-notice {
+		@include components.flex(row);
+		align-items: center;
+		justify-content: center;
+		flex-wrap: nowrap;
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		/* #endif */
+
+		&__swiper {
+			height: auto;
+			flex: 1;
+			@include components.flex(row);
+			align-items: center;
+			margin-left: 6px;
+
+			&__item {
+				@include components.flex(row);
+				/* #ifndef APP-NVUE */
+				overflow: hidden;
+				/* #endif */
+			}
+
+			&__content {
+				/* #ifndef APP-NVUE */
+				overflow: hidden;
+				/* #endif */
+			}
+		}
+
+		&__icon {
+			&--left {
+				display: inline-flex;
+				align-items: center;
+			}
+
+			&--right {
+				margin-left: 6px;
+				display: inline-flex;
+				align-items: center;
+			}
+		}
+	}
+
+	.fu-text-ellipsis {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		/* #endif */
+	}
+</style>

package/components/notice-bar/src/notice-row.ts

@@ -0,0 +1,155 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const noticeRowProps = {
+	/**
+	 * @description 显示的内容
+	 */
+	list: {
+		type: Array,
+		default() {
+			return []
+		}
+	},
+	/**
+	 * @description 是否显示
+	 * @default true
+	 */
+	show: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 是否显示左边图标
+	 * @default true
+	 */
+	leftIcon: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 左边图标的名称
+	 * @default 'volume'
+	 */
+	leftIconName: {
+		type: String,
+		default: 'volume'
+	},
+	/**
+	 * @description 左边图标的大小
+	 * @default 20
+	 */
+	leftIconSize: {
+		type: [String, Number],
+		default: 20
+	},
+	/**
+	 * @description 左边图标的颜色
+	 * @default '#333333'
+	 */
+	leftIconColor: {
+		type: String,
+		default: '#333333'
+	},
+	/**
+	 * @description 是否显示右边的图标
+	 * @default false
+	 */
+	rightIcon: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 右边图标的名称
+	 * @default 'right'
+	 */
+	rightIconName: {
+		type: String,
+		default: 'right'
+	},
+	/**
+	 * @description 右边图标的大小
+	 * @default 20
+	 */
+	rightIconSize: {
+		type: [String, Number],
+		default: 20
+	},
+	/**
+	 * @description 右边图标的颜色
+	 * @default '#333333'
+	 */
+	rightIconColor: {
+		type: String,
+		default: '#333333'
+	},
+	/**
+	 * @description 是否显示关闭按钮
+	 * @default false
+	 */
+	showClose: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 内边距
+	 * @default '9px 12px'
+	 */
+	padding: {
+		type: String,
+		default: '9px 12px'
+	},
+	/**
+	 * @description 自动播放
+	 * @default true
+	 */
+	autoPlay: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 水平滚动时的速度，即每秒滚动多少px
+	 * @default 80
+	 */
+	speed: {
+		type: Number,
+		default: 80
+	},
+	/**
+	 * @description 背景颜色
+	 * @default '#f9f9f9'
+	 */
+	bgColor: {
+		type: String,
+		default: '#f9f9f9'
+	},
+	/**
+	 * @description 字体颜色
+	 * @default '#333333'
+	 */
+	fontColor: {
+		type: String,
+		default: '#333333'
+	},
+	/**
+	 * @description 字体大小
+	 * @default 14
+	 */
+	fontSize: {
+		type: [String, Number],
+		default: 14
+	}
+};
+
+export const noticeRowEmits = {
+	/**
+	 * @description 点击通知栏文字触发
+	 */
+	click: () => true,
+	/**
+	 * @description 点击右侧图标触发
+	 */
+	clickRight: () => true
+};
+
+export type NoticeRowProps = ExtractPropTypes<typeof noticeRowProps>;
+export type NoticeRowEmits = typeof noticeRowEmits;

package/components/notice-bar/src/notice-row.vue

@@ -0,0 +1,135 @@
+<template>
+	<view class="fu-row-notice" :style="[noticeStyle]"  @tap="handleClick" v-if="show">
+		<view class="fu-row-notice__box">
+			<!-- 左图标 -->
+			<view class="fu-row-notice__icon--left" v-if="leftIcon">
+				<fu-icon :name="leftIconName" :size="leftIconSize" :color="leftIconColor"></fu-icon>
+			</view>
+
+			<!-- 消息体 -->
+			<view :id="elIdBox" class="fu-row-notice__content--box">
+				<view :id="elId" class="fu-row-notice__content" :style="{
+			      animationDuration: animationDuration,
+			      animationPlayState: animationPlayState,
+				  animationDelay: animationDelay,
+				  '-webkit-animationDelay': animationDelay
+			    }">
+					<text class="fu-row-notice__content--text" :style="[textStyle]">{{ showText }}</text>
+				</view>
+			</view>
+
+			<!-- 右图标 -->
+			<view class="fu-row-notice__icon--right" @click="handleClickRight" v-if="rightIcon">
+				<fu-icon :name="rightIconName" :size="rightIconSize" :color="rightIconColor"></fu-icon>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * @description 水平
+	 * @property {Array} list 显示的内容
+	 * @property {Boolean} show = [true|false] 是否显示（默认 false）
+	 * @property {Boolean} leftIcon = [true|false] 是否显示左边图标（默认 false）
+	 * @property {String} leftIconName 左边图标的名称 (默认 sound)
+	 * @property {String | Number} leftIconSize 左边图标的大小 (默认 20)
+	 * @property {String} leftIconColor 左边边图标的颜色（默认 '#333333'）
+	 * @property {Boolean} rightIcon = [true|false] 是否显示左边图标（默认 false）
+	 * @property {String} rightIconName 右边图标的名称 (默认 sound)
+	 * @property {String | Number} rightIconSize 右边图标的大小 (默认 20)
+	 * @property {String} rightIconColor 右边图标的颜色（默认 '#333333'）
+	 * @property {String} padding 内边距（默认 '9px 12px'）
+	 * @property {Boolean} autoPlay = [true|false] 自动播放（默认 true）
+	 * @property {Number} speed 水平滚动时的速度，即每秒滚动多少px (默认 80)
+	 * @property {String} fontColor  字体颜色
+	 * @property {String | Number} fontSize 字体大小（默认 14）
+	 * @property {String} bgColor 背景颜色
+	 * 
+	 * @event {Function} click 点击通知栏文字触发
+	 * @event {Function} clickRight 点击右侧图标触发
+	 * @example <notice-row :list="list"></notice-row>
+	 */
+	import { noticeRowEmits, noticeRowProps } from './notice-row';
+	import { useNoticeRow, useNoticeRowCustomStyle } from './composables';
+	
+	defineOptions({ name: 'NoticeRow', options: { virtualHost: true } });
+	
+	const props = defineProps(noticeRowProps);
+	const $emit = defineEmits(noticeRowEmits);
+	
+	const {
+		elIdBox,
+		elId,
+		animationDuration,
+		animationPlayState,
+		animationDelay,
+		showText,
+		handleClick,
+		handleClickRight
+	} = useNoticeRow(props, $emit);
+	
+	const {
+		textStyle,
+		noticeStyle
+	} = useNoticeRowCustomStyle(props);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	
+	.fu-row-notice {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		/* #endif */
+
+		&__box {
+			@include components.flex(row);
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		&__content {
+
+			&--box {
+				flex: 1;
+				@include components.flex(row);
+				/* #ifndef APP-NVUE */
+				overflow: hidden;
+				/* #endif */
+			}
+
+			@include components.flex(row);
+			flex-wrap: nowrap;
+			text-align: right;
+			padding-left: 100%;
+			animation: fu-notice-animation 10s linear infinite both;
+
+			&--text {
+				word-break: keep-all;
+				white-space: nowrap;
+				margin-left: 6px;
+			}
+		}
+
+		&__icon {
+			&--left {
+				display: inline-flex;
+				align-items: center;
+			}
+
+			&--right {
+				margin-left: 6px;
+				display: inline-flex;
+				align-items: center;
+			}
+		}
+	}
+
+	@keyframes fu-notice-animation {
+		100% {
+			transform: translate3d(-100%, 0, 0);
+		}
+	}
+</style>

package/components/number-box/index.ts

@@ -0,0 +1 @@
+export * from './src/number-box'

package/components/number-box/src/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './number-box-custom'
+export * from './use-number-box'

package/components/number-box/src/composables/number-box-custom.ts

@@ -0,0 +1,16 @@
+import { computed } from 'vue';
+import type { NumberBoxProps } from '../number-box';
+
+export const useNumberBoxCustomStyle = (props: NumberBoxProps) => {
+	const inputStyle = computed(() => {
+		return {
+			background: props.bgColor, 
+			color: props.color, 
+			fontSize: uni.$fu.addUnit(props.size)
+		}
+	});
+	
+	return {
+		inputStyle
+	}
+}