fusions-ui 1.2.7 → 1.2.8

package/components/keyboard/src/keyboard.ts

@@ -0,0 +1,174 @@
+import type { ExtractPropTypes } from 'vue';
+import { ZIndex } from '../../../constants';
+
+/**
+ * 键盘 mode 有效值
+ */
+export const keyboardModes = ['number', 'card', 'car'] as const;
+
+export const keyboardProps = {
+	/**
+	 * @description 键盘的类型
+	 * @values 'number' - 数字键盘, 'card' - 身份证键盘, 'car' - 车牌号键盘
+	 */
+	mode: {
+		type: String,
+		values: keyboardModes,
+		default: 'number'
+	},
+	/**
+	 * @description 是否显示键盘的"."符号
+	 * @default false
+	 */
+	dotDisabled: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否显示顶部工具条
+	 * @default true
+	 */
+	tooltip: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 是否显示工具条中间的提示
+	 * @default true
+	 */
+	showTips: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 工具条中间的提示文字
+	 */
+	tips: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 是否显示工具条左边的"取消"按钮
+	 * @default true
+	 */
+	showCancel: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 是否显示工具条右边的"完成"按钮
+	 * @default true
+	 */
+	showConfirm: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 是否打乱键盘按键的顺序
+	 * @default false
+	 */
+	random: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+	 * @default true
+	 */
+	safeArea: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 是否允许通过点击遮罩关闭键盘
+	 * @default true
+	 */
+	isMaskClick: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 是否允许点击确认按钮关闭组件
+	 * @default true
+	 */
+	closeOnClickConfirm: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 层级
+	 */
+	zIndex: {
+		type: [String, Number],
+		default: ZIndex.keyboard
+	},
+	/**
+	 * @description 取消按钮的文字
+	 * @default '取消'
+	 */
+	cancelText: {
+		type: String,
+		default: '取消'
+	},
+	/**
+	 * @description 确认按钮的文字
+	 * @default '确定'
+	 */
+	confirmText: {
+		type: String,
+		default: '确定'
+	},
+	/**
+	 * @description 输入一个中文后，是否自动切换到英文
+	 * @default false
+	 */
+	autoChange: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 被禁用的键
+	 */
+	disKeys: {
+		type: Array,
+		default: () => []
+	},
+	/**
+	 * @description 是否自定义abc
+	 * @default false
+	 */
+	customabc: {
+		type: Boolean,
+		default: false
+	}
+};
+
+export const keyboardEmits = {
+	/**
+	 * @description 键盘关闭时触发
+	 */
+	close: () => true,
+	/**
+	 * @description 按键被点击(不包含退格键被点击)
+	 */
+	change: (_e: any) => true,
+	/**
+	 * @description 键盘顶部工具条右边的"完成"按钮被点击
+	 */
+	confirm: () => true,
+	/**
+	 * @description 键盘顶部工具条左边的"取消"按钮被点击
+	 */
+	cancel: () => true,
+	/**
+	 * @description 键盘退格键被点击
+	 */
+	backspace: () => true,
+	/**
+	 * @description car模式切换中英文时触发
+	 */
+	changeCarInputMode: (_e: any) => true
+};
+
+export type KeyboardProps = ExtractPropTypes<typeof keyboardProps>;
+export type KeyboardEmits = typeof keyboardEmits;

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

@@ -1,5 +1,5 @@
 <template>
-	<fu-popup ref="popup" mode="bottom" :isMaskClick="isMaskClick" :safeArea="safeArea" :zIndex="zIndex">
+	<fu-popup ref="popupRef" mode="bottom" :isMaskClick="isMaskClick" :safeArea="safeArea" :zIndex="zIndex">
 		<view class="fu-keyboard">
 			<slot />
 			<view class="fu-keyboard__tooltip" v-if="tooltip">
@@ -17,7 +17,7 @@
 				<keyboard-number :random="random" @backspace="backspace" @change="change" :mode="mode" :dotDisabled="dotDisabled"></keyboard-number>
 			</template>
 			<template v-else>
-				<keyboard-car ref="fuKeyboardCarRef" :random="random" :autoChange="autoChange" :disKeys="disKeys" :customabc="customabc" @backspace="backspace" @change="change" @changeCarInputMode="changeCarInputMode">
+				<keyboard-car ref="keyboardCarRef" :random="random" :autoChange="autoChange" :disKeys="disKeys" :customabc="customabc" @backspace="backspace" @change="change" @changeCarInputMode="changeCarInputMode">
 					<slot name="abc"></slot>
 				</keyboard-car>
 			</template>
@@ -25,14 +25,11 @@
 	</fu-popup>
 </template>
 
