fix(ui/select utils/component): select option组件原型完成增加了inject前的provid…

…e key判断 affects: @varlet/ui
varletjs · Jan 23, 2021 · 7f7795a · 7f7795a
1 parent d6d269f
commit 7f7795a
Show file tree

Hide file tree

Showing 35 changed files with 1,425 additions and 461 deletions.
diff --git a/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue b/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue
@@ -77,17 +77,10 @@ export default defineComponent({
 			return changedModelValue
 		}
 
-		watch(
-			() => props.modelValue,
-			() => syncAllCheckbox(),
-			{ deep: true }
-		)
+		watch(() => props.modelValue, syncAllCheckbox, { deep: true })
 
 		// checkbox insert or remove
-		watch(
-			() => length.value,
-			() => syncAllCheckbox()
-		)
+		watch(() => length.value, syncAllCheckbox)
 
 		bindChildren({
 			checkedCount,

diff --git a/packages/varlet-ui/src/checkbox/Checkbox.vue b/packages/varlet-ui/src/checkbox/Checkbox.vue
@@ -89,8 +89,10 @@ export default defineComponent({
 			}
 
 			// has parent check max
-			const forbidCheck = checkboxGroupProvider.checkedCount.value >= Number(checkboxGroupProvider.max.value)
-			if (checkboxGroupProvider && !checked.value && forbidCheck) {
+			const maximum = checkboxGroupProvider
+				? checkboxGroupProvider.checkedCount.value >= Number(checkboxGroupProvider.max.value)
+				: false
+			if (!checked.value && maximum) {
 				return
 			}
 

diff --git a/packages/varlet-ui/src/checkbox/example/index.vue b/packages/varlet-ui/src/checkbox/example/index.vue
@@ -28,13 +28,15 @@
 		</template>
 	</var-checkbox>
 
-	<app-type>checkbox 组 {{ v2 }}</app-type>
-	<var-checkbox-group v-model="v2" ref="g" :max="4" @change="log">
-		<var-checkbox :checked-value="1">1</var-checkbox>
-		<var-checkbox :checked-value="2">2</var-checkbox>
-		<var-checkbox :checked-value="3">3</var-checkbox>
-		<var-checkbox :checked-value="4">4</var-checkbox>
-		<var-checkbox v-for="l in list" :key="l" :checked-value="l">{{ l }}</var-checkbox>
+	<app-type>checkbox 组 {{ v2 }} {{ v3 }}</app-type>
+	<var-checkbox-group v-model="v3" ref="g" :max="4" @change="log">
+		<var-checkbox-group v-model="v2" ref="g" :max="4" @change="log">
+			<var-checkbox :checked-value="1">1</var-checkbox>
+			<var-checkbox :checked-value="2">2</var-checkbox>
+			<var-checkbox :checked-value="3">3</var-checkbox>
+			<var-checkbox :checked-value="4">4</var-checkbox>
+			<var-checkbox v-for="l in list" :key="l" :checked-value="l">{{ l }}</var-checkbox>
+		</var-checkbox-group>
 	</var-checkbox-group>
 
 	<var-button style="margin: 10px" @click="v2.push(4)">group 推4</var-button>
@@ -67,6 +69,7 @@ export default defineComponent({
 			v: ref(false),
 			v1: ref(0),
 			v2: ref([1, 3]),
+			v3: ref([2, 3]),
 			list: ref([]),
 			g: ref(null),
 			log(v: any) {

diff --git a/packages/varlet-ui/src/chip/Chip.vue b/packages/varlet-ui/src/chip/Chip.vue
@@ -1,16 +1,26 @@
 <template>
 	<transition name="var-fade">
 		<span
+			v-bind="$attrs"
 			v-ripple="{ disabled }"
-			class="var-chip var--box"
 			:class="[
 				`var-chip--${size}`,
 				block ? 'var--flex' : 'var--inline-flex',
 				plain ? `var-chip--plain-${type}` : `var-chip--${type}`,
 				{ 'var-chip--round': round, 'var-chip--plain': plain },
 			]"
-			:style="controlStyle()"
-			v-bind="$attrs"
+			:style="
+				plain
+					? {
+							color: textColor || color,
+							borderColor: color,
+					  }
+					: {
+							color: textColor,
+							background: color,
+					  }
+			"
+			class="var-chip var--box"
 		>
 			<slot name="left"></slot>
 			<span :class="[`var-chip--text-${size}`]">
@@ -26,7 +36,7 @@
 
 <script lang="ts">
 import Ripple from '../ripple'
-import { defineComponent, Ref, ref } from 'vue'
+import { defineComponent } from 'vue'
 import { props } from './props'
 import Icon from '../icon'
 
@@ -39,22 +49,17 @@ export default defineComponent({
 	inheritAttrs: false,
 	props,
 	setup(props) {
-		const color: Ref<string | null> = ref(null)
-		if (props.textColor) {
-			// eslint-disable-next-line vue/no-setup-props-destructure
-			color.value = props.textColor
-		} else if (props.plain) {
-			color.value = props.color || null
-		} else if (props.color) {
-			color.value = '#fff'
-		} else {
-			color.value = null
-		}
 		const controlStyle = () => {
+			if (props.plain) {
+				return {
+					color: props.textColor || props.color,
+					borderColor: props.color,
+				}
+			}
+
 			return {
-				color: color.value,
-				background: !props.plain ? props.color || null : null,
-				borderColor: props.plain ? props.color || null : null,
+				color: props.textColor,
+				background: props.color,
 			}
 		}
 		return {