@10yun/cv-mobile-ui 0.4.1 → 0.4.2

package/ui-cv/cv-table/uni-table.vue

@@ -1,455 +0,0 @@
-<template>
-	<view class="uni-table-scroll" :class="{ 'table--border': border, 'border-none': !noData }">
-		<!-- #ifdef H5 -->
-		<table class="uni-table" border="0" cellpadding="0" cellspacing="0" :class="{ 'table--stripe': stripe }" :style="{ 'min-width': minWidth + 'px' }">
-			<slot></slot>
-			<view v-if="noData" class="uni-table-loading">
-				<view class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</view>
-			</view>
-			<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }">
-				<div class="uni-table--loader"></div>
-			</view>
-		</table>
-		<!-- #endif -->
-		<!-- #ifndef H5 -->
-		<view class="uni-table" :style="{ 'min-width': minWidth + 'px' }" :class="{ 'table--stripe': stripe }">
-			<slot></slot>
-			<view v-if="noData" class="uni-table-loading">
-				<view class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</view>
-			</view>
-			<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }">
-				<div class="uni-table--loader"></div>
-			</view>
-		</view>
-		<!-- #endif -->
-	</view>
-</template>
-
-<script>
-	/**
-	 * Table 表格
-	 * @description 用于展示多条结构类似的数据
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
-	 * @property {Boolean} 	border 				是否带有纵向边框
-	 * @property {Boolean} 	stripe 				是否显示斑马线
-	 * @property {Boolean} 	type 					是否开启多选
-	 * @property {String} 	emptyText 			空数据时显示的文本内容
-	 * @property {Boolean} 	loading 			显示加载中
-	 * @event {Function} 	selection-change 	开启多选时，当选择项发生变化时会触发该事件
-	 */
-	export default {
-		name: 'uniTable',
-		options: {
-			virtualHost: true
-		},
-		emits: ['selection-change'],
-		props: {
-			data: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			// 是否有竖线
-			border: {
-				type: Boolean,
-				default: false
-			},
-			// 是否显示斑马线
-			stripe: {
-				type: Boolean,
-				default: false
-			},
-			// 多选
-			type: {
-				type: String,
-				default: ''
-			},
-			// 没有更多数据
-			emptyText: {
-				type: String,
-				default: '没有更多数据'
-			},
-			loading: {
-				type: Boolean,
-				default: false
-			},
-			rowKey: {
-				type: String,
-				default: ''
-			}
-		},
-		data() {
-			return {
-				noData: true,
-				minWidth: 0,
-				multiTableHeads: []
-			}
-		},
-		watch: {
-			loading(val) {},
-			data(newVal) {
-				let theadChildren = this.theadChildren
-				let rowspan = 1
-				if (this.theadChildren) {
-					rowspan = this.theadChildren.rowspan
-				}
-
-				// this.trChildren.length - rowspan
-				this.noData = false
-				// this.noData = newVal.length === 0 
-			}
-		},
-		created() {
-			// 定义tr的实例数组
-			this.trChildren = []
-			this.thChildren = []
-			this.theadChildren = null
-			this.backData = []
-			this.backIndexData = []
-		},
-
-		methods: {
-			isNodata() {
-				let theadChildren = this.theadChildren
-				let rowspan = 1
-				if (this.theadChildren) {
-					rowspan = this.theadChildren.rowspan
-				}
-				this.noData = this.trChildren.length - rowspan <= 0
-			},
-			/**
-			 * 选中所有
-			 */
-			selectionAll() {
-				let startIndex = 1
-				let theadChildren = this.theadChildren
-				if (!this.theadChildren) {
-					theadChildren = this.trChildren[0]
-				} else {
-					startIndex = theadChildren.rowspan - 1
-				}
-				let isHaveData = this.data && this.data.length.length > 0
-				theadChildren.checked = true
-				theadChildren.indeterminate = false
-				this.trChildren.forEach((item, index) => {
-					if (!item.disabled) {
-						item.checked = true
-						if (isHaveData && item.keyValue) {
-							const row = this.data.find(v => v[this.rowKey] === item.keyValue)
-							if (!this.backData.find(v => v[this.rowKey] === row[this.rowKey])) {
-								this.backData.push(row)
-							}
-						}
-						if (index > (startIndex - 1) && this.backIndexData.indexOf(index - startIndex) === -1) {
-							this.backIndexData.push(index - startIndex)
-						}
-					}
-				})
-				// this.backData = JSON.parse(JSON.stringify(this.data))
-				this.$emit('selection-change', {
-					detail: {
-						value: this.backData,
-						index: this.backIndexData
-					}
-				})
-			},
-			/**
-			 * 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
-			 */
-			toggleRowSelection(row, selected) {
-				// if (!this.theadChildren) return
-				row = [].concat(row)
-
-				this.trChildren.forEach((item, index) => {
-					// if (item.keyValue) {
-
-					const select = row.findIndex(v => {
-						//
-						if (typeof v === 'number') {
-							return v === index - 1
-						} else {
-							return v[this.rowKey] === item.keyValue
-						}
-					})
-					let ischeck = item.checked
-					if (select !== -1) {
-						if (typeof selected === 'boolean') {
-							item.checked = selected
-						} else {
-							item.checked = !item.checked
-						}
-						if (ischeck !== item.checked) {
-							this.check(item.rowData || item, item.checked, item.rowData ? item.keyValue : null, true)
-						}
-					}
-					// }
-				})
-				this.$emit('selection-change', {
-					detail: {
-						value: this.backData,
-						index: this.backIndexData
-					}
-				})
-			},
-
-			/**
-			 * 用于多选表格，清空用户的选择
-			 */
-			clearSelection() {
-				let theadChildren = this.theadChildren
-				if (!this.theadChildren) {
-					theadChildren = this.trChildren[0]
-				}
-				// if (!this.theadChildren) return
-				theadChildren.checked = false
-				theadChildren.indeterminate = false
-				this.trChildren.forEach(item => {
-					// if (item.keyValue) {
-					item.checked = false
-					// }
-				})
-				this.backData = []
-				this.backIndexData = []
-				this.$emit('selection-change', {
-					detail: {
-						value: [],
-						index: []
-					}
-				})
-			},
-			/**
-			 * 用于多选表格，切换所有行的选中状态
-			 */
-			toggleAllSelection() {
-				let list = []
-				let startIndex = 1
-				let theadChildren = this.theadChildren
-				if (!this.theadChildren) {
-					theadChildren = this.trChildren[0]
-				} else {
-					startIndex = theadChildren.rowspan - 1
-				}
-				this.trChildren.forEach((item, index) => {
-					if (!item.disabled) {
-						if (index > (startIndex - 1)) {
-							list.push(index - startIndex)
-						}
-					}
-				})
-				this.toggleRowSelection(list)
-			},
-
-			/**
-			 * 选中\取消选中
-			 * @param {Object} child
-			 * @param {Object} check
-			 * @param {Object} rowValue
-			 */
-			check(child, check, keyValue, emit) {
-				let theadChildren = this.theadChildren
-				if (!this.theadChildren) {
-					theadChildren = this.trChildren[0]
-				}
-
-
-
-				let childDomIndex = this.trChildren.findIndex((item, index) => child === item)
-				if (childDomIndex < 0) {
-					childDomIndex = this.data.findIndex(v => v[this.rowKey] === keyValue) + 1
-				}
-				const dataLen = this.trChildren.filter(v => !v.disabled && v.keyValue).length
-				if (childDomIndex === 0) {
-					check ? this.selectionAll() : this.clearSelection()
-					return
-				}
-
-				if (check) {
-					if (keyValue) {
-						this.backData.push(child)
-					}
-					this.backIndexData.push(childDomIndex - 1)
-				} else {
-					const index = this.backData.findIndex(v => v[this.rowKey] === keyValue)
-					const idx = this.backIndexData.findIndex(item => item === childDomIndex - 1)
-					if (keyValue) {
-						this.backData.splice(index, 1)
-					}
-					this.backIndexData.splice(idx, 1)
-				}
-
-				const domCheckAll = this.trChildren.find((item, index) => index > 0 && !item.checked && !item.disabled)
-				if (!domCheckAll) {
-					theadChildren.indeterminate = false
-					theadChildren.checked = true
-				} else {
-					theadChildren.indeterminate = true
-					theadChildren.checked = false
-				}
-
-				if (this.backIndexData.length === 0) {
-					theadChildren.indeterminate = false
-				}
-
-				if (!emit) {
-					this.$emit('selection-change', {
-						detail: {
-							value: this.backData,
-							index: this.backIndexData
-						}
-					})
-				}
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	@charset "UTF-8";
-
-	.uni-table-scroll {
-		width: 100%;
-		/* #ifndef APP-NVUE */
-		overflow-x: auto;
-		/* #endif */
-	}
-
-	.uni-table {
-		position: relative;
-		width: 100%;
-		border-radius: 5px;
-		background-color: #fff;
-		/* #ifndef APP-NVUE */
-		box-sizing: border-box;
-		display: table;
-		overflow-x: auto;
-		/* #endif */
-	}
-
-	.uni-table ::v-deep .uni-table-tr:nth-child(n+2):hover {
-		background-color: #f5f7fa;
-	}
-
-	.uni-table ::v-deep .uni-table-thead .uni-table-tr:hover {
-		background-color: #fafafa;
-	}
-
-	.table--border {
-		border: 1px #ebeef5 solid;
-		border-right: none;
-	}
-
-	.border-none {
-		/* #ifndef APP-NVUE */
-		border-bottom: none;
-		/* #endif */
-	}
-
-	.table--stripe {
-		/* #ifndef APP-NVUE */
-		/* #endif */
-	}
-
-	.table--stripe ::v-deep .uni-table-tr:nth-child(2n+3) {
-		background-color: #fafafa;
-	}
-
-	/* 表格加载、无数据样式 */
-	.uni-table-loading {
-		position: relative;
-		/* #ifndef APP-NVUE */
-		display: table-row;
-		/* #endif */
-		height: 50px;
-		line-height: 50px;
-		overflow: hidden;
-		box-sizing: border-box;
-	}
-
-	.empty-border {
-		border-right: 1px #ebeef5 solid;
-	}
-
-	.uni-table-text {
-		position: absolute;
-		right: 0;
-		left: 0;
-		text-align: center;
-		font-size: 14px;
-		color: #999;
-	}
-
-	.uni-table-mask {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		background-color: rgba(255, 255, 255, 0.8);
-		z-index: 99;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		margin: auto;
-		transition: all 0.5s;
-		/* #endif */
-		justify-content: center;
-		align-items: center;
-	}
-
-	.uni-table--loader {
-		width: 30px;
-		height: 30px;
-		border: 2px solid #aaa;
-		border-radius: 50%;
-		/* #ifndef APP-NVUE */
-		animation: 2s uni-table--loader linear infinite;
-		/* #endif */
-		position: relative;
-	}
-
-	@keyframes uni-table--loader {
-		0% {
-			transform: rotate(360deg);
-		}
-
-		10% {
-			border-left-color: transparent;
-		}
-
-		20% {
-			border-bottom-color: transparent;
-		}
-
-		30% {
-			border-right-color: transparent;
-		}
-
-		40% {
-			border-top-color: transparent;
-		}
-
-		50% {
-			transform: rotate(0deg);
-		}
-
-		60% {
-			border-top-color: transparent;
-		}
-
-		70% {
-			border-left-color: transparent;
-		}
-
-		80% {
-			border-bottom-color: transparent;
-		}
-
-		90% {
-			border-right-color: transparent;
-		}
-
-		100% {
-			transform: rotate(-360deg);
-		}
-	}
-</style>

package/ui-cv/cv-tag/uni-tag.vue

@@ -1,283 +0,0 @@
-<template>
-	<text class="uni-tag" v-if="text" :class="classes" :style="customStyle" @click="onClick">
-		<slot />{{text}}
-		<slot name="right" />
-	</text>
-</template>
-
-<script>
-	/**
-	 * Tag 标签
-	 * @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=35
-	 * @property {String} text 标签内容
-	 * @property {String} size = [normal|small] 大小尺寸
-	 * 	@value normal 正常
-	 * 	@value small 小尺寸
-	 * @property {String} type = [default|primary|success｜warning｜error｜royal]  颜色类型
-	 * 	@value default 灰色
-	 * 	@value primary 蓝色
-	 * 	@value success 绿色
-	 * 	@value warning 黄色
-	 * 	@value error 红色
-	 * 	@value royal 紫色
-	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
-	 * @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
-	 * @property {Boolean} circle = [true|false] 是否为圆角
-	 * @event {Function} click 点击 Tag 触发事件
-	 */
-
-	export default {
-		name: "UniTag",
-		emits: ['click'],
-		props: {
-			type: {
-				// 标签类型default、primary、success、warning、error、royal
-				type: String,
-				default: "default"
-			},
-			size: {
-				// 标签大小 normal, small
-				type: String,
-				default: "normal"
-			},
-			// 标签内容
-			text: {
-				type: String,
-				default: ""
-			},
-			disabled: {
-				// 是否为禁用状态
-				type: [Boolean, String],
-				default: false
-			},
-			inverted: {
-				// 是否为空心
-				type: [Boolean, String],
-				default: false
-			},
-			circle: {
-				// 是否为圆角样式
-				type: [Boolean, String],
-				default: false
-			},
-			mark: {
-				// 是否为标记样式
-				type: [Boolean, String],
-				default: false
-			},
-			customStyle: {
-				type: String,
-				default: ''
-			}
-		},
-		computed: {
-			classes() {
-				const {
-					type,
-					disabled,
-					inverted,
-					circle,
-					mark,
-					size,
-					isTrue
-				} = this
-				const classArr = [
-					'uni-tag--' + type,
-					isTrue(disabled) ? 'uni-tag--disabled' : '',
-					isTrue(inverted) ? type + '-uni-tag--inverted' : '',
-					isTrue(circle) ? 'uni-tag--circle' : '',
-					isTrue(mark) ? 'uni-tag--mark' : '',
-					'uni-tag--' + size,
-					type === 'default' ? 'uni-tag--default' : 'uni-tag-text',
-					isTrue(inverted) ? 'uni-tag-text--' + type : '',
-					size === 'small' ? 'uni-tag-text--small' : ''
-				]
-				return classArr.join(' ')
-			}
-		},
-		methods: {
-			isTrue(value) {
-				return value === true || value === 'true'
-			},
-			onClick() {
-				if (this.isTrue(this.disabled)) return
-				this.$emit("click");
-			}
-		}
-	};
-</script>
-
-<style scoped>
-	.uni-tag {
-		/* #ifndef APP-NVUE */
-		display: inline-block;
-		/* #endif */
-		/* #ifdef APP-NVUE */
-		align-self: flex-start;
-		/* #endif */
-		padding: 0px 16px;
-		line-height: 30px;
-		color: #333;
-		border-radius: 3px;
-		background-color: #f8f8f8;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: #f8f8f8;
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
-
-	.uni-tag--circle {
-		border-radius: 15px;
-	}
-
-	.uni-tag--mark {
-		border-top-left-radius: 0;
-		border-bottom-left-radius: 0;
-		border-top-right-radius: 15px;
-		border-bottom-right-radius: 15px;
-	}
-
-	.uni-tag--disabled {
-		opacity: 0.5;
-		/* #ifdef H5 */
-		cursor: not-allowed;
-		/* #endif */
-	}
-
-	.uni-tag--small {
-		height: 20px;
-		padding: 0px 8px;
-		line-height: 20px;
-		font-size: 12px;
-	}
-
-	.uni-tag--default {
-		color: #333;
-		font-size: 14px;
-	}
-
-	.uni-tag--royal {
-		color: #333;
-		font-size: 14px;
-	}
-
-	.uni-tag-text--small {
-		font-size: 12px;
-	}
-
-	.uni-tag-text {
-		color: #fff;
-		font-size: 14px;
-	}
-
-	.uni-tag-text--primary {
-		color: #007aff;
-	}
-
-	.uni-tag-text--success {
-		color: #4cd964;
-	}
-
-	.uni-tag-text--warning {
-		color: #f0ad4e;
-	}
-
-	.uni-tag-text--error {
-		color: #dd524d;
-	}
-
-	.uni-tag-text--royal {
-		color: #4335d6;
-	}
-
-	.uni-tag--primary {
-		color: #fff;
-		background-color: #007aff;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: #007aff;
-	}
-
-	.primary-uni-tag--inverted {
-		color: #007aff;
-		background-color: #ffffff;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: #007aff;
-	}
-
-	.uni-tag--success {
-		color: #fff;
-		background-color: #4cd964;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: #4cd964;
-	}
-
-	.success-uni-tag--inverted {
-		color: #4cd964;
-		background-color: #ffffff;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: #4cd964;
-	}
-
-	.uni-tag--warning {
-		color: #fff;
-		background-color: #f0ad4e;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: #f0ad4e;
-	}
-
-	.warning-uni-tag--inverted {
-		color: #f0ad4e;
-		background-color: #ffffff;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: #f0ad4e;
-	}
-
-	.uni-tag--error {
-		color: #fff;
-		background-color: #dd524d;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: #dd524d;
-	}
-
-	.error-uni-tag--inverted {
-		color: #dd524d;
-		background-color: #ffffff;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: #dd524d;
-	}
-
-	.uni-tag--royal {
-		color: #fff;
-		background-color: #4335d6;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: #4335d6;
-	}
-
-	.royal-uni-tag--inverted {
-		color: #4335d6;
-		background-color: #ffffff;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: #4335d6;
-	}
-
-	.uni-tag--inverted {
-		color: #333;
-		background-color: #ffffff;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: #f8f8f8;
-	}
-</style>