From 6cdd2a7588609c02bbfff37b75f6ad7871ab1e0c Mon Sep 17 00:00:00 2001 From: Takagi <1103069291@qq.com> Date: Fri, 6 Sep 2024 17:25:52 +0800 Subject: [PATCH] fix: resolve issue with disabled property in options not working (#6595) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### 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 无效的问题 ``` --- ui/src/formkit/inputs/select/SelectMain.vue | 5 +---- ui/src/formkit/inputs/select/SelectOption.vue | 15 ++++++++++----- ui/src/formkit/inputs/select/isFalse.ts | 3 +++ 3 files changed, 14 insertions(+), 9 deletions(-) create mode 100644 ui/src/formkit/inputs/select/isFalse.ts diff --git a/ui/src/formkit/inputs/select/SelectMain.vue b/ui/src/formkit/inputs/select/SelectMain.vue index d50606ca2..71ee100bd 100644 --- a/ui/src/formkit/inputs/select/SelectMain.vue +++ b/ui/src/formkit/inputs/select/SelectMain.vue @@ -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); diff --git a/ui/src/formkit/inputs/select/SelectOption.vue b/ui/src/formkit/inputs/select/SelectOption.vue index d09a2d989..41d248193 100644 --- a/ui/src/formkit/inputs/select/SelectOption.vue +++ b/ui/src/formkit/inputs/select/SelectOption.vue @@ -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 & { 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 & { label: string; value: string } +) => { + const attrs = option.attrs as Record; 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) ); }; diff --git a/ui/src/formkit/inputs/select/isFalse.ts b/ui/src/formkit/inputs/select/isFalse.ts new file mode 100644 index 000000000..918ab0811 --- /dev/null +++ b/ui/src/formkit/inputs/select/isFalse.ts @@ -0,0 +1,3 @@ +export const isFalse = (value: string | boolean | undefined | null) => { + return [undefined, null, "false", false].includes(value); +};