fusions-ui 1.2.6 → 1.2.8

package/components/fu-tabs/fu-tabs.vue

@@ -1,361 +0,0 @@
-<template>
-	<view class="fu-tabs">
-		<view class="fu-tabs__wrapper">
-			<slot name="left" />
-			<view class="fu-tabs__wrapper__scroll-view-wrapper">
-				<scroll-view ref="fu-tabs__wrapper__scroll-view" class="fu-tabs__wrapper__scroll-view" :scroll-x="scrollable" :scroll-left="scrollLeft" scroll-with-animation :show-scrollbar="false">
-					<view ref="fu-tabs__wrapper__nav" class="fu-tabs__wrapper__nav" :style="{flex: scrollable ? '' : 1}">
-						<view :ref="`fu-tabs__wrapper__nav__item-${index}`" class="fu-tabs__wrapper__nav__item" :class="[`fu-tabs__wrapper__nav__item-${index}`, item.disabled && 'fu-tabs__wrapper__nav__item--disabled']"
-							:style="[{flex: scrollable ? '' : 1, padding}, itemStyle]" v-for="(item, index) in list" :key="index" @tap="handleClick(item, index)">
-							<text class="fu-tabs__wrapper__nav__item__text" :class="[item.disabled && 'fu-tabs__wrapper__nav__item__text--disabled']" :style="[textStyle(index)]">{{ item[keyName] }}</text>
-							
-							<!-- 徽标 -->
-							<fu-badge 
-								:value="item.badge && item.badge.value || propsBadge.value"
-								:isDot="item.badge && item.badge.isDot || propsBadge.isDot"
-								:max="item.badge && item.badge.max || propsBadge.max"
-								:type="item.badge && item.badge.type || propsBadge.type"
-								:showZero="item.badge && item.badge.showZero || propsBadge.showZero"
-								:bgColor="item.badge && item.badge.bgColor || propsBadge.bgColor"
-								:color="item.badge && item.badge.color || propsBadge.color"
-								:shape="item.badge && item.badge.shape || propsBadge.shape"
-								:numberType="item.badge && item.badge.numberType || propsBadge.numberType"
-								:inverted="item.badge && item.badge.inverted || propsBadge.inverted"
-								:absolute="item.absolute && item.badge.absolute || propsBadge.absolute"
-								:offset="item.offset && item.badge.offset || propsBadge.offset"
-								customStyle="margin-left: 4px;" 
-								v-if="!!(item.badge && (item.badge.isDot || item.badge.value))">
-							</fu-badge>
-						</view>
-						<view ref="fu-tabs__wrapper__nav__line" class="fu-tabs__wrapper__nav__line" :style="[lineStyle]"></view>
-					</view>
-				</scroll-view>
-			</view>
-			<slot name="right" />
-		</view>
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import fuBadgeProps from '../fu-badge/props.js'
-	import props from './props.js';
-	// #ifdef APP-NVUE
-	const animation = uni.requireNativePlugin('animation');
-	const dom = uni.requireNativePlugin('dom');
-	// #endif
-	/**
-	 * Tabs 标签
-	 * @description 此组件在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
-	 * @property {Array} list 标签数组，元素为对象，如[{name: '推荐'}]
-	 * @property {String,Number} duration 滑块移动一次所需的时间，单位秒（默认 300 ）
-	 * @property {String,Object} activeStyle 菜单选择中时的样式（默认{ color: '#303133' }）
-	 * @property {String,Object} inactiveStyle	菜单非选择中时的样式（默认{ color: '#606266' }）
-	 * @property {String,Number} lineWidth	滑块长度（默认 20）
-	 * @property {String,Number} lineHeight	滑块高度（默认 3）
-	 * @property {String} lineColor	滑块颜色
-	 * @property {String} lineBgSize 滑块背景显示大小，当滑块背景设置为图片时使用（默认 cover）
-	 * @property {String,Object} itemStyle	菜单item的样式（默认 { height: '44px' }）
-	 * @property {String} padding 各个元素的内边距可在itemStyle设置（默认 '0 15px'） 
-	 * @property {String} scrollable = [true|false]	菜单是否可滚动，选项很少的时候设置为false整个tabs自动居中显示（默认：true）
-	 * @property {String,Number} current 当前选中标签的索引（默认 0 ）
-	 * @property {String} keyName 从list元素对象中读取的键名（默认 'name' ）
-	 * 
-	 * @event {Function} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
-	 * @event {Function} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
-	 * @example <fu-tabs :list="list" :current="current" @change="change"></fu-tabs>
-	 */
-	export default {
-		name: 'FuTabs',
-		mixins: [mpMixin, props],
-		emits: ['click','change'],
-		data() {
-			return {
-				firstTime: true,
-				scrollLeft: 0,
-				scrollViewWidth: 0,
-				lineOffsetLeft: 0,
-				tabsRect: {
-					left: 0
-				},
-				innerCurrent: 0,
-				moving: false,
-			}
-		},
-		computed: {
-			textStyle() {
-				return index => {
-					const style = {};
-					// 取当期是否激活的样式
-					const customeStyle = index == this.innerCurrent ? this.$fu.addStyle(this.activeStyle) : this.$fu.addStyle(this.inactiveStyle);
-					// 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
-					if (this.list[index].disabled) {
-						style.color = '#c8c9cc';
-					}
-					return this.$fu.deepMerge(customeStyle, style)
-				}
-			},
-			propsBadge() {
-				return fuBadgeProps
-			},
-			lineStyle() {
-				let style = {
-					width: `${this.lineWidth}px`,
-					height: this.firstTime? 0: `${this.lineHeight}px`,
-					background: this.lineColor,
-					backgroundSize: this.lineBgSize,
-				};
-
-				// #ifndef APP-NVUE
-				style.transform = `translate(${this.lineOffsetLeft}px)`;
-				style.transitionDuration = `${this.firstTime? 0 : this.duration}ms`;
-				// #endif
-				
-				return style
-			}
-		},
-		async mounted() {
-			this.init()
-		},
-		methods: {
-			setLineLeft() {
-				const tabItem = this.list[this.innerCurrent];
-				if (!tabItem) {
-					return;
-				}
-				// 获取滑块该移动的位置
-				let lineOffsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => total + curr.rect.width, 0);
-				// 获取下划线的数值px表示法
-				let lineWidth = this.$fu.getPx(this.lineWidth);
-				// 如果传的值未带单位+设置了全局单位，则带上单位计算，这样才没有误差
-				if (this.$fu.checkNumber(this.lineWidth) && 'px') {
-					lineWidth = this.$fu.getPx(`${this.lineWidth}px`);
-				}
-				this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2;
-				// #ifdef APP-NVUE
-				// 第一次移动滑块，无需过渡时间
-				this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
-				// #endif
-				// 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到第一个tab item的中间
-				// 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
-				if (this.firstTime) {
-					setTimeout(() => {
-						this.firstTime = false;
-					}, 20);
-				}
-			},
-			
-			// nvue下设置滑块的位置
-			animation(x, duration = 0) {
-				// #ifdef APP-NVUE
-				const ref = this.$refs['fu-tabs__wrapper__nav__line'];
-				animation.transition(ref, {
-					styles: {
-						transform: `translateX(${x}px)`
-					},
-					duration
-				})
-				// #endif
-			},
-			
-			// 点击某一个标签
-			handleClick(item, index) {
-				// 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
-				this.$emit('click', {
-					...item,
-					index
-				})
-				// 如果disabled状态，返回
-				if (item.disabled) return
-				if(this.innerCurrent != index) {
-					this.$emit('change', {
-						...item,
-						index
-					})
-				}
-				this.innerCurrent = index;
-				// #ifndef APP-NVUE
-				this.$nextTick(()=>{
-					this.resize()
-				})
-				// #endif
-				// #ifdef APP-NVUE
-				this.$nextTick(()=>{
-					// nvue模式下再给点延时，确保万无一失
-					this.$fu.sleep(30).then(res=>{
-						this.resize()
-					});
-				})
-				// #endif
-			},
-			
-			init() {
-				this.$fu.sleep().then(() => {
-					this.resize()
-				})
-			},
-			
-			setScrollLeft() {
-				// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
-				const tabRect = this.list[this.innerCurrent];
-				// 累加得到当前item到左边的距离
-				const offsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => {
-					return total + curr.rect.width
-				}, 0)
-				// 此处为屏幕宽度
-				const windowWidth = this.$fu.sys().windowWidth;
-				// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
-				let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect.right) / 2 + this.tabsRect.left / 2;
-				// 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
-				scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width);
-				this.scrollLeft = Math.max(0, scrollLeft);
-			},
-			
-			// 获取所有标签的尺寸
-			resize() {
-				// 如果不存在list，则不处理
-				if(this.list.length === 0) {
-					return
-				}
-				Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
-					this.tabsRect = tabsRect;
-					this.scrollViewWidth = 0;
-					itemRect.map((item, index) => {
-						// 计算scroll-view的宽度，这里
-						this.scrollViewWidth += item.width;
-						// 另外计算每一个item的中心点X轴坐标
-						this.list[index].rect = item;
-					})
-					// 获取了tabs的尺寸之后，设置滑块的位置
-					this.setLineLeft()
-					this.setScrollLeft()
-				})
-			},
-			
-			// 获取导航菜单的尺寸
-			getTabsRect() {
-				return new Promise(resolve => {
-					this.queryRect('fu-tabs__wrapper__scroll-view').then(size => resolve(size))
-				})
-			},
-			
-			// 获取所有标签的尺寸
-			getAllItemRect() {
-				return new Promise(resolve => {
-					const promiseAllArr = this.list.map((item, index) => this.queryRect(`fu-tabs__wrapper__nav__item-${index}`, true));
-					Promise.all(promiseAllArr).then(sizes => resolve(sizes))
-				})
-			},
-			
-			// 获取各个标签的尺寸
-			queryRect(el, item) {
-				// #ifndef APP-NVUE
-				return new Promise(resolve => {
-					let query = uni.createSelectorQuery().in(this);
-					query.select(`.${el}`).boundingClientRect(data => {
-						resolve(data)
-					}).exec();
-				})
-				// #endif
-
-				// #ifdef APP-NVUE
-				// nvue下，使用dom模块查询元素高度
-				// 返回一个promise，让调用此方法的主体能使用then回调
-				return new Promise(resolve => {
-					dom.getComponentRect(item ? this.$refs[el][0] : this.$refs[el], res => {
-						resolve(res.size)
-					})
-				})
-				// #endif
-			}
-		},
-		watch: {
-			current: {
-				immediate: true,
-				handler (newValue, oldValue) {
-					// 内外部值不相等时，才尝试移动滑块
-					if (newValue !== this.innerCurrent) {
-						this.innerCurrent = newValue;
-						this.$nextTick(() => {
-							this.resize()
-						})
-					}
-				}
-			},
-			// list变化时，重新渲染list各项信息
-			list() {
-				this.$nextTick(() => {
-					this.resize()
-				})
-			}
-		}
-	}
-</script>
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	@import '../../libs/style/color.scss';
-	
-	.fu-tabs {
-
-		&__wrapper {
-			@include flex(row);
-			align-items: center;
-
-			&__scroll-view-wrapper {
-				flex: 1;
-				/* #ifndef APP-NVUE */
-				overflow: auto hidden;
-				/* #endif */
-			}
-
-			&__scroll-view {
-				@include flex(row);
-				flex: 1;
-			}
-
-			&__nav {
-				display: flex;
-				flex-direction: row;
-				position: relative;
-
-				&__item {
-					display: flex;
-					flex-direction: row;
-					align-items: center;
-					justify-content: center;
-					/* #ifndef APP-NVUE */
-					flex-shrink: 0;
-					/* #endif */
-					position: relative;
-
-					&--disabled {
-						/* #ifndef APP-NVUE */
-						cursor: not-allowed;
-						/* #endif */
-					}
-
-					&__text {
-						font-size: 15px;
-						color: #c8c9cc;
-
-						&--disabled {
-							color: #c8c9cc !important;
-						}
-					}
-				}
-
-				&__line {
-					height: 3px;
-					background: $fu-primary;
-					width: 30px;
-					position: absolute;
-					bottom: 2px;
-					border-radius: 100px;
-					transition-property: transform;
-					transition-duration: 300ms;
-				}
-			}
-		}
-	}
-</style>

