@vtj/materials 0.10.6 → 0.10.7

package/src/uni-ui/lib/uni-collapse-item/uni-collapse-item.vue

@@ -0,0 +1,425 @@
+<template>
+  <view class="uni-collapse-item">
+    <!-- onClick(!isOpen) -->
+    <view
+      @click="onClick(!isOpen)"
+      class="uni-collapse-item__title"
+      :class="{
+        'is-open': isOpen && titleBorder === 'auto',
+        'uni-collapse-item-border': titleBorder !== 'none'
+      }">
+      <view class="uni-collapse-item__title-wrap">
+        <slot name="title">
+          <view
+            class="uni-collapse-item__title-box"
+            :class="{ 'is-disabled': disabled }">
+            <image
+              v-if="thumb"
+              :src="thumb"
+              class="uni-collapse-item__title-img" />
+            <text class="uni-collapse-item__title-text">{{ title }}</text>
+          </view>
+        </slot>
+      </view>
+      <view
+        v-if="showArrow"
+        :class="{
+          'uni-collapse-item__title-arrow-active': isOpen,
+          'uni-collapse-item--animation': showAnimation === true
+        }"
+        class="uni-collapse-item__title-arrow">
+        <uni-icons
+          :color="disabled ? '#ddd' : '#bbb'"
+          size="14"
+          type="bottom" />
+      </view>
+    </view>
+    <view
+      class="uni-collapse-item__wrap"
+      :class="{ 'is--transition': showAnimation }"
+      :style="{ height: (isOpen ? height : 0) + 'px' }">
+      <view
+        :id="elId"
+        ref="collapse--hook"
+        class="uni-collapse-item__wrap-content"
+        :class="{
+          open: isheight,
+          'uni-collapse-item--border': border && isOpen
+        }">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  // #ifdef APP-NVUE
+  const dom = weex.requireModule('dom');
+  // #endif
+  /**
+   * CollapseItem 折叠面板子组件
+   * @description 折叠面板子组件
+   * @property {String} title 标题文字
+   * @property {String} thumb 标题左侧缩略图
+   * @property {String} name 唯一标志符
+   * @property {Boolean} open = [true|false] 是否展开组件
+   * @property {Boolean} titleBorder = [true|false] 是否显示标题分隔线
+   * @property {String} border = ['auto'|'show'|'none'] 是否显示分隔线
+   * @property {Boolean} disabled = [true|false] 是否展开面板
+   * @property {Boolean} showAnimation = [true|false] 开启动画
+   * @property {Boolean} showArrow = [true|false] 是否显示右侧箭头
+   */
+  export default {
+    name: 'uniCollapseItem',
+    props: {
+      // 列表标题
+      title: {
+        type: String,
+        default: ''
+      },
+      name: {
+        type: [Number, String],
+        default: ''
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // #ifdef APP-PLUS
+      // 是否显示动画,app 端默认不开启动画，卡顿严重
+      showAnimation: {
+        type: Boolean,
+        default: false
+      },
+      // #endif
+      // #ifndef APP-PLUS
+      // 是否显示动画
+      showAnimation: {
+        type: Boolean,
+        default: true
+      },
+      // #endif
+      // 是否展开
+      open: {
+        type: Boolean,
+        default: false
+      },
+      // 缩略图
+      thumb: {
+        type: String,
+        default: ''
+      },
+      // 标题分隔线显示类型
+      titleBorder: {
+        type: String,
+        default: 'auto'
+      },
+      border: {
+        type: Boolean,
+        default: true
+      },
+      showArrow: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      // TODO 随机生生元素ID，解决百度小程序获取同一个元素位置信息的bug
+      const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`;
+      return {
+        isOpen: false,
+        isheight: null,
+        height: 0,
+        elId,
+        nameSync: 0
+      };
+    },
+    watch: {
+      open(val) {
+        this.isOpen = val;
+        this.onClick(val, 'init');
+      }
+    },
+    updated(e) {
+      this.$nextTick(() => {
+        this.init(true);
+      });
+    },
+    created() {
+      this.collapse = this.getCollapse();
+      this.oldHeight = 0;
+      this.onClick(this.open, 'init');
+    },
+    // #ifndef VUE3
+    // TODO vue2
+    // destroyed() {
+    // 	if (this.__isUnmounted) return
+    // 	this.uninstall()
+    // },
+    // #endif
+    // #ifdef VUE3
+    // TODO vue3
+    unmounted() {
+      this.__isUnmounted = true;
+      this.uninstall();
+    },
+    // #endif
+    mounted() {
+      if (!this.collapse) return;
+      if (this.name !== '') {
+        this.nameSync = this.name;
+      } else {
+        this.nameSync = this.collapse.childrens.length + '';
+      }
+      if (this.collapse.names.indexOf(this.nameSync) === -1) {
+        this.collapse.names.push(this.nameSync);
+      } else {
+        console.warn(`name 值 ${this.nameSync} 重复`);
+      }
+      if (this.collapse.childrens.indexOf(this) === -1) {
+        this.collapse.childrens.push(this);
+      }
+      this.init();
+    },
+    methods: {
+      init(type) {
+        // #ifndef APP-NVUE
+        this.getCollapseHeight(type);
+        // #endif
+        // #ifdef APP-NVUE
+        // this.getNvueHwight(type);
+        // #endif
+      },
+      uninstall() {
+        if (this.collapse) {
+          this.collapse.childrens.forEach((item, index) => {
+            if (item === this) {
+              this.collapse.childrens.splice(index, 1);
+            }
+          });
+          this.collapse.names.forEach((item, index) => {
+            if (item === this.nameSync) {
+              this.collapse.names.splice(index, 1);
+            }
+          });
+        }
+      },
+      onClick(isOpen, type) {
+        if (this.disabled) return;
+        this.isOpen = isOpen;
+        if (this.isOpen && this.collapse) {
+          this.collapse.setAccordion(this);
+        }
+        if (type !== 'init') {
+          this.collapse.onChange(isOpen, this);
+        }
+      },
+      getCollapseHeight(type, index = 0) {
+        const views = uni.createSelectorQuery().in(this);
+        views
+          .select(`#${this.elId}`)
+          .fields(
+            {
+              size: true
+            },
+            (data) => {
+              // TODO 百度中可能获取不到节点信息 ，需要循环获取
+              if (index >= 10) return;
+              if (!data) {
+                index++;
+                this.getCollapseHeight(false, index);
+                return;
+              }
+              // #ifdef APP-NVUE
+              // this.height = data.height + 1
+              // #endif
+              // #ifndef APP-NVUE
+              this.height = data.height;
+              // #endif
+              this.isheight = true;
+              if (type) return;
+              this.onClick(this.isOpen, 'init');
+            }
+          )
+          .exec();
+      },
+      getNvueHwight(type) {
+        const result = dom.getComponentRect(
+          this.$refs['collapse--hook'],
+          (option) => {
+            if (option && option.result && option.size) {
+              // #ifdef APP-NVUE
+              this.height = option.size.height + 1;
+              // #endif
+              // #ifndef APP-NVUE
+              this.height = option.size.height;
+              // #endif
+              this.isheight = true;
+              if (type) return;
+              this.onClick(this.open, 'init');
+            }
+          }
+        );
+      },
+      /**
+       * 获取父元素实例
+       */
+      getCollapse(name = 'uniCollapse') {
+        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 lang="scss">
+  .uni-collapse-item {
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+
+    /* #endif */
+    &__title {
+      /* #ifndef APP-NVUE */
+      display: flex;
+      width: 100%;
+      box-sizing: border-box;
+      /* #endif */
+      flex-direction: row;
+      align-items: center;
+      transition: border-bottom-color 0.3s;
+
+      // transition-property: border-bottom-color;
+      // transition-duration: 5s;
+      &-wrap {
+        width: 100%;
+        flex: 1;
+      }
+
+      &-box {
+        padding: 0 15px;
+        /* #ifndef APP-NVUE */
+        display: flex;
+        width: 100%;
+        box-sizing: border-box;
+        /* #endif */
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        height: 48px;
+        line-height: 48px;
+        background-color: #fff;
+        color: #303133;
+        font-size: 13px;
+        font-weight: 500;
+        /* #ifdef H5 */
+        cursor: pointer;
+        outline: none;
+
+        /* #endif */
+        &.is-disabled {
+          .uni-collapse-item__title-text {
+            color: #999;
+          }
+        }
+      }
+
+      &.uni-collapse-item-border {
+        border-bottom: 1px solid #ebeef5;
+      }
+
+      &.is-open {
+        border-bottom-color: transparent;
+      }
+
+      &-img {
+        height: 22px;
+        width: 22px;
+        margin-right: 10px;
+      }
+
+      &-text {
+        flex: 1;
+        font-size: 14px;
+        /* #ifndef APP-NVUE */
+        white-space: nowrap;
+        color: inherit;
+        /* #endif */
+        /* #ifdef APP-NVUE */
+        lines: 1;
+        /* #endif */
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &-arrow {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        box-sizing: border-box;
+        /* #endif */
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+        transform: rotate(0deg);
+
+        &-active {
+          transform: rotate(-180deg);
+        }
+      }
+    }
+
+    &__wrap {
+      /* #ifndef APP-NVUE */
+      will-change: height;
+      box-sizing: border-box;
+      /* #endif */
+      background-color: #fff;
+      overflow: hidden;
+      position: relative;
+      height: 0;
+
+      &.is--transition {
+        // transition: all 0.3s;
+        transition-property: height, border-bottom-width;
+        transition-duration: 0.3s;
+        /* #ifndef APP-NVUE */
+        will-change: height;
+        /* #endif */
+      }
+
+      &-content {
+        position: absolute;
+        font-size: 13px;
+        color: #303133;
+        // transition: height 0.3s;
+        border-bottom-color: transparent;
+        border-bottom-style: solid;
+        border-bottom-width: 0;
+
+        &.uni-collapse-item--border {
+          border-bottom-width: 1px;
+          border-bottom-color: red;
+          border-bottom-color: #ebeef5;
+        }
+
+        &.open {
+          position: relative;
+        }
+      }
+    }
+
+    &--animation {
+      transition-property: transform;
+      transition-duration: 0.3s;
+      transition-timing-function: ease;
+    }
+  }
+</style>

package/src/uni-ui/lib/uni-data-picker/keypress.js

@@ -0,0 +1,45 @@
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    this.$once('hook:beforeDestroy', () => {
+      document.removeEventListener('keyup', listener)
+    })
+  },
+	render: () => {}
+}
+// #endif