fusions-ui 1.2.7 → 1.2.8

package/components/tag/src/tag.ts

@@ -0,0 +1,159 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps, componentTypes, componentShapes } from '../../../constants';
+
+/**
+ * 标签 closePlace 有效值
+ */
+export const tagClosePlaces = ['right', 'right-top'] as const;
+
+export const tagProps = {
+	/**
+	 * @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,
+		values: componentTypes,
+		default: 'primary'
+	},
+	/**
+	 * @description 标签的大小
+	 * @default 'medium'
+	 */
+	size: {
+		type: String,
+		default: 'medium'
+	},
+	/**
+	 * @description tag的形状
+	 * @values 'circle' - 两边半圆形, 'square' - 方形，带圆角
+	 * @default 'square'
+	 */
+	shape: {
+		type: String,
+		values: componentShapes,
+		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,
+		values: tagClosePlaces,
+		default: 'right-top'
+	},
+	/**
+	 * @description 内置图标，或绝对路径的图片
+	 */
+	icon: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 图标颜色
+	 */
+	iconColor: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description nvue模式下 是否直接显示，在fu-list等cell下面使用就需要设置
+	 */
+	cellChild: {
+		type: Boolean,
+		default: false
+	},
+	...componentProps
+};
+
+export const tagEmits = {
+	/**
+	 * @description 点击标签时触发
+	 */
+	click: (_e: any) => true,
+	/**
+	 * @description 点击标签关闭按钮触发
+	 */
+	close: (_e: any) => true
+};
+
+export type TagProps = ExtractPropTypes<typeof tagProps>;
+export type TagEmits = typeof tagEmits;

package/components/{fu-tag/fu-tag.vue → tag/src/tag.vue}

@@ -1,5 +1,5 @@
 <template>
-	<fu-transition mode="fade" :show="show" :cell-child="cellChild">
+	<fu-transition mode="fade" :show="isShow" :cell-child="cellChild">
 		<view class="fu-tag">
 			<view 
 				class="fu-tag--wrapper"
@@ -14,7 +14,7 @@
 				:style="[{
 					marginRight: closable && closePlace =='right-top'? '10px': 0,
 					marginTop: closable && closePlace =='right-top'? '10px': 0,
-				}, style, $fu.addStyle(customStyle)]" 
+				}, tagStyle, $fu.addStyle(customStyle)]" 
 				@tap="handleClick">
 				<slot name="icon">
 					<view class="fu-tag__icon" v-if="icon">
@@ -52,14 +52,12 @@
 	</fu-transition>
 </template>
 
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js';
+<script lang="ts" setup>
 	/**
 	 * Tag 标签
 	 * @description 此组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
-	 * @property {String,Number} index 序号，用于区分多个标签 同时 点击时返回的索引值，用于区分例遍的数组哪个元素被点击了
+	 * @tutorial http://www.fusions.top/components/tag.html
+	 * @property {String | Number} index 序号，用于区分多个标签 同时 点击时返回的索引值，用于区分例遍的数组哪个元素被点击了
 	 * @property {Boolean} show = [true|false] 标签是否显示（默认 true ）
 	 * @property {String} type = [primary|error|success|warning|info] 标签预置按钮样式（默认 'primary' ）
 	 * 	@value primary 主色
@@ -68,10 +66,10 @@
 	 * 	@value warning 警告
 	 * 	@value info 信息
 	 * @property {String} size = [large|medium|mini] 标签的大小，large，medium，mini（默认 'medium' ）
-	 * @property {String} shape = [circle|square] tag的形状，circle（两边半圆形）, square（方形，带圆角）（默认 'square' ）
+	 * @property {String} shape = [circle|square] tag的形状（默认 'square' ）
 	 * 	@value circle 两边半圆形
 	 * 	@value square 方形，带圆角
-	 * @property {String,Number} text 标签的文字内容 如果直接使用插槽nvue中无法控制字体样式
+	 * @property {String | Number} text 标签的文字内容 如果直接使用插槽nvue中无法控制字体样式
 	 * @property {String} bgColor 背景颜色，默认为空字符串，即不处理
 	 * @property {String} color 标签字体颜色，默认为空字符串，即不处理
 	 * @property {String} borderColor 镂空形式标签的边框颜色
@@ -88,78 +86,40 @@
 	 * @event {Function} close closable为true时，点击标签关闭按钮触发 index: 传递的index参数值	
 	 * @example <fu-tag text="标签" type="error" plain plainFill></fu-tag>
 	 */
