fusions-ui 1.2.6 → 1.2.8

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

@@ -69,28 +69,24 @@
 	</view>
 </template>
 
-<script>
-	import { debounce, throttle } from '../../libs/function/applyEven.js'
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import button from '../../libs/mixin/button.js'
-	import props from './props.js'
+<script lang="ts" setup>
 	/**
 	 * Button 按钮
 	 * @description 此组件内部实现以uni-app的button组件为基础，对其进行了扩展，使其能够在uni-app的各个平台上表现一致。
-	 * @property {String,Number} index 按钮索引，用于区分多个按钮
+	 * @tutorial http://www.fusions.top/components/button.html
+	 * @property {String | Number} index 按钮索引，用于区分多个按钮
 	 * @property {String} type = [primary|error|success|warning|info] 按钮的预置样式 （默认 primary）
 	 * 	@value primary 主色
 	 * 	@value error 错误
 	 * 	@value success 成功
 	 * 	@value warning 警告
 	 * 	@value info 信息
-	 * @property {String,Number} text 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）
-	 * @property {String} shape = [square|circle] 按钮形状 square（带圆角） circle（两边为半圆）(默认 'square')
-	 * 	@value square （带圆角）
-	 * 	@value circle （两边为半圆）
-	 * @property {String,Number} width 宽度（默认 auto）
-	 * @property {String,Number} height 高度（默认 ''）
+	 * @property {String | Number} text 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）
+	 * @property {String} shape = [square|circle] 按钮形状 (默认 'square')
+	 * 	@value square - 带圆角
+	 * 	@value circle - 两边为半圆
+	 * @property {String | Number} width 宽度（默认 auto）
+	 * @property {String | Number} height 高度（默认 ''）
 	 * @property {String} size = [large|normal|small|mini] 按钮尺寸（默认 normal）
 	 * 	@value large 16px
 	 * 	@value normal 14px
@@ -102,7 +98,7 @@
 	 * @property {Boolean} loading = [true|false] 是否显示加载图标（默认 false）
 	 * @property {String} loadingText 加载中提示文字
 	 * @property {String} loadingMode 加载状态图标类型 （默认 'flower'）
-	 * @property {String,Number} loadingSize 加载图标大小 （默认 14）
+	 * @property {String | Number} loadingSize 加载图标大小 （默认 14）
 	 * @property {String} formType 触发form表单的事件类型
 	 * @property {String} openType 开放能力，具体请看uniapp稳定关于button组件部分说明 https://uniapp.dcloud.io/component/button
 	 * @property {Boolean} hoverStopPropagation = [true|false] 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效（默认 false ）
@@ -112,8 +108,8 @@
 	 * @property {String} sendMessageImg 会话内消息卡片图片，openType="contact"时有效
 	 * @property {Boolean} showMessageCard = [true|false] 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效（默认 false）
 	 * @property {String} color 按钮颜色，支持传入linear-gradient渐变色
-	 * @property {String,Number} hoverStartTime 按住后多久出现点击态，单位毫秒 （默认 0 )
-	 * @property {String,Number} hoverStayTime 手指松开后点击态保留时间，单位毫秒 （默认 200 )
+	 * @property {String | Number} hoverStartTime 按住后多久出现点击态，单位毫秒 （默认 0 )
+	 * @property {String | Number} hoverStayTime 手指松开后点击态保留时间，单位毫秒 （默认 200 )
 	 * @property {String} scene = [none|debounce|throttle] 场景：（none： 不开启防抖节流模式，debounce：防抖模式 throttle：节流模式（默认 'throttle'）
 	 *  @value none 不开启防抖节流模式
 	 * 	@value debounce 防抖模式
@@ -121,8 +117,8 @@
 	 * @property {Number} sceneTime 防抖节流间隔时间单位毫秒（默认300）
 	 * @property {String} lang = [zh_CN|zh_TW|en] 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）
 	 * @property {String} customClass 定义需要用到的外部样式类
-	 * @property {Object,String} customStyle 定义需要用到的外部样式
-	 * @property {Object,String} customTextStyle 定义需要用到的外部按钮文本样式
+	 * @property {String | Object} customStyle 定义需要用到的外部样式
+	 * @property {Object | String} customTextStyle 定义需要用到的外部按钮文本样式
 	 * 
 	 * @event {Function} click 非禁止并且非加载中，才能点击
 	 * @event {Function} tap 非禁止并且非加载中，才能点击
@@ -133,145 +129,43 @@
 	 * @event {Function} contact open-type="contact"时有效
 	 * @example <fu-button text="按钮"></fu-button>
 	 */
