sh-view 1.7.5 → 2.0.0

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

@@ -1,27 +1,28 @@
-<template>
-	<component :is="iconType" :type="type" :color="color" :size="size" />
-</template>
-
-<script>
-import Icons from './icons.vue'
-export default {
-	name: 'ShIcon',
-	components: { Icons },
-	props: {
-		type: {
-			type: String,
-			required: true
-		},
-		color: String,
-		size: [Number, String]
-	},
-	computed: {
-		iconType() {
-			return this.type.startsWith('shicon') ? 'Icons' : 'Icon'
-		}
-	},
-	methods: {}
-}
-</script>
-
-<style></style>
+<template>
+	<component :is="iconType" :type="type" :color="color" :size="size" />
+</template>
+
+<script>
+import iconDefault from './icon-default.vue'
+import iconFont from './icon-font.vue'
+export default {
+	name: 'ShIcon',
+	components: { iconDefault, iconFont },
+	props: {
+		type: {
+			type: String,
+			required: true
+		},
+		color: String,
+		size: [Number, String]
+	},
+	computed: {
+		iconType() {
+			return this.type.startsWith('font') ? 'iconFont' : 'iconDefault'
+		}
+	},
+	methods: {}
+}
+</script>
+
+<style></style>

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

@@ -0,0 +1,123 @@
+<template>
+	<div class="sh-image" :style="wrapStyles">
+		<div v-if="imageError" class="sh-image-place">
+			<slot name="error"><sh-icon type="shicon-img-error" :size="22" color="#999999"></sh-icon></slot>
+		</div>
+		<div v-else-if="imageloading" class="sh-image-place">
+			<slot name="placeholder"><sh-icon type="ios-image" :size="22"></sh-icon></slot>
+		</div>
+		<div v-else class="sh-image-inner">
+			<img class="sh-image-img" v-bind="imgConfig" @load="onImageLoad" @error="onImageError" />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShImage',
+	props: {
+		src: {
+			type: String,
+			default: ''
+		},
+		alt: {
+			type: String,
+			default: ''
+		},
+		preview: {
+			type: Boolean,
+			default: false
+		},
+		width: {
+			type: [String, Number],
+			default: ''
+		},
+		height: {
+			type: [String, Number],
+			default: ''
+		},
+		fit: {
+			type: String, // 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+			default: ''
+		},
+		lazy: {
+			type: Boolean,
+			default: false
+		},
+		referrerPolicy: {
+			type: String,
+			default: 'no-referrer'
+		}
+	},
+	emits: ['update:modelValue', 'load', 'error'],
+	data() {
+		return {
+			imageloading: false,
+			imageError: false
+		}
+	},
+	computed: {
+		wrapStyles() {
+			return {
+				width: typeof this.width === 'number' ? `${this.width}px` : this.width,
+				height: typeof this.height === 'number' ? `${this.height}px` : this.height
+			}
+		},
+		imgConfig() {
+			const fitContains = ['fill', 'contain', 'cover', 'none', 'scale-down']
+			return {
+				alt: this.alt,
+				src: this.src,
+				referrerPolicy: this.referrerPolicy,
+				loading: this.lazy ? 'lazy' : 'eager',
+				style: fitContains.includes(this.fit) ? `object-fit:${this.fit};` : ''
+			}
+		}
+	},
+	watch: {
+		src() {
+			this.loadImage()
+		}
+	},
+	methods: {
+		onImageLoad() {
+			this.imageloading = false
+			this.imageError = false
+			this.$emit('load')
+		},
+		onImageError() {
+			this.imageloading = false
+			this.imageError = true
+			this.$emit('error')
+		},
+		loadImage() {
+			this.imageloading = true
+			this.imageError = false
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-image {
+	display: inline-block;
+	position: relative;
+	&-place {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
+	&-inner {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+	&-img {
+		width: 100%;
+		height: 100%;
+		vertical-align: middle;
+	}
+}
+</style>

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

@@ -0,0 +1,141 @@
+<template>
+	<div class="sh-list">
+		<template v-if="$slots.header"><slot name="header"></slot></template>
+		<vxe-list ref="vxeList" :class="{ grid }" v-bind="listConfig">
+			<template #default="{ items }">
+				<sh-empty v-if="items.length === 0 && !loading" :icon="emptyIcon" :content="emptyText"></sh-empty>
+				<template v-if="groupSize">
+					<sh-row v-for="(rows, rowsindex) in items" :key="rowsindex" class="sh-list-item" :gutter="grid.gutter" :margin="rowMargin">
+						<sh-col v-for="(col, colindex) in rows" :key="colindex" :class="itemClassName" v-bind="grid">
+							<slot v-if="$slots.item" name="item" v-bind="col"></slot>
+							<div v-else :class="itemClassName">{{ col[labelField] }}</div>
+						</sh-col>
+					</sh-row>
+				</template>
+				<template v-else-if="grid">
+					<sh-row :gutter="grid.gutter" :margin="rowMargin">
+						<sh-col v-for="(item, itemindex) in items" :key="itemindex" class="sh-list-item" :class="itemClassName" v-bind="grid">
+							<slot v-if="$slots.item" name="item" v-bind="item"></slot>
+							<div v-else :class="itemClassName">{{ item[labelField] }}</div>
+						</sh-col>
+					</sh-row>
+				</template>
+				<template v-else>
+					<template v-for="(item, itemindex) in items" :key="itemindex">
+						<div class="sh-list-item" :class="itemClassName">
+							<slot name="item" v-bind="item">{{ item[labelField] }}</slot>
+						</div>
+					</template>
+				</template>
+			</template>
+		</vxe-list>
+		<template v-if="$slots.footer"><slot name="footer"></slot></template>
+		<vxe-pager v-if="pagerConfig" v-bind="listPagerConfig" :loading="loading" @page-change="onPageChange"></vxe-pager>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShList',
+	props: {
+		dataSourse: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		size: {
+			type: String
+		},
+		className: {
+			type: String
+		},
+		itemClassName: {
+			type: String
+		},
+		loading: {
+			type: Boolean
+		},
+		height: {
+			type: [String, Number],
+			default: 'auto'
+		},
+		autoResize: {
+			type: Boolean
+		},
+		syncResize: {
+			type: [Boolean, String, Number]
+		},
+		scrollY: {
+			type: [Boolean, Object],
+			default() {
+				return { enabled: true, gt: 30 }
+			}
+		},
+		pagerConfig: {
+			type: [Object, Boolean],
+			default: false
+		},
+		emptyIcon: {
+			type: String
+		},
+		emptyText: {
+			type: String
+		},
+		grid: {
+			type: [Object, Boolean],
+			default: false
+		},
+		labelField: {
+			type: String,
+			default: 'label'
+		},
+		rowMargin: {
+			type: Boolean
+		}
+	},
+	emits: ['page-change'],
+	data() {
+		return {}
+	},
+	computed: {
+		groupSize() {
+			return this.grid && +this.grid.span > 0 && +this.grid.span < 24 ? 24 / this.grid.span : 0
+		},
+		listConfig() {
+			return {
+				data: this.groupSize ? this.$vUtils.chunk(this.$vUtils.clone(this.dataSourse, true), this.groupSize) : this.dataSourse,
+				size: this.size,
+				className: this.className,
+				loading: this.loading,
+				height: this.height,
+				autoResize: this.autoResize,
+				syncResize: this.syncResize,
+				scrollY: Object.assign({ sItem: 'sh-list-item' }, this.scrollY)
+			}
+		},
+		listPagerConfig() {
+			return Object.assign({ enabled: this.pagerConfig, total: 0 }, this.pagerConfig)
+		}
+	},
+	created() {},
+	mounted() {},
+	beforeUnmount() {},
+	methods: {
+		listRef() {
+			return this.$refs.vxeList
+		},
+		// 分页变化触发
+		onPageChange(data) {
+			this.$emit('page-change', data)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-list {
+	position: relative;
+	width: 100%;
+}
+</style>

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

@@ -1,42 +1,49 @@
-<template>
-	<Spin v-if="loading" size="large" :fix="fix" class="sh-loading">
-		<div class="loading" :class="`loading${loadingType}`"></div>
-		<div v-if="content" class="loadtext">{{ content }}</div>
-	</Spin>
-</template>
-
-<script>
-export default {
-	name: 'ShLoading',
-	components: {},
-	props: {
-		type: {
-			type: String,
-			default: '12'
-		},
-		loading: Boolean,
-		fix: Boolean,
-		content: {
-			type: [String, Number],
-			default: '加载中'
-		}
-	},
-	computed: {
-		loadingType() {
-			return !this.type || this.type > 23 || this.type < 0 ? '12' : this.type
-		}
-	}
-}
-</script>
-
-<style scoped lang="scss">
-.sh-loading {
-	position: relative;
-	z-index: 999;
-	background: rgba(255, 255, 255, 0.5);
-	padding: 0.5em;
-	.loadtext {
-		color: var(--theme-color);
-	}
-}
-</style>
+<template>
+	<div v-if="loading" size="large" class="sh-loading" :class="{ fix: fix }">
+		<div class="loading" :class="`loading${loadingType}`"></div>
+		<div v-if="content" class="loadtext">{{ content }}</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShLoading',
+	components: {},
+	props: {
+		type: {
+			type: String,
+			default: '12'
+		},
+		loading: Boolean,
+		fix: Boolean,
+		content: {
+			type: [String, Number],
+			default: '加载中'
+		}
+	},
+	computed: {
+		loadingType() {
+			return !this.type || this.type > 23 || this.type < 0 ? '12' : this.type
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-loading {
+	position: relative;
+	z-index: 999;
+	background: rgba(255, 255, 255, 0.5);
+	padding: 0.5em;
+	&.fix {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+	}
+	.loadtext {
+		color: var(--vxe-primary-color);
+	}
+}
+</style>