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 { Check } from '@lucide/vue';
|
||||
import { Check, Minus } from '@lucide/vue';
|
||||
import { reactiveOmit } from '@vueuse/core';
|
||||
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';
|
||||
|
||||
const props = defineProps<
|
||||
CheckboxRootProps & { class?: HTMLAttributes['class'] }
|
||||
CheckboxRootProps & {
|
||||
class?: HTMLAttributes['class'];
|
||||
indeterminate?: boolean;
|
||||
}
|
||||
>();
|
||||
const emits = defineEmits<CheckboxRootEmits>();
|
||||
|
||||
const delegatedProps = reactiveOmit(props, 'class');
|
||||
const delegatedProps = reactiveOmit(props, 'class', 'indeterminate');
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
||||
</script>
|
||||
@@ -27,6 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
||||
:class="
|
||||
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',
|
||||
indeterminate && 'bg-primary text-primary-foreground border-primary',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
@@ -34,9 +38,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
||||
<CheckboxIndicator
|
||||
data-slot="checkbox-indicator"
|
||||
class="grid place-content-center text-current transition-none"
|
||||
:force-mount="indeterminate ? true : undefined"
|
||||
>
|
||||
<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>
|
||||
</CheckboxIndicator>
|
||||
</CheckboxRoot>
|
||||
|
||||
@@ -227,7 +227,7 @@ function onSelect(item: FlattenedItem<Recordable<any>>, isSelected: boolean) {
|
||||
}
|
||||
|
||||
if (
|
||||
!props.checkStrictly &&
|
||||
props.checkStrictly &&
|
||||
props.multiple &&
|
||||
props.autoCheckParent &&
|
||||
isSelected
|
||||
@@ -246,7 +246,7 @@ function onSelect(item: FlattenedItem<Recordable<any>>, isSelected: boolean) {
|
||||
});
|
||||
}
|
||||
if (
|
||||
!props.checkStrictly &&
|
||||
props.checkStrictly &&
|
||||
props.multiple &&
|
||||
props.autoCheckParent &&
|
||||
!isSelected
|
||||
@@ -307,6 +307,7 @@ defineExpose({
|
||||
v-model:expanded="expanded as string[]"
|
||||
:default-expanded="defaultExpandedKeys as string[]"
|
||||
:propagate-select="!checkStrictly"
|
||||
:bubble-select="!checkStrictly"
|
||||
:multiple="multiple"
|
||||
:disabled="disabled"
|
||||
:selection-behavior="allowClear || multiple ? 'toggle' : 'replace'"
|
||||
|
||||
Reference in New Issue
Block a user