@10yun/cv-mobile-ui 0.5.44 → 0.5.46

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

@@ -1,87 +1,73 @@
 <template>
-	<view
-		class="u-scroll-list"
-		ref="u-scroll-list"
-	>
-		<!-- #ifdef APP-NVUE -->
-		<!-- nvue使用bindingX实现，以得到更好的性能 -->
-		<scroller
-			class="u-scroll-list__scroll-view"
-			ref="u-scroll-list__scroll-view"
-			scroll-direction="horizontal"
-			:show-scrollbar="false"
-			:offset-accuracy="1"
-			@scroll="nvueScrollHandler"
-		>
-			<view class="u-scroll-list__scroll-view__content">
-				<slot />
-			</view>
-		</scroller>
-		<!-- #endif -->
-		<!-- #ifndef APP-NVUE -->
-		<!-- #ifdef MP-WEIXIN || APP-VUE || H5 || MP-QQ -->
-		<!-- 以上平台，支持wxs -->
-		<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="getPx(indicatorBarWidth)"
-			:data-indicatorWidth="getPx(indicatorWidth)"
-			:show-scrollbar="false"
-			:upper-threshold="0"
-			:lower-threshold="0"
-		>
-			<!-- #endif -->
-			<!-- #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ -->
-			<!-- 非以上平台，只能使用普通js实现 -->
-			<scroll-view
-				class="u-scroll-list__scroll-view scroll-view-js"
-				scroll-x
-				@scroll="scrollHandler"
-				@scrolltoupper="scrolltoupperHandler"
-				@scrolltolower="scrolltolowerHandler"
-				:show-scrollbar="false"
-				:upper-threshold="0"
-				:lower-threshold="0"
-			>
-				<!-- #endif -->
-				<view class="u-scroll-list__scroll-view__content">
-					<slot />
-				</view>
-			</scroll-view>
-			<!-- #endif -->
-			<view
-				class="u-scroll-list__indicator"
-				v-if="indicator"
-				:style="[addStyle(indicatorStyle)]"
-			>
-				<view
-					class="u-scroll-list__indicator__line"
-					:style="[lineStyle]"
-				>
-					<view
-						class="u-scroll-list__indicator__line__bar"
-						:style="[barStyle]"
-						ref="u-scroll-list__indicator__line__bar"
-					></view>
-				</view>
-			</view>
-	</view>
+  <view class="u-scroll-list" ref="u-scroll-list">
+    <!-- #ifdef APP-NVUE -->
+    <!-- nvue使用bindingX实现，以得到更好的性能 -->
+    <scroller
+      class="u-scroll-list__scroll-view"
+      ref="u-scroll-list__scroll-view"
+      scroll-direction="horizontal"
+      :show-scrollbar="false"
+      :offset-accuracy="1"
+      @scroll="nvueScrollHandler"
+    >
+      <view class="u-scroll-list__scroll-view__content">
+        <slot />
+      </view>
+    </scroller>
+    <!-- #endif -->
+    <!-- #ifndef APP-NVUE -->
+    <!-- #ifdef MP-WEIXIN || APP-VUE || H5 || MP-QQ -->
+    <!-- 以上平台，支持wxs -->
+    <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="getPx(indicatorBarWidth)"
+      :data-indicatorWidth="getPx(indicatorWidth)"
+      :show-scrollbar="false"
+      :upper-threshold="0"
+      :lower-threshold="0"
+    >
+      <view class="u-scroll-list__scroll-view__content">
+        <slot />
+      </view>
+    </scroll-view>
+    <!-- #endif -->
+    <!-- #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ -->
+    <!-- 非以上平台，只能使用普通js实现 -->
+    <scroll-view
+      class="u-scroll-list__scroll-view scroll-view-js"
+      scroll-x
+      @scroll="scrollHandler"
+      @scrolltoupper="scrolltoupperHandler"
+      @scrolltolower="scrolltolowerHandler"
+      :show-scrollbar="false"
+      :upper-threshold="0"
+      :lower-threshold="0"
+    >
+      <view class="u-scroll-list__scroll-view__content">
+        <slot />
+      </view>
+    </scroll-view>
+    <!-- #endif -->
+    <!-- #endif -->
+    <view class="u-scroll-list__indicator" v-if="indicator" :style="[addStyle(indicatorStyle)]">
+      <view class="u-scroll-list__indicator__line" :style="[lineStyle]">
+        <view class="u-scroll-list__indicator__line__bar" :style="[barStyle]" ref="u-scroll-list__indicator__line__bar"></view>
+      </view>
+    </view>
+  </view>
 </template>
