sh-view 2.1.0 → 2.3.0

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

@@ -0,0 +1,266 @@
+<template>
+	<div ref="tableWrapRef" class="sh-vxe-table" :class="{ 'sh-table-ghost': tableGlobalConfig.ghost }" :style="{ height: wrapHeight }">
+		<div v-if="isTopSlot" ref="topSlotRef" v-resize="handleResize" class="sh-table-top"><slot name="top"></slot></div>
+		<div v-if="isFormSlot" ref="formSlotRef" v-resize="handleResize" class="sh-table-form">
+			<slot name="form">
+				<sh-query v-bind="tableQueryConfig" @submit="onFormSubmit" @reset="onFormReset" @collapsed="onFormCollapsed" @edit-closed="onFormEditClosed">
+					<template #footLeft><slot name="formLeft"></slot></template>
+					<template #footRight><slot name="formRight"></slot></template>
+				</sh-query>
+			</slot>
+		</div>
+		<div v-if="isToolbarSlot" ref="toolbarSlotRef" v-resize="handleResize" class="sh-table-toolbar">
+			<slot name="toolbar">
+				<div class="sh-table-toolbar-wrap">
+					<div class="sh-table-toolbar-left">
+						<div v-if="tableGlobalConfig.title" class="sh-table-toolbar-item">
+							<h3 class="tableName">{{ tableGlobalConfig.tableName }}</h3>
+						</div>
+						<!--ps:全表搜索不支持反转-->
+						<div v-if="tableGlobalConfig.globalFilter" class="sh-table-toolbar-item">
+							<vxe-input v-model="tableFilterText" v-bind="tableFilterConfig" @blur="handleTableFilter" @clear="handleTableFilter" @search-click="handleTableFilter" />
+							<span v-if="tableFilterData">
+								共搜索到 <strong>{{ tableFilterData.length }}</strong> 条数据
+							</span>
+						</div>
+						<div v-if="slots.toolbarLeft" class="sh-table-toolbar-item">
+							<slot name="toolbarLeft"></slot>
+						</div>
+					</div>
+					<div class="sh-table-toolbar-right">
+						<div v-if="slots.toolbarRight" class="sh-table-toolbar-item">
+							<slot name="toolbarRight"></slot>
+						</div>
+						<template v-for="(tool, toolIndex) in tableTools" :key="toolIndex">
+							<div class="sh-table-toolbar-item">
+								<vxe-button v-ripple :size="size" v-bind="tool" @click="handleTableTool(tool)"></vxe-button>
+							</div>
+						</template>
+					</div>
+				</div>
+			</slot>
+		</div>
+		<div v-if="isHeadSlot" ref="headSlotRef" v-resize="handleResize" class="sh-table-head"><slot name="head"></slot></div>
+		<vxe-table
+			:id="id"
+			ref="tableRef"
+			:key="renderKey"
+			:class="{ 'is--hasfooter': showFooter }"
+			:data="tableViewData"
+			:width="width"
+			:height="tableHeight"
+			:min-height="minHeight"
+			:max-height="maxHeight"
+			:auto-resize="autoResize"
+			:sync-resize="syncResize"
+			:stripe="stripe && !tableTreeConfig"
+			:border="border"
+			:round="round"
+			:size="size"
+			:loading="loading"
+			:align="align"
+			:header-align="headerAlign"
+			:show-header="showHeader"
+			:row-class-name="rowClassName"
+			:cell-class-name="cellClassName"
+			:header-row-class-name="headerRowClassName"
+			:header-cell-class-name="headerCellClassName"
+			:footer-row-class-name="footerRowClassName"
+			:footer-cell-class-name="footerCellClassName"
+			:show-footer="showFooter"
+			:footer-method="footerMethod || tableFooterMethod"
+			:footer-span-method="footerSpanMethod || tableFooterSpanMethod"
+			:merge-cells="mergeCells"
+			:merge-footer-items="mergeFooterItems"
+			:show-overflow="showOverflow"
+			:show-header-overflow="showHeaderOverflow"
+			:show-footer-overflow="showFooterOverflow"
+			:keep-source="keepSource"
+			:empty-text="emptyText"
+			:row-config="rowConfig"
+			:column-config="tableColumnConfig"
+			:checkbox-config="tableCheckboxConfig"
+			:radio-config="radioConfig"
+			:tree-config="tableTreeConfig"
+			:seq-config="tableSeqConfig"
+			:expand-config="expandConfig"
+			:tooltip-config="tooltipConfig"
+			:edit-config="tableEditConfig"
+			:valid-config="validConfig"
+			:edit-rules="tableEditRules"
+			:toolbar-config="toolbarConfig"
+			:keyboard-config="keyboardConfig"
+			:sort-config="sortConfig"
+			:mouse-config="mouseConfig"
+			:custom-config="customConfig"
+			:export-config="tableExportConfig"
+			:print-config="tablePrintConfig"
+			:scroll-x="scrollX"
+			:scroll-y="scrollY"
+			@current-change="onCurrentChange"
+			@radio-change="onRadioChange"
+			@checkbox-change="onSelectionChange"
+			@checkbox-all="onSelectionChange"
+			@checkbox-range-end="onSelectionChange"
+			@cell-click="onCellClick"
+			@cell-dblclick="onCellDblClick"
+			@header-cell-click="onHeaderCellClick"
+			@sort-change="onSortChange"
+			@filter-change="onFilterChange"
+			@toggle-row-expand="onToggleRowExpand"
+			@toggle-tree-expand="onToggleTreeExpand"
+			@edit-closed="onEditClosed"
+			@edit-actived="onEditActived"
+			@scroll="onScroll"
+			@custom="onCustom"
+			@toolbar-button-click="onToolbarButtonClick"
+			@toolbar-tool-click="onToolbarToolClick"
+			@option-click="handleGoptionClick">
+			<template v-for="(column, columnIndex) in columnsConfigDefault" :key="columnIndex">
+				<vxe-column v-if="!!tableGlobalConfig[column.type]" v-bind="column"></vxe-column>
+			</template>
+			<template v-for="(column, columnIndex) in columns" :key="columnIndex">
+				<sh-column :column="column"></sh-column>
+			</template>
+			<template #empty>
+				<sh-empty :icon="emptyIcon" :content="emptyText"></sh-empty>
+			</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">
+			<vxe-pager ref="pagerSlotRef" v-bind="tablePagerConfig" @page-change="onPageChange">
+				<template #pagerLeft>
+					<div v-if="selectionRows.length" class="sh-table-footer-info">
+						已选择 <strong>{{ selectionRows.length }}</strong> 项
+					</div>
+					<slot name="pagerLeft"></slot>
+				</template>
+				<template #pagerRight>
+					<slot name="pagerRight"></slot>
+				</template>
+			</vxe-pager>
+		</div>
+		<div v-if="isBottomSlot" ref="bottomSlotRef" v-resize="handleResize" class="sh-table-bottom"><slot name="bottom"></slot></div>
+		<!--导入弹窗-->
+		<importModal
+			v-if="importVisible"
+			v-model:visible="importVisible"
+			need-validate
+			:columns="columns"
+			:import-config="importConfig"
+			:import-rules="tableEditRules"
+			@confirm="setImportData"></importModal>
+	</div>
+</template>
+
+<script>
+import { computed, defineComponent, getCurrentInstance, provide, ref } from 'vue'
+import './css/index.scss'
+
+import props from './js/props'
+import shColumn from './components/sh-column.vue'
+import importModal from './components/importModal.vue'
+import useTable from './js/useTable'
+import { turnColumnItemFilters } from './js/tableMethods'
+export default defineComponent({
+	name: 'ShTable',
+	components: {
+		shColumn,
+		importModal
+	},
+	props: {
+		...props
+	},
+	emits: [
+		'current-change',
+		'radio-change',
+		'selection-change',
+		'cell-click',
+		'cell-dblclick',
+		'header-cell-click',
+		'sort-change',
+		'filter-change',
+		'toggle-row-expand',
+		'toggle-tree-expand',
+		'edit-closed',
+		'edit-actived',
+		'scroll',
+		'custom',
+		'page-change',
+		'toolbar-button-click',
+		'toolbar-tool-click',
+
+		'form-submit',
+		'form-reset',
+		'form-edit-closed',
+		'form-submit-invalid',
+		'import-confirm',
+		'globaloption',
+		'toolbaroption'
+	],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { emit, slots } = context
+		const tableWrapRef = ref()
+		const topSlotRef = ref()
+		const formSlotRef = ref()
+		const toolbarSlotRef = ref()
+		const headSlotRef = ref()
+		const footSlotRef = ref()
+		const pagerSlotRef = ref()
+		const bottomSlotRef = ref()
+		const tableHeight = ref(props.height)
+
+		const useTableHooks = useTable(props, context, proxy)
+
+		const isTopSlot = computed(() => Boolean(slots.top))
+		const isFormSlot = computed(() => useTableHooks.tableGlobalConfig.value.search || Boolean(slots.form))
+		const isToolbarSlot = computed(() => {
+			const { title, globalFilter } = useTableHooks.tableGlobalConfig.value
+			return title || globalFilter || slots.toolbar || slots.toolbarLeft || slots.toolbarRight || useTableHooks.tableTools.value.length
+		})
+		const isHeadSlot = computed(() => Boolean(slots.head))
+		const isFootSlot = computed(() => Boolean(slots.foot))
+		const isPagerSlot = computed(() => useTableHooks.tablePagerConfig.value.enabled)
+		const isBottomSlot = computed(() => Boolean(slots.bottom))
+
+		provide('ShTableInstance', {
+			columnObjConfig: useTableHooks.tableColumnObjConfig,
+			turnColumnItemFilters: useTableHooks.turnColumnItemFilters,
+			slots: useTableHooks.slots
+		})
+
+		const handleResize = e => {
+			if (useTableHooks.wrapHeight.value === 'auto') return
+			let slotRefs = [topSlotRef, formSlotRef, toolbarSlotRef, headSlotRef, footSlotRef, pagerSlotRef, bottomSlotRef]
+			let otherHeight = 0
+			let parentHeight = tableWrapRef.value?.offsetHeight
+			slotRefs.forEach(slotRef => {
+				otherHeight += slotRef.value?.offsetHeight || 0
+			})
+			tableHeight.value = parentHeight - otherHeight
+		}
+
+		return {
+			...useTableHooks,
+			tableWrapRef,
+			topSlotRef,
+			formSlotRef,
+			toolbarSlotRef,
+			headSlotRef,
+			footSlotRef,
+			pagerSlotRef,
+			bottomSlotRef,
+			tableHeight,
+			isTopSlot,
+			isFormSlot,
+			isToolbarSlot,
+			isHeadSlot,
+			isFootSlot,
+			isPagerSlot,
+			isBottomSlot,
+			handleResize
+		}
+	}
+})
+</script>

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

