fusions-ui 1.2.7 → 1.2.9

package/components/textarea/src/textarea.ts

@@ -0,0 +1,250 @@
+import { ExtractPropTypes } from 'vue';
+import { componentProps } from '../../../constants';
+
+/**
+ * 文本域 border 有效值
+ */
+export const textareaBorders = ['surround', 'bottom'] as const;
+
+export const textareaProps = {
+	/**
+	 * @description 输入框的内容
+	 */
+	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,
+		values: textareaBorders,
+		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
+	},
+	...componentProps
+};
+
+export const textareaEmits = {
+	'update:modelValue': (_e: any) => true,
+	/**
+	  * @description 输入内容变化时触发
+	  */
+	input: (_e: any) => true,
+	/**
+	 * @description 输入框输入时触发
+	 */
+	change: (_e: any) => true,
+
+	/**
+	 * @description 输入框失去焦点时触发
+	 */
+	blur: (_e: any) => true,
+
+	/**
+	 * @description 点击完成时触发
+	 */
+	confirm: (_e: any) => true,
+
+	/**
+	 * @description 输入框聚焦时触发
+	 */
+	focus: (_e: any) => true,
+
+	/**
+	 * @description 输入框行数变化时调用
+	 */
+	linechange: (_e: any) => true,
+
+	/**
+	 * @description 键盘高度发生变化的时候触发此事件
+	 */
+	keyboardheightchange: (_e: any) => true
+};
+
+export type TextareaProps = ExtractPropTypes<typeof textareaProps>;
+export type TextareaEmits = typeof textareaEmits;

package/components/textarea/src/textarea.vue

