fusions-ui 1.2.7 → 1.2.8

package/components/checkbox/src/checkbox.vue

@@ -0,0 +1,270 @@
+<template>
+	<view class="fu-checkbox">
+		<checkbox-group class="fu-checkbox__wrap" :class="{'is-list': mode === 'list' || wrap}" @change="onChange" v-if="multiple">
+			<label 
+				class="fu-checkbox__wrap--label"
+				:class="[
+					'is-' + mode,
+					(disabled || !!item.disabled)? 'is-disabled': '',
+					index !== 0 && mode === 'list'? 'is-list-border': '',
+					item.checked? 'is-checked': ''
+				]" 
+				:style="item.styleBackgroud" 
+				v-for="(item,index) in dataList" :key="index">
+				<checkbox 
+					class="hidden" 
+					:disabled="disabled || !!item.disabled" 
+					:value="item[map.value] + ''" 
+					:checked="item.checked" hidden />
+				<view 
+					class="checkbox-inside" 
+					:style="[shapeStyle, item.styleIcon]" 
+					v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && iconPos === 'left')">
+					<view class="checkbox-inside__icon"></view>
+				</view>
+				<view class="fu-checkbox__content">
+					<text class="checkbox-text" :style="item.styleText">{{ item[map.text] }}</text>
+					<view 
+						class="checkbox-inside" 
+						:style="[shapeStyle, item.styleIcon]" 
+						v-if="mode === 'list' && iconPos === 'right'">
+						<view class="checkbox-inside__icon"></view>
+					</view>
+				</view>
+			</label>
+		</checkbox-group>
+		<radio-group class="fu-checkbox__wrap" :class="{'is-list': mode === 'list' || wrap}" @change="onChange" v-else>
+			<label
+				class="fu-checkbox__wrap--label"
+				:class="[
+					'is-' + mode,
+					(disabled || !!item.disabled) ? 'is-disabled': '',
+					index !== 0 && mode=== 'list'? 'is-list-border': '',
+					item.checked? 'is-checked': ''
+				]" 
+				:style="[item.styleBackgroud]" 
+				v-for="(item,index) in dataList" :key="index">
+				<radio 
+					class="hidden" 
+					:disabled="disabled || item.disabled" 
+					:value="item[map.value] + ''" 
+					:checked="item.checked" hidden />
+				<view 
+					class="checkbox-inside" 
+					:style="[shapeStyle, item.styleIcon]" 
+					v-if="(mode !=='tag' && mode !== 'list') || (mode === 'list' && iconPos === 'left')">
+					<view class="checkbox-inside__icon"></view>
+				</view>
+				<view class="fu-checkbox__content">
+					<text class="checkbox-text" :style="[item.styleText]">{{ item[map.text] }}</text>
+					<view 
+						class="checkbox-inside" 
+						:style="[shapeStyle, item.styleIcon]" 
+						v-if="mode === 'list' && iconPos === 'right'">
+						<view class="checkbox-inside__icon"></view>
+					</view>
+				</view>
+			</label>
+		</radio-group>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Checkbox 复选框、单选框
+	 * @description 此组件通过数据渲染 checkbox 和 radio
+	 * @tutorial http://www.fusions.top/components/checkbox.html
+	 * @property {Array | String | Number} v-model 选中的值
+	 * @property {String} mode = [default|list|button|tag] 显示模式（默认 default）
+	 * 	@value default 默认横排模式
+	 * 	@value list 列表模式
+	 * 	@value button 按钮模式
+	 * 	@value tag 标签模式
+	 * @property {Boolean} multiple = [true|false] 是否多选
+	 * @property {Array} list 选择项数据，默认格式 [{text:'',value:''}]，可通过map字段映射
+	 * @property {Object} map 字段映射，默认 map = { text: 'text', value: 'value' }
+	 * @property {String | Number} min 最小选择个数，multiple为true时生效
+	 * @property {String | Number} max 最大选择个数，multiple为true时生效
+	 * @property {Boolean} wrap = [true|false] 是否换行显示
+	 * @property {Boolean} disabled = [true|false] 是否禁用全部checkbox（默认 false）
+	 * @property {String} activeColor 选中状态下的颜色（默认 #2979ff）
+	 * @property {String} inactiveColor 非选中状态下的颜色
+	 * @property {String} shape = [circle|square] 形状（默认 circle）
+	 * 	@value circle 圆形
+	 * 	@value square 方形
+	 * @property {Boolean} highlight = [true|false] 选中时，文本是否高亮（默认 true）
+	 * @property {String} iconPos mode = list 列表模式下icon显示位置（默认 left）
+	 * @property {String} activeTextColor 选中文本颜色，如为空则自动显示
+	 * 
+	 * @event {Function} change 选中状态发生改变时触发
+	 * @example<fu-checkbox :list="list"></fu-checkbox>
+	 */
+	import { checkboxEmits, checkboxProps } from './checkbox';
+	import { useCheckbox, useCheckboxCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuCheckBox', options: { virtualHost: true } });
+	
+	const props = defineProps(checkboxProps);
+	const $emit = defineEmits(checkboxEmits);
+	
+	const {
+		dataList,
+		onChange
+	} = useCheckbox(props, $emit);
+	
+	const {
+		shapeStyle
+	} = useCheckboxCustomStyle(props);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	@use '../../../style/color.scss' as *;
+	$fontSize: 14px !default;
+	$color: #666666 !default;
+	$border-color: #DCDFE6 !default;
+	$disabled: 0.4 !default;
+	
+	.fu-checkbox {
+		position: relative;
+		z-index: 0;
+		flex: 1;
+		
+		&__wrap {
+			@include components.flex(row);
+			flex-wrap: wrap;
+			
+			&.is-list {
+				flex-direction: column;
+			}
+			
+			&--label {
+				@include components.flex(row);
+				align-items: center;
+				position: relative;
+				margin: 5px 0;
+				margin-right: 25px;
+				
+				.hidden {
+					position: absolute;
+					opacity: 0;
+				}
+				
+				// 默认样式
+				&.is-default {
+					
+				}
+				
+				// 列表样式
+				&.is-list {
+					/* #ifndef APP-NVUE */
+					display: flex;
+					/* #endif */
+					padding: 15px 5px;
+					padding-left: 0;
+					margin: 0;
+				
+					&.is-list-border {
+						border-top: 1px #eeeeee solid;
+					}
+				}
+				
+				// 按钮样式
+				&.is-button {
+					margin-right: 10px;
+					padding: 5px 10px;
+					border: 1px $border-color solid;
+					border-radius: 3px;
+					transition: border-color 0.2s;
+				}
+				
+				// 标签样式
+				&.is-tag {
+					margin-right: 10px;
+					padding: 5px 10px;
+					border: 1px $border-color solid;
+					border-radius: 3px;
+					background-color: #f5f5f5;
+					
+					.checkbox-text {
+						margin: 0;
+						color: $color;
+					}
+				}
+				
+				// 禁用
+				&.is-disabled {
+					/* #ifdef H5 */
+					cursor: not-allowed;
+					/* #endif */
+					opacity: $disabled;
+				}
+				
+				// 选中
+				&.is-checked {
+					
+					.checkbox-inside {
+						border-color: $fu-color-primary;
+						background-color: $fu-color-primary;
+					
+						.checkbox-inside__icon {
+							opacity: 1;
+							transform: rotate(45deg);
+						}
+					}
+				}
+			}
+		}
+		
+		// 文字样式
+		&__content {
+			@include components.flex(row);
+			flex: 1;
+			align-items: center;
+			justify-content: space-between;
+			
+			.checkbox-text {
+				font-size: 14px;
+				color: #666;
+				margin-left: 5px;
+				line-height: 14px;
+			}
+		}
+	
+		// 图标样式
+		.checkbox-inside {
+			/* #ifndef APP-NVUE */
+			flex-shrink: 0;
+			box-sizing: border-box;
+			/* #endif */
+			position: relative;
+			width: 16px;
+			height: 16px;
+			border: 1px solid $border-color;
+			border-radius: 4px;
+			z-index: 1;
+			
+			.checkbox-inside__icon {
+				position: absolute;
+				/* #ifdef APP-NVUE */
+				top: 2px;
+				/* #endif */
+				/* #ifndef APP-NVUE */
+				top: 1px;
+				/* #endif */
+				left: 5px;
+				height: 8px;
+				width: 4px;
+				border-right-width: 1px;
+				border-right-color: #ffffff;
+				border-right-style: solid;
+				border-bottom-width:1px ;
+				border-bottom-color: #ffffff;
+				border-bottom-style: solid;
+				opacity: 0;
+				transform-origin: center;
+				transform: rotate(40deg);
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import { computed } from 'vue';
+import type { CheckboxProps } from '../checkbox';
+
+export const useCheckboxCustomStyle = (props: CheckboxProps) => {
+	const shapeStyle = computed(() => {
+		let style = {
+			borderRadius: props.shape === 'circle'? '100px': '4px'
+		};
+		return uni.$fu.addStyle(style, 'string')
+	});
+	
+	return {
+		shapeStyle
+	}
+}

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

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

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

@@ -0,0 +1,200 @@
+import { computed, ref, watch, type SetupContext } from 'vue';
+import type { CheckboxProps, CheckboxEmits } from '../checkbox';
+	
+export const useCheckbox = (props: CheckboxProps, $emit: SetupContext<CheckboxEmits>['emit']) => {
+	const dataList = ref([]);
+	const range = ref([]);
+	
+	const dataValue = computed(() => {
+		if (props.modelValue) return props.modelValue
+		return ''
+	});
+	
+	// 监听选中状态
+	const onChange = (e: any) => {
+		const values = e.detail.value;
+		let detail = {
+			value: [],
+			data: []
+		};
+
+		if (props.multiple) {
+			range.value.forEach(item => {
+				if (values.includes(item[props.map.value] + '')) {
+					detail.value.push(item[props.map.value])
+					detail.data.push(item)
+				}
+			})
+		} else {
+			const selectedItem = range.value.find(item => String(item[props.map.value]) === values)
+			if (selectedItem) {
+				detail = {
+					value: selectedItem[props.map.value],
+					data: selectedItem
+				};
+			}
+		}
+		
+		$emit('input', detail.value);
+		$emit('update:modelValue', detail.value);
+		$emit('change', { detail })
+		if (props.multiple) {
+			// 如果 v-model 没有绑定 ，则走内部逻辑
+			dataList.value = getDataList(detail.value)
+		} else {
+			dataList.value = getDataList(detail.value)
+		}
+	};
+			
+	/**
+	 * 获取渲染的新数组
+	 * @param {Object} value 选中内容
+	 */
+	const getDataList = (value: any[] | string | number) => {
+		// 解除引用关系，破坏原引用关系，避免污染源数据
+		const dataList = uni.$fu.deepClone(range.value);
+		let newList = [];
+		if (props.multiple) {
+			if (!uni.$fu.isArray(value)) {
+				value = [];
+			}
+		}
+		dataList.forEach((item: any, index: number) => {
+			item.disabled = item.disabled || false;
+			if (props.multiple) {
+				const values = Array.isArray(value) ? value : [];
+				if (values.length > 0) {
+					let have = values.find(val => val === item[props.map.value])
+					item.checked = have !== undefined
+				} else {
+					item.checked = false
+				}
+			} else {
+				item.checked = value === item[props.map.value]
+			}
+		
+			newList.push(item)
+		})
+		return setRange(newList)
+	};
+			
+	/**
+	 * 获取选中值
+	 * @param {Object} range
+	 */
+	const getCheckedValue = (range: any) => {
+		if (!props.multiple) return dataValue.value
+		let checkedArr = [];
+		range.forEach((item: any) => {
+			if (item.checked) {
+				checkedArr.push(item[props.map.value])
+			}
+		})
+		const values = dataValue.value;
+		return Array.isArray(values) && values.length > 0 ? values : checkedArr
+	};
+			
+	/**
+	 * 处理最大最小值
+	 * @param {Object} list
+	 */
+	const setRange = (list: any) => {
+		let checkedList = list.filter((item: any) => item.checked);
+		let min = Number(props.min) || 0;
+		let max = Number(props.max) || '';
+		list.forEach((item: any, index: number) => {
+			if (props.multiple) {
+				if (checkedList.length <= min) {
+					let isChecked = checkedList.find((val: any) => val[props.map.value] === item[props.map.value])
+					if (!uni.$fu.isNull(isChecked)) {
+						item.disabled = true;
+					}
+				}
+		
+				if (checkedList.length >= max && max !== '') {
+					let isChecked = checkedList.find((val: any) => val[props.map.value] === item[props.map.value])
+					if (uni.$fu.isNull(isChecked)) {
+						item.disabled = true;
+					}
+				}
+			}
+			setStyles(item, index)
+			list[index] = item;
+		})
+		return list
+	};
+	
+	/**
+	 * 设置自定义 class 样式
+	 * @param {Object} item
+	 */
+	const setStyles = (item: any, index: number) => {
+		//  设置自定义样式
+		item.styleBackgroud = setStyleBackgroud(item)
+		item.styleIcon = setStyleIcon(item)
+		if(props.highlight) item.styleText = setStyleText(item)
+	};
+	
+	/**
+	 * 设置背景样式
+	 */
+	const setStyleBackgroud = (item: any) => {
+		let styles = {};
+		let activeColor = props.activeColor || '#2979ff';
+		if (props.activeColor) {
+			if (props.mode !== 'list') {
+				styles['border-color'] = item.checked? activeColor: '#DCDFE6';
+			}
+			if (props.mode === 'tag') {
+				styles['background-color'] = item.checked? activeColor: '#f5f5f5';
+			}
+		}
+		return uni.$fu.addStyle(styles, 'string')
+	};
+	
+	const setStyleText = (item: any) => {
+		let styles: Record<string, any> = {};
+		if (props.activeColor) {
+			let activeColor = props.activeColor || '#2979ff';
+			if (props.mode === 'tag') {
+				styles.color = item.checked? props.activeTextColor || '#ffffff': '#666666';
+			} else {
+				styles.color = item.checked? (props.activeTextColor || activeColor): '#666666';
+			}
+			if(!item.checked && item.disabled){
+				styles.color = '#999999';
+			}
+		}
+		return uni.$fu.addStyle(styles, 'string')
+	};
+	
+	const setStyleIcon = (item: any) => {
+		let styles = {};
+		if (props.activeColor) {
+			let activeColor = props.activeColor || '#2979ff'
+			styles['background-color'] = item.checked ? activeColor : props.inactiveColor;
+			styles['border-color'] = item.checked ? activeColor : '#DCDFE6';
+
+			if (!item.checked && item.disabled) {
+				styles['background-color'] = '#F2F6FC'
+				styles['border-color'] = item.checked ? activeColor : '#DCDFE6'
+			}
+		}
+		return uni.$fu.addStyle(styles, 'string')
+	};
+	
+	// watch监听事件
+	watch(() => props.list, (newVal) => {
+		range.value = newVal;
+		dataList.value = getDataList(getCheckedValue(newVal));
+	}, { immediate: true, deep: true });
+	
+	watch(() => props.modelValue, (newVal) => {
+		dataList.value = getDataList(newVal);
+	}, { immediate: true });
+	
+	return {
+		dataList,
+		onChange
+	}
+}

package/components/code-input/index.ts

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

package/components/code-input/src/code-input.ts

@@ -0,0 +1,157 @@
+import type { ExtractPropTypes } from 'vue';
+
+/**
+ * 验证码输入 mode 有效值
+ */
+export const codeInputModes = [] as const;
+
+export const codeInputProps = {
+	/**
+	 * @description v-model 预置值
+	 */
+	modelValue: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 键盘弹起时，是否自动上推页面
+	 * @default true
+	 */
+	adjustPosition: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 最大输入长度
+	 * @default 4
+	 */
+	maxlength: {
+		type: [String, Number],
+		default: 4
+	},
+	/**
+	 * @description 是否用圆点填充
+	 * @default false
+	 */
+	dot: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 显示模式
+	 * @values 'box' - 盒子模式, 'line' - 底部横线模式
+	 * @default 'box'
+	 */
+	mode: {
+		type: String,
+		values: codeInputModes,
+		default: 'box'
+	},
+	/**
+	 * @description 是否细边框
+	 * @default false
+	 */
+	hairline: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 字符间的距离
+	 * @default 10
+	 */
+	space: {
+		type: [String, Number],
+		default: 10
+	},
+	/**
+	 * @description 是否自动获取焦点
+	 * @default false
+	 */
+	focus: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 字体是否加粗
+	 * @default false
+	 */
+	bold: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 字体颜色
+	 * @default '#626468'
+	 */
+	color: {
+		type: String,
+		default: '#626468'
+	},
+	/**
+	 * @description 字体大小
+	 * @default 18
+	 */
+	fontSize: {
+		type: [String, Number],
+		default: 18
+	},
+	/**
+	 * @description 输入框的大小，宽等于高
+	 * @default 35
+	 */
+	size: {
+		type: [String, Number],
+		default: 35
+	},
+	/**
+	 * @description 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
+	 * @default false
+	 */
+	disabledKeyboard: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 边框和线条颜色
+	 * @default '#cdcdce'
+	 */
+	borderColor: {
+		type: String,
+		default: '#cdcdce'
+	},
+	/**
+	 * @description 是否禁止输入"."符号
+	 * @default true
+	 */
+	disabledDot: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 设置圆角
+	 * @default 4
+	 */
+	radius: {
+		type: [String, Number],
+		default: 4
+	}
+};
+
+export const codeInputEmits = {
+	'update:modelValue': (_e: any) => true,
+	/**
+	 * @description 输入内容发生改变时触发
+	 */
+	change: (_e: any) => true,
+	/**
+	 * @description 输入内容发生改变时触发
+	 */
+	input: (_e: any) => true,
+	/**
+	 * @description 输入字符个数达maxlength值时触发
+	 */
+	finish: (_e: any) => true
+};
+
+export type CodeInputProps = ExtractPropTypes<typeof codeInputProps>;
+export type CodeInputEmits = typeof codeInputEmits;