@10yun/cv-mobile-ui 0.4.1 → 0.4.2

package/ui-cv/cv-search-bar/uni-search-bar.vue

@@ -1,262 +0,0 @@
-<template>
-	<view class="uni-searchbar">
-		<view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="uni-searchbar__box" @click="searchClick">
-			<view class="uni-searchbar__box-icon-search">
-				<slot name="searchIcon">
-					<uni-icons color="#999999" size="18" type="search" />
-				</slot>
-			</view>
-			<input v-if="show || searchVal" :focus="showSync" :placeholder="placeholder" :maxlength="maxlength" class="uni-searchbar__box-search-input" confirm-type="search" type="text" v-model="searchVal" @confirm="confirm" @blur="blur" @focus="emitFocus" />
-			<text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
-			<view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='')" class="uni-searchbar__box-icon-clear" @click="clear">
-				<slot name="clearIcon">
-					<uni-icons color="#c0c4cc" size="15" type="clear" />
-				</slot>
-			</view>
-		</view>
-		<text @click="cancel" class="uni-searchbar__cancel" v-if="cancelButton ==='always' || show && cancelButton ==='auto'">{{cancelText}}</text>
-	</view>
-</template>
-
-<script>
-	/**
-	 * SearchBar 搜索栏
-	 * @description 评分组件
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=866
-	 * @property {Number} radius 搜索栏圆角
-	 * @property {Number} maxlength 输入最大长度
-	 * @property {String} placeholder 搜索栏Placeholder
-	 * @property {String} clearButton = [always|auto|none] 是否显示清除按钮
-	 * 	@value always 一直显示
-	 * 	@value auto 输入框不为空时显示
-	 * 	@value none 一直不显示
-	 * @property {String} cancelButton = [always|auto|none] 是否显示取消按钮
-	 * 	@value always 一直显示
-	 * 	@value auto 输入框不为空时显示
-	 * 	@value none 一直不显示
-	 * @property {String} cancelText 取消按钮的文字
-	 * @property {String} bgColor 输入框背景颜色
-	 * @property {Boolean} focus 是否自动聚焦
-	 * @event {Function} confirm uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value，e={value:Number}
-	 * @event {Function} input uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value，e=value
-	 * @event {Function} cancel 点击取消按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
-	 * @event {Function} clear 点击清除按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
-	 * @event {Function} blur input失去焦点时触发事件，返回参数为uniSearchBar的value，e={value:Number}
-	 */
-
-	export default {
-		name: "UniSearchBar",
-		emits: ['input', 'update:modelValue', 'clear', 'cancel', 'confirm', 'blur', 'focus'],
-		props: {
-			placeholder: {
-				type: String,
-				default: "请输入搜索内容"
-			},
-			radius: {
-				type: [Number, String],
-				default: 5
-			},
-			clearButton: {
-				type: String,
-				default: "auto"
-			},
-			cancelButton: {
-				type: String,
-				default: "auto"
-			},
-			cancelText: {
-				type: String,
-				default: '取消'
-			},
-			bgColor: {
-				type: String,
-				default: "#F8F8F8"
-			},
-			maxlength: {
-				type: [Number, String],
-				default: 100
-			},
-			value: {
-				type: [Number, String],
-				default: ""
-			},
-			modelValue: {
-				type: [Number, String],
-				default: ""
-			},
-			focus: {
-				type: Boolean,
-				default: false
-			}
-		},
-		data() {
-			return {
-				show: false,
-				showSync: false,
-				searchVal: ''
-			}
-		},
-		watch: {
-			value: {
-				immediate: true,
-				handler(newVal) {
-					this.searchVal = newVal
-					if (newVal) {
-						this.show = true
-					}
-				}
-			},
-			modelValue: {
-				immediate: true,
-				handler(newVal) {
-					this.searchVal = newVal
-					if (newVal) {
-						this.show = true
-					}
-				}
-			},
-			focus: {
-				immediate: true,
-				handler(newVal) {
-					if (newVal) {
-						this.show = true;
-						this.$nextTick(() => {
-							this.showSync = true
-						})
-					}
-				}
-			},
-			searchVal(newVal, oldVal) {
-				this.$emit("input", newVal)
-				this.$emit("update:modelValue", newVal)
-			}
-		},
-		methods: {
-			searchClick() {
-				if (this.show) {
-					return
-				}
-				this.show = true;
-				this.$nextTick(() => {
-					this.showSync = true
-				})
-			},
-			clear() {
-				this.$emit("clear", {
-					value: this.searchVal
-				})
-				this.searchVal = ""
-			},
-			cancel() {
-				this.$emit("cancel", {
-					value: this.searchVal
-				});
-				this.searchVal = ""
-				this.show = false
-				this.showSync = false
-				// #ifndef APP-PLUS
-				uni.hideKeyboard()
-				// #endif
-				// #ifdef APP-PLUS
-				plus.key.hideSoftKeybord()
-				// #endif
-			},
-			confirm() {
-				// #ifndef APP-PLUS
-				uni.hideKeyboard();
-				// #endif
-				// #ifdef APP-PLUS
-				plus.key.hideSoftKeybord()
-				// #endif
-				this.$emit("confirm", {
-					value: this.searchVal
-				})
-			},
-			blur() {
-				// #ifndef APP-PLUS
-				uni.hideKeyboard();
-				// #endif
-				// #ifdef APP-PLUS
-				plus.key.hideSoftKeybord()
-				// #endif
-				this.$emit("blur", {
-					value: this.searchVal
-				})
-			},
-			emitFocus(e) {
-				this.$emit("focus", e.detail)
-			}
-		}
-	};
-</script>
-
-<style scoped>
-	.uni-searchbar {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		position: relative;
-		padding: 8px;
-	}
-
-	.uni-searchbar__box {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		box-sizing: border-box;
-		/* #endif */
-		overflow: hidden;
-		position: relative;
-		flex: 1;
-		justify-content: center;
-		flex-direction: row;
-		align-items: center;
-		height: 36px;
-		padding: 5px 8px 5px 0px;
-		border-width: 0.5px;
-		border-style: solid;
-		border-color: #e5e5e5;
-	}
-
-	.uni-searchbar__box-icon-search {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		padding: 0 8px;
-		justify-content: center;
-		align-items: center;
-		color: #808080;
-	}
-
-	.uni-searchbar__box-search-input {
-		flex: 1;
-		font-size: 14px;
-		color: #333;
-	}
-
-	.uni-searchbar__box-icon-clear {
-		align-items: center;
-		line-height: 24px;
-		padding-left: 8px;
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
-
-	.uni-searchbar__text-placeholder {
-		font-size: 14px;
-		color: #808080;
-		margin-left: 5px;
-	}
-
-	.uni-searchbar__cancel {
-		padding-left: 10px;
-		line-height: 36px;
-		font-size: 14px;
-		color: #333;
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
-</style>

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

@@ -1,250 +0,0 @@
-<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:index<=active?activeColor: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="checkbox-filled" size="14"></uni-icons>
-					</view>
-					<view :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']" v-else :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: '#1aad19'
-			},
-			deactiveColor: {
-				// 未激活状态颜色
-				type: String,
-				default: '#999999'
-			},
-			active: {
-				// 当前步骤
-				type: Number,
-				default: 0
-			},
-			options: {
-				type: Array,
-				default () {
-					return []
-				}
-			} // 数据
-		},
-		data() {
-			return {}
-		}
-	}
-</script>
-
-<style scoped>
-	.uni-steps {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		width: 100%;
-		/* #endif */
-		/* #ifdef APP-NVUE */
-		flex: 1;
-		/* #endif */
-		flex-direction: column;
-	}
-
-	.uni-steps__row {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-	}
-
-	.uni-steps__column {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row-reverse;
-	}
-
-	.uni-steps__row-text-container {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: flex-end;
-		margin-bottom: 8px;
-	}
-
-	.uni-steps__column-text-container {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		flex: 1;
-	}
-
-	.uni-steps__row-text {
-		/* #ifndef APP-NVUE */
-		display: inline-flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: column;
-	}
-
-	.uni-steps__column-text {
-		padding: 6px 0px;
-		border-bottom-style: solid;
-		border-bottom-width: 1px;
-		border-bottom-color: #e5e5e5;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-	}
-
-	.uni-steps__row-title {
-		font-size: 14px;
-		line-height: 16px;
-		text-align: center;
-	}
-
-	.uni-steps__column-title {
-		font-size: 14px;
-		text-align: left;
-		line-height: 18px;
-	}
-
-	.uni-steps__row-desc {
-		font-size: 12px;
-		line-height: 14px;
-		text-align: center;
-	}
-
-	.uni-steps__column-desc {
-		font-size: 12px;
-		text-align: left;
-		line-height: 18px;
-	}
-
-	.uni-steps__row-container {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-	}
-
-	.uni-steps__column-container {
-		/* #ifndef APP-NVUE */
-		display: inline-flex;
-		/* #endif */
-		width: 30px;
-		flex-direction: column;
-	}
-
-	.uni-steps__row-line-item {
-		/* #ifndef APP-NVUE */
-		display: inline-flex;
-		/* #endif */
-		flex-direction: row;
-		flex: 1;
-		height: 14px;
-		line-height: 14px;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.uni-steps__column-line-item {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		flex: 1;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.uni-steps__row-line {
-		flex: 1;
-		height: 1px;
-		background-color: #999;
-	}
-
-	.uni-steps__column-line {
-		width: 1px;
-		background-color: #999;
-	}
-
-	.uni-steps__row-line--after {
-		transform: translateX(1px);
-	}
-
-	.uni-steps__column-line--after {
-		flex: 1;
-		transform: translate(0px, 1px);
-	}
-
-	.uni-steps__row-line--before {
-		transform: translateX(-1px);
-	}
-
-	.uni-steps__column-line--before {
-		height: 6px;
-		transform: translate(0px, -1px);
-	}
-
-	.uni-steps__row-circle {
-		width: 5px;
-		height: 5px;
-		border-radius: 100px;
-		background-color: #999;
-		margin: 0px 3px;
-	}
-
-	.uni-steps__column-circle {
-		width: 5px;
-		height: 5px;
-		border-radius: 100px;
-		background-color: #999;
-		margin: 4px 0px 5px 0px;
-	}
-
-	.uni-steps__row-check {
-		margin: 0px 6px;
-	}
-
-	.uni-steps__column-check {
-		height: 14px;
-		line-height: 14px;
-		margin: 2px 0px;
-	}
-</style>

package/ui-cv/cv-swiper-dot/uni-swiper-dot.vue

@@ -1,205 +0,0 @@
-<template>
-	<view class="uni-swiper__warp">
-		<slot />
-		<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
-			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
-        'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/3 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}" :key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
-		</view>
-		<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
-			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
-        'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}" :key="index" class="uni-swiper__dots-item" />
-		</view>
-		<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
-			<view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{
-		    'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}" :key="index" class="uni-swiper__dots-item " />
-		</view>
-		<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
-			<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text>
-		</view>
-		<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
-			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
-        'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}" :key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
-		</view>
-	</view>
-</template>
-
-<script>
-	/**
-	 * SwiperDod 轮播图指示点
-	 * @description 自定义轮播图指示点
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=284
-	 * @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`
-	 * @property {String} mode = [default|round|nav|indexes] 指示点的类型
-	 * 	@value defualt 默认指示点
-	 * 	@value round 圆形指示点
-	 * 	@value nav 条形指示点
-	 * 	@value indexes 索引指示点
-	 * @property {String} field mode 为 nav 时，显示的内容字段（mode = nav 时必填）
-	 * @property {String} info 轮播图的数据，通过数组长度决定指示点个数
-	 * @property {Object} dotsStyles 指示点样式
-	 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
-	 */
-
-	export default {
-		name: 'UniSwiperDot',
-		emits: ['clickItem'],
-		props: {
-			info: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			current: {
-				type: Number,
-				default: 0
-			},
-			dotsStyles: {
-				type: Object,
-				default () {
-					return {}
-				}
-			},
-			// 类型 ：default(默认) indexes long nav
-			mode: {
-				type: String,
-				default: 'default'
-			},
-			// 只在 nav 模式下生效，变量名称
-			field: {
-				type: String,
-				default: ''
-			}
-		},
-		data() {
-			return {
-				dots: {
-					width: 8,
-					height: 8,
-					bottom: 10,
-					color: '#fff',
-					backgroundColor: 'rgba(0, 0, 0, .3)',
-					border: '1px rgba(0, 0, 0, .3) solid',
-					selectedBackgroundColor: '#333',
-					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
-				}
-			}
-		},
-		watch: {
-			dotsStyles(newVal) {
-				this.dots = Object.assign(this.dots, this.dotsStyles)
-			},
-			mode(newVal) {
-				if (newVal === 'indexes') {
-					this.dots.width = 20
-					this.dots.height = 20
-				} else {
-					this.dots.width = 8
-					this.dots.height = 8
-				}
-			}
-
-		},
-		created() {
-			if (this.mode === 'indexes') {
-				this.dots.width = 20
-				this.dots.height = 20
-			}
-			this.dots = Object.assign(this.dots, this.dotsStyles)
-		},
-		methods: {
-			clickItem(index) {
-				this.$emit('clickItem', index)
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	.uni-swiper__warp {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: column;
-		position: relative;
-		overflow: hidden;
-	}
-
-	.uni-swiper__dots-box {
-		position: absolute;
-		bottom: 10px;
-		left: 0;
-		right: 0;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.uni-swiper__dots-item {
-		width: 8px;
-		border-radius: 100px;
-		margin-left: 6px;
-		background-color: rgba(0, 0, 0, 0.4);
-		/* #ifndef APP-NVUE */
-		cursor: pointer;
-		/* #endif */
-		/* #ifdef H5 */
-		/* #endif */
-	}
-
-	.uni-swiper__dots-item:first-child {
-		margin: 0;
-	}
-
-	.uni-swiper__dots-default {
-		border-radius: 100px;
-	}
-
-	.uni-swiper__dots-long {
-		border-radius: 50px;
-	}
-
-	.uni-swiper__dots-bar {
-		border-radius: 50px;
-	}
-
-	.uni-swiper__dots-nav {
-		bottom: 0px;
-		height: 40px;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: row;
-		justify-content: flex-start;
-		align-items: center;
-		background-color: rgba(0, 0, 0, 0.2);
-	}
-
-	.uni-swiper__dots-nav-item {
-		/* overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap; */
-		font-size: 14px;
-		color: #fff;
-		margin: 0 15px;
-	}
-
-	.uni-swiper__dots-indexes {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		align-items: center;
-	}
-
-	.uni-swiper__dots-indexes-text {
-		color: #fff;
-		font-size: 12px;
-	}
-</style>