fusions-ui 1.2.6 → 1.2.8

package/components/modal/src/modal.ts

@@ -0,0 +1,152 @@
+import type { ExtractPropTypes } from 'vue';
+import { ZIndex } from '../../../constants';
+
+/**
+ * 模态框 align 有效值
+ */
+export const modalAligns = ['left', 'center', 'right'] as const;
+
+export const modalProps = {
+	/**
+	 * @description 标题
+	 */
+	title: {
+		type: [String],
+		default: ''
+	},
+	/**
+	 * @description 弹窗内容
+	 */
+	content: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 确认文案
+	 * @default '确认'
+	 */
+	confirmText: {
+		type: String,
+		default: '确认'
+	},
+	/**
+	 * @description 取消文案
+	 * @default '取消'
+	 */
+	cancelText: {
+		type: String,
+		default: '取消'
+	},
+	/**
+	 * @description 是否显示确认按钮
+	 * @default true
+	 */
+	showConfirmButton: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 是否显示取消按钮
+	 * @default true
+	 */
+	showCancelButton: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 确认按钮颜色
+	 */
+	confirmColor: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 取消文字颜色
+	 * @default '#999999'
+	 */
+	cancelColor: {
+		type: String,
+		default: '#999999'
+	},
+	/**
+	 * @description 对调确认和取消的位置
+	 * @default false
+	 */
+	buttonReverse: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 层级
+	 */
+	zIndex: {
+		type: [String, Number],
+		default: ZIndex.modal
+	},
+	/**
+	 * @description 是否异步关闭，只对确定按钮有效
+	 * @default false
+	 */
+	asyncClose: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否允许点击遮罩关闭modal
+	 * @default true
+	 */
+	isMaskClick: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 给一个负的margin-top，往上偏移，避免和键盘重合的情况
+	 */
+	negativeTop: {
+		type: [String, Number],
+		default: 0
+	},
+	/**
+	 * @description modal宽度，不支持百分比，可以数值，px，rpx单位
+	 * @default '650rpx'
+	 */
+	width: {
+		type: [String, Number],
+		default: '650rpx'
+	},
+	/**
+	 * @description 文本对齐方式
+	 * @values 'left' - 左对齐, 'center' - 居中, 'right' - 右对齐
+	 * @default 'left'
+	 */
+	align: {
+		type: String,
+		values: modalAligns,
+		default: 'left'
+	},
+	/**
+	 * @description 文本自定义样式
+	 */
+	textStyle: {
+		type: [Object, String],
+		default: ''
+	}
+};
+
+export const modalEmits = {
+	/**
+	 * @description 点击确认按钮时触发回调
+	 */
+	close: () => true,
+	/**
+	 * @description 点击取消按钮时触发回调
+	 */
+	cancel: () => true,
+	/**
+	 * @description 点击遮罩关闭触发回调（仅isMaskClick为true有效）
+	 */
+	confirm: () => true
+};
+
+export type ModalProps = ExtractPropTypes<typeof modalProps>;
+export type ModalEmits = typeof modalEmits;

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

@@ -45,13 +45,11 @@
 	</fu-popup>
 </template>
 
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js';
+<script setup>
 	/**
 	 * Modal 模态框
 	 * @description 此组件弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
+	 * @tutorial http://www.fusions.top/components/modal.html
 	 * @property {String} title 标题内容
 	 * @property {String} content 模态框内容，如传入slot内容，则此参数无效
 	 * @property {String} confirmText 确认按钮的文字 （默认 '确认' ）
@@ -63,84 +61,58 @@
 	 * @property {Boolean} buttonReverse = [true|false] 对调确认和取消的位置 （默认 false ）
 	 * @property {Boolean} asyncClose = [true|false] 是否异步关闭，只对确定按钮有效，见上方说明 （默认 false ）
 	 * @property {Boolean} isMaskClick = [true|false] 是否允许点击遮罩关闭该组件 （默认 true ）
-	 * @property {String,Number} negativeTop 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 （默认 0 ）
-	 * @property {String,Number} width modal宽度，不支持百分比，可以数值，px，rpx单位 （默认 '650rpx' ）
+	 * @property {String|Number} negativeTop 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 （默认 0 ）
+	 * @property {String|Number} width modal宽度，不支持百分比，可以数值，px，rpx单位 （默认 '650rpx' ）
 	 * @property {String} align = [left|center|right] 文本对齐方式 （默认'left'） 
 	 * 	@value left 左对齐
 	 * 	@value center 居中
 	 * 	@value right 右对齐
-	 * @property {String,Object} textStyle 文本扩展样式
+	 * @property {String|Object} textStyle 文本扩展样式
 	 * 
 	 * @event {Function} confirm 点击确认按钮时触发
 	 * @event {Function} cancel 点击取消按钮时触发
-	 * @event {Function} close 点击遮罩关闭出发，isMaskClick为true有效
+	 * @event {Function} close 点击遮罩关闭触发（仅isMaskClick为true有效）
 	 * @example <fu-modal ref="modalRef" title="title" content="content"></fu-modal>
 	 */
