@10yun/cv-mobile-ui 0.5.27 → 0.5.30

package/uview-plus/components/u-button-wu/vue.scss

@@ -0,0 +1,81 @@
+// nvue下hover-class无效
+$u-button-before-top:50% !default;
+$u-button-before-left:50% !default;
+$u-button-before-width:100% !default;
+$u-button-before-height:100% !default;
+$u-button-before-transform:translate(-50%, -50%) !default;
+$u-button-before-opacity:0 !default;
+$u-button-before-background-color:#000 !default;
+$u-button-before-border-color:#000 !default;
+$u-button-active-before-opacity:.15 !default;
+$u-button-icon-margin-left:4px !default;
+$u-button-plain-u-button-info-color:$u-info;
+$u-button-plain-u-button-success-color:$u-success;
+$u-button-plain-u-button-error-color:$u-error;
+$u-button-plain-u-button-warning-color:$u-warning;
+
+.u-button {
+	width: 100%;
+	white-space: nowrap;
+	
+	&__text {
+		white-space: nowrap;
+		line-height: 1;
+	}
+	
+	&:before {
+		position: absolute;
+		top:$u-button-before-top;
+		left:$u-button-before-left;
+		width:$u-button-before-width;
+		height:$u-button-before-height;
+		border: inherit;
+		border-radius: inherit;
+		transform:$u-button-before-transform;
+		opacity:$u-button-before-opacity;
+		content: " ";
+		background-color:$u-button-before-background-color;
+		border-color:$u-button-before-border-color;
+	}
+	
+	&--active {
+		&:before {
+			opacity: .15
+		}
+	}
+	
+	&__icon+&__text:not(:empty),
+	&__loading-text {
+		margin-left:$u-button-icon-margin-left;
+	}
+	
+	&--plain {
+		&.u-button--primary {
+			color: $u-primary;
+		}
+	}
+	
+	&--plain {
+		&.u-button--info {
+			color:$u-button-plain-u-button-info-color;
+		}
+	}
+	
+	&--plain {
+		&.u-button--success {
+			color:$u-button-plain-u-button-success-color;
+		}
+	}
+	
+	&--plain {
+		&.u-button--error {
+			color:$u-button-plain-u-button-error-color;
+		}
+	}
+	
+	&--plain {
+		&.u-button--warning {
+			color:$u-button-plain-u-button-warning-color;
+		}
+	}
+}

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

@@ -16,7 +16,7 @@ export default {
         mode: 'single',
         startText: '开始',
         endText: '结束',
-        customList: () => [],
+        customList: [],
         color: '#3c9cff',
         minDate: 0,
         maxDate: 0,
@@ -35,8 +35,11 @@ export default {
         maxRange: Number.MAX_SAFE_INTEGER, // Infinity
         rangePrompt: '',
         showRangePrompt: true,
-        allowSameDay: false,
-		round: 0,
-		monthNum: 3
+        allowSameDay: false,
+		round: 0,
+		monthNum: 3,
+        weekText: ['一', '二', '三', '四', '五', '六', '日'],
+        forbidDays: [],
+        forbidDaysToast: '该日期已禁用',
     }
 }

package/uview-plus/components/u-calendar/header.vue

@@ -1 +1,3 @@
-<template>
  <view class="u-calendar-header u-border-bottom">
    <text class="u-calendar-header__title" v-if="showTitle">{{ title }}</text>
    <text class="u-calendar-header__subtitle" v-if="showSubtitle">{{ subtitle }}</text>
    <view class="u-calendar-header__weekdays">
      <text class="u-calendar-header__weekdays__weekday">一</text>
      <text class="u-calendar-header__weekdays__weekday">二</text>
      <text class="u-calendar-header__weekdays__weekday">三</text>
      <text class="u-calendar-header__weekdays__weekday">四</text>
      <text class="u-calendar-header__weekdays__weekday">五</text>
      <text class="u-calendar-header__weekdays__weekday">六</text>
      <text class="u-calendar-header__weekdays__weekday">日</text>
    </view>
  </view>
  name: 'u-calendar-header',
  mixins: [mpMixin, mixin],
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 副标题
    subtitle: {
      type: String,
      default: ''
    },
    // 是否显示标题
    showTitle: {
      type: Boolean,
      default: true
    },
    // 是否显示副标题
    showSubtitle: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  methods: {
    name() {}
  }
