fusions-ui 1.2.6 → 1.2.8

package/components/text/src/text.ts

@@ -0,0 +1,261 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps, componentTypes, componentOpenTypes } from '../../../constants';
+
+/**
+ * 文本 mode 有效值
+ */
+export const textModes = ['text', 'price', 'phone', 'name', 'date', 'link'] as const;
+
+/**
+ * 文本align有效值
+ */
+export const textAligns = ['left', 'center', 'right'] as const;
+
+/**
+ * 文本wordWrap有效值
+ */
+export const textWordWraps = ['break-word', 'normal', 'anywhere'] as const;
+
+/**
+ * 文本decoration有效值
+ */
+export const textDecorations = ['none', 'underline', 'line-through'] as const;
+
+export const textProps = {
+	/**
+	 * @description 主题颜色
+	 * @values 'primary' - 主色,  'success' - 成功, 'warning' - 警告, 'info' - 信息, 'error' - 错误
+	 */
+	type: {
+		type: String,
+		values: componentTypes,
+		default: ''
+	},
+	/**
+	 * @description 是否显示
+	 * @default true
+	 */
+	show: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 显示的值
+	 */
+	text: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 前置图标
+	 */
+	prefixIcon: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 后置图标
+	 */
+	suffixIcon: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 图标的样式
+	 */
+	iconStyle: {
+		type: [String,Object],
+		default: ''
+	},
+	/**
+	 * @description 文本处理的匹配模式
+	 * @values 'text' - 普通文本, 'price' - 价格, 'phone' - 手机号码, 'name' - 姓名, 'date' - 日期, 'link' - 超链接
+	 * @default 'text'
+	 */
+	mode: {
+		type: String,
+		values: textModes,
+		default: 'text'
+	},
+	/**
+	 * @description 配置的链接（仅mode=link时生效）
+	 */
+	href: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * 格式化规则
+	 */
+	format: {
+		type: [String, Function],
+		default: ''
+	},
+	/**
+	 * @description 点击文本是否拨打电话（仅mode=phone时生效）
+	 * @default false
+	 */
+	call: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 小程序的打开方式
+	 * @link https://uniapp.dcloud.io/component/button
+	 */
+	openType: {
+		type: String,
+		values: componentOpenTypes,
+		default: ''
+	},
+	/**
+	 * @description 是否块状
+	 * @default true
+	 */
+	block: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 文本显示的行数，如果设置，超出此行数，将会显示省略号
+	 */
+	lines: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 文本颜色
+	 */
+	color: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 字体大小
+	 * @default 14
+	 */
+	size: {
+		type: [String, Number],
+		default: 14
+	},
+	/**
+	 * @description 文字装饰
+	 * @values 'none' - 无装饰, 'underline' - 下划线, 'line-through' - 中划线
+	 * @default 'none'
+	 */
+	decoration: {
+		type: String,
+		values: textDecorations,
+		default: 'none'
+	},
+	/**
+	 * @description 外边距，对象、字符串，数值形式均可
+	 */
+	margin: {
+		type: [String,Number],
+		default: ''
+	},
+	/**
+	 * @description 文本行高
+	 */
+	lineHeight: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 文本对齐方式
+	 * @values 'left' - 左对齐, 'center' - 居中, 'right' - 右对齐
+	 * @default 'left'
+	 */
+	align: {
+		type: String,
+		values: textAligns,
+		default: 'left'
+	},
+	/**
+	 * @description 文字换行
+	 * @values 'break-word' - 在长单词或URL地址内部进行换行, 'normal' - 只在允许的断字点换行（浏览器保持默认处理）, 'anywhere' - 为防止溢出，如果行中没有其他可接受的断点，则不可断的字符串（如长词或 URL）可能会在任何时候换行。
+	 * @default 'normal'
+	 */
+	wordWrap: {
+		type: String,
+		values: textWordWraps,
+		default: 'normal'
+	},
+	...componentProps
+};
+
+export const textEmits = {
+	/**
+	 * @description 文本点击事件
+	 */
+	click: () => true,
+	/**
+	 * @description 获取用户手机号回调
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	getphonenumber: (_e: any) => true,
+	/**
+	 * @description 获取用户信息回调
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	getuserinfo: (_e: any) => true,
+	/**
+	 * @description 当使用开放能力时，发生错误的回调
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	error: (_e: any) => true,
+	/**
+	 * @description 打开授权设置页回调
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	opensetting: (_e: any) => true,
+	/**
+	 * @description 打开APP成功时回调
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	launchapp: (_e: any) => true,
+	/**
+	 * @description 打开客服会话回调
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	contact: (_e: any) => true,
+	/**
+	 * @description 获取到头像信息回调
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	chooseavatar: (_e: any) => true,
+	/**
+	 * @description 获取用户同意隐私协议回调
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	agreeprivacyauthorization: (_e: any) => true,
+	/**
+	 * @description 获取用户添加群应用回调
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	addgroupapp: (_e: any) => true,
+	/**
+	 * @description 获取用户选择收货地址回调
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	chooseaddress: (_e: any) => true,
+	/**
+	 * @description 订阅类模板消息，需要用户授权才可发送
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	subscribe: (_e: any) => true,
+	/**
+	 * @description 获取用户是否登录成功回调
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	login: (_e: any) => true,
+	/**
+	 * @description 跳转到抖音IM客服
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	im: (_e: any) => true,
+};
+
+export type TextProps = ExtractPropTypes<typeof textProps>;
+export type TextEmits = typeof textEmits;

package/components/text/src/text.vue

@@ -0,0 +1,186 @@
+<template>
+	<view 
+		class="fu-text" 
+		:class="customClass"
+		:style="{margin: margin, justifyContent: align === 'left' ? 'flex-start' : align === 'center' ? 'center' : 'flex-end'}" 
+		@tap="handleClick" 
+		v-if="show">
+		<text :class="['fu-text__price', type && `fu-text__value--${type}`]" :style="[valueStyle]" v-if="mode === 'price'">￥</text>
+		<view class="fu-text__prefix-icon" v-if="prefixIcon">
+			<fu-icon :name="prefixIcon" :customStyle="iconStyle"></fu-icon>
+		</view>
+		<fu-link :href="href" underLine v-if="mode === 'link'">
+			<slot>{{ value }}</slot>
+		</fu-link>
+		<template v-else-if="openType && isMp">
+			<button 
+				class="fu-reset-button fu-text__value" 
+				:class="[type && `fu-text__value--${type}`, lines && `fu-line-${lines}`]" 
+				:style="[valueStyle]" 
+				:openType="openType" 
+				@getphonenumber="onGetPhoneNumber" 
+				@getuserinfo="onGetUserInfo"
+				@error="onError"
+				@opensetting="onOpenSetting"
+				@launchapp="onLaunchApp"
+				@contact="onContact"
+				@chooseavatar="onChooseavatar"
+				@agreeprivacyauthorization="onAgreeprivacyauthorization"
+				@addgroupapp="onAddgroupapp"
+				@chooseaddress="onChooseaddress"
+				@subscribe="onSubscribe"
+				@login="onLogin"
+				@im="onIm">
+				<slot>{{ value }}</slot>
+			</button>
+		</template>
+		<text 
+			class="fu-text__value" 
+			:style="[valueStyle]" 
+			:class="[type && `fu-text__value--${type}`, lines && `fu-line-${lines}`]" 
+			v-else>
+			<slot>{{ value }}</slot>
+		</text>
+		<view class="fu-text__suffix-icon" v-if="suffixIcon">
+			<fu-icon :name="suffixIcon" :customStyle="iconStyle"></fu-icon>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Text 文本
+	 * @description 此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件几乎涵盖您能使用的大部分场景。
+	 * @tutorial http://www.fusions.top/components/text.html
+	 * @property {String} type = [primary|error|success|warning|info] 主题颜色
+	 * 	@value primary 主色
+	 * 	@value error 错误
+	 * 	@value success 成功
+	 * 	@value warning 警告
+	 * 	@value info 信息
+	 * @property {Boolean} show = [true|false] 是否显示（默认 true）
+	 * @property {String | Number} text 显示的值
+	 * @property {String} prefixIcon 前置图标
+	 * @property {String} suffixIcon 后置图标
+	 * @property {String | Object} iconStyle 图标的样式
+	 * @property {String} mode = [text|price|phone|name|date|link] 文本处理的匹配模式 
+	 * 	@value text 普通文本
+	 * 	@value price 价格
+	 * 	@value phone 手机号
+	 * 	@value name 姓名
+	 * 	@value date 日期
+	 * 	@value link 超链接
+	 * @property {String} href 配置的链接（仅mode=link时生效）
+	 * @property {String | Function} format 格式化规则
+	 * @property {Boolean} call 点击文本是否拨打电话（仅mode=phone时生效）（默认 false）
+	 * @property {String} openType 小程序的打开方式
+	 * @property {Boolean} block 是否块状（默认 false）
+	 * @property {String | Number} lines 文本显示的行数，如果设置，超出此行数，将会显示省略号
+	 * @property {String} color 文本颜色
+	 * @property {String | Number} size 字体大小（默认 14）
+	 * @property {String} decoration = [none|underline|line-through] 文字装饰（默认 'none' ）
+	 * 	@value none 无装饰
+	 * 	@value underline 下划线
+	 * 	@value line-through 中划线
+	 * @property {String | Number} margin 外边距，对象、字符串，数值形式均可（默认 0）
+	 * @property {String | Number} lineHeight 文本行高
+	 * @property {String} align = [left|center|right] 文本对齐方式（默认 'left'）
+	 * 	@value left 左对齐
+	 * 	@value center 居中
+	 * 	@value right 右对齐
+	 * @property {String} wordWrap = [break-word|normal|anywhere] 文字换行（默认 'normal' ）
+	 * 	@value break-word 在长单词或URL地址内部进行换行
+	 * 	@value normal 只在允许的断字点换行（浏览器保持默认处理）
+	 * 	@value anywhere 为防止溢出，如果行中没有其他可接受的断点，则不可断的字符串（如长词或 URL）可能会在任何时候换行。
+	 * @property {String} customClass 定义需要用到的外部类
+	 * @property {String | Object} customStyle 定义需要用到的外部样式
+	 * 
+	 * @event {Function} click 点击触发事件
+	 * @example <fu-text text="融百家之长，合万物之态"></fu-text>
+	 */
+	import { textEmits, textProps } from './text';
+	import { useText, useTextCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuText', options: { virtualHost: true } });
+	
+	const props = defineProps(textProps);
+	const $emit = defineEmits(textEmits);
+	
+	const {
+		handleClick,
+		onGetPhoneNumber,
+		onGetUserInfo,
+		onError,
+		onOpenSetting,
+		onLaunchApp,
+		onContact,
+		onChooseavatar,
+		onAgreeprivacyauthorization,
+		onAddgroupapp,
+		onChooseaddress,
+		onSubscribe,
+		onLogin,
+		onIm
+	} = useText(props, $emit);
+	
+	const {
+		valueStyle,
+		isNvue,
+		isMp,
+		value
+	} = useTextCustomStyle(props);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	@use '../../../style/color.scss' as *;
+
+	.fu-text {
+		@include components.flex;
+		align-items: center;
+		flex-wrap: nowrap;
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		/* #endif */
+		
+		&__price {
+			font-size: 14px;
+			color: $fu-color-main;
+		}
+
+		&__value {
+			font-size: 14px;
+			@include components.flex;
+			color: $fu-color-main;
+			flex-wrap: wrap;
+			text-overflow: ellipsis;
+			align-items: center;
+			// 兼容支付宝小程序去除默认样式
+			/* #ifdef MP-ALIPAY */
+			height: auto;
+			border: none;
+			/* #endif */
+
+			&--primary {
+				color: $fu-color-primary;
+			}
+
+			&--warning {
+				color: $fu-color-warning;
+			}
+
+			&--success {
+				color: $fu-color-success;
+			}
+
+			&--info {
+				color: $fu-color-info;
+			}
+
+			&--error {
+				color: $fu-color-error;
+			}
+		}
+	}
+</style>

package/components/textarea/index.ts

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

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

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

package/components/textarea/src/composables/textarea-custom.ts

@@ -0,0 +1,50 @@
+import { computed } from 'vue';
+import type { TextareaProps } from '../textarea';
+
+export const useTextareaCustomStyle = (props: TextareaProps) => {
+	const itemStyle = computed(() => {
+		let style = {
+			height: uni.$fu.addUnit(props.height), 
+			fontSize: uni.$fu.addUnit(props.size)
+		}
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(props.customStyle));
+	});
+	
+	const placehStyle = computed(() => {
+		return uni.$fu.addStyle(props.placeholderStyle, 'string')
+	});
+	
+	// 组件的类名
+	const textareaClass = computed(() => {
+		let classes = [], { border, disabled } = props;
+		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(" ");
+	});
+	
+	// 组件的样式
+	const textareaStyle = computed(() => {
+		const style: Record<string, any> = {
+			borderColor: props.borderColor,
+			backgroundColor: props.disabled && props.disabledColor
+		};
+		// #ifdef APP-NVUE
+		// 由于textarea在安卓nvue上的差异性，需要额外再调整其内边距
+		if (uni.$fu.os() === "android") {
+				style.paddingTop = "6px";
+				style.paddingLeft = "6px";
+				style.paddingBottom = "3px";
+				style.paddingRight = "6px";
+		}
+		// #endif
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(props.customStyle));
+	});
+	
+	return {
+		itemStyle,
+		placehStyle,
+		textareaClass,
+		textareaStyle
+	}
+}

