@10yun/cv-mobile-ui 0.5.44 → 0.5.45

package/uview-plus/components/u-transition/style.scss

@@ -1,8 +1,119 @@
-@import '../../libs/css/components.scss';
-
 /* #ifndef APP-NVUE */
 // vue版本动画相关的样式抽离在外部文件
-@import './vue.ani-style.scss';
+// @use './vue.ani-style.scss' as *;
+/**
+ * vue版本动画内置的动画模式有如下：
+ * fade：淡入
+ * zoom：缩放
+ * fade-zoom：缩放淡入
+ * fade-up：上滑淡入
+ * fade-down：下滑淡入
+ * fade-left：左滑淡入
+ * fade-right：右滑淡入
+ * slide-up：上滑进入
+ * slide-down：下滑进入
+ * slide-left：左滑进入
+ * slide-right：右滑进入
+ */
+
+$u-zoom-scale: scale(0.95);
+
+.u-fade-enter-active,
+.u-fade-leave-active {
+  transition-property: opacity;
+}
+
+.u-fade-enter,
+.u-fade-leave-to {
+  opacity: 0;
+}
+
+.u-fade-zoom-enter,
+.u-fade-zoom-leave-to {
+  transform: $u-zoom-scale;
+  opacity: 0;
+}
+
+.u-fade-zoom-enter-active,
+.u-fade-zoom-leave-active {
+  transition-property: transform, opacity;
+}
+
+.u-fade-down-enter-active,
+.u-fade-down-leave-active,
+.u-fade-left-enter-active,
+.u-fade-left-leave-active,
+.u-fade-right-enter-active,
+.u-fade-right-leave-active,
+.u-fade-up-enter-active,
+.u-fade-up-leave-active {
+  transition-property: opacity, transform;
+}
+
+.u-fade-up-enter,
+.u-fade-up-leave-to {
+  transform: translate3d(0, 100%, 0);
+  opacity: 0;
+}
+
+.u-fade-down-enter,
+.u-fade-down-leave-to {
+  transform: translate3d(0, -100%, 0);
+  opacity: 0;
+}
+
+.u-fade-left-enter,
+.u-fade-left-leave-to {
+  transform: translate3d(-100%, 0, 0);
+  opacity: 0;
+}
+
+.u-fade-right-enter,
+.u-fade-right-leave-to {
+  transform: translate3d(100%, 0, 0);
+  opacity: 0;
+}
+
+.u-slide-down-enter-active,
+.u-slide-down-leave-active,
+.u-slide-left-enter-active,
+.u-slide-left-leave-active,
+.u-slide-right-enter-active,
+.u-slide-right-leave-active,
+.u-slide-up-enter-active,
+.u-slide-up-leave-active {
+  transition-property: transform;
+}
+
+.u-slide-up-enter,
+.u-slide-up-leave-to {
+  transform: translate3d(0, 100%, 0);
+}
+
+.u-slide-down-enter,
+.u-slide-down-leave-to {
+  transform: translate3d(0, -100%, 0);
+}
+
+.u-slide-left-enter,
+.u-slide-left-leave-to {
+  transform: translate3d(-100%, 0, 0);
+}
+
+.u-slide-right-enter,
+.u-slide-right-leave-to {
+  transform: translate3d(100%, 0, 0);
+}
+
+.u-zoom-enter-active,
+.u-zoom-leave-active {
+  transition-property: transform;
+}
+
+.u-zoom-enter,
+.u-zoom-leave-to {
+  transform: $u-zoom-scale;
+}
 /* #endif */
 
 .u-transition {

package/uview-plus/components/u-transition/transitionMixin.js

@@ -1,163 +1,163 @@
-// 定义一个一定时间后自动成功的promise，让调用nextTick方法处，进入下一个then方法
-const waitTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50))
-// nvue动画模块实现细节抽离在外部文件
-// #ifdef APP-NVUE
-import animationMap from './nvue-ani-map.js'
-// #endif
-
-// #ifndef APP-NVUE
-// 定义类名，通过给元素动态切换类名，赋予元素一定的css动画样式
-const getClassNames = (name) => ({
-    enter: `u-${name}-enter u-${name}-enter-active`,
-    'enter-to': `u-${name}-enter-to u-${name}-enter-active`,
-    leave: `u-${name}-leave u-${name}-leave-active`,
-    'leave-to': `u-${name}-leave-to u-${name}-leave-active`
-})
-// #endif
-
-// #ifdef APP-NVUE
-// 引入nvue(weex)的animation动画模块，文档见：
-// https://weex.apache.org/zh/docs/modules/animation.html#transition
-const animation = uni.requireNativePlugin('animation')
-const getStyle = (name) => animationMap[name]
-// #endif
-
-import { nextTick } from 'vue'
-import { sleep } from '../../libs/function/index';
-export default {
-    methods: {
-        // 组件被点击发出事件
-        clickHandler() {
-            this.$emit('click')
-        },
-        // #ifndef APP-NVUE
-        // vue版本的组件进场处理
-        async vueEnter() {
-            // 动画进入时的类名
-            const classNames = getClassNames(this.mode)
-            // 定义状态和发出动画进入前事件
-            this.status = 'enter'
-            this.$emit('beforeEnter')
-            this.inited = true
-            this.display = true
-            this.classes = classNames.enter
-			await nextTick();
-			{
-                // https://github.com/umicro/uView2.0/issues/545
-				await sleep(20)
-                // 标识动画尚未结束
-                this.$emit('enter')
-                this.transitionEnded = false
-				// 组件动画进入后触发的事件
-                this.$emit('afterEnter')
-                // 赋予组件enter-to类名
-                this.classes = classNames['enter-to']
-            }
-        },
-        // 动画离场处理
-        async vueLeave() {
-            // 如果不是展示状态，无需执行逻辑
-            if (!this.display) return
-            const classNames = getClassNames(this.mode)
-            // 标记离开状态和发出事件
-            this.status = 'leave'
-            this.$emit('beforeLeave')
-            // 获得类名
-            this.classes = classNames.leave
-
-            await nextTick();
-			{
-               // 动画正在离场的状态
-               this.transitionEnded = false
-               this.$emit('leave')
-                // 组件执行动画，到了执行的执行时间后，执行一些额外处理
-                setTimeout(this.onTransitionEnd, this.duration)
-                this.classes = classNames['leave-to']
-            }
-        },
-        // #endif
-        // #ifdef APP-NVUE
-        // nvue版本动画进场
-        async nvueEnter() {
-            // 获得样式的名称
-            const currentStyle = getStyle(this.mode)
-            // 组件动画状态和发出事件
-            this.status = 'enter'
-            this.$emit('beforeEnter')
-            // 展示生成组件元素
-            this.inited = true
-            this.display = true
-            // 在nvue安卓上，由于渲染速度慢，在弹窗，键盘，日历等组件中，渲染其中的内容需要时间
-            // 导致出现弹窗卡顿，这里让其一开始为透明状态，等一定时间渲染完成后，再让其隐藏起来，再让其按正常逻辑出现
-            this.viewStyle = {
-                opacity: 0
-            }
-            // 等待弹窗内容渲染完成
-            await nextTick();
-			{
-                // 合并样式
-                this.viewStyle = currentStyle.enter
-                Promise.resolve()
-                    .then(waitTick)
-                    .then(() => {
-                        // 组件开始进入前的事件
-                        this.$emit('enter')
-                        // nvue的transition动画模块需要通过ref调用组件，注意此处的ref不同于vue的this.$refs['u-transition']用法
-                        animation.transition(this.$refs['u-transition'].ref, {
-                            styles: currentStyle['enter-to'],
-                            duration: this.duration,
-                            timingFunction: this.timingFunction,
-                            needLayout: false,
-                            delay: 0
-                        }, () => {
-                            // 动画执行完毕，发出事件
-                            this.$emit('afterEnter')
-                        })
-                    })
-                    .catch(() => {})
-            }
-        },
-        nvueLeave() {
-            if (!this.display) {
-                return
-            }
-            const currentStyle = getStyle(this.mode)
-            // 定义状态和事件
-            this.status = 'leave'
-            this.$emit('beforeLeave')
-            // 合并样式
-            this.viewStyle = currentStyle.leave
-            // 放到promise中处理执行过程
-            Promise.resolve()
-                .then(waitTick) // 等待几十ms
-                .then(() => {
-                    this.transitionEnded = false
-                    // 动画正在离场的状态
-                    this.$emit('leave')
-                    animation.transition(this.$refs['u-transition'].ref, {
-                        styles: currentStyle['leave-to'],
-                        duration: this.duration,
-                        timingFunction: this.timingFunction,
-                        needLayout: false,
-                        delay: 0
-                    }, () => {
-                        this.onTransitionEnd()
-                    })
-                })
-                .catch(() => {})
-        },
-        // #endif
-        // 完成过渡后触发
-        onTransitionEnd() {
-            // 如果已经是结束的状态，无需再处理
-            if (this.transitionEnded) return
-            this.transitionEnded = true
-            // 发出组件动画执行后的事件
-            this.$emit(this.status === 'leave' ? 'afterLeave' : 'afterEnter')
-            if (!this.show && this.display) {
-                this.display = false
-                this.inited = false
-            }
-        }
-    }
-}
+// 定义一个一定时间后自动成功的promise，让调用nextTick方法处，进入下一个then方法
+const waitTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50))
+// nvue动画模块实现细节抽离在外部文件
+// #ifdef APP-NVUE
+import animationMap from './nvue-ani-map.js'
+// #endif
+
+// #ifndef APP-NVUE
+// 定义类名，通过给元素动态切换类名，赋予元素一定的css动画样式
+const getClassNames = (name) => ({
+    enter: `u-${name}-enter u-${name}-enter-active`,
+    'enter-to': `u-${name}-enter-to u-${name}-enter-active`,
+    leave: `u-${name}-leave u-${name}-leave-active`,
+    'leave-to': `u-${name}-leave-to u-${name}-leave-active`
+})
+// #endif
+
+// #ifdef APP-NVUE
+// 引入nvue(weex)的animation动画模块，文档见：
+// https://weex.apache.org/zh/docs/modules/animation.html#transition
+const animation = uni.requireNativePlugin('animation')
+const getStyle = (name) => animationMap[name]
+// #endif
+
+import { nextTick } from 'vue'
+import { sleep } from '../../libs/function/index';
+export default {
+    methods: {
+        // 组件被点击发出事件
+        clickHandler() {
+            this.$emit('click')
+        },
+        // #ifndef APP-NVUE
+        // vue版本的组件进场处理
+        async vueEnter() {
+            // 动画进入时的类名
+            const classNames = getClassNames(this.mode)
+            // 定义状态和发出动画进入前事件
+            this.status = 'enter'
+            this.$emit('beforeEnter')
+            this.inited = true
+            this.display = true
+            this.classes = classNames.enter
+			await nextTick();
+			{
+                // https://github.com/umicro/uView2.0/issues/545
+				await sleep(20)
+                // 标识动画尚未结束
+                this.$emit('enter')
+                this.transitionEnded = false
+				// 组件动画进入后触发的事件
+                this.$emit('afterEnter')
+                // 赋予组件enter-to类名
+                this.classes = classNames['enter-to']
+            }
+        },
+        // 动画离场处理
+        async vueLeave() {
+            // 如果不是展示状态，无需执行逻辑
+            if (!this.display) return
+            const classNames = getClassNames(this.mode)
+            // 标记离开状态和发出事件
+            this.status = 'leave'
+            this.$emit('beforeLeave')
+            // 获得类名
+            this.classes = classNames.leave
+
+            await nextTick();
+			{
+               // 动画正在离场的状态
+               this.transitionEnded = false
+               this.$emit('leave')
+                // 组件执行动画，到了执行的执行时间后，执行一些额外处理
+                setTimeout(this.onTransitionEnd, this.duration)
+                this.classes = classNames['leave-to']
+            }
+        },
+        // #endif
+        // #ifdef APP-NVUE
+        // nvue版本动画进场
+        async nvueEnter() {
+            // 获得样式的名称
+            const currentStyle = getStyle(this.mode)
+            // 组件动画状态和发出事件
+            this.status = 'enter'
+            this.$emit('beforeEnter')
+            // 展示生成组件元素
+            this.inited = true
+            this.display = true
+            // 在nvue安卓上，由于渲染速度慢，在弹窗，键盘，日历等组件中，渲染其中的内容需要时间
+            // 导致出现弹窗卡顿，这里让其一开始为透明状态，等一定时间渲染完成后，再让其隐藏起来，再让其按正常逻辑出现
+            this.viewStyle = {
+                opacity: 0
+            }
+            // 等待弹窗内容渲染完成
+            await nextTick();
+			{
+                // 合并样式
+                this.viewStyle = currentStyle.enter
+                Promise.resolve()
+                    .then(waitTick)
+                    .then(() => {
+                        // 组件开始进入前的事件
+                        this.$emit('enter')
+                        // nvue的transition动画模块需要通过ref调用组件，注意此处的ref不同于vue的this.$refs['u-transition']用法
+                        animation.transition(this.$refs['u-transition'].ref, {
+                            styles: currentStyle['enter-to'],
+                            duration: this.duration,
+                            timingFunction: this.timingFunction,
+                            needLayout: false,
+                            delay: 0
+                        }, () => {
+                            // 动画执行完毕，发出事件
+                            this.$emit('afterEnter')
+                        })
+                    })
+                    .catch(() => {})
+            }
+        },
+        nvueLeave() {
+            if (!this.display) {
+                return
+            }
+            const currentStyle = getStyle(this.mode)
+            // 定义状态和事件
+            this.status = 'leave'
+            this.$emit('beforeLeave')
+            // 合并样式
+            this.viewStyle = currentStyle.leave
+            // 放到promise中处理执行过程
+            Promise.resolve()
+                .then(waitTick) // 等待几十ms
+                .then(() => {
+                    this.transitionEnded = false
+                    // 动画正在离场的状态
+                    this.$emit('leave')
+                    animation.transition(this.$refs['u-transition'].ref, {
+                        styles: currentStyle['leave-to'],
+                        duration: this.duration,
+                        timingFunction: this.timingFunction,
+                        needLayout: false,
+                        delay: 0
+                    }, () => {
+                        this.onTransitionEnd()
+                    })
+                })
+                .catch(() => {})
+        },
+        // #endif
+        // 完成过渡后触发
+        onTransitionEnd() {
+            // 如果已经是结束的状态，无需再处理
+            if (this.transitionEnded) return
+            this.transitionEnded = true
+            // 发出组件动画执行后的事件
+            this.$emit(this.status === 'leave' ? 'afterLeave' : 'afterEnter')
+            if (!this.show && this.display) {
+                this.display = false
+                this.inited = false
+            }
+        }
+    }
+}

