sh-view 2.1.0 → 2.3.0

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

@@ -1,260 +1,250 @@
-<template>
-	<div class="sh-code-editor" :style="shStyles">
-		<div ref="codeMirror" class="sh-code-content" />
-		<div v-if="error" class="sh-code-error" v-html="error"></div>
-	</div>
-</template>
-
-<script>
-import { basicSetup } from 'codemirror'
-import { keymap, placeholder, drawSelection, lineNumbers, EditorView } from '@codemirror/view'
-import { Compartment, EditorState, StateEffect } from '@codemirror/state'
-import { defaultKeymap, indentWithTab, historyKeymap, history } from '@codemirror/commands'
-import themes from './themes'
-import { javascript } from '@codemirror/lang-javascript'
-import { sql } from '@codemirror/lang-sql'
-import { json } from '@codemirror/lang-json'
-const tabSize = new Compartment()
-export default {
-	name: 'ShCodeEditor',
-	props: {
-		modelValue: {
-			type: [String, Object],
-			default: ''
-		},
-		option: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		mode: {
-			type: String,
-			default: 'javascript'
-		},
-		theme: {
-			type: String,
-			default: ''
-		},
-		placeholder: {
-			type: String,
-			default: ''
-		},
-		disabled: {
-			type: Boolean
-		},
-		border: {
-			type: Boolean
-		},
-		indent: {
-			type: Number,
-			default: 4
-		},
-		wrap: {
-			type: Boolean
-		},
-		tab: {
-			type: Boolean
-		},
-		multipleSelection: {
-			type: Boolean,
-			default: true
-		},
-		extensions: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		width: {
-			type: [String, Number],
-			default: '100%'
-		},
-		height: {
-			type: [String, Number],
-			default: 'auto'
-		}
-	},
-	emits: ['update:modelValue', 'change', 'loaded', 'focus', 'blur', 'destroy'],
-	data() {
-		return {
-			codeEditor: null,
-			codeLength: 0,
-			error: null
-		}
-	},
-	computed: {
-		shStyles() {
-			return {
-				width: this.width,
-				height: this.height,
-				border: this.border ? '1px solid var(--vxe-table-border-color)' : 'none'
-			}
-		},
-		codeExtensions() {
-			const { mode, disabled, multipleSelection, indent, theme, tab, wrap, extensions } = this
-			let defaultExtensions = [basicSetup, history(), drawSelection(), lineNumbers(), placeholder(this.placeholder), keymap.of([...defaultKeymap, ...historyKeymap])]
-			if (['javascript', 'js'].includes(mode.toLowerCase())) {
-				defaultExtensions.push(javascript())
-			} else if (['mysql', 'sql'].includes(mode.toLowerCase())) {
-				defaultExtensions.push(sql())
-			} else if (['json'].includes(mode.toLowerCase())) {
-				defaultExtensions.push(json())
-			}
-			return [
-				...defaultExtensions,
-				EditorView.updateListener.of(this.updateListener),
-				EditorView.focusChangeEffect.of(this.focusListener),
-				EditorView.editable.of(!disabled),
-				EditorState.allowMultipleSelections.of(multipleSelection),
-				tabSize.of(EditorState.tabSize.of(indent)),
-				theme && themes[theme] ? themes[theme] : undefined,
-				tab ? keymap.of([indentWithTab]) : undefined,
-				wrap ? EditorView.lineWrapping : undefined,
-				...extensions
-			].filter(item => !!item)
-		}
-	},
-	watch: {
-		modelValue(value) {
-			if (this.codeEditor && !this.codeEditor.composing) {
-				let docLength = this.codeEditor.state.doc.length
-				let docValue = this.getTransformValue(value)
-				this.codeEditor.dispatch({
-					changes: { from: 0, to: docLength, insert: docValue },
-					selection: this.codeEditor.state.selection,
-					scrollIntoView: true
-				})
-				this.codeLength = docLength
-			}
-		},
-		codeExtensions: {
-			handler(exts) {
-				this.codeEditor?.dispatch({
-					effects: StateEffect.reconfigure.of(exts)
-				})
-			},
-			immediate: true
-		}
-	},
-	mounted() {
-		this.codeRender()
-	},
-	unmounted() {
-		if (this.codeEditor) this.codeEditor.destroy()
-		this.emitDestroy()
-	},
-	methods: {
-		codeRef() {
-			return this.$refs.codeMirror
-		},
-		async codeRender() {
-			const { codeRef, codeExtensions, modelValue, emitLoaded } = this
-			let docValue = this.getTransformValue(modelValue)
-			let codeState = EditorState.create({
-				doc: docValue,
-				extensions: codeExtensions
-			})
-			this.codeEditor = new EditorView({
-				parent: codeRef(),
-				state: codeState
-			})
-			await this.$nextTick()
-			emitLoaded()
-		},
-		focusListener(state, focusing) {
-			let valueStr = state.doc.toString()
-			if (focusing) {
-				this.emitFocus(valueStr)
-			} else {
-				this.emitValue(valueStr)
-				this.emitBlur(valueStr)
-			}
-		},
-		async updateListener({ state, changes, docChanged }) {
-			if (changes.empty || !docChanged) {
-				return
-			}
-			let valueStr = state.doc.toString()
-			// if (props.linter) {
-			// 	// Linter process
-			// 	if (props.forceLinting) {
-			// 		// If forceLinting enabled, first liting.
-			// 		forceLinting(view.value);
-			// 	}
-			// 	// Count diagnostics.
-			// 	diagnosticCount.value = (
-			// 		props.linter(view.value) as readonly Diagnostic[]
-			// ).length;
-			// }
-			this.emitChange(valueStr)
-		},
-		focus() {
-			this.codeEditor && this.codeEditor.focus()
-		},
-		getTransformValue(value, out) {
-			const { modelValue, indent } = this
-			let result = '',
-				error = null
-			try {
-				if (typeof modelValue === 'object' && value) {
-					result = out ? JSON.parse(value, null, indent) : JSON.stringify(value, null, indent)
-				} else {
-					result = value
-				}
-			} catch (e) {
-				error = e
-			}
-			this.error = error
-			return result
-		},
-		emitValue(value) {
-			let outValue = this.getTransformValue(value, true)
-			if (this.error) return
-			this.$emit('update:modelValue', outValue)
-		},
-		emitChange(value) {
-			this.$emit('change', { value, $event: this.codeEditor })
-		},
-		emitFocus(value) {
-			let outValue = this.getTransformValue(value, true)
-			if (this.error) return
-			this.$emit('focus', { value: outValue, $event: this.codeEditor })
-		},
-		emitBlur(value) {
-			let outValue = this.getTransformValue(value, true)
-			if (this.error) return
-			this.$emit('blur', { value: outValue, $event: this.codeEditor })
-		},
-		emitLoaded() {
-			this.$emit('loaded', { value: this.modelValue, $event: this.codeEditor })
-		},
-		emitDestroy() {
-			this.$emit('destroy', { value: this.modelValue, $event: this.codeEditor })
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.sh-code-editor {
-	display: flex;
-	position: relative;
-	overflow: auto;
-	border-radius: var(--vxe-border-radius);
-	.sh-code-content {
-		flex: 1;
-		display: block;
-	}
-	.sh-code-error {
-		position: absolute;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background-color: var(--vxe-danger-color);
-		color: #fff;
-		padding: 0 5px;
-		font-size: 12px;
-	}
-}
-</style>
+<template>
+	<div class="sh-code-editor" :style="styles">
+		<div ref="codeRef" class="sh-code-content" />
+		<div v-if="codeError" class="sh-code-error" v-html="codeError"></div>
+	</div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { basicSetup } from 'codemirror'
+import { keymap, placeholder, drawSelection, lineNumbers, EditorView } from '@codemirror/view'
+import { Compartment, EditorState, StateEffect } from '@codemirror/state'
+import { defaultKeymap, indentWithTab, historyKeymap, history } from '@codemirror/commands'
+import themes from './themes'
+import { javascript } from '@codemirror/lang-javascript'
+import { sql } from '@codemirror/lang-sql'
+import { json } from '@codemirror/lang-json'
+const tabSize = new Compartment()
+export default defineComponent({
+	name: 'ShCodeEditor',
+	props: {
+		modelValue: {
+			type: [String, Object],
+			default: ''
+		},
+		option: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		mode: {
+			type: String,
+			default: 'javascript'
+		},
+		theme: {
+			type: String,
+			default: ''
+		},
+		placeholder: {
+			type: String,
+			default: ''
+		},
+		disabled: {
+			type: Boolean
+		},
+		border: {
+			type: Boolean
+		},
+		indent: {
+			type: Number,
+			default: 4
+		},
+		wrap: {
+			type: Boolean
+		},
+		tab: {
+			type: Boolean
+		},
+		multipleSelection: {
+			type: Boolean,
+			default: true
+		},
+		extensions: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		width: {
+			type: [String, Number],
+			default: '100%'
+		},
+		height: {
+			type: [String, Number],
+			default: 'auto'
+		}
+	},
+	emits: ['update:modelValue', 'change', 'loaded', 'focus', 'blur', 'destroy'],
+	setup(props, context) {
+		const { emit } = context
+
+		const codeEditor = ref(null)
+		const codeLength = ref(0)
+		const codeError = ref(null)
+		const codeRef = ref()
+
+		const styles = computed(() => {
+			return {
+				width: props.width,
+				height: props.height,
+				border: props.border ? '1px solid var(--vxe-table-border-color)' : 'none'
+			}
+		})
+		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])]
+			if (['javascript', 'js'].includes(mode.toLowerCase())) {
+				defaultExtensions.push(javascript())
+			} else if (['mysql', 'sql'].includes(mode.toLowerCase())) {
+				defaultExtensions.push(sql())
+			} else if (['json'].includes(mode.toLowerCase())) {
+				defaultExtensions.push(json())
+			}
+			return [
+				...defaultExtensions,
+				EditorView.updateListener.of(updateListener),
+				EditorView.focusChangeEffect.of(focusListener),
+				EditorView.editable.of(!disabled),
+				EditorState.allowMultipleSelections.of(multipleSelection),
+				tabSize.of(EditorState.tabSize.of(indent)),
+				theme && themes[theme] ? themes[theme] : undefined,
+				tab ? keymap.of([indentWithTab]) : undefined,
+				wrap ? EditorView.lineWrapping : undefined,
+				...extensions
+			].filter(item => !!item)
+		})
+
+		watch(
+			() => props.modelValue,
+			value => {
+				if (codeEditor.value && !codeEditor.value.composing) {
+					let docLength = codeEditor.value.state.doc.length
+					let docValue = getTransformValue(value)
+					codeEditor.value.dispatch({
+						changes: { from: 0, to: docLength, insert: docValue },
+						selection: codeEditor.value.state.selection,
+						scrollIntoView: true
+					})
+					codeLength.value = docLength
+				}
+			}
+		)
+		watch(
+			() => props.codeExtensions,
+			value => {
+				codeEditor.value?.dispatch({
+					effects: StateEffect.reconfigure.of(value)
+				})
+			},
+			{
+				immediate: true
+			}
+		)
+
+		const codeRender = async () => {
+			let docValue = getTransformValue(props.modelValue)
+			let codeState = new EditorState.create({
+				doc: docValue,
+				extensions: codeExtensions.value
+			})
+			codeEditor.value = new EditorView({
+				parent: codeRef.value,
+				state: codeState
+			})
+			await nextTick()
+			dispatchEvent('loaded', props.modelValue)
+		}
+
+		const focusListener = (state, focusing) => {
+			let valueStr = state.doc.toString()
+			if (focusing) {
+				dispatchEvent('focus', valueStr)
+			} else {
+				dispatchValue(valueStr)
+				dispatchEvent('blur', valueStr)
+			}
+		}
+
+		const updateListener = async ({ state, changes, docChanged }) => {
+			if (changes.empty || !docChanged) return
+			let valueStr = state.doc.toString()
+			dispatchEvent('change', valueStr)
+		}
+
+		const focus = () => {
+			codeEditor.value && codeEditor.value.focus()
+		}
+
+		const getTransformValue = (value, out) => {
+			const { modelValue, indent } = props
+			let result = '',
+				error = null
+			try {
+				if (typeof modelValue === 'object' && value) {
+					result = out ? JSON.parse(value, null, indent) : JSON.stringify(value, null, indent)
+				} else {
+					result = value
+				}
+			} catch (e) {
+				error = e
+			}
+			codeError.value = error
+			return result
+		}
+
+		const dispatchValue = value => {
+			let outValue = getTransformValue(value, true)
+			if (codeError.value) return
+			emit('update:modelValue', outValue)
+		}
+
+		const dispatchEvent = (type, value) => {
+			let outValue = null
+			if (['focus', 'blur'].includes(type)) {
+				outValue = getTransformValue(value, true)
+				if (codeError.value) return
+			}
+			emit(type, { $event: codeEditor.value, value: outValue || value })
+		}
+
+		onMounted(() => {
+			codeRender()
+		})
+		onUnmounted(() => {
+			if (codeEditor.value) codeEditor.value.destroy()
+			dispatchEvent('destroy', props.modelValue)
+		})
+
+		return {
+			codeRef,
+			styles,
+			codeError
+		}
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.sh-code-editor {
+	display: flex;
+	position: relative;
+	overflow: auto;
+	border-radius: var(--vxe-border-radius);
+	.sh-code-content {
+		flex: 1;
+		display: block;
+	}
+	.sh-code-error {
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: var(--vxe-danger-color);
+		color: #fff;
+		padding: 0 5px;
+		font-size: 12px;
+	}
+}
+</style>

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

@@ -5,20 +5,10 @@
 </template>
 
 <script>
+import { defineComponent, computed, inject } from 'vue'
 import './css/index.scss'
-const prefixCls = 'sh-col'
-function parseFlex(flex) {
-	if (typeof flex === 'number') {
-		return `${flex} ${flex} auto`
-	}
-	if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
-		return `0 0 ${flex}`
-	}
-	return flex
-}
-export default {
+export default defineComponent({
 	name: 'ShCol',
-	inject: ['RowInstance'],
 	props: {
 		span: [Number, String],
 		order: [Number, String],
@@ -36,49 +26,67 @@ export default {
 			default: ''
 		}
 	},
-	computed: {
-		gutter() {
-			return this.RowInstance?.gutter || 0
-		},
-		classes() {
+	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-${this.span}`]: this.span,
-					[`${prefixCls}-order-${this.order}`]: this.order,
-					[`${prefixCls}-offset-${this.offset}`]: this.offset,
-					[`${prefixCls}-push-${this.push}`]: this.push,
-					[`${prefixCls}-pull-${this.pull}`]: this.pull
+					[`${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 this[size] === 'number') {
-					classList.push(`${prefixCls}-span-${size}-${this[size]}`)
-				} else if (typeof this[size] === 'object') {
-					let props = this[size]
-					Object.keys(props).forEach(prop => {
-						classList.push(`${prefixCls}-${size}-${prop}-${props[prop]}`)
+				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
-		},
-		styles() {
+		})
+		const styles = computed(() => {
 			let style = {}
-			if (this.gutter !== 0) {
+			if (gutter.value !== 0) {
 				style = {
-					paddingLeft: this.gutter / 2 + 'px',
-					paddingRight: this.gutter / 2 + 'px'
+					paddingLeft: gutter.value / 2 + 'px',
+					paddingRight: gutter.value / 2 + 'px'
 				}
 			}
-			if (this.flex) {
-				style.flex = parseFlex(this.flex)
+			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>