sh-view 2.8.1 → 2.8.2

package/.eslintrc.js

@@ -1,20 +1,25 @@
-module.exports = {
-	root: true,
-	env: {
-		node: true
-	},
-	extends: ['plugin:vue/vue3-recommended', 'plugin:prettier/recommended'],
-	plugins: ['vue', 'prettier'],
-	parserOptions: {
-		parser: '@babel/eslint-parser'
-	},
-	rules: {
-		'prettier/prettier': 'error',
-		'no-console': 'off',
-		'no-debugger': 'off',
-		'no-unused-vars': 'off',
-		'no-empty': 'off',
-		'vue/no-v-html': 'off',
-		'vue/require-default-prop': 'off'
-	}
-}
+module.exports = {
+	root: true,
+	env: {
+		node: true
+	},
+	extends: ['plugin:vue/vue3-essential', '@vue/typescript/recommended', 'plugin:prettier/recommended'],
+	plugins: ['vue', 'prettier'],
+	parserOptions: {
+		ecmaVersion: 2020
+	},
+	rules: {
+		'prettier/prettier': 'error',
+		'prefer-const': 'off',
+		'no-console': 'off',
+		'no-debugger': 'off',
+		'no-unused-vars': 'off',
+		'no-empty': 'off',
+		'vue/no-v-html': 'off',
+		'vue/require-default-prop': 'off',
+		'@typescript-eslint/explicit-module-boundary-types': 'off',
+		'@typescript-eslint/no-explicit-any': 'off',
+		'@typescript-eslint/no-empty-interface': 'off',
+		'@typescript-eslint/no-unused-vars': 'off'
+	}
+}

package/other.js

@@ -1,8 +1,8 @@
-import { defineAsyncComponent } from 'vue'
-
-export const ShCronModal = defineAsyncComponent(() => import('./packages/other/sh-cron-modal/index.vue'))
-export const ShMarkdown = defineAsyncComponent(() => import('./packages/other/sh-markdown/index.vue'))
-export const ShMenu = defineAsyncComponent(() => import('./packages/other/sh-menu/index.vue'))
-export const ShMenuCard = defineAsyncComponent(() => import('./packages/other/sh-menu-card/index.vue'))
-export const ShPreview = defineAsyncComponent(() => import('./packages/other/sh-preview/index.vue'))
-export const ShSystemTip = defineAsyncComponent(() => import('./packages/other/sh-system-tip/index.vue'))
+import { defineAsyncComponent } from 'vue'
+
+export const ShCronModal = defineAsyncComponent(() => import('./packages/other/sh-cron-modal/index.vue'))
+export const ShMarkdown = defineAsyncComponent(() => import('./packages/other/sh-markdown/index.vue'))
+export const ShMenu = defineAsyncComponent(() => import('./packages/other/sh-menu/index.vue'))
+export const ShMenuCard = defineAsyncComponent(() => import('./packages/other/sh-menu-card/index.vue'))
+export const ShPreview = defineAsyncComponent(() => import('./packages/other/sh-preview/index.vue'))
+export const ShSystemTip = defineAsyncComponent(() => import('./packages/other/sh-system-tip/index.vue'))

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "sh-view",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "description": "基于vxe-table二次封装,更包含Alert,Badge,Card,CodeEditor,Col,Corner,CountTo,Drawer,Empty,Form,Header,Icon,List,Loading,Modal,Noticebar,Poptip,Progress,PullRefresh,Query,Result,Row,Split,Grid,Table,Tabs,Tag,Toolbar,Tree,Upload,WaterFall,WaterMark等丰富组件库",
   "main": "packages/index.js",
+  "typings": "types/index.d.ts",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -42,22 +43,24 @@
     "xe-utils": "^3.5.13"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-plugin-router": "~5.0.8",
+    "@vue/cli-plugin-typescript": "^5.0.8",
     "@vue/cli-plugin-vuex": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
+    "@vue/eslint-config-typescript": "^12.0.0",
     "babel-loader": "^9.1.2",
     "compression-webpack-plugin": "~6.1.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "node-polyfill-webpack-plugin": "^2.0.1",
+    "eslint-plugin-vue": "^9.0.0",
     "prettier": "^2.4.1",
     "sass": "^1.32.7",
