@aochuang/common 1.0.1 → 1.0.126

package/uni-components/message-box/message-box-item.vue

@@ -0,0 +1,54 @@
+<template>
+	<uv-modal 
+		ref="modal"
+		:title="title" 
+		:content="content" 
+		:show-cancel-button="showCancelButton"
+		:show-confirm-button="showConfirmButton"
+		:async-close="asyncClose"
+		@confirm="handleModalConfirm"
+		@cancel="handleModalCancel"
+	></uv-modal>
+</template>
+
+<script>
+export default {
+	name: 'BiMessageBoxItem',
+	props: {
+		title: {
+			type: String
+		},
+		asyncClose: {
+			type: Boolean
+		},
+		showCancelButton: {
+			type: Boolean,
+			default: true
+		},
+		showConfirmButton: {
+			type: Boolean,
+			default: true
+		},
+		content: {
+			type: String
+		}
+	},
+	mounted () {
+		this.$refs.modal && this.$refs.modal.open()
+	},
+	methods: {
+		handleModalConfirm (evt) {
+			this.$emit('confirm', evt)
+		},
+		handleModalCancel (evt) {
+			this.$emit('cancel', evt)
+		},
+		close () {
+			this.$refs.modal && this.$refs.modal.close()
+		}
+	}
+}
+</script>
+
+<style>
+</style>

package/uni-components/message-box/message-box.js

@@ -0,0 +1,91 @@
+import Vue from 'vue'
+import { unique } from '../../utils/string.js'
+
+const proxyData = Vue.observable({
+	data: []
+})
+
+function addMessageBox (id, options) {
+	if (proxyData.data.some(v => v.id === id)) {
+		throw new Error('[UiMessgeBoxProxy]已存在消息框实例')
+	}
+	if (!options.callback) {
+		throw new Error('[UiMessgeBoxProxy] 缺少callback定义')
+	}
+	proxyData.data.push({
+		id,
+		options
+	})
+}
+
+function removeMessageBox (id) {
+	let index = -1
+	proxyData.data.some((v, i) => {
+		if (v.id === id) {
+			index = i
+			return true
+		}
+	})
+	if (index < 0) {
+		return
+	}
+	proxyData.data.splice(index, 1)
+}
+
+export function getMessageBoxQueue () {
+	return proxyData
+}
+
+export function confirm (content, title, confirmCallback, cancelCallback) {
+	return new Promise((resolve, reject) => {
+		if (typeof title === 'function') {
+			cancelCallback = confirmCallback
+			confirmCallback = title
+			title = null
+		}
+		const id = unique()
+		const options = {
+			title: title || '确定',
+			content,
+			showCancelButton: true,
+			showConfirmButton: true,
+			asyncClose: true,
+			callback: (action) => {
+				return new Promise((resolve, reject) => {
+					let rs = null
+					if (action === 'confirm') {
+						if (confirmCallback) {
+							rs = confirmCallback()
+							if (rs && rs.then) {
+								rs.then(resolve, reject)
+							} else {
+								resolve()
+							}
+						} else {
+							resolve()
+						}
+					} else {
+						if (cancelCallback) {
+							rs = cancelCallback()
+							if (rs && rs.then) {
+								rs.then(resolve, reject)
+							} else {
+								resolve()
+							}
+						} else {
+							resolve()
+						}
+					}
+					if (rs && rs.then) {
+						rs.then(() => {
+							removeMessageBox(id)
+						})
+					} else {
+						removeMessageBox(id)
+					}
+				})
+			}
+		}
+		addMessageBox(id, options)
+	})
+}

package/uni-components/message-box/message-box.vue

