fusions-ui 1.2.7 → 1.2.8

package/components/form-item/src/form-item.vue

@@ -0,0 +1,229 @@
+<template>
+	<view class="fu-form-item"
+		:class="['is-direction-' + localLabelPos , border?'fu-form-item--border': '' , border && isFirstBorder? 'is-first-border': '']">
+		<slot name="label">
+			<view class="fu-form-item__label" :class="{'no-label': !label && !required}" :style="{width: localLabelWidth, justifyContent: localLabelAlign}">
+				<text v-if="required" class="is-required">*</text>
+				<text>{{ label }}</text>
+			</view>
+		</slot>
+		<!-- #ifndef APP-NVUE -->
+		<view class="fu-form-item__content">
+			<slot></slot>
+			<view class="fu-form-item__error" :class="{'msg--active': msg}">
+				<text>{{ msg }}</text>
+			</view>
+		</view>
+		<!-- #endif -->
+		<!-- #ifdef APP-NVUE -->
+		<view class="fu-form-item__nuve-content">
+			<view class="fu-form-item__content">
+				<slot></slot>
+			</view>
+			<view class="fu-form-item__error" :class="{'msg--active': msg}">
+				<text class="error-text">{{ msg }}</text>
+			</view>
+		</view>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * 表单子组件
+	 * @description 此组件表单子组件，提供了基础布局已经校验能力 需配合fu-form组件一起使用
+	 * @property {Array} rules 表单校验规则
+	 * @property {String} prop 表单域的属性名，在使用校验规则时必填
+	 * @property {Boolean} required = [true|false] 是否必填，左边显示红色"*"号
+	 * @property {String} label 输入框左边的文字提示
+	 * @property {String | Number} labelWidth label的宽度，单位px（默认70）
+	 * @property {String} labelAlign = [left|center|right] label的文字对齐方式（默认left）
+	 * 	@value left label 左侧显示
+	 * 	@value center label 居中
+	 * 	@value right label 右侧对齐
+	 * @property {Boolean} message 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
+	 * @property {String} labelPosition = [top|left] label的文字的位置，优先级高于fu-form组件中的labelPosition
+	 * 	@value top	顶部显示 label
+	 * 	@value left	左侧显示 label
+	 */
+	import { formItemProps } from './form-item';
+	import { useFormItem } from './composables';
+	
+	defineOptions({ name: 'FuFormItem', options: { virtualHost: true } });
+	
+	const props = defineProps(formItemProps);
+	
+	const {
+		localLabelAlign,
+		localLabelWidth,
+		localLabelPos,
+		border,
+		isFirstBorder,
+		msg,
+		setRules,
+		onFieldChange
+	} = useFormItem(props);
+	
+	// 暴露方法
+	defineExpose({
+		setRules,
+		onFieldChange
+	});
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	
+	.fu-form-item {
+		@include components.flex(row);
+		position: relative;
+		/* #ifdef APP-NVUE */
+		// 在 nvue 中，使用 margin-bottom error 信息会被隐藏
+		padding-bottom: 22px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		margin-bottom: 22px;
+		/* #endif */
+	
+		&__label {
+			@include components.flex(row);
+			align-items: center;
+			text-align: left;
+			font-size: 14px;
+			color: #606266;
+			height: 40px;
+			padding: 0 12px 0 0;
+			/* #ifndef APP-NVUE */
+			vertical-align: middle;
+			flex: 0 0 auto;
+			box-sizing: border-box;
+			/* #endif */
+			
+			&.no-label {
+				padding: 0;
+			}
+		}
+	
+		&__content {
+			/* #ifndef MP-TOUTIAO */
+			// display: flex;
+			// align-items: center;
+			/* #endif */
+			position: relative;
+			font-size: 14px;
+			flex: 1;
+			/* #ifndef APP-NVUE */
+			box-sizing: border-box;
+			/* #endif */
+			flex-direction: row;
+	
+			/* #ifndef APP || H5 || MP-WEIXIN || APP-NVUE */
+			// 因为小程序平台会多一层标签节点 ，所以需要在多余节点继承当前样式
+			&>fu-easyinput,
+			&>fu-data-picker {
+				width: 100%;
+			}
+			/* #endif */
+		}
+	
+		& .fu-form-item__nuve-content {
+			@include components.flex(column);
+			flex: 1;
+		}
+	
+		&__error {
+			color: #f56c6c;
+			font-size: 12px;
+			line-height: 1;
+			padding-top: 4px;
+			position: absolute;
+			/* #ifndef APP-NVUE */
+			top: 100%;
+			left: 0;
+			transition: transform 0.3s;
+			transform: translateY(-100%);
+			/* #endif */
+			/* #ifdef APP-NVUE */
+			bottom: 5px;
+			/* #endif */
+	
+			opacity: 0;
+	
+			.error-text {
+				// 只有 nvue 下这个样式才生效
+				color: #f56c6c;
+				font-size: 12px;
+			}
+	
+			&.msg--active {
+				opacity: 1;
+				transform: translateY(0%);
+			}
+		}
+	
+		// 位置修饰样式
+		&.is-direction-left {
+			flex-direction: row;
+		}
+	
+		&.is-direction-top {
+			flex-direction: column;
+	
+			.fu-form-item__label {
+				padding: 0 0 8px;
+				text-align: left;
+				/* #ifndef APP-NVUE */
+				white-space: initial;
+				/* #endif */
+			}
+		}
+	
+		.is-required {
+			color: #dd524d;
+			font-weight: bold;
+		}
+	}
+	
+	
+	.fu-form-item--border {
+		margin-bottom: 0;
+		padding: 10px 0;
+		border-top: 1px #eeeeee solid;
+	
+		/* #ifndef APP-NVUE */
+		.fu-form-item__content {
+			flex-direction: column;
+			justify-content: flex-start;
+			align-items: flex-start;
+	
+			.fu-form-item__error {
+				position: relative;
+				top: 5px;
+				left: 0;
+				padding-top: 0;
+			}
+		}
+		/* #endif */
+	
+		/* #ifdef APP-NVUE */
+		@include components.flex(column);
+	
+		.fu-form-item__error {
+			position: relative;
+			top: 0px;
+			left: 0;
+			padding-top: 0;
+			margin-top: 5px;
+		}
+		/* #endif */
+	}
+	
+	.is-first-border {
+		/* #ifndef APP-NVUE */
+		border: none;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		border-width: 0;
+		/* #endif */
+	}
+</style>

