fusions-ui 1.2.7 → 1.2.8

package/components/fu-checkbox/fu-checkbox.vue

@@ -1,469 +0,0 @@
-<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>
-	import mpMixin from "../../libs/mixin/mpMixin.js"
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js'
-	/**
-	 * Checkbox 复选框、单选框
-	 * @description 此组件通过数据渲染 checkbox 和 radio
-	 * @property {Array,String,Number} value/modelValue 选中的值
-	 * @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} 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>
-	 */
-	export default {
-		name: 'FuCheckBox',
-		mixins: [mpMixin, mixin, props],
-		emits: ['input', 'update:modelValue', 'change'],
-		data() {
-			return {
-				dataList: [],
-				range: []
-			}
-		},
-		created() {
-			if(!this.$fu.isNull(this.list)) {
-				this.range = this.list;
-				this.dataList = this.getDataList(this.getCheckedValue(this.range));
-			}
-		},
-		computed:{
-			dataValue() {
-				if(this.value === '') return this.modelValue
-				if(this.modelValue === '') return this.value
-				return this.value
-			},
-			shapeStyle() {
-				let style = {
-					borderRadius: this.shape === 'circle'? '100px': '4px'
-				};
-				return this.$fu.addStyle(style, 'string')
-			}
-		},
-		methods: {
-			// 监听选中状态
-			onChange(e) {
-				const values = e.detail.value;
-				
-				let detail = {
-					value: [],
-					data: []
-				};
-
-				if (this.multiple) {
-					this.range.forEach(item => {
-						if (values.includes(item[this.map.value] + '')) {
-							detail.value.push(item[this.map.value])
-							detail.data.push(item)
-						}
-					})
-				} else {
-					const range = this.range.find(item => (item[this.map.value] + '') === values)
-					if (range) {
-						detail = {
-							value: range[this.map.value],
-							data: range
-						};
-					}
-				}
-				
-				// 兼容 Vue2
-				this.$emit('input', detail.value);
-				// TOTO 兼容 vue3
-				this.$emit('update:modelValue', detail.value);
-				this.$emit('change', { detail })
-				if (this.multiple) {
-					// 如果 v-model 没有绑定 ，则走内部逻辑
-					this.dataList = this.getDataList(detail.value, true)
-				} else {
-					this.dataList = this.getDataList(detail.value)
-				}
-			},
-			
-			/**
-			 * 设置自定义 class 样式
-			 * @param {Object} item
-			 * @param {Object} index
-			 */
-			setStyles(item, index) {
-				//  设置自定义样式
-				item.styleBackgroud = this.setStyleBackgroud(item)
-				item.styleIcon = this.setStyleIcon(item)
-				if(this.highlight) item.styleText = this.setStyleText(item)
-			},
-			
-			/**
-			 * 设置背景样式
-			 */
-			setStyleBackgroud(item) {
-				let styles = {};
-				let activeColor = this.activeColor || '#2979ff';
-				if (this.activeColor) {
-					if (this.mode !== 'list') {
-						styles['border-color'] = item.checked? activeColor: '#DCDFE6';
-					}
-					if (this.mode === 'tag') {
-						styles['background-color'] = item.checked? activeColor: '#f5f5f5';
-					}
-				}
-				return this.$fu.addStyle(styles, 'string')
-			},
-			
-			setStyleText(item) {
-				let styles = {};
-				if (this.activeColor) {
-					let activeColor = this.activeColor || '#2979ff';
-					if (this.mode === 'tag') {
-						styles.color = item.checked? this.activeTextColor || '#ffffff': '#666666';
-					} else {
-						styles.color = item.checked? (this.activeTextColor || activeColor): '#666666';
-					}
-					if(!item.checked && item.disabled){
-						styles.color = '#999999';
-					}
-				}
-				return this.$fu.addStyle(styles, 'string')
-			},
-			
-			setStyleIcon(item) {
-				let styles = {};
-				if (this.activeColor) {
-					let activeColor = this.activeColor || '#2979ff'
-					styles['background-color'] = item.checked ? activeColor : '#fff'
-					styles['border-color'] = item.checked ? activeColor : '#DCDFE6'
-
-					if (!item.checked && item.disabled) {
-						styles['background-color'] = '#F2F6FC'
-						styles['border-color'] = item.checked ? activeColor : '#DCDFE6'
-					}
-				}
-				return this.$fu.addStyle(styles, 'string')
-			},
-			
-			/**
-			 * 获取渲染的新数组
-			 * @param {Object} value 选中内容
-			 */
-			getDataList(value) {
-				// 解除引用关系，破坏原引用关系，避免污染源数据
-				const dataList = this.$fu.deepClone(this.range);
-				let newList = [];
-				if (this.multiple) {
-					if (!this.$fu.isArray(value)) {
-						value = [];
-					}
-				}
-				dataList.forEach((item, index) => {
-					item.disabled = item.disabled || false;
-					if (this.multiple) {
-						if (value.length > 0) {
-							let have = value.find(val => val === item[this.map.value])
-							item.checked = have !== undefined
-						} else {
-							item.checked = false
-						}
-					} else {
-						item.checked = value === item[this.map.value]
-					}
-				
-					newList.push(item)
-				})
-				return this.setRange(newList)
-			},
-			
-			/**
-			 * 获取选中值
-			 * @param {Object} range
-			 */
-			getCheckedValue(range) {
-				if (!this.multiple) return this.dataValue
-				let checkedArr = [];
-				range.forEach((item) => {
-					if (item.checked) {
-						checkedArr.push(item[this.map.value])
-					}
-				})
-				return this.dataValue.length > 0 ? this.dataValue : checkedArr
-			},
-			
-			/**
-			 * 处理最大最小值
-			 * @param {Object} list
-			 */
-			setRange(list) {
-				let checkedList = list.filter(item => item.checked);
-				let min = Number(this.min) || 0;
-				let max = Number(this.max) || '';
-				list.forEach((item, index) => {
-					if (this.multiple) {
-						if (checkedList.length <= min) {
-							let isChecked = checkedList.find(val => val[this.map.value] === item[this.map.value])
-							if (!this.$fu.isNull(isChecked)) {
-								item.disabled = true;
-							}
-						}
-				
-						if (checkedList.length >= max && max !== '') {
-							let isChecked = checkedList.find(val => val[this.map.value] === item[this.map.value])
-							if (this.$fu.isNull(isChecked)) {
-								item.disabled = true;
-							}
-						}
-					}
-					this.setStyles(item, index)
-					list[index] = item;
-				})
-				return list
-			}
-		},
-		watch: {
-			list: {
-				deep: true,
-				handler(newVal) {
-					this.range = newVal;
-					this.dataList = this.getDataList(this.getCheckedValue(newVal));
-				}
-			},
-			value(newVal) {
-				this.dataList = this.getDataList(newVal);
-			},
-			modelValue(newVal) {
-				this.dataList = this.getDataList(newVal);
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	@import '../../libs/style/color.scss';
-	$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 flex(row);
-			flex-wrap: wrap;
-			
-			&.is-list {
-				flex-direction: column;
-			}
-			
-			&--label {
-				@include 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-primary;
-						background-color: $fu-primary;
-					
-						.checkbox-inside__icon {
-							opacity: 1;
-							transform: rotate(45deg);
-						}
-					}
-				}
-			}
-		}
-		
-		// 文字样式
-		&__content {
-			@include 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;
-			background-color: #ffffff;
-			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/fu-checkbox/props.js

@@ -1,126 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 选中的值
-		 */
-		value: {
-			type: [Array,String,Number],
-			default () {
-				return ''
-			}
-		},
-		modelValue: {
-			type: [Array,String,Number],
-			default () {
-				return '';
-			}
-		},
-		/**
-		 * @description 显示模式
-		 * @default 'default'
-		 */
-		mode: {
-			type: String,
-			default: 'default'
-		},
-		/**
-		 * @description 是否多选
-		 * @default false
-		 */
-		multiple: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 选择项数据，默认格式 [{text:'',value:''}]，可通过map字段映射
-		 */
-		list: {
-			type: Array,
-			default () {
-				return []
-			}
-		},
-		/**
-		 * @description 字段映射（默认 { text: 'text', value: 'value' }）
-		 */
-		map:{
-			type: Object,
-			default () {
-				return {
-					text: 'text',
-					value: 'value'
-				}
-			}
-		},
-		/**
-		 * @description 最小选择个数（仅multiple=true时生效）
-		 */
-		min: {
-			type: [Number,String],
-			default: ''
-		},
-		/**
-		 * @description 最大选择个数（仅multiple=true时生效）
-		 */
-		max: {
-			type: [Number,String],
-			default: ''
-		},
-		/**
-		 * @description 是否换行显示
-		 * @default false
-		 */
-		wrap: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 是否禁用全部checkbox
-		 * @default false
-		 */
-		disabled:{
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 选中状态下的颜色
-		 * @default '#2979ff'
-		 */
-		activeColor: {
-			type: String,
-			default: '#2979ff'
-		},
-		/**
-		 * @description 形状
-		 * @values 'circle' - 圆形, 'square' - 方形
-		 * @default 'circle'
-		 */
-		shape: {
-			type: String,
-			default: 'circle'
-		},
-		/**
-		 * @description 选中时，文本是否高亮（仅mode=default|list时生效）
-		 * @default true
-		 */
-		highlight: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 列表模式下icon显示位置（仅mode=list时生效）
-		 * @default 'left'
-		 */
-		iconPos: {
-			type: String,
-			default: 'left'
-		},
-		/**
-		 * @description 选中文本颜色，如为空则自动显示
-		 */
-		activeTextColor: {
-			type: String,
-			default: ''
-		}
-	}
-}