@10yun/cv-mobile-ui 0.5.20 → 0.5.21

package/uni-ui/lib/uni-segmented-control/uni-segmented-control.vue

@@ -1 +1,103 @@
-<template>
  <view
    :class="[styleType === 'text' ? 'segmented-control--text' : 'segmented-control--button']"
    :style="{ borderColor: styleType === 'text' ? '' : activeColor }"
    class="segmented-control"
  >
    <view
      v-for="(item, index) in values"
      :class="[
        styleType === 'text' ? '' : 'segmented-control__item--button',
        index === currentIndex && styleType === 'button' ? 'segmented-control__item--button--active' : '',
        index === 0 && styleType === 'button' ? 'segmented-control__item--button--first' : '',
        index === values.length - 1 && styleType === 'button' ? 'segmented-control__item--button--last' : ''
      ]"
      :key="index"
      :style="{
        backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',
        borderColor: index === currentIndex && (styleType === 'text' || styleType === 'button') ? activeColor : '#d9d9d9'
      }"
      class="segmented-control__item"
      @click="_onClick(index)"
    >
      <view>
        <text
          :style="{
            color:
              index === currentIndex ? (styleType === 'text' ? activeColor : '#fff') : styleType === 'text' ? '#000' : activeColor
          }"
          class="segmented-control__text"
          :class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text' : ''"
        >
          {{ item }}
        </text>
      </view>
    </view>
  </view>
 * SegmentedControl 分段器
 * @description 用作不同视图的显示
 * @tutorial https://ext.dcloud.net.cn/plugin?id=54
 * @property {Number} current 当前选中的tab索引值，从0计数
 * @property {String} styleType = [button|text] 分段器样式类型
 * 	@value button 按钮类型
 * 	@value text 文字类型
 * @property {String} activeColor 选中的标签背景色与边框颜色
 * @property {Array} values 选项数组
 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
 */
  name: 'UniSegmentedControl',
  emits: ['clickItem'],
  props: {
    current: {
      type: Number,
      default: 0
    },
    values: {
      type: Array,
      default() {
        return [];
      }
    },
    activeColor: {
      type: String,
      default: '#2979FF'
    },
    styleType: {
      type: String,
      default: 'button'
    }
  },
  data() {
    return {
      currentIndex: 0
    };
  },
  watch: {
    current(val) {
      if (val !== this.currentIndex) {
        this.currentIndex = val;
      }
    }
  },
  created() {
    this.currentIndex = this.current;
  },
  methods: {
    _onClick(index) {
      if (this.currentIndex !== index) {
        this.currentIndex = index;
        this.$emit('clickItem', {
          currentIndex: index
        });
      }
    }
  }
