@10yun/cv-mobile-ui 0.5.26 → 0.5.29

package/uview-plus/components/u-action-sheet-data/u-action-sheet-data.vue

@@ -0,0 +1,94 @@
+<template>
+  <view class="u-action-sheet-data">
+    <view class="u-action-sheet-data__trigger">
+      <slot name="trigger"></slot>
+      <up-input
+        v-if="!$slots['trigger']"
+        :modelValue="current"
+        disabled
+        disabledColor="#ffffff"
+        :placeholder="title"
+        border="none"
+      ></up-input>
+      <view @click="show = true" class="u-action-sheet-data__trigger__cover"></view>
+    </view>
+    <up-action-sheet
+      :show="show"
+      :actions="options"
+      :title="title"
+      safeAreaInsetBottom
+      :description="description"
+      @close="show = false"
+      @select="select"
+    ></up-action-sheet>
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    labelKey: {
+      type: String,
+      default: 'name'
+    }
+  },
+  data() {
+    return {
+      show: false,
+      current: ''
+    };
+  },
+  created() {
+    if (this.modelValue) {
+      this.options.forEach((ele) => {
+        if (ele[this.valueKey] == this.modelValue) {
+          this.current = ele[this.labelKey];
+        }
+      });
+    }
+  },
+  emits: ['update:modelValue'],
+  watch: {
+    modelValue() {
+      this.options.forEach((ele) => {
+        if (ele[this.valueKey] == this.modelValue) {
+          this.current = ele[this.labelKey];
+        }
+      });
+    }
+  },
+  methods: {
+    hideKeyboard() {
+      uni.hideKeyboard();
+    },
+    select(e) {
+      this.$emit('update:modelValue', e[this.valueKey]);
+      this.current = e[this.labelKey];
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/{libs/config/props → components/u-album}/album.js

@@ -10,7 +10,7 @@
 export default {
     // album 组件
     album: {
-        urls: () => [],
+        urls: [],
         keyName: '',
         singleSize: 180,
         multipleSize: 70,
@@ -20,6 +20,9 @@ export default {
         maxCount: 9,
         previewFullImage: true,
         rowCount: 3,
-        showMore: true
+        showMore: true,
+        autoWrap: false,
+        unit: 'px',
+        stop: true,
     }
 }

package/uview-plus/components/u-album/props.js

@@ -1,60 +1,86 @@
-import defprops from '../../libs/config/props';
-export default {
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
   props: {
     // 图片地址，Array<String>|Array<Object>形式
     urls: {
       type: Array,
-      default: defprops.album.urls
+      default: () => defProps.album.urls
     },
     // 指定从数组的对象元素中读取哪个属性作为图片地址
     keyName: {
       type: String,
-      default: defprops.album.keyName
+      default: () => defProps.album.keyName
     },
     // 单图时，图片长边的长度
     singleSize: {
       type: [String, Number],
-      default: defprops.album.singleSize
+      default: () => defProps.album.singleSize
     },
     // 多图时，图片边长
     multipleSize: {
       type: [String, Number],
-      default: defprops.album.multipleSize
+      default: () => defProps.album.multipleSize
     },
     // 多图时，图片水平和垂直之间的间隔
     space: {
       type: [String, Number],
-      default: defprops.album.space
+      default: () => defProps.album.space
     },
     // 单图时，图片缩放裁剪的模式
     singleMode: {
       type: String,
-      default: defprops.album.singleMode
+      default: () => defProps.album.singleMode
     },
     // 多图时，图片缩放裁剪的模式
     multipleMode: {
       type: String,
-      default: defprops.album.multipleMode
+      default: () => defProps.album.multipleMode
     },
     // 最多展示的图片数量，超出时最后一个位置将会显示剩余图片数量
     maxCount: {
       type: [String, Number],
-      default: defprops.album.maxCount
+      default: () => defProps.album.maxCount
     },
     // 是否可以预览图片
     previewFullImage: {
       type: Boolean,
-      default: defprops.album.previewFullImage
+      default: () => defProps.album.previewFullImage
     },
     // 每行展示图片数量，如设置，singleSize和multipleSize将会无效
     rowCount: {
       type: [String, Number],
-      default: defprops.album.rowCount
+      default: () => defProps.album.rowCount
     },
     // 超出maxCount时是否显示查看更多的提示
     showMore: {
       type: Boolean,
-      default: defprops.album.showMore
+      default: () => defProps.album.showMore
+    },
+    // 图片形状，circle-圆形，square-方形
+    shape: {
+      type: String,
+      default: () => defProps.image.shape
+    },
+    // 圆角，单位任意
+    radius: {
+      type: [String, Number],
+      default: () => defProps.image.radius
+    },
+    // 自适应换行
+    autoWrap: {
+      type: Boolean,
+      default: () => defProps.album.autoWrap
+    },
+    // 单位
+    unit: {
+      type: [String],
+      default: () => defProps.album.unit
+    },
+    // 阻止点击冒泡
+    stop: {
+      type: Boolean,
+      default: () => defProps.album.stop
     }
   }
-};
+});

package/uview-plus/components/u-album/style.css

@@ -1,5 +1,20 @@
 /* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -20,7 +35,6 @@ view, scroll-view, swiper-item {
   display: flex;
   /* #endif */
   flex-direction: row;
-  flex-wrap: wrap;
 }
 .u-album__row__wrapper {
   position: relative;

package/uview-plus/components/u-album/style.scss

@@ -5,7 +5,6 @@
 
   &__row {
     @include flex(row);
-    flex-wrap: wrap;
 
     &__wrapper {
       position: relative;

package/uview-plus/components/u-album/u-album.vue

@@ -1,12 +1,19 @@
 <template>
   <view class="u-album">
-    <view class="u-album__row" ref="u-album__row" v-for="(arr, index) in showUrls" :forComputedUse="albumWidth" :key="index">
+    <view
+      class="u-album__row"
+      ref="u-album__row"
+      v-for="(arr, index) in showUrls"
+      :forComputedUse="albumWidth"
+      :key="index"
+      :style="{ flexWrap: autoWrap ? 'wrap' : 'nowrap' }"
+    >
       <view
         class="u-album__row__wrapper"
         v-for="(item, index1) in arr"
         :key="index1"
         :style="[imageStyle(index + 1, index1 + 1)]"
-        @tap="previewFullImage ? onPreviewTap(getSrc(item)) : ''"
+        @tap="previewFullImage ? onPreviewTap($event, getSrc(item)) : ''"
       >
         <image
           :src="getSrc(item)"
@@ -14,7 +21,8 @@
           :style="[
             {
               width: imageWidth,
-              height: imageHeight
+              height: imageHeight,
+              borderRadius: shape == 'circle' ? '10000px' : addUnit(radius)
             }
           ]"
         ></image>
@@ -26,23 +34,28 @@
             index1 === showUrls[showUrls.length - 1].length - 1
           "
           class="u-album__row__wrapper__text"
+          :style="{
+            borderRadius: shape == 'circle' ? '50%' : addUnit(radius)
+          }"
         >
-          <u--text
+          <up-text
             :text="`+${urls.length - maxCount}`"
             color="#fff"
             :size="multipleSize * 0.3"
             align="center"
             customStyle="justify-content: center"
-          ></u--text>
+          ></up-text>
         </view>
       </view>
     </view>
   </view>
 </template>
 <script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, sleep } from '../../libs/function/index';