@@ -1,11 +1,11 @@
 <template>
 	<div class="sh-tabs" :class="{ 'sh-tabs-card': type === 'card' }">
 		<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="navWrap" v-resize="handleResize" class="sh-tabs-nav-wrap" :class="{ 'sh-tabs-nav-scrollable': scrollable }">
+			<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>
-				<div ref="navScroll" class="sh-tabs-nav-scroll" @DOMMouseScroll="handleScroll" @mousewheel="handleScroll">
-					<div ref="nav" v-resize="handleResize" class="sh-tabs-nav-inner" :style="navStyle">
+				<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">
 							<div class="sh-tab-item" :class="{ 'sh-tab-item-disabled': tab.disabled, 'sh-tab-item-active': tab.value === activeKey }" @click="handleChange(tab)">
 								<slot name="tabItem" v-bind="{ ...tab, isActive: tab.value === activeKey }">
@@ -19,7 +19,7 @@
 				</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>
 			</div>
-			<div v-if="$slots.right" class="sh-tabs-nav-slot sh-tabs-nav-right"><slot name="right"></slot></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">
@@ -34,7 +34,8 @@
 </template>
 
 <script>
-export default {
+import { defineComponent, computed, getCurrentInstance, ref, watch, onBeforeMount } from 'vue'
+export default defineComponent({
 	name: 'ShTabs',
 	props: {
 		modelValue: {
@@ -72,89 +73,73 @@ export default {
 		}
 	},
 	emits: ['update:modelValue', 'close', 'change'],
-	data() {
-		return {
-			activeKey: this.modelValue,
-			scrollable: false,
-			closedList: [],
-			navStyle: { transform: '' }
-		}
-	},
-	computed: {
-		hasContent() {
-			return this.isContent && this.activeKey && this.options.map(item => item.value).includes(this.activeKey)
-		},
-		tabList() {
-			return this.options.filter(tab => !this.closedList.includes(tab.value)) || []
-		},
-		contentStyle() {
-			const x = this.tabList.findIndex(tab => tab.value === this.activeKey)
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const navRef = ref()
+		const navWrapRef = ref()
+		const navScrollRef = ref()
+		const contentWrapRef = ref()
+		const activeKey = ref(props.modelValue)
+		const scrollable = ref(false)
+		const closedList = ref([])
+		const navStyle = ref({ transform: '' })
+
+		const hasContent = computed(() => props.isContent && activeKey.value && props.options.map(item => item.value).includes(activeKey.value))
+		const tabList = computed(() => props.options.filter(tab => !closedList.value.includes(tab.value)) || [])
+		const contentStyle = computed(() => {
+			const x = tabList.value.findIndex(tab => tab.value === activeKey.value)
 			const p = x === 0 ? '0%' : `-${x}00%`
 			let style = {}
 			if (x > -1) {
-				style = {
-					transform: `translateX(${p}) translateZ(0px)`
-				}
+				style = { transform: `translateX(${p}) translateZ(0px)` }
 			}
 			return style
-		}
-	},
-	watch: {
-		modelValue(val) {
-			this.activeKey = val
-		},
-		activeKey(val) {
-			this.$emit('update:modelValue', val)
-		},
-		options() {
-			this.closedList = []
-		}
-	},
-	mounted() {},
-	beforeUnmount() {},
-	methods: {
-		scrollPrev() {
-			const containerWidth = this.$refs.navScroll.offsetWidth
-			const currentOffset = this.getCurrentScrollOffset()
+		})
+
+		const scrollPrev = () => {
+			const containerWidth = navScrollRef.value.offsetWidth
+			const currentOffset = getCurrentScrollOffset()
 			if (!currentOffset) return
 			let newOffset = currentOffset > containerWidth ? currentOffset - containerWidth : 0
-			this.setOffset(newOffset)
-		},
-		scrollNext() {
-			const navWidth = this.$refs.nav.offsetWidth
-			const containerWidth = this.$refs.navScroll.offsetWidth
-			const currentOffset = this.getCurrentScrollOffset()
+			setOffset(newOffset)
+		}
+		const scrollNext = () => {
+			const navWidth = navRef.value.offsetWidth
+			const containerWidth = navScrollRef.value.offsetWidth
+			const currentOffset = getCurrentScrollOffset()
 			if (navWidth - currentOffset <= containerWidth) return
 			let newOffset = navWidth - currentOffset > containerWidth * 2 ? currentOffset + containerWidth : navWidth - containerWidth
-			this.setOffset(newOffset)
-		},
-		setOffset(value) {
-			this.navStyle.transform = `translateX(-${value}px)`
-		},
-		getCurrentScrollOffset() {
-			const { navStyle } = this
-			return navStyle.transform ? Number(navStyle.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1]) : 0
-		},
-		getTabIsClosable(tab) {
-			return this.closable && !tab.disabled && !tab.unClosed
-		},
-		handleResize(e) {
-			const navWidth = this.$refs.nav.offsetWidth
-			const containerWidth = this.$refs.navScroll.offsetWidth
-			const currentOffset = this.getCurrentScrollOffset()
+			setOffset(newOffset)
+		}
+		const setOffset = value => {
+			navStyle.value.transform = `translateX(-${value}px)`
+		}
+		const getCurrentScrollOffset = () => {
+			return navStyle.value.transform ? Number(navStyle.value.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1]) : 0
+		}
+		const getTabIsClosable = tab => {
+			return props.closable && !tab.disabled && !tab.unClosed
+		}
+		const handleResize = e => {
+			const navWidth = navRef.value.offsetWidth
+			const containerWidth = navScrollRef.value.offsetWidth
+			const currentOffset = getCurrentScrollOffset()
 			if (containerWidth < navWidth) {
-				this.scrollable = true
+				scrollable.value = true
 				if (navWidth - currentOffset < containerWidth) {
-					this.setOffset(navWidth - containerWidth)
+					setOffset(navWidth - containerWidth)
 				}
 			} else {
-				this.scrollable = false
+				scrollable.value = false
 				if (currentOffset > 0) {
-					this.setOffset(0)
+					setOffset(0)
 				}
 			}
-		},
-		handleScroll(e) {
+		}
+		const handleScroll = e => {
 			e.preventDefault()
 			e.stopPropagation()
 			let delta = 0
@@ -162,20 +147,20 @@ export default {
 				delta = e.wheelDelta ? e.wheelDelta : -(e.detail || 0) * 40
 			}
 			if (delta > 0) {
-				this.scrollPrev()
+				scrollPrev()
 			} else {
-				this.scrollNext()
+				scrollNext()
 			}
-		},
-		handleChange(tab) {
+		}
+		const handleChange = tab => {
 			if (!tab || tab.disabled) return
-			this.activeKey = tab.value
-			this.$emit('change', tab)
-			if (!this.scrollable) return
-			const navWidth = this.$refs.nav.offsetWidth
-			const containerWidth = this.$refs.navScroll.offsetWidth
-			const prevTabs = this.$refs.nav.querySelectorAll('.sh-tab-item')
-			const tabIndex = this.tabList.findIndex(tb => tb.value === tab.value)
+			activeKey.value = tab.value
+			emit('change', tab)
+			if (!scrollable.value) return
+			const navWidth = navRef.value.offsetWidth
+			const containerWidth = navScrollRef.value.offsetWidth
+			const prevTabs = navRef.value.querySelectorAll('.sh-tab-item')
+			const tabIndex = tabList.value.findIndex(tb => tb.value === tab.value)
 			let barOffset = 0
 			if (tabIndex > 0) {
 				const gutter = 5
@@ -186,18 +171,58 @@ export default {
 				barOffset = offset
 			}
 			let navOffset = navWidth - barOffset < containerWidth ? navWidth - containerWidth : barOffset
-			this.setOffset(navOffset)
-		},
-		handleClose(tab) {
-			this.closedList.push(tab.value)
-			if (tab.value === this.activeKey) {
-				let isNotDisabledList = this.tabList.filter(tab => !tab.disabled)
-				this.activeKey = isNotDisabledList.length ? isNotDisabledList[0].value : ''
+			setOffset(navOffset)
+		}
+		const handleClose = tab => {
+			closedList.value.push(tab.value)
+			if (tab.value === activeKey.value) {
+				let isNotDisabledList = tabList.value.filter(tab => !tab.disabled)
+				activeKey.value = isNotDisabledList.length ? isNotDisabledList[0].value : ''
 			}
-			this.$emit('close', tab)
+			emit('close', tab)
+		}
+
+		watch(
+			() => props.modelValue,
+			value => {
+				activeKey.value = value
+			}
+		)
+		watch(
+			() => activeKey.value,
+			value => {
+				emit('update:modelValue', value)
+			}
+		)
+		watch(
+			() => props.options,
+			value => {
+				closedList.value = []
+			}
+		)
+
+		return {
+			navRef,
+			navWrapRef,
+			navScrollRef,
+			contentWrapRef,
+			slots,
+			scrollable,
+			navStyle,
+			tabList,
+			activeKey,
+			hasContent,
+			contentStyle,
+			scrollPrev,
+			scrollNext,
+			handleScroll,
+			handleResize,
+			handleChange,
+			handleClose,
+			getTabIsClosable
 		}
 	}
-}
+})
 </script>
 
 <style scoped lang="scss">

package/packages/components/global-components/sh-tag/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="sh-tag" :class="classes" :style="[borderStyle, backgroundStyle]" @click.stop="check">
 		<span v-if="type === 'dot'" class="sh-tag-other"><span class="sh-tag-dot" :style="[backgroundStyle]"></span></span>
-		<span class="sh-tag-text" :class="textClasses" :style="[fontStyle]"><slot></slot></span>
+		<span class="sh-tag-text" :style="[fontStyle]"><slot></slot></span>
 		<a v-if="closable" class="sh-tag-other sh-tag-close" :style="[borderStyle]" @click="close">
 			<slot name="close"><sh-icon type="ios-close"></sh-icon></slot>
 		</a>
@@ -9,6 +9,7 @@
 </template>
 
 <script>
+import { defineComponent, computed, getCurrentInstance, ref, watch, onBeforeMount } from 'vue'
 const colorMap = {
 	default: 'var(-vxe-table-header-background-color)',
 	primary: 'var(--vxe-primary-color)',
@@ -22,7 +23,7 @@ const fontColorMap = {
 const borderColorMap = {
 	default: 'null'
 }
-export default {
+export default defineComponent({
 	name: 'ShTag',
 	props: {
 		closable: {
@@ -57,61 +58,61 @@ export default {
 		}
 	},
 	emits: ['change', 'close'],
-	data() {
-		return {
-			isChecked: this.checked
-		}
-	},
-	computed: {
-		colorIn() {
-			return this.color || 'default'
-		},
-		colorRgb() {
-			return colorMap[this.colorIn] || this.$vUtils.lighten(this.colorIn)
-		},
-		isCustom() {
-			return !!colorMap[this.colorIn]
-		},
-		fontStyle() {
-			return { color: this.isCustom && !this.type ? fontColorMap[this.colorIn] || '#fff' : this.colorRgb }
-		},
-		borderStyle() {
-			return { borderWidth: '1px', borderStyle: 'solid', borderColor: borderColorMap[this.colorIn] || this.colorRgb }
-		},
-		backgroundStyle() {
-			if (this.isCustom) return { backgroundColor: this.colorRgb, color: '#fff' }
-			return { backgroundColor: this.$vUtils.lighten(this.colorIn, this.opacity) }
-		},
-		classes() {
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const isChecked = ref(props.checked)
+		const colorIn = computed(() => props.color || 'default')
+		const colorRgb = computed(() => colorMap[colorIn.value] || $vUtils.lighten(colorIn.value))
+		const isCustom = computed(() => !!colorMap[colorIn.value])
+		const fontStyle = computed(() => {
+			return { color: isCustom.value && !props.type ? fontColorMap[colorIn.value] || '#fff' : colorRgb.value }
+		})
+		const borderStyle = computed(() => {
+			return { borderWidth: '1px', borderStyle: 'solid', borderColor: borderColorMap[colorIn.value] || colorRgb.value }
+		})
+		const backgroundStyle = computed(() => {
+			if (isCustom.value) return { backgroundColor: colorRgb.value, color: '#fff' }
+			return { backgroundColor: $vUtils.lighten(colorIn.value, props.opacity) }
+		})
+		const classes = computed(() => {
 			return {
-				[`${this.size}`]: !!this.size,
-				[`${this.type}`]: !!this.type,
-				[`closable`]: this.closable,
-				[`checked`]: this.isChecked,
-				[`checkable`]: this.checkable
+				[`${props.size}`]: !!props.size,
+				[`${props.type}`]: !!props.type,
+				[`closable`]: props.closable,
+				[`checked`]: isChecked.value,
+				[`checkable`]: props.checkable
 			}
-		},
-		textClasses() {
-			return {}
+		})
+
+		const close = event => {
+			emit('close', event, props.name)
 		}
-	},
-	watch: {
-		checked(val) {
-			this.isChecked = val
+		const check = () => {
+			if (!props.checkable) return
+			isChecked.value = !isChecked.value
+			emit('change', isChecked.value, props.name)
 		}
-	},
-	methods: {
-		close(event) {
-			this.$emit('close', event, this.name)
-		},
-		check() {
-			if (!this.checkable) return
-			const checked = !this.isChecked
-			this.isChecked = checked
-			this.$emit('change', checked, this.name)
+
+		watch(
+			() => props.checked,
+			value => {
+				isChecked.value = val
+			}
+		)
+
+		return {
+			classes,
+			borderStyle,
+			backgroundStyle,
+			fontStyle,
+			check,
+			close
 		}
 	}
-}
+})
 </script>
 
 <style scoped lang="scss">