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.
119 lines
3.9 KiB
119 lines
3.9 KiB
11 months ago
|
'use strict';
|
||
|
|
||
|
Object.defineProperty(exports, '__esModule', { value: true });
|
||
|
|
||
|
var vue = require('vue');
|
||
|
|
||
|
const CHECKED_CHANGE_EVENT = "checked-change";
|
||
|
const useCheckProps = {
|
||
|
data: {
|
||
|
type: Array,
|
||
|
default() {
|
||
|
return [];
|
||
|
}
|
||
|
},
|
||
|
optionRender: Function,
|
||
|
placeholder: String,
|
||
|
title: String,
|
||
|
filterable: Boolean,
|
||
|
format: Object,
|
||
|
filterMethod: Function,
|
||
|
defaultChecked: Array,
|
||
|
props: Object
|
||
|
};
|
||
|
const useCheck = (props, panelState) => {
|
||
|
const { emit } = vue.getCurrentInstance();
|
||
|
const labelProp = vue.computed(() => props.props.label || "label");
|
||
|
const keyProp = vue.computed(() => props.props.key || "key");
|
||
|
const disabledProp = vue.computed(() => props.props.disabled || "disabled");
|
||
|
const filteredData = vue.computed(() => {
|
||
|
return props.data.filter((item) => {
|
||
|
if (typeof props.filterMethod === "function") {
|
||
|
return props.filterMethod(panelState.query, item);
|
||
|
} else {
|
||
|
const label = item[labelProp.value] || item[keyProp.value].toString();
|
||
|
return label.toLowerCase().includes(panelState.query.toLowerCase());
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
const checkableData = vue.computed(() => {
|
||
|
return filteredData.value.filter((item) => !item[disabledProp.value]);
|
||
|
});
|
||
|
const checkedSummary = vue.computed(() => {
|
||
|
const checkedLength = panelState.checked.length;
|
||
|
const dataLength = props.data.length;
|
||
|
const { noChecked, hasChecked } = props.format;
|
||
|
if (noChecked && hasChecked) {
|
||
|
return checkedLength > 0 ? hasChecked.replace(/\${checked}/g, checkedLength.toString()).replace(/\${total}/g, dataLength.toString()) : noChecked.replace(/\${total}/g, dataLength.toString());
|
||
|
} else {
|
||
|
return `${checkedLength}/${dataLength}`;
|
||
|
}
|
||
|
});
|
||
|
const isIndeterminate = vue.computed(() => {
|
||
|
const checkedLength = panelState.checked.length;
|
||
|
return checkedLength > 0 && checkedLength < checkableData.value.length;
|
||
|
});
|
||
|
const updateAllChecked = () => {
|
||
|
const checkableDataKeys = checkableData.value.map((item) => item[keyProp.value]);
|
||
|
panelState.allChecked = checkableDataKeys.length > 0 && checkableDataKeys.every((item) => panelState.checked.includes(item));
|
||
|
};
|
||
|
const handleAllCheckedChange = (value) => {
|
||
|
panelState.checked = value ? checkableData.value.map((item) => item[keyProp.value]) : [];
|
||
|
};
|
||
|
vue.watch(() => panelState.checked, (val, oldVal) => {
|
||
|
updateAllChecked();
|
||
|
if (panelState.checkChangeByUser) {
|
||
|
const movedKeys = val.concat(oldVal).filter((v) => !val.includes(v) || !oldVal.includes(v));
|
||
|
emit(CHECKED_CHANGE_EVENT, val, movedKeys);
|
||
|
} else {
|
||
|
emit(CHECKED_CHANGE_EVENT, val);
|
||
|
panelState.checkChangeByUser = true;
|
||
|
}
|
||
|
});
|
||
|
vue.watch(checkableData, () => {
|
||
|
updateAllChecked();
|
||
|
});
|
||
|
vue.watch(() => props.data, () => {
|
||
|
const checked = [];
|
||
|
const filteredDataKeys = filteredData.value.map((item) => item[keyProp.value]);
|
||
|
panelState.checked.forEach((item) => {
|
||
|
if (filteredDataKeys.includes(item)) {
|
||
|
checked.push(item);
|
||
|
}
|
||
|
});
|
||
|
panelState.checkChangeByUser = false;
|
||
|
panelState.checked = checked;
|
||
|
});
|
||
|
vue.watch(() => props.defaultChecked, (val, oldVal) => {
|
||
|
if (oldVal && val.length === oldVal.length && val.every((item) => oldVal.includes(item)))
|
||
|
return;
|
||
|
const checked = [];
|
||
|
const checkableDataKeys = checkableData.value.map((item) => item[keyProp.value]);
|
||
|
val.forEach((item) => {
|
||
|
if (checkableDataKeys.includes(item)) {
|
||
|
checked.push(item);
|
||
|
}
|
||
|
});
|
||
|
panelState.checkChangeByUser = false;
|
||
|
panelState.checked = checked;
|
||
|
}, {
|
||
|
immediate: true
|
||
|
});
|
||
|
return {
|
||
|
labelProp,
|
||
|
keyProp,
|
||
|
disabledProp,
|
||
|
filteredData,
|
||
|
checkableData,
|
||
|
checkedSummary,
|
||
|
isIndeterminate,
|
||
|
updateAllChecked,
|
||
|
handleAllCheckedChange
|
||
|
};
|
||
|
};
|
||
|
|
||
|
exports.CHECKED_CHANGE_EVENT = CHECKED_CHANGE_EVENT;
|
||
|
exports.useCheck = useCheck;
|
||
|
exports.useCheckProps = useCheckProps;
|
||
|
//# sourceMappingURL=useCheck.js.map
|