fix: 修复Tree组件不支持半选的问题(子节点全选时父节点选中图标为勾选状态,子节点部分选中时父节点图标为减号,也就是版勾选状态,子节点未被选中时,父节点不被选中) (#8050)
This commit is contained in:
@@ -5,16 +5,19 @@ import type { HTMLAttributes } from 'vue';
|
|||||||
|
|
||||||
import { cn } from '@vben-core/shared/utils';
|
import { cn } from '@vben-core/shared/utils';
|
||||||
|
|
||||||
import { Check } from '@lucide/vue';
|
import { Check, Minus } from '@lucide/vue';
|
||||||
import { reactiveOmit } from '@vueuse/core';
|
import { reactiveOmit } from '@vueuse/core';
|
||||||
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';
|
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';
|
||||||
|
|
||||||
const props = defineProps<
|
const props = defineProps<
|
||||||
CheckboxRootProps & { class?: HTMLAttributes['class'] }
|
CheckboxRootProps & {
|
||||||
|
class?: HTMLAttributes['class'];
|
||||||
|
indeterminate?: boolean;
|
||||||
|
}
|
||||||
>();
|
>();
|
||||||
const emits = defineEmits<CheckboxRootEmits>();
|
const emits = defineEmits<CheckboxRootEmits>();
|
||||||
|
|
||||||
const delegatedProps = reactiveOmit(props, 'class');
|
const delegatedProps = reactiveOmit(props, 'class', 'indeterminate');
|
||||||
|
|
||||||
const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
||||||
</script>
|
</script>
|
||||||
@@ -27,6 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
|||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
'peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
|
'peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
|
||||||
|
indeterminate && 'bg-primary text-primary-foreground border-primary',
|
||||||
props.class,
|
props.class,
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
@@ -34,9 +38,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
|||||||
<CheckboxIndicator
|
<CheckboxIndicator
|
||||||
data-slot="checkbox-indicator"
|
data-slot="checkbox-indicator"
|
||||||
class="grid place-content-center text-current transition-none"
|
class="grid place-content-center text-current transition-none"
|
||||||
|
:force-mount="indeterminate ? true : undefined"
|
||||||
>
|
>
|
||||||
<slot v-bind="slotProps">
|
<slot v-bind="slotProps">
|
||||||
<Check class="size-3.5" />
|
<Minus v-if="indeterminate" class="size-3.5" />
|
||||||
|
<Check v-else class="size-3.5" />
|
||||||
</slot>
|
</slot>
|
||||||
</CheckboxIndicator>
|
</CheckboxIndicator>
|
||||||
</CheckboxRoot>
|
</CheckboxRoot>
|
||||||
|
|||||||
@@ -227,7 +227,7 @@ function onSelect(item: FlattenedItem<Recordable<any>>, isSelected: boolean) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (
|
if (
|
||||||
!props.checkStrictly &&
|
props.checkStrictly &&
|
||||||
props.multiple &&
|
props.multiple &&
|
||||||
props.autoCheckParent &&
|
props.autoCheckParent &&
|
||||||
isSelected
|
isSelected
|
||||||
@@ -246,7 +246,7 @@ function onSelect(item: FlattenedItem<Recordable<any>>, isSelected: boolean) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (
|
if (
|
||||||
!props.checkStrictly &&
|
props.checkStrictly &&
|
||||||
props.multiple &&
|
props.multiple &&
|
||||||
props.autoCheckParent &&
|
props.autoCheckParent &&
|
||||||
!isSelected
|
!isSelected
|
||||||
@@ -307,6 +307,7 @@ defineExpose({
|
|||||||
v-model:expanded="expanded as string[]"
|
v-model:expanded="expanded as string[]"
|
||||||
:default-expanded="defaultExpandedKeys as string[]"
|
:default-expanded="defaultExpandedKeys as string[]"
|
||||||
:propagate-select="!checkStrictly"
|
:propagate-select="!checkStrictly"
|
||||||
|
:bubble-select="!checkStrictly"
|
||||||
:multiple="multiple"
|
:multiple="multiple"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:selection-behavior="allowClear || multiple ? 'toggle' : 'replace'"
|
:selection-behavior="allowClear || multiple ? 'toggle' : 'replace'"
|
||||||
|
|||||||
Reference in New Issue
Block a user