sh-view 2.8.1 → 2.8.3

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

@@ -1,133 +1,133 @@
-<template>
-	<div class="sh-image" :style="wrapStyles">
-		<div v-if="imageError" class="sh-image-place">
-			<slot name="error"><sh-icon type="font-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>
-import { defineComponent, computed, ref, watch } from 'vue'
-export default defineComponent({
-	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'],
-	setup(props, context) {
-		const { emit } = context
-		const imageloading = ref(false)
-		const imageError = ref(false)
-
-		const wrapStyles = computed(() => {
-			return {
-				width: typeof props.width === 'number' ? `${props.width}px` : props.width,
-				height: typeof props.height === 'number' ? `${props.height}px` : props.height
-			}
-		})
-		const imgConfig = computed(() => {
-			const fitContains = ['fill', 'contain', 'cover', 'none', 'scale-down']
-			return {
-				alt: props.alt,
-				src: props.src,
-				referrerPolicy: props.referrerPolicy,
-				loading: props.lazy ? 'lazy' : 'eager',
-				style: fitContains.includes(props.fit) ? `object-fit:${props.fit};` : ''
-			}
-		})
-
-		const onImageLoad = () => {
-			imageloading.value = false
-			imageError.value = false
-			emit('load')
-		}
-		const onImageError = () => {
-			imageloading.value = false
-			imageError.value = true
-			emit('error')
-		}
-		const loadImage = () => {
-			imageloading.value = true
-			imageError.value = false
-		}
-
-		watch(
-			() => props.src,
-			() => {
-				loadImage()
-			}
-		)
-
-		return {
-			wrapStyles,
-			imageError,
-			imageloading,
-			imgConfig,
-			onImageLoad,
-			onImageError
-		}
-	}
-})
-</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%;
-		background-color: var(--vxe-table-header-background-color);
-	}
-	&-inner {
-		width: 100%;
-		height: 100%;
-		position: relative;
-	}
-	&-img {
-		width: 100%;
-		height: 100%;
-		vertical-align: middle;
-	}
-}
-</style>
+<template>
+	<div class="sh-image" :style="wrapStyles">
+		<div v-if="imageError" class="sh-image-place">
+			<slot name="error"><sh-icon type="font-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>
+import { defineComponent, computed, ref, watch } from 'vue'
+export default defineComponent({
+	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'],
+	setup(props, context) {
+		const { emit } = context
+		const imageloading = ref(false)
+		const imageError = ref(false)
+
+		const wrapStyles = computed(() => {
+			return {
+				width: typeof props.width === 'number' ? `${props.width}px` : props.width,
+				height: typeof props.height === 'number' ? `${props.height}px` : props.height
+			}
+		})
+		const imgConfig = computed(() => {
+			const fitContains = ['fill', 'contain', 'cover', 'none', 'scale-down']
+			return {
+				alt: props.alt,
+				src: props.src,
+				referrerPolicy: props.referrerPolicy,
+				loading: props.lazy ? 'lazy' : 'eager',
+				style: fitContains.includes(props.fit) ? `object-fit:${props.fit};` : ''
+			}
+		})
+
+		const onImageLoad = () => {
+			imageloading.value = false
+			imageError.value = false
+			emit('load')
+		}
+		const onImageError = () => {
+			imageloading.value = false
+			imageError.value = true
+			emit('error')
+		}
+		const loadImage = () => {
+			imageloading.value = true
+			imageError.value = false
+		}
+
+		watch(
+			() => props.src,
+			() => {
+				loadImage()
+			}
+		)
+
+		return {
+			wrapStyles,
+			imageError,
+			imageloading,
+			imgConfig,
+			onImageLoad,
+			onImageError
+		}
+	}
+})
+</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%;
+		background-color: var(--vxe-table-header-background-color);
+	}
+	&-inner {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+	&-img {
+		width: 100%;
+		height: 100%;
+		vertical-align: middle;
+	}
+}
+</style>

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