-    "sass-loader": "^12.0.0"
+    "sass-loader": "^12.0.0",
+    "typescript": "^5.2.2"
   }
 }

package/packages/components/index.js

@@ -1,91 +1,91 @@
-// 全局公共封装组件
-import ShAlert from './sh-alert/index.vue'
-import ShBadge from './sh-badge/index.vue'
-import ShCalendar from './sh-calendar/index.vue'
-import ShCard from './sh-card/index.vue'
-import ShCodeEditor from './sh-code-editor/index.vue'
-import ShCol from './sh-col/index.vue'
-import ShCorner from './sh-corner/index.vue'
-import ShCountTo from './sh-count-to/index.vue'
-import ShDate from './sh-date/index.vue'
-import ShDrawer from './sh-drawer/index.vue'
-import ShEmpty from './sh-empty/index.vue'
-import ShForm from './sh-form/form.vue'
-import ShHeader from './sh-header/index.vue'
-import ShIcon from './sh-icon/index.vue'
-import ShImage from './sh-image/index.vue'
-import ShList from './sh-list/index.vue'
-import ShLoading from './sh-loading/index.vue'
-import ShModal from './sh-modal/index.vue'
-import ShNoticebar from './sh-noticebar/index.vue'
-import ShPoptip from './sh-poptip/index.vue'
-import ShProgress from './sh-progress/index.vue'
-import ShPullRefresh from './sh-pull-refresh/index.vue'
-import ShQuery from './sh-form/query.vue'
-import ShResult from './sh-result/index.vue'
-import ShRow from './sh-row/index.vue'
-import ShSplit from './sh-split/index.vue'
-import ShGrid from './sh-table/grid.vue'
-import ShTable from './sh-table/table.vue'
-import ShTabs from './sh-tabs/index.vue'
-import ShTag from './sh-tag/index.vue'
-import ShToolbar from './sh-toolbar/index.vue'
-import ShTree from './sh-tree/index.vue'
-import ShUpload from './sh-upload/index.vue'
-import ShWaterFall from './sh-water-fall/index.vue'
-import ShWaterMark from './sh-water-mark/index.vue'
-import { VxeButton, VxeInput, VxeTextarea, VxeSelect } from 'vxe-table'
-
-const components = {
-	ShAlert,
-	ShBadge,
-	ShCalendar,
-	ShCard,
-	ShCodeEditor,
-	ShCol,
-	ShCorner,
-	ShCountTo,
-	ShDate,
-	ShDrawer,
-	ShEmpty,
-	ShForm,
-	ShHeader,
-	ShIcon,
-	ShImage,
-	ShList,
-	ShLoading,
-	ShModal,
-	ShNoticebar,
-	ShPoptip,
-	ShProgress,
-	ShPullRefresh,
-	ShQuery,
-	ShResult,
-	ShRow,
-	ShSplit,
-	ShGrid,
-	ShTable,
-	ShTabs,
-	ShTag,
-	ShToolbar,
-	ShTree,
-	ShUpload,
-	ShWaterFall,
-	ShWaterMark,
-
-	ShButton: VxeButton,
-	ShInput: VxeInput,
-	ShTextarea: VxeTextarea,
-	ShSelect: VxeSelect
-}
-
-const index = {
-	install(Vue, { excludeComponents = [] }) {
-		let globalComponentKeys = Object.keys(components).filter(key => !excludeComponents.includes(key))
-		globalComponentKeys.forEach(key => {
-			Vue.component(key, components[key])
-		})
-	}
-}
-
-export default index
+// 全局公共封装组件
+import ShAlert from './sh-alert/index.vue'
+import ShBadge from './sh-badge/index.vue'
+import ShCalendar from './sh-calendar/index.vue'
+import ShCard from './sh-card/index.vue'
+import ShCodeEditor from './sh-code-editor/index.vue'
+import ShCol from './sh-col/index.vue'
+import ShCorner from './sh-corner/index.vue'
+import ShCountTo from './sh-count-to/index.vue'
+import ShDate from './sh-date/index.vue'
+import ShDrawer from './sh-drawer/index.vue'
+import ShEmpty from './sh-empty/index.vue'
+import ShForm from './sh-form/form.vue'
+import ShHeader from './sh-header/index.vue'
+import ShIcon from './sh-icon/index.vue'
+import ShImage from './sh-image/index.vue'
+import ShList from './sh-list/index.vue'
+import ShLoading from './sh-loading/index.vue'
+import ShModal from './sh-modal/index.vue'
+import ShNoticebar from './sh-noticebar/index.vue'
+import ShPoptip from './sh-poptip/index.vue'
+import ShProgress from './sh-progress/index.vue'
+import ShPullRefresh from './sh-pull-refresh/index.vue'
+import ShQuery from './sh-form/query.vue'
+import ShResult from './sh-result/index.vue'
+import ShRow from './sh-row/index.vue'
+import ShSplit from './sh-split/index.vue'
+import ShGrid from './sh-table/grid.vue'
+import ShTable from './sh-table/table.vue'
+import ShTabs from './sh-tabs/index.vue'
+import ShTag from './sh-tag/index.vue'
+import ShToolbar from './sh-toolbar/index.vue'
+import ShTree from './sh-tree/index.vue'
+import ShUpload from './sh-upload/index.vue'
+import ShWaterFall from './sh-water-fall/index.vue'
+import ShWaterMark from './sh-water-mark/index.vue'
+import { VxeButton, VxeInput, VxeTextarea, VxeSelect } from 'vxe-table'
+
+const components = {
+	ShAlert,
+	ShBadge,
+	ShCalendar,
+	ShCard,
+	ShCodeEditor,
+	ShCol,
+	ShCorner,
+	ShCountTo,
+	ShDate,
+	ShDrawer,
+	ShEmpty,
+	ShForm,
+	ShHeader,
+	ShIcon,
+	ShImage,
+	ShList,
+	ShLoading,
+	ShModal,
+	ShNoticebar,
+	ShPoptip,
+	ShProgress,
+	ShPullRefresh,
+	ShQuery,
+	ShResult,
+	ShRow,
+	ShSplit,
+	ShGrid,
+	ShTable,
+	ShTabs,
+	ShTag,
+	ShToolbar,
+	ShTree,
+	ShUpload,
+	ShWaterFall,
+	ShWaterMark,
+
+	ShButton: VxeButton,
+	ShInput: VxeInput,
+	ShTextarea: VxeTextarea,
+	ShSelect: VxeSelect
+}
+
+const index = {
+	install(Vue, { excludeComponents = [] }) {
+		let globalComponentKeys = Object.keys(components).filter(key => !excludeComponents.includes(key))
+		globalComponentKeys.forEach(key => {
+			Vue.component(key, components[key])
+		})
+	}
+}
+
+export default index

