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

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

@@ -1,156 +0,0 @@
-<template>
-	<!-- #ifdef H5 -->
-	<tr class="uni-table-tr">
-		<th v-if="selection === 'selection' && ishead" class="checkbox" :class="{ 'tr-table--border': border }">
-			<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
-		</th>
-		<slot></slot>
-		<!-- <uni-th class="th-fixed">123</uni-th> -->
-	</tr>
-	<!-- #endif -->
-	<!-- #ifndef H5 -->
-	<view class="uni-table-tr">
-		<view v-if="selection === 'selection' " class="checkbox" :class="{ 'tr-table--border': border }">
-			<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
-		</view>
-		<slot></slot>
-	</view>
-	<!-- #endif -->
-</template>
-
-<script>
-	import tableCheckbox from './table-checkbox.vue'
-	/**
-	 * Tr 表格行组件
-	 * @description 表格行组件 仅包含 th,td 组件
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=
-	 */
-	export default {
-		name: 'uniTr',
-		components: {
-			tableCheckbox
-		},
-		props: {
-			disabled: {
-				type: Boolean,
-				default: false
-			},
-			keyValue: {
-				type: [String, Number],
-				default: ''
-			}
-		},
-		options: {
-			virtualHost: true
-		},
-		data() {
-			return {
-				value: false,
-				border: false,
-				selection: false,
-				widthThArr: [],
-				ishead: true,
-				checked: false,
-				indeterminate: false
-			}
-		},
-		created() {
-			this.root = this.getTable()
-			this.head = this.getTable('uniThead')
-			if (this.head) {
-				this.ishead = false
-				this.head.init(this)
-			}
-			this.border = this.root.border
-			this.selection = this.root.type
-			this.root.trChildren.push(this)
-			const rowData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
-			if (rowData) {
-				this.rowData = rowData
-			}
-			this.root.isNodata()
-		},
-		mounted() {
-			if (this.widthThArr.length > 0) {
-				const selectionWidth = this.selection === 'selection' ? 50 : 0
-				this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth
-			}
-		},
-		// #ifndef VUE3
-		destroyed() {
-			const index = this.root.trChildren.findIndex(i => i === this)
-			this.root.trChildren.splice(index, 1)
-			this.root.isNodata()
-		},
-		// #endif
-		// #ifdef VUE3
-		unmounted() {
-			const index = this.root.trChildren.findIndex(i => i === this)
-			this.root.trChildren.splice(index, 1)
-			this.root.isNodata()
-		},
-		// #endif
-		methods: {
-			minWidthUpdate(width) {
-				this.widthThArr.push(width)
-			},
-			// 选中
-			checkboxSelected(e) {
-				let rootData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
-				this.checked = e.checked
-				this.root.check(rootData || this, e.checked, rootData ? this.keyValue : null)
-			},
-			change(e) {
-				this.root.trChildren.forEach(item => {
-					if (item === this) {
-						this.root.check(this, e.detail.value.length > 0 ? true : false)
-					}
-				})
-			},
-			/**
-			 * 获取父元素实例
-			 */
-			getTable(name = 'uniTable') {
-				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-tr {
-		/* #ifndef APP-NVUE */
-		display: table-row;
-		transition: all 0.3s;
-		box-sizing: border-box;
-		/* #endif */
-	}
-
-	.checkbox {
-		padding: 0 8px;
-		width: 26px;
-		padding-left: 12px;
-		/* #ifndef APP-NVUE */
-		display: table-cell;
-		vertical-align: middle;
-		/* #endif */
-		color: #333;
-		font-weight: 500;
-		border-bottom: 1px #ebeef5 solid;
-		font-size: 14px;
-	}
-
-	.tr-table--border {
-		border-right: 1px #ebeef5 solid;
-	}
-
-	/* #ifndef APP-NVUE */
-	/* #endif */
-</style>

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

@@ -1,287 +0,0 @@
-<template>
-	<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick">
-		<slot></slot>
-	</view>
-</template>
-
-<script>
-	import {
-		createAnimation
-	} from './createAnimation'
-
-	/**
-	 * Transition 过渡动画
-	 * @description 简单过渡动画组件
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=985
-	 * @property {Boolean} show = [false|true] 控制组件显示或隐藏
-	 * @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
-	 *  @value fade 渐隐渐出过渡
-	 *  @value slide-top 由上至下过渡
-	 *  @value slide-right 由右至左过渡
-	 *  @value slide-bottom 由下至上过渡
-	 *  @value slide-left 由左至右过渡
-	 *  @value zoom-in 由小到大过渡
-	 *  @value zoom-out 由大到小过渡
-	 * @property {Number} duration 过渡动画持续时间
-	 * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
-	 */
-	export default {
-		name: 'uniTransition',
-		emits: ['click', 'change'],
-		props: {
-			show: {
-				type: Boolean,
-				default: false
-			},
-			modeClass: {
-				type: [Array, String],
-				default () {
-					return 'fade'
-				}
-			},
-			duration: {
-				type: Number,
-				default: 300
-			},
-			styles: {
-				type: Object,
-				default () {
-					return {}
-				}
-			},
-			customClass: {
-				type: String,
-				default: ''
-			}
-		},
-		data() {
-			return {
-				isShow: false,
-				transform: '',
-				opacity: 1,
-				animationData: {},
-				durationTime: 300,
-				config: {}
-			}
-		},
-		watch: {
-			show: {
-				handler(newVal) {
-					if (newVal) {
-						this.open()
-					} else {
-						// 避免上来就执行 close,导致动画错乱
-						if (this.isShow) {
-							this.close()
-						}
-					}
-				},
-				immediate: true
-			}
-		},
-		computed: {
-			// 生成样式数据
-			stylesObject() {
-				let styles = {
-					...this.styles,
-					'transition-duration': this.duration / 1000 + 's'
-				}
-				let transform = ''
-				for (let i in styles) {
-					let line = this.toLine(i)
-					transform += line + ':' + styles[i] + ';'
-				}
-				return transform
-			},
-			// 初始化动画条件
-			transformStyles() {
-				return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
-			}
-		},
-		created() {
-			// 动画默认配置
-			this.config = {
-				duration: this.duration,
-				timingFunction: 'ease',
-				transformOrigin: '50% 50%',
-				delay: 0
-			}
-			this.durationTime = this.duration
-		},
-		methods: {
-			/**
-			 *  ref 触发 初始化动画
-			 */
-			init(obj = {}) {
-				if (obj.duration) {
-					this.durationTime = obj.duration
-				}
-				this.animation = createAnimation(Object.assign(this.config, obj))
-			},
-			/**
-			 * 点击组件触发回调
-			 */
-			onClick() {
-				this.$emit('click', {
-					detail: this.isShow
-				})
-			},
-			/**
-			 * ref 触发 动画分组
-			 * @param {Object} obj
-			 */
-			step(obj, config = {}) {
-				if (!this.animation) return
-				for (let i in obj) {
-					try {
-						if (typeof obj[i] === 'object') {
-							this.animation[i](...obj[i])
-						} else {
-							this.animation[i](obj[i])
-						}
-					} catch (e) {
-						console.error(`方法 ${i} 不存在`)
-					}
-				}
-				this.animation.step(config)
-				return this
-			},
-			/**
-			 *  ref 触发 执行动画
-			 */
-			run(fn) {
-				if (!this.animation) return
-				this.animation.run(fn)
-			},
-			// 开始过度动画
-			open() {
-				clearTimeout(this.timer)
-				this.transform = ''
-				this.isShow = true
-				let {
-					opacity,
-					transform
-				} = this.styleInit(false)
-				if (typeof opacity !== 'undefined') {
-					this.opacity = opacity
-				}
-				this.transform = transform
-				// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
-				this.$nextTick(() => {
-					// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
-					this.timer = setTimeout(() => {
-						this.animation = createAnimation(this.config, this)
-						this.tranfromInit(false).step()
-						this.animation.run()
-						this.$emit('change', {
-							detail: this.isShow
-						})
-					}, 20)
-				})
-			},
-			// 关闭过度动画
-			close(type) {
-				if (!this.animation) return
-				this.tranfromInit(true)
-					.step()
-					.run(() => {
-						this.isShow = false
-						this.animationData = null
-						this.animation = null
-						let {
-							opacity,
-							transform
-						} = this.styleInit(false)
-						this.opacity = opacity || 1
-						this.transform = transform
-						this.$emit('change', {
-							detail: this.isShow
-						})
-					})
-			},
-			// 处理动画开始前的默认样式
-			styleInit(type) {
-				let styles = {
-					transform: ''
-				}
-				let buildStyle = (type, mode) => {
-					if (mode === 'fade') {
-						styles.opacity = this.animationType(type)[mode]
-					} else {
-						styles.transform += this.animationType(type)[mode] + ' '
-					}
-				}
-				if (typeof this.modeClass === 'string') {
-					buildStyle(type, this.modeClass)
-				} else {
-					this.modeClass.forEach(mode => {
-						buildStyle(type, mode)
-					})
-				}
-				return styles
-			},
-			// 处理内置组合动画
-			tranfromInit(type) {
-				let buildTranfrom = (type, mode) => {
-					let aniNum = null
-					if (mode === 'fade') {
-						aniNum = type ? 0 : 1
-					} else {
-						aniNum = type ? '-100%' : '0'
-						if (mode === 'zoom-in') {
-							aniNum = type ? 0.8 : 1
-						}
-						if (mode === 'zoom-out') {
-							aniNum = type ? 1.2 : 1
-						}
-						if (mode === 'slide-right') {
-							aniNum = type ? '100%' : '0'
-						}
-						if (mode === 'slide-bottom') {
-							aniNum = type ? '100%' : '0'
-						}
-					}
-					this.animation[this.animationMode()[mode]](aniNum)
-				}
-				if (typeof this.modeClass === 'string') {
-					buildTranfrom(type, this.modeClass)
-				} else {
-					this.modeClass.forEach(mode => {
-						buildTranfrom(type, mode)
-					})
-				}
-
-				return this.animation
-			},
-			animationType(type) {
-				return {
-					fade: type ? 1 : 0,
-					'slide-top': `translateY(${type ? '0' : '-100%'})`,
-					'slide-right': `translateX(${type ? '0' : '100%'})`,
-					'slide-bottom': `translateY(${type ? '0' : '100%'})`,
-					'slide-left': `translateX(${type ? '0' : '-100%'})`,
-					'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
-					'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
-				}
-			},
-			// 内置动画类型与实际动画对应字典
-			animationMode() {
-				return {
-					fade: 'opacity',
-					'slide-top': 'translateY',
-					'slide-right': 'translateX',
-					'slide-bottom': 'translateY',
-					'slide-left': 'translateX',
-					'zoom-in': 'scale',
-					'zoom-out': 'scale'
-				}
-			},
-			// 驼峰转中横线
-			toLine(name) {
-				return name.replace(/([A-Z])/g, '-$1').toLowerCase()
-			}
-		}
-	}
-</script>
-
-<style scoped></style>