@10yun/cv-mobile-ui 0.5.18 → 0.5.19

package/uni-ui/lib/uni-col/style.scss

@@ -0,0 +1,112 @@
+
+/* breakpoints */
+$--sm: 768px !default;
+$--md: 992px !default;
+$--lg: 1200px !default;
+$--xl: 1920px !default;
+
+$breakpoints: (
+  'xs': (
+    max-width: $--sm - 1
+  ),
+  'sm': (
+    min-width: $--sm
+  ),
+  'md': (
+    min-width: $--md
+  ),
+  'lg': (
+    min-width: $--lg
+  ),
+  'xl': (
+    min-width: $--xl
+  )
+);
+
+$layout-namespace: '.uni-';
+$col: $layout-namespace + 'col';
+
+@function getSize($size) {
+  /* TODO 1/24 * $size * 100 * 1%; 使用计算后的值，为了解决 vue3 控制台报错 */
+  @return 0.04166666666 * $size * 100 * 1%;
+}
+
+@mixin res($key, $map: $breakpoints) {
+  @if map-has-key($map, $key) {
+    @media screen and #{inspect(map-get($map,$key))} {
+      @content;
+    }
+  } @else {
+    @warn "Undeinfed point: `#{$key}`";
+  }
+}
+
+/* #ifndef APP-NVUE */
+#{$col} {
+  float: left;
+  box-sizing: border-box;
+}
+
+#{$col}-0 {
+  /* #ifdef APP-NVUE */
+  width: 0;
+  height: 0;
+  margin-top: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  /* #endif */
+  /* #ifndef APP-NVUE */
+  display: none;
+  /* #endif */
+}
+
+@for $i from 0 through 24 {
+  #{$col}-#{$i} {
+    width: getSize($i);
+  }
+
+  #{$col}-offset-#{$i} {
+    margin-left: getSize($i);
+  }
+
+  #{$col}-pull-#{$i} {
+    position: relative;
+    right: getSize($i);
+  }
+
+  #{$col}-push-#{$i} {
+    position: relative;
+    left: getSize($i);
+  }
+}
+
+@each $point in map-keys($breakpoints) {
+  @include res($point) {
+    #{$col}-#{$point}-0 {
+      display: none;
+    }
+
+    @for $i from 0 through 24 {
+      #{$col}-#{$point}-#{$i} {
+        width: getSize($i);
+      }
+
+      #{$col}-#{$point}-offset-#{$i} {
+        margin-left: getSize($i);
+      }
+
+      #{$col}-#{$point}-pull-#{$i} {
+        position: relative;
+        right: getSize($i);
+      }
+
+      #{$col}-#{$point}-push-#{$i} {
+        position: relative;
+        left: getSize($i);
+      }
+    }
+  }
+}
+
+/* #endif */

package/uni-ui/lib/uni-col/uni-col.vue

