sh-view 1.7.6 → 2.0.1

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>