@@ -0,0 +1,52 @@
+<template>
+	<view class="uv-message-box">
+		<message-box-item 
+			v-for="item in messageBoxQueue.data"
+			:ref="item.id"
+			:key="item.id"
+			:title="item.options.title" 
+			:content="item.options.content" 
+			:show-cancel-button="item.options.showCancelButton"
+			:show-confirm-button="item.options.showConfirmButton"
+			:async-close="item.options.asyncClose"
+			@confirm="handleModalConfirm(item)"
+			@cancel="handleModalCancel(item)"
+		></message-box-item>
+	</view>
+</template>
+
+<script>
+import { getMessageBoxQueue } from './message-box.js'
+import MessageBoxItem from './message-box-item.vue'
+
+export default {
+	name: 'UiMessageBox',
+	components: {
+		MessageBoxItem
+	},
+	computed: {
+		messageBoxQueue () {
+			return getMessageBoxQueue()
+		}
+	},
+	methods: {
+		handleModalConfirm (item) {
+			if (item && item.options && item.options.callback) {
+				item.options.callback('confirm').then(rs => {
+					this.$refs[item.id][0] && this.$refs[item.id][0].close()
+				})
+			}
+		},
+		handleModalCancel (item) {
+			if (item && item.options && item.options.callback) {
+				item.options.callback('cancel').then(rs => {
+					this.$refs[item.id][0] && this.$refs[item.id][0].close()
+				})
+			}
+		}
+	}
+}
+</script>
+
+<style>
+</style>

package/uni-components/picker/picker.vue

