fusions-ui 1.2.7 → 1.2.8

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

@@ -2,23 +2,21 @@
 	<text
 		class="fu-badge"
 		:class="[isDot ? 'fu-badge--dot' : 'fu-badge--not-dot', inverted && 'fu-badge--inverted', shape === 'horn' && 'fu-badge--horn', `fu-badge--${propsType}${inverted ? '--inverted' : ''}`]"
-		:style="[$fu.addStyle(customStyle), badgeStyle]"
+		:style="[badgeStyle, $fu.addStyle(customStyle)]"
 		v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)">
 		{{ isDot? '': showValue }}
 	</text>
 </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>
 	/**
 	 * badge 徽标数
 	 * @description 此组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
+	 * @tutorial http://www.fusions.top/components/badge.html
 	 * @property {Boolean} show = [true|false] 是否显示 （默认 true ）
 	 * @property {Boolean} isDot = [true|false] 是否显示圆点 （默认 false ）
-	 * @property {String,Number} value 显示的内容
-	 * @property {String,Number} max 最大值，超过最大值会显示 '{max}+'  （默认999）
+	 * @property {String | Number} value 显示的内容
+	 * @property {String | Number} max 最大值，超过最大值会显示 '{max}+'  （默认999）
 	 * @property {String} type 主题类型，error|warning|success|primary （默认 'error' ）
 	 * 	@value primary 主色
 	 * 	@value error 错误
@@ -38,66 +36,32 @@
 	 * @property {Array} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
 	 * @property {Boolean} inverted = [true|false] 是否反转背景和字体颜色（默认 false ）
 	 * @property {Boolean} absolute = [true|false] 是否绝对定位（默认 false ）
-	 * @property {String,Object} customStyle 定义需要用到的外部样式
+	 * @property {String | Object} customStyle 定义需要用到的外部样式
 	 * 
 	 * @example <fu-badge :type="type" :count="count"></fu-badge>
 	 */
