@vtj/materials 0.10.6 → 0.10.8

package/src/uni-ui/lib/uni-tr/table-checkbox.vue

@@ -1,179 +1,181 @@
 <template>
-	<view class="uni-table-checkbox" @click="selected">
-		<view v-if="!indeterminate" class="checkbox__inner" :class="{'is-checked':isChecked,'is-disable':isDisabled}">
-			<view class="checkbox__inner-icon"></view>
-		</view>
-		<view v-else class="checkbox__inner checkbox--indeterminate">
-			<view class="checkbox__inner-icon"></view>
-		</view>
-	</view>
+  <view class="uni-table-checkbox" @click="selected">
+    <view
+      v-if="!indeterminate"
+      class="checkbox__inner"
+      :class="{ 'is-checked': isChecked, 'is-disable': isDisabled }">
+      <view class="checkbox__inner-icon"></view>
+    </view>
+    <view v-else class="checkbox__inner checkbox--indeterminate">
+      <view class="checkbox__inner-icon"></view>
+    </view>
+  </view>
 </template>
 
 <script>
-	export default {
-		name: 'TableCheckbox',
-		emits:['checkboxSelected'],
-		props: {
-			indeterminate: {
-				type: Boolean,
-				default: false
-			},
-			checked: {
-				type: [Boolean,String],
-				default: false
-			},
-			disabled: {
-				type: Boolean,
-				default: false
-			},
-			index: {
-				type: Number,
-				default: -1
-			},
-			cellData: {
-				type: Object,
-				default () {
-					return {}
-				}
-			}
-		},
-		watch:{
-			checked(newVal){
-				if(typeof this.checked === 'boolean'){
-					this.isChecked = newVal
-				}else{
-					this.isChecked = true
-				}
-			},
-			indeterminate(newVal){
-				this.isIndeterminate = newVal
-			}
-		},
-		data() {
-			return {
-				isChecked: false,
-				isDisabled: false,
-				isIndeterminate:false
-			}
-		},
-		created() {
-			if(typeof this.checked === 'boolean'){
-				this.isChecked = this.checked
-			}
-			this.isDisabled = this.disabled
-		},
-		methods: {
-			selected() {
-				if (this.isDisabled) return
-				this.isIndeterminate = false
-				this.isChecked = !this.isChecked
-				this.$emit('checkboxSelected', {
-					checked: this.isChecked,
-					data: this.cellData
-				})
-			}
-		}
-	}
+  export default {
+    name: 'TableCheckbox',
+    emits: ['checkboxSelected'],
+    props: {
+      indeterminate: {
+        type: Boolean,
+        default: false
+      },
+      checked: {
+        type: [Boolean, String],
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      index: {
+        type: Number,
+        default: -1
+      },
+      cellData: {
+        type: Object,
+        default() {
+          return {};
+        }
+      }
+    },
+    watch: {
+      checked(newVal) {
+        if (typeof this.checked === 'boolean') {
+          this.isChecked = newVal;
+        } else {
+          this.isChecked = true;
+        }
+      },
+      indeterminate(newVal) {
+        this.isIndeterminate = newVal;
+      }
+    },
+    data() {
+      return {
+        isChecked: false,
+        isDisabled: false,
+        isIndeterminate: false
+      };
+    },
+    created() {
+      if (typeof this.checked === 'boolean') {
+        this.isChecked = this.checked;
+      }
+      this.isDisabled = this.disabled;
+    },
+    methods: {
+      selected() {
+        if (this.isDisabled) return;
+        this.isIndeterminate = false;
+        this.isChecked = !this.isChecked;
+        this.$emit('checkboxSelected', {
+          checked: this.isChecked,
+          data: this.cellData
+        });
+      }
+    }
+  };
 </script>
 
 <style lang="scss">
-	$uni-primary: #007aff !default;
-	$border-color: #DCDFE6;
-	$disable:0.4;
+  $uni-primary: #007aff !default;
+  $border-color: #dcdfe6;
+  $disable: 0.4;
 
-	.uni-table-checkbox {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		position: relative;
-		margin: 5px 0;
-		cursor: pointer;
+  .uni-table-checkbox {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin: 5px 0;
+    cursor: pointer;
 
-		// 多选样式
-		.checkbox__inner {
-			/* #ifndef APP-NVUE */
-			flex-shrink: 0;
-			box-sizing: border-box;
-			/* #endif */
-			position: relative;
-			width: 16px;
-			height: 16px;
-			border: 1px solid $border-color;
-			border-radius: 2px;
-			background-color: #fff;
-			z-index: 1;
+    // 多选样式
+    .checkbox__inner {
+      /* #ifndef APP-NVUE */
+      flex-shrink: 0;
+      box-sizing: border-box;
+      /* #endif */
+      position: relative;
+      width: 16px;
+      height: 16px;
+      border: 1px solid $border-color;
+      border-radius: 2px;
+      background-color: #fff;
+      z-index: 1;
 
-			.checkbox__inner-icon {
-				position: absolute;
-				/* #ifdef APP-NVUE */
-				top: 2px;
-				/* #endif */
-				/* #ifndef APP-NVUE */
-				top: 2px;
-				/* #endif */
-				left: 5px;
-				height: 7px;
-				width: 3px;
-				border: 1px solid #fff;
-				border-left: 0;
-				border-top: 0;
-				opacity: 0;
-				transform-origin: center;
-				transform: rotate(45deg);
-				box-sizing: content-box;
-			}
+      .checkbox__inner-icon {
+        position: absolute;
+        /* #ifdef APP-NVUE */
+        top: 2px;
+        /* #endif */
+        /* #ifndef APP-NVUE */
+        top: 2px;
+        /* #endif */
+        left: 5px;
+        height: 7px;
+        width: 3px;
+        border: 1px solid #fff;
+        border-left: 0;
+        border-top: 0;
+        opacity: 0;
+        transform-origin: center;
+        transform: rotate(45deg);
+        box-sizing: content-box;
+      }
 
-			&.checkbox--indeterminate {
-				border-color: $uni-primary;
-				background-color: $uni-primary;
+      &.checkbox--indeterminate {
+        border-color: $uni-primary;
+        background-color: $uni-primary;
 
-				.checkbox__inner-icon {
-					position: absolute;
-					opacity: 1;
-					transform: rotate(0deg);
-					height: 2px;
-					top: 0;
-					bottom: 0;
-					margin: auto;
-					left: 0px;
-					right: 0px;
-					bottom: 0;
-					width: auto;
-					border: none;
-					border-radius: 2px;
-					transform: scale(0.5);
-					background-color: #fff;
-				}
-			}
-			&:hover{
-				border-color: $uni-primary;
-			}
-			// 禁用
-			&.is-disable {
-				/* #ifdef H5 */
-				cursor: not-allowed;
-				/* #endif */
-				background-color: #F2F6FC;
-				border-color: $border-color;
-			}
+        .checkbox__inner-icon {
+          position: absolute;
+          opacity: 1;
+          transform: rotate(0deg);
+          height: 2px;
+          top: 0;
+          bottom: 0;
+          margin: auto;
+          left: 0px;
+          right: 0px;
+          bottom: 0;
+          width: auto;
+          border: none;
+          border-radius: 2px;
+          transform: scale(0.5);
+          background-color: #fff;
+        }
+      }
+      &:hover {
+        border-color: $uni-primary;
+      }
+      // 禁用
+      &.is-disable {
+        /* #ifdef H5 */
+        cursor: not-allowed;
+        /* #endif */
+        background-color: #f2f6fc;
+        border-color: $border-color;
+      }
 
-			// 选中
-			&.is-checked {
-				border-color: $uni-primary;
-				background-color: $uni-primary;
+      // 选中
+      &.is-checked {
+        border-color: $uni-primary;
+        background-color: $uni-primary;
 
-				.checkbox__inner-icon {
-					opacity: 1;
-					transform: rotate(45deg);
-				}
+        .checkbox__inner-icon {
+          opacity: 1;
+          transform: rotate(45deg);
+        }
 
-				// 选中禁用
-				&.is-disable {
-					opacity: $disable;
-				}
-			}
-			
-		}
-	}
+        // 选中禁用
+        &.is-disable {
+          opacity: $disable;
+        }
+      }
+    }
+  }
 </style>

package/src/uni-ui/lib/uni-tr/uni-tr.vue

@@ -56,7 +56,7 @@
     },
     options: {
       // #ifdef MP-TOUTIAO
-      virtualHost: false,
+      // virtualHost: false,
       // #endif
       // #ifndef MP-TOUTIAO
       virtualHost: true
@@ -100,11 +100,11 @@
       }
     },
     // #ifndef VUE3
