mirror of https://github.com/halo-dev/halo
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
parent
51609abc57
commit
6cdd2a7588
|
@ -14,6 +14,7 @@ import {
|
||||||
watch,
|
watch,
|
||||||
type PropType,
|
type PropType,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
|
import { isFalse } from "./isFalse";
|
||||||
import SelectContainer from "./SelectContainer.vue";
|
import SelectContainer from "./SelectContainer.vue";
|
||||||
|
|
||||||
export interface SelectProps {
|
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 isLoading = ref(false);
|
||||||
const isFetchingMore = ref(false);
|
const isFetchingMore = ref(false);
|
||||||
const page = ref(1);
|
const page = ref(1);
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { vScroll } from "@vueuse/components";
|
||||||
import { useEventListener, type UseScrollReturn } from "@vueuse/core";
|
import { useEventListener, type UseScrollReturn } from "@vueuse/core";
|
||||||
import { computed, ref, watch } from "vue";
|
import { computed, ref, watch } from "vue";
|
||||||
import SelectOptionItem from "./SelectOptionItem.vue";
|
import SelectOptionItem from "./SelectOptionItem.vue";
|
||||||
|
import { isFalse } from "./isFalse";
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
options: Array<Record<string, unknown> & { label: string; value: string }>;
|
options: Array<Record<string, unknown> & { label: string; value: string }>;
|
||||||
|
@ -81,7 +82,7 @@ const handleSelected = (index: number) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
selectedIndex.value = index;
|
selectedIndex.value = index;
|
||||||
if (option) {
|
if (option && !isDisabled(option)) {
|
||||||
emit("selected", option);
|
emit("selected", option);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -112,11 +113,15 @@ const reachMaximumLimit = computed(() => {
|
||||||
return false;
|
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 (
|
return (
|
||||||
reachMaximumLimit.value &&
|
(reachMaximumLimit.value &&
|
||||||
selectedValues.value &&
|
selectedValues.value &&
|
||||||
!selectedValues.value.includes(option.value)
|
!selectedValues.value.includes(option.value)) ||
|
||||||
|
!isFalse(attrs?.disabled as string | boolean | undefined)
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
export const isFalse = (value: string | boolean | undefined | null) => {
|
||||||
|
return [undefined, null, "false", false].includes(value);
|
||||||
|
};
|
Loading…
Reference in New Issue