package/packages/components/sh-alert/alert.ts

@@ -0,0 +1,30 @@
+import { ShType } from '../../../types/component'
+
+export const alertProps = {
+	type: {
+		type: String as () => ShType,
+		default: 'info'
+	},
+	title: {
+		type: String
+	},
+	content: {
+		type: String
+	},
+	closable: {
+		type: Boolean,
+		default: false
+	},
+	showIcon: {
+		type: Boolean,
+		default: false
+	},
+	fade: {
+		type: Boolean,
+		default: true
+	},
+	block: {
+		type: Boolean,
+		default: false
+	}
+}

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

@@ -1,168 +1,143 @@
-<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 v-if="content || $slots.content" 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 iconTypeMap = {
-			success: 'ios-checkmark-circle',
-			info: 'ios-information-circle',
-			warning: 'ios-alert',
-			error: 'ios-close-circle'
-		}
-
-		const isDesc = computed(() => !!slots.content)
-		const iconType = computed(() => {
-			let type = iconTypeMap[props.type]
-			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>
+<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 v-if="content || $slots.content" 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'
+import { alertProps } from './alert'
+export default defineComponent({
+	name: 'ShAlert',
+	props: alertProps,
+	emits: ['close'],
+	setup(props, context) {
+		const { slots, emit } = context
+		const closed = ref(false)
+
+		const iconTypeMap = {
+			success: 'ios-checkmark-circle',
+			info: 'ios-information-circle',
+			warning: 'ios-alert',
+			error: 'ios-close-circle'
+		}
+
+		const isDesc = computed(() => !!slots.content)
+		const iconType = computed(() => {
+			let type = iconTypeMap[props.type]
+			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>