package/components/textarea/src/composables/use-textarea.ts

@@ -0,0 +1,88 @@
+import { ref, nextTick, type SetupContext, watch } from 'vue';
+import type { TextareaProps, TextareaEmits } from '../textarea';
+
+export const useTextarea = (props: TextareaProps, $emit: SetupContext<TextareaEmits>['emit']) => {
+	// 输入框的值
+	const innerValue = ref<any>('');
+	// value是否第一次变化，在watch中，由于加入immediate属性，会在第一次触发，此时不应该认为value发生了变化
+	const firstChange = ref(true);
+	// value绑定值的变化是由内部还是外部引起的
+	const changeFromInner = ref(false);
+	// 过滤处理方法
+	const innerFormatter = ref<(value: string) => string>((value) => value);
+	
+	// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
+	const setFormatter = (e: any) => {
+		innerFormatter.value = e;
+	};
+	
+	const handleFocus = (e: any) => {
+		$emit("focus", e);
+	};
+	
+	const handleBlur = (e: any) => {
+		$emit("blur", e);
+	};
+	
+	const handleLinechange = (e: any) => {
+		$emit("linechange", e);
+	};
+	
+	const handleInput = (e: any) => {
+		let { value = "" } = e.detail || {};
+		// 格式化过滤方法
+		const formatter = props.formatter || innerFormatter.value;
+		const formatValue = formatter(value)
+		// 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
+		innerValue.value = value;
+		nextTick(() => {
+			innerValue.value = formatValue;
+			valueChange();
+		})
+	};
+	
+	// 内容发生变化，进行处理
+	const valueChange = () => {
+		const value = innerValue.value;
+		nextTick(() => {
+			$emit("input", value);
+			$emit('update:modelValue', value);
+			// 标识value值的变化是由内部引起的
+			changeFromInner.value = true;
+			$emit("change", value);
+		});
+	};
+	
+	const handleConfirm = (e: any) => {
+		$emit("confirm", e);
+	};
+	
+	const handleKeyboardheightchange = (e: any) => {
+		$emit("keyboardheightchange", e);
+	};
+	
+	// watch监听事件
+	watch(() => props.modelValue, (newVal) => {
+		innerValue.value = newVal;
+		/* #ifdef H5 */
+		// 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
+		if (firstChange.value === false && changeFromInner.value === false) {
+			valueChange();
+		}
+		/* #endif */
+		firstChange.value = false;
+		// 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
+		changeFromInner.value = false;
+	}, { immediate: true })
+	
+	return {
+		innerValue,
+		setFormatter,
+		handleFocus,
+		handleBlur,
+		handleLinechange,
+		handleInput,
+		handleConfirm,
+		handleKeyboardheightchange
+	}
+}