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.
181 lines
5.4 KiB
181 lines
5.4 KiB
'use strict';
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
var vue = require('vue');
|
|
var shared = require('@vue/shared');
|
|
var constants = require('../../../utils/constants.js');
|
|
require('../../../tokens/index.js');
|
|
require('../../../hooks/index.js');
|
|
var form = require('../../../tokens/form.js');
|
|
var index = require('../../../hooks/use-common-props/index.js');
|
|
|
|
const useCheckboxProps = {
|
|
modelValue: {
|
|
type: [Boolean, Number, String],
|
|
default: () => void 0
|
|
},
|
|
label: {
|
|
type: [String, Boolean, Number, Object]
|
|
},
|
|
indeterminate: Boolean,
|
|
disabled: Boolean,
|
|
checked: Boolean,
|
|
name: {
|
|
type: String,
|
|
default: void 0
|
|
},
|
|
trueLabel: {
|
|
type: [String, Number],
|
|
default: void 0
|
|
},
|
|
falseLabel: {
|
|
type: [String, Number],
|
|
default: void 0
|
|
},
|
|
tabindex: [String, Number],
|
|
size: String
|
|
};
|
|
const useCheckboxGroup = () => {
|
|
const elForm = vue.inject(form.elFormKey, {});
|
|
const elFormItem = vue.inject(form.elFormItemKey, {});
|
|
const checkboxGroup = vue.inject("CheckboxGroup", {});
|
|
const isGroup = vue.computed(() => checkboxGroup && (checkboxGroup == null ? void 0 : checkboxGroup.name) === "ElCheckboxGroup");
|
|
const elFormItemSize = vue.computed(() => {
|
|
return elFormItem.size;
|
|
});
|
|
return {
|
|
isGroup,
|
|
checkboxGroup,
|
|
elForm,
|
|
elFormItemSize,
|
|
elFormItem
|
|
};
|
|
};
|
|
const useModel = (props) => {
|
|
const selfModel = vue.ref(false);
|
|
const { emit } = vue.getCurrentInstance();
|
|
const { isGroup, checkboxGroup } = useCheckboxGroup();
|
|
const isLimitExceeded = vue.ref(false);
|
|
const model = vue.computed({
|
|
get() {
|
|
var _a, _b;
|
|
return isGroup.value ? (_a = checkboxGroup.modelValue) == null ? void 0 : _a.value : (_b = props.modelValue) != null ? _b : selfModel.value;
|
|
},
|
|
set(val) {
|
|
var _a;
|
|
if (isGroup.value && Array.isArray(val)) {
|
|
isLimitExceeded.value = checkboxGroup.max !== void 0 && val.length > checkboxGroup.max.value;
|
|
isLimitExceeded.value === false && ((_a = checkboxGroup == null ? void 0 : checkboxGroup.changeEvent) == null ? void 0 : _a.call(checkboxGroup, val));
|
|
} else {
|
|
emit(constants.UPDATE_MODEL_EVENT, val);
|
|
selfModel.value = val;
|
|
}
|
|
}
|
|
});
|
|
return {
|
|
model,
|
|
isLimitExceeded
|
|
};
|
|
};
|
|
const useCheckboxStatus = (props, { model }) => {
|
|
const { isGroup, checkboxGroup } = useCheckboxGroup();
|
|
const focus = vue.ref(false);
|
|
const size = index.useSize(checkboxGroup == null ? void 0 : checkboxGroup.checkboxGroupSize, { prop: true });
|
|
const isChecked = vue.computed(() => {
|
|
const value = model.value;
|
|
if (shared.toTypeString(value) === "[object Boolean]") {
|
|
return value;
|
|
} else if (Array.isArray(value)) {
|
|
return value.includes(props.label);
|
|
} else if (value !== null && value !== void 0) {
|
|
return value === props.trueLabel;
|
|
} else {
|
|
return !!value;
|
|
}
|
|
});
|
|
const checkboxSize = index.useSize(vue.computed(() => {
|
|
var _a;
|
|
return isGroup.value ? (_a = checkboxGroup == null ? void 0 : checkboxGroup.checkboxGroupSize) == null ? void 0 : _a.value : void 0;
|
|
}));
|
|
return {
|
|
isChecked,
|
|
focus,
|
|
size,
|
|
checkboxSize
|
|
};
|
|
};
|
|
const useDisabled = (props, {
|
|
model,
|
|
isChecked
|
|
}) => {
|
|
const { elForm, isGroup, checkboxGroup } = useCheckboxGroup();
|
|
const isLimitDisabled = vue.computed(() => {
|
|
var _a, _b;
|
|
const max = (_a = checkboxGroup.max) == null ? void 0 : _a.value;
|
|
const min = (_b = checkboxGroup.min) == null ? void 0 : _b.value;
|
|
return !!(max || min) && model.value.length >= max && !isChecked.value || model.value.length <= min && isChecked.value;
|
|
});
|
|
const isDisabled = vue.computed(() => {
|
|
var _a;
|
|
const disabled = props.disabled || elForm.disabled;
|
|
return isGroup.value ? ((_a = checkboxGroup.disabled) == null ? void 0 : _a.value) || disabled || isLimitDisabled.value : props.disabled || elForm.disabled;
|
|
});
|
|
return {
|
|
isDisabled,
|
|
isLimitDisabled
|
|
};
|
|
};
|
|
const setStoreValue = (props, { model }) => {
|
|
function addToStore() {
|
|
if (Array.isArray(model.value) && !model.value.includes(props.label)) {
|
|
model.value.push(props.label);
|
|
} else {
|
|
model.value = props.trueLabel || true;
|
|
}
|
|
}
|
|
props.checked && addToStore();
|
|
};
|
|
const useEvent = (props, { isLimitExceeded }) => {
|
|
const { elFormItem } = useCheckboxGroup();
|
|
const { emit } = vue.getCurrentInstance();
|
|
function handleChange(e) {
|
|
var _a, _b;
|
|
if (isLimitExceeded.value)
|
|
return;
|
|
const target = e.target;
|
|
const value = target.checked ? (_a = props.trueLabel) != null ? _a : true : (_b = props.falseLabel) != null ? _b : false;
|
|
emit("change", value, e);
|
|
}
|
|
vue.watch(() => props.modelValue, () => {
|
|
var _a;
|
|
(_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change");
|
|
});
|
|
return {
|
|
handleChange
|
|
};
|
|
};
|
|
const useCheckbox = (props) => {
|
|
const { model, isLimitExceeded } = useModel(props);
|
|
const { focus, size, isChecked, checkboxSize } = useCheckboxStatus(props, {
|
|
model
|
|
});
|
|
const { isDisabled } = useDisabled(props, { model, isChecked });
|
|
const { handleChange } = useEvent(props, { isLimitExceeded });
|
|
setStoreValue(props, { model });
|
|
return {
|
|
isChecked,
|
|
isDisabled,
|
|
checkboxSize,
|
|
model,
|
|
handleChange,
|
|
focus,
|
|
size
|
|
};
|
|
};
|
|
|
|
exports.useCheckbox = useCheckbox;
|
|
exports.useCheckboxGroup = useCheckboxGroup;
|
|
exports.useCheckboxProps = useCheckboxProps;
|
|
//# sourceMappingURL=useCheckbox.js.map
|