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

package/ui-cv/cv-data-indexed-list/uni-data-indexed-list-item.vue

@@ -1,142 +0,0 @@
-<template>
-	<view>
-		<view v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper">
-			<text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.title }}</text>
-		</view>
-		<view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0" class="uni-indexed-list__list">
-			<view v-for="(item, index) in list.items" :key="index" class="uni-indexed-list__item" hover-class="uni-indexed-list__item--hover">
-				<view class="uni-indexed-list__item-container" @click="onClick(idx, index)">
-					<view class="uni-indexed-list__item-border" :class="{'uni-indexed-list__item-border--last':index===list.items.length-1}">
-						<view v-if="showSelect" style="margin-right: 20rpx;">
-							<uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" :color="item.checked ? '#007aff' : '#aaa'" size="24" />
-						</view>
-						<text class="uni-indexed-list__item-content">{{ item.text }}</text>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import uniIcons from '../uni-icons/uni-icons.vue'
-	export default {
-		name: 'UniIndexedList',
-		components: {
-			uniIcons
-		},
-		props: {
-			loaded: {
-				type: Boolean,
-				default: false
-			},
-			idx: {
-				type: Number,
-				default: 0
-			},
-			list: {
-				type: Object,
-				default () {
-					return {}
-				}
-			},
-			showSelect: {
-				type: Boolean,
-				default: false
-			}
-		},
-		methods: {
-			onClick(idx, index) {
-				this.$emit("itemClick", {
-					idx,
-					index
-				})
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	.uni-indexed-list__list {
-		background-color: #ffffff;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		border-top-style: solid;
-		border-top-width: 1px;
-		border-top-color: #e5e5e5;
-	}
-
-	.uni-indexed-list__item {
-		font-size: 16px;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.uni-indexed-list__item-container {
-		padding-left: 15px;
-		flex: 1;
-		position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		box-sizing: border-box;
-		/* #endif */
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.uni-indexed-list__item-border {
-		flex: 1;
-		position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		box-sizing: border-box;
-		/* #endif */
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-		height: 50px;
-		padding: 15px;
-		padding-left: 0;
-		border-bottom-style: solid;
-		border-bottom-width: 1px;
-		border-bottom-color: #e5e5e5;
-	}
-
-	.uni-indexed-list__item-border--last {
-		border-bottom-width: 0px;
-	}
-
-	.uni-indexed-list__item-content {
-		flex: 1;
-		font-size: 14px;
-	}
-
-	.uni-indexed-list {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-	}
-
-	.uni-indexed-list__title-wrapper {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		width: 100%;
-		/* #endif */
-		background-color: #f7f7f7;
-	}
-
-	.uni-indexed-list__title {
-		padding: 6px 12px;
-		line-height: 24px;
-		font-size: 12px;
-	}
-</style>

package/ui-cv/cv-data-indexed-list/uni-data-indexed-list.vue

@@ -1,364 +0,0 @@
-<template>
-	<view class="uni-indexed-list" ref="list" id="list">
-		<!-- #ifdef APP-NVUE -->
-		<list class="uni-indexed-list__scroll" scrollable="true" show-scrollbar="false">
-			<cell v-for="(list, idx) in lists" :key="idx" :ref="'uni-indexed-list-' + idx">
-				<!-- #endif -->
-				<!-- #ifndef APP-NVUE -->
-				<scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y>
-					<view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx">
-						<!-- #endif -->
-						<uni-indexed-list-item :list="list" :loaded="loaded" :idx="idx" :showSelect="showSelect" @itemClick="onClick"></uni-indexed-list-item>
-						<!-- #ifndef APP-NVUE -->
-					</view>
-				</scroll-view>
-				<!-- #endif -->
-				<!-- #ifdef APP-NVUE -->
-			</cell>
-		</list>
-		<!-- #endif -->
-		<view :class="touchmove ? 'uni-indexed-list__menu--active' : ''" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend="touchEnd" class="uni-indexed-list__menu">
-			<view v-for="(list, key) in lists" :key="key" class="uni-indexed-list__menu-item">
-				<text class="uni-indexed-list__menu-text" :class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''">{{ list.value }}</text>
-			</view>
-		</view>
-		<view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
-			<text class="uni-indexed-list__alert">{{ lists[touchmoveIndex] }}</text>
-		</view>
-	</view>
-</template>
-<script>
-	import uniIcons from '../uni-icons/uni-icons.vue'
-	import uniIndexedListItem from './uni-data-indexed-list-item.vue'
-	import clientdb from './clientdb.js'
-	// #ifdef APP-NVUE
-	const dom = weex.requireModule('dom');
-	// #endif
-	// #ifdef APP-PLUS
-	function throttle(func, delay) {
-		var prev = Date.now();
-		return function() {
-			var context = this;
-			var args = arguments;
-			var now = Date.now();
-			if (now - prev >= delay) {
-				func.apply(context, args);
-				prev = Date.now();
-			}
-		}
-	}
-
-	function touchMove(e) {
-		let pageY = e.touches[0].pageY
-		let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
-		if (this.touchmoveIndex === index) {
-			return false
-		}
-		let item = this.lists[index]
-		if (item) {
-			// #ifndef APP-NVUE
-			this.scrollViewId = 'uni-indexed-list-' + index
-			this.touchmoveIndex = index
-			// #endif
-			// #ifdef APP-NVUE
-			dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
-				animated: false
-			})
-			this.touchmoveIndex = index
-			// #endif
-		}
-	}
-	const throttleTouchMove = throttle(touchMove, 40)
-	// #endif
-
-	/**
-	 * IndexedList 索引列表
-	 * @description 用于展示索引列表
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=375
-	 * @property {Boolean} showSelect = [true|false] 展示模式
-	 * 	@value true 展示模式
-	 * 	@value false 选择模式
-	 * @property {Object} options 索引列表需要的数据对象
-	 * @property {String|DBCollectionString} collection 表名
-	 * @property {String|ClientDBActionString} action 云端执行数据库查询的前或后，触发某个action函数操作，进行预处理或后处理
-	 * @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
-	 * @property {String} orderby 排序字段及正序倒叙设置
-	 * @property {String|JQLString} where 查询条件
-	 * @event {Function} click 点击列表事件 ，返回当前选择项的事件对象
-	 * @example <uni-indexed-list options="" showSelect="false" @click=""></uni-indexed-list>
-	 */
-	export default {
-		name: 'UniDataIndexedList',
-		mixins: [clientdb],
-		components: {
-			uniIcons,
-			uniIndexedListItem
-		},
-		props: {
-			options: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			localdata: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			showSelect: {
-				type: Boolean,
-				default: false
-			}
-		},
-		data() {
-			return {
-				lists: [],
-				winHeight: 0,
-				itemHeight: 0,
-				winOffsetY: 0,
-				touchmove: false,
-				touchmoveIndex: -1,
-				scrollViewId: '',
-				touchmoveTimeout: '',
-				loaded: false
-			}
-		},
-		watch: {
-			options: {
-				handler: function() {
-					this.setList()
-				},
-				deep: true
-			}
-		},
-		mounted() {
-			if (this.localdata.length || this.options.length) {
-				setTimeout(() => {
-					this.setList()
-				}, 50)
-				setTimeout(() => {
-					this.loaded = true
-				}, 300);
-			} else if (this.collection) {
-				if (!this.manual) {
-					this._execLoadData((data) => {
-						this.lists = this.groupData(data);
-					})
-				}
-			}
-		},
-		methods: {
-			groupData(data) {
-				let groups = {};
-				for (let i = 0; i < data.length; i++) {
-					let item = data[i];
-					let group = item.group;
-					if (!groups[group]) {
-						groups[group] = {
-							"title": group,
-							"value": group,
-							"itemIndex": i,
-							"items": []
-						}
-					}
-					groups[group].items.push(item);
-				}
-				let result = []
-				for (let g in groups) {
-					let group = groups[g];
-					let items = group.items;
-					for (let j = 0; j < items.length; j++) {
-						items[j].itemIndex = j;
-					}
-					result.push(group);
-				}
-				return result;
-			},
-			setList(data) {
-				let index = 0;
-				this.lists = []
-				this.options.forEach((value, index) => {
-					if (value.data.length === 0) {
-						return
-					}
-					let indexBefore = index
-					let items = value.data.map(item => {
-						let obj = {}
-						obj['value'] = value.letter
-						obj['text'] = item
-						obj['itemIndex'] = index
-						index++
-						obj.checked = item.checked ? item.checked : false
-						return obj
-					})
-					this.lists.push({
-						title: value.letter,
-						value: value.letter,
-						items: items,
-						itemIndex: indexBefore
-					})
-				})
-				// #ifndef APP-NVUE
-				uni.createSelectorQuery()
-					.in(this)
-					.select('#list')
-					.boundingClientRect()
-					.exec(ret => {
-						this.winOffsetY = ret[0].top
-						this.winHeight = ret[0].height
-						this.itemHeight = this.winHeight / this.lists.length
-					})
-				// #endif
-				// #ifdef APP-NVUE
-				dom.getComponentRect(this.$refs['list'], (res) => {
-					this.winOffsetY = res.size.top
-					this.winHeight = res.size.height
-					this.itemHeight = this.winHeight / this.lists.length
-				})
-				// #endif
-			},
-			touchStart(e) {
-				this.touchmove = true
-				let pageY = e.touches[0].pageY
-				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
-				let item = this.lists[index]
-				if (item) {
-					this.scrollViewId = 'uni-indexed-list-' + index
-					this.touchmoveIndex = index
-					// #ifdef APP-NVUE
-					dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
-						animated: false
-					})
-					// #endif
-				}
-			},
-			touchMove(e) {
-				// #ifndef APP-PLUS
-				let pageY = e.touches[0].pageY
-				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
-				if (this.touchmoveIndex === index) {
-					return false
-				}
-				let item = this.lists[index]
-				if (item) {
-					this.scrollViewId = 'uni-indexed-list-' + index
-					this.touchmoveIndex = index
-				}
-				// #endif
-				// #ifdef APP-PLUS
-				throttleTouchMove.call(this, e)
-				// #endif
-			},
-			touchEnd() {
-				this.touchmove = false
-				this.touchmoveIndex = -1
-			},
-			onClick(e) {
-				let {
-					idx,
-					index
-				} = e
-				let obj = {}
-				for (let key in this.lists[idx].items[index]) {
-					obj[key] = this.lists[idx].items[index][key]
-				}
-				let select = []
-				if (this.showSelect) {
-					this.lists[idx].items[index].checked = !this.lists[idx].items[index].checked
-					this.lists.forEach((value, idx) => {
-						value.items.forEach((item, index) => {
-							if (item.checked) {
-								let obj = {}
-								for (let key in this.lists[idx].items[index]) {
-									obj[key] = this.lists[idx].items[index][key]
-								}
-								select.push(obj)
-							}
-						})
-					})
-				}
-				this.$emit('click', {
-					item: obj,
-					select: select
-				})
-			}
-		}
-	}
-</script>
-<style scoped>
-	.uni-indexed-list {
-		position: absolute;
-		left: 0;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-	}
-
-	.uni-indexed-list__scroll {
-		flex: 1;
-	}
-
-	.uni-indexed-list__menu {
-		width: 24px;
-		background-color: lightgrey;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-	}
-
-	.uni-indexed-list__menu-item {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.uni-indexed-list__menu-text {
-		line-height: 20px;
-		font-size: 12px;
-		text-align: center;
-		color: #aaa;
-	}
-
-	.uni-indexed-list__menu--active {
-		background-color: #c8c8c8;
-	}
-
-	.uni-indexed-list__menu-text--active {
-		color: #007aff;
-	}
-
-	.uni-indexed-list__alert-wrapper {
-		position: absolute;
-		left: 0;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.uni-indexed-list__alert {
-		width: 80px;
-		height: 80px;
-		border-radius: 80px;
-		text-align: center;
-		line-height: 80px;
-		font-size: 35px;
-		color: #fff;
-		background-color: rgba(0, 0, 0, 0.5);
-	}
-</style>