package/components/fusions-ui/src/fusions-ui.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

package/components/grid/index.ts

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

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

@@ -0,0 +1 @@
+export * from './use-grid'

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

@@ -0,0 +1,67 @@
+import { ref, nextTick, onMounted, type SetupContext, provide } from 'vue';
+import type { GridProps, GridEmits } from '../grid';
+import { useCommon } from '../../../../hooks';
+// #ifdef APP-NVUE
+// @ts-ignore
+const dom = uni.requireNativePlugin('dom')
+// #endif
+
+export const useGrid = (props: GridProps, $emit: SetupContext<GridEmits>['emit']) => {
+	const { getRect } = useCommon();
+	const gridRef = ref();
+	const elId = uni.$fu.uuid();
+	const width = ref<string>('0');
+	const children = ref([]);
+	
+	const init = () => {
+		nextTick(() => {
+			getSize((width) => {
+				children.value.forEach(item => item.width = width)
+			})
+		})
+	};
+	
+	const handleChange = (e: number) => {
+		$emit('change', e)
+	};
+	
+	const getSize = (fn: (width: string) => void) => {
+		// #ifndef APP-NVUE
+		getRect(`#${elId}`).then((res: any) => {
+			if(res) {
+				width.value = ((res.width - 2) / props.column) + 'px';
+				fn(width.value)
+			}
+		})
+		// #endif
+		// #ifdef APP-NVUE
+		dom.getComponentRect(gridRef.value, (res: any) => {
+			width.value = ((res.size.width - 2) / props.column) + 'px';
+			fn(width.value)
+		})
+		// #endif
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		init()
+	});
+	
+	// 提供父组件上下文
+	provide('gridContext', {
+		children: children.value,
+		column: props.column,
+		showBorder: props.showBorder,
+		square: props.square,
+		highlight: props.highlight,
+		borderColor: props.borderColor,
+		width: width.value,
+		init,
+		handleChange
+	});
+	
+	return {
+		gridRef,
+		elId
+	}
+}

package/components/grid/src/grid.ts

@@ -0,0 +1,54 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const gridProps = {
+	/**
+	 * @description 每列显示个数
+	 * @default 3
+	 */
+	column: {
+		type: [Number],
+		default: 3
+	},
+	/**
+	 * @description 是否显示边框
+	 * @default true
+	 */
+	showBorder: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 边框颜色
+	 * @default '#d6d6d6'
+	 */
+	borderColor: {
+		type: String,
+		default: '#d6d6d6'
+	},
+	/**
+	 * @description 是否正方形显示
+	 * @default true
+	 */
+	square: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 点击背景是否高亮
+	 * @default true
+	 */
+	highlight: {
+		type: Boolean,
+		default: true
+	}
+};
+
+export const gridEmits = {
+	/**
+	 * @description 点击 grid 触发
+	 */
+	change: (_e: any) => true
+};
+
+export type GridProps = ExtractPropTypes<typeof gridProps>;
+export type GridEmits = typeof gridEmits;