-	export default {
-		name: "FuButton",
-		// #ifdef MP
-		mixins: [mixin, mpMixin, props, button],
-		// #endif
-		// #ifndef MP
-		mixins: [mixin, mpMixin, props],
-		// #endif
-		emits: ['click', 'tap'],
-		// 解决再微信小程序中，自定义按钮无法触发bindsubmit
-		behaviors: ['wx://form-field-button'],
-		data() {
-			return {};
-		},
-		computed: {
-			// 根据不同的参数动态生成class
-			buttonClass() {
-				const prefix = 'fu-button--';
-				const classes = [
-					`${prefix}${this.type}`,
-					`${prefix}${this.size}`,
-					`${prefix}${this.shape}`,
-					this.plain ? `${prefix}plain` : '',
-					this.disabled ? 'fu-button--disabled' : ''
-				];
-				
-				return classes.filter(Boolean).join(' ');
-			},
-			loadingColor() {
-				if (this.plain) {
-					// 如果有设置color值，则用color值，否则使用type主题颜色
-					return this.color? this.color: '#2979ff';
-				}
-				if (this.type === "info") {
-					return "#c9c9c9";
-				}
-				return "rgb(200, 200, 200)";
-			},
-			baseColor() {
-				let style = {
-                    ...(this.width && { width: this.$fu.addUnit(this.width) }),
-					...(this.height && { height: this.$fu.addUnit(this.height) }),
-					...(this.height && { lineHeight: this.$fu.addUnit(this.height) }),
-                };
-				if (this.color) {
-					// 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
-					style.color = this.plain ? this.color : "white";
-					if (!this.plain) {
-						// 非镂空，背景色使用自定义的颜色
-						style["background-color"] = this.color;
-					}
-					if (this.color.indexOf("gradient") !== -1) {
-						// 如果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色
-						// weex文档说明可以写borderWidth的形式，为什么这里需要分开写？
-						// 因为weex是阿里巴巴为了部门业绩考核而做的你懂的东西，所以需要这么写才有效
-						style.borderTopWidth = 0;
-						style.borderRightWidth = 0;
-						style.borderBottomWidth = 0;
-						style.borderLeftWidth = 0;
-						if (!this.plain) style.backgroundImage = this.color;
-					} else {
-						// 非渐变色，则设置边框相关的属性
-						style.borderColor = this.color;
-						style.borderWidth = "1px";
-						style.borderStyle = "solid";
-					}
-				}
-				return style;
-			},
-			// 字体大小
-			textSize() {
-				const sizeMap = {
-					large: 16,
-					normal: 14,
-					small: 12,
-					mini: 10
-				}
-				return sizeMap[this.size] || 14
-			},
-			// 设置外层盒子的宽度，其他样式不需要
-			btnWrapperStyle() {
-				const style = {
-					margin: this.margin
-				};
-				const customStyle = this.$fu.addStyle(this.customStyle);
-				if(customStyle.width || this.width) style.width = customStyle.width || this.$fu.addUnit(this.width);
-				return style;
-			}
-		},
-		methods: {
-			//防抖模式
-			debounceClick(e) {
-				debounce(() => {
-					this.emitClick(e);
-				}, this.sceneTime)
-			},
-
-			//节流模式
-			throttleClick(e) {
-				throttle(() => {
-					this.emitClick(e);
-				}, this.sceneTime)
-			},
-
-			emitClick(e) {
-				//触发事件
-				this.$emit('click', {
-					...e,
-					index: Number(this.index)
-				})
-				// 兼容tap事件
-				this.$emit('tap', {
-					...e,
-					index: Number(this.index)
-				})
-			},
-
-			// 按钮点击事件
-			handleClick(e) {
-				// 非禁止并且非加载中，才能点击
-				if (this.disabled || this.loading) return
-				
-				//普通模式，触发多少次就回调多少次
-				if (this.scene === 'none') {
-					this.emitClick(e);
-				} else if (this.scene == 'debounce') {
-					//防抖模式
-					this.debounceClick(e);
-				} else {
-					//节流模式
-					this.throttleClick(e);
-				}
-			}
-		}
-	}
+	import { buttonEmits, buttonProps } from './button';
+	import { useButton, useButtonCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuButton', options: { virtualHost: true } });
+	
+	const props = defineProps(buttonProps);
+	const $emit = defineEmits(buttonEmits);
+	
+	const {
+		handleClick,
+		handleGetPhoneNumber,
+		handleGetUserInfo,
+		handleError,
+		handleOpenSetting,
+		handleLaunchApp,
+		handleContact,
+		handleChooseavatar,
+		handleAgreeprivacyauthorization,
+		handleAddgroupapp,
+		handleChooseaddress,
+		handleChooseinvoicetitle,
+		handleSubscribe,
+		handleLogin,
+		handleIm
+	} = useButton(props, $emit);
+	
+	const {
+		buttonClass,
+		loadingColor,
+		baseColor,
+		textSize,
+		btnWrapperStyle
+	} = useButtonCustomStyle(props);
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/style/color.scss';
+	@use '../../../style/color.scss' as *;
 	$fu-button-height: 40px !default;
 	$fu-button-loading-text-font-size: 15px !default;
 	$fu-button-loading-text-margin-left: 4px !default;
@@ -295,22 +189,22 @@
 	$fu-button-info-border-width: 1px !default;
 	$fu-button-info-border-style: solid !default;
 	$fu-button-success-color: #fff !default;
-	$fu-button-success-bg-color: $fu-success !default;
+	$fu-button-success-bg-color: $fu-color-success !default;
 	$fu-button-success-border-color: $fu-button-success-bg-color !default;
 	$fu-button-success-border-width: 1px !default;
 	$fu-button-success-border-style: solid !default;
 	$fu-button-primary-color: #fff !default;
-	$fu-button-primary-bg-color: $fu-primary !default;
+	$fu-button-primary-bg-color: $fu-color-primary !default;
 	$fu-button-primary-border-color: $fu-button-primary-bg-color !default;
 	$fu-button-primary-border-width: 1px !default;
 	$fu-button-primary-border-style: solid !default;
 	$fu-button-error-color: #fff !default;
-	$fu-button-error-bg-color: $fu-error !default;
+	$fu-button-error-bg-color: $fu-color-error !default;
 	$fu-button-error-border-color: $fu-button-error-bg-color !default;
 	$fu-button-error-border-width: 1px !default;
 	$fu-button-error-border-style: solid !default;
 	$fu-button-warning-color: #fff !default;
-	$fu-button-warning-bg-color: $fu-warning !default;
+	$fu-button-warning-bg-color: $fu-color-warning !default;
 	$fu-button-warning-border-color: $fu-button-warning-bg-color !default;
 	$fu-button-warning-border-width: 1px !default;
 	$fu-button-warning-border-style: solid !default;
@@ -389,23 +283,23 @@
 			background-image: none;
 			
 			&.fu-button--primary {
-				color: $fu-primary;
+				color: $fu-color-primary;
 			}
 			
 			&.fu-button--info {
-				color: $fu-info;
+				color: $fu-color-info;
 			}
 			
 			&.fu-button--success {
-				color: $fu-success;
+				color: $fu-color-success;
 			}
 			
 			&.fu-button--error {
-				color: $fu-error;
+				color: $fu-color-error;
 			}
 			
 			&.fu-button--warning {
-				color: $fu-warning;
+				color: $fu-color-warning;
 			}
 		}
 

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