@@ -0,0 +1,270 @@
+
+<template>
+	<view class="bi-picker" :class="{'is-border': border}">
+		<view class="bi-picker__handle" :style="{'width': width}" @click="handleHandleClick">
+			<template v-if="$slots.prefix">
+				<view class="bi-picker__handle-prefix">
+					<slot name="prefix"></slot>
+				</view>
+			</template>
+			<template v-if="isEmpty">
+				<view class="bi-picker__handle-placeholder">
+					{{ placeholder }}
+				</view>
+				<view class="bi-picker__handle-arrow"></view>
+			</template>
+			<template v-else>
+				<view class="bi-picker__handle-value">
+					{{ valueItem ? valueItem[textField] : value }}
+				</view>
+				<template v-if="clearable">
+					<view class="bi-picker__handle-clear" @click.stop="handleClearClick"></view>
+				</template>
+				<template v-else>
+					<view class="bi-picker__handle-arrow"></view>
+				</template>
+			</template>
+		</view>
+		<uv-picker
+			ref="picker"
+			:columns="columns"
+			@confirm="handlePickerConfirm"
+			@change="handlePickerChange"
+		></uv-picker>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'BiPicker',
+	props: {
+		value: {
+			type: [String, Number]
+		},
+		width: {
+			type: String
+		},
+		placeholder: {
+			type: String,
+			default: '请选择'
+		},
+		items: {
+			type: Array
+		},
+		border: {
+			type: Boolean
+		},
+		enableEmptyItem: {
+			type: Boolean
+		},
+		clearable: {
+			type: Boolean
+		},
+		textField: {
+			tyep: String,
+			default: 'text'
+		},
+		valueField: {
+			tyep: String,
+			default: 'value'
+		},
+		childrenField: {
+			type: String
+		}
+	},
+	computed: {
+		isEmpty () {
+			if (this.valueItem) {
+				return false
+			}
+			return this.value === null || this.value === undefined || this.value === ''
+		},
+		valueItem () {
+			const loop = (items, context) => {
+				if (!items || !items.length) {
+					return context
+				}
+				items.some(v => {
+					if (v[this.valueField] === this.value) {
+						context.result = v
+						return true
+					} else {
+						if (loop(v[this.childrenField], context).result) {
+							return true
+						}
+					}
+				})
+				return context
+			}
+			return loop(this.items, { result: null }).result
+		},
+		columns () {
+			if (!this.items || !this.items.length) {
+				return
+			}
+			if (this.hasChildren) {
+				const columns = this.items.map(v => v[this.textField])
+				return [
+					this.enableEmptyItem ? ['--请选择--'].concat(columns) : columns,
+					this.enableEmptyItem ? ['--请选择--'] : []
+				]
+			} else {
+				return [
+					[].concat(this.enableEmptyItem ? ['--请选择--'] : []).concat(this.items.map(v => v[this.textField]))
+				]
+			}
+		},
+		hasChildren () {
+			return !!this.childrenField
+		}
+	},
+	methods: {
+		handleClearClick () {
+			this.$emit('input', null)
+		},
+		handlePickerChange (evt) {
+			if (!this.hasChildren) {
+				return
+			}
+			const { columnIndex, index } = evt
+			const realIndex = this.enableEmptyItem ? Math.max(index - 1, 0) : index
+			if (columnIndex === 0) {
+				if (this.items[realIndex][this.childrenField] && this.items[realIndex][this.childrenField].length) {
+					const columns = this.items[realIndex][this.childrenField].map(v => v[this.textField])
+					this.$refs.picker.setColumnValues(1, this.enableEmptyItem ? ['--请选择--'].concat(columns) : columns)
+				} else {
+					this.$refs.picker.setColumnValues(1, this.enableEmptyItem ? ['--请选择--'] : [])
+				}
+			}
+		},
+		handlePickerConfirm ({ indexs }) {
+			if (!indexs || !indexs.length) {
+				this.$emit('input', null)
+			} else {
+				const nextIndexs = this.enableEmptyItem ? indexs.map(index => index - 1) : indexs
+				if (nextIndexs[0] < 0) {
+					this.$emit('input', null)
+				} else {
+					if (nextIndexs.length === 2) {
+						if (nextIndexs[1] < 0) {
+							const item = this.items[nextIndexs[0]]
+							if (item) {
+								this.$emit('input', item[this.valueField])
+							} else {
+								this.$emit('input', null)
+							}
+						} else {
+							const item = this.items[nextIndexs[0]]
+							if (item) {
+								const childItems = item[this.childrenField]
+								if (childItems[nextIndexs[1]]) {
+									this.$emit('input', childItems[nextIndexs[1]][this.valueField])
+								} else {
+									this.$emit('input', null)
+								}
+							} else {
+								this.$emit('input', null)
+							}
+						}
+					} else {
+						
+						const item = this.items[nextIndexs[0]]
+						if (item) {
+							this.$emit('input', item[this.valueField])
+						} else {
+							this.$emit('input', null)
+						}
+					}
+				}
+			}
+		},
+		handleHandleClick () {
+			this.$refs.picker.open()
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.bi-picker{
+	display: inline-block;
+	&.is-border {
+		.bi-picker__handle{
+			border: 1px solid #eee;
+			border-radius: 3px;
+			padding: 0 24px 0 12px;
+		}
+		.bi-picker__handle-clear{
+			margin-top: -3px;
+			right: 12px;
+		}
+	}
+}
+.bi-picker__handle{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	height: 30px;
+	line-height: 30px;
+	padding: 1px 24px 1px 1px;
+	position: relative;
+	box-sizing: border-box;
+}
+.bi-picker__handle-prefix{
+	margin-right: 4px;
+}
+.bi-picker__handle-arrow{
+	width: 18px;
+	height: 18px;
+	position: relative;
+	margin-left: 4px;
+	position: absolute;
+	right: 4px;
+	top: 50%;
+	transform: translateY(-50%);
+	&:after {
+		position: absolute;
+		top: 4px;
+		left: 6px;
+		content: '';
+		width: 5px;
+		height: 5px;
+		border: 1px solid #555;
+		display: inline-block;
+		transform: rotate(45deg);
+		border-left: 0;
+		border-top: 0;
+	}
+}
+.bi-picker__handle-clear{
+	width: 18px;
+	height: 18px;
+	background-color: #eee;
+	position: relative;
+	border-radius: 50%;
+	position: absolute;
+	right: 6px;
+	top: 50%;
+	margin-top: -2px;
+	transform: rotate(45deg) translateY(-50%);
+	&:after, &:before {
+		content: '';
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		background-color: #444;
+	}
+	&:after {
+		width: 10px;
+		height: 1px;
+	}
+	&:before {
+		width: 1px;
+		height: 10px;
+	}
+}
+.bi-picker__handle-placeholder{
+	color: #999;
+}
+</style>

package/uni-components/popup/index.js

@@ -0,0 +1,3 @@
+import Popup from './popup.vue'
+
+export default Popup

package/uni-components/popup/popup.vue

@@ -0,0 +1,143 @@
+<template>
+	<uv-popup 
+		ref="popup" 
+		class="ui-popup" 
+		:class="{'is-opened': opened}"
+		:closeOnClickOverlay="maskable" 
+		:bg-color="bgColor"
+		:mode="mode" 
+		:safe-area-inset-bottom="safeAreaBottom"
+		@change="handleVisibleChange"
+		@maskClick="handleMaskClick"
+	>
+		<template v-if="title">
+			<view class="ui-popup__head">
+				<view class="ui-popup__title">{{ title }}</view>
+				<view class="ui-popup__close" @click="handleCloseClick"></view>
+			</view>
+		</template>
+		<view class="ui-popup__body">
+			<slot></slot>
+		</view>
+	</uv-popup>
+</template>
+
+<script> 
+	export default {
+		name: "UiPopup",
+		props: {
+			value: {
+				type: Boolean
+			},
+			title: {
+				type: String
+			},
+			mode: {
+				type: String,
+				default: 'bottom'
+			},
+			maskable: {
+				type: Boolean,
+				default: true
+			},
+			safeAreaBottom: {
+				type: Boolean,
+				default: true
+			},
+			bgColor: {
+				type: String,
+				default: "#ffffff"
+			}
+		},
+		data () {
+			return {
+				opened: false
+			}
+		},
+		watch: {
+			value () {
+				this.syncVisible()
+			}
+		},
+		created () {
+			this.syncVisible()
+		},
+		methods: {
+			syncVisible () {
+				this.$nextTick(() => {
+					if (this.value) {
+						this.$refs.popup.open()
+					} else {
+						this.$refs.popup.close()
+					}
+				})
+			},
+			handleMaskClick () {
+				this.$emit('mask-click')
+			},
+			handleCloseClick () {
+				this.$emit('input', false)
+			},
+			handleVisibleChange ({ show }) {
+				this.$emit('input', show)
+				if (show) {
+					this.$emit('open')
+					this._openTimer = setTimeout(() => {
+						this.opened = true
+					}, 400)
+				} else {
+					this.opened = false
+					clearTimeout(this._openTimer)
+					this.$emit('close')
+				}
+			}
+		},
+		beforeDestroy () {
+			clearTimeout(this._openTimer)
+		}
+	}
+</script>
+
+<style lang="less">
+.ui-popup { 
+	&.is-opened {
+		::v-deep > uni-view > .uv-overlay + [name=content] {
+			transform: none!important;
+		}
+	}
+}
+.ui-popup__head{
+	height: 32px;
+	line-height: 32px;
+	padding: 4px 12px;
+	border-bottom: 1px solid #f3f3f3;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+}
+.ui-popup__title{
+}
+.ui-popup__close{
+	width: 18px;
+	height: 18px;
+	position: relative;
+	transform: rotate(45deg);
+	&:after,&:before {
+		content: '';
+		position: absolute;
+		background-color: #999;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+	}
+	&:after {
+		width: 14px;
+		height: 1px;
+	}
+	&:before {
+		width: 1px;
+		height: 14px;
+	}
+}
+</style>

package/uni-components/search/index.js

@@ -0,0 +1,3 @@
+import Search from './search.vue'
+
+export default Search

package/uni-components/search/search.vue

@@ -0,0 +1,86 @@
+<template>
+	<uv-search
+		:shape="round ? 'round' : 'square'"
+		:placeholder="placeholder" 
+		:show-action="showAction"
+		:focus="innerFocus"
+		:disabled="disabled"
+		:clearabled="clearable"
+		:action-text="actionText"
+		:value="value"
+		@search="handleSearch"
+		@clear="handleClear"
+		@click="handleClick"
+		@custom="handleCustomClick"
+	></uv-search>
+</template>
+
+<script>
+export default {
+	name: 'BiSearch',
+	props: {
+		value: {
+			type: String
+		},
+		focus: {
+			type: Boolean
+		},
+		round: {
+			type: Boolean,
+			default: true
+		},
+		clearable: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		showAction: {
+			type: Boolean,
+			default: false
+		},
+		actionText: {
+			type: String
+		},
+		placeholder: {
+			type: String,
+			default: '输入搜索关键词'
+		}
+	},
+	data () {
+		return {
+			innerFocus: false
+		}
+	},
+	mounted () {
+		// 加点延时解决真实浏览器里面没有获取焦点问题
+		this._timer = setTimeout(() => {
+			if (this.focus) {
+				this.innerFocus = true
+			}
+		}, 200)
+	},
+	methods: {
+		handleSearch (keyword) {
+			this.$emit('input', keyword)
+		},
+		handleClear () {
+			this.$emit('input', '')
+		},
+		handleClick () {
+			this.$emit('click')
+		},
+		handleCustomClick () {
+			this.$emit('action-click')
+		}
+	},
+	beforeDestroy () {
+		clearTimeout(this._timer)
+	}
+}
+</script>
+
+<style>
+</style>