-<script
-	src="./scrollWxs.wxs"
-	module="wxs"
-	lang="wxs"
-></script>
+<script src="./scrollWxs.wxs" module="wxs" lang="wxs"></script>
 <script>
 /**
  * scrollList 横向滚动列表
  * @description 该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表。
- * @tutorial https://ijry.github.io/uview-plus/components/scrollList.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/scrollList.html
  * @property {String | Number}	indicatorWidth			指示器的整体宽度 (默认 50 )
  * @property {String | Number}	indicatorBarWidth		滑块的宽度 (默认 20 )
  * @property {Boolean}			indicator				是否显示面板指示器 (默认 true )
@@ -93,105 +79,106 @@
  * @example
  */
 // #ifdef APP-NVUE
-const dom = uni.requireNativePlugin('dom')
-import nvueMixin from "./nvue.js"
+const dom = uni.requireNativePlugin('dom');
+import nvueMixin from './nvue.js';
 // #endif
 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
-	mixins: [mpMixin, mixin, props],
-	// #endif
-	// #ifdef APP-NVUE
-	mixins: [mpMixin, mixin, nvueMixin, props],
-	// #endif
-	data() {
-		return {
-			scrollInfo: {
-				scrollLeft: 0,
-				scrollWidth: 0
-			},
-			scrollWidth: 0
-		}
-	},
-	computed: {
-		// 指示器为线型的样式
-		barStyle() {
-			const style = {}
-			// #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ
-			// 此为普通js方案，只有在非nvue和不支持wxs方案的端才使用、
-			// 此处的计算理由为：scroll-view的滚动距离与目标滚动距离(scroll-view的实际宽度减去包裹元素的宽度)之比，等于滑块当前移动距离与总需
-			// 滑动距离(指示器的总宽度减去滑块宽度)的比值
-			const scrollLeft = this.scrollInfo.scrollLeft,
-				scrollWidth = this.scrollInfo.scrollWidth,
-				barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth
-			const x = scrollLeft / (scrollWidth - this.scrollWidth) * barAllMoveWidth
-			style.transform = `translateX(${ x }px)`
-			// #endif
-			// 设置滑块的宽度和背景色，是每个平台都需要的
-			style.width = addUnit(this.indicatorBarWidth)
-			style.backgroundColor = this.indicatorActiveColor
-			return style
-		},
-		lineStyle() {
-			const style = {}
-			// 指示器整体的样式，需要设置其宽度和背景色
-			style.width = addUnit(this.indicatorWidth)
-			style.backgroundColor = this.indicatorColor
-			return style
-		}
-	},
-	mounted() {
-		this.init()
-	},
-	emits: ["left", "right"],
-	methods: {
-		addStyle,
-		getPx,
-		init() {
-			this.getComponentWidth()
-		},
-		// #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ
-		// scroll-view触发滚动事件
-		scrollHandler(e) {
-			this.scrollInfo = e.detail
-		},
-		scrolltoupperHandler() {
-			this.scrollEvent('left')
-			this.scrollInfo.scrollLeft = 0
-		},
-		scrolltolowerHandler() {
-			this.scrollEvent('right')
-			// 在普通js方案中，滚动到右边时，通过设置this.scrollInfo，模拟出滚动到右边的情况
-			// 因为上方是用过computed计算的，设置后，会自动调整滑块的位置
-			this.scrollInfo.scrollLeft = getPx(this.indicatorWidth) - getPx(this.indicatorBarWidth)
-		},
-		// #endif
-		//
-		scrollEvent(status) {
-			this.$emit(status)
-		},
-		// 获取组件的宽度
-		async getComponentWidth() {
-			// 延时一定时间，以获取dom尺寸
-			await sleep(30)
-			// #ifndef APP-NVUE
-			this.$uGetRect('.u-scroll-list').then(size => {
-				this.scrollWidth = size.width
-			})
-			// #endif
-			// #ifdef APP-NVUE
-			const ref = this.$refs['u-scroll-list']
-			ref && dom.getComponentRect(ref, (res) => {
-				this.scrollWidth = res.size.width
-			})
-			// #endif
-		},
-	}
-}
+  name: 'u-scroll-list',
+  // #ifndef APP-NVUE
+  mixins: [mpMixin, mixin, props],
+  // #endif
+  // #ifdef APP-NVUE
+  mixins: [mpMixin, mixin, nvueMixin, props],
+  // #endif
+  data() {
+    return {
+      scrollInfo: {
+        scrollLeft: 0,
+        scrollWidth: 0
+      },
+      scrollWidth: 0
+    };
+  },
+  computed: {
+    // 指示器为线型的样式
+    barStyle() {
+      const style = {};
+      // #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ
+      // 此为普通js方案，只有在非nvue和不支持wxs方案的端才使用、
+      // 此处的计算理由为：scroll-view的滚动距离与目标滚动距离(scroll-view的实际宽度减去包裹元素的宽度)之比，等于滑块当前移动距离与总需
+      // 滑动距离(指示器的总宽度减去滑块宽度)的比值
+      const scrollLeft = this.scrollInfo.scrollLeft,
+        scrollWidth = this.scrollInfo.scrollWidth,
+        barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth;
+      const x = (scrollLeft / (scrollWidth - this.scrollWidth)) * barAllMoveWidth;
+      style.transform = `translateX(${x}px)`;
+      // #endif
+      // 设置滑块的宽度和背景色，是每个平台都需要的
+      style.width = addUnit(this.indicatorBarWidth);
+      style.backgroundColor = this.indicatorActiveColor;
+      return style;
+    },
+    lineStyle() {
+      const style = {};
+      // 指示器整体的样式，需要设置其宽度和背景色
+      style.width = addUnit(this.indicatorWidth);
+      style.backgroundColor = this.indicatorColor;
+      return style;
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  emits: ['left', 'right'],
+  methods: {
+    addStyle,
+    getPx,
+    init() {
+      this.getComponentWidth();
+    },
+    // #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ
+    // scroll-view触发滚动事件
+    scrollHandler(e) {
+      this.scrollInfo = e.detail;
+    },
+    scrolltoupperHandler() {
+      this.scrollEvent('left');
+      this.scrollInfo.scrollLeft = 0;
+    },
+    scrolltolowerHandler() {
+      this.scrollEvent('right');
+      // 在普通js方案中，滚动到右边时，通过设置this.scrollInfo，模拟出滚动到右边的情况
+      // 因为上方是用过computed计算的，设置后，会自动调整滑块的位置
+      this.scrollInfo.scrollLeft = getPx(this.indicatorWidth) - getPx(this.indicatorBarWidth);
+    },
+    // #endif
+    //
+    scrollEvent(status) {
+      this.$emit(status);
+    },
+    // 获取组件的宽度
+    async getComponentWidth() {
+      // 延时一定时间，以获取dom尺寸
+      await sleep(30);
+      // #ifndef APP-NVUE
+      this.$uGetRect('.u-scroll-list').then((size) => {
+        this.scrollWidth = size.width;
+      });
+      // #endif
+      // #ifdef APP-NVUE
+      const ref = this.$refs['u-scroll-list'];
+      ref &&
+        dom.getComponentRect(ref, (res) => {
+          this.scrollWidth = res.size.width;
+        });
+      // #endif
+    }
+  }
+};
 </script>
 <style scoped>
 @import './style.css';

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

@@ -1,13 +1,28 @@
 import { defineMixin } from '../../libs/vue';
 import defProps from '../../libs/config/props.js';
+
 export const props = defineMixin({
   props: {
+    // #ifdef VUE3
+    // 绑定的值
+    modelValue: {
+      type: [String, Number],
+      default: () => defProps.search.value
+    },
+    // #endif
+    // #ifdef VUE2
+    // 绑定的值
+    value: {
+      type: [String, Number],
+      default: () => defProps.search.value
+    },
+    // #endif
     // 搜索框形状，round-圆形，square-方形
     shape: {
       type: String,
       default: () => defProps.search.shape
     },
-    // 搜索框背景色，默认值#f2f2f2
+    // 搜索框背景色
     bgColor: {
       type: String,
       default: () => defProps.search.bgColor
@@ -22,6 +37,11 @@ export const props = defineMixin({
       type: Boolean,
       default: () => defProps.search.clearabled
     },
+    // 是否仅聚焦时显示清除控件
+    onlyClearableOnFocused: {
+      type: Boolean,
+      default: true
+    },
     // 是否自动聚焦
     focus: {
       type: Boolean,
@@ -32,32 +52,32 @@ export const props = defineMixin({
       type: Boolean,
       default: () => defProps.search.showAction
     },
-    // 右边控件的样式
-    actionStyle: {
-      type: Object,
-      default: () => defProps.search.actionStyle
-    },
-    // 取消按钮文字
+    // 右侧取消按钮文字
     actionText: {
       type: String,
       default: () => defProps.search.actionText
     },
-    // 输入框内容对齐方式，可选值为 left|center|right
+    // 搜索框左侧文本
+    label: {
+      type: [String, Number, null],
+      default: () => defProps.search.label
+    },
+    // 输入框内容对齐方式，可选值为：left|center|right
     inputAlign: {
       type: String,
       default: () => defProps.search.inputAlign
     },
-    // input输入框的样式，可以定义文字颜色，大小等，对象形式
-    inputStyle: {
-      type: Object,
-      default: () => defProps.search.inputStyle
-    },
     // 是否启用输入框
     disabled: {
       type: Boolean,
       default: () => defProps.search.disabled
     },
-    // 边框颜色
+    // 开启showAction时，是否在input获取焦点时才显示
+    animation: {
+      type: Boolean,
+      default: () => defProps.search.animation
+    },
+    // 边框颜色，只要配置了颜色，才会有边框
     borderColor: {
       type: String,
       default: () => defProps.search.borderColor
@@ -67,6 +87,11 @@ export const props = defineMixin({
       type: String,
       default: () => defProps.search.searchIconColor
     },
+    // 搜索图标的大小
+    searchIconSize: {
+      type: [Number, String],
+      default: () => defProps.search.searchIconSize
+    },
     // 输入框字体颜色
     color: {
       type: String,
@@ -82,57 +107,50 @@ export const props = defineMixin({
       type: String,
       default: () => defProps.search.searchIcon
     },
-    searchIconSize: {
-      type: [Number, String],
-      default: () => defProps.search.searchIconSize
-    },
-    // 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30px"、"30px 20px"等写法
+    // 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30px"
     margin: {
       type: String,
       default: () => defProps.search.margin
     },
-    // 开启showAction时，是否在input获取焦点时才显示
-    animation: {
-      type: Boolean,
-      default: () => defProps.search.animation
-    },
-    // 输入框的初始化内容
-    modelValue: {
-      type: String,
-      default: () => defProps.search.value
-    },
-    value: {
+    // 应该是uView-plus版本新增的，用于控制搜索图标的插槽位置
+    iconPosition: {
       type: String,
-      default: () => defProps.search.value
+      default: () => defProps.search.iconPosition
     },
-    // 输入框最大能输入的长度，-1为不限制长度(来自uniapp文档)
+    // 输入框最大能输入的长度，-1为不限制长度
     maxlength: {
       type: [String, Number],
       default: () => defProps.search.maxlength
     },
-    // 搜索框高度，单位px
+    // 输入框高度，单位px
     height: {
       type: [String, Number],
       default: () => defProps.search.height
     },
-    // 搜索框左侧文本
-    label: {
-      type: [String, Number, null],
-      default: () => defProps.search.label
-    },
     // 键盘弹起时，是否自动上推页面
     adjustPosition: {
       type: Boolean,
-      default: () => true
+      default: () => defProps.search.adjustPosition
     },
     // 键盘收起时，是否自动失去焦点
     autoBlur: {
       type: Boolean,
-      default: () => false
+      default: () => defProps.search.autoBlur
     },
-    iconPosition: {
-      type: String,
-      default: () => defProps.search.iconPosition
+    // 输入框的样式，对象形式
+    inputStyle: {
+      type: Object,
+      default: () => defProps.search.inputStyle
+    },
+    // 右侧控件的样式，对象形式
+    actionStyle: {
+      type: Object,
+      default: () => defProps.search.actionStyle
+    },
+    // 自定义样式，对象形式
+    customStyle: {
+      type: Object,
+      default: () => defProps.search.customStyle
     }
   }
 });

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

@@ -7,17 +7,18 @@
  * @lastTime     : 2021-08-20 17:19:45
  * @FilePath     : /u-view2.0/uview-ui/libs/config/props/search.js
  */
+import { t } from '../../libs/i18n'
 export default {
     // search
     search: {
         shape: 'round',
         bgColor: '#f2f2f2',
-        placeholder: '请输入关键字',
+        placeholder: t("up.search.placeholder"),
         clearabled: true,
         focus: false,
         showAction: true,
         actionStyle: {},
-        actionText: '搜索',
+        actionText: t("up.common.search"),
         inputAlign: 'left',
         inputStyle: {},
         disabled: false,

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

@@ -1,29 +1,3 @@
-/* #ifndef APP-NVUE */
-.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;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: stretch;
-  align-content: flex-start;
-}
-/* #endif */
 /* #ifdef H5 */
 [type=search]::-webkit-search-decoration {
   display: none;

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

@@ -1,4 +1,3 @@
-@import '../../libs/css/components.scss';
 $u-search-content-padding: 0 10px !default;
 $u-search-label-color: $u-main-color !default;
 $u-search-label-font-size: 14px !default;

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

@@ -59,9 +59,10 @@
           inputStyle
         ]"
       />
-      <view class="u-search__content__icon u-search__content__close" v-if="keyword && clearabled && focused" @click="clear">
+      <view class="u-search__content__icon u-search__content__close" v-if="isShowClear" @click="clear">
         <up-icon name="close" size="11" color="#ffffff" customStyle="line-height: 12px"></up-icon>
       </view>
+      <slot name="inputRight"></slot>
     </view>
     <text
       :style="[actionStyle]"
@@ -81,7 +82,7 @@ import { addUnit, addStyle } from '../../libs/function/index';
 /**
  * search 搜索框
  * @description 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。
- * @tutorial https://ijry.github.io/uview-plus/components/search.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/search.html
  * @property {String}			shape				搜索框形状，round-圆形，square-方形（默认 'round' ）
  * @property {String}			bgColor				搜索框背景颜色（默认 '#f2f2f2' ）
  * @property {String}			placeholder			占位文字内容（默认 '请输入关键字' ）
@@ -108,6 +109,7 @@ import { addUnit, addStyle } from '../../libs/function/index';
  * @property {String | Number}	label				搜索框左边显示内容
  * @property {Boolean}	        adjustPosition	    键盘弹起时，是否自动上推页面
  * @property {Boolean}	        autoBlur	        键盘收起时，是否自动失去焦点
+ * @property {Boolean}	        onlyClearableOnFocused	是否仅在聚焦时显示清除控件（默认 true ）
  * @property {Object}			customStyle			定义需要用到的外部样式
  *
  * @event {Function} change 输入框内容发生变化时触发
@@ -122,7 +124,6 @@ export default {
   data() {
     return {
       keyword: '',
-      showClear: false, // 是否显示右边的清除图标
       show: false,
       // 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件
       focused: this.focus
@@ -162,6 +163,18 @@ export default {
   computed: {
     showActionBtn() {
       return !this.animation && this.showAction;
+    },
+    // 是否显示清除控件
+    isShowClear() {
+      const { clearabled, focused, keyword, onlyClearableOnFocused } = this;
+      if (!clearabled) {
+        return false;
+      }
+      if (onlyClearableOnFocused) {
+        return !!focused && keyword !== '';
+      } else {
+        return keyword !== '';
+      }
     }
   },
   emits: ['clear', 'search', 'custom', 'focus', 'blur', 'click', 'clickIcon', 'update:modelValue', 'change'],

package/uview-plus/components/u-section/section.js

@@ -7,11 +7,12 @@
  * @lastTime     : 2021-08-20 17:07:33
  * @FilePath     : /u-view2.0/uview-ui/libs/config/props/section.js
  */
+import { t } from '../../libs/i18n'
 export default {
     // u-section组件
     section: {
         title: '',
-        subTitle: '更多',
+        subTitle: t("up.common.more"),
         right: true,
         fontSize: 15,
         bold: true,