-	export default {
-		name: 'fu-badge',
-		mixins: [mpMixin, mixin, props],
-		computed: {
-			badgeStyle() {
-				const style = {}
-				if(this.color) {
-					style.color = this.color;
-				}
-				if (this.bgColor && !this.inverted) {
-					style.backgroundColor = this.bgColor;
-				}
-				if (this.absolute) {
-					style.position = 'absolute';
-					// 如果有设置offset参数
-					if(this.offset.length) {
-						// top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top
-						const top = this.offset[0];
-						const right = this.offset[1] || top;
-						style.top = this.$fu.addUnit(top)
-						style.right = this.$fu.addUnit(right)
-					}
-				}
-				return style
-			},
-			showValue() {
-				switch (this.numberType) {
-					case "overflow":
-						return Number(this.value) > Number(this.max) ? this.max + "+" : this.value
-						break;
-					case "ellipsis":
-						return Number(this.value) > Number(this.max) ? "..." : this.value
-						break;
-					case "limit":
-						return Number(this.value) > 999 ? Number(this.value) >= 9999 ?
-							Math.floor(this.value / 1e4 * 100) / 100 + "w" : Math.floor(this.value / 1e3 * 100) / 100 + "k" : this.value
-						break;
-					default:
-						return Number(this.value)
-				}
-			},
-			propsType(){
-				return this.type || 'error'
-			}
-		}
-	}
+	import { badgeProps } from './badge';
+	import { useBadgeCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuBadge', options: {  } });
+	
+	const props = defineProps(badgeProps);
+	
+	const {
+		badgeStyle,
+		showValue,
+		propsType
+	} = useBadgeCustomStyle(props);
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	@import '../../libs/style/color.scss';
-	$fu-badge-primary: $fu-primary !default;
-	$fu-badge-error: $fu-error !default;
-	$fu-badge-success: $fu-success !default;
-	$fu-badge-info: $fu-info !default;
-	$fu-badge-warning: $fu-warning !default;
+	@use '../../../style/components.scss';
+	@use '../../../style/color.scss' as *;
+	$fu-badge-primary: $fu-color-primary !default;
+	$fu-badge-error: $fu-color-error !default;
+	$fu-badge-success: $fu-color-success !default;
+	$fu-badge-info: $fu-color-info !default;
+	$fu-badge-warning: $fu-color-warning !default;
 	$fu-badge-dot-radius: 100px !default;
 	$fu-badge-dot-size: 8px !default;
 	$fu-badge-dot-right: 4px !default;
@@ -114,7 +78,7 @@
 		border-top-left-radius: $fu-badge-dot-radius;
 		border-bottom-left-radius: $fu-badge-dot-radius;
 		border-bottom-right-radius: $fu-badge-dot-radius;
-		@include flex;
+		@include components.flex;
 		line-height: $fu-badge-text-font-size;
 		text-align: $fu-badge-text-align;
 		font-size: $fu-badge-text-font-size;

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

@@ -0,0 +1,51 @@
+import { computed } from 'vue';
+import type { BadgeProps } from '../badge';
+
+export const useBadgeCustomStyle = (props: BadgeProps) => {
+	const badgeStyle = computed(() => {
+		const style: Record<string, any> = {};
+		if(props.color) {
+			style.color = props.color;
+		}
+		if (props.bgColor && !props.inverted) {
+			style.backgroundColor = props.bgColor;
+		}
+		if (props.absolute) {
+			style.position = 'absolute';
+			// 如果有设置offset参数
+			if(props.offset.length) {
+				// top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top
+				const top = props.offset[0];
+				const right = props.offset[1] || top;
+				style.top = uni.$fu.addUnit(top)
+				style.right = uni.$fu.addUnit(right)
+			}
+		}
+		
+		return style
+	});
+	
+	const showValue = computed(() => {
+		const newVal = Number(props.value);
+		switch (props.numberType) {
+			case "overflow":
+				return newVal > Number(props.max) ? props.max + "+" : props.value
+			case "ellipsis":
+				return newVal > Number(props.max) ? "..." : props.value
+			case "limit":
+				return newVal > 999? newVal >= 9999? Math.floor(newVal / 1e4 * 100) / 100 + "w" : Math.floor(newVal / 1e3 * 100) / 100 + "k" : newVal
+			default:
+				return newVal
+		}
+	});
+	
+	const propsType = computed(() => {
+		return props.type || 'error'
+	});
+	
+	return {
+		badgeStyle,
+		showValue,
+		propsType
+	}
+}

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

@@ -0,0 +1 @@
+export * from './badge-custom'

package/components/banner-arc/index.ts

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

package/components/banner-arc/src/banner-arc.ts

@@ -0,0 +1,41 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const bannerArcProps = {
+	/**
+	 * @description 设置背景颜色
+	 * @default '-webkit-linear-gradient(top, rgb(84, 115, 255), rgb(109, 168, 255))'
+	 * @example <fu-banner-arc bgColor="red"></fu-banner-arc>
+	 */
+	bgColor: {
+		type: String,
+		default: '-webkit-linear-gradient(top, rgb(84, 115, 255), rgb(109, 168, 255))'
+	},
+	/**
+	 * @description percent 圆弧元素宽度占banner宽度的百分比，用于调整弧度，最低值120  默认120
+	 * @default 120
+	 * @example <fu-banner-arc percent="130"></fu-banner-arc>
+	 */
+	percent: {
+		type: [String, Number],
+		default: 120
+	},
+	/**
+	 * @description 设置高度
+	 * @default 200
+	 * @example <fu-banner-arc height="100"></fu-banner-arc>
+	 */
+	height: {
+		type: [String, Number],
+		default: 200
+	},
+	/**
+	 * @description 设置层级
+	 * @example <fu-banner-arc zIndex="99"></fu-banner-arc>
+	 */
+	zIndex: {
+		type: [String, Number],
+		default: 0
+	}
+};
+
+export type BannerArcProps = ExtractPropTypes<typeof bannerArcProps>;

package/components/banner-arc/src/banner-arc.vue

@@ -0,0 +1,49 @@
+<template>
+	<view class="fu-banner-arc" :style="{height: $fu.addUnit(height)}">
+		<view class="fu-banner-arc--box" :style="[itemStyle]">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * BannerArc组件
+	 * @description 此组件底部圆弧效果
+	 * @tutorial http://www.fusions.top/components/bannerArc.html
+	 * @property {String} bgColor 自定义背景色
+	 * @property {String | Number} percent 圆弧元素宽度占banner宽度的百分比，用于调整弧度，最低值120  默认120
+	 * @property {String | Number} height  自定义高度（默认150）
+	 * @property {String | Number} zIndex  自定义层级（默认0）
+	 * 
+	 * @template <fu-banner-arc bgColor="red"></fu-banner-arc>
+	 */
+	import { bannerArcProps } from './banner-arc';
+	import { useBannerArcCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuBannerArc', options: { virtualHost: true } });
+	
+	const props = defineProps(bannerArcProps);
+	
+	const {
+		itemStyle
+	} = useBannerArcCustomStyle(props);
+</script>
+
+<style lang="scss" scoped>
+	.fu-banner-arc {
+		position: relative;
+		
+		&--box {
+			padding-left: 10%;
+			padding-right: 10%;
+			box-sizing: border-box;
+			position: absolute;
+			top: 0;
+			border-radius: 0 0 50% 50%;
+			/* #ifndef APP-NVUE */
+			overflow: hidden;
+			/* #endif */
+		}
+	}
+</style>

package/components/banner-arc/src/composables/banner-arc-custom.ts

@@ -0,0 +1,19 @@
+import { computed, type CSSProperties } from 'vue';
+import type { BannerArcProps } from '../banner-arc';
+
+export const useBannerArcCustomStyle = (props: BannerArcProps) => {
+	const itemStyle = computed<CSSProperties>(() => {
+		const { bgColor, height, zIndex, percent } = props;
+		return {
+			background: bgColor,
+			height: uni.$fu.addUnit(height),
+			zIndex: zIndex,
+			width: `${Number(percent) < 120? 120: percent}%`,
+			left: `${(100 - Number(percent)) / 2}%`,
+		}
+	})
+	
+	return {
+		itemStyle
+	}
+}

package/components/banner-arc/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './banner-arc-custom'

package/components/button/index.ts

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

package/components/button/src/button.ts

@@ -0,0 +1,332 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps, componentTypes, componentShapes, componentOpenTypes } from '../../../constants';
+
+/**
+ * 按钮 size 有效值
+ */
+export const buttonSizes = ['large', 'normal', 'small', 'mini'] as const;
+
+/**
+ * 按钮 scene 有效值
+ */
+export const buttonScenes = ['debounce', 'throttle'] as const;
+
+export const buttonProps = {
+	/**
+	 * @description 按钮索引，用于区分多个按钮
+	 */
+	index: {
+		type: [Number, String],
+		default: 0
+	},
+	/**
+	 * @description 按钮的预置样式
+	 * @values 'primary' - 主色, 'error' - 错误, 'success' - 成功, 'warning' - 警告, 'info' - 信息
+	 * @default 'primary'
+	 */
+	type: {
+		type: String,
+		values: componentTypes,
+		default: 'primary'
+	},
+	/**
+	 * @description 按钮文字，之所以通过props传入，是因为slot传入的话
+	 * nvue中无法控制文字的样式
+	 */
+	text: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 按钮形状
+	 * @values 'square' - 带圆角, 'circle' - 两边为半圆
+	 * @default 'square'
+	 */
+	shape: {
+		type: String,
+		values: componentShapes,
+		default: 'square'
+	},
+	/**
+	 * @description 按钮宽度
+	 */
+	width: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 按钮高度
+	 */
+	height: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 按钮的尺寸
+	 * @values 'large' - 16px, 'normal' - 14px, 'small' - 12px, 'mini' - 10px
+	 * @default 'normal'
+	 * @example <fu-button></fu-button>
+	 */
+	size: {
+		type: String,
+		values: buttonSizes,
+		default: 'normal'
+	},
+	/**
+	 * @description 外边距 与css的margin参数用法相同
+	 */
+	margin: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 是否镂空
+	 * @default false
+	 */
+	plain: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否禁用
+	 * @default false
+	 */
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否显示加载图标
+	 * @default false
+	 */
+	loading: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 加载中提示文字
+	 */
+	loadingText: {
+		type: [String],
+		default: ''
+	},
+	/**
+	 * @description 加载状态图标类型
+	 * @default 'flower'
+	 */
+	loadingMode: {
+		type: String,
+		default: 'flower'
+	},
+	/**
+	 * @description 加载图标大小
+	 * @default 14
+	 */
+	loadingSize: {
+		type: [String, Number],
+		default: 14
+	},
+	/**
+	 * @description 触发form表单的事件类型
+	 */
+	formType: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 开放能力，具体请看uniapp稳定关于button组件部分说明
+	 * https://uniapp.dcloud.io/component/button
+	 */
+	openType: {
+		type: String,
+		values: componentOpenTypes,
+		default: ''
+	},
+	/**
+	 * @description 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
+	 */
+	hoverStopPropagation: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 会话来源，open-type="contact"时有效。只微信小程序有效
+	 */
+	sessionFrom: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 会话内消息卡片标题，open-type="contact"时有效
+	 * 默认当前标题，只微信小程序有效
+	 */
+	sendMessageTitle: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
+	 * 默认当前分享路径，只微信小程序有效
+	 */
+	sendMessagePath: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 会话内消息卡片图片，open-type="contact"时有效
+	 * 默认当前页面截图，只微信小程序有效
+	 */
+	sendMessageImg: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
+	 * 用户点击后可以快速发送小程序消息，open-type="contact"时有效
+	 */
+	showMessageCard: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 场景：none：不开启防抖节流模式
+	 * @values debounce - 防抖模式, throttle - 节流模式
+	 * @default 'throttle'
+	 */
+	scene:{
+		type: String,
+		values: buttonScenes,
+		default: 'throttle'
+	},
+	/**
+	 * @description 防抖节流间隔时间（毫秒）
+	 * @default 300
+	 */
+	sceneTime:{
+		type: Number,
+		default: 300
+	},
+	/**
+	 * @description 按住后多久出现点击态，单位毫秒
+	 */
+	hoverStartTime: {
+		type: [String, Number],
+		default: 0
+	},
+	/**
+	 * @description 手指松开后点击态保留时间，单位毫秒
+	 * @default 200
+	 */
+	hoverStayTime: {
+		type: [String, Number],
+		default: 200
+	},
+	/**
+	 * @description 按钮颜色，支持传入linear-gradient渐变色
+	 */
+	color: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
+	 * @default 'en'
+	 */
+	lang: {
+		type: String,
+		default: 'en'
+	},
+	/**
+	 * @description 自定义按钮文本样式
+	 */
+	customTextStyle: {
+		type: [Object, String],
+		default: ''
+	},
+	appParameter: String,
+	...componentProps
+}
+
+export const buttonEmits = {
+	/**
+	 * @description 非禁止并且非加载中，才能点击
+	 */
+	click: (_e: any) => true,
+	/**
+	 * @description 非禁止并且非加载中，才能点击
+	 */
+	tap: (_e: any) => 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
+	chooseinvoicetitle: (_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 ButtonProps = ExtractPropTypes<typeof buttonProps>;
+export type ButtonEmits = typeof buttonEmits;