+import test from '../../libs/function/test';
 // #ifdef APP-NVUE
 // 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
 const dom = uni.requireNativePlugin('dom');
@@ -63,7 +76,10 @@ const dom = uni.requireNativePlugin('dom');
  * @property {Boolean}         previewFullImage 是否可以预览图片 （默认 true ）
  * @property {String | Number} rowCount         每行展示图片数量，如设置，singleSize和multipleSize将会无效	（默认 3 ）
  * @property {Boolean}         showMore         超出maxCount时是否显示查看更多的提示 （默认 true ）
- *
+ * @property {String}          shape            图片形状，circle-圆形，square-方形 （默认 'square' ）
+ * @property {String | Number} radius           圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
+ * @property {Boolean}         autoWrap         自适应换行模式，不受rowCount限制，图片会自动换行 （默认 false ）
+ * @property {String}          unit             图片单位 （默认 px ）
  * @event    {Function}        albumWidth       某些特殊的情况下，需要让文字与相册的宽度相等，这里事件的形式对外发送  （回调参数 width ）
  * @example <u-album :urls="urls2" @albumWidth="width => albumWidth = width" multipleSize="68" ></u-album>
  */
@@ -90,11 +106,11 @@ export default {
       }
     }
   },
+  emits: ['albumWidth'],
   computed: {
     imageStyle() {
       return (index1, index2) => {
         const { space, rowCount, multipleSize, urls } = this,
-          { addUnit, addStyle } = uni.$u,
           rowLen = this.showUrls.length,
           allLen = this.urls.length;
         const style = {
@@ -102,34 +118,40 @@ export default {
           marginBottom: addUnit(space)
         };
         // 如果为最后一行，则每个图片都无需下边框
-        if (index1 === rowLen) style.marginBottom = 0;
+        if (index1 === rowLen && !this.autoWrap) style.marginBottom = 0;
         // 每行的最右边一张和总长度的最后一张无需右边框
-        if (index2 === rowCount || (index1 === rowLen && index2 === this.showUrls[index1 - 1].length)) style.marginRight = 0;
+        if (!this.autoWrap) {
+          if (index2 === rowCount || (index1 === rowLen && index2 === this.showUrls[index1 - 1].length)) style.marginRight = 0;
+        }
         return style;
       };
     },
     // 将数组划分为二维数组
     showUrls() {
-      const arr = [];
-      this.urls.map((item, index) => {
-        // 限制最大展示数量
-        if (index + 1 <= this.maxCount) {
-          // 计算该元素为第几个素组内
-          const itemIndex = Math.floor(index / this.rowCount);
-          // 判断对应的索引是否存在
-          if (!arr[itemIndex]) {
-            arr[itemIndex] = [];
+      if (this.autoWrap) {
+        return [this.urls.slice(0, this.maxCount)];
+      } else {
+        const arr = [];
+        this.urls.map((item, index) => {
+          // 限制最大展示数量
+          if (index + 1 <= this.maxCount) {
+            // 计算该元素为第几个素组内
+            const itemIndex = Math.floor(index / this.rowCount);
+            // 判断对应的索引是否存在
+            if (!arr[itemIndex]) {
+              arr[itemIndex] = [];
+            }
+            arr[itemIndex].push(item);
           }
-          arr[itemIndex].push(item);
-        }
-      });
-      return arr;
+        });
+        return arr;
+      }
     },
     imageWidth() {
-      return uni.$u.addUnit(this.urls.length === 1 ? this.singleWidth : this.multipleSize);
+      return addUnit(this.urls.length === 1 ? this.singleWidth : this.multipleSize, this.unit);
     },
     imageHeight() {
-      return uni.$u.addUnit(this.urls.length === 1 ? this.singleHeight : this.multipleSize);
+      return addUnit(this.urls.length === 1 ? this.singleHeight : this.multipleSize, this.unit);
     },
     // 此变量无实际用途，仅仅是为了利用computed特性，让其在urls长度等变化时，重新计算图片的宽度
     // 因为用户在某些特殊的情况下，需要让文字与相册的宽度相等，所以这里事件的形式对外发送
@@ -145,8 +167,9 @@ export default {
     }
   },
   methods: {
+    addUnit,
     // 预览图片
-    onPreviewTap(url) {
+    onPreviewTap(e, url) {
       const urls = this.urls.map((item) => {
         return this.getSrc(item);
       });
@@ -154,10 +177,12 @@ export default {
         current: url,
         urls
       });
+      // 是否阻止事件传播
+      this.stop && this.preventEvent(e);
     },
     // 获取图片的路径
     getSrc(item) {
-      return uni.$u.test.object(item) ? (this.keyName && item[this.keyName]) || item.src : item;
+      return test.object(item) ? (this.keyName && item[this.keyName]) || item.src : item;
     },
     // 单图时，获取图片的尺寸
     // 在小程序中，需要将网络图片的的域名添加到小程序的download域名才可能获取尺寸
@@ -180,7 +205,7 @@ export default {
     // 获取组件的宽度
     async getComponentWidth() {
       // 延时一定时间，以获取dom尺寸
-      await uni.$u.sleep(30);
+      await sleep(30);
       // #ifndef APP-NVUE
       this.$uGetRect('.u-album__row').then((size) => {
         this.singleWidth = size.width * this.singlePercent;

package/uview-plus/components/u-alert/props.js

@@ -1,45 +1,46 @@
-import defprops from '../../libs/config/props';
-export default {
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
   props: {
     // 显示文字
     title: {
       type: String,
-      default: defprops.alert.title
+      default: () => defProps.alert.title
     },
     // 主题，success/warning/info/error
     type: {
       type: String,
-      default: defprops.alert.type
+      default: () => defProps.alert.type
     },
     // 辅助性文字
     description: {
       type: String,
-      default: defprops.alert.description
+      default: () => defProps.alert.description
     },
     // 是否可关闭
     closable: {
       type: Boolean,
-      default: defprops.alert.closable
+      default: () => defProps.alert.closable
     },
     // 是否显示图标
     showIcon: {
       type: Boolean,
-      default: defprops.alert.showIcon
+      default: () => defProps.alert.showIcon
     },
     // 浅或深色调，light-浅色，dark-深色
     effect: {
       type: String,
-      default: defprops.alert.effect
+      default: () => defProps.alert.effect
     },
     // 文字是否居中
     center: {
       type: Boolean,
-      default: defprops.alert.center
+      default: () => defProps.alert.center
     },
     // 字体大小
     fontSize: {
       type: [String, Number],
-      default: defprops.alert.fontSize
+      default: () => defProps.alert.fontSize
     }
   }
-};
+});

package/uview-plus/components/u-alert/style.css

@@ -1,5 +1,20 @@
 /* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -98,4 +113,4 @@ view, scroll-view, swiper-item {
   position: absolute;
   top: 11px;
   right: 10px;
-}
+}

package/uview-plus/components/u-alert/u-alert.vue

@@ -1,6 +1,6 @@
 <template>
   <u-transition mode="fade" :show="show">
-    <view class="u-alert" :class="[`u-alert--${type}--${effect}`]" @tap.stop="clickHandler" :style="[$u.addStyle(customStyle)]">
+    <view class="u-alert" :class="[`u-alert--${type}--${effect}`]" @tap.stop="clickHandler" :style="[addStyle(customStyle)]">
       <view class="u-alert__icon" v-if="showIcon">
         <u-icon :name="iconName" size="18" :color="iconColor"></u-icon>
       </view>
@@ -17,7 +17,7 @@
           v-if="title"
           :style="[
             {
-              fontSize: $u.addUnit(fontSize),
+              fontSize: addUnit(fontSize),
               textAlign: center ? 'center' : 'left'
             }
           ]"
@@ -30,7 +30,7 @@
           v-if="description"
           :style="[
             {
-              fontSize: $u.addUnit(fontSize),
+              fontSize: addUnit(fontSize),
               textAlign: center ? 'center' : 'left'
             }
           ]"
@@ -46,9 +46,10 @@
   </u-transition>
 </template>
 <script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, addStyle } from '../../libs/function/index';
 /**
  * Alert  警告提示
  * @description 警告提示，展现需要关注的信息。
@@ -64,6 +65,7 @@ import mixin from '../../libs/mixin/mixin.js';
  * @property {String | Number}	fontSize    字体大小  （默认 14 ）
  * @property {Object}			customStyle	定义需要用到的外部样式
  * @event    {Function}        click       点击组件时触发
+ * @event    {Function}        close       点击关闭按钮时触发
  * @example  <u-alert :title="title"  type = "warning" :closable="closable" :description = "description"></u-alert>
  */
 export default {
@@ -101,7 +103,10 @@ export default {
       }
     }
   },
+  emits: ['click', 'close'],
   methods: {
+    addUnit,
+    addStyle,
     // 点击内容
     clickHandler() {
       this.$emit('click');
@@ -109,6 +114,7 @@ export default {
     // 点击关闭按钮
     closeHandler() {
       this.show = false;
+      this.$emit('close');
     }
   }
 };