sh-view 2.1.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "基于vxe-table二次封装",
   "main": "packages/index.js",
   "scripts": {
@@ -18,35 +18,32 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.5.2",
     "@tinymce/tinymce-vue": "^5.0.0",
-    "@vue-office/docx": "^1.2.3",
-    "@vue-office/excel": "^1.2.7",
-    "@vue-office/pdf": "^1.2.6",
     "babel-polyfill": "^6.26.0",
     "codemirror": "^6.0.1",
-    "core-js": "^3.32.0",
+    "core-js": "^3.32.2",
     "countup.js": "^1.9.3",
     "cron-parser": "^4.8.1",
+    "docx-preview": "^0.1.18",
     "exceljs": "^4.3.0",
     "jspdf": "^2.5.1",
     "jszip": "^3.10.1",
     "popper.js": "^1.16.1",
-    "sh-tools": "^1.5.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "sh-tools": "^1.6.0",
     "tinymce": "^5.10.5",
     "vue": "^3.3.4",
-    "vue-demi": "^0.13.11",
     "vue-masonry": "^0.16.0",
-    "vue-router": "^4.2.2",
-    "vuex": "^4.1.0",
-    "vxe-table": "^4.5.8",
+    "vue-router": "^4.2.4",
+    "vxe-table": "^4.5.9",
     "vxe-table-plugin-export-pdf": "^3.0.4",
     "vxe-table-plugin-export-xlsx": "^3.0.5",
+    "x-data-spreadsheet": "^1.1.9",
     "xe-clipboard": "^1.10.2",
-    "xe-utils": "^3.5.11"
+    "xe-utils": "^3.5.13"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-plugin-router": "~5.0.8",
@@ -58,7 +55,6 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.0.3",
-    "html-webpack-tags-plugin": "^3.0.2",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "prettier": "^2.4.1",
     "sass": "^1.32.7",

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

@@ -1,173 +1,175 @@
-<template>
-	<transition :name="fade ? 'fade' : ''">
-		<div v-if="!closed" class="sh-alert" :class="classes">
-			<div v-if="showIcon" class="sh-alert-icon">
-				<slot name="icon">
-					<sh-icon :type="iconType"></sh-icon>
-				</slot>
-			</div>
-			<div class="sh-alert-content">
-				<slot>{{ title }}</slot>
-				<div class="sh-alert-desc">
-					<slot name="content">{{ content }}</slot>
-				</div>
-			</div>
-			<a v-if="closable" class="sh-alert-close" @click="close">
-				<slot name="close"><sh-icon type="ios-close"></sh-icon></slot>
-			</a>
-		</div>
-	</transition>
-</template>
-
-<script>
-export default {
-	name: 'ShAlert',
-	props: {
-		type: {
-			type: String,
-			default: 'info' // 'success', 'info', 'warning', 'error'
-		},
-		title: {
-			type: String
-		},
-		content: {
-			type: String
-		},
-		closable: {
-			type: Boolean,
-			default: false
-		},
-		showIcon: {
-			type: Boolean,
-			default: false
-		},
-		fade: {
-			type: Boolean,
-			default: true
-		},
-		block: {
-			type: Boolean
-		}
-	},
-	emits: ['close'],
-	data() {
-		return {
-			closed: false
-		}
-	},
-	computed: {
-		isDesc() {
-			return this.$slots.content
-		},
-		iconType() {
-			let type = ''
-			switch (this.type) {
-				case 'success':
-					type = 'ios-checkmark-circle'
-					break
-				case 'info':
-					type = 'ios-information-circle'
-					break
-				case 'warning':
-					type = 'ios-alert'
-					break
-				case 'error':
-					type = 'ios-close-circle'
-					break
-			}
-			if (this.isDesc) type += '-outline'
-			return type
-		},
-		classes() {
-			return {
-				[`${this.type}`]: true,
-				block: this.block,
-				desc: this.isDesc
-			}
-		}
-	},
-	methods: {
-		close(e) {
-			this.closed = true
-			this.$emit('close', e)
-		}
-	}
-}
-</script>
-
-<style scoped lang="scss">
-$base-font-size: 14px;
-$medium-font-size: 16px;
-$large-font-size: 18px;
-
-@mixin iconBase {
-	padding: 0 5px;
-	font-size: $medium-font-size;
-	line-height: 1;
-}
-
-.sh-alert {
-	position: relative;
-	border-radius: var(--vxe-border-radius);
-	color: var(--vxe-font-color);
-	display: inline-flex;
-	align-items: center;
-	padding: 5px;
-	margin-bottom: 10px;
-	&.block {
-		display: flex;
-	}
-	&.desc {
-		font-size: $large-font-size;
-		.sh-alert-icon,
-		.sh-alert-close {
-			font-size: 24px;
-			padding: 0 10px;
-		}
-		.sh-alert-content {
-			padding: 0 10px;
-		}
-	}
-	&-icon {
-		@include iconBase;
-	}
-	&-content {
-		flex: 1;
-		.sh-alert-desc {
-			font-size: $base-font-size;
-		}
-	}
-	&-close {
-		@include iconBase;
-		cursor: pointer;
-	}
-	&.success {
-		border: 1px solid var(--vxe-success-color);
-		background-color: #edfff3;
-		.sh-alert-icon {
-			color: var(--vxe-success-color);
-		}
-	}
-	&.info {
-		border: 1px solid var(--vxe-info-color);
-		background-color: #f0faff;
-		.sh-alert-icon {
-			color: var(--vxe-info-color);
-		}
-	}
-	&.warning {
-		border: 1px solid var(--vxe-warning-color);
-		background-color: #fff9e6;
-		.sh-alert-icon {
-			color: var(--vxe-warning-color);
-		}
-	}
-	&.error {
-		border: 1px solid var(--vxe-danger-color);
-		background-color: #ffefe6;
-		.sh-alert-icon {
-			color: var(--vxe-danger-color);
-		}
-	}
-}
-</style>
+<template>
+	<transition :name="fade ? 'fade' : ''">
+		<div v-if="!closed" class="sh-alert" :class="classes">
+			<div v-if="showIcon" class="sh-alert-icon">
+				<slot name="icon">
+					<sh-icon :type="iconType"></sh-icon>
+				</slot>
+			</div>
+			<div class="sh-alert-content">
+				<slot>{{ title }}</slot>
+				<div class="sh-alert-desc">
+					<slot name="content">{{ content }}</slot>
+				</div>
+			</div>
+			<a v-if="closable" class="sh-alert-close" @click="close">
+				<slot name="close"><sh-icon type="ios-close"></sh-icon></slot>
+			</a>
+		</div>
+	</transition>
+</template>
+
+<script>
+import { defineComponent, ref, computed } from 'vue'
+export default defineComponent({
+	name: 'ShAlert',
+	props: {
+		type: {
+			type: String,
+			default: 'info' // 'success', 'info', 'warning', 'error'
+		},
+		title: {
+			type: String
+		},
+		content: {
+			type: String
+		},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		showIcon: {
+			type: Boolean,
+			default: false
+		},
+		fade: {
+			type: Boolean,
+			default: true
+		},
+		block: {
+			type: Boolean
+		}
+	},
+	emits: ['close'],
+	setup(props, context) {
+		const { slots, emit } = context
+		const closed = ref(false)
+
+		const isDesc = computed(() => !!slots.content)
+		const iconType = computed(() => {
+			let type = ''
+			switch (props.type) {
+				case 'success':
+					type = 'ios-checkmark-circle'
+					break
+				case 'info':
+					type = 'ios-information-circle'
+					break
+				case 'warning':
+					type = 'ios-alert'
+					break
+				case 'error':
+					type = 'ios-close-circle'
+					break
+			}
+			if (isDesc.value) type += '-outline'
+			return type
+		})
+		const classes = computed(() => {
+			return {
+				[`${props.type}`]: true,
+				block: props.block,
+				desc: isDesc.value
+			}
+		})
+
+		const close = e => {
+			closed.value = true
+			emit('close', e)
+		}
+		return {
+			closed,
+			classes,
+			iconType,
+			close
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss">
+$base-font-size: 14px;
+$medium-font-size: 16px;
+$large-font-size: 18px;
+
+@mixin iconBase {
+	padding: 0 5px;
+	font-size: $medium-font-size;
+	line-height: 1;
+}
+
+.sh-alert {
+	position: relative;
+	border-radius: var(--vxe-border-radius);
+	color: var(--vxe-font-color);
+	display: inline-flex;
+	align-items: center;
+	padding: 5px;
+	margin-bottom: 10px;
+	&.block {
+		display: flex;
+	}
+	&.desc {
+		font-size: $large-font-size;
+		.sh-alert-icon,
+		.sh-alert-close {
+			font-size: 24px;
+			padding: 0 10px;
+		}
+		.sh-alert-content {
+			padding: 0 10px;
+		}
+	}
+	&-icon {
+		@include iconBase;
+	}
+	&-content {
+		flex: 1;
+		.sh-alert-desc {
+			font-size: $base-font-size;
+		}
+	}
+	&-close {
+		@include iconBase;
+		cursor: pointer;
+	}
+	&.success {
+		border: 1px solid var(--vxe-success-color);
+		background-color: #edfff3;
+		.sh-alert-icon {
+			color: var(--vxe-success-color);
+		}
+	}
+	&.info {
+		border: 1px solid var(--vxe-info-color);
+		background-color: #f0faff;
+		.sh-alert-icon {
+			color: var(--vxe-info-color);
+		}
+	}
+	&.warning {
+		border: 1px solid var(--vxe-warning-color);
+		background-color: #fff9e6;
+		.sh-alert-icon {
+			color: var(--vxe-warning-color);
+		}
+	}
+	&.error {
+		border: 1px solid var(--vxe-danger-color);
+		background-color: #ffefe6;
+		.sh-alert-icon {
+			color: var(--vxe-danger-color);
+		}
+	}
+}
+</style>

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

@@ -1,7 +1,7 @@
 <template>
 	<span v-if="dot" ref="badge" class="sh-badge">
 		<slot></slot>
-		<sup v-show="badge" class="sh-badge-dot" :style="styles"></sup>
+		<sup v-show="hasBadge" class="sh-badge-dot" :style="styles"></sup>
 	</span>
 	<span v-else-if="status || color" ref="badge" class="sh-badge sh-badge-status">
 		<span :class="statusClasses" :style="statusStyles"></span>
@@ -11,15 +11,16 @@
 	</span>
 	<span v-else ref="badge" class="sh-badge">
 		<slot></slot>
-		<sup v-if="$slots.count" :style="styles" class="sh-badge-count sh-badge-count-custom" :class="className"><slot name="count"></slot></sup>
-		<sup v-else-if="hasCount" v-show="badge" class="sh-badge-count" :style="styles" :class="countClasses">
+		<sup v-if="slots.count" :style="styles" class="sh-badge-count sh-badge-count-custom" :class="className"><slot name="count"></slot></sup>
+		<sup v-else-if="hasCount" v-show="hasBadge" class="sh-badge-count" :style="styles" :class="countClasses">
 			<slot name="text">{{ finalCount }}</slot>
 		</sup>
 	</span>
 </template>
 
 <script>
-export default {
+import { defineComponent, computed } from 'vue'
+export default defineComponent({
 	name: 'ShBadge',
 	props: {
 		count: Number,
@@ -36,61 +37,74 @@ export default {
 		offset: Array,
 		color: String
 	},
-	computed: {
-		countClasses() {
+	setup(props, context) {
+		const { slots } = context
+
+		const alone = computed(() => {
+			return slots.default === undefined
+		})
+		const countClasses = computed(() => {
 			return {
-				[`${this.className}`]: !!this.className,
-				[`sh-badge-count-alone`]: this.alone,
-				[`sh-badge-count-${this.type}`]: !!this.type
+				[`${props.className}`]: !!props.className,
+				[`sh-badge-count-alone`]: alone.value,
+				[`sh-badge-count-${props.type}`]: !!props.type
 			}
-		},
-		statusClasses() {
+		})
+		const statusClasses = computed(() => {
 			return {
 				[`sh-badge-status-dot`]: true,
-				[`sh-badge-status-${this.status}`]: !!this.status
+				[`sh-badge-status-${props.status}`]: !!props.status
 			}
-		},
-		statusStyles() {
-			return { backgroundColor: this.color }
-		},
-		styles() {
+		})
+		const statusStyles = computed(() => {
+			return { backgroundColor: props.color }
+		})
+		const styles = computed(() => {
 			const style = {}
-			if (this.offset && this.offset.length === 2) {
-				style['margin-top'] = `${this.offset[0]}px`
-				style['margin-right'] = `${this.offset[1]}px`
+			if (props.offset && props.offset.length === 2) {
+				style['margin-top'] = `${props.offset[0]}px`
+				style['margin-right'] = `${props.offset[1]}px`
 			}
 			return style
-		},
-		finalCount() {
-			if (this.text) return this.text
-			return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count
-		},
-		badge() {
-			let status = false
-			if (this.count) {
-				status = !(parseInt(this.count) === 0)
+		})
+		const finalCount = computed(() => {
+			if (props.text) return props.text
+			return parseInt(props.count) >= parseInt(props.overflowCount) ? `${props.overflowCount}+` : props.count
+		})
+		const hasBadge = computed(() => {
+			if (props.count) {
+				status = !(parseInt(props.count) === 0)
 			}
-			if (this.dot) {
+			if (props.dot) {
 				status = true
-				if (this.count !== null) {
-					if (parseInt(this.count) === 0) {
+				if (props.count !== null) {
+					if (parseInt(props.count) === 0) {
 						status = false
 					}
 				}
 			}
-			if (this.text !== '') status = true
-			return status || this.showZero
-		},
-		hasCount() {
-			if (this.count || this.text !== '') return true
-			if (this.showZero && parseInt(this.count) === 0) return true
-			else return false
-		},
-		alone() {
-			return this.$slots.default === undefined
+			if (props.text !== '') status = true
+			return status || props.showZero
+		})
+		const hasCount = computed(() => {
+			if (props.count || props.text !== '') return true
+			if (props.showZero && parseInt(props.count) === 0) return true
+			return false
+		})
+
+		return {
+			alone,
+			countClasses,
+			statusClasses,
+			statusStyles,
+			styles,
+			finalCount,
+			hasBadge,
+			hasCount,
+			slots
 		}
 	}
-}
+})
 </script>
 
 <style scoped lang="scss">

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

@@ -1,27 +1,27 @@
 <template>
 	<div class="sh-card" :class="classes">
-		<div v-if="title || $slots.title || $slots.extra" class="sh-card-head" :style="styles">
+		<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">
+				<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>
+				<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">
+		<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">
+		<div v-if="slots.foot" class="sh-card-foot" :style="styles">
 			<slot name="foot"></slot>
 		</div>
 	</div>
 </template>
 
 <script>
-export default {
+import { defineComponent, computed } from 'vue'
+export default defineComponent({
 	name: 'ShCard',
-	components: {},
 	props: {
 		border: {
 			type: Boolean,
@@ -54,21 +54,29 @@ export default {
 			default: 'default' //  large / medium / small / mini
 		}
 	},
-	computed: {
-		classes() {
+	setup(props, context) {
+		const { slots } = context
+
+		const classes = computed(() => {
 			return {
-				border: this.border,
-				shadow: this.shadow,
-				[this.size]: this.size
+				border: props.border,
+				shadow: props.shadow,
+				[props.size]: props.size
 			}
-		},
-		styles() {
+		})
+		const styles = computed(() => {
 			return {
-				padding: `${this.padding}px`
+				padding: `${props.padding}px`
 			}
+		})
+
+		return {
+			classes,
+			styles,
+			slots
 		}
 	}
-}
+})
 </script>
 
 <style lang="scss" scoped>