fusions-ui 1.2.7 → 1.2.8

package/components/navbar/src/navbar.vue

@@ -0,0 +1,249 @@
+<template>
+	<view class="fu-navbar" :class="{'fu-dark': dark, 'fu-nvue-fixed': fixed}">
+		<view 
+			class="fu-navbar__content"
+			:class="{'fu-navbar--fixed': fixed, 'fu-navbar--shadow': shadow, 'fu-navbar--border': border}"
+			:style="{backgroundColor: themeBgColor}">
+			<fu-status-bar mode="top" v-if="statusBar" />
+			<view
+				class="fu-navbar__header"
+				:style="{
+					color: themeColor,
+					backgroundColor: themeBgColor, 
+					height: navbarHeight, 
+					width: showMenuButtonWidth? navWidth+'px':'100%'
+				}">
+				<view 
+					class="fu-navbar__header-btns fu-navbar__header-btns-left"
+					:style="{width: leftIconWidth}"
+					@tap="handleClickLeft">
+					<slot name="left">
+						<view class="fu-navbar__content_view" v-if="leftIcon.length > 0">
+							<fu-icon :name="leftIcon" size="22" :color="themeColor" />
+						</view>
+						<view 
+							class="fu-navbar-btn-text" 
+							:class="{'fu-navbar-btn-icon-left': !leftIcon.length > 0}" 
+							v-if="leftText.length">
+							<text :style="{ color: themeColor, fontSize: '12px' }">{{ leftText }}</text>
+						</view>
+					</slot>
+				</view>
+				<view class="fu-navbar__header-container" @tap="handleClickTitle">
+					<slot>
+						<view class="fu-navbar__header-container-inner" v-if="title.length > 0">
+							<text class="fu-nav-bar-text fu-ellipsis-1" :style="{color: themeColor}">{{ title }}</text>
+						</view>
+					</slot>
+				</view>
+				<view 
+					class="fu-navbar__header-btns fu-navbar__header-btns-right"
+					:style="{width:rightIconWidth}"
+					@click="handleClickRight">
+					<slot name="right">
+						<view v-if="rightIcon.length">
+							<fu-icon :name="rightIcon" size="22" :color="themeColor" />
+						</view>
+						<view class="fu-navbar-btn-text" v-if="rightText.length && !rightIcon.length">
+							<text class="fu-nav-bar-right-text" :style="{color: themeColor}">{{ rightText }}</text>
+						</view>
+					</slot>
+				</view>
+			</view>
+		</view>
+		<view class="fu-navbar__placeholder" v-if="fixed">
+			<fu-status-bar mode="top" v-if="statusBar" />
+			<view class="fu-navbar__placeholder-view" :style="{height: navbarHeight}" />
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * NavBar 自定义导航栏
+	 * @description 导航栏组件，主要用于头部导航
+	 * @tutorial http://www.fusions.top/components/navbar.html
+	 * @property {Boolean} dark 开启黑暗模式
+	 * @property {String} title 标题文字
+	 * @property {String} leftText 左侧按钮文本
+	 * @property {String} rightText 右侧按钮文本
+	 * @property {String} leftIcon 左侧按钮图标
+	 * @property {String} rightIcon 右侧按钮图标
+	 * @property {String} color 图标和文字颜色
+	 * @property {String} bgColor = [transparent] 导航栏背景颜色
+	 * @property {Boolean | String} fixed = [true|false] 是否固定顶部
+	 * @property {Boolean | String} statusBar = [true|false] 是否包含状态栏
+	 * @property {Boolean | String} shadow = [true|false] 导航栏下是否有阴影
+	 * @property {Boolean | String} border = [true|false] 导航栏下是否有边框
+	 * @property {Number | String} height 导航栏高度（默认 44）
+	 * @property {Number | String} leftWidth 导航栏左侧宽度（默认 60）
+	 * @property {Number | String} rightWidth 导航栏右侧宽度（默认 60）
+	 * @property {Boolean | String} stat = [true|false] 是否开启统计标题上报
+	 * @property {Boolean | String} showMenuButtonWidth 是否开启胶囊避让（默认 false）
+	 * 
+	 * @event {Function} clickLeft 左侧按钮点击时触发
+	 * @event {Function} clickRight 右侧按钮点击时触发
+	 * @event {Function} clickTitle 中间标题点击时触发
+	 */
+	import { navbarEmits, navbarProps } from './navbar';
+	import { useNavbar, useNavbarCustomStyle } from './composables';
+
+	defineOptions({ name: 'FuNavbar', options: { virtualHost: true } });
+
+	const props = defineProps(navbarProps);
+	const $emit = defineEmits(navbarEmits);
+
+	const {
+		navWidth,
+		handleClickLeft,
+		handleClickRight,
+		handleClickTitle
+	} = useNavbar(props, $emit);
+
+	const {
+		themeBgColor,
+		themeColor,
+		navbarHeight,
+		leftIconWidth,
+		rightIconWidth
+	} = useNavbarCustomStyle(props);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	$nav-height: 44px;
+
+	.fu-nvue-fixed {
+		/* #ifdef APP-NVUE */
+		position: sticky;
+		/* #endif */
+	}
+
+	.fu-navbar {
+		box-sizing: border-box;
+	}
+
+	.fu-nav-bar-text {
+		/* #ifdef APP-PLUS */
+		font-size: 34rpx;
+		/* #endif */
+		/* #ifndef APP-PLUS */
+		font-size: 16px;
+		/* #endif */
+	}
+
+	.fu-nav-bar-right-text {
+		font-size: 12px;
+	}
+
+	.fu-navbar__content {
+		position: relative;
+		box-sizing: border-box;
+		background-color: transparent;
+	}
+
+	.fu-navbar__content_view {
+		box-sizing: border-box;
+	}
+
+	.fu-navbar-btn-text {
+		@include components.flex(column);
+		justify-content: flex-start;
+		align-items: center;
+		line-height: 12px;
+	}
+
+	.fu-navbar__header {
+		padding: 0 10px;
+		@include components.flex(row);
+		height: $nav-height;
+		font-size: 12px;
+		box-sizing: border-box;
+	}
+
+	.fu-navbar__header-btns {
+		@include components.flex(row);
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		/* #endif */
+		flex-wrap: nowrap;
+		width: 120rpx;
+		justify-content: center;
+		align-items: center;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.fu-navbar__header-btns-left {
+		@include components.flex;
+		width: 120rpx;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.fu-navbar__header-btns-right {
+		@include components.flex(row);
+		justify-content: flex-end;
+		align-items: center;
+	}
+
+	.fu-navbar__header-container {
+		@include components.flex;
+		flex: 1;
+		padding: 0 10px;
+		overflow: hidden;
+	}
+
+	.fu-navbar__header-container-inner {
+		@include components.flex(row);
+		flex: 1;
+		align-items: center;
+		justify-content: center;
+		font-size: 12px;
+		overflow: hidden;
+		box-sizing: border-box;
+	}
+
+	.fu-navbar__placeholder-view {
+		height: $nav-height;
+	}
+
+	.fu-navbar--fixed {
+		position: fixed;
+		z-index: 998;
+		/* #ifdef H5 */
+		left: var(--window-left);
+		right: var(--window-right);
+		/* #endif */
+		/* #ifndef H5 */
+		left: 0;
+		right: 0;
+		/* #endif */
+	}
+
+	.fu-navbar--shadow {
+		box-shadow: 0 1px 6px #ccc;
+	}
+
+	.fu-navbar--border {
+		border-bottom-width: 1rpx;
+		border-bottom-style: solid;
+		border-bottom-color: #eeeeee;
+	}
+
+	.fu-ellipsis-1 {
+		overflow: hidden;
+		/* #ifndef APP-NVUE */
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		text-overflow: ellipsis;
+		/* #endif */
+	}
+
+	// 暗主题配置
+	.fu-dark {}
+</style>

package/components/notice-bar/index.ts

@@ -0,0 +1,3 @@
+export * from './src/notice-bar'
+export * from './src/notice-row'
+export * from './src/notice-column'

package/components/notice-bar/src/composables/index.ts

@@ -0,0 +1,5 @@
+export * from './notice-row-custom'
+export * from './use-notice-row'
+export * from './notice-column-custom'
+export * from './use-notice-column'
+export * from './use-notice-bar'

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

@@ -0,0 +1,43 @@
+import { computed, type CSSProperties } from 'vue';
+import type { NoticeColumnProps } from '../notice-column';
+
+export const useNoticeColumnCustomStyle = (props: NoticeColumnProps) => {
+	const textStyle = computed<CSSProperties>(() => {
+		let style = {
+			color: props.fontColor || '',
+			fontSize: uni.$fu.addUnit(props.fontSize)
+		};
+		
+		return style
+	});
+	
+	const noticeStyle = computed<CSSProperties>(() => {
+		let style: Record<string, any> = {
+			background: props.bgColor || 'transparent'
+		};
+		if (props.padding) style.padding = props.padding;
+		
+		return style
+	});
+	
+	const swiperStyle = computed<CSSProperties>(() => {
+		let style: Record<string, any> = {};
+		style.height = props.fontSize ? uni.$fu.addUnit(props.fontSize as number + 6) : '16px';
+		style.lineHeight = style.height;
+		
+		return style
+	});
+	
+	// 标记是否为垂直
+	const vertical = computed(() => {
+		if (props.mode === 'row') return false
+		else return true
+	});
+	
+	return {
+		textStyle,
+		noticeStyle,
+		swiperStyle,
+		vertical
+	}
+}

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

@@ -0,0 +1,26 @@
+import { computed, type CSSProperties } from 'vue';
+import type { NoticeRowProps } from '../notice-row';
+
+export const useNoticeRowCustomStyle = (props: NoticeRowProps) => {
+	const textStyle = computed<CSSProperties>(() => {
+		let style = {
+			color: props.fontColor || '',
+			fontSize: uni.$fu.addUnit(props.fontSize)
+		};
+		
+		return style
+	});
+	
+	const noticeStyle = computed(() => {
+		let style: Record<string, any> = {};
+		style.background = props.bgColor || 'transparent';
+		if (props.padding) style.padding = props.padding;
+		
+		return style
+	});
+	
+	return {
+		textStyle,
+		noticeStyle
+	}
+}

package/components/notice-bar/src/composables/use-notice-bar.ts

@@ -0,0 +1,34 @@
+import { computed, type SetupContext } from 'vue';
+import type { NoticeBarProps, NoticeBarEmits } from '../notice-bar';
+
+export const useNoticeBar = (props: NoticeBarProps, $emit: SetupContext<NoticeBarEmits>['emit']) => {
+	// 当设置了show为false，或者autoHidden为true且list为空时，不显示通知
+	const showNotice = computed(() => {
+		if (props.show === false || (props.autoHidden && props.list.length === 0)) {
+			return false
+		}
+		return true
+	});
+
+	// 点击通知栏
+	const handleClick = (index: any) => {
+		$emit('click', index)
+	};
+
+	// 点击右边图标
+	const handleClickRight = (e: any) => {
+		$emit('clickRight', e)
+	};
+
+	// 一个周期滚动结束
+	const handleEnd = () => {
+		$emit('end')
+	};
+
+	return {
+		showNotice,
+		handleClick,
+		handleClickRight,
+		handleEnd
+	}
+}

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

@@ -0,0 +1,31 @@
+import { ref, type SetupContext } from 'vue';
+import type { NoticeColumnProps, NoticeColumnEmits } from '../notice-column';
+
+export const useNoticeColumn = (props: NoticeColumnProps, $emit: SetupContext<NoticeColumnEmits>['emit']) => {
+	const index = ref(0);
+	
+	// 点击通知栏
+	const handleClick = () => {
+		$emit('click', index.value)
+	};
+	
+	// 点击右边图标
+	const handleClickRight = () => {
+		$emit('clickRight', index.value)
+	};
+	
+	// 切换事件
+	const change = (e: any) => {
+		const _index = e.detail.current;
+		index.value = _index;
+		if (_index === props.list.length - 1) {
+			$emit('end')
+		}
+	};
+	
+	return {
+		handleClick,
+		handleClickRight,
+		change
+	}
+};

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

@@ -0,0 +1,88 @@
+import { ref, watch, nextTick, getCurrentInstance, type SetupContext } from 'vue';
+import type { NoticeRowProps, NoticeRowEmits } from '../notice-row';
+
+export const useNoticeRow = (props: NoticeRowProps, $emit: SetupContext<NoticeRowEmits>['emit']) => {
+	const instance = getCurrentInstance();
+	const elIdBox = uni.$fu.uuid();
+	const elId = uni.$fu.uuid();
+	const textWidth = ref(0); // 滚动文字的宽度
+	const textBoxWidth = ref(0); // 存放滚动文字的盒子的宽度
+	const animationDuration = ref('10s'); // 动画执行的时间
+	const animationPlayState = ref('paused'); // 动画执行状态
+	const animationDelay = ref('0s'); // 动画执行延迟的时间
+	const showText = ref(''); // 当前显示的文本
+	
+	// 初始化通知栏
+	const initNotice = () => {
+		let query = []
+		let textQuery = new Promise<void>((resolve, reject) => {
+			uni.createSelectorQuery()
+				// #ifndef MP-ALIPAY
+				.in(instance)
+				// #endif
+				.select(`#${elId}`)
+				.boundingClientRect().exec(ret => {
+					textWidth.value = ret[0].width;
+					resolve()
+				})
+		})
+		let boxQuery = new Promise<void>((resolve, reject) => {
+			uni.createSelectorQuery()
+				// #ifndef MP-ALIPAY
+				.in(instance)
+				// #endif
+				.select(`#${elIdBox}`)
+				.boundingClientRect()
+				.exec(ret => {
+					textBoxWidth.value = ret[0].width;
+					resolve()
+				})
+		})
+		query.push(textQuery)
+		query.push(boxQuery)
+		Promise.all(query).then(() => {
+			// 根据t=s/v(时间=路程/速度)，这里为何不需要加上#fu-row-notice__content--box的宽度，因为设置了.fu-row-notice__content样式中设置了padding-left: 100%
+			animationDuration.value = `${textWidth.value / props.speed}s`;
+			animationDelay.value = `-${textBoxWidth.value / props.speed}s`;
+			// 这里必须这样开始动画，否则在APP上动画速度不会改变(HX版本2.4.6，IOS13)
+			animationPlayState.value = 'paused';
+			setTimeout(() => {
+				if (props.autoPlay) {
+					animationPlayState.value = 'running';
+				}
+			}, 1000)
+		})
+	};
+
+	// 点击通知栏
+	const handleClick = () => {
+		$emit('click')
+	};
+
+	// 点击右边图标
+	const handleClickRight = () => {
+		$emit('clickRight')
+	};
+	
+	watch(() => props.list, (newVal) => {
+		showText.value = newVal.join('，')
+		nextTick(() => {
+			initNotice()
+		})
+	}, { immediate: true });
+	
+	watch(() => props.speed, () => {
+		initNotice()
+	})
+
+	return {
+		elIdBox,
+		elId,
+		animationDuration,
+		animationPlayState,
+		animationDelay,
+		showText,
+		handleClick,
+		handleClickRight
+	}
+}

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

@@ -0,0 +1,197 @@
+import type { ExtractPropTypes } from 'vue';
+
+/**
+ * 通知栏 mode 有效值
+ */
+export const noticeBarModes = ['row', 'column'] as const;
+
+export const noticeBarProps = {
+	/**
+	 * @description 显示的内容
+	 */
+	list: {
+		type: Array,
+		default() {
+			return []
+		}
+	},
+	/**
+	 * @description 是否显示
+	 * @default true
+	 */
+	show: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 设置圆角
+	 */
+	radius: {
+		type: [Number, String],
+		default: 0
+	},
+	/**
+	 * @description 滚动方向
+	 * @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: [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 '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 水平滚动时的速度，即每秒滚动多少px
+	 * @default 80
+	 */
+	speed: {
+		type: Number,
+		default: 80
+	},
+	/**
+	 * @description 水平滚动的时候是否采用衔接的模式
+	 * @default true
+	 */
+	circular: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 没有数据时是否显示通知
+	 * @default true
+	 */
+	autoHidden: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 背景颜色
+	 * @default '#f9f9f9'
+	 */
+	bgColor: {
+		type: String,
+		default: '#f9f9f9'
+	},
+	/**
+	 * @description 字体颜色
+	 * @default '#333333'
+	 */
+	color: {
+		type: String,
+		default: '#333333'
+	},
+	/**
+	 * @description 字体大小
+	 * @default 14
+	 */
+	size: {
+		type: [String, Number],
+		default: 14
+	}
+};
+
+export const noticeBarEmits = {
+	/**
+	 * @description 点击通知栏文字触发
+	 */
+	click: (_e: any) => true,
+	/**
+	 * @description 点击右侧图标触发
+	 */
+	clickRight: (_e: any) => true,
+	/**
+	 * @description 一个周期滚动结束触发（仅mode=column时生效）
+	 */
+	end: () => true
+};
+
+export type NoticeBarProps = ExtractPropTypes<typeof noticeBarProps>;
+export type NoticeBarEmits = typeof noticeBarEmits;