sh-view 2.7.7 → 2.7.9

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

@@ -1,9 +1,11 @@
 <template>
-	<div class="sh-tabs" :class="{ 'sh-tabs-card': type === 'card' }">
+	<div class="sh-tabs" :class="tabClass">
 		<div class="sh-tabs-nav">
 			<div v-if="slots.left" class="sh-tabs-nav-slot sh-tabs-nav-left"><slot name="left"></slot></div>
 			<div ref="navWrapRef" v-resize="handleResize" class="sh-tabs-nav-wrap" :class="{ 'sh-tabs-nav-scrollable': scrollable }">
-				<span v-if="scrollable" class="sh-tabs-nav-prev" :class="{ 'sh-tabs-nav-btn-disabled': scrollable }" @click="scrollPrev"><sh-icon type="ios-arrow-back"></sh-icon></span>
+				<span v-if="scrollable" class="sh-tabs-nav-prev" :class="{ 'sh-tabs-nav-btn-disabled': scrollable }" @click="scrollPrev">
+					<sh-icon :type="isHorizontal ? 'ios-arrow-up' : 'ios-arrow-back'"></sh-icon>
+				</span>
 				<div ref="navScrollRef" class="sh-tabs-nav-scroll" @DOMMouseScroll="handleScroll" @mousewheel="handleScroll">
 					<div ref="navRef" v-resize="handleResize" class="sh-tabs-nav-inner" :style="navStyle">
 						<template v-for="(tab, tabIndex) in tabList" :key="tabIndex">
@@ -20,17 +22,21 @@
 						</template>
 					</div>
 				</div>
-				<span v-if="scrollable" class="sh-tabs-nav-next" :class="{ 'sh-tabs-nav-btn-disabled': scrollable }" @click="scrollNext"><sh-icon type="ios-arrow-forward"></sh-icon></span>
+				<span v-if="scrollable" class="sh-tabs-nav-next" :class="{ 'sh-tabs-nav-btn-disabled': scrollable }" @click="scrollNext">
+					<sh-icon :type="isHorizontal ? 'ios-arrow-down' : 'ios-arrow-forward'"></sh-icon>
+				</span>
 			</div>
 			<div v-if="slots.right" class="sh-tabs-nav-slot sh-tabs-nav-right"><slot name="right"></slot></div>
 		</div>
 		<div v-if="hasContent" class="sh-tabs-content">
 			<div ref="contentWrap" class="sh-tabs-content-wrap" :class="{ 'sh-tabs-content-animated': animated }" :style="contentStyle">
-				<template v-for="(tab, tabIndex) in tabList" :key="tabIndex">
-					<div class="sh-tabs-content-item">
-						<slot :name="tab[labelKey]" v-bind="tab">{{ tab[labelField] }}</slot>
-					</div>
-				</template>
+				<slot name="tabContent" v-bind="tabList">
+					<template v-for="(tab, tabIndex) in tabList" :key="tabIndex">
+						<div class="sh-tabs-content-item">
+							<slot :name="tab[labelKey]" v-bind="tab">{{ tab[labelField] }}</slot>
+						</div>
+					</template>
+				</slot>
 			</div>
 		</div>
 	</div>
