sh-view 1.7.5 → 2.0.0

package/packages/components/global-components/sh-result/index.vue

@@ -1,88 +1,110 @@
-<template>
-	<div class="sh-result">
-		<div v-if="isicon || $slots.icon" class="sh-result-icon" :class="resultType">
-			<slot name="icon"><sh-icon :type="resultIcon" :size="iconSize" /></slot>
-		</div>
-		<div v-if="text || $slots.text" v-line-clamp="clamp" class="sh-result-text" :title="text">
-			<slot name="text">{{ text }}</slot>
-		</div>
-		<slot name="default"></slot>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'ShResult',
-	components: {},
-	props: {
-		type: {
-			type: String,
-			default: ''
-		},
-		isicon: {
-			type: Boolean,
-			default: true
-		},
-		icon: {
-			type: String,
-			default: ''
-		},
-		iconSize: {
-			type: Number,
-			default: 40
-		},
-		text: {
-			type: String,
-			default: ''
-		},
-		clamp: {
-			type: Number,
-			default: 2
-		}
-	},
-	computed: {
-		resultType() {
-			let types = ['success', 'error', 'warning', 'info']
-			return types.includes(this.type) ? this.type : 'info'
-		},
-		resultIcon() {
-			let resultIconMap = {
-				success: 'ios-checkmark-circle',
-				error: 'ios-close-circle',
-				warning: 'ios-alert',
-				info: 'ios-information-circle'
-			}
-			return resultIconMap[this.resultType]
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.sh-result {
-	width: 100%;
-	display: block;
-	text-align: center;
-	padding: 10px;
-	.sh-result-icon {
-		box-sizing: border-box;
-		color: var(--theme-color);
-		margin-bottom: 15px;
-		&.sucess {
-			color: var(--success-color);
-		}
-		&.error {
-			color: var(--error-color);
-		}
-		&.warning {
-			color: var(--warning-color);
-		}
-		&.info {
-			color: var(--info-color);
-		}
-	}
-	.sh-result-text {
-		color: var(--text-color);
-	}
-}
-</style>
+<template>
+	<div class="sh-result">
+		<div v-if="isicon || $slots.icon" class="sh-result-icon" :class="resultType">
+			<slot name="icon"><sh-icon :type="resultIcon" :size="iconSize" /></slot>
+		</div>
+		<div v-if="resultTitle || $slots.title" class="sh-result-title" :title="resultTitle">
+			<slot name="title">{{ resultTitle }}</slot>
+		</div>
+		<div v-if="text || $slots.text" v-line-clamp="clamp" class="sh-result-text" :title="text">
+			<slot name="text">{{ text }}</slot>
+		</div>
+		<slot name="default"></slot>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShResult',
+	components: {},
+	props: {
+		type: {
+			type: String,
+			default: ''
+		},
+		isicon: {
+			type: Boolean,
+			default: true
+		},
+		icon: {
+			type: String,
+			default: ''
+		},
+		iconSize: {
+			type: Number,
+			default: 50
+		},
+		title: {
+			type: [Boolean, String],
+			default: true
+		},
+		text: {
+			type: String,
+			default: ''
+		},
+		clamp: {
+			type: Number,
+			default: 2
+		}
+	},
+	computed: {
+		resultType() {
+			let types = ['success', 'error', 'warning', 'info']
+			return types.includes(this.type) ? this.type : 'info'
+		},
+		resultTitle() {
+			let resultTitleMap = {
+				success: '成功',
+				error: '失败',
+				warning: '警告',
+				info: '提示'
+			}
+			return typeof this.title === 'string' ? this.title : resultTitleMap[this.resultType]
+		},
+		resultIcon() {
+			let resultIconMap = {
+				success: 'ios-checkmark-circle',
+				error: 'ios-close-circle',
+				warning: 'ios-alert',
+				info: 'ios-information-circle'
+			}
+			return resultIconMap[this.resultType]
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-result {
+	width: 100%;
+	display: block;
+	text-align: center;
+	padding: 10px;
+	.sh-result-icon {
+		box-sizing: border-box;
+		color: var(--vxe-primary-color);
+		&.success {
+			color: var(--vxe-success-color);
+		}
+		&.error {
+			color: var(--vxe-danger-color);
+		}
+		&.warning {
+			color: var(--vxe-warning-color);
+		}
+		&.info {
+			color: var(--vxe-info-color);
+		}
+	}
+	&-title {
+		color: var(--title-color);
+		font-size: 1.5em;
+		line-height: 1;
+		margin-top: 15px;
+	}
+	&-text {
+		color: var(--vxe-font-color);
+		margin-top: 15px;
+	}
+}
+</style>

package/packages/components/global-components/sh-row/css/index.scss

@@ -0,0 +1,21 @@
+$uiprefix: sh;
+
+.#{$uiprefix}-row {
+  display: flex;
+}
+
+.#{$uiprefix}-row-wrap {
+  flex-wrap: wrap;
+}
+
+@each $prefix, $value in (top, flex-start), (middle, center), (bottom, flex-end) {
+  .#{$uiprefix}-row-align-#{$prefix} {
+    align-items: $value;
+  }
+}
+
+@each $prefix, $value in (start, flex-start), (center, center), (end, flex-end), (around, space-around), (between, space-between) {
+  .#{$uiprefix}-row-justify-#{$prefix} {
+    justify-content: $value;
+  }
+}

