fusions-ui 1.2.6 → 1.2.8

package/components/fu-textarea/fu-textarea.vue

@@ -1,288 +0,0 @@
-<template>
-	<view class="fu-textarea" :class="textareaClass" :style="[textareaStyle]">
-		<textarea class="fu-textarea__field" :class="{'fu-textarea--disabled': disabled}" :style="itemStyle" :value="innerValue"
-			:placeholder="placeholder"
-			:placeholder-style="placehStyle"
-			:placeholder-class="placeholderClass"
-			:disabled="disabled"
-			:focus="focus"
-			:autoHeight="autoHeight"
-			:fixed="fixed"
-			:cursorSpacing="cursorSpacing"
-			:cursor="cursor"
-			:showConfirmBar="showConfirmBar"
-			:selectionStart="selectionStart"
-			:selectionEnd="selectionEnd"
-			:adjustPosition="adjustPosition"
-			:disableDefaultPadding="disableDefaultPadding"
-			:holdKeyboard="holdKeyboard"
-			:maxlength="maxlength"
-			:confirm-type="confirmType"
-			:show-count="count"
-			@focus="onFocus"
-			@blur="onBlur"
-			@linechange="onLinechange"
-			@input="onInput"
-			@confirm="onConfirm"
-			@keyboardheightchange="onKeyboardheightchange"></textarea>
-		<!-- #ifndef MP-ALIPAY -->
-		<text class="fu-textarea__count" style="{'background-color': disabled ? 'transparent' : '#fff'}" v-if="count">{{ innerValue.length }}/{{ maxlength }}</text>
-		<!-- #endif -->
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from "./props.js";
-	/**
-	 * Textarea 文本域
-	 * @description 此组件满足了可能出现的表单信息补充，编辑等实际逻辑的功能，内置了字数校验等
-	 * @property {String,Number} value 输入框的内容
-	 * @property {String,Number} placeholder 输入框为空时占位符
-	 * @property {String} placeholderClass 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/（ 默认 'textarea-placeholder' ）
-	 * @property {String,Object} placeholderStyle 指定placeholder的样式，字符串/对象形式，如"color: red;"
-	 * @property {String,Number} height 输入框高度（默认 70）
-	 * @property {String} confirmType = [send|search|next] 设置键盘右下角按钮的文字，仅微信小程序，App-vue和H5有效（默认 'done'） 
-	 * 	@value send	右下角按钮为'发送'
-	 * 	@value search	右下角按钮为'搜索'
-	 * 	@value next	右下角按钮为'下一个'
-	 * 	@value 右下角按钮为'前往'
-	 * 	@value 右下角按钮为'完成'
-	 * @property {Boolean} disabled = [true|false] 是否禁用（默认 false）
-	 * @property {Boolean} count = [true|false] 是否显示统计字数 （默认 false）
-	 * @property {Boolean} focus = [true|false] 是否自动获取焦点，nvue不支持，H5取决于浏览器的实现（默认 false）
-	 * @property {Boolean} autoHeight = [true|false] 是否自动增加高度（默认 false）
-	 * @property {Boolean} fixed = [true|false] 如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true（默认 false）
-	 * @property {Number} cursorSpacing 指定光标与键盘的距离（默认 0）
-	 * @property {String,Number} cursor 指定focus时的光标位置  
-	 * @property {Boolean} showConfirmBar = [true|false] 是否显示键盘上方带有“完成”按钮那一栏（默认 true）
-	 * @property {Number} selectionStart 光标起始位置，自动聚焦时有效，需与selection-end搭配使用（默认 -1）
-	 * @property {Number} selectionEnd 光标结束位置，自动聚焦时有效，需与selection-start搭配使用（默认 -1）
-	 * @property {Boolean} adjustPosition = [true|false] 键盘弹起时，是否自动上推页面（默认 true） 
-	 * @property {Boolean} disableDefaultPadding = [true|false] 是否去掉 iOS 下的默认内边距，只微信小程序有效（默认 false）
-	 * @property {Boolean} holdKeyboard = [true|false] focus时，点击页面的时候不收起键盘，只微信小程序有效（默认 false）
-	 * @property {String,Number} maxlength 最大输入长度，设置为 -1 的时候不限制最大长度（默认 140）
-	 * @property {String} border = [surround|bottom] 边框类型，surround-四周边框，bottom-底部边框（默认 'surround'）
-	 * 	@value surround 四周边框
-	 * 	@value bottom 底部边框
-	 * @property {String} borderColor 边框颜色（默认 '#dadbde'）
-     * @property {String,Number} size 自定义字体大小（默认 14）
-	 * @property {String,Object} customStyle 定义需要用到的外部样式
-	 * @event {Function} formatter 内容式化函数
-	 * 
-	 * @event {Function(e)} focus 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
-	 * @event {Function(e)} blur 输入框失去焦点时触发，event.detail = {value, cursor}
-	 * @event {Function(e)} linechange 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
-	 * @event {Function(e)} input 当键盘输入时，触发 input 事件
-	 * @event {Function(e)} change 输入框输入时，触发change事件
-	 * @event {Function(e)} confirm 点击完成时， 触发 confirm 事件
-	 * @event {Function(e)} keyboardheightchange	键盘高度发生变化的时候触发此事件
-	 * @example <fu-textarea v-model="value" placeholder="请输入内容" ></fu-textarea>   
-	 */
-	export default {
-		name:"FuTextarea",
-		emits: ['input', 'update:modelValue', 'change', 'blur', 'confirm', 'focus', 'linechange', 'keyboardheightchange'],
-		mixins: [mpMixin, mixin, props],
-		model: {
-			prop: 'modelValue',
-			event: 'update:modelValue'
-		},
-		data() {
-			return {
-				// 输入框的值
-				innerValue: "",
-				// 是否处于获得焦点状态
-				focused: false,
-				// value是否第一次变化，在watch中，由于加入immediate属性，会在第一次触发，此时不应该认为value发生了变化
-				firstChange: true,
-				// value绑定值的变化是由内部还是外部引起的
-				changeFromInner: false,
-				// 过滤处理方法
-				innerFormatter: value => value
-			};
-		},
-		computed: {
-			itemStyle() {
-				let style = {
-					height: this.$fu.addUnit(this.height), 
-					fontSize: this.$fu.addUnit(this.size)
-				}
-				return this.$fu.deepMerge(style, this.$fu.addStyle(this.customStyle));
-			},
-			
-			placehStyle() {
-				return this.$fu.addStyle(this.placeholderStyle, 'string')
-			},
-			
-			// 组件的类名
-			textareaClass() {
-				let classes = [], { border, disabled } = this;
-				border === "surround" && (classes = classes.concat(["fu-textarea__border", "fu-textarea--radius"]));
-				border === "bottom" && (classes = classes.concat(["fu-textarea__border-bottom", "fu-textarea--no-radius"]));
-				disabled && classes.push("fu-textarea--disabled");
-				return classes.join(" ");
-			},
-			
-			// 组件的样式
-			textareaStyle() {
-				const style = {
-					borderColor: this.borderColor,
-					backgroundColor: this.disabled && this.disabledColor
-				};
-				// #ifdef APP-NVUE
-				// 由于textarea在安卓nvue上的差异性，需要额外再调整其内边距
-				if (this.$fu.os() === "android") {
-						style.paddingTop = "6px";
-						style.paddingLeft = "6px";
-						style.paddingBottom = "3px";
-						style.paddingRight = "6px";
-				}
-				// #endif
-				return this.$fu.deepMerge(style, this.$fu.addStyle(this.customStyle));
-			}
-		},
-		methods: {
-			// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
-			setFormatter(e) {
-				this.innerFormatter = e
-			},
-			
-			onFocus(e) {
-				this.$emit("focus", e);
-			},
-			
-			onBlur(e) {
-				this.$emit("blur", e);
-			},
-			
-			onLinechange(e) {
-				this.$emit("linechange", e);
-			},
-			onInput(e) {
-				let { value = "" } = e.detail || {};
-				// 格式化过滤方法
-				const formatter = this.formatter || this.innerFormatter
-				const formatValue = formatter(value)
-				// 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
-				this.innerValue = value
-				this.$nextTick(() => {
-					this.innerValue = formatValue;
-					this.valueChange();
-				})
-			},
-			// 内容发生变化，进行处理
-			valueChange() {
-				const value = this.innerValue;
-				this.$nextTick(() => {
-					// 兼容 Vue2
-					this.$emit("input", value);
-					// 兼容 Vue3
-					this.$emit('update:modelValue', value);
-					// 标识value值的变化是由内部引起的
-					this.changeFromInner = true;
-					this.$emit("change", value);
-				});
-			},
-			onConfirm(e) {
-				this.$emit("confirm", e);
-			},
-			onKeyboardheightchange(e) {
-				this.$emit("keyboardheightchange", e);
-			}
-		},
-		watch: {
-			// #ifndef VUE2
-			value: {
-				immediate: true,
-				handler(newVal, oldVal) {
-					this.innerValue = newVal;
-					/* #ifdef H5 */
-					// 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
-					if (this.firstChange === false && this.changeFromInner === false) {
-						this.valueChange();
-					}
-					/* #endif */
-					this.firstChange = false;
-					// 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
-					this.changeFromInner = false;
-				}
-			},
-			// #endif
-			// #ifdef VUE3
-			modelValue: {
-				immediate: true,
-				handler(newVal, oldVal) {
-					this.innerValue = newVal;
-					/* #ifdef H5 */
-					// 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
-					if (this.firstChange === false && this.changeFromInner === false) {
-						this.valueChange();
-					}
-					/* #endif */
-					this.firstChange = false;
-					// 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
-					this.changeFromInner = false;
-				}
-			}
-			// #endif
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	$color_dadbde: #dadbde;
-	$color-disabled: #F5F7FA;
-	
-	.fu-textarea {
-		@include flex(row);
-		background-color: #ffffff;
-		position: relative;
-		flex: 1;
-		padding: 9px 12px;
-		
-		&__field {
-			flex: 1;
-			font-size: 14px;
-			color: #333333;
-			width: 100%;
-			/* #ifdef MP-ALIPAY */
-			padding: 0;
-			/* #endif */
-		}
-		
-		&--radius {
-			border-radius: 5px;
-		}
-		
-		&--no-radius {
-			border-radius: 0;
-		}
-		
-		&--disabled {
-			background-color: $color-disabled;
-		}
-		
-		&__count {
-			position: absolute;
-			right: 5px;
-			bottom: 2px;
-			font-size: 12px;
-			color: #999999;
-			padding: 1px 4px;
-		}
-		
-		&__border {
-			border-width: 0.5px;
-			border-color: $color_dadbde;
-			border-style: solid;
-		}
-		
-		&__border-bottom {
-			border-bottom-width: 0.5px;
-			border-color: $color_dadbde;
-			border-bottom-style: solid;
-		}
-	}
-</style>

package/components/fu-textarea/props.js

@@ -1,206 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 输入框的内容
-		 */
-		value: {
-			type: [String,Number],
-			default: ''
-		},
-		modelValue: {
-			type: [String,Number],
-			default: ''
-		},
-		/**
-		 * @description 输入框为空时占位符
-		 * @default null
-		 */
-		placeholder: {
-			type: [String,Number],
-			default: null
-		},
-		/**
-		 * @description 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写:depp(...)
-		 * @default 'textarea-placeholder'
-		 */
-		placeholderClass: {
-			type: String,
-			default: 'textarea-placeholder'
-		},
-		/**
-		 * @description 指定placeholder的样式
-		 * @default 'color: #CCCCCC'
-		 */
-		placeholderStyle: {
-			type: [String,Object],
-			default: 'color: #CCCCCC'
-		},
-		/**
-		 * @description 输入框高度
-		 * @default 70
-		 */
-		height: {
-			type: [String,Number],
-			default: 70
-		},
-		/**
-		 * @description 设置键盘右下角按钮的文字，仅微信小程序，App-vue和H5有效
-		 * @default 'done'
-		 */
-		confirmType: {
-			type: String,
-			default: 'done'
-		},
-		/**
-		 * @description 是否禁用
-		 * @default false
-		 */
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 禁用状态时的背景色
-		 * @default '#F5F7FA'
-		 */
-		disabledColor: {
-			type: String,
-			default: '#F5F7FA'
-		},
-		/**
-		 * @description 是否显示统计字数
-		 * @default false
-		 */
-		count: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 是否自动获取焦点，nvue不支持，H5取决于浏览器的实现
-		 * @default false
-		 */
-		focus: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 是否自动增加高度
-		 * @default false
-		 */
-		autoHeight: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true
-		 * @default false
-		 */
-		fixed: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 指定光标与键盘的距离
-		 */
-		cursorSpacing: {
-			type: Number,
-			default: 0
-		},
-		/**
-		 * @description 指定focus时的光标位置
-		 */
-		cursor: {
-			type: [String,Number],
-			default: ''
-		},
-		/**
-		 * @description 是否显示键盘上方带有“完成”按钮那一栏
-		 * @default true
-		 */
-		showConfirmBar: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 光标起始位置，自动聚焦时有效，需与selection-end搭配使用
-		 * @default -1
-		 */
-		selectionStart: {
-			type: Number,
-			default: -1
-		},
-		/**
-		 * @description 光标结束位置，自动聚焦时有效，需与selection-start搭配使用
-		 * @default -1
-		 */
-		selectionEnd: {
-			type: Number,
-			default: -1
-		},
-		/**
-		 * @description 键盘弹起时，是否自动上推页面
-		 * @default true
-		 */
-		adjustPosition: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 是否去掉 iOS 下的默认内边距，只微信小程序有效
-		 * @default false
-		 */
-		disableDefaultPadding: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description focus时，点击页面的时候不收起键盘，只微信小程序有效
-		 * @default false
-		 */
-		holdKeyboard: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 最大输入长度，设置为 -1 的时候不限制最大长度
-		 * @default 140
-		 */
-		maxlength: {
-			type: [String,Number],
-			default: 140
-		},
-		/**
-		 * @description 边框类型
-		 * @values 'surround' - 四周边框, 'bottom' - 底部边框
-		 * @default 'surround'
-		 */
-		border: {
-			type: String,
-			default: 'surround'
-		},
-		/**
-		 * @description 边框颜色
-		 * @default '#dadbde'
-		 */
-		borderColor: {
-			type: String,
-			default: '#dadbde'
-		},
-		/**
-		 * @description 文本域字体大小
-		 * @default 14
-		 */
-		size: {
-			type: [String,Number],
-			default: 14
-		},
-		/**
-		 * @description 用于处理或者过滤输入框内容的方法
-		 * @default null
-		 */
-		formatter: {
-			type: [Function,null],
-			default: null
-		}
-	}
-}

