sh-view 2.8.0 → 2.8.2

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

@@ -1,168 +1,168 @@
-<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" :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>
-	</div>
-</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)',
-	success: 'var(--vxe-success-color)',
-	warning: 'var(--vxe-warning-color)',
-	error: 'var(--vxe-danger-color)'
-}
-const fontColorMap = {
-	default: 'var(--vxe-font-color)'
-}
-const borderColorMap = {
-	default: 'null'
-}
-export default defineComponent({
-	name: 'ShTag',
-	props: {
-		closable: {
-			type: Boolean,
-			default: false
-		},
-		checkable: {
-			type: Boolean,
-			default: false
-		},
-		checked: {
-			type: Boolean,
-			default: false
-		},
-		color: {
-			type: String
-		},
-		type: {
-			type: String,
-			default: '' // 'border', 'dot'
-		},
-		name: {
-			type: [String, Number]
-		},
-		size: {
-			type: String,
-			default: 'default' //  medium / small / mini
-		},
-		opacity: {
-			type: Number,
-			default: 75
-		}
-	},
-	emits: ['change', 'close'],
-	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 {
-				[`${props.size}`]: !!props.size,
-				[`${props.type}`]: !!props.type,
-				[`closable`]: props.closable,
-				[`checked`]: isChecked.value,
-				[`checkable`]: props.checkable
-			}
-		})
-
-		const close = event => {
-			emit('close', event, props.name)
-		}
-		const check = () => {
-			if (!props.checkable) return
-			isChecked.value = !isChecked.value
-			emit('change', isChecked.value, props.name)
-		}
-
-		watch(
-			() => props.checked,
-			value => {
-				isChecked.value = val
-			}
-		)
-
-		return {
-			classes,
-			borderStyle,
-			backgroundStyle,
-			fontStyle,
-			check,
-			close
-		}
-	}
-})
-</script>
-
-<style scoped lang="scss">
-$default-color: #f7f7f7;
-.sh-tag {
-	display: inline-flex;
-	align-items: stretch;
-	margin: 2px 4px 2px 0;
-	border: 1px solid var(--vxe-table-border-color);
-	border-radius: var(--vxe-border-radius);
-	background-color: $default-color;
-	vertical-align: top;
-	overflow: hidden;
-	&.border,
-	&.dot {
-		background-color: transparent !important;
-		color: var(--vxe-font-color) !important;
-	}
-	&.dot {
-		border-color: var(--vxe-table-border-color) !important;
-		color: var(--vxe-font-color) !important;
-		.sh-tag-text {
-			color: inherit !important;
-			line-height: 30px;
-		}
-		.sh-tag-close {
-			border: none !important;
-		}
-	}
-	&-other {
-		display: inline-flex;
-		align-items: center;
-	}
-	&-dot {
-		display: inline-block;
-		width: 12px;
-		height: 12px;
-		border-radius: 50%;
-		background-color: #ccc;
-		margin: 0 2px 0 8px;
-	}
-	&-text {
-		padding: 0 8px;
-		flex: 1;
-	}
-	&-close {
-		padding: 0 3px;
-		border-top: none !important;
-		border-right: none !important;
-		border-bottom: none !important;
-	}
-}
-</style>
+<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" :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>
+	</div>
+</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)',
+	success: 'var(--vxe-success-color)',
+	warning: 'var(--vxe-warning-color)',
+	error: 'var(--vxe-danger-color)'
+}
+const fontColorMap = {
+	default: 'var(--vxe-font-color)'
+}
+const borderColorMap = {
+	default: 'null'
+}
+export default defineComponent({
+	name: 'ShTag',
+	props: {
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		checkable: {
+			type: Boolean,
+			default: false
+		},
+		checked: {
+			type: Boolean,
+			default: false
+		},
+		color: {
+			type: String
+		},
+		type: {
+			type: String,
+			default: '' // 'border', 'dot'
+		},
+		name: {
+			type: [String, Number]
+		},
+		size: {
+			type: String,
+			default: 'default' //  medium / small / mini
+		},
+		opacity: {
+			type: Number,
+			default: 75
+		}
+	},
+	emits: ['change', 'close'],
+	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 {
+				[`${props.size}`]: !!props.size,
+				[`${props.type}`]: !!props.type,
+				[`closable`]: props.closable,
+				[`checked`]: isChecked.value,
+				[`checkable`]: props.checkable
+			}
+		})
+
+		const close = event => {
+			emit('close', event, props.name)
+		}
+		const check = () => {
+			if (!props.checkable) return
+			isChecked.value = !isChecked.value
+			emit('change', isChecked.value, props.name)
+		}
+
+		watch(
+			() => props.checked,
+			value => {
+				isChecked.value = val
+			}
+		)
+
+		return {
+			classes,
+			borderStyle,
+			backgroundStyle,
+			fontStyle,
+			check,
+			close
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss">
+$default-color: #f7f7f7;
+.sh-tag {
+	display: inline-flex;
+	align-items: stretch;
+	margin: 2px 4px 2px 0;
+	border: 1px solid var(--vxe-table-border-color);
+	border-radius: var(--vxe-border-radius);
+	background-color: $default-color;
+	vertical-align: top;
+	overflow: hidden;
+	&.border,
+	&.dot {
+		background-color: transparent !important;
+		color: var(--vxe-font-color) !important;
+	}
+	&.dot {
+		border-color: var(--vxe-table-border-color) !important;
+		color: var(--vxe-font-color) !important;
+		.sh-tag-text {
+			color: inherit !important;
+			line-height: 30px;
+		}
+		.sh-tag-close {
+			border: none !important;
+		}
+	}
+	&-other {
+		display: inline-flex;
+		align-items: center;
+	}
+	&-dot {
+		display: inline-block;
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		background-color: #ccc;
+		margin: 0 2px 0 8px;
+	}
+	&-text {
+		padding: 0 8px;
+		flex: 1;
+	}
+	&-close {
+		padding: 0 3px;
+		border-top: none !important;
+		border-right: none !important;
+		border-bottom: none !important;
+	}
+}
+</style>