package/components/grid/src/grid.vue

@@ -0,0 +1,69 @@
+<template>
+	<view class="fu-grid-wrap">
+		<view 
+			:id="elId" 
+			ref="gridRef" 
+			class="fu-grid" 
+			:class="{'fu-grid--border': showBorder}" 
+			:style="{borderLeftColor: borderColor}">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Grid 宫格
+	 * @description 此组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件（badge），或者图标等，也可以扩展为左右滑动的轮播形式
+	 * @tutorial http://www.fusions.top/components/grid.html
+	 * @property {Number} column 宫格的列数
+	 * @property {String} borderColor 边框颜色
+	 * @property {Boolean} showBorder = [true|false] 是否显示边框（默认 true）
+	 * @property {Boolean} square = [true|false] 是否方形显示（默认 true）
+	 * @property {Boolean} highlight = [true|false] 点击背景是否高亮（默认 true）
+	 * @event {Function} change 点击 grid 触发，e={detail:{index:0}}，index 为当前点击 gird 下标
+	 */
+	import { gridEmits, gridProps } from './grid';
+	import { useGrid } from './composables';
+	
+	defineOptions({ name: 'FuGrid', options: { virtualHost: true }});
+	
+	const props = defineProps(gridProps);
+	const $emit = defineEmits(gridEmits);
+	
+	const {
+		gridRef,
+		elId
+	} = useGrid(props, $emit);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	$border-color: #D2D2D2;
+	
+	.fu-grid-wrap {
+		@include components.flex(column);
+		flex: 1;
+		/* #ifdef H5 */
+		width: 100%;
+		/* #endif */
+	}
+
+	.fu-grid {
+		@include components.flex(row);
+		flex-wrap: wrap;
+	}
+
+	.fu-grid--border {
+		position: relative;
+		/* #ifdef APP-NVUE */
+		border-left-color: $border-color;
+		border-left-style: solid;
+		border-left-width: 0.5px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		z-index: 1;
+		border-left: 1px solid $border-color;
+		/* #endif */
+	}
+</style>

package/components/grid-item/index.ts

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

package/components/grid-item/src/composables/grid-item-custom.ts

@@ -0,0 +1,16 @@
+import { computed, Ref, type CSSProperties } from 'vue';
+import type { GridItemProps } from '../grid-item';
+
+export const useGridItemCustomStyle = (props: GridItemProps, width: Ref<string | number>, square: Ref<boolean>) => {
+	const itemStyle = computed<CSSProperties>(() => {
+		const style = {
+			width: width.value,
+			...(square.value && {height: width.value})
+		};
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(props.customStyle))
+	});
+	
+	return {
+		itemStyle
+	}
+}

package/components/grid-item/src/composables/index.ts

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

package/components/grid-item/src/composables/use-grid-item.ts

@@ -0,0 +1,55 @@
+import { ref, inject, onMounted, onBeforeUnmount } from 'vue';
+import type { GridItemProps } from '../grid-item';
+
+export const useGridItem = (props: GridItemProps) => {
+	const column = ref(0);
+	const showBorder = ref(true);
+	const square = ref(true);
+	const highlight = ref(true);
+	const width = ref(0);
+	const borderColor = ref('');
+	const grid = inject<any>('gridContext', null);
+	const proxy = {
+		width
+	};
+	
+	const handleClick = () => {
+		grid.handleChange({
+			detail: {
+				index: props.index
+			}
+		})
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		column.value = grid.column;
+		showBorder.value = grid.showBorder;
+		square.value = grid.square;
+		highlight.value = grid.highlight;
+		borderColor.value = grid.borderColor;
+		grid.children.push(proxy)
+		grid.init()
+		width.value = grid.width;
+	});
+	
+	onBeforeUnmount(() => {
+		if (grid && grid.children) {
+			grid.children.forEach((item: any, index: number) => {
+				if (item === proxy) {
+					grid.children.splice(index, 1)
+				}
+			})
+		}
+	});
+	
+	return {
+		column,
+		showBorder,
+		square,
+		highlight,
+		width,
+		borderColor,
+		handleClick
+	}
+}

package/components/grid-item/src/grid-item.ts

