sh-view 1.7.5 → 2.0.0

package/packages/components/other-components/sh-menu-card/index.vue

@@ -1,224 +1,224 @@
-<template>
-	<Row :gutter="10">
-		<template v-for="(menuitem, menuindex) in resetRenderList(list)" :key="menuindex">
-			<Col v-bind="colsConfig">
-				<sh-card :icon="menuitem.icon" size="small" :title="menuitem.meta.title" :icon-size="18" :color="getMenuColor(menuindex)" :padding="8" class="menuCard">
-					<div :ref="`cardBtnsWrap${menuindex}`" class="cardBtnsWrap">
-						<template v-for="cardBtn in menuitem.buttons" :key="cardBtn.value">
-							<template v-if="menuitem.children && menuitem.children.length > 0">
-								<Poptip
-									v-model="cardBtn.visible"
-									transfer
-									:title="cardBtn.name"
-									:width="poptipWidth"
-									:placement="cardBtn.placement"
-									@on-popper-show="handleFocusBtn(cardBtn, menuindex)"
-									@on-popper-hide="handleBlurBtn(cardBtn, menuindex)">
-									<div class="cardBtn" :style="getCardStyle(menuindex, cardActive === cardBtn.value + menuindex)" @click="handleCardBtn($event, cardBtn, menuitem, menuindex)">
-										<sh-icon :type="cardBtn.icon" :size="16" class="mr-2" :color="getMenuColor(menuindex, cardActive === cardBtn.value + menuindex)" />
-										<span>{{ cardBtn.name }}</span>
-										<sh-corner v-if="getBudgeNum(menuitem, cardBtn)" v-bind="btnCornerConfig(cardBtn, menuitem, menuindex)"></sh-corner>
-									</div>
-									<template #content>
-										<div class="cardPoptipContent">
-											<menuBox v-if="cardActive.startsWith('menus')" :menu="menuitem" first></menuBox>
-											<sh-empty v-else></sh-empty>
-										</div>
-									</template>
-								</Poptip>
-							</template>
-							<template v-else>
-								<div class="cardBtn" :style="getCardStyle(menuindex, cardActive === cardBtn.value + menuindex)" @click="handleCardBtn($event, cardBtn, menuitem, menuindex)">
-									<sh-icon :type="cardBtn.icon" :size="16" class="mr-2" :color="getMenuColor(menuindex, cardActive === cardBtn.value + menuindex)" />
-									<span>{{ cardBtn.name }}</span>
-									<sh-corner v-if="getBudgeNum(menuitem, cardBtn)" v-bind="btnCornerConfig(cardBtn, menuitem, menuindex)"></sh-corner>
-								</div>
-							</template>
-						</template>
-					</div>
-				</sh-card>
-			</Col>
-		</template>
-	</Row>
-</template>
-
-<script>
-import menuBox from './menu-box.vue'
-export default {
-	name: 'MenuCard',
-	components: {
-		menuBox
-	},
-	props: {
-		list: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		menuColors: {
-			type: Array,
-			default() {
-				return [
-					{ default: '#e7f1ff', active: '#1890ff' },
-					{ default: '#FFEFEB', active: '#FF652E' },
-					{ default: '#F4F1FF', active: '#997BFF' },
-					{ default: '#E6F6F2', active: '#01A883' },
-					{ default: '#FFF6E8', active: '#FFA522' },
-					{ default: '#ffe5e5', active: '#e62340' },
-					{ default: '#dbffff', active: '#13C2C2' },
-					{ default: '#e2f1ff', active: '#003366' },
-					{ default: '#e6cdff', active: '#722ED1' },
-					{ default: '#ffccd6', active: '#ff5d7a' }
-				]
-			}
-		},
-		cardBtns: {
-			type: Array,
-			default() {
-				return [
-					{ name: '功能菜单', value: 'menus', icon: 'ios-apps' },
-					{ name: '操作指南', value: 'guides', icon: 'ios-navigate', placement: 'bottom-end' },
-					{ name: '待办事项', value: 'todo', icon: 'md-calendar' },
-					{ name: '已办事项', value: 'untodo', icon: 'ios-calendar', placement: 'bottom-end' }
-				]
-			}
-		}
-	},
-	data() {
-		return {
-			poptipWidth: 320,
-			cardActive: ''
-		}
-	},
-	computed: {
-		colsConfig() {
-			return {
-				xs: { span: 24 },
-				sm: { span: 24 },
-				md: { span: 12 },
-				lg: { span: 8 },
-				xl: { span: 8 },
-				xxl: { span: 6 }
-			}
-		}
-	},
-	methods: {
-		// 重新生成卡片列表
-		resetRenderList(list) {
-			return this.$vUtils.mapTree(list, item => {
-				return {
-					buttons: this.cardBtns.map(btn => {
-						return {
-							visible: false,
-							placement: 'bottom-start',
-							...btn
-						}
-					}),
-					...item
-				}
-			})
-		},
-		// 动态角标配置
-		btnCornerConfig(cardBtn, menuitem, menuindex) {
-			return {
-				title: this.getBudgeNum(menuitem, cardBtn),
-				dark: true,
-				width: '30',
-				height: '30',
-				color: this.getMenuColor(menuindex)
-			}
-		},
-		getMenuColor(menuindex, active) {
-			return this.getCardStyle(menuindex, true)[active ? 'color' : 'backgroundColor']
-		},
-		getCardStyle(index, active) {
-			let themeLength = this.menuColors.length
-			let backgroundColor = this.menuColors[index % themeLength][active ? 'active' : 'default']
-			let color = active ? '#fff' : ''
-			return { backgroundColor, color }
-		},
-		getBudgeNum(menu, card) {
-			switch (card.value) {
-				case 'menus':
-					return this.$vUtils.toTreeArray(menu.children || []).length
-				default:
-					return ''
-			}
-		},
-		handleCardBtn($event, cardBtn, menu, menuIndex) {
-			if (!menu.children || menu.children.length < 1) {
-				cardBtn.visible = false
-				return this.routerTo(menu)
-			}
-			let windowWidth = window.document.body.clientWidth
-			let selfOffsetRight = windowWidth - $event.pageX
-			cardBtn.placement = selfOffsetRight < this.poptipWidth ? 'bottom-end' : 'bottom-start'
-			cardBtn.visible = true
-		},
-		handleFocusBtn(card, index) {
-			this.cardActive = card.value + index
-		},
-		handleBlurBtn(card, index) {
-			if (this.cardActive === card.value + index) this.cardActive = ''
-		}
-	}
-}
-</script>
-
-<style lang="scss">
-.menuCard {
-	margin-bottom: 10px;
-}
-.cardPoptipContent {
-	max-height: 400px;
-	overflow: auto;
-}
-.cardBtnsWrap {
-	position: relative;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	flex-wrap: wrap;
-	> div {
-		width: 47%;
-		display: inline-flex;
-		align-items: center;
-		margin: 1.5%;
-		> .ivu-poptip-rel,
-		> .ivu-tooltip-rel,
-		> .ivu-dropdown-rel {
-			width: 100%;
-			display: block;
-		}
-	}
-	.cardBtn {
-		display: flex;
-		align-items: center;
-		background-color: #eee;
-		font-size: 1.1em;
-		padding: 10px;
-		box-sizing: border-box;
-		cursor: pointer;
-		position: relative;
-		&:hover {
-			opacity: 0.8;
-		}
-	}
-}
-.menuBoxWrap {
-	padding-left: 2em;
-	position: relative;
-	&.first {
-		padding-left: 0;
-	}
-	.menuBoxFilter {
-		margin-bottom: 5px;
-	}
-	.menuBoxTitle {
-		display: block;
-		padding: 5px 0;
-		cursor: pointer;
-	}
-}
-</style>
+<template>
+	<sh-row :gutter="10">
+		<template v-for="(menuitem, menuindex) in resetRenderList(list)" :key="menuindex">
+			<sh-col v-bind="colsConfig">
+				<sh-card :icon="menuitem.icon" size="small" :title="menuitem.meta.title" :icon-size="18" :color="getMenuColor(menuindex)" :padding="8" class="menuCard">
+					<div :ref="`cardBtnsWrap${menuindex}`" class="cardBtnsWrap">
+						<template v-for="cardBtn in menuitem.buttons" :key="cardBtn.value">
+							<template v-if="menuitem.children && menuitem.children.length > 0">
+								<sh-poptip
+									v-model="cardBtn.visible"
+									transfer
+									:title="cardBtn.name"
+									:width="poptipWidth"
+									:placement="cardBtn.placement"
+									@on-popper-show="handleFocusBtn(cardBtn, menuindex)"
+									@on-popper-hide="handleBlurBtn(cardBtn, menuindex)">
+									<div class="cardBtn" :style="getCardStyle(menuindex, cardActive === cardBtn.value + menuindex)" @click="handleCardBtn($event, cardBtn, menuitem, menuindex)">
+										<sh-icon :type="cardBtn.icon" :size="16" class="mr-2" :color="getMenuColor(menuindex, cardActive === cardBtn.value + menuindex)" />
+										<span>{{ cardBtn.name }}</span>
+										<sh-corner v-if="getBudgeNum(menuitem, cardBtn)" v-bind="btnCornerConfig(cardBtn, menuitem, menuindex)"></sh-corner>
+									</div>
+									<template #content>
+										<div class="cardPoptipContent">
+											<menuBox v-if="cardActive.startsWith('menus')" :menu="menuitem" first></menuBox>
+											<sh-empty v-else></sh-empty>
+										</div>
+									</template>
+								</sh-poptip>
+							</template>
+							<template v-else>
+								<div class="cardBtn" :style="getCardStyle(menuindex, cardActive === cardBtn.value + menuindex)" @click="handleCardBtn($event, cardBtn, menuitem, menuindex)">
+									<sh-icon :type="cardBtn.icon" :size="16" class="mr-2" :color="getMenuColor(menuindex, cardActive === cardBtn.value + menuindex)" />
+									<span>{{ cardBtn.name }}</span>
+									<sh-corner v-if="getBudgeNum(menuitem, cardBtn)" v-bind="btnCornerConfig(cardBtn, menuitem, menuindex)"></sh-corner>
+								</div>
+							</template>
+						</template>
+					</div>
+				</sh-card>
+			</sh-col>
+		</template>
+	</sh-row>
+</template>
+
+<script>
+import menuBox from './menu-box.vue'
+export default {
+	name: 'MenuCard',
+	components: {
+		menuBox
+	},
+	props: {
+		list: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		menuColors: {
+			type: Array,
+			default() {
+				return [
+					{ default: '#e7f1ff', active: '#1890ff' },
+					{ default: '#FFEFEB', active: '#FF652E' },
+					{ default: '#F4F1FF', active: '#997BFF' },
+					{ default: '#E6F6F2', active: '#01A883' },
+					{ default: '#FFF6E8', active: '#FFA522' },
+					{ default: '#ffe5e5', active: '#e62340' },
+					{ default: '#dbffff', active: '#13C2C2' },
+					{ default: '#e2f1ff', active: '#003366' },
+					{ default: '#e6cdff', active: '#722ED1' },
+					{ default: '#ffccd6', active: '#ff5d7a' }
+				]
+			}
+		},
+		cardBtns: {
+			type: Array,
+			default() {
+				return [
+					{ name: '功能菜单', value: 'menus', icon: 'ios-apps' },
+					{ name: '操作指南', value: 'guides', icon: 'ios-navigate', placement: 'bottom-end' },
+					{ name: '待办事项', value: 'todo', icon: 'md-calendar' },
+					{ name: '已办事项', value: 'untodo', icon: 'ios-calendar', placement: 'bottom-end' }
+				]
+			}
+		}
+	},
+	data() {
+		return {
+			poptipWidth: 320,
+			cardActive: ''
+		}
+	},
+	computed: {
+		colsConfig() {
+			return {
+				xs: { span: 24 },
+				sm: { span: 24 },
+				md: { span: 12 },
+				lg: { span: 8 },
+				xl: { span: 8 },
+				xxl: { span: 6 }
+			}
+		}
+	},
+	methods: {
+		// 重新生成卡片列表
+		resetRenderList(list) {
+			return this.$vUtils.mapTree(list, item => {
+				return {
+					buttons: this.cardBtns.map(btn => {
+						return {
+							visible: false,
+							placement: 'bottom-start',
+							...btn
+						}
+					}),
+					...item
+				}
+			})
+		},
+		// 动态角标配置
+		btnCornerConfig(cardBtn, menuitem, menuindex) {
+			return {
+				title: this.getBudgeNum(menuitem, cardBtn),
+				dark: true,
+				width: '30',
+				height: '30',
+				color: this.getMenuColor(menuindex)
+			}
+		},
+		getMenuColor(menuindex, active) {
+			return this.getCardStyle(menuindex, true)[active ? 'color' : 'backgroundColor']
+		},
+		getCardStyle(index, active) {
+			let themeLength = this.menuColors.length
+			let backgroundColor = this.menuColors[index % themeLength][active ? 'active' : 'default']
+			let color = active ? '#fff' : ''
+			return { backgroundColor, color }
+		},
+		getBudgeNum(menu, card) {
+			switch (card.value) {
+				case 'menus':
+					return this.$vUtils.toTreeArray(menu.children || []).length
+				default:
+					return ''
+			}
+		},
+		handleCardBtn($event, cardBtn, menu, menuIndex) {
+			if (!menu.children || menu.children.length < 1) {
+				cardBtn.visible = false
+				return this.routerTo(menu)
+			}
+			let windowWidth = window.document.body.clientWidth
+			let selfOffsetRight = windowWidth - $event.pageX
+			cardBtn.placement = selfOffsetRight < this.poptipWidth ? 'bottom-end' : 'bottom-start'
+			cardBtn.visible = true
+		},
+		handleFocusBtn(card, index) {
+			this.cardActive = card.value + index
+		},
+		handleBlurBtn(card, index) {
+			if (this.cardActive === card.value + index) this.cardActive = ''
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.menuCard {
+	margin-bottom: 10px;
+}
+.cardPoptipContent {
+	max-height: 400px;
+	overflow: auto;
+}
+.cardBtnsWrap {
+	position: relative;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap;
+	> div {
+		width: 47%;
+		display: inline-flex;
+		align-items: center;
+		margin: 1.5%;
+		> .ivu-poptip-rel,
+		> .ivu-tooltip-rel,
+		> .ivu-dropdown-rel {
+			width: 100%;
+			display: block;
+		}
+	}
+	.cardBtn {
+		display: flex;
+		align-items: center;
+		background-color: #eee;
+		font-size: 1.1em;
+		padding: 10px;
+		box-sizing: border-box;
+		cursor: pointer;
+		position: relative;
+		&:hover {
+			opacity: 0.8;
+		}
+	}
+}
+.menuBoxWrap {
+	padding-left: 2em;
+	position: relative;
+	&.first {
+		padding-left: 0;
+	}
+	.menuBoxFilter {
+		margin-bottom: 5px;
+	}
+	.menuBoxTitle {
+		display: block;
+		padding: 5px 0;
+		cursor: pointer;
+	}
+}
+</style>

package/packages/css/index.js

@@ -1,6 +1,4 @@
-import '../assets/icons/iconfont.css'
-
-import '../assets/css/theme.scss'
-import '../assets/css/loader.scss'
-import '../assets/css/main.scss'
-import '../assets/css/animated.scss'
+import '../assets/css/theme.scss'
+import '../assets/css/loader.scss'
+import '../assets/css/main.scss'
+import '../assets/css/animated.scss'

package/packages/directive/index.js

@@ -1,19 +1,19 @@
-import directive from './directives'
-
-const index = {
-	install: function (Vue) {
-		/**
-		 * 拖拽指令 v-draggable="options"
-		 * options = {
-		 *  trigger: /这里传入作为拖拽触发器的CSS选择器/,
-		 *  body:    /这里传入需要移动容器的CSS选择器/,
-		 *  recover: /拖动结束之后是否恢复到原来的位置/
-		 * }
-		 */
-		Vue.directive('draggable', directive.draggable)
-		Vue.directive('debounce', directive.preventClick)
-		Vue.directive('ripple', directive.ripple)
-	}
-}
-
-export default index
+import draggable from './module/draggable'
+import resize from './module/resize'
+import lineClamp from './module/line-clamp'
+import preventClick from './module/prevent-click'
+import clickOut from './module/click-out'
+import ripple from './module/ripple'
+
+const index = {
+	install(Vue) {
+		Vue.directive('draggable', draggable)
+		Vue.directive('resize', resize)
+		Vue.directive('lineClamp', lineClamp)
+		Vue.directive('debounce', preventClick)
+		Vue.directive('clickout', clickOut)
+		Vue.directive('ripple', ripple)
+	}
+}
+
+export default index

package/packages/directive/module/click-out.js

@@ -0,0 +1,14 @@
+export default {
+	beforeMount(el, binding, vnode) {
+		function clickHandler(e) {
+			if (el.contains(e.target)) return false
+			binding.value(e)
+		}
+		el.__vueClickOutside__ = clickHandler
+		document.addEventListener('click', clickHandler)
+	},
+	unmounted(el, binding) {
+		document.removeEventListener('click', el.__vueClickOutside__)
+		delete el.__vueClickOutside__
+	}
+}

package/packages/directive/module/draggable.js

@@ -1,42 +1,42 @@
-import { utils } from 'sh-tools'
-
-export default {
-	inserted: (el, binding, vnode) => {
-		let triggerDom = document.querySelector(binding.value.trigger)
-		triggerDom.style.cursor = 'move'
-		let bodyDom = document.querySelector(binding.value.body)
-		let pageX = 0
-		let pageY = 0
-		let transformX = 0
-		let transformY = 0
-		let canMove = false
-		const handleMousedown = e => {
-			let transform = /\(.*\)/.exec(bodyDom.style.transform)
-			if (transform) {
-				transform = transform[0].slice(1, transform[0].length - 1)
-				let splitxy = transform.split('px, ')
-				transformX = parseFloat(splitxy[0])
-				transformY = parseFloat(splitxy[1].split('px')[0])
-			}
-			pageX = e.pageX
-			pageY = e.pageY
-			canMove = true
-		}
-		const handleMousemove = e => {
-			let xOffset = e.pageX - pageX + transformX
-			let yOffset = e.pageY - pageY + transformY
-			if (canMove) bodyDom.style.transform = `translate(${xOffset}px, ${yOffset}px)`
-		}
-		const handleMouseup = e => {
-			canMove = false
-		}
-		utils.on(triggerDom, 'mousedown', handleMousedown)
-		utils.on(document, 'mousemove', handleMousemove)
-		utils.on(document, 'mouseup', handleMouseup)
-	},
-	update: (el, binding, vnode) => {
-		if (!binding.value.recover) return
-		let bodyDom = document.querySelector(binding.value.body)
-		bodyDom.style.transform = ''
-	}
-}
+import { utils } from 'sh-tools'
+
+export default {
+	mounted: (el, binding, vnode) => {
+		let triggerDom = document.querySelector(binding.value.trigger)
+		triggerDom.style.cursor = 'move'
+		let bodyDom = document.querySelector(binding.value.body)
+		let pageX = 0
+		let pageY = 0
+		let transformX = 0
+		let transformY = 0
+		let canMove = false
+		const handleMousedown = e => {
+			let transform = /\(.*\)/.exec(bodyDom.style.transform)
+			if (transform) {
+				transform = transform[0].slice(1, transform[0].length - 1)
+				let splitxy = transform.split('px, ')
+				transformX = parseFloat(splitxy[0])
+				transformY = parseFloat(splitxy[1].split('px')[0])
+			}
+			pageX = e.pageX
+			pageY = e.pageY
+			canMove = true
+		}
+		const handleMousemove = e => {
+			let xOffset = e.pageX - pageX + transformX
+			let yOffset = e.pageY - pageY + transformY
+			if (canMove) bodyDom.style.transform = `translate(${xOffset}px, ${yOffset}px)`
+		}
+		const handleMouseup = e => {
+			canMove = false
+		}
+		utils.on(triggerDom, 'mousedown', handleMousedown)
+		utils.on(document, 'mousemove', handleMousemove)
+		utils.on(document, 'mouseup', handleMouseup)
+	},
+	updated: (el, binding, vnode) => {
+		if (!binding.value.recover) return
+		let bodyDom = document.querySelector(binding.value.body)
+		bodyDom.style.transform = ''
+	}
+}

package/packages/directive/module/line-clamp.js

@@ -0,0 +1,22 @@
+/**
+ * 限制文本最多显示几行，以...结束，仅适用于 webkit 内核浏览器
+ * */
+import { utils } from 'sh-tools'
+
+export default {
+	mounted(el, binding) {
+		if (binding.value) {
+			utils.addClass(el, 'sh-line-clamp')
+			el.style['-webkit-line-clamp'] = binding.value
+		}
+	},
+	updated(el, binding) {
+		if (binding.value) {
+			el.style['-webkit-line-clamp'] = binding.value
+		}
+	},
+	unmounted(el) {
+		utils.removeClass(el, 'sh-line-clamp')
+		el.style['-webkit-line-clamp'] = null
+	}
+}

package/packages/directive/module/prevent-click.js

@@ -0,0 +1,18 @@
+import { utils } from 'sh-tools'
+
+let preventClass = 'sh-prevent--disabled'
+
+export default {
+	inserted(el, binding) {
+		el.addEventListener('click', () => {
+			if (!el.disabled) {
+				el.disabled = true
+				if (!utils.hasClass(el, preventClass)) utils.addClass(el, preventClass)
+				setTimeout(() => {
+					el.disabled = false
+					if (utils.hasClass(el, preventClass)) utils.removeClass(el, preventClass)
+				}, binding.value || 1500)
+			}
+		})
+	}
+}

package/packages/directive/module/resize.js

@@ -0,0 +1,19 @@
+import elementResizeDetectorMaker from 'element-resize-detector'
+
+export default {
+	// 使用 bind，会在初始化时调用两次handler
+	mounted(el, binding) {
+		function resizeHandler(e) {
+			binding.value(e)
+		}
+		el.__resizeHandler__ = resizeHandler
+		el.__observer__ = elementResizeDetectorMaker()
+		el.__observer__.listenTo(el, resizeHandler)
+	},
+	updated() {},
+	unmounted(el, binding) {
+		el.__observer__.removeListener(el, el.__resizeHandler__)
+		delete el.__resizeHandler__
+		delete el.__observer__
+	}
+}