-	export default {
-		name: 'FuModal',
-		emits: ['confirm', 'cancel', 'close'],
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {
-				loading: false
-			}
-		},
-		computed: {
-			nvueStyle() {
-				const style = {};
-				// 避免nvue中不能换行的问题
-				// #ifdef APP-NVUE
-				style.width = this.$fu.addUnit(this.$fu.getPx(this.width) - 50, 'px');
-				// #endif
-				return style;
-			}
-		},
-		methods: {
-			open() {
-				this.$refs.popupRef.open();
-				if (this.loading) this.loading = false;
-			},
-			close() {
-				this.$refs.popupRef.close();
-			},
-			popupChange(e) {
-				if (!e.show) this.$emit('close');
-			},
-			// 点击确定按钮
-			confirmHandler() {
-				if (!this.loading) {
-					this.$emit('confirm');
-				}
-				// 如果配置了异步关闭，将按钮值为loading状态
-				if (this.asyncClose) {
-					this.loading = true;
-				} else {
-					this.close();
-				}
-			},
-			// 点击取消按钮
-			cancelHandler() {
-				this.$emit('cancel');
-				this.close();
-			},
-			closeLoading() {
-				this.$nextTick(() => {
-					this.loading = false;
-				})
-			}
-		}
-	}
+	import { modalEmits, modalProps } from './modal';
+	import { useModal, useModalCustomStyle } from './composables';
+		
+	defineOptions({ name: 'FuModal', options: { virtualHost: true } });
+	
+	const props = defineProps(modalProps);
+	const $emit = defineEmits(modalEmits);
+	
+	const {
+		popupRef,
+		loading,
+		open,
+		close,
+		popupChange,
+		confirmHandler,
+		cancelHandler,
+		closeLoading
+	} = useModal(props, $emit);
+	
+	const {
+		nvueStyle
+	} = useModalCustomStyle(props);
+	
+	// 暴露方法给父组件
+	defineExpose({
+		open,
+		close
+	})
 </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-modal-border-radius: 6px;
 	$fu-bg-color: #f3f4f6;
 	$fu-content-color: #606266;
 
 	.fu-modal {
-		@include flex(column);
+		@include components.flex(column);
 		width: 650rpx;
 		border-radius: $fu-modal-border-radius;
 		/* #ifndef APP-NVUE */
@@ -159,7 +131,7 @@
 
 		&__content {
 			padding: 12px 25px 25px 25px;
-			@include flex;
+			@include components.flex;
 			justify-content: center;
 
 			&__text {
@@ -171,12 +143,12 @@
 		}
 
 		&__button-group {
-			@include flex;
+			@include components.flex;
 			height: 48px;
 
 			&__wrapper {
 				flex: 1;
-				@include flex;
+				@include components.flex;
 				justify-content: center;
 				align-items: center;
 				height: 48px;
@@ -201,7 +173,7 @@
 					text-align: center;
 					
 					&--confirm {
-						color: $fu-primary;
+						color: $fu-color-primary;
 					}
 				}
 			}

package/components/navbar/index.ts

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

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

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

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

@@ -0,0 +1,62 @@
+import { computed } from 'vue';
+import type { NavbarProps } from '../navbar';
+
+export const useNavbarCustomStyle = (props: NavbarProps) => {
+	const themeBgColor = computed(() => {
+		if (props.dark) {
+			// 默认值
+			if (props.bgColor) {
+				return props.bgColor
+			} else {
+				return props.dark ? '#333333' : '#FFFFFF'
+			}
+		}
+		return props.bgColor || '#FFFFFF'
+	});
+	
+	const themeColor = computed(() => {
+		if (props.dark) {
+			// 默认值
+			if (props.color) {
+				return props.color
+			} else {
+				return props.dark ? '#fff' : '#333'
+			}
+		}
+		return props.color || '#333'
+	});
+	
+	const navbarHeight = computed(() => {
+		// #ifdef MP-WEIXIN
+		if (props.fixed && props.height === 0) {
+			const menuBtnInfo = uni.getMenuButtonBoundingClientRect()
+			const winInfo = uni.getWindowInfo()
+			const statusHeight = winInfo.statusBarHeight
+			const spaceHeight = menuBtnInfo.top - statusHeight
+			return uni.$fu.getPx(menuBtnInfo.height + spaceHeight * 2)
+		}
+		// #endif
+		// #ifndef MP-WEIXIN
+		if (props.fixed && props.height === 0) {
+			return uni.$fu.getPx(44)
+		}
+		// #endif
+		return uni.$fu.getPx(props.height, true)
+	});
+	
+	const leftIconWidth = computed(() => {
+		return uni.$fu.getPx(props.leftWidth, true)
+	});
+	
+	const rightIconWidth = computed(() => {
+		return uni.$fu.getPx(props.rightWidth, true)
+	});
+	
+	return {
+		themeBgColor,
+		themeColor,
+		navbarHeight,
+		leftIconWidth,
+		rightIconWidth
+	}
+}

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

@@ -0,0 +1,42 @@
+import { onMounted, ref, type SetupContext } from 'vue';
+import type { NavbarProps, NavbarEmits } from '../navbar';
+
+export const useNavbar = (props: NavbarProps, $emit: SetupContext<NavbarEmits>['emit']) => {
+	const navWidth = ref<any>('auto');
+	
+	// 左侧按钮点击时触发
+	const handleClickLeft = (e: any) => {
+		$emit("clickLeft", e);
+	};
+	
+	// 右侧按钮点击时触发
+	const handleClickRight = (e: any) => {
+		$emit("clickRight", e);
+	};
+	
+	// 中间标题点击时触发
+	const handleClickTitle = (e: any) => {
+		$emit("clickTitle", e);
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		// #ifdef MP-WEIXIN
+		if (props.fixed) {
+			const menuBtnInfo = uni.getMenuButtonBoundingClientRect()
+			navWidth.value = menuBtnInfo.left
+		}
+		// #endif
+		
+		if (uni.report && props.stat && props.title !== '') {
+			uni.report('title', props.title)
+		}
+	});
+	
+	return {
+		navWidth,
+		handleClickLeft,
+		handleClickRight,
+		handleClickTitle
+	}
+}

package/components/navbar/src/navbar.ts

@@ -0,0 +1,151 @@
+import type { ExtractPropTypes } from 'vue';
+	
+export const navbarProps = {
+	/**
+	 * @description 开启黑暗模式
+	 * @default false
+	 */
+	dark: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 标题文字
+	 */
+	title: {
+		type: String,
+		default: ""
+	},
+	/**
+	 * @description 左侧按钮文本
+	 */
+	leftText: {
+		type: String,
+		default: ""
+	},
+	/**
+	 * @description 右侧按钮文本
+	 */
+	rightText: {
+		type: String,
+		default: ""
+	},
+	/**
+	 * @description 左侧按钮图标
+	 */
+	leftIcon: {
+		type: String,
+		default: ""
+	},
+	/**
+	 * @description 右侧按钮图标
+	 */
+	rightIcon: {
+		type: String,
+		default: ""
+	},
+	/**
+	 * @description 是否固定顶部
+	 * @default false
+	 */
+	fixed: {
+		type: [Boolean, String],
+		default: false
+	},
+	/**
+	 * @description 图标和文字颜色
+	 */
+	color: {
+		type: String,
+		default: ""
+	},
+	/**
+	 * @description 导航栏背景颜色 transparent 设置透明色
+	 */
+	bgColor: {
+		type: String,
+		default: ""
+	},
+	/**
+	 * @description 是否包含状态栏
+	 * @default true
+	 */
+	statusBar: {
+		type: [Boolean, String],
+		default: false
+	},
+	/**
+	 * @description 导航栏下是否有阴影
+	 * @default false
+	 */
+	shadow: {
+		type: [Boolean, String],
+		default: false
+	},
+	/**
+	 * @description 导航栏下是否有边框
+	 * @default true
+	 */
+	border: {
+		type: [Boolean, String],
+		default: true
+	},
+	/**
+	 * @description 导航栏高度
+	 * @default 44
+	 */
+	height: {
+		type: [Number, String],
+		default: 44
+	},
+	/**
+	 * @description 导航栏左侧宽度
+	 * @default 60
+	 */
+	leftWidth: {
+		type: [Number, String],
+		default: 60
+	},
+	/**
+	 * @description 导航栏右侧宽度
+	 * @default 60
+	 */
+	rightWidth: {
+		type: [Number,String],
+		default: 60
+	},
+	/**
+	 * @description 是否开启统计标题上报
+	 * @default false
+	 */
+	stat: {
+		type: [Boolean, String],
+		default: false
+	},
+	/**
+	 * @description 是否开启胶囊避让
+	 * @default false
+	 */
+	showMenuButtonWidth: {
+		type: [Boolean, String],
+		default: false
+	}
+};
+
+export const navbarEmits = {
+	/**
+	 * @description 左侧按钮点击时触发
+	 */
+	clickLeft: (_e: any) => true,
+	/**
+	 * @description 右侧按钮点击时触发
+	 */
+	clickRight: (_e: any) => true,
+	/**
+	 * @description 中间标题点击时触发
+	 */
+	clickTitle: (_e: any) => true
+};
+
+export type NavbarProps = ExtractPropTypes<typeof navbarProps>;
+export type NavbarEmits = typeof navbarEmits;