sh-view 2.8.11 → 2.8.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.8.11",
+  "version": "2.8.13",
   "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: '起始日期' },
@@ -110,7 +109,7 @@ export default defineComponent({
 
 		const pulldownValue = ref(false)
 		const inputValue = ref(props.modelValue)
-		const rangeValue = ref(props.modelValue || [])
+		const rangeValue = ref(Array.isArray(props.modelValue) ? props.modelValue : [])
 
 		const inputConfig = computed(() => {
 			let defaultProps = {}
@@ -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(() => {
@@ -219,7 +217,7 @@ export default defineComponent({
 		watch(
 			() => props.modelValue,
 			(value, oldValue) => {
-				if (props.range) {
+				if (props.range && Array.isArray(value)) {
 					rangeValue.value = value
 				} else {
 					inputValue.value = value

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-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>

package/packages/vxeTable/render/globalRenders.jsx

@@ -43,7 +43,7 @@ let defaultProps = {
 	$vTextArea: { placeholder: '请输入', rows: 2, transfer: true, resize: 'none', showWordCount: true },
 	$vSelect: { placeholder: '请选择', filterable: true, transfer: true, showType: 'text', tagColor: 'default', split: ',', options: [] },
 	$vTree: { placeholder: '请选择', transfer: true, split: ',', nodeKey: 'id', labelField: 'label' },
-	$vTime: { type: 'date', placeholder: '请选择时间', transfer: true, editable: false, prefixType: 'text', suffixType: 'text' },
+	$vTime: { type: 'date', placeholder: '请选择时间', transfer: true, editable: false, prefixType: 'text', suffixType: 'text', separator: '至' },
 	$vProgress: { strokeWidth: 20, strokeColor: ['#108ee9', '#87d068'], textInside: true, min: 0, max: 100, digits: 2 },
 	$vSwitch: { placeholder: '请选择', openLabel: '是', openValue: '1', closeLabel: '否', closeValue: '0' },
 	$vMoney: { type: 'number', placeholder: '请输入', transfer: true, commafy: true, digits: 2, moneyUnit: 1, min: 0, max: 1000000000000 },

package/packages/vxeTable/render/mixin/cell-hooks.js

@@ -27,6 +27,7 @@ export default function (props, context, proxy) {
 	// 初始化数据
 	const initData = () => {
 		let keyValue = $vUtils.get(props.rdata, props.rkey)
+		if (keyValue && $vUtils.isEqual(keyValue, renderValue.value)) return
 		formatValueFun(keyValue)
 	}
 
@@ -98,10 +99,18 @@ export default function (props, context, proxy) {
 			renderText.value = footerText
 			return
 		}
-		let formatObj = $vUtils.formatRender(value, props.rkey, props.rdata, props.rname, props.rprops, proxy, editable)
-		renderValue.value = ['$vMoney'].includes(props.rname) ? formatObj.rtext : formatObj.rvalue
-		renderText.value = formatObj.rtext
-		return formatObj
+		const { rvalue, rtext } = $vUtils.formatRender(value, props.rkey, props.rdata, props.rname, props.rprops, proxy, editable)
+		if (['$vMoney'].includes(props.rname)) {
+			renderValue.value = rtext
+		} else {
+			renderValue.value = rvalue
+		}
+		if (props.rname === '$vTime' && props.rprops.range && Array.isArray(rtext) && rtext.length > 0) {
+			renderText.value = `${rtext[0] || ''}${props.rprops.separator}${rtext[1] || ''}`
+		} else {
+			renderText.value = rtext
+		}
+		return { rvalue, rtext }
 	}
 	const getBillClass = bil => {
 		return { basic: bil.fullText === '元', commafy: ['千', '百万', '十亿', '兆'].includes(bil.fullText) }