sh-view 1.7.5 → 2.0.0

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

@@ -1,260 +1,260 @@
-<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: ''
-		},
-		readonly: {
-			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(--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(--border-radius);
-	.sh-code-content {
-		flex: 1;
-		display: block;
-	}
-	.sh-code-error {
-		position: absolute;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background-color: var(--error-color);
-		color: #fff;
-		padding: 0 5px;
-		font-size: 12px;
-	}
-}
-</style>
+<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>

package/packages/components/global-components/sh-col/css/index.scss

@@ -0,0 +1,76 @@
+@use 'sass:math';
+
+$uiprefix: sh;
+
+.#{$uiprefix}-col {
+  position: relative;
+  max-width: 100%;
+  min-height: 1px;
+}
+
+@function percentage ($i, $sum: 24) {
+  @return math.div($i, $sum) * 100%;
+}
+
+.#{$uiprefix}-col-span-0 {
+  display: none;
+}
+
+.#{$uiprefix}-col-xs-span-0 {
+  display: none;
+}
+
+@for $i from 1 through 24 {
+  .#{$uiprefix}-col-offset-#{$i} {
+    margin-left: percentage($i);
+  }
+  .#{$uiprefix}-col-pull-#{$i} {
+    right: percentage($i);
+  }
+  .#{$uiprefix}-col-push-#{$i} {
+    left: percentage($i);
+  }
+  .#{$uiprefix}-col-span-#{$i} {
+    display: block;
+    flex: 0 0 percentage($i);
+    width: percentage($i);
+  }
+  .#{$uiprefix}-col-xs-offset-#{$i} {
+    margin-left: percentage($i);
+  }
+  .#{$uiprefix}-col-xs-pull-#{$i} {
+    right: percentage($i);
+  }
+  .#{$uiprefix}-col-xs-push-#{$i} {
+    left: percentage($i);
+  }
+  .#{$uiprefix}-col-xs-span-#{$i} {
+    display: block;
+    flex: 0 0 percentage($i);
+    width: percentage($i);
+  }
+}
+
+@each $size, $value in (sm, 576), (md, 768), (lg, 992), (xl, 1200), (xxl, 1600) {
+  @media screen and (min-width: #{$value}px) {
+    .#{$uiprefix}-col-#{$size}-span-0 {
+      display: none;
+    }
+    @for $i from 1 through 24 {
+      .#{$uiprefix}-col-#{$size}-offset-#{$i} {
+        margin-left: percentage($i);
+      }
+      .#{$uiprefix}-col-#{$size}-pull-#{$i} {
+        right: percentage($i);
+      }
+      .#{$uiprefix}-col-#{$size}-push-#{$i} {
+        left: percentage($i);
+      }
+      .#{$uiprefix}-col-#{$size}-span-#{$i} {
+        display: block;
+        flex: 0 0 percentage($i);
+        width: percentage($i);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,83 @@
+<template>
+	<div :class="classes" :style="styles">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+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 {
+	name: 'ShCol',
+	inject: ['RowInstance'],
+	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: ''
+		}
+	},
+	computed: {
+		gutter() {
+			return this.RowInstance?.gutter || 0
+		},
+		classes() {
+			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
+				}
+			]
+			;['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].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(prop !== 'span' ? `${prefixCls}-${size}-${prop}-${props[prop]}` : `${prefixCls}-span-${size}-${props[prop]}`)
+					})
+				}
+			})
+			return classList
+		},
+		styles() {
+			let style = {}
+			if (this.gutter !== 0) {
+				style = {
+					paddingLeft: this.gutter / 2 + 'px',
+					paddingRight: this.gutter / 2 + 'px'
+				}
+			}
+			if (this.flex) {
+				style.flex = parseFlex(this.flex)
+			}
+			return style
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss"></style>