package/uview-plus/components/u-transition-wu/u-transition.vue

@@ -18,7 +18,7 @@ import { mixin } from '../../libs/mixin/mixin';
 /**
  * transition 过渡动画
  * @description 过渡动画组件
- * @tutorial https://ijry.github.io/uview-plus/components/transition.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/transition.html
  * @property {Boolean} show = [false|true] 控制组件显示或隐藏
  * @property {Array|String} mode = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
  *  @value fade 渐隐渐出过渡

package/uview-plus/components/u-tree/tree-node.vue

@@ -0,0 +1,131 @@
+<template>
+  <view class="u-tree-node" :style="{ paddingLeft: depth * 20 + 'px' }">
+    <view class="u-tree-node-content" @click="toggle">
+      <!-- <text v-if="hasChildren" class="u-tree-node-toggle">
+        {{ node.expanded ? '▼' : '▶' }}
+      </text> -->
+      <up-icon
+        v-if="hasChildren"
+        class="u-tree-node-toggle"
+        :name="node.expanded ? 'arrow-down-fill' : 'play-right-fill'"
+        size="12"
+      />
+      <up-checkbox
+        v-if="showCheckbox"
+        usedAlone
+        :size="12"
+        :checked="node.checked"
+        @change="toggleCheck"
+        style="margin-right: 10px"
+      />
+      <slot :nodeData="node" :level="depth + 1">
+        {{ node[props.label] }}
+      </slot>
+    </view>
+    <view
+      v-if="hasChildren && (node.expanded === undefined ? true : node.expanded)"
+      class="u-tree-node-children"
+      :style="{ paddingLeft: (depth + 1) * 20 + 'px' }"
+    >
+      <tree-node
+        v-for="child in node[props.children]"
+        :key="child[props.nodeKey]"
+        :node="child"
+        :props="props"
+        :show-checkbox="showCheckbox"
+        :check-strictly="checkStrictly"
+        :expand-on-click-node="expandOnClickNode"
+        :depth="depth + 1"
+        @node-click="$emit('node-click', $event)"
+        @check-change="$emit('check-change', $event)"
+      >
+        <template #default="{ nodeData, level }">
+          <slot name="default" :nodeData="nodeData" :level="level"></slot>
+        </template>
+      </tree-node>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  name: 'tree-node',
+  props: {
+    node: {
+      type: Object,
+      required: true
+    },
+    props: {
+      type: Object,
+      required: true
+    },
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    },
+    expandOnClickNode: {
+      type: Boolean,
+      default: true
+    },
+    depth: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    hasChildren() {
+      return this.node[this.props.children] && this.node[this.props.children].length > 0;
+    },
+    isExpanded() {
+      return this.node.expanded === undefined ? false : this.node.expanded;
+    }
+  },
+  emits: ['node-click', 'check-change'],
+  methods: {
+    toggle() {
+      if (this.expandOnClickNode && this.hasChildren) {
+        this.node.expanded = !this.node.expanded;
+      }
+      this.$emit('node-click', this.node);
+    },
+    toggleCheck(checked) {
+      this.node.checked = checked;
+      if (!this.checkStrictly) {
+        this.updateChildCheckStatus(this.node, checked);
+        this.updateParentCheckStatus(this.node);
+      }
+      this.$emit('check-change', this.node);
+    },
+    updateChildCheckStatus(node, checked) {
+      if (node[this.props.children]) {
+        node[this.props.children].forEach((child) => {
+          child.checked = checked;
+          this.updateChildCheckStatus(child, checked);
+        });
+      }
+    },
+    updateParentCheckStatus(node) {
+      let parent = this.$parent;
+      while (parent && parent.node) {
+        const allChecked = parent.node[this.props.children].every((child) => child.checked);
+        parent.node.checked = allChecked;
+        parent = parent.$parent;
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+.u-tree-node-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 20px;
+}
+.u-tree-node-toggle {
+  margin-right: 5px;
+}
+</style>