@10yun/cv-mobile-ui 0.5.20 → 0.5.22

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

@@ -1 +1,124 @@
-<template>
  <view
    class="uni-card"
    :class="{ 'uni-card--full': isFull, 'uni-card--shadow': isShadow, 'uni-card--border': border }"
    :style="{ margin: isFull ? 0 : margin, padding: spacing, 'box-shadow': isShadow ? shadow : '' }"
  >
    <!-- 封面 -->
    <slot name="cover">
      <view v-if="cover" class="uni-card__cover">
        <image class="uni-card__cover-image" mode="widthFix" @click="onClick('cover')" :src="cover"></image>
      </view>
    </slot>
    <slot name="title">
      <view v-if="title || extra" class="uni-card__header">
        <!-- 卡片标题 -->
        <view class="uni-card__header-box" @click="onClick('title')">
          <view v-if="thumbnail" class="uni-card__header-avatar">
            <image class="uni-card__header-avatar-image" :src="thumbnail" mode="aspectFit" />
          </view>
          <view class="uni-card__header-content">
            <text class="uni-card__header-content-title uni-ellipsis">{{ title }}</text>
            <text v-if="title && subTitle" class="uni-card__header-content-subtitle uni-ellipsis">{{ subTitle }}</text>
          </view>
        </view>
        <view class="uni-card__header-extra" @click="onClick('extra')">
          <slot name="extra">
            <text class="uni-card__header-extra-text">{{ extra }}</text>
          </slot>
        </view>
      </view>
    </slot>
    <!-- 卡片内容 -->
    <view class="uni-card__content" :style="{ padding: padding }" @click="onClick('content')">
      <slot></slot>
    </view>
    <view class="uni-card__actions" @click="onClick('actions')">
      <slot name="actions"></slot>
    </view>
  </view>
 * Card 卡片
 * @description 卡片视图组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=22
 * @property {String} title 标题文字
 * @property {String} subTitle 副标题
 * @property {Number} padding 内容内边距
 * @property {Number} margin 卡片外边距
 * @property {Number} spacing 卡片内边距
 * @property {String} extra 标题额外信息
 * @property {String} cover 封面图（本地路径需要引入）
 * @property {String} thumbnail 标题左侧缩略图
 * @property {Boolean} is-full = [true | false] 卡片内容是否通栏，为 true 时将去除padding值
 * @property {Boolean} is-shadow = [true | false] 卡片内容是否开启阴影
 * @property {String} shadow 卡片阴影
 * @property {Boolean} border 卡片边框
 * @event {Function} click 点击 Card 触发事件
 */
  name: 'UniCard',
  emits: ['click'],
  props: {
    title: {
      type: String,
      default: ''
    },
    subTitle: {
      type: String,
      default: ''
    },
    padding: {
      type: String,
      default: '10px'
    },
    margin: {
      type: String,
      default: '15px'
    },
    spacing: {
      type: String,
      default: '0 10px'
    },
    extra: {
      type: String,
      default: ''
    },
    cover: {
      type: String,
      default: ''
    },
    thumbnail: {
      type: String,
      default: ''
    },
    isFull: {
      // 内容区域是否通栏
      type: Boolean,
      default: false
    },
    isShadow: {
      // 是否开启阴影
      type: Boolean,
      default: true
    },
    shadow: {
      type: String,
      default: '0px 0px 3px 1px rgba(0, 0, 0, 0.08)'
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    onClick(type) {
      this.$emit('click', type);
    }
  }
+<template>
+  <view
+    class="uni-card"
+    :class="{ 'uni-card--full': isFull, 'uni-card--shadow': isShadow, 'uni-card--border': border }"
+    :style="{ margin: isFull ? 0 : margin, padding: spacing, 'box-shadow': isShadow ? shadow : '' }"
+  >
+    <!-- 封面 -->
+    <slot name="cover">
+      <view v-if="cover" class="uni-card__cover">
+        <image class="uni-card__cover-image" mode="widthFix" @click="onClick('cover')" :src="cover"></image>
+      </view>
+    </slot>
+    <slot name="title">
+      <view v-if="title || extra" class="uni-card__header">
+        <!-- 卡片标题 -->
+        <view class="uni-card__header-box" @click="onClick('title')">
+          <view v-if="thumbnail" class="uni-card__header-avatar">
+            <image class="uni-card__header-avatar-image" :src="thumbnail" mode="aspectFit" />
+          </view>
+          <view class="uni-card__header-content">
+            <text class="uni-card__header-content-title uni-ellipsis">{{ title }}</text>
+            <text v-if="title && subTitle" class="uni-card__header-content-subtitle uni-ellipsis">{{ subTitle }}</text>
+          </view>
+        </view>
+        <view class="uni-card__header-extra" @click="onClick('extra')">
+          <slot name="extra">
+            <text class="uni-card__header-extra-text">{{ extra }}</text>
+          </slot>
+        </view>
+      </view>
+    </slot>
+    <!-- 卡片内容 -->
+    <view class="uni-card__content" :style="{ padding: padding }" @click="onClick('content')">
+      <slot></slot>
+    </view>
+    <view class="uni-card__actions" @click="onClick('actions')">
+      <slot name="actions"></slot>
+    </view>
+  </view>
+</template>
+<script>
+/**
+ * Card 卡片
+ * @description 卡片视图组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=22
+ * @property {String} title 标题文字
+ * @property {String} subTitle 副标题
+ * @property {Number} padding 内容内边距
+ * @property {Number} margin 卡片外边距
+ * @property {Number} spacing 卡片内边距
+ * @property {String} extra 标题额外信息
+ * @property {String} cover 封面图（本地路径需要引入）
+ * @property {String} thumbnail 标题左侧缩略图
+ * @property {Boolean} is-full = [true | false] 卡片内容是否通栏，为 true 时将去除padding值
+ * @property {Boolean} is-shadow = [true | false] 卡片内容是否开启阴影
+ * @property {String} shadow 卡片阴影
+ * @property {Boolean} border 卡片边框
+ * @event {Function} click 点击 Card 触发事件
+ */
+export default {
+  name: 'UniCard',
+  emits: ['click'],
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    subTitle: {
+      type: String,
+      default: ''
+    },
+    padding: {
+      type: String,
+      default: '10px'
+    },
+    margin: {
+      type: String,
+      default: '15px'
+    },
+    spacing: {
+      type: String,
+      default: '0 10px'
+    },
+    extra: {
+      type: String,
+      default: ''
+    },
+    cover: {
+      type: String,
+      default: ''
+    },
+    thumbnail: {
+      type: String,
+      default: ''
+    },
+    isFull: {
+      // 内容区域是否通栏
+      type: Boolean,
+      default: false
+    },
+    isShadow: {
+      // 是否开启阴影
+      type: Boolean,
+      default: true
+    },
+    shadow: {
+      type: String,
+      default: '0px 0px 3px 1px rgba(0, 0, 0, 0.08)'
+    },
+    border: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    onClick(type) {
+      this.$emit('click', type);
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>

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

@@ -201,5 +201,5 @@ export default {
 };
 </script>
 <style>
-@import './style.css';
+@import 'style.css';
 </style>

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

@@ -1 +1,135 @@
-<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);
    }
  }
+<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: '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);
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>