-<script>
-	import KeyboardCar from './keyboard-car.vue'
-	import KeyboardNumber from './keyboard-number.vue'
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import props from './props.js';
+<script lang="ts" setup>
 	/**
 	 * keyboard 键盘
 	 * @description 此组件键盘面板，内含了数字键盘，车牌号键，身份证号键盘3中模式，都有可以打乱按键顺序的选项。
+	 * @tutorial http://www.fusions.top/components/keyboard.html
 	 * @property {String} mode = [number|card|car] 键盘类型（默认 'number' ）
 	 * 	@value number 数字键盘
 	 * 	@value card 身份证键盘
@@ -46,7 +43,7 @@
 	 * @property {Boolean} random = [true|false] 是否打乱键盘按键的顺序 （默认 false ）
 	 * @property {Boolean} safeArea = [true|false] 是否开启底部安全区适配 （默认 true ）
 	 * @property {Boolean} isMaskClick = [true|false]	是否允许点击遮罩收起键盘 （默认 true ）
-	 * @property {String,Number} zIndex 弹出键盘的z-index值 （默认 1025 ）
+	 * @property {String | Number} zIndex 弹出键盘的z-index值 （默认 1025 ）
 	 * @property {String} cancelText 取消按钮的文字 （默认 '取消'）
 	 * @property {String} confirmText 确认按钮的文字 （默认 '确定'）
 	 * 
@@ -56,68 +53,46 @@
 	 * @event {Function} backspace 键盘退格键被点击
 	 * @example <fu-keyboard ref="keyboardRef" mode="number"></fu-keyboard>
 	 */