@@ -0,0 +1,90 @@
+import  { computed, type CSSProperties } from 'vue';
+import type { ButtonProps } from '../button';
+
+export const useButtonCustomStyle = (props: ButtonProps) => {
+	// 根据不同的参数动态生成class
+	const buttonClass = computed(() => {
+		const prefix = 'fu-button--';
+		const classes = [
+			`${prefix}${props.type}`,
+			`${prefix}${props.size}`,
+			`${prefix}${props.shape}`,
+			props.plain? `${(prefix as string)}plain` : '',
+			props.disabled ? 'fu-button--disabled' : ''
+		];
+		
+		return classes.filter(Boolean).join(' ');
+	});
+	
+	const loadingColor = computed(() => {
+		if (props.plain) {
+			// 如果有设置color值，则用color值，否则使用type主题颜色
+			return props.color? props.color: '#2979ff';
+		}
+		if (props.type === "info") {
+			return "#c9c9c9";
+		}
+		return "rgb(200, 200, 200)";
+	});
+	
+	const baseColor = computed<CSSProperties>(() => {
+		let style: Record<string, any> = {
+			...(props.width && { width: uni.$fu.addUnit(props.width) }),
+			...(props.height && { height: uni.$fu.addUnit(props.height) }),
+			...(props.height && { lineHeight: uni.$fu.addUnit(props.height) }),
+		};
+		if (props.color) {
+			// 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
+			style.color = props.plain ? props.color : "white";
+			if (!props.plain) {
+				// 非镂空，背景色使用自定义的颜色
+				style["background-color"] = props.color;
+			}
+			if (props.color.indexOf("gradient") !== -1) {
+				// 如果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色
+				// weex文档说明可以写borderWidth的形式，为什么这里需要分开写？
+				// 因为weex是阿里巴巴为了部门业绩考核而做的你懂的东西，所以需要这么写才有效
+				style.borderTopWidth = 0;
+				style.borderRightWidth = 0;
+				style.borderBottomWidth = 0;
+				style.borderLeftWidth = 0;
+				if (!props.plain) style.backgroundImage = props.color;
+			} else {
+				// 非渐变色，则设置边框相关的属性
+				style.borderColor = props.color;
+				style.borderWidth = "1px";
+				style.borderStyle = "solid";
+			}
+		}
+		return style;
+	});
+	
+	// 字体大小
+	const textSize = computed(() => {
+		const sizeMap = {
+			large: 16,
+			normal: 14,
+			small: 12,
+			mini: 10
+		}
+		return sizeMap[props.size] || 14
+	});
+	
+	// 设置外层盒子的宽度，其他样式不需要
+	const btnWrapperStyle = computed<CSSProperties>(() => {
+		const style: Record<string, any> = {
+			margin: props.margin
+		};
+		const customStyle = uni.$fu.addStyle(props.customStyle);
+		if(customStyle.width || props.width) style.width = customStyle.width || uni.$fu.addUnit(props.width);
+		return style;
+	});
+		
+	return {
+		buttonClass,
+		loadingColor,
+		baseColor,
+		textSize,
+		btnWrapperStyle
+	}
+}

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

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

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

