fusions-ui 1.2.6 → 1.2.8

package/components/fu-steps-item/props.js

@@ -1,34 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 标题
-		 */
-		title: {
-			type: [String, Number],
-			default: ''
-		},
-		/**
-		 * @description 描述文本
-		 */
-		desc: {
-			type: [String, Number],
-			default: ''
-		},
-		/**
-		 * @description 图标大小
-		 * @default 18
-		 */
-		iconSize: {
-			type: [String, Number],
-			default: 18
-		},
-		/**
-		 * @description 当前步骤是否处于失败状态
-		 * @default false
-		 */
-		error: {
-			type: Boolean,
-			default: false
-		}
-	}
-}

package/components/fu-sticky/fu-sticky.vue

@@ -1,232 +0,0 @@
-<template>
-	<view :id="elId" class="fu-sticky" :class="[customClass]" :style="[stickyStyle]">
-		<view :style="[stickyContent]">
-			<slot />
-		</view>
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js';
-	/**
-	 * Sticky 吸顶
-	 * @description 此组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
-	 * @property {String,Number} offsetTop 吸顶时与顶部的距离，单位px（默认 0 ）
-	 * @property {String,Number} customNavHeight 自定义导航栏的高度 （h5 默认44  其他默认 0 ）
-	 * @property {Boolean} disabled = [true|false] 是否禁用吸顶功能 （默认 false ）
-	 * @property {String} bgColor 背景颜色
-	 * @property {String,Number} zIndex	吸顶时的z-index值（默认 99）
-	 * @property {String,Number} index	自定义标识，用于区分是哪一个组件（默认 0）
-	 * @property {String} customClass 自定义外部样式类
-	 * @property {Object,String} customStyle 自定义外部的样式
-	 * 
-	 * @example <fu-sticky offsetTop="200"><view>此处吸顶</view></fu-sticky>
-	 */
-	export default {
-		name: 'FuSticky',
-		mixins: [mpMixin, mixin, props],
-		data() {
-			const elId = this.$fu.uuid();
-			return {
-				cssSticky: false, // 是否使用css的sticky实现
-				stickyTop: 0, // 吸顶的top值，因为可能受自定义导航栏影响，最终的吸顶值非offsetTop值
-				elId: elId,
-				left: 0, // js模式时，吸顶的内容因为处于postition: fixed模式，为了和原来保持一致的样式，需要记录并重新设置它的left，height，width属性
-				width: 'auto',
-				height: 'auto',
-				fixed: false, // js模式时，是否处于吸顶模式
-			}
-		},
-		computed: {
-			stickyStyle() {
-				const style = {
-					backgroundColor: this.bgColor,
-					boxShadow: `0 -1px ${this.bgColor || '#ffffff'}`
-				};
-				if(!this.disabled) {
-					if (this.cssSticky) {
-						style.position = 'sticky';
-						style.zIndex = this.fuZindex;
-						style.top = this.$fu.addUnit(this.stickyTop);
-					} else {
-						style.height = this.fixed ? this.height + 'px' : 'auto';
-					}
-				} else {
-					// 无需吸顶时，设置会默认的relative(nvue)和非nvue的static静态模式即可
-					// #ifdef APP-NVUE
-					style.position = 'relative';
-					// #endif
-					// #ifndef APP-NVUE
-					style.position = 'static';
-					// #endif
-				}
-				return this.$fu.deepMerge(this.$fu.addStyle(this.customStyle), style)
-			},
-			// 吸顶内容的样式
-			stickyContent() {
-				const style = {}
-				if (!this.cssSticky) {
-					const { fixed, stickyTop, left, width, fuZindex } = this;
-					style.position = fixed ? 'fixed' : 'static';
-					style.top = stickyTop + 'px';
-					style.left = left + 'px';
-					style.width = width == 'auto' ? 'auto' : this.width + 'px';
-					style.zIndex = fuZindex;
-				}
-				return style
-			},
-			fuZindex() {
-				return this.zIndex ? this.zIndex : 998
-			}
-		},
-		mounted() {
-			this.init()
-		},
-		methods: {
-			init() {
-				this.getStickyTop()
-				// 判断使用的模式
-				this.checkSupportCssSticky()
-				// 如果不支持css sticky，则使用js方案，此方案性能比不上css方案
-				if (!this.cssSticky) {
-					!this.disabled && this.initObserveContent()
-				}
-			},
-			
-			initObserveContent() {
-				// 获取吸顶内容的高度，用于在js吸顶模式时，给父元素一个填充高度，防止"塌陷"
-				this.getElementData('#' + this.elId, res => {
-					this.height = res.height;
-					this.left = res.left;
-					this.width = res.width;
-					this.$nextTick(() => {
-						this.observeContent()
-					})
-				})
-			},
-			
-			// 获取所有标签节点
-			getElementData(el, callback){
-				uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
-					// #ifndef MP-ALIPAY
-					callback(data[0]);
-					// #endif
-					// #ifdef MP-ALIPAY
-					callback(data[0][0]);
-					// #endif
-				});
-			},
-			
-			observeContent() {
-				// 先断掉之前的观察
-				this.disconnectObserver('contentObserver')
-				const contentObserver = uni.createIntersectionObserver({
-					// 检测的区间范围
-					thresholds: [0.95, 0.98, 1]
-				})
-				// 到屏幕顶部的高度时触发
-				contentObserver.relativeToViewport({
-					top: -this.stickyTop
-				})
-				// 绑定观察的元素
-				contentObserver.observe(`#${this.elId}`, res => {
-					this.setFixed(res.boundingClientRect.top)
-				})
-				this.contentObserver = contentObserver;
-			},
-			
-			setFixed(top) {
-				// 判断是否出于吸顶条件范围
-				const fixed = top <= this.stickyTop;
-				this.fixed = fixed;
-			},
-			
-			disconnectObserver(observerName) {
-				// 断掉观察，释放资源
-				const observer = this[observerName]
-				observer && observer.disconnect()
-			},
-			
-			getStickyTop() {
-				this.stickyTop = this.$fu.getPx(this.offsetTop) + this.$fu.getPx(this.customNavHeight);
-			},
-			
-			async checkSupportCssSticky() {
-				// #ifdef H5
-				// H5，一般都是现代浏览器，是支持css sticky的，这里使用创建元素嗅探的形式判断
-				if (this.checkCssStickyForH5()) {
-					this.cssSticky = true;
-				}
-				// #endif
-
-				// 如果安卓版本高于8.0，依然认为是支持css sticky的(因为安卓7在某些机型，可能不支持sticky)
-				if (this.$fu.os() === 'android' && Number(this.$fu.sys().system) > 8) {
-					this.cssSticky = true;
-				}
-
-				// APP-Vue和微信平台，通过computedStyle判断是否支持css sticky
-				// #ifdef APP-VUE || MP-WEIXIN
-				this.cssSticky = await this.checkComputedStyle();
-				// #endif
-
-				// ios上，从ios6开始，都是支持css sticky的
-				if (this.$fu.os() === 'ios') {
-					this.cssSticky = true;
-				}
-
-				// nvue，是支持css sticky的
-				// #ifdef APP-NVUE
-				this.cssSticky = true;
-				// #endif
-			},
-			
-			// 在APP和微信小程序上，通过uni.createSelectorQuery可以判断是否支持css sticky
-			checkComputedStyle() {
-				// 方法内进行判断，避免在其他平台生成无用代码
-				// #ifdef APP-VUE || MP-WEIXIN
-				return new Promise(resolve => {
-					uni.createSelectorQuery().in(this).select('.fu-sticky').fields({
-						computedStyle: ["position"]
-					}).exec(e => {
-						resolve('sticky' === e[0].position)
-					})
-				})
-				// #endif
-			},
-			
-			// H5通过创建元素的形式嗅探是否支持css sticky
-			// 判断浏览器是否支持sticky属性
-			checkCssStickyForH5() {
-				// 方法内进行判断，避免在其他平台生成无用代码
-				// #ifdef H5
-				const vendorList = ['', '-webkit-', '-ms-', '-moz-', '-o-'],
-					vendorListLength = vendorList.length,
-					stickyElement = document.createElement('div')
-				for (let i = 0; i < vendorListLength; i++) {
-					stickyElement.style.position = vendorList[i] + 'sticky'
-					if (stickyElement.style.position !== '') {
-						return true
-					}
-				}
-				return false;
-				// #endif
-			}
-		},
-		beforeDestroy() {
-			this.disconnectObserver('contentObserver')
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.fu-sticky {
-		/* #ifdef APP-VUE || MP-WEIXIN */
-		// 此处默认写sticky属性，是为了给微信和APP通过uni.createSelectorQuery查询是否支持css sticky使用
-		position: sticky;
-		/* #endif */
-		// 此处为解决个别机型会出现缝隙
-		// box-shadow: 0 -1px #ffffff;
-	}
-</style>

package/components/fu-sticky/props.js

@@ -1,54 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
-		 */
-		offsetTop: {
-		    type: [String, Number],
-		    default: 0
-		},
-		/**
-		 * @description 自定义导航栏的高度
-		 */
-		customNavHeight: {
-			type: [String, Number],
-			// #ifdef H5
-			// H5端的导航栏属于“自定义”导航栏的范畴，因为它是非原生的，与普通元素一致
-			default: 44,
-			// #endif
-			// #ifndef H5
-			default: 0
-			// #endif
-		},
-		/**
-		 * @description 是否禁用吸顶功能
-		 * @default false
-		 */
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 吸顶区域的背景颜色
-		 */
-		bgColor: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description z-index值
-		 * @default 99
-		 */
-		zIndex: {
-			type: [String, Number],
-			default: 99
-		},
-		/**
-		 * @description 列表中的索引值
-		 */
-		index: {
-			type: [String, Number],
-			default: 0
-		}
-	}
-}

