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

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

@@ -0,0 +1,283 @@
+<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>

package/ui-uni/uni-tbody/uni-tbody.vue

@@ -0,0 +1,30 @@
+<template>
+	<!-- #ifdef H5 -->
+	<tbody>
+		<slot></slot>
+	</tbody>
+	<!-- #endif -->
+	<!-- #ifndef H5 -->
+	<view>
+		<slot></slot>
+	</view>
+	<!-- #endif -->
+</template>
+
+<script>
+	export default {
+		name: 'uniBody',
+		options: {
+			virtualHost: true
+		},
+		data() {
+			return {
+
+			}
+		},
+		created() {},
+		methods: {}
+	}
+</script>
+
+<style scoped></style>

package/ui-uni/uni-td/uni-td.vue

@@ -0,0 +1,88 @@
+<template>
+	<!-- #ifdef H5 -->
+	<td class="uni-table-td" :rowspan="rowspan" :colspan="colspan" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
+		<slot></slot>
+	</td>
+	<!-- #endif -->
+	<!-- #ifndef H5 -->
+	<!-- :class="{'table--border':border}"  -->
+	<view class="uni-table-td" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
+		<slot></slot>
+	</view>
+	<!-- #endif -->
+
+</template>
+
+<script>
+	/**
+	 * Td 单元格
+	 * @description 表格中的标准单元格组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
+	 * @property {Number} 	align = [left|center|right]	单元格对齐方式
+	 */
+	export default {
+		name: 'uniTd',
+		options: {
+			virtualHost: true
+		},
+		props: {
+			width: {
+				type: [String, Number],
+				default: ''
+			},
+			align: {
+				type: String,
+				default: 'left'
+			},
+			rowspan: {
+				type: [Number, String],
+				default: 1
+			},
+			colspan: {
+				type: [Number, String],
+				default: 1
+			}
+		},
+		data() {
+			return {
+				border: false
+			};
+		},
+		created() {
+			this.root = this.getTable()
+			this.border = this.root.border
+		},
+		methods: {
+			/**
+			 * 获取父元素实例
+			 */
+			getTable() {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== 'uniTable') {
+					parent = parent.$parent;
+					if (!parent) return false;
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	.uni-table-td {
+		display: table-cell;
+		padding: 8px 10px;
+		font-size: 14px;
+		border-bottom: 1px #EBEEF5 solid;
+		font-weight: 400;
+		color: #606266;
+		line-height: 23px;
+		box-sizing: border-box;
+	}
+
+	.table--border {
+		border-right: 1px #EBEEF5 solid;
+	}
+</style>

package/ui-uni/uni-th/uni-th.vue

@@ -0,0 +1,259 @@
+<template>
+	<!-- #ifdef H5 -->
+	<th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }">
+		<view class="uni-table-th-row">
+			<view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
+				<slot></slot>
+				<view v-if="sortable" class="arrow-box">
+					<text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>
+					<text class="arrow down" :class="{ active: descending }" @click.stop="descendingFn"></text>
+				</view>
+			</view>
+			<dropdown v-if="filterType || filterData.length" :filterData="filterData" :filterType="filterType" @change="ondropdown"></dropdown>
+		</view>
+	</th>
+	<!-- #endif -->
+	<!-- #ifndef H5 -->
+	<view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }">
+		<slot></slot>
+	</view>
+	<!-- #endif -->
+</template>
+
+<script>
+	import dropdown from './filter-dropdown.vue'
+	/**
+	 * Th 表头
+	 * @description 表格内的表头单元格组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
+	 * @property {Number} 	width 						单元格宽度
+	 * @property {Boolean} 	sortable 					是否启用排序
+	 * @property {Number} 	align = [left|center|right]	单元格对齐方式
+	 * @value left   	单元格文字左侧对齐
+	 * @value center	单元格文字居中
+	 * @value right		单元格文字右侧对齐
+	 * @property {Array}	filterData 筛选数据
+	 * @property {String}	filterType	[search|select] 筛选类型
+	 * @value search	关键字搜素
+	 * @value select	条件选择
+	 * @event {Function} sort-change 排序触发事件
+	 */
+	export default {
+		name: 'uniTh',
+		options: {
+			virtualHost: true
+		},
+		components: {
+			dropdown
+		},
+		emits: ['sort-change', 'filter-change'],
+		props: {
+			width: {
+				type: [String, Number],
+				default: ''
+			},
+			align: {
+				type: String,
+				default: 'left'
+			},
+			rowspan: {
+				type: [Number, String],
+				default: 1
+			},
+			colspan: {
+				type: [Number, String],
+				default: 1
+			},
+			sortable: {
+				type: Boolean,
+				default: false
+			},
+			filterType: {
+				type: String,
+				default: ""
+			},
+			filterData: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				border: false,
+				ascending: false,
+				descending: false
+			}
+		},
+		computed: {
+			contentAlign() {
+				let align = 'left'
+				switch (this.align) {
+					case 'left':
+						align = 'flex-start'
+						break
+					case 'center':
+						align = 'center'
+						break
+					case 'right':
+						align = 'flex-end'
+						break
+				}
+				return align
+			}
+		},
+		created() {
+			this.root = this.getTable('uniTable')
+			this.rootTr = this.getTable('uniTr')
+			this.rootTr.minWidthUpdate(this.width ? this.width : 140)
+			this.border = this.root.border
+			this.root.thChildren.push(this)
+		},
+		methods: {
+			sort() {
+				if (!this.sortable) return
+				this.clearOther()
+				if (!this.ascending && !this.descending) {
+					this.ascending = true
+					this.$emit('sort-change', {
+						order: 'ascending'
+					})
+					return
+				}
+				if (this.ascending && !this.descending) {
+					this.ascending = false
+					this.descending = true
+					this.$emit('sort-change', {
+						order: 'descending'
+					})
+					return
+				}
+
+				if (!this.ascending && this.descending) {
+					this.ascending = false
+					this.descending = false
+					this.$emit('sort-change', {
+						order: null
+					})
+				}
+			},
+			ascendingFn() {
+				this.clearOther()
+				this.ascending = !this.ascending
+				this.descending = false
+				this.$emit('sort-change', {
+					order: this.ascending ? 'ascending' : null
+				})
+			},
+			descendingFn() {
+				this.clearOther()
+				this.descending = !this.descending
+				this.ascending = false
+				this.$emit('sort-change', {
+					order: this.descending ? 'descending' : null
+				})
+			},
+			clearOther() {
+				this.root.thChildren.map(item => {
+					if (item !== this) {
+						item.ascending = false
+						item.descending = false
+					}
+					return item
+				})
+			},
+			ondropdown(e) {
+				this.$emit("filter-change", e)
+			},
+			/**
+			 * 获取父元素实例
+			 */
+			getTable(name) {
+				let parent = this.$parent
+				let parentName = parent.$options.name
+				while (parentName !== name) {
+					parent = parent.$parent
+					if (!parent) return false
+					parentName = parent.$options.name
+				}
+				return parent
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.uni-table-th {
+		padding: 12px 10px;
+		/* #ifndef APP-NVUE */
+		display: table-cell;
+		box-sizing: border-box;
+		/* #endif */
+		font-size: 14px;
+		font-weight: bold;
+		color: #909399;
+		border-bottom: 1px #ebeef5 solid;
+	}
+
+	.uni-table-th-row {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.table--border {
+		border-right: 1px #ebeef5 solid;
+	}
+
+	.uni-table-th-content {
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+
+	.arrow {
+		display: block;
+		position: relative;
+		width: 10px;
+		height: 8px;
+		left: 5px;
+		overflow: hidden;
+		cursor: pointer;
+	}
+
+	.down {
+		top: 3px;
+	}
+
+	.down ::after {
+		content: "";
+		width: 8px;
+		height: 8px;
+		position: absolute;
+		left: 2px;
+		top: -5px;
+		transform: rotate(45deg);
+		background-color: #ccc;
+	}
+
+	.down.active ::after {
+		background-color: #007aff;
+	}
+
+	.up ::after {
+		content: "";
+		width: 8px;
+		height: 8px;
+		position: absolute;
+		left: 2px;
+		top: 5px;
+		transform: rotate(45deg);
+		background-color: #ccc;
+	}
+
+	.up.active ::after {
+		background-color: #007aff;
+	}
+</style>