@@ -0,0 +1,205 @@
+<template>
+  <!-- #ifndef APP-NVUE -->
+  <view
+    :class="['uni-col', sizeClass, pointClassList]"
+    :style="{
+      paddingLeft: `${Number(gutter)}rpx`,
+      paddingRight: `${Number(gutter)}rpx`
+    }"
+  >
+    <slot></slot>
+  </view>
+  <!-- #endif -->
+  <!-- #ifdef APP-NVUE -->
+  <!-- 在nvue上，类名样式不生效，换为style -->
+  <!-- 设置right正值失效，设置 left 负值 -->
+  <view
+    :class="['uni-col']"
+    :style="{
+      paddingLeft: `${Number(gutter)}rpx`,
+      paddingRight: `${Number(gutter)}rpx`,
+      width: `${nvueWidth}rpx`,
+      position: 'relative',
+      marginLeft: `${marginLeft}rpx`,
+      left: `${right === 0 ? left : -right}rpx`
+    }"
+  >
+    <slot></slot>
+  </view>
+  <!-- #endif -->
+</template>
+<script>
+/**
+ * Col	布局-列
+ * @description	搭配uni-row使用，构建布局。
+ * @tutorial	https://ext.dcloud.net.cn/plugin?id=3958
+ *
+ * @property	{span} type = Number 栅格占据的列数
+ * 						默认 24
+ * @property	{offset} type = Number 栅格左侧的间隔格数
+ * @property	{push} type = Number 栅格向右移动格数
+ * @property	{pull} type = Number 栅格向左移动格数
+ * @property	{xs} type = [Number, Object] <768px 响应式栅格数或者栅格属性对象
+ * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+ * @property	{sm} type = [Number, Object] ≥768px 响应式栅格数或者栅格属性对象
+ * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+ * @property	{md} type = [Number, Object] ≥992px 响应式栅格数或者栅格属性对象
+ * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+ * @property	{lg} type = [Number, Object] ≥1200px 响应式栅格数或者栅格属性对象
+ * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+ * @property	{xl} type = [Number, Object] ≥1920px 响应式栅格数或者栅格属性对象
+ * 						@description	Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}
+ */
+const ComponentClass = 'uni-col';
+// -1 默认值，因为在微信小程序端只给Number会有默认值0
+export default {
+  name: 'uniCol',
+  // #ifdef MP-WEIXIN
+  options: {
+    virtualHost: true // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现
+  },
+  // #endif
+  props: {
+    span: {
+      type: Number,
+      default: 24
+    },
+    offset: {
+      type: Number,
+      default: -1
+    },
+    pull: {
+      type: Number,
+      default: -1
+    },
+    push: {
+      type: Number,
+      default: -1
+    },
+    xs: [Number, Object],
+    sm: [Number, Object],
+    md: [Number, Object],
+    lg: [Number, Object],
+    xl: [Number, Object]
+  },
+  data() {
+    return {
+      gutter: 0,
+      sizeClass: '',
+      parentWidth: 0,
+      nvueWidth: 0,
+      marginLeft: 0,
+      right: 0,
+      left: 0
+    };
+  },
+  created() {
+    // 字节小程序中，在computed中读取$parent为undefined
+    let parent = this.$parent;
+    while (parent && parent.$options.componentName !== 'uniRow') {
+      parent = parent.$parent;
+    }
+    this.updateGutter(parent.gutter);
+    parent.$watch('gutter', (gutter) => {
+      this.updateGutter(gutter);
+    });
+    // #ifdef APP-NVUE
+    this.updateNvueWidth(parent.width);
+    parent.$watch('width', (width) => {
+      this.updateNvueWidth(width);
+    });
+    // #endif
+  },
+  computed: {
+    sizeList() {
+      let { span, offset, pull, push } = this;
+      return {
+        span,
+        offset,
+        pull,
+        push
+      };
+    },
+    // #ifndef APP-NVUE
+    pointClassList() {
+      let classList = [];
+      ['xs', 'sm', 'md', 'lg', 'xl'].forEach((point) => {
+        const props = this[point];
+        if (typeof props === 'number') {
+          classList.push(`${ComponentClass}-${point}-${props}`);
+        } else if (typeof props === 'object' && props) {
+          Object.keys(props).forEach((pointProp) => {
+            classList.push(
+              pointProp === 'span'
+                ? `${ComponentClass}-${point}-${props[pointProp]}`
+                : `${ComponentClass}-${point}-${pointProp}-${props[pointProp]}`
+            );
+          });
+        }
+      });
+      // 支付宝小程序使用 :class=[ ['a','b'] ]，渲染错误
+      return classList.join(' ');
+    }
+    // #endif
+  },
+  methods: {
+    updateGutter(parentGutter) {
+      parentGutter = Number(parentGutter);
+      if (!isNaN(parentGutter)) {
+        this.gutter = parentGutter / 2;
+      }
+    },
+    // #ifdef APP-NVUE
+    updateNvueWidth(width) {
+      // 用于在nvue端，span，offset，pull，push的计算
+      this.parentWidth = width;
+      ['span', 'offset', 'pull', 'push'].forEach((size) => {
+        const curSize = this[size];
+        if ((curSize || curSize === 0) && curSize !== -1) {
+          let RPX = (1 / 24) * curSize * width;
+          RPX = Number(RPX);
+          switch (size) {
+            case 'span':
+              this.nvueWidth = RPX;
+              break;
+            case 'offset':
+              this.marginLeft = RPX;
+              break;
+            case 'pull':
+              this.right = RPX;
+              break;
+            case 'push':
+              this.left = RPX;
+              break;
+          }
+        }
+      });
+    }
+    // #endif
+  },
+  watch: {
+    sizeList: {
+      immediate: true,
+      handler(newVal) {
+        // #ifndef APP-NVUE
+        let classList = [];
+        for (let size in newVal) {
+          const curSize = newVal[size];
+          if ((curSize || curSize === 0) && curSize !== -1) {
+            classList.push(size === 'span' ? `${ComponentClass}-${curSize}` : `${ComponentClass}-${size}-${curSize}`);
+          }
+        }
+        // 支付宝小程序使用 :class=[ ['a','b'] ]，渲染错误
+        this.sizeClass = classList.join(' ');
+        // #endif
+        // #ifdef APP-NVUE
+        this.updateNvueWidth(this.parentWidth);
+        // #endif
+      }
+    }
+  }
+};
+</script>
+<style>
+@import './style.css';
+</style>

package/uni-ui/lib/uni-collapse/style.css

@@ -0,0 +1,11 @@
+.uni-collapse {
+  /* #ifndef APP-NVUE */
+  width: 100%;
+  display: flex;
+  /* #endif */
+  /* #ifdef APP-NVUE */
+  flex: 1;
+  /* #endif */
+  flex-direction: column;
+  background-color: #fff;
+}

package/uni-ui/lib/uni-collapse/style.scss

@@ -0,0 +1,12 @@
+
+.uni-collapse {
+  /* #ifndef APP-NVUE */
+  width: 100%;
+  display: flex;
+  /* #endif */
+  /* #ifdef APP-NVUE */
+  flex: 1;
+  /* #endif */
+  flex-direction: column;
+  background-color: #fff;
+}

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

@@ -0,0 +1 @@
+<template>
  <view class="uni-collapse">
    <slot />
  </view>
 * 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
 */
  name: 'uniCollapse',
  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.$nextTick(() => {
      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);
    }
  }

package/uni-ui/lib/uni-collapse-item/style.css

@@ -0,0 +1,120 @@
+.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: #999;
+}
+.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: 22px;
+  width: 22px;
+  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;
+}