@@ -1,146 +1,146 @@
-<template>
-	<div class="sh-list">
-		<template v-if="slots.header"><slot name="header"></slot></template>
-		<vxe-list ref="listRef" :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>
-import { defineComponent, ref, getCurrentInstance, computed } from 'vue'
-export default defineComponent({
-	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'],
-	setup(props, context) {
-		const vm = getCurrentInstance()
-		const { $vUtils } = vm.proxy
-		const { emit, slots } = context
-		const listRef = ref()
-
-		const groupSize = computed(() => {
-			return props.grid && +props.grid.span > 0 && +props.grid.span < 24 ? 24 / props.grid.span : 0
-		})
-		const listConfig = computed(() => {
-			return {
-				data: groupSize.value ? $vUtils.chunk($vUtils.clone(props.dataSourse, true), groupSize.value) : props.dataSourse,
-				size: props.size,
-				className: props.className,
-				loading: props.loading,
-				height: props.height,
-				autoResize: props.autoResize,
-				syncResize: props.syncResize,
-				scrollY: Object.assign({ sItem: 'sh-list-item' }, props.scrollY)
-			}
-		})
-		const listPagerConfig = computed(() => {
-			return Object.assign({ enabled: Boolean(props.pagerConfig), total: 0 }, props.pagerConfig)
-		})
-
-		// 分页变化触发
-		const onPageChange = data => {
-			emit('page-change', data)
-		}
-
-		return {
-			listRef,
-			slots,
-			groupSize,
-			listConfig,
-			listPagerConfig,
-			onPageChange
-		}
-	}
-})
-</script>
-
-<style lang="scss" scoped>
-.sh-list {
-	position: relative;
-	width: 100%;
-}
-</style>
+<template>
+	<div class="sh-list">
+		<template v-if="slots.header"><slot name="header"></slot></template>
+		<vxe-list ref="listRef" :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>
+import { defineComponent, ref, getCurrentInstance, computed } from 'vue'
+export default defineComponent({
+	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'],
+	setup(props, context) {
+		const vm = getCurrentInstance()
+		const { $vUtils } = vm.proxy
+		const { emit, slots } = context
+		const listRef = ref()
+
+		const groupSize = computed(() => {
+			return props.grid && +props.grid.span > 0 && +props.grid.span < 24 ? 24 / props.grid.span : 0
+		})
+		const listConfig = computed(() => {
+			return {
+				data: groupSize.value ? $vUtils.chunk($vUtils.clone(props.dataSourse, true), groupSize.value) : props.dataSourse,
+				size: props.size,
+				className: props.className,
+				loading: props.loading,
+				height: props.height,
+				autoResize: props.autoResize,
+				syncResize: props.syncResize,
+				scrollY: Object.assign({ sItem: 'sh-list-item' }, props.scrollY)
+			}
+		})
+		const listPagerConfig = computed(() => {
+			return Object.assign({ enabled: Boolean(props.pagerConfig), total: 0 }, props.pagerConfig)
+		})
+
+		// 分页变化触发
+		const onPageChange = data => {
+			emit('page-change', data)
+		}
+
+		return {
+			listRef,
+			slots,
+			groupSize,
+			listConfig,
+			listPagerConfig,
+			onPageChange
+		}
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.sh-list {
+	position: relative;
+	width: 100%;
+}
+</style>

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

@@ -1,53 +1,53 @@
-<template>
-	<div v-if="loading" class="sh-loading" :class="{ 'sh-loading-fix': fix }">
-		<div class="loading" :class="`loading${loadingType}`"></div>
-		<div v-if="content" class="loadtext">{{ content }}</div>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed } from 'vue'
-export default defineComponent({
-	name: 'ShLoading',
-	props: {
-		type: {
-			type: String,
-			default: '12'
-		},
-		loading: Boolean,
-		fix: Boolean,
-		content: {
-			type: [String, Number],
-			default: '加载中'
-		}
-	},
-	setup(props, context) {
-		const loadingType = computed(() => {
-			return !props.type || props.type > 23 || props.type < 0 ? '12' : props.type
-		})
-
-		return {
-			loadingType
-		}
-	}
-})
-</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>
+<template>
+	<div v-if="loading" class="sh-loading" :class="{ 'sh-loading-fix': fix }">
+		<div class="loading" :class="`loading${loadingType}`"></div>
+		<div v-if="content" class="loadtext">{{ content }}</div>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue'
+export default defineComponent({
+	name: 'ShLoading',
+	props: {
+		type: {
+			type: String,
+			default: '12'
+		},
+		loading: Boolean,
+		fix: Boolean,
+		content: {
+			type: [String, Number],
+			default: '加载中'
+		}
+	},
+	setup(props, context) {
+		const loadingType = computed(() => {
+			return !props.type || props.type > 23 || props.type < 0 ? '12' : props.type
+		})
+
+		return {
+			loadingType
+		}
+	}
+})
+</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>