@@ -81,6 +87,10 @@ export default defineComponent({
 		gutter: {
 			type: Number,
 			default: 5
+		},
+		placement: {
+			type: String,
+			default: 'top' // 'left', 'right', 'top', 'bottom'
 		}
 	},
 	emits: ['update:modelValue', 'close', 'change'],
@@ -98,7 +108,15 @@ export default defineComponent({
 		const closedList = ref([])
 		const navStyle = ref({ transform: '' })
 
+		const isHorizontal = computed(() => ['left', 'right'].includes(props.placement))
 		const hasContent = computed(() => props.isContent && activeKey.value && props.options.map(item => item[props.labelKey]).includes(activeKey.value))
+		const tabClass = computed(() => {
+			return {
+				'sh-tabs-card': props.type === 'card',
+				'sh-tabs-reverse': ['bottom', 'right'].includes(props.placement),
+				[isHorizontal.value ? 'sh-tabs-horizontal' : 'sh-tabs-vertical']: true
+			}
+		})
 		const tabList = computed(() => props.options.filter(tab => !closedList.value.includes(tab[props.labelKey])) || [])
 		const contentStyle = computed(() => {
 			const x = tabList.value.findIndex(tab => tab[props.labelKey] === activeKey.value)
@@ -111,42 +129,55 @@ export default defineComponent({
 		})
 
 		const scrollPrev = () => {
-			const containerWidth = navScrollRef.value.offsetWidth
+			const navScrollOffset = isHorizontal.value ? navScrollRef.value.offsetHeight : navScrollRef.value.offsetWidth
 			const currentOffset = getCurrentScrollOffset()
 			if (!currentOffset) return
-			let newOffset = currentOffset > containerWidth ? currentOffset - containerWidth : 0
+			let newOffset = 0
+			if (currentOffset > navScrollOffset) {
+				newOffset = currentOffset - navScrollOffset
+			}
 			setOffset(newOffset)
 		}
 		const scrollNext = () => {
-			const navWidth = navRef.value.offsetWidth
-			const containerWidth = navScrollRef.value.offsetWidth
+			const navOffset = isHorizontal.value ? navRef.value.offsetHeight : navRef.value.offsetWidth
+			const containerOffset = isHorizontal.value ? navScrollRef.value.offsetHeight : navScrollRef.value.offsetWidth
 			const currentOffset = getCurrentScrollOffset()
-			if (navWidth - currentOffset <= containerWidth) return
-			let newOffset = navWidth - currentOffset > containerWidth * 2 ? currentOffset + containerWidth : navWidth - containerWidth
+			if (navOffset - currentOffset <= containerOffset) return
+			let newOffset = navOffset - currentOffset > containerOffset * 2 ? currentOffset + containerOffset : navOffset - containerOffset
 			setOffset(newOffset)
 		}
 		const setOffset = value => {
-			navStyle.value.transform = `translateX(-${value}px)`
+			const direction = isHorizontal.value ? 'Y' : 'X'
+			navStyle.value.transform = `translate${direction}(-${value}px)`
 		}
 		const getCurrentScrollOffset = () => {
-			return navStyle.value.transform ? Number(navStyle.value.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1]) : 0
+			if (navStyle.value.transform && isHorizontal.value) {
+				return Number(navStyle.value.transform.match(/translateY\(-(\d+(\.\d+)*)px\)/)[1])
+			} else if (navStyle.value.transform) {
+				return Number(navStyle.value.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1])
+			}
+			return 0
 		}
 		const getTabIsClosable = tab => {
 			return props.closable && !tab.disabled && !tab.unClosed
 		}
 		const getTabItemStyle = (tab, tabIndex) => {
-			return {
-				marginLeft: tabIndex ? `${props.gutter}px` : 0
+			let itemStyle = {}
+			if (isHorizontal.value) {
+				itemStyle.marginTop = tabIndex ? `${props.gutter}px` : 0
+			} else {
+				itemStyle.marginLeft = tabIndex ? `${props.gutter}px` : 0
 			}
+			return itemStyle
 		}
 		const handleResize = e => {
-			const navWidth = navRef.value.offsetWidth
-			const containerWidth = navScrollRef.value.offsetWidth
+			const navOffset = isHorizontal.value ? navRef.value.offsetHeight : navRef.value.offsetWidth
+			const containerOffset = isHorizontal.value ? navScrollRef.value.offsetHeight : navScrollRef.value.offsetWidth
 			const currentOffset = getCurrentScrollOffset()
-			if (containerWidth < navWidth) {
+			if (containerOffset < navOffset) {
 				scrollable.value = true
-				if (navWidth - currentOffset < containerWidth) {
-					setOffset(navWidth - containerWidth)
+				if (navOffset - currentOffset < containerOffset) {
+					setOffset(navOffset - containerOffset)
 				}
 			} else {
 				scrollable.value = false
@@ -173,20 +204,21 @@ export default defineComponent({
 			activeKey.value = tab[props.labelKey]
 			emit('change', tab)
 			if (!scrollable.value) return
-			const navWidth = navRef.value.offsetWidth
-			const containerWidth = navScrollRef.value.offsetWidth
+			const navOffset = isHorizontal.value ? navRef.value.offsetHeight : navRef.value.offsetWidth
+			const containerOffset = isHorizontal.value ? navScrollRef.value.offsetHeight : navScrollRef.value.offsetWidth
 			const prevTabs = navRef.value.querySelectorAll('.sh-tab-item')
 			const tabIndex = tabList.value.findIndex(tb => tb[props.labelKey] === tab[props.labelKey])
+			const offsetName = isHorizontal.value ? 'offsetHeight' : 'offsetWidth'
 			let barOffset = 0
 			if (tabIndex > 0) {
 				let offset = 0
 				for (let i = 0; i < tabIndex; i++) {
-					offset += parseFloat(prevTabs[i].offsetWidth) + props.gutter
+					offset += parseFloat(prevTabs[i][offsetName]) + props.gutter
 				}
 				barOffset = offset
 			}
-			let navOffset = navWidth - barOffset < containerWidth ? navWidth - containerWidth : barOffset
-			setOffset(navOffset)
+			let newOffset = navOffset - barOffset < containerOffset ? navOffset - containerOffset : barOffset
+			setOffset(newOffset)
 		}
 		const handleClose = tab => {
 			closedList.value.push(tab[props.labelKey])
@@ -222,8 +254,10 @@ export default defineComponent({
 			navScrollRef,
 			contentWrapRef,
 			slots,
+			isHorizontal,
 			scrollable,
 			navStyle,
+			tabClass,
 			tabList,
 			activeKey,
 			hasContent,
@@ -244,8 +278,8 @@ export default defineComponent({
 <style scoped lang="scss">
 .sh-tabs {
 	width: 100%;
-	display: block;
 	position: relative;
+	display: flex;
 	.sh-tab-close {
 		display: inline-flex;
 		align-items: center;
@@ -254,6 +288,37 @@ export default defineComponent({
 			background-color: rgba(0, 0, 0, 0.1);
 		}
 	}
+	&-vertical {
+		width: 100%;
+		flex-wrap: wrap;
+		flex-direction: column;
+		&.sh-tabs-reverse {
+			flex-direction: column-reverse;
+		}
+		.sh-tabs-nav {
+			width: 100%;
+		}
+	}
+	&-horizontal {
+		flex-wrap: nowrap;
+		flex-direction: row;
+		.sh-tabs-nav {
+			width: auto;
+		}
+		.sh-tabs-nav,
+		.sh-tabs-nav-wrap,
+		.sh-tabs-nav-inner {
+			flex-direction: column;
+		}
+		.sh-tabs-nav-prev,
+		.sh-tabs-nav-next {
+			width: 100%;
+			height: 26px;
+		}
+		&.sh-tabs-reverse {
+			flex-direction: row-reverse;
+		}
+	}
 	&-nav {
 		display: flex;
 		&-slot {
@@ -273,7 +338,7 @@ export default defineComponent({
 			display: inline-flex;
 			align-items: center;
 			justify-content: center;
-			box-shadow: 0 1px 8px #999;
+			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
 			position: relative;
 			z-index: 10;
 			&:hover {
@@ -301,9 +366,6 @@ export default defineComponent({
 				&:hover {
 					color: var(--vxe-primary-color);
 				}
-				& + .sh-tab-item {
-					margin-left: 5px;
-				}
 				&.sh-tab-item-active {
 					border-bottom: 2px solid var(--vxe-primary-darken-color);
 					color: var(--vxe-primary-color) !important;
@@ -346,8 +408,9 @@ export default defineComponent({
 		width: 100%;
 		&-wrap {
 			flex: 1;
-			width: fit-content;
+			display: flex;
 			white-space: nowrap;
+			width: 100%;
 			&.sh-tabs-content-animated {
 				transition: transform 0.2s ease-in-out;
 			}

package/packages/components/{global-components/sh-tree → sh-tree}/components/table-tree.vue

@@ -77,7 +77,7 @@ export default defineComponent({
 		})
 		const tableProps = computed(() => {
 			return {
-				height: props.isSelect ? '230px' : props.height,
+				height: props.isSelect ? '100%' : props.height,
 				size: props.size,
 				loading: props.loading || treeLoading.value,
 				data: filterData.value || treeData.value,

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

@@ -34,6 +34,7 @@
 }
 
 .sh-tree-select-dropdown {
+    height: 230px
 }
 
 .sh-vxe-tree-table{

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

@@ -11,7 +11,7 @@
 					<div v-if="filter" class="sh-tree-filter">
 						<vxe-input ref="filterInputRef" v-model="filterTextIn" class="sh-tree-filter-input" v-bind="filterInputConfigIn"></vxe-input>
 					</div>
-					<div class="sh-tree-select-dropdown-content">
+					<div class="sh-tree-select-dropdown">
 						<table-tree v-if="pulldownDrop" v-bind="tableTreeProps" @datacall="onDataCall" @select="onChange"></table-tree>
 					</div>
 				</template>
@@ -52,7 +52,7 @@ export default defineComponent({
 		const filterInputRef = ref()
 		// 公共属性
 		const filterTextIn = ref(props.filterText)
-		const selectedKeys = ref(props.modelValue)
+		const selectedKeys = ref([])
 		const selectedData = ref([])
 		const treeData = ref(props.options)
 		// 下拉专属属性
@@ -66,7 +66,13 @@ export default defineComponent({
 				let selectRows = getSelectRowsByValue(selectedKeys.value)
 				let labelFieldList = selectRows.map(item => $vUtils.get(item, labelField))
 				if (format) {
-					let prefixKey = field.endsWith('Id') ? String(field).replace('Id', '') : field
+					let prefixKey = field
+					let endStrs = ['Id', '_id']
+					endStrs.forEach(end => {
+						if (field.endsWith(end)) {
+							prefixKey = field.replace(end, '')
+						}
+					})
 					let dataformat = format.replace(/@/gi, prefixKey)
 					if (multiple) {
 						let formatKeys = $vUtils.getFormatKeys(dataformat)
@@ -184,10 +190,15 @@ export default defineComponent({
 			() => props.modelValue,
 			value => {
 				if (pulldownDrop.value) return
-				selectedKeys.value = value
+				if ($vUtils.isNone(value)) {
+					selectedKeys.value = []
+				} else {
+					selectedKeys.value = Array.isArray(value) ? value : [value]
+				}
 			},
 			{
-				immediate: true
+				immediate: true,
+				deep: true
 			}
 		)
 

package/packages/components/{global-components/sh-tree → sh-tree}/mixin/treeProps.js

@@ -1,6 +1,6 @@
 export default {
 	modelValue: {
-		type: Array,
+		type: [Array, String],
 		default() {
 			return []
 		}

package/packages/index.js

@@ -1,39 +1,39 @@
-import packageConfig from '../package.json'
-import { utils, notice } from 'sh-tools'
-import { VueMasonryPlugin } from 'vue-masonry'
-import directive from './directive/index'
-import vxeTable from './vxeTable/index'
-import globalComponents from './components/index'
-import mixin from './mixin/index'
-import './css/index'
-
-// 全局公共封装组件
-const install = function (root, option = {}) {
-	if (install.installed) return
-	root.config.globalProperties.$vUtils = utils
-	root.config.globalProperties.$Notice = notice
-	root.mixin(mixin)
-	root.use(VueMasonryPlugin, option)
-	root.use(directive)
-	root.use(vxeTable, option)
-	root.use(globalComponents, option)
-}
-
-const ShUI = {
-	name: packageConfig.name,
-	version: packageConfig.version,
-	install
-}
-
-let consInfo = ''
-let defaultBg = 'padding: 5px; color: #111; background: #f5f7f9; font-weight: bold;'
-let tagBg1 = 'padding: 5px; color: #fff; background: #8e2eff; font-weight: bold;'
-let tagBg2 = 'padding: 5px; color: #333; background: #ffee2e; font-weight: bold;'
-if ((window.navigator.language || window.navigator.browserLanguage).toLowerCase() === 'zh-cn') {
-	consInfo = `%c由%c${ShUI.name}%c提供技术支持，版本%c${ShUI.version}%c`
-} else {
-	consInfo = `%cPowered by%c${ShUI.name}%c，version%c${ShUI.version}%c`
-}
-console.info(consInfo, defaultBg, tagBg1, defaultBg, tagBg2, defaultBg)
-
-export default ShUI
+import packageConfig from '../package.json'
+import { utils, notice } from 'sh-tools'
+import { VueMasonryPlugin } from 'vue-masonry'
+import directive from './directive/index'
+import vxeTable from './vxeTable/index'
+import components from './components/index'
+import mixin from './mixin/index'
+import './css/index'
+
+// 全局公共封装组件
+const install = function (root, option = {}) {
+	if (install.installed) return
+	root.config.globalProperties.$vUtils = utils
+	root.config.globalProperties.$Notice = notice
+	root.mixin(mixin)
+	root.use(VueMasonryPlugin, option)
+	root.use(directive)
+	root.use(vxeTable, option)
+	root.use(components, option)
+}
+
+const ShUI = {
+	name: packageConfig.name,
+	version: packageConfig.version,
+	install
+}
+
+let consInfo = ''
+let defaultBg = 'padding: 5px; color: #111; background: #f5f7f9; font-weight: bold;'
+let tagBg1 = 'padding: 5px; color: #fff; background: #8e2eff; font-weight: bold;'
+let tagBg2 = 'padding: 5px; color: #333; background: #ffee2e; font-weight: bold;'
+if ((window.navigator.language || window.navigator.browserLanguage).toLowerCase() === 'zh-cn') {
+	consInfo = `%c由%c${ShUI.name}%c提供技术支持，版本%c${ShUI.version}%c`
+} else {
+	consInfo = `%cPowered by%c${ShUI.name}%c，version%c${ShUI.version}%c`
+}
+console.info(consInfo, defaultBg, tagBg1, defaultBg, tagBg2, defaultBg)
+
+export default ShUI

package/packages/{components/other-components → other}/sh-cron-modal/tabs/cron-week-box.vue

@@ -1,126 +1,126 @@
-<template>
-	<div class="sh-cron-config-list">
-		<vxe-radio-group v-model="type">
-			<div class="item">
-				<vxe-radio :label="TypeEnum.unset" v-bind="beforeRadioAttrs">不设置</vxe-radio>
-				<span class="tip-info">日和周只能设置其中之一</span>
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.range" v-bind="beforeRadioAttrs">区间</vxe-radio>
-				<span> 从 </span>
-				<vxe-select v-model="valueRange.start" :options="weekOptions" v-bind="typeRangeSelectAttrs" />
-				<span> 至 </span>
-				<vxe-select v-model="valueRange.end" :options="weekOptions" v-bind="typeRangeSelectAttrs" />
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</vxe-radio>
-				<span> 从 </span>
-				<vxe-select v-model="valueLoop.start" :options="weekOptions" v-bind="typeLoopSelectAttrs" />
-				<span> 至 </span>
-				<vxe-input v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
-			</div>
-			<div class="item">
-				<vxe-radio :label="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</vxe-radio>
-				<div class="list">
-					<vxe-checkbox-group v-model="valueList">
-						<template v-for="i in specifyRange" :key="i">
-							<vxe-checkbox :label="i" v-bind="typeSpecifyAttrs">{{ i }}</vxe-checkbox>
-						</template>
-					</vxe-checkbox-group>
-				</div>
-			</div>
-		</vxe-radio-group>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed, getCurrentInstance, watch } from 'vue'
-import cronProps from '../mixin/cron-props'
-emits: cronEmits,
-import cronHooks from '../mixin/cron-hooks'
-import cronEmits from '../mixin/cron-emits'
-const WEEK_MAP_EN = {
-	1: 'SUN',
-	2: 'MON',
-	3: 'TUE',
-	4: 'WED',
-	5: 'THU',
-	6: 'FRI',
-	7: 'SAT'
-}
-const WEEK_MAP_CN = {
-	1: '周日',
-	2: '周一',
-	3: '周二',
-	4: '周三',
-	5: '周四',
-	6: '周五',
-	7: '周六'
-}
-export default defineComponent({
-	name: 'CronWeekBox',
-	props: {
-		...cronProps,
-		day: {
-			type: String,
-			default: '*'
-		}
-	},
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const { emit, slots } = context
-
-		const useCron = cronHooks(props, context, proxy, {
-			defaultValue: '*',
-			minValue: 1,
-			maxValue: 7,
-			valueRange: { start: 1, end: 7 },
-			valueLoop: { start: 2, interval: 1 }
-		})
-
-		const disabledChoice = computed(() => {
-			return (props.day && props.day !== '?') || props.disabled
-		})
-		const weekOptions = computed(() => {
-			let options = []
-			for (let weekKey of Object.keys(WEEK_MAP_CN)) {
-				let weekName = WEEK_MAP_CN[weekKey]
-				options.push({
-					value: Number.parseInt(weekKey),
-					label: weekName
-				})
-			}
-			return options
-		})
-		const typeRangeSelectAttrs = computed(() => {
-			return {
-				class: ['cron-item-input'],
-				disabled: useCron.typeRangeAttrs.value.disabled
-			}
-		})
-		const typeLoopSelectAttrs = computed(() => {
-			return {
-				class: ['cron-item-input'],
-				disabled: useCron.typeLoopAttrs.value.disabled
-			}
-		})
-
-		watch(
-			() => props.day,
-			() => {
-				useCron.updateValue(disabledChoice.value ? '?' : useCron.computeValue.value)
-			}
-		)
-
-		return {
-			...useCron,
-			weekOptions,
-			typeRangeSelectAttrs,
-			typeLoopSelectAttrs
-		}
-	}
-})
-</script>
-
-<style scoped></style>
+<template>
+	<div class="sh-cron-config-list">
+		<vxe-radio-group v-model="type">
+			<div class="item">
+				<vxe-radio :label="TypeEnum.unset" v-bind="beforeRadioAttrs">不设置</vxe-radio>
+				<span class="tip-info">日和周只能设置其中之一</span>
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.range" v-bind="beforeRadioAttrs">区间</vxe-radio>
+				<span> 从 </span>
+				<vxe-select v-model="valueRange.start" :options="weekOptions" v-bind="typeRangeSelectAttrs" />
+				<span> 至 </span>
+				<vxe-select v-model="valueRange.end" :options="weekOptions" v-bind="typeRangeSelectAttrs" />
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</vxe-radio>
+				<span> 从 </span>
+				<vxe-select v-model="valueLoop.start" :options="weekOptions" v-bind="typeLoopSelectAttrs" />
+				<span> 至 </span>
+				<vxe-input v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
+			</div>
+			<div class="item">
+				<vxe-radio :label="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</vxe-radio>
+				<div class="list">
+					<vxe-checkbox-group v-model="valueList">
+						<template v-for="i in specifyRange" :key="i">
+							<vxe-checkbox :label="i" v-bind="typeSpecifyAttrs">{{ i }}</vxe-checkbox>
+						</template>
+					</vxe-checkbox-group>
+				</div>
+			</div>
+		</vxe-radio-group>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, watch } from 'vue'
+import cronProps from '../mixin/cron-props'
+import cronHooks from '../mixin/cron-hooks'
+import cronEmits from '../mixin/cron-emits'
+const WEEK_MAP_EN = {
+	1: 'SUN',
+	2: 'MON',
+	3: 'TUE',
+	4: 'WED',
+	5: 'THU',
+	6: 'FRI',
+	7: 'SAT'
+}
+const WEEK_MAP_CN = {
+	1: '周日',
+	2: '周一',
+	3: '周二',
+	4: '周三',
+	5: '周四',
+	6: '周五',
+	7: '周六'
+}
+export default defineComponent({
+	name: 'CronWeekBox',
+	props: {
+		...cronProps,
+		day: {
+			type: String,
+			default: '*'
+		}
+	},
+	emits: cronEmits,
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const useCron = cronHooks(props, context, proxy, {
+			defaultValue: '*',
+			minValue: 1,
+			maxValue: 7,
+			valueRange: { start: 1, end: 7 },
+			valueLoop: { start: 2, interval: 1 }
+		})
+
+		const disabledChoice = computed(() => {
+			return (props.day && props.day !== '?') || props.disabled
+		})
+		const weekOptions = computed(() => {
+			let options = []
+			for (let weekKey of Object.keys(WEEK_MAP_CN)) {
+				let weekName = WEEK_MAP_CN[weekKey]
+				options.push({
+					value: Number.parseInt(weekKey),
+					label: weekName
+				})
+			}
+			return options
+		})
+		const typeRangeSelectAttrs = computed(() => {
+			return {
+				class: ['cron-item-input'],
+				disabled: useCron.typeRangeAttrs.value.disabled
+			}
+		})
+		const typeLoopSelectAttrs = computed(() => {
+			return {
+				class: ['cron-item-input'],
+				disabled: useCron.typeLoopAttrs.value.disabled
+			}
+		})
+
+		watch(
+			() => props.day,
+			() => {
+				useCron.updateValue(disabledChoice.value ? '?' : useCron.computeValue.value)
+			}
+		)
+
+		return {
+			...useCron,
+			weekOptions,
+			typeRangeSelectAttrs,
+			typeLoopSelectAttrs
+		}
+	}
+})
+</script>
+
+<style scoped></style>