sh-view 2.8.0 → 2.8.2

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

@@ -1,148 +1,148 @@
-<template>
-	<div class="sh-card" :class="classes">
-		<div v-if="title || slots.title || slots.extra" class="sh-card-head" :style="styles">
-			<slot name="head">
-				<div v-if="title || slots.title" class="sh-card-head-title">
-					<sh-icon v-if="icon" :type="icon" :size="iconSize" :color="color" class="sh-card-head-icon"></sh-icon>
-					<slot name="title">{{ title }}</slot>
-				</div>
-				<div v-if="slots.extra" class="sh-card-head-extra"><slot name="extra"></slot></div>
-			</slot>
-		</div>
-		<div v-if="slots.default" class="sh-card-body" :style="styles">
-			<slot></slot>
-		</div>
-		<div v-if="slots.foot" class="sh-card-foot" :style="styles">
-			<slot name="foot"></slot>
-		</div>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed } from 'vue'
-export default defineComponent({
-	name: 'ShCard',
-	props: {
-		border: {
-			type: Boolean,
-			default: true
-		},
-		shadow: {
-			type: Boolean,
-			default: false
-		},
-		padding: {
-			type: Number,
-			default: 10
-		},
-		title: {
-			type: String
-		},
-		color: {
-			type: String
-		},
-		icon: {
-			type: String,
-			default: ''
-		},
-		iconSize: {
-			type: Number,
-			default: 20
-		},
-		size: {
-			type: String,
-			default: 'default' //  large / medium / small / mini
-		}
-	},
-	setup(props, context) {
-		const { slots } = context
-
-		const classes = computed(() => {
-			return {
-				border: props.border,
-				shadow: props.shadow,
-				[props.size]: props.size
-			}
-		})
-		const styles = computed(() => {
-			return {
-				padding: `${props.padding}px`
-			}
-		})
-
-		return {
-			classes,
-			styles,
-			slots
-		}
-	}
-})
-</script>
-
-<style lang="scss" scoped>
-@mixin layoutFlex {
-	display: flex;
-	width: 100%;
-	align-items: center;
-	flex-wrap: wrap;
-}
-.sh-card {
-	display: block;
-	border-radius: var(--vxe-border-radius);
-	background-color: var(--vxe-table-body-background-color);
-	.sh-card-head {
-		@include layoutFlex;
-		.sh-card-head-title {
-			flex: 1;
-			display: block;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			.sh-card-head-icon {
-				margin-right: 10px;
-				color: var(--vxe-primary-color);
-			}
-		}
-		.sh-card-head-extra {
-			@include layoutFlex;
-			flex: 0;
-			display: inline-flex;
-			white-space: nowrap;
-		}
-	}
-	.sh-card-body {
-		display: block;
-		border-top: 1px solid var(--vxe-table-border-color);
-	}
-	.sh-card-foot {
-		@include layoutFlex;
-		border-top: 1px solid var(--vxe-table-border-color);
-	}
-	&.large {
-		.sh-card-head .sh-card-head-title {
-			font-size: 1.2rem;
-		}
-	}
-	&.medium {
-		.sh-card-head .sh-card-head-title {
-			font-size: 1rem;
-		}
-	}
-	&.small {
-		.sh-card-head .sh-card-head-title {
-			font-size: 0.9285rem;
-		}
-	}
-	&.mini {
-		.sh-card-head .sh-card-head-title {
-			font-size: 0.8571rem;
-		}
-	}
-	&.border {
-		border: 1px solid var(--vxe-table-border-color);
-	}
-	&.shadow {
-		box-shadow: var(--box-shadow);
-	}
-}
-</style>
+<template>
+	<div class="sh-card" :class="classes">
+		<div v-if="title || slots.title || slots.extra" class="sh-card-head" :style="styles">
+			<slot name="head">
+				<div v-if="title || slots.title" class="sh-card-head-title">
+					<sh-icon v-if="icon" :type="icon" :size="iconSize" :color="color" class="sh-card-head-icon"></sh-icon>
+					<slot name="title">{{ title }}</slot>
+				</div>
+				<div v-if="slots.extra" class="sh-card-head-extra"><slot name="extra"></slot></div>
+			</slot>
+		</div>
+		<div v-if="slots.default" class="sh-card-body" :style="styles">
+			<slot></slot>
+		</div>
+		<div v-if="slots.foot" class="sh-card-foot" :style="styles">
+			<slot name="foot"></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue'
+export default defineComponent({
+	name: 'ShCard',
+	props: {
+		border: {
+			type: Boolean,
+			default: true
+		},
+		shadow: {
+			type: Boolean,
+			default: false
+		},
+		padding: {
+			type: Number,
+			default: 10
+		},
+		title: {
+			type: String
+		},
+		color: {
+			type: String
+		},
+		icon: {
+			type: String,
+			default: ''
+		},
+		iconSize: {
+			type: Number,
+			default: 20
+		},
+		size: {
+			type: String,
+			default: 'default' //  large / medium / small / mini
+		}
+	},
+	setup(props, context) {
+		const { slots } = context
+
+		const classes = computed(() => {
+			return {
+				border: props.border,
+				shadow: props.shadow,
+				[props.size]: props.size
+			}
+		})
+		const styles = computed(() => {
+			return {
+				padding: `${props.padding}px`
+			}
+		})
+
+		return {
+			classes,
+			styles,
+			slots
+		}
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+@mixin layoutFlex {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	flex-wrap: wrap;
+}
+.sh-card {
+	display: block;
+	border-radius: var(--vxe-border-radius);
+	background-color: var(--vxe-table-body-background-color);
+	.sh-card-head {
+		@include layoutFlex;
+		.sh-card-head-title {
+			flex: 1;
+			display: block;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			.sh-card-head-icon {
+				margin-right: 10px;
+				color: var(--vxe-primary-color);
+			}
+		}
+		.sh-card-head-extra {
+			@include layoutFlex;
+			flex: 0;
+			display: inline-flex;
+			white-space: nowrap;
+		}
+	}
+	.sh-card-body {
+		display: block;
+		border-top: 1px solid var(--vxe-table-border-color);
+	}
+	.sh-card-foot {
+		@include layoutFlex;
+		border-top: 1px solid var(--vxe-table-border-color);
+	}
+	&.large {
+		.sh-card-head .sh-card-head-title {
+			font-size: 1.2rem;
+		}
+	}
+	&.medium {
+		.sh-card-head .sh-card-head-title {
+			font-size: 1rem;
+		}
+	}
+	&.small {
+		.sh-card-head .sh-card-head-title {
+			font-size: 0.9285rem;
+		}
+	}
+	&.mini {
+		.sh-card-head .sh-card-head-title {
+			font-size: 0.8571rem;
+		}
+	}
+	&.border {
+		border: 1px solid var(--vxe-table-border-color);
+	}
+	&.shadow {
+		box-shadow: var(--box-shadow);
+	}
+}
+</style>

package/packages/components/sh-code-editor/index.vue

@@ -80,8 +80,8 @@ export default defineComponent({
 	setup(props, context) {
 		const { emit } = context
 
-		const codeEditor = ref(null)
-		const codeLength = ref(0)
+		let codeEditor = null
+		let codeLength = 0
 		const codeError = ref(null)
 		const codeRef = ref()
 
@@ -94,7 +94,7 @@ export default defineComponent({
 		})
 		const codeExtensions = computed(() => {
 			const { mode, disabled, multipleSelection, indent, theme, tab, wrap, extensions } = props
-			let defaultExtensions = [basicSetup, history(), drawSelection(), lineNumbers(), placeholder(props.placeholder), keymap.of([...defaultKeymap, ...historyKeymap])]
+			const defaultExtensions = [basicSetup, history(), drawSelection(), lineNumbers(), placeholder(props.placeholder), keymap.of([...defaultKeymap, ...historyKeymap])]
 			if (['javascript', 'js'].includes(mode.toLowerCase())) {
 				defaultExtensions.push(javascript())
 			} else if (['mysql', 'sql'].includes(mode.toLowerCase())) {
@@ -119,22 +119,22 @@ export default defineComponent({
 		watch(
 			() => props.modelValue,
 			value => {
-				if (codeEditor.value && !codeEditor.value.composing) {
-					let docLength = codeEditor.value.state.doc.length
-					let docValue = getTransformValue(value)
-					codeEditor.value.dispatch({
+				if (codeEditor && !codeEditor.composing) {
+					const docLength = codeEditor.state.doc.length
+					const docValue = getTransformValue(value)
+					codeEditor.dispatch({
 						changes: { from: 0, to: docLength, insert: docValue },
-						selection: codeEditor.value.state.selection,
+						selection: codeEditor.state.selection,
 						scrollIntoView: true
 					})
-					codeLength.value = docLength
+					codeLength = docLength
 				}
 			}
 		)
 		watch(
 			() => props.codeExtensions,
 			value => {
-				codeEditor.value?.dispatch({
+				codeEditor?.dispatch({
 					effects: StateEffect.reconfigure.of(value)
 				})
 			},
@@ -144,12 +144,12 @@ export default defineComponent({
 		)
 
 		const codeRender = async () => {
-			let docValue = getTransformValue(props.modelValue)
-			let codeState = EditorState.create({
+			const docValue = getTransformValue(props.modelValue)
+			const codeState = EditorState.create({
 				doc: docValue,
 				extensions: codeExtensions.value
 			})
-			codeEditor.value = new EditorView({
+			codeEditor = new EditorView({
 				parent: codeRef.value,
 				state: codeState
 			})
@@ -158,7 +158,7 @@ export default defineComponent({
 		}
 
 		const focusListener = (state, focusing) => {
-			let valueStr = state.doc.toString()
+			const valueStr = state.doc.toString()
 			if (focusing) {
 				dispatchEvent('focus', valueStr)
 			} else {
@@ -169,12 +169,12 @@ export default defineComponent({
 
 		const updateListener = async ({ state, changes, docChanged }) => {
 			if (changes.empty || !docChanged) return
-			let valueStr = state.doc.toString()
+			const valueStr = state.doc.toString()
 			dispatchEvent('change', valueStr)
 		}
 
 		const focus = () => {
-			codeEditor.value && codeEditor.value.focus()
+			codeEditor && codeEditor.focus()
 		}
 
 		const getTransformValue = (value, out) => {
@@ -195,7 +195,7 @@ export default defineComponent({
 		}
 
 		const dispatchValue = value => {
-			let outValue = getTransformValue(value, true)
+			const outValue = getTransformValue(value, true)
 			if (codeError.value) return
 			emit('update:modelValue', outValue)
 		}
@@ -206,14 +206,14 @@ export default defineComponent({
 				outValue = getTransformValue(value, true)
 				if (codeError.value) return
 			}
-			emit(type, { $event: codeEditor.value, value: outValue || value })
+			emit(type, { $event: codeEditor, value: outValue || value })
 		}
 
 		onMounted(() => {
 			codeRender()
 		})
 		onUnmounted(() => {
-			if (codeEditor.value) codeEditor.value.destroy()
+			if (codeEditor) codeEditor.destroy()
 			dispatchEvent('destroy', props.modelValue)
 		})
 

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

@@ -1,92 +1,92 @@
-<template>
-	<div :class="classes" :style="styles">
-		<slot></slot>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed, inject } from 'vue'
-import './css/index.scss'
-export default defineComponent({
-	name: 'ShCol',
-	props: {
-		span: [Number, String],
-		order: [Number, String],
-		offset: [Number, String],
-		push: [Number, String],
-		pull: [Number, String],
-		xs: [Number, Object],
-		sm: [Number, Object],
-		md: [Number, Object],
-		lg: [Number, Object],
-		xl: [Number, Object],
-		xxl: [Number, Object],
-		flex: {
-			type: [Number, String],
-			default: ''
-		}
-	},
-	setup(props, context) {
-		const prefixCls = 'sh-col'
-		const RowInstance = inject('RowInstance')
-
-		const gutter = computed(() => {
-			return RowInstance?.gutter || 0
-		})
-		const classes = computed(() => {
-			let classList = [
-				`${prefixCls}`,
-				{
-					[`${prefixCls}-span-${props.span}`]: props.span,
-					[`${prefixCls}-order-${props.order}`]: props.order,
-					[`${prefixCls}-offset-${props.offset}`]: props.offset,
-					[`${prefixCls}-push-${props.push}`]: props.push,
-					[`${prefixCls}-pull-${props.pull}`]: props.pull
-				}
-			]
-			let sizeList = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
-			sizeList.forEach(size => {
-				if (typeof props[size] === 'number') {
-					classList.push(`${prefixCls}-span-${size}-${props[size]}`)
-				} else if (typeof props[size] === 'object') {
-					let sizeProps = props[size]
-					Object.keys(sizeProps).forEach(sizeprop => {
-						classList.push(`${prefixCls}-${size}-${sizeprop}-${sizeProps[sizeprop]}`)
-					})
-				}
-			})
-			return classList
-		})
-		const styles = computed(() => {
-			let style = {}
-			if (gutter.value !== 0) {
-				style = {
-					paddingLeft: gutter.value / 2 + 'px',
-					paddingRight: gutter.value / 2 + 'px'
-				}
-			}
-			if (props.flex) {
-				style.flex = parseFlex(props.flex)
-			}
-			return style
-		})
-
-		const parseFlex = flex => {
-			if (typeof flex === 'number') {
-				return `${flex} ${flex} auto`
-			}
-			if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
-				return `0 0 ${flex}`
-			}
-			return flex
-		}
-
-		return {
-			classes,
-			styles
-		}
-	}
-})
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+	<div :class="classes" :style="styles">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, inject } from 'vue'
+import './css/index.scss'
+export default defineComponent({
+	name: 'ShCol',
+	props: {
+		span: [Number, String],
+		order: [Number, String],
+		offset: [Number, String],
+		push: [Number, String],
+		pull: [Number, String],
+		xs: [Number, Object],
+		sm: [Number, Object],
+		md: [Number, Object],
+		lg: [Number, Object],
+		xl: [Number, Object],
+		xxl: [Number, Object],
+		flex: {
+			type: [Number, String],
+			default: ''
+		}
+	},
+	setup(props, context) {
+		const prefixCls = 'sh-col'
+		const RowInstance = inject('RowInstance')
+
+		const gutter = computed(() => {
+			return RowInstance?.gutter || 0
+		})
+		const classes = computed(() => {
+			let classList = [
+				`${prefixCls}`,
+				{
+					[`${prefixCls}-span-${props.span}`]: props.span,
+					[`${prefixCls}-order-${props.order}`]: props.order,
+					[`${prefixCls}-offset-${props.offset}`]: props.offset,
+					[`${prefixCls}-push-${props.push}`]: props.push,
+					[`${prefixCls}-pull-${props.pull}`]: props.pull
+				}
+			]
+			let sizeList = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
+			sizeList.forEach(size => {
+				if (typeof props[size] === 'number') {
+					classList.push(`${prefixCls}-span-${size}-${props[size]}`)
+				} else if (typeof props[size] === 'object') {
+					let sizeProps = props[size]
+					Object.keys(sizeProps).forEach(sizeprop => {
+						classList.push(`${prefixCls}-${size}-${sizeprop}-${sizeProps[sizeprop]}`)
+					})
+				}
+			})
+			return classList
+		})
+		const styles = computed(() => {
+			let style = {}
+			if (gutter.value !== 0) {
+				style = {
+					paddingLeft: gutter.value / 2 + 'px',
+					paddingRight: gutter.value / 2 + 'px'
+				}
+			}
+			if (props.flex) {
+				style.flex = parseFlex(props.flex)
+			}
+			return style
+		})
+
+		const parseFlex = flex => {
+			if (typeof flex === 'number') {
+				return `${flex} ${flex} auto`
+			}
+			if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
+				return `0 0 ${flex}`
+			}
+			return flex
+		}
+
+		return {
+			classes,
+			styles
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss"></style>