+<template>
+  <view
+    :class="[styleType === 'text' ? 'segmented-control--text' : 'segmented-control--button']"
+    :style="{ borderColor: styleType === 'text' ? '' : activeColor }"
+    class="segmented-control"
+  >
+    <view
+      v-for="(item, index) in values"
+      :class="[
+        styleType === 'text' ? '' : 'segmented-control__item--button',
+        index === currentIndex && styleType === 'button' ? 'segmented-control__item--button--active' : '',
+        index === 0 && styleType === 'button' ? 'segmented-control__item--button--first' : '',
+        index === values.length - 1 && styleType === 'button' ? 'segmented-control__item--button--last' : ''
+      ]"
+      :key="index"
+      :style="{
+        backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',
+        borderColor: index === currentIndex && (styleType === 'text' || styleType === 'button') ? activeColor : '#d9d9d9'
+      }"
+      class="segmented-control__item"
+      @click="_onClick(index)"
+    >
+      <view>
+        <text
+          :style="{
+            color:
+              index === currentIndex ? (styleType === 'text' ? activeColor : '#fff') : styleType === 'text' ? '#000' : activeColor
+          }"
+          class="segmented-control__text"
+          :class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text' : ''"
+        >
+          {{ item }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+/**
+ * SegmentedControl 分段器
+ * @description 用作不同视图的显示
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=54
+ * @property {Number} current 当前选中的tab索引值，从0计数
+ * @property {String} styleType = [button|text] 分段器样式类型
+ * 	@value button 按钮类型
+ * 	@value text 文字类型
+ * @property {String} activeColor 选中的标签背景色与边框颜色
+ * @property {Array} values 选项数组
+ * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
+ */
+export default {
+  name: 'UniSegmentedControl',
+  emits: ['clickItem'],
+  props: {
+    current: {
+      type: Number,
+      default: 0
+    },
+    values: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    activeColor: {
+      type: String,
+      default: '#2979FF'
+    },
+    styleType: {
+      type: String,
+      default: 'button'
+    }
+  },
+  data() {
+    return {
+      currentIndex: 0
+    };
+  },
+  watch: {
+    current(val) {
+      if (val !== this.currentIndex) {
+        this.currentIndex = val;
+      }
+    }
+  },
+  created() {
+    this.currentIndex = this.current;
+  },
+  methods: {
+    _onClick(index) {
+      if (this.currentIndex !== index) {
+        this.currentIndex = index;
+        this.$emit('clickItem', {
+          currentIndex: index
+        });
+      }
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>

package/uni-ui/lib/uni-status-bar/uni-status-bar.vue

@@ -15,5 +15,5 @@ export default {
 };
 </script>
 <style scoped>
-@import './style.css';
+@import 'style.css';
 </style>

package/uni-ui/lib/uni-steps/uni-steps.vue

@@ -1 +1,120 @@
-<template>
  <view class="uni-steps">
    <view :class="[direction === 'column' ? 'uni-steps__column' : 'uni-steps__row']">
      <view :class="[direction === 'column' ? 'uni-steps__column-text-container' : 'uni-steps__row-text-container']">
        <view
          v-for="(item, index) in options"
          :key="index"
          :class="[direction === 'column' ? 'uni-steps__column-text' : 'uni-steps__row-text']"
        >
          <text
            :style="{ color: index === active ? activeColor : deactiveColor }"
            :class="[direction === 'column' ? 'uni-steps__column-title' : 'uni-steps__row-title']"
          >
            {{ item.title }}
          </text>
          <text
            :style="{ color: deactiveColor }"
            :class="[direction === 'column' ? 'uni-steps__column-desc' : 'uni-steps__row-desc']"
          >
            {{ item.desc }}
          </text>
        </view>
      </view>
      <view :class="[direction === 'column' ? 'uni-steps__column-container' : 'uni-steps__row-container']">
        <view
          :class="[direction === 'column' ? 'uni-steps__column-line-item' : 'uni-steps__row-line-item']"
          v-for="(item, index) in options"
          :key="index"
        >
          <view
            :class="[
              direction === 'column' ? 'uni-steps__column-line' : 'uni-steps__row-line',
              direction === 'column' ? 'uni-steps__column-line--before' : 'uni-steps__row-line--before'
            ]"
            :style="{
              backgroundColor: index <= active && index !== 0 ? activeColor : index === 0 ? 'transparent' : deactiveColor
            }"
          ></view>
          <view :class="[direction === 'column' ? 'uni-steps__column-check' : 'uni-steps__row-check']" v-if="index === active">
            <uni-icons :color="activeColor" :type="activeIcon" size="14"></uni-icons>
          </view>
          <view
            v-else
            :class="[direction === 'column' ? 'uni-steps__column-circle' : 'uni-steps__row-circle']"
            :style="{ backgroundColor: index < active ? activeColor : deactiveColor }"
          ></view>
          <view
            :class="[
              direction === 'column' ? 'uni-steps__column-line' : 'uni-steps__row-line',
              direction === 'column' ? 'uni-steps__column-line--after' : 'uni-steps__row-line--after'
            ]"
            :style="{
              backgroundColor:
                index < active && index !== options.length - 1
                  ? activeColor
                  : index === options.length - 1
                  ? 'transparent'
                  : deactiveColor
            }"
          ></view>
        </view>
      </view>
    </view>
  </view>
 * Steps 步骤条
 * @description 评分组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=34
 * @property {Number} active 当前步骤
 * @property {String} direction = [row|column] 当前步骤
 * 	@value row 横向
 * 	@value column 纵向
 * @property {String} activeColor 选中状态的颜色
 * @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
 */
  name: 'UniSteps',
  props: {
    direction: {
      // 排列方向 row column
      type: String,
      default: 'row'
    },
    activeColor: {
      // 激活状态颜色
      type: String,
      default: '#2979FF'
    },
    deactiveColor: {
      // 未激活状态颜色
      type: String,
      default: '#B7BDC6'
    },
    active: {
      // 当前步骤
      type: Number,
      default: 0
    },
    activeIcon: {
      // 当前步骤
      type: String,
      default: 'checkbox-filled'
    },
    options: {
      type: Array,
      default() {
        return [];
      }
    } // 数据
  },
  data() {
    return {};
  }
