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

package/ui-cv/cv-collapse/cv-collapse.vue

@@ -1,146 +0,0 @@
-<template>
-  <view class="uni-collapse">
-    <slot />
-  </view>
-</template>
-<script>
-/**
- * Collapse 折叠面板
- * @description 展示可以折叠 / 展开的内容区域
- * @tutorial https://ext.dcloud.net.cn/plugin?id=23
- * @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array)
- * @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
- * @event {Function} change 切换面板时触发，如果是手风琴模式，返回类型为string，否则为array
- */
-export default {
-  name: 'cvCollapse',
-  emits: ['change', 'activeItem', 'input', 'update:modelValue'],
-  props: {
-    value: {
-      type: [String, Array],
-      default: ''
-    },
-    modelValue: {
-      type: [String, Array],
-      default: ''
-    },
-    accordion: {
-      // 是否开启手风琴效果
-      type: [Boolean, String],
-      default: false
-    }
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    // TODO 兼容 vue2 和 vue3
-    dataValue() {
-      let value = (typeof this.value === 'string' && this.value === '') || (Array.isArray(this.value) && this.value.length === 0);
-      let modelValue =
-        (typeof this.modelValue === 'string' && this.modelValue === '') ||
-        (Array.isArray(this.modelValue) && this.modelValue.length === 0);
-      if (value) {
-        return this.modelValue;
-      }
-      if (modelValue) {
-        return this.value;
-      }
-
-      return this.value;
-    }
-  },
-  watch: {
-    dataValue(val) {
-      this.setOpen(val);
-    }
-  },
-  created() {
-    this.childrens = [];
-    this.names = [];
-  },
-  mounted() {
-    this.setOpen(this.dataValue);
-  },
-  methods: {
-    setOpen(val) {
-      let str = typeof val === 'string';
-      let arr = Array.isArray(val);
-
-      this.childrens.forEach((vm, index) => {
-        if (str) {
-          if (val === vm.nameSync) {
-            if (!this.accordion) {
-              console.warn('accordion 属性为 false ,v-model 类型应该为 array');
-              return;
-            }
-            vm.isOpen = true;
-          }
-        }
-        if (arr) {
-          val.forEach((v) => {
-            if (v === vm.nameSync) {
-              if (this.accordion) {
-                console.warn('accordion 属性为 true ,v-model 类型应该为 string');
-                return;
-              }
-              vm.isOpen = true;
-            }
-          });
-        }
-      });
-      this.emit(val);
-    },
-    setAccordion(self) {
-      if (!this.accordion) return;
-      this.childrens.forEach((vm, index) => {
-        if (self !== vm) {
-          vm.isOpen = false;
-        }
-      });
-    },
-    resize() {
-      this.childrens.forEach((vm, index) => {
-        // #ifndef APP-NVUE
-        vm.getCollapseHeight();
-        // #endif
-        // #ifdef APP-NVUE
-        vm.getNvueHwight();
-        // #endif
-      });
-    },
-    onChange(isOpen, self) {
-      let activeItem = [];
-
-      if (this.accordion) {
-        activeItem = isOpen ? self.nameSync : '';
-      } else {
-        this.childrens.forEach((vm, index) => {
-          if (vm.isOpen) {
-            activeItem.push(vm.nameSync);
-          }
-        });
-      }
-      this.$emit('change', activeItem);
-      this.emit(activeItem);
-    },
-    emit(val) {
-      this.$emit('input', val);
-      this.$emit('update:modelValue', val);
-    }
-  }
-};
-</script>
-<style scoped>
-.uni-collapse {
-  /* #ifndef APP-NVUE */
-  width: 100%;
-  display: flex;
-  /* #endif */
-  /* #ifdef APP-NVUE */
-  flex: 1;
-  /* #endif */
-  flex-direction: column;
-  background-color: #ffffff;
-}
-</style>

package/ui-cv/cv-collapse-item/cv-collapse-item.vue

@@ -1,395 +0,0 @@
-<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
-        :class="{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }"
-        class="uni-collapse-item__title-arrow"
-      >
-        <cv-icon2 :color="disabled ? '#ddd' : '#bbb'" size="14" type="arrowdown" />
-      </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} disabled = [true|false] 是否展开面板
- * @property {Boolean} showAnimation = [true|false] 开启动画
- */
-export default {
-  name: 'cvCollapseItem',
-  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
-    }
-  },
-  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;
-  },
-  // #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.open, '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 scoped>
-.uni-collapse-item {
-  /* #ifndef APP-NVUE */
-  box-sizing: border-box;
-  /* #endif */
-}
-
-.uni-collapse-item__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;
-}
-
-.uni-collapse-item__title-wrap {
-  width: 100%;
-  flex: 1;
-}
-
-.uni-collapse-item__title-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 */
-}
-
-.uni-collapse-item__title-box.is-disabled .uni-collapse-item__title-text {
-  color: #c0c0c0;
-}
-
-.uni-collapse-item__title.uni-collapse-item-border {
-  border-bottom: 1px solid #ebeef5;
-}
-
-.uni-collapse-item__title.is-open {
-  border-bottom-color: transparent;
-}
-
-.uni-collapse-item__title-img {
-  height: 26px;
-  width: 26px;
-  margin-right: 10px;
-}
-
-.uni-collapse-item__title-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;
-}
-
-.uni-collapse-item__title-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);
-}
-
-.uni-collapse-item__title-arrow-active {
-  transform: rotate(180deg);
-}
-
-.uni-collapse-item__wrap {
-  /* #ifndef APP-NVUE */
-  will-change: height;
-  box-sizing: border-box;
-  /* #endif */
-  background-color: #fff;
-  overflow: hidden;
-  position: relative;
-  height: 0;
-}
-
-.uni-collapse-item__wrap.is--transition {
-  transition-property: height, border-bottom-width;
-  transition-duration: 0.3s;
-  /* #ifndef APP-NVUE */
-  will-change: height;
-  /* #endif */
-}
-
-.uni-collapse-item__wrap-content {
-  position: absolute;
-  font-size: 13px;
-  color: #303133;
-  border-bottom-color: transparent;
-  border-bottom-style: solid;
-  border-bottom-width: 0;
-}
-
-.uni-collapse-item__wrap-content.uni-collapse-item--border {
-  border-bottom-width: 1px;
-  border-bottom-color: red;
-  border-bottom-color: #ebeef5;
-}
-
-.uni-collapse-item__wrap-content.open {
-  position: relative;
-}
-
-.uni-collapse-item--animation {
-  transition-property: transform;
-  transition-duration: 0.3s;
-  transition-timing-function: ease;
-}
-</style>