@aochuang/common 1.0.0 → 1.0.126

package/uni-components/skeleton/skeleton-chat.vue

@@ -0,0 +1,85 @@
+<template>
+	<view class="bi-skeleton-chat">
+		<view 
+			class="bi-skeleton-chat__item"
+			v-for="index in 20"
+			:key="index"
+		>
+			<view class="bi-skeleton-chat__item-avatar">
+				<bi-skeleton width="32px" height="32px"></bi-skeleton>
+			</view>
+			<view class="bi-skeleton-chat__item-main">
+				<view class="bi-skeleton-chat__item-row">
+					<view class="bi-skeleton-chat__item-col">
+						<bi-skeleton></bi-skeleton>
+					</view>
+					<view class="bi-skeleton-chat__item-col" style="width: 80px">
+						<bi-skeleton></bi-skeleton>
+					</view>
+				</view>
+				<view class="bi-skeleton-chat__item-row">
+					<view class="bi-skeleton-chat__item-col">
+						<bi-skeleton width="90%"></bi-skeleton>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import BiSkeleton from './skeleton.vue'
+
+export default {
+	name: 'BiSkeletonChat',
+	components: {
+		BiSkeleton
+	}
+}
+</script>
+
+<style lang="less">
+.bi-skeleton-chat{
+	height: 100%;
+	overflow: hidden;
+	position: relative;
+	padding: 20px;
+	&:after {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		top: 0;
+		z-index: 100;
+		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+83,1+100 */
+		background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 83%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	}
+}
+.bi-skeleton-chat__item{
+	display: flex;
+	flex-direction: row;
+	margin-bottom: 18px;
+}
+.bi-skeleton-chat__item-main {
+	flex: 1;
+	min-width: 0;
+	margin-left: 12px;
+}
+.bi-skeleton-chat__item-row{
+	display: flex;
+	flex-direction: row;
+	&:not(:last-child) {
+		margin-bottom: 12px;
+	}
+}
+.bi-skeleton-chat__item-col{
+	&:first-child {
+		flex: 1;
+		min-width: 0;
+	}
+	&:not(:first-child) {
+		margin-left: 12px;
+	}
+}
+</style>

package/uni-components/skeleton/skeleton-contact.vue

@@ -0,0 +1,84 @@
+<template>
+	<view class="bi-skeleton-contact">
+		<view 
+			class="bi-skeleton-contact__item"
+			v-for="index in 20"
+			:key="index"
+		>
+			<view class="bi-skeleton-contact__item-avatar">
+				<bi-skeleton width="32px" height="32px"></bi-skeleton>
+			</view>
+			<view class="bi-skeleton-contact__item-main">
+				<view class="bi-skeleton-contact__item-row">
+					<view class="bi-skeleton-contact__item-col">
+						<bi-skeleton></bi-skeleton>
+					</view>
+					<view class="bi-skeleton-contact__item-col" style="width: 80px">
+						<bi-skeleton></bi-skeleton>
+					</view>
+				</view>
+				<view class="bi-skeleton-contact__item-row">
+					<view class="bi-skeleton-contact__item-col">
+						<bi-skeleton width="90%"></bi-skeleton>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import BiSkeleton from './skeleton.vue'
+
+export default {
+	name: 'BiSkeletonContact',
+	components: {
+		BiSkeleton
+	}
+}
+</script>
+
+<style lang="less">
+.bi-skeleton-contact{
+	height: 100%;
+	overflow: hidden;
+	position: relative;
+	&:after {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		top: 0;
+		z-index: 100;
+		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+83,1+100 */
+		background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 83%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	}
+}
+.bi-skeleton-contact__item{
+	display: flex;
+	flex-direction: row;
+	margin-bottom: 18px;
+}
+.bi-skeleton-contact__item-main {
+	flex: 1;
+	min-width: 0;
+	margin-left: 12px;
+}
+.bi-skeleton-contact__item-row{
+	display: flex;
+	flex-direction: row;
+	&:not(:last-child) {
+		margin-bottom: 12px;
+	}
+}
+.bi-skeleton-contact__item-col{
+	&:first-child {
+		flex: 1;
+		min-width: 0;
+	}
+	&:not(:first-child) {
+		margin-left: 12px;
+	}
+}
+</style>

package/uni-components/skeleton/skeleton-detail.vue