+<template>
+  <view class="uni-steps">
+    <view :class="[direction === 'column' ? 'uni-steps__column' : 'uni-steps__row']">
+      <view :class="[direction === 'column' ? 'uni-steps__column-text-container' : 'uni-steps__row-text-container']">
+        <view
+          v-for="(item, index) in options"
+          :key="index"
+          :class="[direction === 'column' ? 'uni-steps__column-text' : 'uni-steps__row-text']"
+        >
+          <text
+            :style="{ color: index === active ? activeColor : deactiveColor }"
+            :class="[direction === 'column' ? 'uni-steps__column-title' : 'uni-steps__row-title']"
+          >
+            {{ item.title }}
+          </text>
+          <text
+            :style="{ color: deactiveColor }"
+            :class="[direction === 'column' ? 'uni-steps__column-desc' : 'uni-steps__row-desc']"
+          >
+            {{ item.desc }}
+          </text>
+        </view>
+      </view>
+      <view :class="[direction === 'column' ? 'uni-steps__column-container' : 'uni-steps__row-container']">
+        <view
+          :class="[direction === 'column' ? 'uni-steps__column-line-item' : 'uni-steps__row-line-item']"
+          v-for="(item, index) in options"
+          :key="index"
+        >
+          <view
+            :class="[
+              direction === 'column' ? 'uni-steps__column-line' : 'uni-steps__row-line',
+              direction === 'column' ? 'uni-steps__column-line--before' : 'uni-steps__row-line--before'
+            ]"
+            :style="{
+              backgroundColor: index <= active && index !== 0 ? activeColor : index === 0 ? 'transparent' : deactiveColor
+            }"
+          ></view>
+          <view :class="[direction === 'column' ? 'uni-steps__column-check' : 'uni-steps__row-check']" v-if="index === active">
+            <uni-icons :color="activeColor" :type="activeIcon" size="14"></uni-icons>
+          </view>
+          <view
+            v-else
+            :class="[direction === 'column' ? 'uni-steps__column-circle' : 'uni-steps__row-circle']"
+            :style="{ backgroundColor: index < active ? activeColor : deactiveColor }"
+          ></view>
+          <view
+            :class="[
+              direction === 'column' ? 'uni-steps__column-line' : 'uni-steps__row-line',
+              direction === 'column' ? 'uni-steps__column-line--after' : 'uni-steps__row-line--after'
+            ]"
+            :style="{
+              backgroundColor:
+                index < active && index !== options.length - 1
+                  ? activeColor
+                  : index === options.length - 1
+                  ? 'transparent'
+                  : deactiveColor
+            }"
+          ></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+/**
+ * Steps 步骤条
+ * @description 评分组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=34
+ * @property {Number} active 当前步骤
+ * @property {String} direction = [row|column] 当前步骤
+ * 	@value row 横向
+ * 	@value column 纵向
+ * @property {String} activeColor 选中状态的颜色
+ * @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
+ */
+export default {
+  name: 'UniSteps',
+  props: {
+    direction: {
+      // 排列方向 row column
+      type: String,
+      default: 'row'
+    },
+    activeColor: {
+      // 激活状态颜色
+      type: String,
+      default: '#2979FF'
+    },
+    deactiveColor: {
+      // 未激活状态颜色
+      type: String,
+      default: '#B7BDC6'
+    },
+    active: {
+      // 当前步骤
+      type: Number,
+      default: 0
+    },
+    activeIcon: {
+      // 当前步骤
+      type: String,
+      default: 'checkbox-filled'
+    },
+    options: {
+      type: Array,
+      default() {
+        return [];
+      }
+    } // 数据
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>

package/uni-ui/lib/uni-swipe-action-item/uni-swipe-action-item.vue

@@ -1,3 +1,226 @@
-<template>
-@import './style.css';
-</style>
+<template>
+	<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
+	<!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
+	<view class="uni-swipe">
+		<!--  #ifdef MP-WEIXIN || VUE3 -->
+		<view class="uni-swipe_box" :change:prop="wxsswipe.showWatch" :prop="is_show" :data-threshold="threshold"
+			:data-disabled="disabled" @touchstart="wxsswipe.touchstart" @touchmove="wxsswipe.touchmove"
+			@touchend="wxsswipe.touchend">
+			<!-- #endif -->
+			<!--  #ifndef MP-WEIXIN || VUE3 -->
+			<view class="uni-swipe_box" :change:prop="renderswipe.showWatch" :prop="is_show" :data-threshold="threshold"
+				:data-disabled="disabled+''" @touchstart="renderswipe.touchstart" @touchmove="renderswipe.touchmove"
+				@touchend="renderswipe.touchend">
+				<!-- #endif -->
+				<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
+				<view class="uni-swipe_button-group button-group--left">
+					<slot name="left">
+						<view v-for="(item,index) in leftOptions" :key="index" :style="{
+					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
+					}" class="uni-swipe_button button-hock" @touchstart="appTouchStart"
+							@touchend="appTouchEnd($event,index,item,'left')"
+							@click.stop="onClickForPC(index,item,'left')">
+							<text class="uni-swipe_button-text"
+								:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
+						</view>
+					</slot>
+				</view>
+				<view class="uni-swipe_text--center">
+					<slot></slot>
+				</view>
+				<view class="uni-swipe_button-group button-group--right">
+					<slot name="right">
+						<view v-for="(item,index) in rightOptions" :key="index" :style="{
+					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
+					}" class="uni-swipe_button button-hock" @touchstart="appTouchStart"
+							@touchend="appTouchEnd($event,index,item,'right')"
+							@click.stop="onClickForPC(index,item,'right')"><text class="uni-swipe_button-text"
+								:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
+						</view>
+					</slot>
+				</view>
+			</view>
+		</view>
+		<!-- #endif -->
+		<!-- app nvue端 使用 bindingx -->
+		<!-- #ifdef APP-NVUE -->
+		<view ref="selector-box--hock" class="uni-swipe" @horizontalpan="touchstart" @touchend="touchend">
+			<view ref='selector-left-button--hock' class="uni-swipe_button-group button-group--left">
+				<slot name="left">
+					<view v-for="(item,index) in leftOptions" :key="index" :style="{
+				  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
+				}" class="uni-swipe_button button-hock" @click.stop="onClick(index,item,'left')"><text
+							class="uni-swipe_button-text"
+							:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF', fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
+					</view>
+				</slot>
+			</view>
+			<view ref='selector-right-button--hock' class="uni-swipe_button-group button-group--right">
+				<slot name="right">
+					<view v-for="(item,index) in rightOptions" :key="index" :style="{
+				  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD'
+				}" class="uni-swipe_button button-hock" @click.stop="onClick(index,item,'right')"><text
+							class="uni-swipe_button-text"
+							:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text>
+					</view>
+				</slot>
+			</view>
+			<view ref='selector-content--hock' class="uni-swipe_box">
+				<slot></slot>
+			</view>
+		</view>
+		<!-- #endif -->
+		<!-- 其他平台使用 js ，长列表性能可能会有影响-->
+		<!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ -->
+		<view class="uni-swipe">
+			<view class="uni-swipe_box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
+				:style="{transform:moveLeft}" :class="{ani:ani}">
+				<view class="uni-swipe_button-group button-group--left" :class="[elClass]">
+					<slot name="left">
+						<view v-for="(item,index) in leftOptions" :key="index" :style="{
+					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+					  fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
+					}" class="uni-swipe_button button-hock" @touchstart="appTouchStart"
+							@touchend="appTouchEnd($event,index,item,'left')"><text class="uni-swipe_button-text"
+								:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
+						</view>
+					</slot>
+				</view>
+				<slot></slot>
+				<view class="uni-swipe_button-group button-group--right" :class="[elClass]">
+					<slot name="right">
+						<view v-for="(item,index) in rightOptions" :key="index" :style="{
+					  backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+					  fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
+					}" @touchstart="appTouchStart" @touchend="appTouchEnd($event,index,item,'right')"
+							class="uni-swipe_button button-hock"><text class="uni-swipe_button-text"
+								:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text>
+						</view>
+					</slot>
+				</view>
+			</view>
+		</view>
+		<!-- #endif -->
+</template>
+<script src="./wx.wxs" module="wxsswipe" lang="wxs"></script>
+<script module="renderswipe" lang="renderjs">
+	import render from './render.js'
+	export default {
+		mounted(e, ins, owner) {
+			this.state = {}
+		},
+		methods: {
+			showWatch(newVal, oldVal, ownerInstance, instance) {
+				render.showWatch(newVal, oldVal, ownerInstance, instance, this)
+			},
+			touchstart(e, ownerInstance) {
+				render.touchstart(e, ownerInstance, this)
+			},
+			touchmove(e, ownerInstance) {
+				render.touchmove(e, ownerInstance, this)
+			},
+			touchend(e, ownerInstance) {
+				render.touchend(e, ownerInstance, this)
+			}
+		}
+	}
+</script>
+<script>
+	import mpwxs from './mpwxs'
+	import bindingx from './bindingx.js'
+	import mpother from './mpother'
+	/**
+	 * SwipeActionItem 滑动操作子组件
+	 * @description 通过滑动触发选项的容器
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=181
+	 * @property {Boolean} show = [left|right｜none] 	开启关闭组件，auto-close = false 时生效
+	 * @property {Boolean} disabled = [true|false] 		是否禁止滑动
+	 * @property {Boolean} autoClose = [true|false] 	滑动打开当前组件，是否关闭其他组件
+	 * @property {Number}  threshold 					滑动缺省值
+	 * @property {Array} leftOptions 					左侧选项内容及样式
+	 * @property {Array} rgihtOptions 					右侧选项内容及样式
+	 * @event {Function} click 							点击选项按钮时触发事件，e = {content,index} ，content（点击内容）、index（下标)
+	 * @event {Function} change 						组件打开或关闭时触发，left\right\none
+	 */
+	export default {
+		mixins: [mpwxs, bindingx, mpother],
+		emits: ['click', 'change'],
+		props: {
+			// 控制开关
+			show: {
+				type: String,
+				default: 'none'
+			},
+			// 禁用
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// 是否自动关闭
+			autoClose: {
+				type: Boolean,
+				default: true
+			},
+			// 滑动缺省距离
+			threshold: {
+				type: Number,
+				default: 20
+			},
+			// 左侧按钮内容
+			leftOptions: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			// 右侧按钮内容
+			rightOptions: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+		},
+		// #ifndef VUE3
+		// TODO vue2
+		destroyed() {
+			if (this.__isUnmounted) return
+			this.uninstall()
+		},
+		// #endif
+		// #ifdef VUE3
+		// TODO vue3
+		unmounted() {
+			this.__isUnmounted = true
+			this.uninstall()
+		},
+		// #endif
+		methods: {
+			uninstall() {
+				if (this.swipeaction) {
+					this.swipeaction.children.forEach((item, index) => {
+						if (item === this) {
+							this.swipeaction.children.splice(index, 1)
+						}
+					})
+				}
+			},
+			/**
+			 * 获取父元素实例
+			 */
+			getSwipeAction(name = 'uniSwipeAction') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false;
+					parentName = parent.$options.name;
+				}
+				return parent;
+			}
+		}
+	}
+</script>
+<style>
+@import 'style.css';
+</style>