+<template>
  <view class="u-calendar-header u-border-bottom">
    <text class="u-calendar-header__title" v-if="showTitle">{{ title }}</text>
    <text class="u-calendar-header__subtitle" v-if="showSubtitle">{{ subtitle }}</text>
    <view class="u-calendar-header__weekdays">
      <text class="u-calendar-header__weekdays__weekday">{{ weekText[0] }}</text>
      <text class="u-calendar-header__weekdays__weekday">{{ weekText[1] }}</text>
      <text class="u-calendar-header__weekdays__weekday">{{ weekText[2] }}</text>
      <text class="u-calendar-header__weekdays__weekday">{{ weekText[3] }}</text>
      <text class="u-calendar-header__weekdays__weekday">{{ weekText[4] }}</text>
      <text class="u-calendar-header__weekdays__weekday">{{ weekText[5] }}</text>
      <text class="u-calendar-header__weekdays__weekday">{{ weekText[6] }}</text>
    </view>
  </view>
  name: 'u-calendar-header',
  mixins: [mpMixin, mixin],
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 副标题
    subtitle: {
      type: String,
      default: ''
    },
    // 是否显示标题
    showTitle: {
      type: Boolean,
      default: true
    },
    // 是否显示副标题
    showSubtitle: {
      type: Boolean,
      default: true
    },
    // 星期文本
    weekText: {
      type: Array,
      default: () => {
        return ['一', '二', '三', '四', '五', '六', '日'];
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    name() {}
  }
+@import './style.css';
+</style>

package/uview-plus/components/u-calendar/month.vue

@@ -23,7 +23,7 @@
           <view class="u-calendar-month__days__day__select" :style="[daySelectStyle(index, index1, item1)]">
             <text
               class="u-calendar-month__days__day__select__info"
-              :class="[item1.disabled && 'u-calendar-month__days__day__select__info--disabled']"
+              :class="[item1.disabled || isForbid(item1) ? 'u-calendar-month__days__day__select__info--disabled' : '']"
               :style="[textStyle(item1)]"
             >
               {{ item1.day }}
@@ -31,7 +31,7 @@
             <text
               v-if="getBottomInfo(index, index1, item1)"
               class="u-calendar-month__days__day__select__buttom-info"
-              :class="[item1.disabled && 'u-calendar-month__days__day__select__buttom-info--disabled']"
+              :class="[item1.disabled || isForbid(item1) ? 'u-calendar-month__days__day__select__buttom-info--disabled' : '']"
               :style="[textStyle(item1)]"
             >
               {{ getBottomInfo(index, index1, item1) }}
@@ -48,10 +48,12 @@
 // 由于nvue不支持百分比单位，需要查询宽度来计算每个日期的宽度
 const dom = uni.requireNativePlugin('dom');
 // #endif
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
-import defprops from '../../libs/config/props';
-// import dayjs from '../../libs/util/dayjs.js';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, deepClone, toast, sleep } from '../../libs/function/index';
+import { colorGradient } from '../../libs/function/colorGradient';
+import test from '../../libs/function/test';
+import defProps from '../../libs/config/props';
 import dayjs from 'dayjs/esm/index';
 export default {
   name: 'u-calendar-month',
@@ -120,7 +122,7 @@ export default {
     // 是否为只读状态，只读状态下禁止选择日期
     readonly: {
       type: Boolean,
-      default: defprops.calendar.readonly
+      default: () => defProps.calendar.readonly
     },
     // 日期区间最多可选天数，默认无限制，mode = range时有效
     maxRange: {
@@ -141,6 +143,14 @@ export default {
     allowSameDay: {
       type: Boolean,
       default: false
+    },
+    forbidDays: {
+      type: Array,
+      default: () => []
+    },
+    forbidDaysToast: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -177,16 +187,16 @@ export default {
         );
         // 得出每个日期的宽度
         // #ifdef APP-NVUE
-        style.width = uni.$u.addUnit(dayWidth);
+        style.width = addUnit(dayWidth, 'px');
         // #endif
-        style.height = uni.$u.addUnit(this.rowHeight);
+        style.height = addUnit(this.rowHeight);
         if (index2 === 0) {
           // 获取当前为星期几，如果为0，则为星期天，减一为每月第一天时，需要向左偏移的item个数
           week = (week === 0 ? 7 : week) - 1;
-          style.marginLeft = uni.$u.addUnit(week * dayWidth);
+          style.marginLeft = addUnit(week * dayWidth, 'px');
         }
         if (this.mode === 'range') {
-          // 之所以需要这么写，是因为DCloud公司的iOS客户端的开发者能力有限导致的bug
+          // 之所以需要这么写，是因为DCloud公司的iOS客户端导致的bug
           style.paddingLeft = 0;
           style.paddingRight = 0;
           style.paddingBottom = 0;
@@ -226,7 +236,7 @@ export default {
             }
             // 处于第一和最后一个之间的日期，背景色设置为浅色，通过将对应颜色进行等分，再取其尾部的颜色值
             if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this.selected[len]))) {
-              style.backgroundColor = uni.$u.colorGradient(this.color, '#ffffff', 100)[90];
+              style.backgroundColor = colorGradient(this.color, '#ffffff', 100)[90];
               // 增加一个透明度，让范围区间的背景色也能看到底部的mark水印字符
               style.opacity = 0.7;
             }
@@ -300,6 +310,7 @@ export default {
   mounted() {
     this.init();
   },
+  emits: ['monthSelected', 'updateMonthTop'],
   methods: {
     init() {
       // 初始化默认选中
@@ -307,12 +318,19 @@ export default {
       this.$nextTick(() => {
         // 这里需要另一个延时，因为获取宽度后，会进行月份数据渲染，只有渲染完成之后，才有真正的高度
         // 因为nvue下，$nextTick并不是100%可靠的
-        uni.$u.sleep(10).then(() => {
+        sleep(10).then(() => {
           this.getWrapperWidth();
           this.getMonthRect();
         });
       });
     },
+    isForbid(item) {
+      let date = dayjs(item.date).format('YYYY-MM-DD');
+      if (this.mode !== 'range' && this.forbidDays.includes(date)) {
+        return true;
+      }
+      return false;
+    },
     // 判断两个日期是否相等
     dateSame(date1, date2) {
       return dayjs(date1).isSame(dayjs(date2));
@@ -375,8 +393,14 @@ export default {
       this.item = item;
       const date = dayjs(item.date).format('YYYY-MM-DD');
       if (item.disabled) return;
+      if (this.isForbid(item)) {
+        uni.showToast({
+          title: this.forbidDaysToast
+        });
+        return;
+      }
       // 对上一次选择的日期数组进行深度克隆
-      let selected = uni.$u.deepClone(this.selected);
+      let selected = deepClone(this.selected);
       if (this.mode === 'single') {
         // 单选情况下，让数组中的元素为当前点击的日期
         selected = [date];
@@ -404,9 +428,9 @@ export default {
             // 当前日期减去最大可选的日期天数，如果大于起始时间，则进行提示
             if (dayjs(dayjs(date).subtract(this.maxRange, 'day')).isAfter(dayjs(selected[0])) && this.showRangePrompt) {
               if (this.rangePrompt) {
-                uni.$u.toast(this.rangePrompt);
+                toast(this.rangePrompt);
               } else {
-                uni.$u.toast(`选择天数不能超过 ${this.maxRange} 天`);
+                toast(`选择天数不能超过 ${this.maxRange} 天`);
               }
               return;
             }
@@ -450,14 +474,14 @@ export default {
           .format('YYYY-MM-DD');
       if (this.mode === 'single') {
         // 单选模式，可以是字符串或数组，Date对象等
-        if (!uni.$u.test.array(this.defaultDate)) {
+        if (!test.array(this.defaultDate)) {
           defaultDate = [dayjs(this.defaultDate).format('YYYY-MM-DD')];
         } else {
           defaultDate = [this.defaultDate[0]];
         }
       } else {
         // 如果为非数组，则不执行
-        if (!uni.$u.test.array(this.defaultDate)) return;
+        if (!test.array(this.defaultDate)) return;
         defaultDate = this.defaultDate;
       }
       // 过滤用户传递的默认数组，取出只在可允许最大值与最小值之间的元素
@@ -468,7 +492,7 @@ export default {
     },
     setSelected(selected, event = true) {
       this.selected = selected;
-      event && this.$emit('monthSelected', this.selected);
+      event && this.$emit('monthSelected', this.selected, 'tap');
     }
   }
 };

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

@@ -1,145 +1,160 @@
-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.calendar.title
+      default: () => defProps.calendar.title
     },
     // 是否显示标题
     showTitle: {
       type: Boolean,
-      default: defprops.calendar.showTitle
+      default: () => defProps.calendar.showTitle
     },
     // 是否显示副标题
     showSubtitle: {
       type: Boolean,
-      default: defprops.calendar.showSubtitle
+      default: () => defProps.calendar.showSubtitle
     },
     // 日期类型选择，single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围
     mode: {
       type: String,
-      default: defprops.calendar.mode
+      default: () => defProps.calendar.mode
     },
     // mode=range时，第一个日期底部的提示文字
     startText: {
       type: String,
-      default: defprops.calendar.startText
+      default: () => defProps.calendar.startText
     },
     // mode=range时，最后一个日期底部的提示文字
     endText: {
       type: String,
-      default: defprops.calendar.endText
+      default: () => defProps.calendar.endText
     },
     // 自定义列表
     customList: {
       type: Array,
-      default: defprops.calendar.customList
+      default: () => defProps.calendar.customList
     },
     // 主题色，对底部按钮和选中日期有效
     color: {
       type: String,
-      default: defprops.calendar.color
+      default: () => defProps.calendar.color
     },
     // 最小的可选日期
     minDate: {
       type: [String, Number],
-      default: defprops.calendar.minDate
+      default: () => defProps.calendar.minDate
     },
     // 最大可选日期
     maxDate: {
       type: [String, Number],
-      default: defprops.calendar.maxDate
+      default: () => defProps.calendar.maxDate
     },
     // 默认选中的日期，mode为multiple或range是必须为数组格式
     defaultDate: {
       type: [Array, String, Date, null],
-      default: defprops.calendar.defaultDate
+      default: () => defProps.calendar.defaultDate
     },
     // mode=multiple时，最多可选多少个日期
     maxCount: {
       type: [String, Number],
-      default: defprops.calendar.maxCount
+      default: () => defProps.calendar.maxCount
     },
     // 日期行高
     rowHeight: {
       type: [String, Number],
-      default: defprops.calendar.rowHeight
+      default: () => defProps.calendar.rowHeight
     },
     // 日期格式化函数
     formatter: {
       type: [Function, null],
-      default: defprops.calendar.formatter
+      default: () => defProps.calendar.formatter
     },
     // 是否显示农历
     showLunar: {
       type: Boolean,
-      default: defprops.calendar.showLunar
+      default: () => defProps.calendar.showLunar
     },
     // 是否显示月份背景色
     showMark: {
       type: Boolean,
-      default: defprops.calendar.showMark
+      default: () => defProps.calendar.showMark
     },
     // 确定按钮的文字
     confirmText: {
       type: String,
-      default: defprops.calendar.confirmText
+      default: () => defProps.calendar.confirmText
     },
     // 确认按钮处于禁用状态时的文字
     confirmDisabledText: {
       type: String,
-      default: defprops.calendar.confirmDisabledText
+      default: () => defProps.calendar.confirmDisabledText
     },
     // 是否显示日历弹窗
     show: {
       type: Boolean,
-      default: defprops.calendar.show
+      default: () => defProps.calendar.show
     },
     // 是否允许点击遮罩关闭日历
     closeOnClickOverlay: {
       type: Boolean,
-      default: defprops.calendar.closeOnClickOverlay
+      default: () => defProps.calendar.closeOnClickOverlay
     },
     // 是否为只读状态，只读状态下禁止选择日期
     readonly: {
       type: Boolean,
-      default: defprops.calendar.readonly
+      default: () => defProps.calendar.readonly
     },
     // 	是否展示确认按钮
     showConfirm: {
       type: Boolean,
-      default: defprops.calendar.showConfirm
+      default: () => defProps.calendar.showConfirm
     },
     // 日期区间最多可选天数，默认无限制，mode = range时有效
     maxRange: {
       type: [Number, String],
-      default: defprops.calendar.maxRange
+      default: () => defProps.calendar.maxRange
     },
     // 范围选择超过最多可选天数时的提示文案，mode = range时有效
     rangePrompt: {
       type: String,
-      default: defprops.calendar.rangePrompt
+      default: () => defProps.calendar.rangePrompt
     },
     // 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效
     showRangePrompt: {
       type: Boolean,
-      default: defprops.calendar.showRangePrompt
+      default: () => defProps.calendar.showRangePrompt
     },
     // 是否允许日期范围的起止时间为同一天，mode = range时有效
     allowSameDay: {
       type: Boolean,
-      default: defprops.calendar.allowSameDay
+      default: () => defProps.calendar.allowSameDay
     },
     // 圆角值
     round: {
       type: [Boolean, String, Number],
-      default: defprops.calendar.round
+      default: () => defProps.calendar.round
     },
     // 最多展示月份数量
     monthNum: {
       type: [Number, String],
       default: 3
+    },
+    // 星期文案
+    weekText: {
+      type: Array,
+      default: defProps.calendar.weekText
+    },
+    forbidDays: {
+      type: Array,
+      default: defProps.calendar.forbidDays
+    },
+    forbidDaysToast: {
+      type: String,
+      default: defProps.calendar.forbidDaysToast
     }
   }
-};
+});

package/uview-plus/components/u-calendar/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;
@@ -11,4 +26,4 @@ view, scroll-view, swiper-item {
 /* #endif */
 .u-calendar__confirm {
   padding: 7px 18px;
-}
+}