@@ -0,0 +1,84 @@
+<template>
+	<view class="bi-skeleton-detail">
+		<view 
+			class="bi-skeleton-detail__item"
+			v-for="index in 20"
+			:key="index"
+		>
+			<view class="bi-skeleton-detail__item-avatar">
+				<bi-skeleton width="32px" height="32px"></bi-skeleton>
+			</view>
+			<view class="bi-skeleton-detail__item-main">
+				<view class="bi-skeleton-detail__item-row">
+					<view class="bi-skeleton-detail__item-col">
+						<bi-skeleton></bi-skeleton>
+					</view>
+					<view class="bi-skeleton-detail__item-col" style="width: 80px">
+						<bi-skeleton></bi-skeleton>
+					</view>
+				</view>
+				<view class="bi-skeleton-detail__item-row">
+					<view class="bi-skeleton-detail__item-col">
+						<bi-skeleton width="90%"></bi-skeleton>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import BiSkeleton from './skeleton.vue'
+
+export default {
+	name: 'BiSkeletonDetail',
+	components: {
+		BiSkeleton
+	}
+}
+</script>
+
+<style lang="less">
+.bi-skeleton-detail{
+	height: 100%;
+	overflow: hidden;
+	position: relative;
+	&:after {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		top: 0;
+		z-index: 100;
+		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+83,1+100 */
+		background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 83%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	}
+}
+.bi-skeleton-detail__item{
+	display: flex;
+	flex-direction: row;
+	margin-bottom: 18px;
+}
+.bi-skeleton-detail__item-main {
+	flex: 1;
+	min-width: 0;
+	margin-left: 12px;
+}
+.bi-skeleton-detail__item-row{
+	display: flex;
+	flex-direction: row;
+	&:not(:last-child) {
+		margin-bottom: 12px;
+	}
+}
+.bi-skeleton-detail__item-col{
+	&:first-child {
+		flex: 1;
+		min-width: 0;
+	}
+	&:not(:first-child) {
+		margin-left: 12px;
+	}
+}
+</style>

package/uni-components/skeleton/skeleton.vue

@@ -0,0 +1,32 @@
+<template>
+	<uv-skeletons :animate="true" :loading="true" :skeleton="skeleton"></uv-skeletons>
+</template>
+
+<script>
+export default {
+	name: 'BiSkeleton',
+	props: {
+		width: {
+			type: String,
+			default: '100%'
+		},
+		height: {
+			type: String,
+			default: '20px'
+		},
+		radius: {
+			type: String,
+			default: '3px'
+		}
+	},
+	computed: {
+		skeleton () {
+			return [{
+				type: 'custom',
+				num: 1,
+				style: `width: ${this.width};height:${this.height};border-radius:${this.radius}`
+			}]
+		}
+	}
+}
+</script>

package/uni-components/tabbar/tabbar-item.vue

@@ -0,0 +1,33 @@
+<template>
+	<view></view>
+</template>
+
+<script>
+import { unique } from '../../utils/string.js'
+
+export default {
+	name: 'UiTabbarItem',
+	inject: ['UiTabbar'],
+	props: {
+		name: { 
+			type: String
+		},
+		text: {
+			type: String
+		}
+	},
+	created () {
+		this.id = unique()
+		this.UiTabbar.addItem({
+			id: this.id,
+			props: this.$props
+		})
+	},
+	beforeDestroy () {
+		this.UiTabbar.removeItem(this.id)
+	}
+}
+</script>
+
+<style>
+</style>

package/uni-components/tabbar/tabbar.vue

@@ -0,0 +1,87 @@
+<template>
+	<view class="ui-tabbar">
+		<uv-tabs
+			:current="currentIndex"
+			:list="tabItems"
+			@click="handleItemClick"
+		>
+		</uv-tabs>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'UiTabbar',
+	provide () {
+		return {
+			UiTabbar: this
+		}
+	},
+	props: {
+		value: {
+			type: [String, Number]
+		}
+	},
+	data () {
+		return {
+			items: []
+		}
+	},
+	computed: {
+		tabItems () {
+			return this.items.map(v => {
+				return {
+					name: v.props.text
+				}
+			})
+		},
+		currentIndex () {
+			let index
+			this.items.some((v, i) => {
+				if (v.props.name === this.value) {
+					index = i
+					return true
+				}
+			})
+			return index
+		}
+	},
+	methods: {
+		handleItemClick ({ index }) {
+			const item = this.items[index]
+			this.$emit('input', item ? item.props.name : null)
+		},
+		addItem (data) {
+			if (!data || !data.id) {
+				throw new Error('缺少必须参数')
+			}
+			if (this.items.some(v => v.id === data.id)) {
+				return
+			}
+			this.items.push(data)
+		},
+		removeItem (id) {
+			let index = -1
+			this.items.some((v, i) => {
+				if (v.id === id) {
+					index = i
+					return true
+				}
+			})
+			if (index < 0) {
+				return
+			}
+			this.items.splice(index, 1)
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.ui-tabbar {
+	/deep/ .uv-tabs__wrapper__nav__item__text{
+		font-size: 14px;
+	}
+}
+</style>

package/uni-components/tree/index.js

@@ -0,0 +1,3 @@
+import TreeSelect from './tree-select'
+
+export default TreeSelect

package/uni-components/tree/tree-select-loading.vue

@@ -0,0 +1,48 @@
+<template>
+    <view class="tree-select-loading"></view>
+</template>
+<script>
+export default {
+    name: 'TreeSelectLoading'
+}
+</script>
+<style>
+.tree-select-loading{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(255, 255, 255, .7);
+}
+.tree-select-loading:after{
+    content: '';
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    border: 4px solid #218bf2;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    -webkit-animation: ball-clip-rotate 0.75s linear infinite;
+    -moz-animation: ball-clip-rotate 0.75s linear infinite;
+    -o-animation: ball-clip-rotate 0.75s linear infinite;
+    animation: ball-clip-rotate 0.75s linear infinite
+}
+@-webkit-keyframes ball-clip-rotate {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg)
+    }
+
+    50% {
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg)
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg)
+    }
+}
+</style>

