fix: resolve issue with disabled property in options not working (#6595)

#### What type of PR is this?

/kind bug
/area ui

#### What this PR does / why we need it:

解决 formkit select 组件中,option 使用 `attrs: { disabled: true }` 无效的问题。

#### How to test it?

测试在 formkit select 组件中,option 设置 disabled 属性是否有效。

#### Which issue(s) this PR fixes:

Fixed #6592 

#### Does this PR introduce a user-facing change?
```release-note
解决 formkit select 组件的 Option 设置 disabled 无效的问题
```
pull/6602/head^2
Takagi 2024-09-06 17:25:52 +08:00 committed by GitHub
parent 51609abc57
commit 6cdd2a7588
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 14 additions and 9 deletions

View File

@ -14,6 +14,7 @@ import {
watch,
type PropType,
} from "vue";
import { isFalse } from "./isFalse";
import SelectContainer from "./SelectContainer.vue";
export interface SelectProps {
@ -238,10 +239,6 @@ const initSelectProps = () => {
}
};
const isFalse = (value: string | boolean | undefined | null) => {
return [undefined, null, "false", false].includes(value);
};
const isLoading = ref(false);
const isFetchingMore = ref(false);
const page = ref(1);

View File

@ -4,6 +4,7 @@ import { vScroll } from "@vueuse/components";
import { useEventListener, type UseScrollReturn } from "@vueuse/core";
import { computed, ref, watch } from "vue";
import SelectOptionItem from "./SelectOptionItem.vue";
import { isFalse } from "./isFalse";
const props = defineProps<{
options: Array<Record<string, unknown> & { label: string; value: string }>;
@ -81,7 +82,7 @@ const handleSelected = (index: number) => {
}
}
selectedIndex.value = index;
if (option) {
if (option && !isDisabled(option)) {
emit("selected", option);
}
};
@ -112,11 +113,15 @@ const reachMaximumLimit = computed(() => {
return false;
});
const isDisabled = (option: { label: string; value: string }) => {
const isDisabled = (
option: Record<string, unknown> & { label: string; value: string }
) => {
const attrs = option.attrs as Record<string, unknown>;
return (
reachMaximumLimit.value &&
selectedValues.value &&
!selectedValues.value.includes(option.value)
(reachMaximumLimit.value &&
selectedValues.value &&
!selectedValues.value.includes(option.value)) ||
!isFalse(attrs?.disabled as string | boolean | undefined)
);
};

View File

@ -0,0 +1,3 @@
export const isFalse = (value: string | boolean | undefined | null) => {
return [undefined, null, "false", false].includes(value);
};