package/components/fu-subsection/fu-subsection.vue

@@ -1,288 +0,0 @@
-<template>
-	<view ref="fu-subsection" class="fu-subsection" :class="[`fu-subsection--${mode}`]" :style="[$fu.addStyle(this.customStyle), wrapperStyle]">
-		<view 
-			ref="fu-subsection__bar" 
-			class="fu-subsection__bar" 
-			:style="[barStyle]"
-			:class="[
-			mode === 'button' && 'fu-subsection--button__bar',
-			current === 0 && mode === 'subsection' && 'fu-subsection__bar--first',
-			current > 0 && current < list.length - 1 && mode === 'subsection' && 'fu-subsection__bar--center',
-			current === list.length - 1 && mode === 'subsection' && 'fu-subsection__bar--last'
-		]"></view>
-		<view 
-			:ref="`fu-subsection__item--${index}`" 
-			class="fu-subsection__item"
-			:class="[
-			`fu-subsection__item--${index}`,
-			index < list.length - 1 && 'fu-subsection__item--no-border-right',
-			index === 0 && 'fu-subsection__item--first',
-			index === list.length - 1 && 'fu-subsection__item--last'
-		]" :style="[itemStyle(index)]" v-for="(item, index) in list" :key="index" @tap="handleClick(index)">
-			<text class="fu-subsection__item__text" :style="[textStyle(index)]">{{ getText(item) }}</text>
-		</view>
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from "./props.js";
-	// #ifdef APP-NVUE
-	const dom = uni.requireNativePlugin("dom");
-	const animation = uni.requireNativePlugin("animation");
-	// #endif
-	/**
-	 * Subsection 分段器
-	 * @description 此组件分段器一般用于用户从几个选项中选择某一个的场景
-	 * @property {String,Number} duration 滑块的移动过渡时间，单位ms （默认 300）
-	 * @property {Array} list 选项的数组
-	 * @property {String,Number} current 当前激活的选项索引index（默认 0 ）
-	 * @property {String} activeColor 激活时的颜色（默认 '#2979ff' ）
-	 * @property {String} inactiveColor	未激活时的颜色（默认 '#303133' ）
-	 * @property {String} mode = [button|subsection] 模式选择（默认 'button' ）
-	 * 	@value button 按钮模式
-	 * 	@value subsection 分段器模式
-	 * @property {String,Number} size 字体大小，单位px（默认 12 ）
-	 * @property {Boolean} bold = [true|false] 激活选项的字体是否加粗（默认 true ）
-	 * @property {String} bgColor 组件背景颜色，mode为button时有效（默认 '#efeff0' ）
-	 * @property {String,Object} customStyle 定义需要用到的外部样式
-	 * @property {String,Object} customItemStyle 自定义选项样式
-	 * @property {String} keyName 从`list`元素对象中读取的键名（默认 'name' ）
-	 * 
-	 * @event {Function} change 分段器选项发生改变时触发  回调 index：选项的index索引值，从0开始
-	 * @example <fu-subsection :list="list" :current="current" @change="sectionChange"></fu-subsection>
-	 */
-	export default {
-		name: "fuSubsection",
-		emits: ['change'],
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {
-				firstTime: true,
-				// 组件尺寸
-				itemRect: {
-					width: 0,
-					height: 0,
-				}
-			}
-		},
-		computed: {
-			wrapperStyle() {
-				const style = {};
-				// button模式时，设置背景色
-				if (this.mode === "button") {
-					style.backgroundColor = this.bgColor;
-				}
-				return style;
-			},
-			
-			// 滑块的样式
-			barStyle() {
-				const style = {
-					width: `${this.itemRect.width}px`,
-					height: `${this.itemRect.height}px`
-				};
-				// 通过translateX移动滑块，其移动的距离为索引*item的宽度
-				// #ifndef APP-NVUE
-				style.transform = `translateX(${ this.current * this.itemRect.width }px)`;
-				style.transitionDuration =  `${this.firstTime ? 0 : parseInt(this.duration)}ms`;
-				// 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到默认的current第一个subsection item的中间
-				// 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
-				if (this.firstTime) {
-					setTimeout(() => {
-						this.firstTime = false;
-					}, 50);
-				}
-				// #endif
-				if (this.mode === "subsection") {
-					// 在subsection模式下，需要动态设置滑块的圆角，因为移动滑块使用的是translateX，无法通过父元素设置overflow: hidden隐藏滑块的直角
-					style.backgroundColor = this.activeColor;
-				}
-				return this.$fu.deepMerge(style, this.$fu.addStyle(this.customItemStyle));
-			},
-			
-			// 分段器item的样式
-			itemStyle(index) {
-				return (index) => {
-					if (this.mode !== "subsection") return {};
-					return {
-						borderColor: this.activeColor,
-						borderWidth: "1px",
-						borderStyle: "solid"
-					};
-				};
-			},
-			
-			// 分段器文字颜色
-			textStyle(index) {
-				return (index) => {
-					const isActive = this.current === index;
-					const { mode, inactiveColor, activeColor, size, bold, $fu } = this;
-				  
-					return {
-						fontWeight: bold && isActive ? "bold" : "normal",
-						fontSize: $fu.addUnit(size),  // 单位转换结果缓存
-						color: mode === "subsection"? (isActive ? "#fff" : inactiveColor): (isActive ? activeColor : inactiveColor)
-					};
-				};
-			}
-		},
-		mounted() {
-			this.init();
-		},
-		methods: {
-			// 初始化
-			init() {
-				this.$fu.sleep().then(() => this.getRect());
-			},
-			
-			// 判断展示文本
-			getText(item) {
-				return typeof item === 'object' ? item[this.keyName] : item
-			},
-			
-			// 获取组件的尺寸
-			getRect() {
-				// #ifndef APP-NVUE
-				this.$fuGetRect(".fu-subsection__item--0").then((size) => {
-					this.itemRect = size;
-				});
-				// #endif
-
-				// #ifdef APP-NVUE
-				const ref = this.$refs["fu-subsection__item--0"][0];
-				ref && dom.getComponentRect(ref, (res) => {
-					this.itemRect = res.size;
-				});
-				// #endif
-			},
-			
-			handleClick(index) {
-				this.$emit("change", index);
-			}
-		},
-		watch: {
-			list: {
-				deep: true,
-				handler(){
-					this.init();
-				}
-			},
-			current: {
-				immediate: true,
-				handler(n) {
-					// #ifdef APP-NVUE
-					// 在安卓nvue上，如果通过translateX进行位移，到最后一个时，会导致右侧无法绘制圆角
-					// 故用animation模块进行位移
-					const ref = this.$refs?.["fu-subsection__bar"]?.ref;
-					// 不存在ref的时候(理解为第一次初始化时，需要渲染dom，进行一定延时再获取ref)，这里的100ms是经过测试得出的结果(某些安卓需要延时久一点)，勿随意修改
-					this.$fu.sleep(ref? 0 : 150).then(() => {
-						animation.transition(this.$refs["fu-subsection__bar"].ref, {
-							styles: {
-								transform: `translateX(${ n * this.itemRect.width }px)`,
-								transformOrigin: "center center"
-							},
-							duration: 300,
-						});
-					});
-					// #endif
-				}
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	$padding: 3px;
-	$border-radius: 3px;
-	
-	.fu-subsection {
-		@include flex(row);
-		position: relative;
-		/* #ifndef APP-NVUE */
-		width: 100%;
-		box-sizing: border-box;
-		overflow: hidden;
-		/* #endif */
-		
-		&--button {
-			height: 32px;
-			background-color: rgb(238, 238, 239);
-			padding: $padding;
-			border-radius: $border-radius;
-			align-items: stretch;
-			
-			&__bar {
-				background-color: #ffffff;
-			}
-		}
-		
-		&--subsection {
-			height: 30px;
-		}
-		
-		&__bar {
-			position: absolute;
-			/* #ifndef APP-NVUE */
-			transition-property: transform, color;
-			transition-duration: 0.3s;
-			transition-timing-function: ease-in-out;
-			/* #endif */
-			
-			&--first {
-				border-top-left-radius: $border-radius;
-				border-bottom-left-radius: $border-radius;
-				border-top-right-radius: 0px;
-				border-bottom-right-radius: 0px;
-			}
-			
-			&--center {
-				border-top-left-radius: 0px;
-				border-bottom-left-radius: 0px;
-				border-top-right-radius: 0px;
-				border-bottom-right-radius: 0px;
-			}
-			
-			&--last {
-				border-top-left-radius: 0px;
-				border-bottom-left-radius: 0px;
-				border-top-right-radius: $border-radius;
-				border-bottom-right-radius: $border-radius;
-			}
-		}
-		
-		&__item {
-			@include flex(row);
-			justify-content: center;
-			align-items: center;
-			flex: 1;
-			// vue环境下，需要设置相对定位，因为滑块为绝对定位，item需要在滑块的上面
-			position: relative;
-			
-			&--no-border-right {
-				border-right-width: 0 !important;
-			}
-			
-			&--first {
-				border-top-left-radius: $border-radius;
-				border-bottom-left-radius: $border-radius;
-			}
-			
-			&--last {
-				border-top-right-radius: $border-radius;
-				border-bottom-right-radius: $border-radius;
-			}
-			
-			&__text {
-				@include flex(row);
-				font-size: 12px;
-				line-height: 12px;
-				align-items: center;
-				transition-property: color;
-				transition-duration: 0.3s;
-			}
-		}
-	}
-</style>

package/components/fu-subsection/props.js

@@ -1,88 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 滑块的移动过渡时间，单位ms
-		 * @default 300
-		 */
-		duration: {
-			type: [String,Number],
-			default: 300
-		},
-		/**
-		 * @description subsection的数据
-		 */
-		list: {
-			type: Array,
-			default: () => []
-		},
-		/**
-		 * @description 当前活动的subsection的index
-		 */
-		current: {
-			type: [String,Number],
-			default: 0
-		},
-		/**
-		 * @description 激活的颜色
-		 */
-		activeColor: {
-			type: String,
-			default: '#2979ff'
-		},
-		/**
-		 * @description 未激活的颜色
-		 */
-		inactiveColor: {
-			type: String,
-			default: '#303133'
-		},
-		// 模式选择（默认 'button'）
-		/**
-		 * @description 模式选择
-		 * @values 'button' - 按钮模式, 'subsection' - 分段器模式
-		 */
-		mode: {
-			type: String,
-			default: 'button'
-		},
-		/**
-		 * @description 字体大小
-		 * @default 12
-		 */
-		size: {
-			type: [String,Number],
-			default: 12
-		},
-		/**
-		 * @description 激活subsection的字体是否加粗
-		 * @default true
-		 */
-		bold: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 组件背景颜色（仅mode=button时生效）
-		 * @default '#efeff0'
-		 */
-		bgColor: {
-			type: String,
-			default: '#efeff0'
-		},
-		/**
-		 * @description 从list元素对象中读取的键名
-		 * @default 'name'
-		 */
-		keyName: {
-			type: String,
-			default: 'name'
-		},
-		/**
-		 * @description 自定义item外部样式
-		 */
-		customItemStyle: {
-			type: [String, Object],
-			default: ''
-		}
-	}
-}