package/uni-components/tree/tree-select-node.vue

@@ -0,0 +1,202 @@
+<template>
+    <view 
+        class="tree-select-node" 
+        :class="{
+            'is-disabled-toggle': disableToggle,
+            'is-expanded': expanded,
+            'is-collapse': collapse,
+            'is-selected': selected
+        }" 
+        :style="style"
+        @click="handleClick"
+        @dblclick="handleDblClick"
+    >
+        <view class="tree-select-node__indent">
+            <span 
+                class="tree-select-node__indent-item"
+                v-for="index in indentNum"
+                :key="index"
+            ></span>
+        </view>
+		<template v-if="loading">
+			<view class="tree-select-node__loading">
+				<ui-loading size="mini"></ui-loading>
+			</view>
+		</template>
+		<template v-else>
+			<view 
+			    class="tree-select-node__toggle" 
+			    @click.stop="handleToggleClick"
+			></view>
+		</template>
+        <slot :node="node">
+            <view class="tree-select-node__label">{{node.data[labelKey]}}</view>
+        </slot>
+        <view class="tree-select-node__addon" v-if="$scopedSlots.addon" @click.stop>
+            <slot name="addon" :node="node"></slot>
+        </view>
+    </view>
+</template>
+<script>
+import UiLoading from '@aochuang/common/uni-components/loading/loading.vue'
+
+export default {
+    name: 'TreeSelectNode',
+	inject: ['TreeSelect'],
+	components: {
+		UiLoading
+	},
+    props: {
+        node: {
+            type: Object,
+            required: true
+        },
+		lazyLoad: {
+			type: Boolean
+		},
+        itemHeight: {
+            type: Number,
+            default: 24
+        },
+        labelKey: {
+            type: String,
+            default: 'label'
+        },
+        selected: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        style () {
+            const sy = {}
+            if (this.itemHeight) {
+                sy.height = this.itemHeight + 'px'
+            }
+            return sy
+        },
+		loading () {
+			return this.node.loading
+		},
+        indentNum () {
+            return this.node.level - 1
+        },
+        expanded () {
+           return this.node.expanded 
+        },
+        collapse () {
+           return !this.node.expanded 
+        },
+        disableToggle () {
+			// 开启了懒加载，并且没有被加载过
+			if (this.lazyLoad && !this.node.loaded) {
+				if (this.node.isLeaf) {
+					return true
+				}
+				return false
+			}
+            return !this.node.children || !this.node.children.filter(v => !v.removed).length
+        }
+    },
+    methods: {
+        handleToggleClick () {
+            if (this.expanded) {
+                this.$emit('collapse', {
+                    node: this.node
+                })
+            } else {
+				if (this.lazyLoad && !this.node.loaded) {
+					this.TreeSelect.store.loadNodeChildren(this.node)
+				} 
+				this.$emit('expand', {
+					node: this.node
+				})
+            }
+        },
+        handleClick () {
+            this.$emit('click', {
+                node: this.node
+            })
+        },
+        handleDblClick () {
+            this.$emit('dblclick', {
+                node: this.node
+            })
+        }
+    }
+}
+</script>
+<style>
+.tree-select-node{
+    display: flex;
+    flex-direction: row;
+    transition: all .25s;
+    cursor: pointer;
+    padding: 0 6px;
+    align-items: center;
+}
+.tree-select-node:hover {
+    background-color: #f3f3f3;
+}
+.tree-select-node.is-selected {
+    background-color: #f1f8ff;
+	color: #3c9cff;
+}
+.tree-select-node.is-disabled-toggle .tree-select-node__toggle{
+    opacity: 0;
+    cursor: initial;
+}
+.tree-select-node.is-expanded .tree-select-node__toggle:after {
+    transform: rotate(90deg);
+}
+.tree-select-node.is-collapse .tree-select-node__toggle:after {
+    transform: rotate(0deg);
+}
+.tree-select-node__indent{
+    display: inline-block;
+}
+.tree-select-node__indent-item{
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+}
+.tree-select-node__loading {
+    height: 20px;
+    width: 20px;
+    margin-right: 3px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+.tree-select-node__toggle{
+    display: inline-block;
+    height: 20px;
+    width: 20px;
+    text-align: center;
+    border-radius: 3px;
+    cursor: pointer;
+    margin-right: 3px;
+	vertical-align: top;
+}
+.tree-select-node__toggle:after {
+    content: '';
+    display: inline-block;
+    border: 5px solid #999;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    border-right: 0;
+    vertical-align: top;
+    margin-top: 5px;
+}
+.tree-select-node__toggle:hover {
+    background-color: rgba(0,0,0,.1);
+}
+.tree-select-node__label{
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+</style>