@@ -0,0 +1,15 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from '../../../constants';
+
+export const gridItemProps = {
+	/**
+	 * @description 索引
+	 */
+	index: {
+		type: Number,
+		default: 0
+	},
+	...componentProps
+};
+
+export type GridItemProps = ExtractPropTypes<typeof gridItemProps>;

package/components/grid-item/src/grid-item.vue

@@ -0,0 +1,102 @@
+<template>
+	<view class="fu-grid-item" v-if="width" :style="itemStyle">
+		<view 
+			class="fu-grid-item__box" 
+			:class="{'fu-grid-item--border': showBorder,  'fu-grid-item--border-top': showBorder && index < column, 'fu-highlight': highlight}"
+			:style="{borderRightColor: borderColor, borderBottomColor: borderColor, borderTopColor: borderColor }"
+			@click="handleClick">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * GridItem 子宫格
+	 * @description 此组件需配合fu-grid组件一起使用
+	 * @property {Number} index 子组件的唯一标识 ，点击gird会返回当前的标识
+	 * @property {String | Object} customStyle 自定义外部样式
+	 */
+	import { gridItemProps } from './grid-item';
+	import { useGridItem, useGridItemCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuGridItem', options: { virtualHost: true } });
+	
+	const props = defineProps(gridItemProps);
+	
+	const {
+		column,
+		showBorder,
+		square,
+		highlight,
+		width,
+		borderColor,
+		handleClick
+	} = useGridItem(props);
+	
+	const {
+		itemStyle
+	} = useGridItemCustomStyle(
+		props,
+		width,
+		square
+	);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	$border-color: #D2D2D2;
+	
+	.fu-grid-item {
+		@include components.flex;
+		/* #ifndef APP-NVUE */
+		height: 100%;
+		/* #endif */
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.fu-grid-item__box {
+		@include components.flex(column);
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		/* #endif */
+		position: relative;
+		flex: 1;
+	}
+
+	.fu-grid-item--border {
+		position: relative;
+		/* #ifdef APP-NVUE */
+		border-bottom-color: $border-color;
+		border-bottom-style: solid;
+		border-bottom-width: 0.5px;
+		border-right-color: $border-color;
+		border-right-style: solid;
+		border-right-width: 0.5px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		z-index: 0;
+		border-bottom: 1px solid $border-color;
+		border-right: 1px solid $border-color;
+		/* #endif */
+	}
+	
+	.fu-grid-item--border-top {
+		position: relative;
+		/* #ifdef APP-NVUE */
+		border-top-color: $border-color;
+		border-top-style: solid;
+		border-top-width: 0.5px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		border-top: 1px solid $border-color;
+		z-index: 0;
+		/* #endif */
+	}
+
+	.fu-highlight:active {
+		background-color: #f1f1f1;
+	}
+</style>

package/components/icon/index.ts

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

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

@@ -0,0 +1,41 @@
+import { computed, type CSSProperties } from 'vue';
+import type { IconProps } from '../icon';
+import fuicon from '../fuicon';
+
+export const useIconCustomStyle = (props: IconProps) => {
+	const fucode = computed(() => {
+		const code = fuicon.find(v => v.font_class === props.name);
+		if(code){
+			return unescape(`%u${code.unicode}`)
+		}
+		return ''
+	});
+	
+	const iconStyle = computed<CSSProperties>(() => {
+		const style: Record<string, any> = {
+			color: props.color,
+			fontSize: uni.$fu.addUnit(props.size),
+			...(props.fontFamily && {fontFamily: props.fontFamily})
+		};
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(props.customStyle))
+	});
+	
+	const imgStyle = computed<CSSProperties>(() => {
+		// 如果设置 width 和 height 属性，则优先使用，否则使用 size 属性
+		const style: Record<string, any> = {
+			width: props.width? uni.$fu.addUnit(props.width): uni.$fu.addUnit(props.size),
+			height: props.height? uni.$fu.addUnit(props.height): uni.$fu.addUnit(props.size)
+		};
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(props.customStyle))
+	});
+	
+	// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+	const isImg = computed(() => props.name.indexOf('/') !== -1);
+	
+	return {
+		fucode,
+		iconStyle,
+		imgStyle,
+		isImg
+	}
+}

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

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

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

@@ -0,0 +1,14 @@
+import type { SetupContext } from 'vue';
+import type { IconProps, IconEmits } from '../icon';
+
+export const useIcon = (props: IconProps, $emit: SetupContext<IconEmits>['emit']) => {
+	const handleClick = (e: TouchEvent) => {
+		$emit('click', props.index);
+		// 是否阻止事件冒泡
+		props.stop && e.stopPropagation();
+	};
+	
+	return {
+		handleClick
+	}
+};