create-uniapps 1.0.0

package/template/src/uni_modules/uview-plus/components/u-transition/u-transition.vue

@@ -0,0 +1,207 @@
+<template>
+	<view
+		v-if="inited"
+		class="u-transition"
+		ref="u-transition"
+		@tap="clickHandler"
+		:class="classes"
+		:style="[mergeStyle]"
+		@touchmove="noop"
+	>
+		<slot />
+	</view>
+</template>
+
+<script>
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle } from '../../libs/function/index';
+// 组件的methods方法，由于内容较长，写在外部文件中通过mixin引入
+import transitionMixin from "./transitionMixin.js";
+/**
+ * transition  动画组件
+ * @description
+ * @tutorial
+ * @property {String}			show			是否展示组件 （默认 false ）
+ * @property {String}			mode			使用的动画模式 （默认 'fade' ）
+ * @property {String | Number}	duration		动画的执行时间，单位ms （默认 '300' ）
+ * @property {String}			timingFunction	使用的动画过渡函数 （默认 'ease-out' ）
+ * @property {Object}			customStyle		自定义样式
+ * @event {Function} before-enter	进入前触发
+ * @event {Function} enter			进入中触发
+ * @event {Function} after-enter	进入后触发
+ * @event {Function} before-leave	离开前触发
+ * @event {Function} leave			离开中触发
+ * @event {Function} after-leave	离开后触发
+ * @example
+ */
+export default {
+	name: 'u-transition',
+	data() {
+		return {
+			inited: false, // 是否显示/隐藏组件
+			viewStyle: {}, // 组件内部的样式
+			status: '', // 记录组件动画的状态
+			transitionEnded: false, // 组件是否结束的标记
+			display: false, // 组件是否展示
+			classes: '', // 应用的类名
+		}
+	},
+	emits: ['click', 'beforeEnter', 'enter', 'afterEnter', 'beforeLeave', 'leave', 'afterLeave'],
+	computed: {
+	    mergeStyle() {
+	        const { viewStyle, customStyle } = this
+	        return {
+	            // #ifndef APP-NVUE
+	            transitionDuration: `${this.duration}ms`,
+	            // display: `${this.display ? '' : 'none'}`,
+				transitionTimingFunction: this.timingFunction,
+	            // #endif
+				// 避免自定义样式影响到动画属性，所以写在viewStyle前面
+	            ...addStyle(customStyle),
+	            ...viewStyle
+	        }
+	    }
+	},
+	// 将mixin挂在到组件中，实际上为一个vue格式对象。
+	mixins: [mpMixin, mixin, transitionMixin, props],
+	watch: {
+		show: {
+			handler(newVal) {
+				// vue和nvue分别执行不同的方法
+				// #ifdef APP-NVUE
+				newVal ? this.nvueEnter() : this.nvueLeave()
+				// #endif
+				// #ifndef APP-NVUE
+				newVal ? this.vueEnter() : this.vueLeave()
+				// #endif
+			},
+			// 表示同时监听初始化时的props的show的意思
+			immediate: true
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+/* #ifndef APP-NVUE */
+// vue版本动画相关的样式抽离在外部文件
+// @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 {}
+</style>

package/template/src/uni_modules/uview-plus/components/u-transition/vue.ani-style.scss

@@ -0,0 +1,113 @@
+/**
+ * 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
+}

package/template/src/uni_modules/uview-plus/components/u-tree/tree-node.vue

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

package/template/src/uni_modules/uview-plus/components/u-tree/u-tree.vue

@@ -0,0 +1,117 @@
+<template>
+  <view class="u-tree">
+    <tree-node
+      v-for="node in treeData"
+      :key="node[props.nodeKey]"
+      :node="node"
+      :props="props"
+      :show-checkbox="showCheckbox"
+      :check-strictly="checkStrictly"
+      :expand-on-click-node="expandOnClickNode"
+      @node-click="handleNodeClick"
+      @check-change="$emit('check-change', $event)">
+      <template #default="{ nodeData, level }">
+        <slot :node="nodeData" :level="level"></slot>
+      </template>
+    </tree-node>
+  </view>
+</template>
+
+<script>
+import TreeNode from './tree-node.vue';
+
+export default {
+  name: 'u-tree',
+  components: { TreeNode },
+  props: {
+    data: {
+      type: Array,
+      required: true
+    },
+    props: {
+      type: Object,
+      default: () => ({
+        label: 'label',
+        children: 'children',
+        nodeKey: 'id'
+      })
+    },
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    },
+    defaultExpandAll: {
+      type: Boolean,
+      default: false
+    },
+    expandOnClickNode: {
+      type: Boolean,
+      default: true
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      treeData: []
+    };
+  },
+  created() {
+    this.initTree();
+  },
+  watch: {
+    data: {
+      handler(newVal) {
+        this.treeData = JSON.parse(JSON.stringify(newVal));
+        this.initExpandedState(this.treeData, this.defaultExpandAll);
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  emits: ['node-click', 'check-change'],
+  methods: {
+    initTree() {
+      this.treeData = JSON.parse(JSON.stringify(this.data));
+      this.initExpandedState(this.treeData, this.defaultExpandAll);
+    },
+    initExpandedState(nodes, expanded) {
+      nodes.forEach(node => {
+        node.expanded = expanded;
+        if (node[this.props.children]) {
+          this.initExpandedState(node[this.props.children], expanded);
+        }
+      });
+    },
+    handleNodeClick(node) {
+      this.$emit('node-click', node);
+    },
+    /**
+     * 直接递归 treeData 获取所有 checked 的节点
+     */
+    getCheckedNodes() {
+        const traverse = (nodes) => {
+            let result = [];
+            nodes.forEach(node => {
+            if (node.checked) {
+                result.push(node);
+            }
+            if (node[this.props.children] && node[this.props.children].length > 0) {
+                result = result.concat(traverse(node[this.props.children]));
+            }
+            });
+            return result;
+        };
+        return traverse(this.treeData);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.u-tree {
+  font-size: 28rpx;
+}
+</style>

package/template/src/uni_modules/uview-plus/components/u-upload/mixin.js

@@ -0,0 +1,23 @@
+import { error } from '../../libs/function/index'
+
+export const mixinUpload = {
+    watch: {
+        // 监听accept的变化，判断是否符合个平台要求
+        // 只有微信小程序才支持选择媒体，文件类型，所以这里做一个判断提示
+        accept: {
+            immediate: true,
+            handler(val) {
+                // #ifndef MP-WEIXIN
+                if (val === 'all' || val === 'media') {
+                    error('只有微信小程序才支持把accept配置为all、media之一')
+                }
+                // #endif
+                // #ifndef H5 || MP-WEIXIN
+                if (val === 'file') {
+                    error('只有微信小程序和H5(HX2.9.9)才支持把accept配置为file')
+                }
+                // #endif
+            }
+        }
+    }
+}