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

package/uview-plus/components/u-scroll-list/props.js

@@ -1,35 +1,36 @@
-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: {
     // 指示器的整体宽度
     indicatorWidth: {
       type: [String, Number],
-      default: defprops.scrollList.indicatorWidth
+      default: () => defProps.scrollList.indicatorWidth
     },
     // 滑块的宽度
     indicatorBarWidth: {
       type: [String, Number],
-      default: defprops.scrollList.indicatorBarWidth
+      default: () => defProps.scrollList.indicatorBarWidth
     },
     // 是否显示面板指示器
     indicator: {
       type: Boolean,
-      default: defprops.scrollList.indicator
+      default: () => defProps.scrollList.indicator
     },
     // 指示器非激活颜色
     indicatorColor: {
       type: String,
-      default: defprops.scrollList.indicatorColor
+      default: () => defProps.scrollList.indicatorColor
     },
     // 指示器的激活颜色
     indicatorActiveColor: {
       type: String,
-      default: defprops.scrollList.indicatorActiveColor
+      default: () => defProps.scrollList.indicatorActiveColor
     },
     // 指示器样式，可通过bottom，left，right进行定位
     indicatorStyle: {
       type: [String, Object],
-      default: defprops.scrollList.indicatorStyle
+      default: () => defProps.scrollList.indicatorStyle
     }
   }
-};
+});

package/uview-plus/components/u-scroll-list/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;
@@ -17,6 +32,7 @@ view, scroll-view, swiper-item {
   display: flex;
   /* #endif */
   flex-direction: row;
+  align-items: flex-start;
 }
 .u-scroll-list__scroll-view__content {
   /* #ifndef APP-NVUE */
@@ -42,4 +58,4 @@ view, scroll-view, swiper-item {
   width: 20px;
   height: 4px;
   border-radius: 100px;
-}
+}

package/uview-plus/components/u-scroll-list/style.scss