-    destroyed() {
-      const index = this.root.trChildren.findIndex((i) => i === this);
-      this.root.trChildren.splice(index, 1);
-      this.root.isNodata();
-    },
+    // destroyed() {
+    //   const index = this.root.trChildren.findIndex((i) => i === this);
+    //   this.root.trChildren.splice(index, 1);
+    //   this.root.isNodata();
+    // },
     // #endif
     // #ifdef VUE3
     unmounted() {

package/src/uni-ui/lib/uni-transition/createAnimation.js

@@ -0,0 +1,131 @@
+// const defaultOption = {
+// 	duration: 300,
+// 	timingFunction: 'linear',
+// 	delay: 0,
+// 	transformOrigin: '50% 50% 0'
+// }
+// #ifdef APP-NVUE
+const nvueAnimation = uni.requireNativePlugin('animation')
+// #endif
+class MPAnimation {
+	constructor(options, _this) {
+		this.options = options
+		// 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter should be Object instead of ProxyObject的错误
+		this.animation = uni.createAnimation({
+			...options
+		})
+		this.currentStepAnimates = {}
+		this.next = 0
+		this.$ = _this
+
+	}
+
+	_nvuePushAnimates(type, args) {
+		let aniObj = this.currentStepAnimates[this.next]
+		let styles = {}
+		if (!aniObj) {
+			styles = {
+				styles: {},
+				config: {}
+			}
+		} else {
+			styles = aniObj
+		}
+		if (animateTypes1.includes(type)) {
+			if (!styles.styles.transform) {
+				styles.styles.transform = ''
+			}
+			let unit = ''
+			if(type === 'rotate'){
+				unit = 'deg'
+			}
+			styles.styles.transform += `${type}(${args+unit}) `
+		} else {
+			styles.styles[type] = `${args}`
+		}
+		this.currentStepAnimates[this.next] = styles
+	}
+	_animateRun(styles = {}, config = {}) {
+		let ref = this.$.$refs['ani'].ref
+		if (!ref) return
+		return new Promise((resolve, reject) => {
+			nvueAnimation.transition(ref, {
+				styles,
+				...config
+			}, res => {
+				resolve()
+			})
+		})
+	}
+
+	_nvueNextAnimate(animates, step = 0, fn) {
+		let obj = animates[step]
+		if (obj) {
+			let {
+				styles,
+				config
+			} = obj
+			this._animateRun(styles, config).then(() => {
+				step += 1
+				this._nvueNextAnimate(animates, step, fn)
+			})
+		} else {
+			this.currentStepAnimates = {}
+			typeof fn === 'function' && fn()
+			this.isEnd = true
+		}
+	}
+
+	step(config = {}) {
+		// #ifndef APP-NVUE
+		this.animation.step(config)
+		// #endif
+		// #ifdef APP-NVUE
+		this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
+		this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
+		this.next++
+		// #endif
+		return this
+	}
+
+	run(fn) {
+		// #ifndef APP-NVUE
+		this.$.animationData = this.animation.export()
+		this.$.timer = setTimeout(() => {
+			typeof fn === 'function' && fn()
+		}, this.$.durationTime)
+		// #endif
+		// #ifdef APP-NVUE
+		this.isEnd = false
+		let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
+		if(!ref) return
+		this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
+		this.next = 0
+		// #endif
+	}
+}
+
+
+const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
+	'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
+	'translateZ'
+]
+const animateTypes2 = ['opacity', 'backgroundColor']
+const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
+animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
+	MPAnimation.prototype[type] = function(...args) {
+		// #ifndef APP-NVUE
+		this.animation[type](...args)
+		// #endif
+		// #ifdef APP-NVUE
+		this._nvuePushAnimates(type, args)
+		// #endif
+		return this
+	}
+})
+
+export function createAnimation(option, _this) {
+	if(!_this) return
+	clearTimeout(_this.timer)
+	return new MPAnimation(option, _this)
+}