@@ -0,0 +1,162 @@
+<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="handleFocus"
+			@blur="handleBlur"
+			@linechange="handleLinechange"
+			@input="handleInput"
+			@confirm="handleConfirm"
+			@keyboardheightchange="handleKeyboardheightchange"></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 lang="ts" setup>
+	/**
+	 * Textarea 文本域
+	 * @description 此组件满足了可能出现的表单信息补充，编辑等实际逻辑的功能，内置了字数校验等
+	 * @tutorial http://www.fusions.top/components/textarea.html
+	 * @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} focus 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
+	 * @event {Function} blur 输入框失去焦点时触发，event.detail = {value, cursor}
+	 * @event {Function} linechange 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
+	 * @event {Function} input 当键盘输入时，触发 input 事件
+	 * @event {Function} change 输入框输入时，触发change事件
+	 * @event {Function} confirm 点击完成时， 触发 confirm 事件
+	 * @event {Function} keyboardheightchange	键盘高度发生变化的时候触发此事件
+	 * @example <fu-textarea v-model="value" placeholder="请输入内容" ></fu-textarea>   
+	 */
+	import { textareaEmits, textareaProps } from "./textarea";
+	import { useTextarea, useTextareaCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuTextarea', options: { virtualHost: true } });
+	
+	const props = defineProps(textareaProps);
+	const $emit = defineEmits(textareaEmits);
+	
+	const {
+		innerValue,
+		handleFocus,
+		handleBlur,
+		handleLinechange,
+		handleInput,
+		handleConfirm,
+		handleKeyboardheightchange
+	} = useTextarea(props, $emit);
+	
+	const {
+		itemStyle,
+		placehStyle,
+		textareaClass,
+		textareaStyle
+	} = useTextareaCustomStyle(props);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	$color_dadbde: #dadbde;
+	$color-disabled: #F5F7FA;
+	
+	.fu-textarea {
+		@include components.flex(row);
+		position: relative;
+		flex: 1;
+		padding: 9px 12px;
+		
+		&__field {
+			flex: 1;
+			font-size: 14px;
+			color: #333333;
+			background: transparent;
+			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-timeaxis/fu-timeaxis.vue → timeaxis/src/timeaxis.vue}

@@ -4,18 +4,12 @@
 	</view>
 </template>
 
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
+<script lang="ts" setup>
 	/**
 	 * 时间轴需配合FuTimeaxisItem组件一起使用
+	 * @tutorial http://www.fusions.top/components/timeaxis.html
 	 */
-	export default {
-		name:"FuTimeaxis",
-		mixins: [mpMixin],
-		data() {
-			return {};
-		}
-	}
+	defineOptions({ name: 'FuTimeaxis', options: { virtualHost: true } });
 </script>
 
 <style lang="scss" scoped>

package/components/timeaxis-item/index.ts

@@ -0,0 +1 @@
+export * from './src/timeaxis-item'

package/components/timeaxis-item/src/timeaxis-item.ts

@@ -0,0 +1,20 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const timeaxisItemProps = {
+	/**
+	 * @description 左侧节点背景颜色
+	 */
+	bgColor: {
+		type: String,
+		default: ""
+	},
+	/**
+	 * @description 左侧节点绝对定位top值
+	 */
+	nodeTop: {
+		type: [String, Number],
+		default: 0
+	}
+};
+
+export type TimeaxisItemProps = ExtractPropTypes<typeof timeaxisItemProps>;

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

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

package/components/transition/index.ts

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

package/components/transition/src/composables/createAnimation.ts

@@ -0,0 +1,171 @@
+// #ifdef APP-NVUE
+const nvueAnimation = uni.requireNativePlugin('animation');
+// #endif
+
+export interface AnimationCtx {
+	// 动画元素的模板引用 (<view ref="ani" />)
+	targetRef: any;
+	// 非NVUE平台下绑定导出动画数据的引用
+	animationDataRef: { value: any };
+	// 用于确定非NVUE平台下回调延迟的数字引用
+	durationTimeRef: { value: number };
+	// 组件实例上的定时器存储，允许取消/替换
+	timerRef: { value: any };
+}
+
+class MPAnimation {
+	private options: Record<string, any>;
+	private animation: UniApp.Animation;
+	private currentStepAnimates: Record<number, any> = {};
+	private next = 0;
+	private ctx: AnimationCtx;
+	// Mark end for NVUE chain
+	private isEnd = true;
+	
+	constructor(options: Record<string, any>, ctx: AnimationCtx) {
+		this.options = options;
+		// 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter should be Object instead of ProxyObject的错误
+		this.animation = uni.createAnimation({
+			...options
+		});
+		this.ctx = ctx;
+	}
+
+	private _nvuePushAnimates(type: string, args: any) {
+		let aniObj = this.currentStepAnimates[this.next];
+		let styles: any = aniObj || { styles: {}, config: {} };
+		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;
+	}
+	
+	private _animateRun(styles: any = {}, config: any = {}) {
+		let ref = this.ctx?.targetRef?.value?.ref;
+		if (!ref) return
+		return new Promise<void>((resolve, _reject) => {
+			nvueAnimation.transition(ref, {
+				styles,
+				...config
+			}, () => {
+				resolve()
+			})
+		})
+	}
+
+	private _nvueNextAnimate(animates: Record<number, any>, step = 0, fn?: () => void) {
+		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: Record<string, any> = {}) {
+		// #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?: () => void) {
+		// #ifndef APP-NVUE
+		if(this.ctx?.animationDataRef) {
+			this.ctx.animationDataRef.value = this.animation.export();
+			if (this.ctx.timerRef) clearTimeout(this.ctx.timerRef.value);
+			// 动画执行完成后重新创建animation对象，确保后续调用正常工作
+			this.animation = uni.createAnimation({ ...this.options });
+			this.ctx.timerRef.value = setTimeout(() => {
+				typeof fn === 'function' && fn()
+			}, this.ctx.durationTimeRef?.value || 0)
+		}
+		// #endif
+		// #ifdef APP-NVUE
+		this.isEnd = false;
+		let ref = this.ctx?.targetRef?.value?.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 => {
+   // @ts-ignore dynamic assignment
+   (MPAnimation.prototype as any)[type] = function (...args: any[]) {
+      // #ifndef APP-NVUE
+      (this.animation as any)[type](...args);
+      // #endif
+      // #ifdef APP-NVUE
+      this._nvuePushAnimates(type, args);
+      // #endif
+      return this;
+   };
+});
+
+export const createAnimation = (option: Record<string, any>, ctx: AnimationCtx) => {
+	if(!ctx) return undefined as any
+	if(ctx.timerRef?.value) {
+		clearTimeout(ctx.timerRef.value)
+	}
+	
+	return new MPAnimation(option, ctx)
+};

package/components/transition/src/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './transform-custom'
+export * from './use-transition'

package/components/transition/src/composables/transform-custom.ts

@@ -0,0 +1,18 @@
+import { computed, Ref, type CSSProperties } from 'vue';
+import type { TransitionProps } from '../transition';
+
+export const useTransitionCustomStyle = (props: TransitionProps, transform: Ref<string>, opacity: Ref<string | number>) => {
+	const transformStyle = computed<CSSProperties>(() => {
+		const style: Record<string, any> = {
+			transform: transform.value,
+			opacity: opacity.value,
+			...uni.$fu.addStyle(props.customStyle),
+			'transition-duration': props.duration / 1000 + 's'
+		}
+		return uni.$fu.addStyle(style, 'string');
+	});
+	
+	return {
+		transformStyle
+	}
+};