@@ -5,6 +5,8 @@
 
   &__scroll-view {
     @include flex;
+    // 缺少会在enable-flex模式下高度异常
+    align-items: flex-start;
 
     &__content {
       @include flex;

package/uview-plus/components/u-scroll-list/u-scroll-list.vue

@@ -22,14 +22,15 @@
 		<!-- #ifdef MP-WEIXIN || APP-VUE || H5 || MP-QQ -->
 		<!-- 以上平台，支持wxs -->
 		<scroll-view
-			class="u-scroll-list__scroll-view"
+			class="u-scroll-list__scroll-view scroll-view-native"
 			scroll-x
+			enable-flex
 			@scroll="wxs.scroll"
 			@scrolltoupper="wxs.scrolltoupper"
 			@scrolltolower="wxs.scrolltolower"
 			:data-scrollWidth="scrollWidth"
-			:data-barWidth="$u.getPx(indicatorBarWidth)"
-			:data-indicatorWidth="$u.getPx(indicatorWidth)"
+			:data-barWidth="getPx(indicatorBarWidth)"
+			:data-indicatorWidth="getPx(indicatorWidth)"
 			:show-scrollbar="false"
 			:upper-threshold="0"
 			:lower-threshold="0"
@@ -38,7 +39,7 @@
 			<!-- #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ -->
 			<!-- 非以上平台，只能使用普通js实现 -->
 			<scroll-view
-				class="u-scroll-list__scroll-view"
+				class="u-scroll-list__scroll-view scroll-view-js"
 				scroll-x
 				@scroll="scrollHandler"
 				@scrolltoupper="scrolltoupperHandler"
@@ -56,7 +57,7 @@
 			<view
 				class="u-scroll-list__indicator"
 				v-if="indicator"
-				:style="[$u.addStyle(indicatorStyle)]"
+				:style="[addStyle(indicatorStyle)]"
 			>
 				<view
 					class="u-scroll-list__indicator__line"
@@ -95,9 +96,10 @@
 const dom = uni.requireNativePlugin('dom')
 import nvueMixin from "./nvue.js"
 // #endif
-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, getPx, sleep } from '../../libs/function/index';
 export default {
 	name: 'u-scroll-list',
 	// #ifndef APP-NVUE
@@ -130,14 +132,14 @@ export default {
 			style.transform = `translateX(${ x }px)`
 			// #endif
 			// 设置滑块的宽度和背景色，是每个平台都需要的
-			style.width = uni.$u.addUnit(this.indicatorBarWidth)
+			style.width = addUnit(this.indicatorBarWidth)
 			style.backgroundColor = this.indicatorActiveColor
 			return style
 		},
 		lineStyle() {
 			const style = {}
 			// 指示器整体的样式，需要设置其宽度和背景色
-			style.width = uni.$u.addUnit(this.indicatorWidth)
+			style.width = addUnit(this.indicatorWidth)
 			style.backgroundColor = this.indicatorColor
 			return style
 		}
@@ -145,7 +147,10 @@ export default {
 	mounted() {
 		this.init()
 	},
+	emits: ["left", "right"],
 	methods: {
+		addStyle,
+		getPx,
 		init() {
 			this.getComponentWidth()
 		},
@@ -162,7 +167,7 @@ export default {
 			this.scrollEvent('right')
 			// 在普通js方案中，滚动到右边时，通过设置this.scrollInfo，模拟出滚动到右边的情况
 			// 因为上方是用过computed计算的，设置后，会自动调整滑块的位置
-			this.scrollInfo.scrollLeft = uni.$u.getPx(this.indicatorWidth) - uni.$u.getPx(this.indicatorBarWidth)
+			this.scrollInfo.scrollLeft = getPx(this.indicatorWidth) - getPx(this.indicatorBarWidth)
 		},
 		// #endif
 		//
@@ -172,7 +177,7 @@ export default {
 		// 获取组件的宽度
 		async getComponentWidth() {
 			// 延时一定时间，以获取dom尺寸
-			await uni.$u.sleep(30)
+			await sleep(30)
 			// #ifndef APP-NVUE
 			this.$uGetRect('.u-scroll-list').then(size => {
 				this.scrollWidth = size.width

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

@@ -1,123 +1,138 @@
-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: {
     // 搜索框形状，round-圆形，square-方形
     shape: {
       type: String,
-      default: defprops.search.shape
+      default: () => defProps.search.shape
     },
     // 搜索框背景色，默认值#f2f2f2
     bgColor: {
       type: String,
-      default: defprops.search.bgColor
+      default: () => defProps.search.bgColor
     },
     // 占位提示文字
     placeholder: {
       type: String,
-      default: defprops.search.placeholder
+      default: () => defProps.search.placeholder
     },
     // 是否启用清除控件
     clearabled: {
       type: Boolean,
-      default: defprops.search.clearabled
+      default: () => defProps.search.clearabled
     },
     // 是否自动聚焦
     focus: {
       type: Boolean,
-      default: defprops.search.focus
+      default: () => defProps.search.focus
     },
     // 是否在搜索框右侧显示取消按钮
     showAction: {
       type: Boolean,
-      default: defprops.search.showAction
+      default: () => defProps.search.showAction
     },
     // 右边控件的样式
     actionStyle: {
       type: Object,
-      default: defprops.search.actionStyle
+      default: () => defProps.search.actionStyle
     },
     // 取消按钮文字
     actionText: {
       type: String,
-      default: defprops.search.actionText
+      default: () => defProps.search.actionText
     },
     // 输入框内容对齐方式，可选值为 left|center|right
     inputAlign: {
       type: String,
-      default: defprops.search.inputAlign
+      default: () => defProps.search.inputAlign
     },
     // input输入框的样式，可以定义文字颜色，大小等，对象形式
     inputStyle: {
       type: Object,
-      default: defprops.search.inputStyle
+      default: () => defProps.search.inputStyle
     },
     // 是否启用输入框
     disabled: {
       type: Boolean,
-      default: defprops.search.disabled
+      default: () => defProps.search.disabled
     },
     // 边框颜色
     borderColor: {
       type: String,
-      default: defprops.search.borderColor
+      default: () => defProps.search.borderColor
     },
     // 搜索图标的颜色，默认同输入框字体颜色
     searchIconColor: {
       type: String,
-      default: defprops.search.searchIconColor
+      default: () => defProps.search.searchIconColor
     },
     // 输入框字体颜色
     color: {
       type: String,
-      default: defprops.search.color
+      default: () => defProps.search.color
     },
     // placeholder的颜色
     placeholderColor: {
       type: String,
-      default: defprops.search.placeholderColor
+      default: () => defProps.search.placeholderColor
     },
     // 左边输入框的图标，可以为uView图标名称或图片路径
     searchIcon: {
       type: String,
-      default: defprops.search.searchIcon
+      default: () => defProps.search.searchIcon
     },
     searchIconSize: {
       type: [Number, String],
-      default: defprops.search.searchIconSize
+      default: () => defProps.search.searchIconSize
     },
     // 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30px"、"30px 20px"等写法
     margin: {
       type: String,
-      default: defprops.search.margin
+      default: () => defProps.search.margin
     },
     // 开启showAction时，是否在input获取焦点时才显示
     animation: {
       type: Boolean,
-      default: defprops.search.animation
+      default: () => defProps.search.animation
     },
     // 输入框的初始化内容
     modelValue: {
       type: String,
-      default: defprops.search.value
+      default: () => defProps.search.value
     },
     value: {
       type: String,
-      default: defprops.search.value
+      default: () => defProps.search.value
     },
     // 输入框最大能输入的长度，-1为不限制长度(来自uniapp文档)
     maxlength: {
       type: [String, Number],
-      default: defprops.search.maxlength
+      default: () => defProps.search.maxlength
     },
     // 搜索框高度，单位px
     height: {
       type: [String, Number],
-      default: defprops.search.height
+      default: () => defProps.search.height
     },
     // 搜索框左侧文本
     label: {
       type: [String, Number, null],
-      default: defprops.search.label
+      default: () => defProps.search.label
+    },
+    // 键盘弹起时，是否自动上推页面
+    adjustPosition: {
+      type: Boolean,
+      default: () => true
+    },
+    // 键盘收起时，是否自动失去焦点
+    autoBlur: {
+      type: Boolean,
+      default: () => false
+    },
+    iconPosition: {
+      type: String,
+      default: () => defProps.search.iconPosition
     }
   }
-};
+});

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

@@ -16,10 +16,10 @@ export default {
         clearabled: true,
         focus: false,
         showAction: true,
-        actionStyle: () => ({}),
+        actionStyle: {},
         actionText: '搜索',
         inputAlign: 'left',
-        inputStyle: () => ({}),
+        inputStyle: {},
         disabled: false,
         borderColor: 'transparent',
         searchIconColor: '#909399',
@@ -27,6 +27,7 @@ export default {
         color: '#606266',
         placeholderColor: '#909399',
         searchIcon: 'search',
+        iconPosition: 'left',
         margin: '0',
         animation: false,
         value: '',

package/uview-plus/components/u-search/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;
@@ -10,7 +25,7 @@ view, scroll-view, swiper-item {
 }
 /* #endif */
 /* #ifdef H5 */
-[type='search']::-webkit-search-decoration {
+[type=search]::-webkit-search-decoration {
   display: none;
 }
 /* #endif */
@@ -90,3 +105,9 @@ view, scroll-view, swiper-item {
   width: 40px;
   margin-left: 5px;
 }
+.u-search__reverse .u-search__content__icon {
+  order: 3;
+}
+.u-search__reverse .u-search__content__close {
+  order: 2;
+}

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

@@ -95,4 +95,12 @@ $u-search-action-margin-left: 5px !default;
       margin-left: $u-search-action-margin-left;
     }
   }
+
+  &__reverse &__content__icon {
+    order: 3;
+  }
+
+  &__reverse &__content__close {
+    order: 2;
+  }
 }

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

@@ -1,12 +1,13 @@
 <template>
   <view
     class="u-search"
+    :class="[iconPosition === 'right' && 'u-search__reverse']"
     @tap="clickHandler"
     :style="[
       {
         margin: margin
       },
-      $u.addStyle(customStyle)
+      addStyle(customStyle)
     ]"
   >
     <view
@@ -40,6 +41,8 @@
         @focus="getFocus"
         :focus="focus"
         :maxlength="maxlength"
+        :adjust-position="adjustPosition"
+        :auto-blur="autoBlur"
         placeholder-class="u-search__content__input--placeholder"
         :placeholder="placeholder"
         :placeholder-style="`color: ${placeholderColor}`"
@@ -47,15 +50,16 @@
         type="text"
         :style="[
           {
+            pointerEvents: disabled ? 'none' : 'auto',
             textAlign: inputAlign,
             color: color,
             backgroundColor: bgColor,
-            height: $u.addUnit(height)
+            height: addUnit(height)
           },
           inputStyle
         ]"
       />
-      <view class="u-search__content__icon u-search__content__close" v-if="keyword && clearabled && focused" @tap="clear">
+      <view class="u-search__content__icon u-search__content__close" v-if="keyword && clearabled && focused" @click="clear">
         <u-icon name="close" size="11" color="#ffffff" customStyle="line-height: 12px"></u-icon>
       </view>
     </view>
@@ -70,9 +74,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 { addUnit, addStyle } from '../../libs/function/index';
 /**
  * search 搜索框
  * @description 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。
@@ -94,12 +99,15 @@ import mixin from '../../libs/mixin/mixin.js';
  * @property {String}			color				输入框字体颜色（默认 '#606266' ）
  * @property {String}			placeholderColor	placeholder的颜色（默认 '#909399' ）
  * @property {String}			searchIcon			输入框左边的图标，可以为uView图标名称或图片路径  (默认 'search' )
+ * @property {String}			iconPosition		输入框图标位置，left-左边, right-右边  (默认 'left' )
  * @property {String}			margin				组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30px"   (默认 '0' )
  * @property {Boolean} 			animation			是否开启动画，见上方说明（默认 false ）
  * @property {String}			value				输入框初始值
  * @property {String | Number}	maxlength			输入框最大能输入的长度，-1为不限制长度  (默认 '-1' )
  * @property {String | Number}	height				输入框高度，单位px（默认 64 ）
  * @property {String | Number}	label				搜索框左边显示内容
+ * @property {Boolean}	        adjustPosition	    键盘弹起时，是否自动上推页面
+ * @property {Boolean}	        autoBlur	        键盘收起时，是否自动失去焦点
  * @property {Object}			customStyle			定义需要用到的外部样式
  *
  * @event {Function} change 输入框内容发生变化时触发
@@ -158,6 +166,8 @@ export default {
   },
   emits: ['clear', 'search', 'custom', 'focus', 'blur', 'click', 'clickIcon', 'update:modelValue', 'change'],
   methods: {
+    addStyle,
+    addUnit,
     // 目前HX2.6.9 v-model双向绑定无效，故监听input事件获取输入框内容的变化
     inputChange(e) {
       this.keyword = e.detail.value;
@@ -209,8 +219,12 @@ export default {
       if (this.disabled) this.$emit('click');
     },
     // 点击左边图标
-    clickIcon() {
-      this.$emit('clickIcon');
+    clickIcon(e) {
+      this.$emit('clickIcon', this.keyword);
+      try {
+        // 收起键盘
+        uni.hideKeyboard();
+      } catch (e) {}
     }
   }
 };

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

@@ -0,0 +1,45 @@
+.u-select__content {
+  position: relative;
+}
+.u-select__content .u-select__label {
+  display: flex;
+  justify-content: space-between;
+  /* #ifdef H5 */
+  /* #endif */
+}
+.u-select__content .u-select__label:hover {
+  cursor: pointer;
+}
+.u-select__content .u-select__text {
+  margin-right: 2px;
+}
+.u-select__content .u-select__options__wrap {
+  margin-bottom: 46px;
+  position: absolute;
+  top: 20px;
+  left: 0;
+}
+.u-select__content .u-select__options {
+  min-width: 100px;
+  box-sizing: border-box;
+  border-radius: 4px;
+  border: 1px solid #f1f1f1;
+  background-color: #fff;
+}
+.u-select__content .u-select__options .u-select__options_item {
+  padding: 10px 12px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  /* #ifdef H5 */
+  /* #endif */
+}
+.u-select__content .u-select__options .u-select__options_item:hover {
+  background-color: #f7f7f7;
+}
+.u-select__content .u-select__options .u-select__options_item:hover {
+  cursor: pointer;
+}
+.u-select__content .u-select__options .u-select__options_item .u-select__item_text:hover {
+  cursor: pointer;
+}

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

@@ -0,0 +1,47 @@
+.u-select__content {
+  position: relative;
+  .u-select__label {
+    display: flex;
+    justify-content: space-between;
+    /* #ifdef H5 */
+    &:hover {
+      cursor: pointer;
+    }
+    /* #endif */
+  }
+  .u-select__text {
+    margin-right: 2px;
+  }
+  .u-select__options__wrap {
+    margin-bottom: 46px;
+    position: absolute;
+    top: 20px;
+    left: 0;
+  }
+  .u-select__options {
+    min-width: 100px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    border: 1px solid #f1f1f1;
+    background-color: #fff;
+    .u-select__options_item {
+      padding: 10px 12px;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      &:hover {
+        background-color: #f7f7f7;
+      }
+      /* #ifdef H5 */
+      &:hover {
+        cursor: pointer;
+      }
+      .u-select__item_text {
+        &:hover {
+          cursor: pointer;
+        }
+      }
+      /* #endif */
+    }
+  }
+}