@@ -0,0 +1,137 @@
+import type { SetupContext } from 'vue';
+import type { ButtonProps, ButtonEmits } from '../button';
+import { debounce, throttle } from '../../../../utils/applyEven';
+
+export const useButton = (props: ButtonProps, $emit: SetupContext<ButtonEmits>['emit']) => {
+	// 防抖模式
+	const debounceClick = (e: TouchEvent) => {
+		debounce(() => {
+			emitClick(e);
+		}, props.sceneTime)
+	};
+
+	// 节流模式
+	const throttleClick = (e: TouchEvent) => {
+		throttle(() => {
+			emitClick(e);
+		}, props.sceneTime)
+	};
+
+	const emitClick = (e: TouchEvent) => {
+		//触发事件
+		$emit('click', {
+			...e,
+			index: Number(props.index)
+		});
+		// 兼容tap事件
+		$emit('tap', {
+			...e,
+			index: Number(props.index)
+		});
+	};
+
+	// 按钮点击事件
+	const handleClick = (e: TouchEvent) => {
+		// 非禁止并且非加载中，才能点击
+		if (props.disabled || props.loading) return
+		
+		//普通模式，触发多少次就回调多少次
+		if (props.scene === 'none') {
+			emitClick(e);
+		} else if (props.scene == 'debounce') {
+			//防抖模式
+			debounceClick(e);
+		} else {
+			//节流模式
+			throttleClick(e);
+		}
+	};
+	
+	// 微信小程序、百度小程序、抖音小程序、支付宝小程序、快手小程序、京东小程序。
+	const handleGetPhoneNumber = (event: any) => {
+	    $emit('getphonenumber', event.detail)
+	};
+	
+	// 微信小程序、百度小程序、QQ小程序、快手小程序、京东小程序、360小程序
+	const handleGetUserInfo = (event: any) => {
+	    $emit('getuserinfo', event.detail)
+	};
+	
+	// 微信、QQ、快手、京东小程序
+	const handleError = (event: any) => {
+	    $emit('error', event.detail)
+	};
+	
+	// 微信、QQ、百度、快手、京东小程序、小红书小程序
+	const handleOpenSetting = (event: any) => {
+	    $emit('opensetting', event.detail)
+	};
+	
+	// 微信、QQ、快手、京东小程序
+	const handleLaunchApp = (event: any) => {
+	    $emit('launchapp', event.detail)
+	};
+	
+	// 微信小程序、百度小程序、快手小程序、抖音小程序
+	const handleContact = (event: any) => {
+	    $emit('contact', event.detail)
+	};
+	
+	// 微信小程序、支付宝小程序
+	const handleChooseavatar = (event: any) => {
+	    $emit('chooseavatar', event.detail)
+	};
+	
+	// 微信小程序2.32.3
+	const handleAgreeprivacyauthorization = (event: any) => {
+	    $emit('agreeprivacyauthorization', event.detail)
+	};
+	
+	// QQ小程序
+	const handleAddgroupapp = (event: any) => {
+	    $emit('addgroupapp', event.detail)
+	};
+	
+	// 百度小程序
+	const handleChooseaddress = (event: any) => {
+	    $emit('chooseaddress', event.detail)
+	};
+	
+	// 百度小程序
+	const handleChooseinvoicetitle = (event: any) => {
+		$emit('chooseinvoicetitle', event.detail)
+	};
+	
+	// 百度小程序
+	const handleSubscribe = (event: any) => {
+	    $emit('subscribe', event.detail)
+	};
+	
+	// 百度小程序
+	const handleLogin = (event: any) => {
+	    $emit('login', event.detail)
+	};
+	
+	// 抖音小程序2.68.0版本+
+	const handleIm = (event: any) => {
+	    $emit('im', event.detail)
+	};
+	
+	return {
+		handleClick,
+		handleGetPhoneNumber,
+		handleGetUserInfo,
+		handleError,
+		handleOpenSetting,
+		handleLaunchApp,
+		handleContact,
+		handleChooseavatar,
+		handleAgreeprivacyauthorization,
+		handleAddgroupapp,
+		handleChooseaddress,
+		handleChooseinvoicetitle,
+		handleSubscribe,
+		handleLogin,
+		handleIm
+	}
+}

package/components/cell/index.ts

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