package/packages/components/global-components/sh-row/index.vue

@@ -0,0 +1,63 @@
+<template>
+	<div :class="classes" :style="styles">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+import './css/index.scss'
+const prefixCls = 'sh-row'
+export default {
+	name: 'ShRow',
+	provide() {
+		return {
+			RowInstance: this
+		}
+	},
+	props: {
+		align: {
+			type: String,
+			default: 'top' // 'top', 'middle', 'bottom'
+		},
+		justify: {
+			type: String,
+			default: 'start' // 'start', 'end', 'center', 'space-around', 'space-between'
+		},
+		gutter: {
+			type: Number,
+			default: 0
+		},
+		wrap: {
+			type: Boolean,
+			default: true
+		},
+		margin: {
+			type: Boolean
+		}
+	},
+	computed: {
+		classes() {
+			return [
+				`${prefixCls}`,
+				{
+					[`${prefixCls}-${this.align}`]: !!this.align,
+					[`${prefixCls}-${this.justify}`]: !!this.justify,
+					[`${prefixCls}-wrap`]: this.wrap
+				}
+			]
+		},
+		styles() {
+			let style = {}
+			if (this.gutter !== 0 && this.margin) {
+				style = {
+					marginLeft: this.gutter / -2 + 'px',
+					marginRight: this.gutter / -2 + 'px'
+				}
+			}
+			return style
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss"></style>

package/packages/components/global-components/sh-split/components/trigger.vue

@@ -0,0 +1,33 @@
+<template>
+	<div :class="classes">
+		<div :class="barConClasses">
+			<i v-for="i in 8" v-once :key="`trigger-${i}`" :class="`${prefix}-bar`"></i>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'SplitTrigger',
+	props: {
+		mode: String
+	},
+	data() {
+		return {
+			prefix: 'sh-split-trigger',
+			initOffset: 0
+		}
+	},
+	computed: {
+		isVertical() {
+			return this.mode === 'vertical'
+		},
+		classes() {
+			return [this.prefix, this.isVertical ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`]
+		},
+		barConClasses() {
+			return [`${this.prefix}-bar-con`, this.isVertical ? 'vertical' : 'horizontal']
+		}
+	}
+}
+</script>

package/packages/components/global-components/sh-split/index.vue

@@ -0,0 +1,334 @@
+<template>
+	<div ref="splitWrap" v-resize="computeOffset" class="sh-split" :class="{ 'no-select': isMoving }">
+		<sh-loading v-if="loading" loading :content="loadingText" class="layout-loader"></sh-loading>
+		<div v-if="isHorizontal" :class="`${prefix}-horizontal`">
+			<div :style="{ right: `${anotherOffset}%` }" class="left-pane" :class="paneClasses">
+				<slot name="left" />
+			</div>
+			<div :class="`${prefix}-trigger-con`" :style="{ left: `${offset}%` }" @mousedown="handleMousedown">
+				<slot name="trigger">
+					<trigger mode="vertical" />
+				</slot>
+			</div>
+			<div :style="{ left: `${offset}%` }" class="right-pane" :class="paneClasses">
+				<slot name="right" />
+			</div>
+		</div>
+		<div v-else :class="`${prefix}-vertical`">
+			<div :style="{ bottom: `${anotherOffset}%` }" class="top-pane" :class="paneClasses">
+				<slot name="top" />
+			</div>
+			<div :class="`${prefix}-trigger-con`" :style="{ top: `${offset}%` }" @mousedown="handleMousedown">
+				<slot name="trigger">
+					<trigger mode="horizontal" />
+				</slot>
+			</div>
+			<div :style="{ top: `${offset}%` }" class="bottom-pane" :class="paneClasses">
+				<slot name="bottom" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import trigger from './components/trigger.vue'
+export default {
+	name: 'ShSplit',
+	components: {
+		trigger
+	},
+	props: {
+		modelValue: {
+			type: [Number, String],
+			default: 0.2
+		},
+		mode: {
+			type: String,
+			default: 'horizontal' // horizontal, vertical
+		},
+		min: {
+			type: [Number, String],
+			default: 0
+		},
+		max: {
+			type: [Number, String],
+			default: 0.6
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		dividerText: {
+			type: String,
+			default: ''
+		},
+		loading: {
+			type: Boolean
+		},
+		loadingText: {
+			type: String,
+			default: ''
+		},
+		loadingType: {
+			type: String,
+			default: '2'
+		}
+	},
+	emits: ['update:modelValue', 'move-start', 'moveing', 'move-end'],
+	data() {
+		return {
+			offset: 0,
+			oldOffset: 0,
+			isMoving: false,
+			computedMin: 0,
+			computedMax: 0,
+			currentValue: this.modelValue
+		}
+	},
+	computed: {
+		prefix() {
+			return 'sh-split'
+		},
+		paneClasses() {
+			return [
+				`${this.prefix}-pane`,
+				{
+					[`${this.prefix}-pane-moving`]: this.isMoving
+				}
+			]
+		},
+		isHorizontal() {
+			return this.mode === 'horizontal'
+		},
+		anotherOffset() {
+			return 100 - this.offset
+		},
+		valueIsPx() {
+			return typeof this.modelValue === 'string'
+		},
+		offsetSize() {
+			return this.isHorizontal ? 'offsetWidth' : 'offsetHeight'
+		}
+	},
+	watch: {
+		modelValue(val) {
+			this.resetOffset(val)
+		}
+	},
+	created() {},
+	mounted() {},
+	beforeUnmount() {},
+	methods: {
+		px2percent(numerator, denominator) {
+			return parseFloat(numerator) / parseFloat(denominator)
+		},
+		getComputedThresholdValue(type) {
+			let size = this.$refs.splitWrap[this.offsetSize]
+			if (this.valueIsPx) return typeof this[type] === 'string' ? this[type] : size * this[type]
+			else return typeof this[type] === 'string' ? this.px2percent(this[type], size) : this[type]
+		},
+		getMin(value1, value2) {
+			if (this.valueIsPx) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`
+			else return Math.min(value1, value2)
+		},
+		getMax(value1, value2) {
+			if (this.valueIsPx) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`
+			else return Math.max(value1, value2)
+		},
+		getAnotherOffset(value) {
+			let res = 0
+			if (this.valueIsPx) res = `${this.$refs.splitWrap[this.offsetSize] - parseFloat(value)}px`
+			else res = 1 - value
+			return res
+		},
+		handleMove(e) {
+			let pageOffset = this.isHorizontal ? e.pageX : e.pageY
+			let offset = pageOffset - this.initOffset
+			let outerWidth = this.$refs.splitWrap[this.offsetSize]
+			let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : this.px2percent(outerWidth * this.oldOffset + offset, outerWidth)
+			let anotherValue = this.getAnotherOffset(value)
+			if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin)
+			if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax))
+			e.atMin = this.currentValue === this.computedMin
+			e.atMax = this.valueIsPx ? this.getAnotherOffset(this.currentValue) === this.computedMax : this.getAnotherOffset(this.currentValue).toFixed(5) === this.computedMax.toFixed(5)
+			this.emitValue(value)
+			this.$emit('moveing', e)
+		},
+		handleUp() {
+			this.isMoving = false
+			this.$vUtils.offListener(document, 'mousemove', this.handleMove)
+			this.$vUtils.offListener(document, 'mouseup', this.handleUp)
+			this.$emit('move-end')
+		},
+		handleMousedown(e) {
+			this.initOffset = this.isHorizontal ? e.pageX : e.pageY
+			this.oldOffset = this.currentValue
+			this.isMoving = true
+			this.$vUtils.onListener(document, 'mousemove', this.handleMove)
+			this.$vUtils.onListener(document, 'mouseup', this.handleUp)
+			this.$emit('move-start')
+		},
+		computeOffset() {
+			this.computedMin = this.getComputedThresholdValue('min')
+			this.computedMax = this.getComputedThresholdValue('max')
+			this.offset = ((this.valueIsPx ? this.px2percent(this.currentValue, this.$refs.splitWrap[this.offsetSize]) : this.currentValue) * 10000) / 100
+			return this.$nextTick()
+		},
+		resetOffset(val) {
+			if (val !== this.currentValue) {
+				this.currentValue = val
+				this.computeOffset()
+			}
+		},
+		emitValue(value) {
+			this.resetOffset(value)
+			this.$emit('update:modelValue', value)
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+$box-shadow: var(--box-shadow);
+$trigger-bar-background: rgba(23, 35, 61, 0.25);
+$trigger-background: #f8f8f9;
+$trigger-width: 6px;
+$trigger-bar-width: 4px;
+$trigger-bar-offset: ($trigger-width - $trigger-bar-width) / 2;
+$trigger-bar-interval: 3px;
+$trigger-bar-weight: 1px;
+$trigger-bar-con-height: ($trigger-bar-weight + $trigger-bar-interval) * 8;
+
+.sh-split {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.layout-loader {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.4);
+		transition: opacity 0.65s;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+		font-size: 15px;
+		color: #fff;
+		z-index: 100;
+	}
+	&-pane {
+		position: absolute;
+		overflow: auto;
+		&.left-pane,
+		&.right-pane {
+			top: 0;
+			bottom: 0;
+		}
+		&.left-pane {
+			left: 0;
+			margin-right: $trigger-bar-width;
+		}
+		&.right-pane {
+			right: 0;
+			margin-left: $trigger-bar-width;
+		}
+		&.top-pane,
+		&.bottom-pane {
+			left: 0;
+			right: 0;
+		}
+		&.top-pane {
+			top: 0;
+			margin-bottom: $trigger-bar-width;
+		}
+		&.bottom-pane {
+			bottom: 0;
+			margin-top: $trigger-bar-width;
+		}
+		&-moving {
+			-webkit-user-select: none;
+			-moz-user-select: none;
+			-ms-user-select: none;
+			user-select: none;
+		}
+	}
+	&-trigger {
+		border: 1px solid var(--vxe-border-radius);
+		&-con {
+			position: absolute;
+			transform: translate(-50%, -50%);
+			z-index: 10;
+		}
+		&-bar-con {
+			position: absolute;
+			overflow: hidden;
+			&.vertical {
+				left: $trigger-bar-offset;
+				top: 50%;
+				height: $trigger-bar-con-height;
+				transform: translate(0, -50%);
+			}
+			&.horizontal {
+				left: 50%;
+				top: $trigger-bar-offset;
+				width: $trigger-bar-con-height;
+				transform: translate(-50%, 0);
+			}
+		}
+		&-vertical {
+			width: $trigger-width;
+			height: 100%;
+			background: $trigger-background;
+			border-top: none;
+			border-bottom: none;
+			cursor: col-resize;
+			.sh-split-trigger-bar {
+				width: $trigger-bar-width;
+				height: 1px;
+				background: $trigger-bar-background;
+				float: left;
+				margin-top: $trigger-bar-interval;
+			}
+		}
+		&-horizontal {
+			height: $trigger-width;
+			width: 100%;
+			background: $trigger-background;
+			border-left: none;
+			border-right: none;
+			cursor: row-resize;
+			.sh-split-trigger-bar {
+				height: $trigger-bar-width;
+				width: 1px;
+				background: $trigger-bar-background;
+				float: left;
+				margin-right: $trigger-bar-interval;
+			}
+		}
+	}
+	&-horizontal {
+		> .sh-split-trigger-con {
+			top: 50%;
+			height: 100%;
+			width: $trigger-width;
+		}
+	}
+	&-vertical {
+		> .sh-split-trigger-con {
+			left: 50%;
+			height: $trigger-width;
+			width: 100%;
+		}
+	}
+	.no-select {
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+	}
+}
+</style>