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

package/uview-plus/components/u-datetime-picker/style.scss

@@ -1 +1,27 @@
 @import '../../libs/css/components.scss';
+.u-datetime-picker {
+  flex: 1;
+  &__has-input {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /* #ifndef APP-NVUE */
+    width: 100%;
+    /* #endif */
+    .input-cover {
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      border-radius: 4px;
+      border: 1px solid #eee;
+      padding: 0 10px;
+    }
+  }
+}

package/uview-plus/components/u-datetime-picker/u-datetime-picker.vue

@@ -1,23 +1,40 @@
 <template>
-  <u-picker
-    ref="picker"
-    :show="show"
-    :closeOnClickOverlay="closeOnClickOverlay"
-    :columns="columns"
-    :title="title"
-    :itemHeight="itemHeight"
-    :showToolbar="showToolbar"
-    :visibleItemCount="visibleItemCount"
-    :defaultIndex="innerDefaultIndex"
-    :cancelText="cancelText"
-    :confirmText="confirmText"
-    :cancelColor="cancelColor"
-    :confirmColor="confirmColor"
-    @close="close"
-    @cancel="cancel"
-    @confirm="confirm"
-    @change="change"
-  ></u-picker>
+  <view class="u-datetime-picker">
+    <view v-if="hasInput" class="u-datetime-picker__has-input" @click="onShowByClickInput">
+      <slot name="trigger" :value="inputValue">
+        <up-input :readonly="!!showByClickInput" v-model="inputValue" v-bind="inputPropsInner"></up-input>
+        <div class="input-cover"></div>
+      </slot>
+    </view>
+    <u-picker
+      ref="picker"
+      :show="show || (hasInput && showByClickInput)"
+      :popupMode="popupMode"
+      :closeOnClickOverlay="closeOnClickOverlay"
+      :columns="columns"
+      :title="title"
+      :itemHeight="itemHeight"
+      :showToolbar="showToolbar"
+      :visibleItemCount="visibleItemCount"
+      :defaultIndex="innerDefaultIndex"
+      :cancelText="cancelText"
+      :confirmText="confirmText"
+      :cancelColor="cancelColor"
+      :confirmColor="confirmColor"
+      :toolbarRightSlot="toolbarRightSlot"
+      @close="close"
+      @cancel="cancel"
+      @confirm="confirm"
+      @change="change"
+    >
+      <template #toolbar-right>
+        <slot name="toolbar-right"></slot>
+      </template>
+      <template #toolbar-bottom>
+        <slot name="toolbar-bottom"></slot>
+      </template>
+    </u-picker>
+  </view>
 </template>
 <script>
 function times(n, iteratee) {
@@ -28,18 +45,19 @@ function times(n, iteratee) {
   }
   return result;
 }
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
-// import dayjs from '../../libs/util/dayjs.js';
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
 import dayjs from 'dayjs/esm/index';
