Browse Source

fix: 修复Tree组件不支持半选的问题(子节点全选时父节点选中图标为勾选状态,子节点部分选中时父节点图标为减号,也就是版勾选状态,子节点未被选中时,父节点不被选中) (#8050)

pull/8054/head^2
曾兴顺 4 months ago
committed by GitHub
parent
commit
fcf726f953
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 14
      packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
  2. 5
      packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue

14
packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue

@ -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>

5
packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue

@ -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'"

Loading…
Cancel
Save