sh-view 2.8.10 → 2.8.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.8.10",
+  "version": "2.8.12",
   "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",
@@ -32,7 +32,7 @@
     "jszip": "^3.10.1",
     "lunar-typescript": "^1.6.10",
     "popper.js": "^1.16.1",
-    "sh-tools": "^2.2.7",
+    "sh-tools": "^2.2.10",
     "tinymce": "^5.10.5",
     "vue": "^3.3.4",
     "vue-masonry": "^0.16.0",

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

@@ -66,7 +66,7 @@ export default defineComponent({
 		maxDate: [String, Number, Date],
 		startDay: { type: [String, Number] },
 		labelFormat: { type: String },
-		valueFormat: { type: String },
+		format: { type: String },
 		editable: { type: Boolean, default: true },
 		festivalMethod: { type: Function },
 		disabledMethod: { type: Function },
@@ -78,7 +78,6 @@ export default defineComponent({
 		transfer: Boolean,
 		// 个性化参数
 		range: Boolean,
-		rangeFormat: String,
 		autoBlur: { type: Boolean, default: true },
 		separator: { type: String, default: '至' },
 		startPlaceholder: { type: String, default: '起始日期' },
@@ -124,10 +123,9 @@ export default defineComponent({
 			return Object.assign({ transfer: true }, props.pulldown)
 		})
 		const calendarFormat = computed(() => {
-			if (props.rangeFormat) return props.rangeFormat
-			else if (props.type === 'month') return 'yyyy-MM'
+			if (props.type === 'month') return 'yyyy-MM'
 			else if (props.type === 'year') return 'yyyy'
-			return props.valueFormat
+			return props.format || 'yyyy-MM-dd'
 		})
 		const rangeInputConfig = computed(() => ({ type: 'text', readonly: true }))
 		const startInputConfig = computed(() => {

package/packages/components/sh-form/form.vue

@@ -53,6 +53,7 @@ export default defineComponent({
 <style lang="scss">
 .sh-vxe-form {
 	position: relative;
+	width: 100%;
 	&.readonly {
 		.vxe-form {
 			.vxe-input--inner[disabled],

package/packages/components/sh-table/grid.vue

@@ -82,10 +82,6 @@
 			<template #empty>
 				<sh-empty :icon="emptyIcon" :content="emptyText"></sh-empty>
 			</template>
-			<template v-for="slot in tableSlots" #[slot]="scope">
-				<!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
-				<slot :name="slot" v-bind="scope"></slot>
-			</template>
 		</vxe-grid>
 		<!--导入弹窗-->
 		<importModal v-if="importBindConfig.modalConfig.modelValue" v-bind="importBindConfig" @confirm="setImportData"></importModal>

package/packages/components/sh-table/js/tableMethods.js

@@ -103,12 +103,21 @@ export const getFieldRules = (ori, rules) => {
 	}
 }
 // 转换生成新表头数据
-export const getTransfarFields = (oriArr = [], columnObj, isSearch) => {
+export const getTransfarFields = (oriArr = [], { slots, columnObj, isSearch }) => {
 	let rules = {}
 	let columnsFlatArr = []
 	let formItemsArr = []
 	let columnsArr = $vUtils.mapTree(oriArr, ori => {
-		let tar = Object.assign({}, columnObj, ori)
+		let slotObj = {}
+		// 将插槽转换为函数式
+		if (slots && ori.slots) {
+			Object.keys(ori.slots).forEach(slotKey => {
+				if ($vUtils.isString(ori.slots[slotKey])) {
+					$vUtils.set(slotObj, `slots.${slotKey}`, slots[ori.slots[slotKey]])
+				}
+			})
+		}
+		let tar = Object.assign({}, columnObj, ori, slotObj)
 		if (ori.children && ori.children.length > 0) {
 			tar.sortable = false
 			tar.filter = false

package/packages/components/sh-table/js/useTable.js

@@ -259,7 +259,7 @@ export default function (props, context, proxy, isGrid) {
 		selectionRows.value = selections
 	}
 	const updateExpended = () => {
-		if (tableRef.value && tableTreeConfig.value.expandAll) {
+		if (tableRef.value && tableTreeConfig.value && tableTreeConfig.value.expandAll) {
 			setTimeout(() => {
 				tableRef.value.setAllTreeExpand(true)
 			})
@@ -404,7 +404,7 @@ export default function (props, context, proxy, isGrid) {
 
 	// 初始化生成新表头数据
 	const initTableColumns = () => {
-		let transResult = getTransfarFields(props.columns, tableColumnObjConfig.value, tableGlobalConfig.value.search)
+		let transResult = getTransfarFields(props.columns, { slots, columnObj: tableColumnObjConfig.value, isSearch: tableGlobalConfig.value.search })
 		tableColumnsFlat.value = transResult.columnsFlatArr
 		tableFormItems.value = transResult.formItemsArr
 		tableColumnsFixed.value = transResult.columnsArr

package/packages/components/sh-table/table.vue

@@ -71,10 +71,6 @@
 			<template #empty>
 				<sh-empty :icon="emptyIcon" :content="emptyText"></sh-empty>
 			</template>
-			<template v-for="slot in tableSlots" #[slot]="scope">
-				<!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
-				<slot :name="slot" v-bind="scope"></slot>
-			</template>
 		</vxe-table>
 		<div v-if="isFootSlot" ref="footSlotRef" v-resize="handleResize" class="sh-table-foot"><slot name="foot"></slot></div>
 		<div v-if="isPagerSlot" ref="pagerSlotRef" v-resize="handleResize" class="sh-table-pager">

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

@@ -63,11 +63,11 @@ export default defineComponent({
 		},
 		type: {
 			type: String,
-			default: 'line' // 'line', 'card'
+			default: 'line' // 'line', 'card', 'tab'
 		},
 		size: {
 			type: String,
-			default: 'default' // 'small', 'default'
+			default: 'default' //  medium / small / mini
 		},
 		animated: {
 			type: Boolean,
@@ -110,7 +110,9 @@ export default defineComponent({
 		const tabClass = computed(() => {
 			return {
 				'sh-tabs-card': props.type === 'card',
+				'sh-tabs-tab': props.type === 'tab',
 				'sh-tabs-reverse': ['bottom', 'right'].includes(props.placement),
+				[`sh-tabs-size-${props.size}`]: true,
 				[isHorizontal.value ? 'sh-tabs-horizontal' : 'sh-tabs-vertical']: true
 			}
 		})
@@ -284,10 +286,25 @@ export default defineComponent({
 	width: 100%;
 	position: relative;
 	display: flex;
+	line-height: 2.3em;
+	&-size {
+		&-default {
+			font-size: var(--vxe-font-size);
+		}
+		&-medium {
+			font-size: var(--vxe-font-size-medium);
+		}
+		&-small {
+			font-size: var(--vxe-font-size-small);
+		}
+		&-mini {
+			font-size: var(--vxe-font-size-mini);
+		}
+	}
 	.sh-tab-close {
 		display: inline-flex;
 		align-items: center;
-		padding: 0 1px;
+		font-size: 1.4em;
 		&:hover {
 			background-color: rgba(0, 0, 0, 0.1);
 		}
@@ -296,12 +313,32 @@ export default defineComponent({
 		width: 100%;
 		flex-wrap: wrap;
 		flex-direction: column;
-		&.sh-tabs-reverse {
-			flex-direction: column-reverse;
-		}
 		.sh-tabs-nav {
 			width: 100%;
 		}
+		&.sh-tabs-reverse {
+			flex-direction: column-reverse;
+			&.sh-tabs-tab {
+				.sh-tabs-nav-inner {
+					.sh-tab-item {
+						border-radius: 0 0 0.7em 0.7em;
+					}
+					.sh-tab-item-active {
+						&:before,
+						&:after {
+							top: 0;
+							bottom: auto;
+						}
+						&:before {
+							background: radial-gradient(circle at 0 100%, transparent 14px, var(--primary-weak-color) 14px);
+						}
+						&:after {
+							background: radial-gradient(circle at 100% 100%, transparent 14px, var(--primary-weak-color) 14px);
+						}
+					}
+				}
+			}
+		}
 	}
 	&-horizontal {
 		flex-wrap: nowrap;
@@ -317,10 +354,30 @@ export default defineComponent({
 		.sh-tabs-nav-prev,
 		.sh-tabs-nav-next {
 			width: 100%;
-			height: 26px;
+			height: 2em;
+		}
+		&.sh-tabs-tab {
+			.sh-tabs-nav-inner {
+				.sh-tab-item {
+					border-radius: 0.7em 0 0 0.7em !important;
+				}
+				.sh-tab-item-active {
+					&:before,
+					&:after {
+						display: none;
+					}
+				}
+			}
 		}
 		&.sh-tabs-reverse {
 			flex-direction: row-reverse;
+			&.sh-tabs-tab {
+				.sh-tabs-nav-inner {
+					.sh-tab-item {
+						border-radius: 0 0.7em 0.7em 0 !important;
+					}
+				}
+			}
 		}
 	}
 	&-nav {
@@ -337,7 +394,7 @@ export default defineComponent({
 		}
 		&-prev,
 		&-next {
-			width: 30px;
+			width: 2.5em;
 			height: 100%;
 			display: inline-flex;
 			align-items: center;
@@ -364,15 +421,22 @@ export default defineComponent({
 				display: inline-flex;
 				align-items: stretch;
 				cursor: pointer;
-				line-height: 20px;
 				box-sizing: border-box;
-				border-bottom: 2px solid transparent;
+				position: relative;
 				&:hover {
 					color: var(--vxe-primary-color);
 				}
 				&.sh-tab-item-active {
-					border-bottom: 2px solid var(--vxe-primary-darken-color);
 					color: var(--vxe-primary-color) !important;
+					&:after {
+						position: absolute;
+						height: 2px;
+						background-color: var(--vxe-primary-darken-color);
+						width: 100%;
+						bottom: 0;
+						content: '';
+						display: block;
+					}
 				}
 				&.sh-tab-item-disabled {
 					cursor: not-allowed;
@@ -381,11 +445,11 @@ export default defineComponent({
 				.sh-tab-icon {
 					display: inline-flex;
 					align-items: center;
-					padding: 0 2px 0 5px;
+					padding: 0 0.2em 0 0.7em;
 				}
 				.sh-tab-label {
 					flex: 1;
-					padding: 5px;
+					padding: 0 0.5em;
 				}
 			}
 		}
@@ -403,6 +467,40 @@ export default defineComponent({
 				background-color: var(--vxe-primary-color);
 				border-color: var(--vxe-primary-color);
 				color: #fff !important;
+				&:after {
+					display: none;
+				}
+			}
+		}
+	}
+	&.sh-tabs-tab {
+		.sh-tabs-nav-inner {
+			.sh-tab-item {
+				position: relative;
+				border: none;
+				border-radius: 0.7em 0.7em 0 0;
+			}
+			.sh-tab-item-active {
+				background-color: var(--primary-weak-color);
+				color: var(--vxe-primary-color) !important;
+				&:before,
+				&:after {
+					position: absolute;
+					width: 14px;
+					height: 14px;
+					background-color: var(--primary-weak-color);
+					content: '';
+					display: inline-block;
+					bottom: 0;
+				}
+				&:before {
+					left: -14px;
+					background: radial-gradient(circle at 0 0, transparent 14px, var(--primary-weak-color) 14px);
+				}
+				&:after {
+					right: -14px;
+					background: radial-gradient(circle at 100% 0, transparent 14px, var(--primary-weak-color) 14px);
+				}
 			}
 		}
 	}

package/packages/components/sh-tree/components/table-tree.vue

@@ -29,20 +29,10 @@ const tableConfigDefault = {
 	showHeader: false,
 	showFooter: false,
 	showOverflow: true,
-	resizeConfig: {
-		refreshDelay: 100
-	},
-	columnConfig: {
-		width: 120
-	},
-	scrollX: {
-		enabled: true,
-		gt: 20
-	},
-	scrollY: {
-		enabled: true,
-		gt: 20
-	}
+	resizeConfig: { refreshDelay: 100 },
+	columnConfig: { width: 120 },
+	scrollX: { enabled: true, gt: 20 },
+	scrollY: { enabled: true, gt: 20 }
 }
 import mixinProps from '../mixin/treeProps'
 export default defineComponent({

package/packages/vxeTable/index.js

@@ -5,6 +5,7 @@ import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'
 import { jsPDF } from 'jspdf'
 import XEClipboard from 'xe-clipboard'
 import ShValidators from 'sh-tools/packages/utils/validate'
+import { utils } from 'sh-tools'
 import { publicRenders, extraRenders, filterRenders, publicRendersNames } from './render/globalRenders.jsx'
 
 let vxeOptions = {
@@ -28,7 +29,7 @@ let vxeOptions = {
 		keepSource: false,
 		minHeight: 30,
 		rowConfig: {
-			useKey: false,
+			useKey: true,
 			keyField: '_XID',
 			isCurrent: true,
 			isHover: true
@@ -207,9 +208,9 @@ VXETable.renderer.mixin(filterRenders)
 
 const index = {
 	install(Vue, { vxeOption = {}, vxePdfOption = {}, vxeXlsxOption }) {
-		let setupOption = Object.assign(vxeOptions, vxeOption)
-		let xlsxSetUpOption = Object.assign(vxeXlsxOptions, vxeXlsxOption)
-		let pdfSetUpOption = Object.assign(vxePdfOptions, vxePdfOption)
+		let setupOption = utils.merge(vxeOptions, vxeOption)
+		let xlsxSetUpOption = utils.merge(vxeXlsxOptions, vxeXlsxOption)
+		let pdfSetUpOption = utils.merge(vxePdfOptions, vxePdfOption)
 		VXETable.setup(setupOption)
 		VXETable.use(VXETablePluginExportXLSX, xlsxSetUpOption)
 		VXETable.use(VXETablePluginExportPDF, pdfSetUpOption)

package/packages/vxeTable/render/cell/vxe-render-time.vue

@@ -1,7 +1,7 @@
 <template>
 	<span class="vxe-render--inner" :class="{ 'form-render': rform, 'td-render': !rform }">
 		<template v-if="redit || isEditAll">
-			<sh-date v-model="renderValue" v-bind="rprops" :size="rsize" :disabled-method="vxeDisabledMethod" @change="vxeChangeCallBack"></sh-date>
+			<sh-date v-model="renderValue" v-bind="rprops" :size="rsize" :disabled-method="vxeDisabledMethod" @change="vxeChangeCallBack" @clear="vxeBlurCallback"></sh-date>
 		</template>
 		<template v-else>
 			<span v-html="renderText"></span>