package/components/fu-timeaxis-item/fu-timeaxis-item.vue

@@ -1,68 +0,0 @@
-<template>
-	<view class="fu-timeaxis-item">
-		<slot name="content"></slot>
-		<view class="fu-timeaxis-node" :style="[nodeStyle]">
-			<slot name="node"></slot>
-		</view>
-	</view>
-</template>
-
-<script>
-	/**
-	 * 时间轴需配合FuTimeaxis组件一起使用
-	 */
-	export default {
-		name: "FuTimeaxisItem",
-		props: {
-			/**
-			 * @description 左侧节点背景颜色
-			 */
-			bgColor: {
-				type: String,
-				default: ""
-			},
-			/**
-			 * @description 左侧节点绝对定位top值
-			 */
-			nodeTop: {
-				type: [String,Number],
-				default: 0
-			}
-		},
-		data() {
-			return {};
-		},
-		computed: {
-			nodeStyle() {
-				return {
-					backgroundColor: this.bgColor,
-					top: this.$fu.addUnit(this.nodeTop)
-				}
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	
-	.fu-timeaxis-item {
-		@include flex(column);
-		position: relative;
-		width: 100%;
-		margin-bottom: 25px;
-	}
-
-	.fu-timeaxis-node {
-		position: absolute;
-		top: 0;
-		left: -20px;
-		transform-origin: 0;
-		transform: translateX(-50%);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 99;
-		font-size: 12px;
-	}
-</style>

package/components/fu-transition/createAnimation.js

@@ -1,131 +0,0 @@
-// const defaultOption = {
-// 	duration: 300,
-// 	timingFunction: 'linear',
-// 	delay: 0,
-// 	transformOrigin: '50% 50% 0'
-// }
-// #ifdef APP-NVUE
-const nvueAnimation = uni.requireNativePlugin('animation')
-// #endif
-class MPAnimation {
-	constructor(options, _this) {
-		this.options = options
-		// 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter should be Object instead of ProxyObject的错误
-		this.animation = uni.createAnimation({
-			...options
-		})
-		this.currentStepAnimates = {}
-		this.next = 0
-		this.$ = _this
-
-	}
-
-	_nvuePushAnimates(type, args) {
-		let aniObj = this.currentStepAnimates[this.next]
-		let styles = {}
-		if (!aniObj) {
-			styles = {
-				styles: {},
-				config: {}
-			}
-		} else {
-			styles = aniObj
-		}
-		if (animateTypes1.includes(type)) {
-			if (!styles.styles.transform) {
-				styles.styles.transform = ''
-			}
-			let unit = ''
-			if(type === 'rotate'){
-				unit = 'deg'
-			}
-			styles.styles.transform += `${type}(${args+unit}) `
-		} else {
-			styles.styles[type] = `${args}`
-		}
-		this.currentStepAnimates[this.next] = styles
-	}
-	_animateRun(styles = {}, config = {}) {
-		let ref = this.$.$refs['ani'].ref
-		if (!ref) return
-		return new Promise((resolve, reject) => {
-			nvueAnimation.transition(ref, {
-				styles,
-				...config
-			}, res => {
-				resolve()
-			})
-		})
-	}
-
-	_nvueNextAnimate(animates, step = 0, fn) {
-		let obj = animates[step]
-		if (obj) {
-			let {
-				styles,
-				config
-			} = obj
-			this._animateRun(styles, config).then(() => {
-				step += 1
-				this._nvueNextAnimate(animates, step, fn)
-			})
-		} else {
-			this.currentStepAnimates = {}
-			typeof fn === 'function' && fn()
-			this.isEnd = true
-		}
-	}
-
-	step(config = {}) {
-		// #ifndef APP-NVUE
-		this.animation.step(config)
-		// #endif
-		// #ifdef APP-NVUE
-		this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
-		this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
-		this.next++
-		// #endif
-		return this
-	}
-
-	run(fn) {
-		// #ifndef APP-NVUE
-		this.$.animationData = this.animation.export()
-		this.$.timer = setTimeout(() => {
-			typeof fn === 'function' && fn()
-		}, this.$.durationTime)
-		// #endif
-		// #ifdef APP-NVUE
-		this.isEnd = false
-		let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
-		if(!ref) return
-		this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
-		this.next = 0
-		// #endif
-	}
-}
-
-
-const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
-	'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
-	'translateZ'
-]
-const animateTypes2 = ['opacity', 'backgroundColor']
-const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
-animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
-	MPAnimation.prototype[type] = function(...args) {
-		// #ifndef APP-NVUE
-		this.animation[type](...args)
-		// #endif
-		// #ifdef APP-NVUE
-		this._nvuePushAnimates(type, args)
-		// #endif
-		return this
-	}
-})
-
-export function createAnimation(option, _this) {
-	if(!_this) return
-	clearTimeout(_this.timer)
-	return new MPAnimation(option, _this)
-}