package/components/fu-tabs/props.js

@@ -1,109 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 滑块的移动过渡时间，单位ms
-		 * @default 300
-		 */
-		duration: {
-			type: Number,
-			default: 300
-		},
-		/**
-		 * @description tabs标签数组
-		 */
-		list: {
-			type: Array,
-			default: () => []
-		},
-		/**
-		 * @description 滑块颜色
-		 */
-		lineColor: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 菜单选择中时的样式
-		 */
-		activeStyle: {
-			type: [String,Object],
-			default: () => ({
-				color: '#303133'
-			})
-		},
-		/**
-		 * @description 菜单非选中时的样式
-		 */
-		inactiveStyle: {
-			type: [String, Object],
-			default: () => ({
-				color: '#606266'
-			})
-		},
-		/**
-		 * @description 滑块长度
-		 * @default 20
-		 */
-		lineWidth: {
-			type: [String,Number],
-			default: 20
-		},
-		/**
-		 * @description 滑块高度
-		 * @default 3
-		 */
-		lineHeight: {
-			type: [String,Number],
-			default: 3
-		},
-		/**
-		 * @description 滑块背景显示大小，当滑块背景设置为图片时使用
-		 * @default 'cover'
-		 */
-		lineBgSize: {
-			type: String,
-			default: 'cover'
-		},
-		/**
-		 * @description 菜单item的样式
-		 */
-		itemStyle: {
-			type: [String, Object],
-			default: () => ({
-				height: '44px',
-				padding: '0 15px'
-			})
-		},
-		/**
-		 * @description 菜单是否可滚动
-		 * @default true
-		 */
-		scrollable: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 当前选中标签的索引
-		 */
-		current: {
-			type: [String,Number],
-			default: 0
-		},
-		/**
-		 * @description 默认读取的键名
-		 * @default 'name'
-		 */
-		keyName: {
-			type: String,
-			default: 'name'
-		},
-		/**
-		 * @description 各个元素的内边距可在itemStyle设置
-		 * @default '0 15px'
-		 */
-		padding: {
-			type: String,
-			default: '0 15px'
-		}
-	}
-}