+import { range, error, padZero } from '../../libs/function/index';
+import test from '../../libs/function/test';
 /**
  * DatetimePicker 时间日期选择器
  * @description 此选择器用于时间日期
  * @tutorial https://ijry.github.io/uview-plus/components/datetimePicker.html
  * @property {Boolean}			show				用于控制选择器的弹出与收起 ( 默认 false )
  * @property {Boolean}			showToolbar			是否显示顶部的操作栏  ( 默认 true )
- * @property {String | Number}	value				绑定值
+ * @property {String | Number}	modelValue		    绑定值
  * @property {String}			title				顶部标题
  * @property {String}			mode				展示格式 mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择  ( 默认 ‘datetime )
  * @property {Number}			maxDate				可选的最大时间  默认值为后10年
@@ -66,10 +84,13 @@ import dayjs from 'dayjs/esm/index';
  * @example  <u-datetime-picker :show="show" :value="value1"  mode="datetime" ></u-datetime-picker>
  */
 export default {
-  name: 'datetime-picker',
+  name: 'up-datetime-picker',
   mixins: [mpMixin, mixin, props],
   data() {
     return {
+      // 原来的日期选择器不方便，这里增加一个hasInput选项支持类似element的自带输入框的功能。
+      inputValue: '', // 表单显示值
+      showByClickInput: false, // 是否在hasInput模式下显示日期选择弹唱
       columns: [],
       innerDefaultIndex: [],
       innerFormatter: (type, value) => value
@@ -81,6 +102,18 @@ export default {
         this.updateColumnValue(this.innerValue);
       }
     },
+    // #ifdef VUE3
+    modelValue(newValue) {
+      this.init();
+      // this.getInputValue(newValue)
+    },
+    // #endif
+    // #ifdef VUE2
+    value(newValue) {
+      this.init();
+      // this.getInputValue(newValue)
+    },
+    // #endif
     propsChange() {
       this.init();
     }
@@ -89,6 +122,16 @@ export default {
     // 如果以下这些变量发生了变化，意味着需要重新初始化各列的值
     propsChange() {
       return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.filter];
+    },
+    // input的props
+    inputPropsInner() {
+      return {
+        border: this.inputBorder,
+        placeholder: this.placeholder,
+        disabled: this.disabled,
+        disabledColor: this.disabledColor,
+        ...this.inputProps
+      };
     }
   },
   mounted() {
@@ -98,6 +141,38 @@ export default {
   emits: ['close', 'cancel', 'confirm', 'change', 'update:modelValue'],
   // #endif
   methods: {
+    getInputValue(newValue) {
+      if (newValue == '' || !newValue || newValue == undefined) {
+        this.inputValue = '';
+        return;
+      }
+      if (this.mode == 'time') {
+        this.inputValue = newValue;
+      } else {
+        if (this.format) {
+          this.inputValue = dayjs(newValue).format(this.format);
+        } else {
+          let format = '';
+          switch (this.mode) {
+            case 'date':
+              format = 'YYYY-MM-DD';
+              break;
+            case 'year-month':
+              format = 'YYYY-MM';
+              break;
+            case 'datetime':
+              format = 'YYYY-MM-DD HH:mm';
+              break;
+            case 'time':
+              format = 'HH:mm';
+              break;
+            default:
+              break;
+          }
+          this.inputValue = dayjs(newValue).format(format);
+        }
+      }
+    },
     init() {
       // #ifdef VUE3
       this.innerValue = this.correctValue(this.modelValue);
@@ -106,6 +181,8 @@ export default {
       this.innerValue = this.correctValue(this.value);
       // #endif
       this.updateColumnValue(this.innerValue);
+      // 初始化hasInput展示
+      this.getInputValue(this.innerValue);
     },
     // 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
     setFormatter(e) {
@@ -119,33 +196,40 @@ export default {
     },
     // 点击工具栏的取消按钮
     cancel() {
+      if (this.hasInput) {
+        this.showByClickInput = false;
+      }
       this.$emit('cancel');
     },
     // 点击工具栏的确定按钮
     confirm() {
-      this.$emit('confirm', {
-        value: this.innerValue,
-        mode: this.mode
-      });
       // #ifdef VUE3
       this.$emit('update:modelValue', this.innerValue);
       // #endif
       // #ifdef VUE2
       this.$emit('input', this.innerValue);
       // #endif
+      if (this.hasInput) {
+        this.getInputValue(this.innerValue);
+        this.showByClickInput = false;
+      }
+      this.$emit('confirm', {
+        value: this.innerValue,
+        mode: this.mode
+      });
     },
     //用正则截取输出值,当出现多组数字时,抛出错误
     intercept(e, type) {
       let judge = e.match(/\d+/g);
       //判断是否掺杂数字
       if (judge.length > 1) {
-        uni.$u.error('请勿在过滤或格式化函数时添加数字');
+        error('请勿在过滤或格式化函数时添加数字');
         return 0;
       } else if (type && judge[0].length == 4) {
         //判断是否是年份
         return judge[0];
       } else if (judge[0].length > 2) {
-        uni.$u.error('请勿在过滤或格式化函数时添加数字');
+        error('请勿在过滤或格式化函数时添加数字');
         return 0;
       } else {
         return judge[0];
@@ -189,7 +273,7 @@ export default {
         value: selectValue,
         // #ifndef MP-WEIXIN
         // 微信小程序不能传递this实例，会因为循环引用而报错
-        picker: this.$refs.picker,
+        // picker: this.$refs.picker,
         // #endif
         mode: this.mode
       });
@@ -198,13 +282,15 @@ export default {
     updateColumnValue(value) {
       this.innerValue = value;
       this.updateColumns();
-      this.updateIndexs(value);
+      // 延迟执行,等待u-picker组件列数据更新完后再设置选中值索引
+      setTimeout(() => {
+        this.updateIndexs(value);
+      }, 0);
     },
     // 更新索引
     updateIndexs(value) {
       let values = [];
       const formatter = this.formatter || this.innerFormatter;
-      const padZero = uni.$u.padZero;
       if (this.mode === 'time') {
         // 将time模式的时间用:分隔成数组
         const timeArr = value.split(':');
@@ -252,12 +338,20 @@ export default {
       const results = this.getRanges().map(({ type, range }) => {
         let values = times(range[1] - range[0] + 1, (index) => {
           let value = range[0] + index;
-          value = type === 'year' ? `${value}` : uni.$u.padZero(value);
+          value = type === 'year' ? `${value}` : padZero(value);
           return value;
         });
         // 进行过滤
         if (this.filter) {
           values = this.filter(type, values);
+          if (!values || (values && values.length == 0)) {
+            // uni.showToast({
+            // 	title: '日期filter结果不能为空',
+            // 	icon: 'error',
+            // 	mask: true
+            // })
+            console.log('日期filter结果不能为空');
+          }
         }
         return { type, values };
       });
@@ -270,20 +364,21 @@ export default {
     // 得出合法的时间
     correctValue(value) {
       const isDateMode = this.mode !== 'time';
-      if (isDateMode && !uni.$u.test.date(value)) {
+      // if (isDateMode && !test.date(value)) {
+      if (isDateMode && !dayjs.unix(value).isValid()) {
         // 如果是日期类型，但是又没有设置合法的当前时间的话，使用最小时间为当前时间
         value = this.minDate;
       } else if (!isDateMode && !value) {
         // 如果是时间类型，而又没有默认值的话，就用最小时间
-        value = `${uni.$u.padZero(this.minHour)}:${uni.$u.padZero(this.minMinute)}`;
+        value = `${padZero(this.minHour)}:${padZero(this.minMinute)}`;
       }
       // 时间类型
       if (!isDateMode) {
-        if (String(value).indexOf(':') === -1) return uni.$u.error('时间错误，请传递如12:24的格式');
+        if (String(value).indexOf(':') === -1) return error('时间错误，请传递如12:24的格式');
         let [hour, minute] = value.split(':');
         // 对时间补零，同时控制在最小值和最大值之间
-        hour = uni.$u.padZero(uni.$u.range(this.minHour, this.maxHour, Number(hour)));
-        minute = uni.$u.padZero(uni.$u.range(this.minMinute, this.maxMinute, Number(minute)));
+        hour = padZero(range(this.minHour, this.maxHour, Number(hour)));
+        minute = padZero(range(this.minMinute, this.maxMinute, Number(minute)));
         return `${hour}:${minute}`;
       } else {
         // 如果是日期格式，控制在最小日期和最大日期之间
@@ -370,6 +465,11 @@ export default {
         [`${type}Hour`]: hour,
         [`${type}Minute`]: minute
       };
+    },
+    onShowByClickInput() {
+      if (!this.disabled) {
+        this.showByClickInput = !this.showByClickInput;
+      }
     }
   }
 };

package/uview-plus/components/u-divider/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: {
     // 是否虚线
     dashed: {
       type: Boolean,
-      default: defprops.divider.dashed
+      default: () => defProps.divider.dashed
     },
     // 是否细线
     hairline: {
       type: Boolean,
-      default: defprops.divider.hairline
+      default: () => defProps.divider.hairline
     },
     // 是否以点替代文字，优先于text字段起作用
     dot: {
       type: Boolean,
-      default: defprops.divider.dot
+      default: () => defProps.divider.dot
     },
     // 内容文本的位置，left-左边，center-中间，right-右边
     textPosition: {
       type: String,
-      default: defprops.divider.textPosition
+      default: () => defProps.divider.textPosition
     },
     // 文本内容
     text: {
       type: [String, Number],
-      default: defprops.divider.text
+      default: () => defProps.divider.text
     },
     // 文本大小
     textSize: {
       type: [String, Number],
-      default: defprops.divider.textSize
+      default: () => defProps.divider.textSize
     },
     // 文本颜色
     textColor: {
       type: String,
-      default: defprops.divider.textColor
+      default: () => defProps.divider.textColor
     },
     // 线条颜色
     lineColor: {
       type: String,
-      default: defprops.divider.lineColor
+      default: () => defProps.divider.lineColor
     }
   }
-};
+});

package/uview-plus/components/u-divider/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;
@@ -25,4 +40,4 @@ view, scroll-view, swiper-item {
   font-size: 12px;
   margin: 0 12px;
   color: #c0c4cc;
-}
+}

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="u-divider" :style="[$u.addStyle(customStyle)]" @tap="click">
+  <view class="u-divider" :style="[addStyle(customStyle)]" @tap="click">
     <u-line :color="lineColor" :customStyle="leftLineStyle" :hairline="hairline" :dashed="dashed"></u-line>
     <text v-if="dot" class="u-divider__dot">●</text>
     <text v-else-if="text" class="u-divider__text" :style="[textStyle]">{{ text }}</text>
@@ -7,9 +7,10 @@
   </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 { addStyle, addUnit } from '../../libs/function/index';
 /**
  * divider 分割线
  * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
@@ -33,7 +34,7 @@ export default {
   computed: {
     textStyle() {
       const style = {};
-      style.fontSize = uni.$u.addUnit(this.textSize);
+      style.fontSize = addUnit(this.textSize);
       style.color = this.textColor;
       return style;
     },
@@ -60,7 +61,9 @@ export default {
       return style;
     }
   },
+  emits: ['click'],
   methods: {
+    addStyle,
     // divider组件被点击时触发
     click() {
       this.$emit('click');

package/uview-plus/components/u-drag-sort/_doc/package.json

@@ -0,0 +1,85 @@
+{
+  "id": "u-drag-sort",
+  "displayName": "u-drag-sort 拖拽排序，多方向排序，全端兼容，无论平台，一致体验。",
+  "version": "1.0.0",
+  "description": "拖拽排序组件，对任意元素进行排序，超高自由度，无视高度，自动计算。",
+  "keywords": [
+    "u-drag-sort",
+    "拖拽排序",
+    "超高自由度",
+    "wuui",
+    "u-ui"
+  ],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "",
+      "data": "",
+      "permissions": ""
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "u",
+        "aliyun": "u"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "u",
+          "vue3": "u"
+        },
+        "App": {
+          "app-vue": "u",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "u",
+          "Android Browser": "u",
+          "微信浏览器(Android)": "u",
+          "QQ浏览器(Android)": "u"
+        },
+        "H5-pc": {
+          "Chrome": "u",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "u",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "u",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u",
+          "钉钉": "u",
+          "快手": "u",
+          "飞书": "u",
+          "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}

package/uview-plus/components/u-drag-sort/_doc/readme.md

@@ -0,0 +1,16 @@
+## u-drag-sort 拖拽排序
+
+> **组件名：u-drag-sort**
+
+拖拽排序组件，可以对任意元素进行拖拽排序。
+
+## [查看文档](https://ijry.github.io/uview-plus/components/dragSort.html)
+
+## [更多组件, 请查看 `u-ui` 组件库](https://ext.dcloud.net.cn/plugin?name=u--ui)
+(请勿下载插件zip)
+
+<a href="https://ext.dcloud.net.cn/plugin?name=u--ui">
+	<img src="https://wuui.cn/intr.png">
+</a>
+
+**如使用过程中有任何问题，或者您对u-ui有一些好的建议。<br>欢迎加入 [u-ui 交流群](https://ijry.github.io/uview-plus/components/qqFeedBack.html)**

package/uview-plus/components/u-drag-sort/u-drag-sort.vue

@@ -0,0 +1,3 @@
+<template></template>
+<script></script>
+<style></style>

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

@@ -1,21 +1,16 @@
-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: {
-    // 标题选中时的样式
-    activeStyle: {
-      type: [String, Object],
-      default: () => ({
-        color: '#2979ff',
-        fontSize: '14px'
-      })
+    // 菜单标题和选项的激活态颜色
+    activeColor: {
+      type: String,
+      default: '#2979ff'
     },
-    // 标题未选中时的样式
-    inactiveStyle: {
-      type: [String, Object],
-      default: () => ({
-        color: '#606266',
-        fontSize: '14px'
-      })
+    // 菜单标题和选项的未激活态颜色
+    inactiveColor: {
+      type: String,
+      default: '#606266'
     },
     // 点击遮罩是否关闭菜单
     closeOnClickMask: {
@@ -63,4 +58,4 @@ export default {
       default: 14
     }
   }
-};
+});