-	export default {
-		name: 'FuTag',
-		mixins: [mpMixin, mixin, props],
-		emits: ['click', 'close'],
-		computed: {
-			style() {
-				const style = {}
-				if (this.bgColor) {
-					style.backgroundColor = this.bgColor;
-				}
-				if (this.color) {
-					style.color = this.color;
-				}
-				if (this.borderColor) {
-					style.borderColor = this.borderColor;
-				}
-				return style
-			},
-			// nvue下，文本颜色无法继承父元素
-			textColor() {
-				const style = {}
-				if (this.color) {
-					style.color = this.color;
-				}
-				return style
-			},
-			imgStyle() {
-				const width = this.size === 'large' ? '17px' : this.size === 'medium' ? '15px' : '13px';
-				return {
-					width,
-					height: width
-				}
-			},
-			// 文本的样式
-			closeSize() {
-				const size = this.size === 'large' ? 15 : this.size === 'medium' ? 12 : 12;
-				return size
-			},
-			// 图标大小
-			iconSize() {
-				const size = this.size === 'large' ? 21 : this.size === 'medium' ? 19 : 16;
-				return size
-			},
-			// 图标颜色
-			elIconColor() {
-				return this.iconColor ? this.iconColor : this.plain ? this.type : '#ffffff';
-			}
-		},
-		methods: {
-			// 点击标签
-			handleClick() {
-				this.$emit('click', this.index)
-			},
-			
-			// 点击关闭按钮
-			handleClose() {
-				this.$emit('close', this.index)
-			}
-		}
-	}
+	import { tagEmits, tagProps } from './tag';
+	import { useTag, useTagCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuTag', options: { virtualHost: true } });
+	
+	const props = defineProps(tagProps);
+	const $emit = defineEmits(tagEmits);
+	
+	const {
+		isShow,
+		handleClick,
+		handleClose
+	} = useTag(props, $emit);
+	
+	const {
+		tagStyle,
+		textColor,
+		imgStyle,
+		closeSize,
+		iconSize,
+		elIconColor
+	} = useTagCustomStyle(props);
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	@import '../../libs/style/color.scss';
+	@use '../../../style/components.scss';
+	@use '../../../style/color.scss' as *;
 
 	.fu-tag {
 		position: relative;
 		width: fit-content;
 		
 		&--wrapper {
-			@include flex;
+			@include components.flex;
 			align-items: center;
 			border-style: solid;
 		}
@@ -224,14 +184,14 @@
 		}
 		
 		&--primary {
-			background-color: $fu-primary;
+			background-color: $fu-color-primary;
 			border-width: 1px;
-			border-color: $fu-primary;
+			border-color: $fu-color-primary;
 		}
 		
 		&--primary--plain {
 			border-width: 1px;
-			border-color: $fu-primary;
+			border-color: $fu-color-primary;
 		}
 		
 		&--primary--plain--fill {
@@ -243,18 +203,18 @@
 		}
 		
 		&__text--primary--plain {
-			color: $fu-primary;
+			color: $fu-color-primary;
 		}
 		
 		&--error {
-			background-color: $fu-error;
+			background-color: $fu-color-error;
 			border-width: 1px;
-			border-color: $fu-error;
+			border-color: $fu-color-error;
 		}
 		
 		&--error--plain {
 			border-width: 1px;
-			border-color: $fu-error;
+			border-color: $fu-color-error;
 		}
 		
 		&--error--plain--fill {
@@ -266,18 +226,18 @@
 		}
 		
 		&__text--error--plain {
-			color: $fu-error;
+			color: $fu-color-error;
 		}
 		
 		&--warning {
-			background-color: $fu-warning;
+			background-color: $fu-color-warning;
 			border-width: 1px;
-			border-color: $fu-warning;
+			border-color: $fu-color-warning;
 		}
 		
 		&--warning--plain {
 			border-width: 1px;
-			border-color: $fu-warning;
+			border-color: $fu-color-warning;
 		}
 		
 		&--warning--plain--fill {
@@ -289,18 +249,18 @@
 		}
 		
 		&__text--warning--plain {
-			color: $fu-warning;
+			color: $fu-color-warning;
 		}
 		
 		&--success {
-			background-color: $fu-success;
+			background-color: $fu-color-success;
 			border-width: 1px;
-			border-color: $fu-success;
+			border-color: $fu-color-success;
 		}
 		
 		&--success--plain {
 			border-width: 1px;
-			border-color: $fu-success;
+			border-color: $fu-color-success;
 		}
 		
 		&--success--plain--fill {
@@ -312,18 +272,18 @@
 		}
 		
 		&__text--success--plain {
-			color: $fu-success;
+			color: $fu-color-success;
 		}
 		
 		&--info {
-			background-color: $fu-info;
+			background-color: $fu-color-info;
 			border-width: 1px;
-			border-color: $fu-info;
+			border-color: $fu-color-info;
 		}
 		
 		&--info--plain {
 			border-width: 1px;
-			border-color: $fu-info;
+			border-color: $fu-color-info;
 		}
 		
 		&--info--plain--fill {
@@ -335,13 +295,13 @@
 		}
 		
 		&__text--info--plain {
-			color: $fu-info;
+			color: $fu-color-info;
 		}
 		
 		&__close {
 			border-radius: 100px;
 			background-color: #C6C7CB;
-			@include flex(row);
+			@include components.flex(row);
 			align-items: center;
 			justify-content: center;
 			transform: scale(0.6);

package/components/text/index.ts

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

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

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

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

@@ -0,0 +1,120 @@
+import { computed, type CSSProperties } from 'vue';
+import type { TextProps } from '../text';
+
+export const useTextCustomStyle = (props: TextProps) => {
+	const valueStyle = computed<CSSProperties>(() => {
+		const style: Record<string, any> = {
+			textDecoration: props.decoration,
+			wordWrap: props.wordWrap,
+			fontSize: uni.$fu.addUnit(props.size)
+		};
+		!props.type && (style.color = props.color);
+		props.lineHeight && (style.lineHeight = uni.$fu.addUnit(props.lineHeight));
+		isNvue.value && props.lines && (style.lines = props.lines);
+		if(isNvue.value && props.mode != 'price' && !props.prefixIcon && !props.suffixIcon) {
+			style.flex = 1;
+			style.textAlign = props.align === 'left' ? 'flex-start' : props.align === 'center' ? 'center' : 'right';
+		}
+		!isNvue.value && props.block && (style.display = 'block');
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(props.customStyle));
+	});
+	
+	const isNvue = computed(() => {
+		let nvue = false;
+		// #ifdef APP-NVUE
+		nvue = true;
+		// #endif
+		return nvue
+	});
+	
+	const isMp = computed(() => {
+		let mp = false;
+		// #ifdef MP
+		mp = true;
+		// #endif
+		return mp
+	});
+	
+	const value = computed(() => {
+		const { text, mode, format, href } = props;
+		// 价格类型
+		switch(mode) {
+			case 'price':
+				// 如果text不为金额进行提示
+				if (!/^\d+(\.\d+)?$/.test(text.toString())) {
+					uni.$fu.error('金额模式下，text参数需要为金额格式');
+				}
+				// 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的金额格式化处理
+				if (uni.$fu.isFunc(format)) {
+					// 如果用户传入的是函数，使用函数格式化
+					return (format as Function)(text)
+				}
+				// 如果format非正则，非函数，则使用默认的金额格式化方法进行操作
+				return uni.$fu.priceFormat(text, 2)
+			case 'date':
+				// 判断是否合法的日期或者时间戳
+				!uni.$fu.checkDate(text) && uni.$fu.error('日期模式下，text参数需要为日期或时间戳格式')
+				// 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的格式化处理
+				if (uni.$fu.isFunc(format)) {
+					// 如果用户传入的是函数，使用函数格式化
+					return (format as Function)(text)
+				} if (format) {
+					// 如果format非正则，非函数，则使用默认的时间格式化方法进行操作
+					return uni.$fu.formatTime(text, format)
+				}
+				// 如果没有设置format，则设置为默认的时间格式化形式
+				return uni.$fu.formatTime(text, 'Y-M-D')
+			case 'phone':
+				// 判断是否合法的手机号
+				// !mobile(text) && error('手机号模式下，text参数需要为手机号码格式')
+				if (uni.$fu.isFunc(format)) {
+					// 如果用户传入的是函数，使用函数格式化
+					return (format as Function)(text)
+				} if (format === 'encrypt') {
+					// 如果format为encrypt，则将手机号进行星号加密处理
+					return `${text.toString().substring(0, 3)}****${text.toString().substring(7)}`
+				}
+				return text
+			case 'name':
+				// 判断是否合法的字符粗
+				!(typeof (text) === 'string') && uni.$fu.error('姓名模式下，text参数需要为字符串格式')
+				if (uni.$fu.isFunc(format)) {
+					// 如果用户传入的是函数，使用函数格式化
+					return (format as Function)(text)
+				} if (format === 'encrypt') {
+					// 如果format为encrypt，则将姓名进行星号加密处理
+					return formatName(String(text))
+				}
+				return text
+			case 'link':
+				// 判断是否合法的字符粗
+				!uni.$fu.isUrl(href) && uni.$fu.error('超链接模式下，href参数需要为URL格式')
+				return text
+			default:
+				return text
+		}
+	});
+	
+	const formatName = (name: string) => {
+		let value = '';
+		if (name.length === 2) {
+		    value = name.substring(0, 1) + '*';
+		} else if (name.length > 2) {
+		    let char = '';
+		    for (let i = 0, len = name.length - 2; i < len; i++) {
+		        char += '*';
+		    }
+		    value = name.substring(0, 1) + char + name.substring(-1, 1);
+		} else {
+		    value = name;
+		}
+		return value
+	};
+	
+	return {
+		valueStyle,
+		isNvue,
+		isMp,
+		value
+	}
+}

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

@@ -0,0 +1,83 @@
+import type { SetupContext } from 'vue';
+import type { TextProps, TextEmits } from '../text';
+
+export const useText = (props: TextProps, $emit: SetupContext<TextEmits>['emit']) => {
+	const handleClick = () => {
+		// 如果为手机号模式，拨打电话
+		if (props.call && props.mode === 'phone') {
+			uni.makePhoneCall({
+				phoneNumber: props.text as string
+			});
+		}
+		$emit('click');
+	}
+	
+	const onGetPhoneNumber = (e: any) => {
+		$emit('getphonenumber', e.detail)
+	}
+	
+	const onGetUserInfo = (e: any) => {
+		$emit('getuserinfo', e)
+	}
+	
+	const onError = (e: any) => {
+		$emit('error', e.detail)
+	}
+	
+	const onOpenSetting = (e: any) => {
+		$emit('opensetting', e.detail)
+	}
+	
+	const onLaunchApp = (e: any) => {
+		$emit('launchapp', e.detail)
+	}
+	
+	const onContact = (e: any) => {
+		$emit('contact', e.detail)
+	}
+	
+	const onChooseavatar = (e: any) => {
+		$emit('chooseavatar', e.detail)
+	}
+	
+	const onAgreeprivacyauthorization = (e: any) => {
+		$emit('agreeprivacyauthorization', e.detail)
+	}
+	
+	const onAddgroupapp = (e: any) => {
+		$emit('addgroupapp', e.detail)
+	}
+	
+	const onChooseaddress = (e: any) => {
+		$emit('chooseaddress', e.detail)
+	}
+	
+	const onSubscribe = (e: any) => {
+		$emit('subscribe', e.detail)
+	}
+	
+	const onLogin = (e: any) => {
+		$emit('login', e.detail)
+	}
+	
+	const onIm = (e: any) => {
+		$emit('im', e.detail)
+	}
+	
+	return {
+		handleClick,
+		onGetPhoneNumber,
+		onGetUserInfo,
+		onError,
+		onOpenSetting,
+		onLaunchApp,
+		onContact,
+		onChooseavatar,
+		onAgreeprivacyauthorization,
+		onAddgroupapp,
+		onChooseaddress,
+		onSubscribe,
+		onLogin,
+		onIm
+	}
+};