sh-view 1.5.2 → 1.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "基于vxe-table、view-ui-plus二次封装",
   "main": "packages/index.js",
   "scripts": {

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

@@ -10,10 +10,10 @@ 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 language = new Compartment()
 const tabSize = new Compartment()
 export default {
 	name: 'ShCodeEditor',
@@ -34,7 +34,7 @@ export default {
 		},
 		theme: {
 			type: String,
-			default: 'default'
+			default: ''
 		},
 		placeholder: {
 			type: String,
@@ -76,12 +76,11 @@ export default {
 			default: 'auto'
 		}
 	},
-	emits: ['update:modelValue', 'change', 'loaded', 'focus', 'destroy'],
+	emits: ['update:modelValue', 'change', 'loaded', 'focus', 'blur', 'destroy'],
 	data() {
 		return {
 			codeEditor: null,
 			codeLength: 0,
-			result: '',
 			error: null
 		}
 	},
@@ -93,48 +92,42 @@ export default {
 				border: this.border ? '1px solid var(--border-color)' : 'none'
 			}
 		},
-		codeFocus() {
-			return this.codeEditor && this.codeEditor?.hasFocus
-		},
 		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(this.mode.toLowerCase())) {
+			if (['javascript', 'js'].includes(mode.toLowerCase())) {
 				defaultExtensions.push(javascript())
-			} else if (['mysql', 'sql'].includes(this.mode.toLowerCase())) {
+			} else if (['mysql', 'sql'].includes(mode.toLowerCase())) {
 				defaultExtensions.push(sql())
-			} else if (['json'].includes(this.mode.toLowerCase())) {
+			} else if (['json'].includes(mode.toLowerCase())) {
 				defaultExtensions.push(json())
 			}
 			return [
 				...defaultExtensions,
 				EditorView.updateListener.of(this.updateListener),
-				EditorView.theme(null, { dark: this.theme === 'dark' }),
-				EditorView.editable.of(!this.disabled),
-				EditorState.allowMultipleSelections.of(this.multipleSelection),
-				tabSize.of(EditorState.tabSize.of(this.indent)),
-				this.tab ? keymap.of([indentWithTab]) : undefined,
-				this.wrap ? EditorView.lineWrapping : undefined,
-				...this.extensions
+				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: {
-			handler(value) {
-				if (this.codeEditor) {
-					if (this.codeEditor.composing) return
-					// this.codeEditor.dispatch({
-					// 	changes: { from: 0, to: this.codeEditor.state.doc.length, insert: value },
-					// 	selection: this.codeEditor.state.selection,
-					// 	scrollIntoView: true
-					// })
-					this.codeLength = this.codeEditor.state.doc.length
-				}
-			},
-			immediate: true
-		},
-		codeFocus(value) {
-			this.emitFocus(value)
+		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) {
@@ -158,9 +151,9 @@ export default {
 		},
 		async codeRender() {
 			const { codeRef, codeExtensions, modelValue, emitLoaded } = this
-			let docText = typeof modelValue === 'object' ? JSON.stringify(modelValue) : modelValue
+			let docValue = this.getTransformValue(modelValue)
 			let codeState = EditorState.create({
-				doc: docText,
+				doc: docValue,
 				extensions: codeExtensions
 			})
 			this.codeEditor = new EditorView({
@@ -170,6 +163,15 @@ export default {
 			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
@@ -186,22 +188,44 @@ export default {
 			// 		props.linter(view.value) as readonly Diagnostic[]
 			// ).length;
 			// }
-			this.emitValue(valueStr)
 			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') {
+					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 emitValue = typeof this.modelValue === 'object' ? JSON.parse(value) : value
-			this.$emit('update:modelValue', emitValue)
+			let outValue = this.getTransformValue(value, true)
+			if (this.error) return
+			this.$emit('update:modelValue', outValue)
 		},
 		emitChange(value) {
 			this.$emit('change', { value, $event: this.codeEditor })
-			this.emitValue(value)
 		},
 		emitFocus(value) {
-			this.$emit('focus', 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 })

package/packages/components/global-components/sh-code-editor/themes/dark.js

@@ -0,0 +1,100 @@
+import { EditorView } from '@codemirror/view'
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { tags } from '@lezer/highlight'
+
+const chalky = '#e5c07b',
+	coral = '#e06c75',
+	cyan = '#56b6c2',
+	invalid = '#ffffff',
+	ivory = '#abb2bf',
+	stone = '#7d8799', // Brightened compared to original to increase contrast
+	malibu = '#61afef',
+	sage = '#98c379',
+	whiskey = '#d19a66',
+	violet = '#c678dd',
+	darkBackground = '#21252b',
+	highlightBackground = '#2c313a',
+	background = '#282c34',
+	tooltipBackground = '#353a42',
+	selection = '#3E4451',
+	cursor = '#528bff'
+
+const theme = EditorView.theme({
+	'&': {
+		color: ivory,
+		backgroundColor: background,
+		height: '100%'
+	},
+	'.cm-content': {
+		caretColor: cursor
+	},
+	'.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
+	'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection },
+	'.cm-panels': { backgroundColor: darkBackground, color: ivory },
+	'.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
+	'.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
+	'.cm-searchMatch': {
+		backgroundColor: '#72a1ff59',
+		outline: '1px solid #457dff'
+	},
+	'.cm-searchMatch.cm-searchMatch-selected': {
+		backgroundColor: '#6199ff2f'
+	},
+	'.cm-activeLine': { backgroundColor: '#6699ff0b' },
+	'.cm-selectionMatch': { backgroundColor: '#aafe661a' },
+	'&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+		backgroundColor: '#bad0f847'
+	},
+	'.cm-gutters': {
+		backgroundColor: background,
+		color: stone,
+		border: 'none'
+	},
+	'.cm-activeLineGutter': {
+		backgroundColor: highlightBackground
+	},
+	'.cm-foldPlaceholder': {
+		backgroundColor: 'transparent',
+		border: 'none',
+		color: '#ddd'
+	},
+	'.cm-tooltip': {
+		border: 'none',
+		backgroundColor: tooltipBackground
+	},
+	'.cm-tooltip .cm-tooltip-arrow:before': {
+		borderTopColor: 'transparent',
+		borderBottomColor: 'transparent'
+	},
+	'.cm-tooltip .cm-tooltip-arrow:after': {
+		borderTopColor: tooltipBackground,
+		borderBottomColor: tooltipBackground
+	},
+	'.cm-tooltip-autocomplete': {
+		'& > ul > li[aria-selected]': {
+			backgroundColor: highlightBackground,
+			color: ivory
+		}
+	}
+})
+
+const themeHighlightStyle = HighlightStyle.define([
+	{ tag: tags.keyword, color: violet },
+	{ tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName], color: coral },
+	{ tag: [tags.function(tags.variableName), tags.labelName], color: malibu },
+	{ tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: whiskey },
+	{ tag: [tags.definition(tags.name), tags.separator], color: ivory },
+	{ tag: [tags.typeName, tags.className, tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: chalky },
+	{ tag: [tags.operator, tags.operatorKeyword, tags.url, tags.escape, tags.regexp, tags.link, tags.special(tags.string)], color: cyan },
+	{ tag: [tags.meta, tags.comment], color: stone },
+	{ tag: tags.strong, fontWeight: 'bold' },
+	{ tag: tags.emphasis, fontStyle: 'italic' },
+	{ tag: tags.strikethrough, textDecoration: 'line-through' },
+	{ tag: tags.link, color: stone, textDecoration: 'underline' },
+	{ tag: tags.heading, fontWeight: 'bold', color: coral },
+	{ tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: whiskey },
+	{ tag: [tags.processingInstruction, tags.string, tags.inserted], color: sage },
+	{ tag: tags.invalid, color: invalid }
+])
+
+export default [theme, syntaxHighlighting(themeHighlightStyle)]

package/packages/components/global-components/sh-code-editor/themes/dracula.js

@@ -0,0 +1,100 @@
+import { EditorView } from '@codemirror/view'
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { tags } from '@lezer/highlight'
+
+const chalky = '#bd93f9',
+	coral = '#e06c75',
+	cyan = '#56b6c2',
+	invalid = '#ffffff',
+	ivory = '#f8f8f2',
+	stone = '#7d8799', // Brightened compared to original to increase contrast
+	malibu = '#61afef',
+	sage = '#66d9ef',
+	whiskey = '#d19a66',
+	violet = '#c678dd',
+	darkBackground = '#21252b',
+	highlightBackground = '#2c313a',
+	background = '#282a36',
+	tooltipBackground = '#353a42',
+	selection = '#3E4451',
+	cursor = '#528bff'
+
+const theme = EditorView.theme({
+	'&': {
+		color: ivory,
+		backgroundColor: background,
+		height: '100%'
+	},
+	'.cm-content': {
+		caretColor: cursor
+	},
+	'.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
+	'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection },
+	'.cm-panels': { backgroundColor: darkBackground, color: ivory },
+	'.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
+	'.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
+	'.cm-searchMatch': {
+		backgroundColor: '#72a1ff59',
+		outline: '1px solid #457dff'
+	},
+	'.cm-searchMatch.cm-searchMatch-selected': {
+		backgroundColor: '#6199ff2f'
+	},
+	'.cm-activeLine': { backgroundColor: '#6699ff0b' },
+	'.cm-selectionMatch': { backgroundColor: '#aafe661a' },
+	'&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+		backgroundColor: '#bad0f847'
+	},
+	'.cm-gutters': {
+		backgroundColor: background,
+		color: stone,
+		border: 'none'
+	},
+	'.cm-activeLineGutter': {
+		backgroundColor: highlightBackground
+	},
+	'.cm-foldPlaceholder': {
+		backgroundColor: 'transparent',
+		border: 'none',
+		color: '#ddd'
+	},
+	'.cm-tooltip': {
+		border: 'none',
+		backgroundColor: tooltipBackground
+	},
+	'.cm-tooltip .cm-tooltip-arrow:before': {
+		borderTopColor: 'transparent',
+		borderBottomColor: 'transparent'
+	},
+	'.cm-tooltip .cm-tooltip-arrow:after': {
+		borderTopColor: tooltipBackground,
+		borderBottomColor: tooltipBackground
+	},
+	'.cm-tooltip-autocomplete': {
+		'& > ul > li[aria-selected]': {
+			backgroundColor: highlightBackground,
+			color: ivory
+		}
+	}
+})
+
+const themeHighlightStyle = HighlightStyle.define([
+	{ tag: tags.keyword, color: violet },
+	{ tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName], color: coral },
+	{ tag: [tags.function(tags.variableName), tags.labelName], color: malibu },
+	{ tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: whiskey },
+	{ tag: [tags.definition(tags.name), tags.separator], color: ivory },
+	{ tag: [tags.typeName, tags.className, tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: chalky },
+	{ tag: [tags.operator, tags.operatorKeyword, tags.url, tags.escape, tags.regexp, tags.link, tags.special(tags.string)], color: cyan },
+	{ tag: [tags.meta, tags.comment], color: stone },
+	{ tag: tags.strong, fontWeight: 'bold' },
+	{ tag: tags.emphasis, fontStyle: 'italic' },
+	{ tag: tags.strikethrough, textDecoration: 'line-through' },
+	{ tag: tags.link, color: stone, textDecoration: 'underline' },
+	{ tag: tags.heading, fontWeight: 'bold', color: coral },
+	{ tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: whiskey },
+	{ tag: [tags.processingInstruction, tags.string, tags.inserted], color: sage },
+	{ tag: tags.invalid, color: invalid }
+])
+
+export default [theme, syntaxHighlighting(themeHighlightStyle)]

package/packages/components/global-components/sh-code-editor/themes/index.js

@@ -0,0 +1,7 @@
+import dark from './dark'
+import dracula from './dracula'
+
+export default {
+	dark,
+	dracula
+}