You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
12 KiB
1 line
12 KiB
11 months ago
|
{"version":3,"file":"useCheckbox.mjs","sources":["../../../../../../packages/components/checkbox/src/useCheckbox.ts"],"sourcesContent":["import { ref, computed, inject, getCurrentInstance, watch } from 'vue'\nimport { toTypeString } from '@vue/shared'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\n\nimport { useSize } from '@element-plus/hooks'\nimport type { ExtractPropTypes } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { PartialReturnType } from '@element-plus/utils/types'\nimport type { ICheckboxGroupInstance } from './checkbox.type'\n\nexport const useCheckboxProps = {\n modelValue: {\n type: [Boolean, Number, String],\n default: () => undefined,\n },\n label: {\n type: [String, Boolean, Number, Object],\n },\n indeterminate: Boolean,\n disabled: Boolean,\n checked: Boolean,\n name: {\n type: String,\n default: undefined,\n },\n trueLabel: {\n type: [String, Number],\n default: undefined,\n },\n falseLabel: {\n type: [String, Number],\n default: undefined,\n },\n tabindex: [String, Number],\n size: String,\n}\n\nexport type IUseCheckboxProps = ExtractPropTypes<typeof useCheckboxProps>\n\nexport const useCheckboxGroup = () => {\n const elForm = inject(elFormKey, {} as ElFormContext)\n const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n const checkboxGroup = inject<ICheckboxGroupInstance>('CheckboxGroup', {})\n const isGroup = computed(\n () => checkboxGroup && checkboxGroup?.name === 'ElCheckboxGroup'\n )\n const elFormItemSize = computed(() => {\n return elFormItem.size\n })\n return {\n isGroup,\n checkboxGroup,\n elForm,\n elFormItemSize,\n elFormItem,\n }\n}\n\nconst useModel = (props: IUseCheckboxProps) => {\n const selfModel = ref(false)\n const { emit } = getCurrentInstance()\n const { isGroup, checkboxGroup } = useCheckboxGroup()\n const isLimitExceeded = ref(false)\n const model = computed({\n get() {\n return isGroup.value\n ? checkboxGroup.modelValue?.value\n : props.modelValue ?? selfModel.value\n },\n\n set(val: unknown) {\n if (isGroup.value && Array.isArray(val)) {\n isLimitExceeded.value =\n checkboxGroup.max !== undefined &&\n val.length > checkboxGroup.max.value\n isLimitExceeded.value === false && checkboxGroup?.changeEvent?.(val)\n } else {\n emit(UPDATE_MODEL_EVENT, val)\n selfModel.value = val as boolean\n }\n },\n })\n\n return {\n model,\n isLimitExceeded,\n }\n}\n\nconst useCheckboxStatus = (\n props: IUseCheckboxProps,\n { model }: PartialReturnType<typeof useModel>\n) => {\n const { isGroup, checkboxGroup } = useCheckboxGroup()\n const focus = ref(false)\n const size = useSize(checkboxGroup?.checkboxGroupSize, { prop: true })\n const isChecked = computed<boolean>(() => {\n const value = model.value\n if (toTypeString(value) === '[object Boolean]') {\n return value\n } else if (Array.isArray(value)) {\n return value.includes(props.label)\n } else if (value !== null && value !== undefined) {\n return value === props.trueLabel\n } else {\n return !!value\n }\n })\n\n const checkboxSize = useSize(\n computed(() =>\n isGroup.value ? checkboxGroup?.checkboxGroupSize?.value : undefined\n )\n )\n\n return {\n isChecked,\n focus,\n size,\n checkboxSize,\n }\n}\n\nconst useDisabled = (\n props: IUseCheckboxProps,\n {\n model,\n isChecked,\n }: PartialReturnType<typeof useModel> &\n PartialReturnType<typeof useCheckboxStatus>\n) => {\n const { elForm, isGroup, checkboxGroup } = useCheckboxGroup()\n const isLimitDisabled = computed(() => {\n const max = checkboxGroup.max?.value\n const min = checkboxGroup.min?.value\n return (\n (!!(max || min) && model.value.length >= max && !isChecked.value) ||\n (model.value.length <= min && isChecked.value)\n )\n })\n const
|