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

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

@@ -1,237 +0,0 @@
-<template>
-	<view class="uni-combox">
-		<view v-if="label" class="uni-combox__label" :style="labelStyle">
-			<text>{{label}}</text>
-		</view>
-		<view class="uni-combox__input-box">
-			<input class="uni-combox__input" type="text" :placeholder="placeholder" v-model="inputVal" @input="onInput" @focus="onFocus" @blur="onBlur" />
-			<uni-icons class="uni-combox__input-arrow" type="arrowdown" size="14" @click="toggleSelector"></uni-icons>
-			<view class="uni-combox__selector" v-if="showSelector">
-				<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
-					<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
-						<text>{{emptyTips}}</text>
-					</view>
-					<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" @click="onSelectorClick(index)">
-						<text>{{item}}</text>
-					</view>
-				</scroll-view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	/**
-	 * Combox 组合输入框
-	 * @description 组合输入框一般用于既可以输入也可以选择的场景
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=1261
-	 * @property {String} label 左侧文字
-	 * @property {String} labelWidth 左侧内容宽度
-	 * @property {String} placeholder 输入框占位符
-	 * @property {Array} candidates 候选项列表
-	 * @property {String} emptyTips 筛选结果为空时显示的文字
-	 * @property {String} value 组合框的值
-	 */
-	export default {
-		name: 'uniCombox',
-		emits: ['input', 'update:modelValue'],
-		props: {
-			label: {
-				type: String,
-				default: ''
-			},
-			labelWidth: {
-				type: String,
-				default: 'auto'
-			},
-			placeholder: {
-				type: String,
-				default: ''
-			},
-			candidates: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			emptyTips: {
-				type: String,
-				default: '无匹配项'
-			},
-			// #ifndef VUE3
-			value: {
-				type: [String, Number],
-				default: ''
-			},
-			// #endif
-			// #ifdef VUE3
-			modelValue: {
-				type: [String, Number],
-				default: ''
-			},
-			// #endif
-		},
-		data() {
-			return {
-				showSelector: false,
-				inputVal: ''
-			}
-		},
-		computed: {
-			labelStyle() {
-				if (this.labelWidth === 'auto') {
-					return {}
-				}
-				return {
-					width: this.labelWidth
-				}
-			},
-			filterCandidates() {
-				return this.candidates.filter((item) => {
-					return item.toString().indexOf(this.inputVal) > -1
-				})
-			},
-			filterCandidatesLength() {
-				return this.filterCandidates.length
-			}
-		},
-		watch: {
-			// #ifndef VUE3
-			value: {
-				handler(newVal) {
-					this.inputVal = newVal
-				},
-				immediate: true
-			},
-			// #endif
-			// #ifdef VUE3
-			modelValue: {
-				handler(newVal) {
-					this.inputVal = newVal
-				},
-				immediate: true
-			},
-			// #endif
-		},
-		methods: {
-			toggleSelector() {
-				this.showSelector = !this.showSelector
-			},
-			onFocus() {
-				this.showSelector = true
-			},
-			onBlur() {
-				setTimeout(() => {
-					this.showSelector = false
-				}, 153)
-			},
-			onSelectorClick(index) {
-				this.inputVal = this.filterCandidates[index]
-				this.showSelector = false
-				this.$emit('input', this.inputVal)
-				this.$emit('update:modelValue', this.inputVal)
-			},
-			onInput() {
-				setTimeout(() => {
-					this.$emit('input', this.inputVal)
-					this.$emit('update:modelValue', this.inputVal)
-				})
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	.uni-combox {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		height: 40px;
-		flex-direction: row;
-		align-items: center;
-	}
-
-	.uni-combox__label {
-		font-size: 16px;
-		line-height: 22px;
-		padding-right: 10px;
-		color: #999999;
-	}
-
-	.uni-combox__input-box {
-		position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: row;
-		align-items: center;
-	}
-
-	.uni-combox__input {
-		flex: 1;
-		font-size: 16px;
-		height: 22px;
-		line-height: 22px;
-	}
-
-	.uni-combox__input-arrow {
-		padding: 10px;
-	}
-
-	.uni-combox__selector {
-		/* #ifndef APP-NVUE */
-		box-sizing: border-box;
-		/* #endif */
-		position: absolute;
-		top: 42px;
-		left: 0;
-		width: 100%;
-		background-color: #FFFFFF;
-		border-radius: 6px;
-		box-shadow: #DDDDDD 4px 4px 8px, #DDDDDD -4px -4px 8px;
-		z-index: 2;
-	}
-
-	.uni-combox__selector-scroll {
-		/* #ifndef APP-NVUE */
-		max-height: 200px;
-		box-sizing: border-box;
-		/* #endif */
-	}
-
-	.uni-combox__selector::before {
-		/* #ifndef APP-NVUE */
-		content: "";
-		/* #endif */
-		position: absolute;
-		width: 0;
-		height: 0;
-		border-bottom: solid 6px #FFFFFF;
-		border-right: solid 6px transparent;
-		border-left: solid 6px transparent;
-		left: 50%;
-		top: -6px;
-		margin-left: -6px;
-	}
-
-	.uni-combox__selector-empty,
-	.uni-combox__selector-item {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		cursor: pointer;
-		/* #endif */
-		line-height: 36px;
-		font-size: 14px;
-		text-align: center;
-		border-bottom: solid 1px #DDDDDD;
-		margin: 0px 10px;
-	}
-
-	.uni-combox__selector-empty:last-child,
-	.uni-combox__selector-item:last-child {
-		/* #ifndef APP-NVUE */
-		border-bottom: none;
-		/* #endif */
-	}
-</style>

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

@@ -1,234 +0,0 @@
-<template>
-	<view class="uni-countdown">
-		<text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ d }}</text>
-		<text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text>
-		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ h }}</text>
-		<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
-		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ i }}</text>
-		<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
-		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ s }}</text>
-		<text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
-	</view>
-</template>
-<script>
-	/**
-	 * Countdown 倒计时
-	 * @description 倒计时组件
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=25
-	 * @property {String} backgroundColor 背景色
-	 * @property {String} color 文字颜色
-	 * @property {Number} day 天数
-	 * @property {Number} hour 小时
-	 * @property {Number} minute 分钟
-	 * @property {Number} second 秒
-	 * @property {Number} timestamp 时间戳
-	 * @property {Boolean} showDay = [true|false] 是否显示天数
-	 * @property {Boolean} showColon = [true|false] 是否以冒号为分隔符
-	 * @property {String} splitorColor 分割符号颜色
-	 * @event {Function} timeup 倒计时时间到触发事件
-	 * @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
-	 */
-	export default {
-		name: 'UniCountdown',
-		emits: ['timeup'],
-		props: {
-			showDay: {
-				type: Boolean,
-				default: true
-			},
-			showColon: {
-				type: Boolean,
-				default: true
-			},
-			start: {
-				type: Boolean,
-				default: true
-			},
-			backgroundColor: {
-				type: String,
-				default: '#FFFFFF'
-			},
-			borderColor: {
-				type: String,
-				default: '#000000'
-			},
-			color: {
-				type: String,
-				default: '#000000'
-			},
-			splitorColor: {
-				type: String,
-				default: '#000000'
-			},
-			day: {
-				type: Number,
-				default: 0
-			},
-			hour: {
-				type: Number,
-				default: 0
-			},
-			minute: {
-				type: Number,
-				default: 0
-			},
-			second: {
-				type: Number,
-				default: 0
-			},
-			timestamp: {
-				type: Number,
-				default: 0
-			}
-		},
-		data() {
-			return {
-				timer: null,
-				syncFlag: false,
-				d: '00',
-				h: '00',
-				i: '00',
-				s: '00',
-				leftTime: 0,
-				seconds: 0
-			}
-		},
-		watch: {
-			day(val) {
-				this.changeFlag()
-			},
-			hour(val) {
-				this.changeFlag()
-			},
-			minute(val) {
-				this.changeFlag()
-			},
-			second(val) {
-				this.changeFlag()
-			},
-			start: {
-				immediate: true,
-				handler(newVal, oldVal) {
-					if (newVal) {
-						this.startData();
-					} else {
-						if (!oldVal) return
-						clearInterval(this.timer)
-					}
-				}
-
-			}
-		},
-		created: function(e) {
-			this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
-			this.countDown()
-		},
-		// #ifndef VUE3
-		destroyed() {
-			clearInterval(this.timer)
-		},
-		// #endif
-		// #ifdef VUE3
-		unmounted() {
-			clearInterval(this.timer)
-		},
-		// #endif
-		methods: {
-			toSeconds(timestamp, day, hours, minutes, seconds) {
-				if (timestamp) {
-					return timestamp - parseInt(new Date().getTime() / 1000, 10)
-				}
-				return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
-			},
-			timeUp() {
-				clearInterval(this.timer)
-				this.$emit('timeup')
-			},
-			countDown() {
-				let seconds = this.seconds
-				let [day, hour, minute, second] = [0, 0, 0, 0]
-				if (seconds > 0) {
-					day = Math.floor(seconds / (60 * 60 * 24))
-					hour = Math.floor(seconds / (60 * 60)) - (day * 24)
-					minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
-					second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
-				} else {
-					this.timeUp()
-				}
-				if (day < 10) {
-					day = '0' + day
-				}
-				if (hour < 10) {
-					hour = '0' + hour
-				}
-				if (minute < 10) {
-					minute = '0' + minute
-				}
-				if (second < 10) {
-					second = '0' + second
-				}
-				this.d = day
-				this.h = hour
-				this.i = minute
-				this.s = second
-			},
-			startData() {
-				this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
-				if (this.seconds <= 0) {
-					return
-				}
-				clearInterval(this.timer)
-				this.countDown()
-				this.timer = setInterval(() => {
-					this.seconds--
-					if (this.seconds < 0) {
-						this.timeUp()
-						return
-					}
-					this.countDown()
-				}, 1000)
-			},
-			changeFlag() {
-				if (!this.syncFlag) {
-					this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
-					this.startData();
-					this.syncFlag = true;
-				}
-			}
-		}
-	}
-</script>
-<style scoped>
-	.uni-countdown {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		justify-content: flex-start;
-		padding: 2rpx 0;
-	}
-
-	.uni-countdown__splitor {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		line-height: 48rpx;
-		padding: 5rpx;
-		font-size: 12px;
-	}
-
-	.uni-countdown__number {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		align-items: center;
-		width: 52rpx;
-		height: 48rpx;
-		line-height: 48rpx;
-		margin: 5rpx;
-		text-align: center;
-		font-size: 12px;
-	}
-</style>