package/components/fu-tag/props.js

@@ -1,135 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 序号，用于区分多个标签
-		 */
-		index: {
-		  type: [String,Number],
-		  default: ''
-		},
-		/**
-		 * @description 是否显示
-		 * @default true
-		 */
-		show: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 标签类型
-		 * @values 'primary' - 主色, 'error' - 错误, 'success' - 成功, 'warning' - 警告, 'info' - 信息
-		 * @default 'primary'
-		 */
-		type: {
-			type: String,
-			default: 'primary'
-		},
-		/**
-		 * @description 标签的大小
-		 * @default 'medium'
-		 */
-		size: {
-			type: String,
-			default: 'medium'
-		},
-		/**
-		 * @description tag的形状
-		 * @values 'circle' - 两边半圆形, 'square' - 方形，带圆角
-		 * @default 'square'
-		 */
-		shape: {
-			type: String,
-			default: 'square'
-		},
-		/**
-		 * @description 标签文字
-		 */
-		text: {
-			type: [String,Number],
-			default: ''
-		},
-		/**
-		 * @description 背景颜色，默认为空字符串，即不处理
-		 */
-		bgColor: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 标签字体颜色，默认为空字符串，即不处理
-		 */
-		color: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 标签的边框颜色
-		 */
-		borderColor: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 镂空时是否填充背景色
-		 * @default false
-		 */
-		plainFill: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 是否镂空
-		 * @default false
-		 */
-		plain: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 是否可关闭
-		 * @default false
-		 */
-		closable: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 关闭按钮图标的颜色
-		 * @default '#C6C7CB'
-		 */
-		closeColor: {
-			type: String,
-			default: '#C6C7CB'
-		},
-		/**
-		 * @description 关闭按钮图标的位置
-		 * @values 'right' - 右边, 'right-top' - 右上
-		 * @default 'right-top'
-		 */
-		closePlace: {
-			type: String,
-			default: 'right-top'
-		},
-		/**
-		 * @description 内置图标，或绝对路径的图片
-		 */
-		icon: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 图标颜色
-		 */
-		iconColor: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description nvue模式下 是否直接显示，在fu-list等cell下面使用就需要设置
-		 */
-		cellChild: {
-			type: Boolean,
-			default: false
-		}
-	}
-}

package/components/fu-text/button.js

@@ -1,13 +0,0 @@
-export default {
-    props: {
-        lang: String,
-        sessionFrom: String,
-        sendMessageTitle: String,
-        sendMessagePath: String,
-        sendMessageImg: String,
-        showMessageCard: Boolean,
-        appParameter: String,
-        formType: String,
-        openType: String
-    }
-}