sh-view 2.7.8 → 2.8.0

package/packages/components/{global-components/sh-drawer → sh-drawer}/index.vue

@@ -25,7 +25,7 @@
 								<slot name="footer"></slot>
 							</div>
 						</div>
-						<div v-if="draggable && (placement === 'left' || placement === 'right')" class="sh-drawer-drag" :class="'sh-drawer-drag-' + placement" @mousedown="handleTriggerMousedown">
+						<div v-if="draggable" class="sh-drawer-drag" :class="'sh-drawer-drag-' + placement" @mousedown="handleTriggerMousedown">
 							<slot name="trigger">
 								<div class="sh-drawer-drag-move-trigger">
 									<div class="sh-drawer-drag-move-trigger-point"><i></i><i></i><i></i><i></i><i></i></div>
@@ -127,6 +127,7 @@ export default defineComponent({
 		const wrapperWidth = ref(props.width)
 		const wrapperHeight = ref(props.height)
 		const wrapperLeft = ref(0)
+		const wrapperTop = ref(0)
 		const minWidth = ref(256)
 		const minHeight = ref(256)
 		const id = ref($vUtils.randomStr(6))
@@ -134,6 +135,7 @@ export default defineComponent({
 		const sliderList = ref([])
 		let timer = null
 
+		const isHorizontal = computed(() => ['left', 'right'].includes(props.placement))
 		const wrapClasses = computed(() => {
 			return {
 				'sh-drawer-hidden': !wrapShow.value,
@@ -145,7 +147,7 @@ export default defineComponent({
 		})
 		const mainStyles = computed(() => {
 			let style = {}
-			if (props.placement === 'left' || props.placement === 'right') {
+			if (isHorizontal.value) {
 				const width = parseInt(dragWidth.value)
 				const styleWidth = {
 					width: width <= 100 ? `${width}%` : `${width}px`
@@ -168,7 +170,7 @@ export default defineComponent({
 			}
 		})
 		const transitionName = computed(() => {
-			if (props.placement === 'left' || props.placement === 'right') return `move-${props.placement}`
+			if (isHorizontal.value) return `move-${props.placement}`
 			else if (props.placement === 'top') return 'move-up'
 			else return 'move-down'
 		})
@@ -205,25 +207,45 @@ export default defineComponent({
 		}
 		const handleMousemove = event => {
 			if (!canMove.value || !props.draggable || !visible.value) return
-			// 更新容器宽度和距离左侧页面距离，如果是window则距左侧距离为0
-			handleSetWrapperWidth()
-			const left = event.pageX - wrapperLeft.value
-			// 如果抽屉方向为右边，宽度计算需用容器宽度减去left
-			let width = props.placement === 'right' ? wrapperWidth.value - left : left
-			// 限定最小宽度
-			width = Math.max(width, parseFloat(minWidth.value))
-			event.atMin = width === parseFloat(minWidth.value)
-			// 如果当前width不大于100，视为百分比
-			if (width <= 100) width = (width / wrapperWidth.value) * 100
-			if (width >= window.innerWidth) width = window.innerWidth
-			dragWidth.value = width
-			emit('resize-width', parseInt(dragWidth.value))
-			emit('drag', 'dragging', parseInt(dragWidth.value))
+			// 更新容器距离
+			handleSetWrapper()
+			if (isHorizontal.value) {
+				const left = event.pageX - wrapperLeft.value
+				// 如果抽屉方向为右边，宽度计算需用容器宽度减去left
+				let width = props.placement === 'right' ? wrapperWidth.value - left : left
+				// 限定最小宽度
+				width = Math.max(width, parseFloat(minWidth.value))
+				event.atMin = width === parseFloat(minWidth.value)
+				// 如果当前width不大于100，视为百分比
+				if (width <= 100) width = (width / wrapperWidth.value) * 100
+				if (width >= window.innerWidth) width = window.innerWidth
+				dragWidth.value = width
+				emit('resize-width', parseInt(dragWidth.value))
+				emit('drag', 'dragging', parseInt(dragWidth.value))
+			} else {
+				const top = event.pageY - wrapperTop.value
+				// 如果抽屉方向为下面，宽度计算需用容器宽度减去left
+				let heigth = props.placement === 'bottom' ? wrapperHeight.value - top : top
+				// 限定最小高度
+				heigth = Math.max(heigth, parseFloat(minHeight.value))
+				event.atMin = heigth === parseFloat(minHeight.value)
+				// 如果当前heigth不大于100，视为百分比
+				if (heigth <= 100) heigth = (heigth / wrapperHeight.value) * 100
+				if (heigth >= window.innerHeight) heigth = window.innerHeight
+				dragHeight.value = heigth
+				emit('resize-width', parseInt(dragHeight.value))
+				emit('drag', 'dragging', parseInt(dragHeight.value))
+			}
 		}
-		const handleSetWrapperWidth = () => {
-			const { width, left } = drawerRef.value.getBoundingClientRect()
-			wrapperWidth.value = width
-			wrapperLeft.value = left
+		const handleSetWrapper = () => {
+			const { width, height, left, top } = drawerRef.value.getBoundingClientRect()
+			if (isHorizontal.value) {
+				wrapperWidth.value = width
+				wrapperLeft.value = left
+			} else {
+				wrapperHeight.value = height
+				wrapperTop.value = top
+			}
 		}
 		const handleMouseup = () => {
 			if (!props.draggable || !visible.value) return
@@ -330,7 +352,7 @@ export default defineComponent({
 			addDrawer()
 			$vUtils.onListener(document, 'mousemove', handleMousemove)
 			$vUtils.onListener(document, 'mouseup', handleMouseup)
-			handleSetWrapperWidth()
+			handleSetWrapper()
 		})
 		onBeforeUnmount(() => {
 			removeDrawer()
@@ -342,17 +364,17 @@ export default defineComponent({
 		return {
 			slots,
 			visible,
-			handleMask,
 			wrapClasses,
-			handleWrapClick,
 			transitionName,
 			classes,
 			mainStyles,
-			close,
 			showHead,
-			handleTriggerMousedown,
 			drawerRef,
-			drawerContent
+			drawerContent,
+			close,
+			handleMask,
+			handleWrapClick,
+			handleTriggerMousedown
 		}
 	}
 })

package/packages/components/{global-components/sh-form → sh-form}/js/useForm.js

@@ -57,8 +57,8 @@ export default function (props, context, proxy, isForm) {
 	}
 	// 表单重置
 	const onFormReset = params => {
-		initFormItems()
-		$vUtils.clear(props.data, null)
+		$vUtils.clear(props.data)
+		refreshRender()
 		emit('reset', params)
 	}
 	// 表单项编辑回调

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

@@ -0,0 +1,260 @@
+<template>
+	<div class="sh-pageheader" :style="styles" :class="classes">
+		<sh-loading :loading="loading" fix />
+		<div class="sh-pageheader-heading">
+			<div v-if="showback" class="sh-pageheader-back">
+				<div class="sh-pageheader-back-button" @click="handleBack"><sh-icon :size="iconSize" type="ios-arrow-back" /></div>
+			</div>
+			<sh-icon v-if="icon" style="margin-right: 0.5rem" :type="icon" :size="iconSize" :color="iconColor"></sh-icon>
+			<span v-if="title || slots.title" class="sh-pageheader-title" :style="titleStyle">
+				<slot name="title">{{ title }}</slot>
+			</span>
+			<span v-if="subTitle || slots.subTitle" class="sh-pageheader-subtitle">
+				<slot name="subTitle">{{ subTitle }}</slot>
+			</span>
+			<div v-if="slots.tags" class="sh-pageheader-tags"><slot name="tags"></slot></div>
+			<div v-if="slots.extra" class="sh-pageheader-extra"><slot name="extra"></slot></div>
+		</div>
+		<div v-if="slots.default" :class="contentClass">
+			<slot></slot>
+		</div>
+		<slot name="body"></slot>
+		<div v-if="slots.footer" class="sh-pageheader-footer"><slot name="footer"></slot></div>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue'
+export default defineComponent({
+	name: 'ShHeader',
+	props: {
+		size: {
+			type: String,
+			default: 'default'
+		},
+		color: {
+			type: String,
+			default: ''
+		},
+		theme: {
+			type: String,
+			default: ''
+		},
+		icon: {
+			type: String
+		},
+		iconSize: {
+			type: Number,
+			default: 20
+		},
+		iconColor: {
+			type: String
+		},
+		ghost: {
+			type: Boolean
+		},
+		full: {
+			type: Boolean
+		},
+		border: {
+			type: Boolean
+		},
+		type: {
+			type: String,
+			default: '' // 'success', 'info', 'warning', 'error'
+		},
+		title: {
+			type: String,
+			default: ''
+		},
+		subTitle: {
+			type: String,
+			default: ''
+		},
+		loading: {
+			type: Boolean
+		},
+		nowrap: {
+			type: Boolean
+		},
+		showback: {
+			type: Boolean
+		}
+	},
+	emits: ['back'],
+	setup(props, context) {
+		const { emit, slots } = context
+
+		let sizeMap = {
+			large: '19px',
+			default: '17px',
+			medium: 'var(--vxe-font-size)',
+			small: 'var(--vxe-font-size-small)',
+			mini: 'var(--vxe-font-size-smini)'
+		}
+
+		const styles = computed(() => {
+			return {
+				backgroundColor: props.color
+			}
+		})
+		const classes = computed(() => {
+			return {
+				'sh-pageheader-ghost': props.ghost,
+				'sh-pageheader-full': props.full,
+				'sh-pageheader-border': props.border,
+				[`sh-pageheader-theme-${props.theme}`]: props.theme,
+				'has-footer': slots.footer,
+				[`sh-pageheader-type-${props.type}`]: props.type,
+				[`${props.size}`]: props.size
+			}
+		})
+		const titleStyle = computed(() => {
+			return {
+				fontSize: sizeMap[props.size] || sizeMap.default,
+				whiteSpace: props.nowrap ? 'nowrap' : ''
+			}
+		})
+		const contentClass = computed(() => {
+			return {
+				'sh-pageheader-content': true,
+				'no-padding': !props.title && !slots.title && !props.subTitle && !slots.subTitle && !slots.tags && !slots.extra
+			}
+		})
+
+		const handleBack = () => {
+			emit('back')
+		}
+		return {
+			styles,
+			classes,
+			titleStyle,
+			contentClass,
+			slots,
+			handleBack
+		}
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.sh-pageheader {
+	display: block;
+	box-sizing: border-box;
+	border-radius: 2px;
+	line-height: 1.5;
+	position: relative;
+	padding: 0.5rem 1rem;
+	background-color: var(--vxe-table-body-background-color);
+	&-theme {
+		color: #fff;
+		&-primary {
+			background-color: var(--vxe-primary-color);
+		}
+		&-success {
+			background-color: var(--vxe-success-color);
+		}
+		&-warning {
+			background-color: var(--vxe-warning-color);
+		}
+		&-error {
+			background-color: var(--vxe-danger-color);
+		}
+		&-info {
+			background-color: var(--vxe-info-color);
+		}
+	}
+	&-type {
+		color: #fff;
+		&-primary {
+			border-left: 4px solid var(--vxe-primary-color);
+			background-color: var(--primary-weak-color);
+			.sh-pageheader-heading-title {
+				color: var(--vxe-primary-color);
+			}
+		}
+		&-success {
+			border-left: 4px solid var(--vxe-success-color);
+			background-color: #edfff3;
+			.sh-pageheader-heading-title {
+				color: var(--vxe-success-color);
+			}
+		}
+		&-warning {
+			border-left: 4px solid var(--vxe-warning-color);
+			background-color: #fff9e6;
+			.sh-pageheader-heading-title {
+				color: var(--vxe-warning-color);
+			}
+		}
+		&-error {
+			border-left: 4px solid var(--vxe-danger-color);
+			background-color: #ffefe6;
+			.sh-pageheader-heading-title {
+				color: var(--vxe-danger-color);
+			}
+		}
+		&-info {
+			border-left: 4px solid var(--vxe-info-color);
+			background-color: #f0faff;
+			.sh-pageheader-heading-title {
+				color: var(--vxe-info-color);
+			}
+		}
+	}
+	&-full {
+		padding-left: 0;
+		padding-right: 0;
+	}
+	&-ghost {
+		background-color: transparent;
+	}
+	&-border {
+		border: 1px solid var(--vxe-table-border-color);
+	}
+	&-heading {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	&-content {
+		margin-top: 10px;
+		&.no-padding {
+			padding-top: 0;
+		}
+	}
+	&-footer {
+		margin-top: 10px;
+	}
+	&-back {
+		font-size: 1.2rem;
+		line-height: 1;
+		margin-right: 0.5rem;
+		&-button {
+			color: inherit;
+			text-decoration: none;
+			outline: none;
+			transition: color 0.3s;
+			cursor: pointer;
+			&:hover {
+				opacity: 0.85;
+			}
+		}
+	}
+	&-title {
+		display: block;
+		margin-right: 0.5rem;
+		font-weight: 600;
+	}
+	&-subtitle {
+		margin-right: 0.5rem;
+		color: rgba(0, 0, 0, 0.45);
+	}
+	&-tags {
+	}
+	&-extra {
+		margin-left: auto;
+	}
+}
+</style>

package/packages/components/sh-icon/css/font/icons.scss

@@ -0,0 +1,135 @@
+.font-img-error:before {
+  content: "\e642";
+}
+
+.font-code:before {
+  content: "\e65d";
+}
+
+.font-half_size:before {
+  content: "\e66a";
+}
+
+.font-password:before {
+  content: "\e66b";
+}
+
+.font-menu:before {
+  content: "\e66d";
+}
+
+.font-sign_out:before {
+  content: "\e66e";
+}
+
+.font-close:before {
+  content: "\e671";
+}
+
+.font-open_top:before {
+  content: "\e672";
+}
+
+.font-put_it_away_top:before {
+  content: "\e673";
+}
+
+.font-right:before {
+  content: "\e674";
+}
+
+.font-left:before {
+  content: "\e675";
+}
+
+.font-refresh:before {
+  content: "\e676";
+}
+
+.font-date:before {
+  content: "\e678";
+}
+
+.font-open:before {
+  content: "\e679";
+}
+
+.font-put_it_away:before {
+  content: "\e67a";
+}
+
+.font-task:before {
+  content: "\e67b";
+}
+
+.font-short_message:before {
+  content: "\e67c";
+}
+
+.font-modify:before {
+  content: "\e67d";
+}
+
+.font-delete:before {
+  content: "\e67e";
+}
+
+.font-enlarge:before {
+  content: "\e681";
+}
+
+.font-girl:before {
+  content: "\e683";
+}
+
+.font-boy:before {
+  content: "\e684";
+}
+
+.font-redianzixun:before {
+  content: "\e6a4";
+}
+
+.font-vip:before {
+  content: "\e68f";
+}
+
+.font-VIP2:before {
+  content: "\e685";
+}
+
+.font-VIP4:before {
+  content: "\e7b3";
+}
+
+.font-VIP6:before {
+  content: "\e9ee";
+}
+
+.font-vip2:before {
+  content: "\e601";
+}
+
+.font-bofang:before {
+  content: "\e68d";
+}
+
+.font-bofang1:before {
+  content: "\e6f4";
+}
+
+.font-renzheng:before {
+  content: "\e6fb";
+}
+
+.font-dianhua1:before {
+  content: "\e700";
+}
+
+.font-dianhuaguaji:before {
+  content: "\e79a";
+}
+
+.font-youbian:before {
+  content: "\e703";
+}

package/packages/components/{global-components/sh-image → sh-image}/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="sh-image" :style="wrapStyles">
 		<div v-if="imageError" class="sh-image-place">
-			<slot name="error"><sh-icon type="shicon-img-error" :size="22" color="#999999"></sh-icon></slot>
+			<slot name="error"><sh-icon type="font-img-error" :size="22" color="#999999"></sh-icon></slot>
 		</div>
 		<div v-else-if="imageloading" class="sh-image-place">
 			<slot name="placeholder"><sh-icon type="ios-image" :size="22"></sh-icon></slot>
@@ -117,6 +117,7 @@ export default defineComponent({
 		justify-content: center;
 		width: 100%;
 		height: 100%;
+		background-color: var(--vxe-table-header-background-color);
 	}
 	&-inner {
 		width: 100%;

package/packages/components/{global-components/sh-poptip → sh-poptip}/index.vue

@@ -41,7 +41,7 @@
 
 <script>
 import { defineComponent, computed, onMounted, onUpdated, onBeforeUnmount, getCurrentInstance, ref, watch, nextTick } from 'vue'
-import { transferIndex, transferIncrease } from '../../../utils/transfer-queue'
+import { transferIndex, transferIncrease } from '../../utils/transfer-queue'
 import Popper from 'popper.js'
 const handleGetIndex = () => {
 	transferIncrease()

package/packages/components/{global-components/sh-progress → sh-progress}/index.vue

@@ -72,15 +72,7 @@ export default defineComponent({
 			return ''
 		})
 		const bgStyle = computed(() => {
-			const style = props.vertical
-				? {
-						height: `${props.percent}%`,
-						width: `${props.strokeWidth}px`
-				  }
-				: {
-						width: `${props.percent}%`,
-						height: `${props.strokeWidth}px`
-				  }
+			const style = props.vertical ? { height: `${props.percent}%`, width: `${props.strokeWidth}px` } : { width: `${props.percent}%`, height: `${props.strokeWidth}px` }
 			if (props.strokeColor) {
 				if (typeof props.strokeColor === 'string') {
 					style['background-color'] = props.strokeColor
@@ -91,15 +83,7 @@ export default defineComponent({
 			return style
 		})
 		const successBgStyle = computed(() => {
-			return props.vertical
-				? {
-						height: `${props.successPercent}%`,
-						width: `${props.strokeWidth}px`
-				  }
-				: {
-						width: `${props.successPercent}%`,
-						height: `${props.strokeWidth}px`
-				  }
+			return props.vertical ? { height: `${props.successPercent}%`, width: `${props.strokeWidth}px` } : { width: `${props.successPercent}%`, height: `${props.strokeWidth}px` }
 		})
 		const wrapClasses = computed(() => {
 			return {

package/packages/components/{global-components/sh-table → sh-table}/css/index.scss

@@ -12,6 +12,24 @@
             background: transparent;
         }
     }
+    &.is--loading{
+        &:before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 99;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            user-select: none;
+            background-color: var(--vxe-loading-background-color);
+        }
+        & > .vxe-table .vxe-loading {
+            background-color: transparent;
+        }
+    }
     .sh-table-footer{
         height: 40px;
         padding: 5px;

package/packages/components/{global-components/sh-table → sh-table}/js/tableMethods.js

@@ -66,28 +66,20 @@ export const tableFooterCompute = (columns, data, computeType, typeObj = {}) =>
 }
 // 转化表头过滤配置
 export const turnColumnItemFilters = (column, props) => {
+	if (column.filters) return
 	let columnRender = column.cellRender || column.editRender || column.contentRender
 	let columnProps = Object.assign({}, props)
-	columnProps.colRenderName = columnRender.name
-	if (!column.filters) {
-		switch (columnRender.name) {
-			case '$select':
-			case '$vSelect':
-			case '$vCheckgroup':
-			case '$vRadiogroup':
-			case '$vSwitch':
-				column.filters = Array.isArray(columnRender.props && columnRender.props.options) ? columnRender.props.options : []
-				column.filterMultiple = true
-				break
-			case '$vInput':
-				column.filters = [{ value: '', data: '' }]
-				column.filterRender = { name: '$vFilterInput', props: columnProps }
-				break
-			default:
-				column.filters = [{ value: '', data: '' }]
-				column.filterRender = { name: '$vFilterInput', props: columnProps }
-				break
-		}
+	let renderSelects = ['$select', '$vSelect', '$vCheckgroup', '$vRadiogroup', '$vSwitch']
+	let renderTimes = ['$vTime']
+	if (renderTimes.includes(columnRender.name)) {
+		column.filters = [{ data: null }]
+		column.filterRender = { name: '$vFilterTime', props: columnProps }
+	} else if (renderSelects.includes(columnRender.name)) {
+		column.filters = Array.isArray(columnRender.props && columnRender.props.options) ? columnRender.props.options : []
+		if (column.filterMultiple === undefined) column.filterMultiple = true
+	} else {
+		column.filters = [{ data: null }]
+		column.filterRender = { name: '$vFilterInput', props: columnProps }
 	}
 }
 // 转换表头校验规则

package/packages/components/{global-components/sh-table → sh-table}/js/useTable.js

@@ -202,10 +202,8 @@ export default function (props, context, proxy, isGrid) {
 			let { property, rname, rprops } = col
 			data.forEach(row => {
 				let cellValue = $vUtils.get(row, property)
-				if (!$vUtils.isNone(cellValue)) {
-					let { rvalue, rtext } = $vUtils.formatRender(cellValue, property, row, rname, rprops, proxy)
-					$vUtils.set(row, property, visible ? rtext : rvalue)
-				}
+				let { rvalue, rtext } = $vUtils.formatRender(cellValue, property, row, rname, rprops, proxy)
+				$vUtils.set(row, property, visible ? rtext : rvalue)
 				if (deleteXid) delete row._XID
 			})
 		})
@@ -214,9 +212,9 @@ export default function (props, context, proxy, isGrid) {
 	// 表格打印、导出统一导出前渲染数据
 	const getExportPrintDataByOption = (obj = {}, type) => {
 		let { options, content } = obj
-		let { data, columns, mode } = options
+		let { data, columns, mode, original } = options
 		if (!data) {
-			options.data = mode === 'selected' ? getSelectionData() : getFullData()
+			options.data = mode === 'selected' ? getSelectionData() : getFullData({ visible: !original })
 		}
 		return type === 'print' ? content : obj
 	}