-	export default {
-		name: "FuKeyboard",
-		mixins: [mpMixin, props],
-		emits: ['close','change','confirm','cancel','backspace','changeCarInputMode'],
-		components: {
-			KeyboardCar,
-			KeyboardNumber
-		},
-		methods: {
-			// 打开
-			open() {
-				this.$refs.popup.open();
-			},
-			
-			// 关闭
-			close() {
-				this.$refs.popup.close();
-				this.$emit('close')
-			},
-			
-			change(e) {
-				this.$emit('change', e);
-			},
-			
-			// 输入完成
-			handleConfirm() {
-				this.$emit('confirm');
-				if(this.closeOnClickConfirm) this.close();
-			},
-			
-			// 取消输入
-			handleCancel() {
-				this.$emit('cancel');
-				this.close();
-			},
-			
-			// 退格键
-			backspace() {
-				this.$emit('backspace');
-			},
-			
-			// car模式切换中文|英文方法
-			changeCarInputMode(e) {
-				this.$emit('changeCarInputMode',e);
-			},
-			
-			changeCarMode() {
-				this.$refs.fuKeyboardCarRef && this.$refs.fuKeyboardCarRef.changeCarInputMode();
-			}
-		}
-	}
+	import KeyboardCar from './keyboard-car.vue'
+	import KeyboardNumber from './keyboard-number.vue'
+	import { keyboardProps, keyboardEmits } from './keyboard';
+	import { useKeyboard } from './composables';
+	
+	defineOptions({ name: 'FuKeyboard', options: { virtualHost: true } });
+	
+	const props = defineProps(keyboardProps);
+	const $emit = defineEmits(keyboardEmits);
+	
+	const {
+		popupRef,
+		keyboardCarRef,
+		open,
+		close,
+		change,
+		handleConfirm,
+		handleCancel,
+		backspace,
+		changeCarInputMode,
+		changeCarMode
+	} = useKeyboard(props, $emit);
+	
+	// 暴露方法给父组件
+	defineExpose({
+		open,
+		close,
+		changeCarMode
+	});
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	@import '../../libs/style/color.scss';
+	@use '../../../style/components.scss';
+	@use '../../../style/color.scss' as *;
 	$show-hover: 1;
 	
 	.fu-keyboard {
 
 		&__tooltip {
-			@include flex(row);
+			@include components.flex(row);
 			justify-content: space-between;
 			background-color: #FFFFFF;
 			padding: 14px 12px;
@@ -131,7 +106,7 @@
 
 			&__submit {
 				text-align: right;
-				color: $fu-primary;
+				color: $fu-color-primary;
 			}
 
 			&__cancel {

package/components/line/index.ts

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

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

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

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

@@ -0,0 +1,30 @@
+import { computed, type CSSProperties } from 'vue';
+import type { LineProps } from '../line';
+
+export const useLineCustomStyle = (props: LineProps) => {
+	const lineStyle = computed<CSSProperties>(() => {
+		const style: Record<string, any> = {
+			margin: uni.$fu.addUnit(props.margin),
+			borderColor: props.color
+		};
+		// 如果是水平线条，边框高度为1px，再通过transform缩小一半，就是0.5px了
+		if (props.direction === 'row') {
+			// 此处采用兼容分开写，兼容nvue的写法
+			style.borderBottomWidth = uni.$fu.addUnit(props.borderWidth) || '1px';
+			style.borderBottomStyle = props.borderStyle || 'solid';
+			style.width = uni.$fu.addUnit(props.length);
+			if (props.hairline) style.transform = 'scaleY(0.5)'
+		} else {
+			// 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
+			style.borderLeftWidth = uni.$fu.addUnit(props.borderWidth) || '1px';
+			style.borderLeftStyle = props.borderStyle || 'solid';
+			style.height = uni.$fu.addUnit(props.length);
+			if (props.hairline) style.transform = 'scaleX(0.5)'
+		}
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(props.customStyle))
+	});
+	
+	return {
+		lineStyle
+	}
+}

package/components/line/src/line.ts

@@ -0,0 +1,82 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from "../../../constants";
+
+/**
+ * 线条direction有效值
+ */
+export const lineDirections = ['col', 'row'] as const;
+
+/**
+ * 线条borderStyle有效值
+ */
+export const lineBorderStyles = ['solid', 'dashed', 'dotted'] as const;
+
+export const lineProps = {
+	/**
+	 * @description 线条的颜色
+	 * @default '#d8d9da'
+	 * @example <fu-line color="red"></fu-line>
+	 */
+	color: {
+		type: String,
+		default: '#d8d9da'
+	},
+	/**
+	 * @description 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等
+	 * @example <fu-line length="100px"></fu-line>
+	 */
+	length: {
+		type: [String, Number],
+		default: '100%'
+	},
+	/**
+	 * @description 线条方向
+	 * @values 'col' - 竖向, 'row' - 横向
+	 * @default 'row'
+	 * @example <fu-line direction="col"></fu-line>
+	 */
+	direction: {
+		type: String,
+		values: lineDirections,
+		default: 'row'
+	},
+	/**
+	 * @description 是否显示细边框
+	 * @default true
+	 * @example <fu-line :hairline="false"></fu-line>
+	 */
+	hairline: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 线条与上下左右元素的间距，字符串形式，如"30px"、"20px 30px"
+	 * @example <fu-line margin="30rpx 20rpx"></fu-line>
+	 */
+	margin: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 设置线条类型
+	 * @values 'solid' - 实线, 'dashed' - 方形虚线, 'dotted' - 圆点虚线
+	 * @default 'solid'
+	 * @example <fu-line borderStyle="dashed"></fu-line>
+	 */
+	borderStyle: {
+		type: String,
+		values: lineBorderStyles,
+		default: 'solid'
+	},
+	/**
+	 * @description 设置线条宽度
+	 * @example <fu-line borderWidth="2px"></fu-line>
+	 */
+	borderWidth: {
+		type: [String, Number],
+		default: ''
+	},
+	...componentProps
+};
+
+export type LineProps = ExtractPropTypes<typeof lineProps>

package/components/line/src/line.vue

@@ -0,0 +1,44 @@
+<template>
+	<view class="fu-line" :class="[customClass]" :style="[lineStyle]"></view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * line 线条
+	 * @description 此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单
+	 * @tutorial http://www.fusions.top/components/line.html
+	 * @property {String} color 线条的颜色 (默认 '#d8d9da')
+	 * @property {String | Number} length 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等 (默认 '100%')
+	 * @property {String} direction = [row|col]	线条的方向，row 横向，col 竖向 (默认 'row')
+	 * 	@value row 横向
+	 * 	@value col 竖向
+	 * @property {Boolean} hairline = [true|false] 是否显示细线条 (默认 true)
+	 * @property {String | Number} margin 线条与上下左右元素的间距，字符串形式，如"30px"  (默认 0)
+	 * @property {String} borderStyle = [solid|dashed|dotted] 设置线条类型 (默认 solid)
+	 * 	@value solid 实线
+	 * 	@value dashed 方形虚线
+	 * 	@value dotted 圆点虚线
+	 * @property {String | Number} borderWidth 设置线条宽度（默认 1px）
+	 * @property {String} customClass 定义需要用到的外部类
+	 * @property {String | Object} customStyle 定义需要用到的外部样式
+	 * 
+	 * @example <fu-line color="red"></fu-line>
+	 */
+	import { lineProps } from './line';
+	import { useLineCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuLine', options: { virtualHost: true } });
+	
+	const props = defineProps(lineProps);
+	const {
+		lineStyle
+	} = useLineCustomStyle(props);
+</script>
+
+<style lang="scss" scoped>
+	.fu-line {
+		/* #ifndef APP-NVUE */
+		vertical-align: middle;
+		/* #endif */
+	}
+</style>

package/components/link/index.ts

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

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

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

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

@@ -0,0 +1,19 @@
+import { computed, type CSSProperties } from 'vue';
+import type { LinkProps } from '../link';
+
+export const useLinkCustomStyle = (props: LinkProps) => {
+	const linkStyle = computed<CSSProperties>(() => {
+		const style = {
+			color: props.color,
+			fontSize: uni.$fu.addUnit(props.size),
+			// line-height设置为比字体大小多2px
+			lineHeight: uni.$fu.addUnit(uni.$fu.getPx(props.size) + 2),
+			textDecoration: props.underLine ? 'underline' : 'none'
+		}
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(props.customStyle))
+	});
+	
+	return {
+		linkStyle
+	}
+}

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

@@ -0,0 +1,33 @@
+import { SetupContext, nextTick } from 'vue';
+import type { LinkProps, LinkEmits } from '../link';
+
+export const useLink = (props: LinkProps, $emit: SetupContext<LinkEmits>['emit']) => {
+	const handleClick = (e: any) => {
+		// #ifdef APP-PLUS
+		plus.runtime.openURL(props.href)
+		// #endif
+		// #ifdef H5
+		window.open(props.href)
+		// #endif
+		// #ifdef MP
+		uni.setClipboardData({
+			data: props.href,
+			success: () => {
+				uni.hideToast();
+				nextTick(() => {
+					uni.showToast({
+						title: props.mpTips,
+						icon: 'none',
+						mask: true,
+					})
+				})
+			}
+		});
+		// #endif
+		$emit('click', e)
+	}
+	
+	return {
+		handleClick
+	}
+}

package/components/link/src/link.ts

@@ -0,0 +1,61 @@
+import type { ExtractPropTypes } from "vue";
+import { componentProps } from "../../../constants";
+
+export const linkProps = {
+	/**
+	 * @description 文字颜色
+	 */
+	color: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 字体大小
+	 * @default 15
+	 */
+	size: {
+		type: [String, Number],
+		default: 15
+	},
+	/**
+	 * @description 是否显示下划线
+	 * @default false
+	 */
+	underLine: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 要跳转的链接
+	 */
+	href: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 小程序中复制到粘贴板的提示语
+	 * @default '链接已复制，请在浏览器打开'
+	 */
+	mpTips: {
+		type: String,
+		default: '链接已复制，请在浏览器打开'
+	},
+	/**
+	 * @description 超链接的问题，不使用slot形式传入，是因为nvue下无法修改颜色
+	 */
+	text: {
+		type: String,
+		default: ''
+	},
+	...componentProps
+}
+
+export const linkEmits = {
+	/**
+	 * 超链接点击事件
+	 */
+	click: (_e: any) => true
+}
+
+export type LinkProps = ExtractPropTypes<typeof linkProps>;
+export type LinkEmits = typeof linkEmits;

package/components/link/src/link.vue

@@ -0,0 +1,62 @@
+<template>
+	<text 
+		class="fu-link" 
+		:class="[customClass]"
+		:style="[linkStyle]" 
+		@tap.stop="handleClick">
+		<slot>
+			{{ text }}
+		</slot>
+	</text>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Link 超链接
+	 * @description 此组件为超链接组件，在不同平台有不同表现形式：在APP平台会通过plus环境打开内置浏览器，在小程序中把链接复制到粘贴板，同时提示信息，在H5中通过window.open打开链接。
+	 * @tutorial http://www.fusions.top/components/link.html
+	 * @property {String} color 文字颜色
+	 * @property {String | Number} size 字体大小（默认 15）
+	 * @property {Boolean} underLine = [true|false] 是否显示下划线 （默认 false）
+	 * @property {String} href 跳转的链接，要带上http(s)
+	 * @property {String} mpTips 各个小程序平台把链接复制到粘贴板后的提示语（默认“链接已复制，请在浏览器打开”）
+	 * @property {String} text 超链接的问题，不使用slot形式传入，是因为nvue下无法修改颜色 
+	 * @property {String} customClass 定义需要用到的外部类
+	 * @property {String | Object} customStyle 定义需要用到的外部样式
+	 * 
+	 * @event {Function} click 点击链接触发
+	 * @example <fu-link text="不同平台有不同表现形式" href="http://www.fusions.top"></fu-link>
+	 */
+	import { computed } from 'vue';
+	import { linkEmits, linkProps } from './link';
+	import { useLink, useLinkCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuLink', options: { virtualHost: true } });
+	
+	const props = defineProps(linkProps);
+	const $emit = defineEmits(linkEmits);
+	
+	const {
+		handleClick
+	} = useLink(props, $emit);
+	
+	const {
+		linkStyle
+	} = useLinkCustomStyle(props);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	@use '../../../style/color.scss' as *;
+	$fu-link-line-height:1 !default;
+	
+	.fu-link {
+		/* #ifndef APP-NVUE */
+		line-height: $fu-link-line-height;
+		/* #endif */
+		@include components.flex;
+		flex: 1;
+		flex-wrap: wrap;
+		color: $fu-color-primary;
+	}
+</style>

package/components/loading/index.ts

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