yanzhen-design-vue
Version:
157 lines (156 loc) • 5.89 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const antDesignVue = require("ant-design-vue");
const context = require("./context.cjs");
require("./hooks/index.cjs");
const utils = require("./utils.cjs");
const OptionList = require("./OptionList.vue.cjs");
const useEntities = require("./hooks/useEntities.cjs");
const useMaxLevel = require("./hooks/useMaxLevel.cjs");
const useSearchOptions = require("./hooks/useSearchOptions.cjs");
const _hoisted_1 = { class: "inner-cascade-selection-item-content" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "InnerCascader",
props: /* @__PURE__ */ vue.mergeModels({
checkStrictly: { type: Boolean, default: false },
displayRender: {},
height: { default: 256 },
options: { default: () => [] },
fieldNames: { default: () => ({ label: "label", value: "id", children: "children" }) }
}, {
"value": { default: () => [] },
"valueModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change"], ["update:value"]),
setup(__props, { emit: __emit }) {
const props = __props;
const { options, fieldNames, height, checkStrictly } = vue.toRefs(props);
const emit = __emit;
const prefixCls = vue.computed(() => props.prefixCls || "");
const pathKeyEntities = useEntities.useEntities(options, fieldNames);
const { maxLevel, levelEntities } = useMaxLevel.useMaxLevel(pathKeyEntities);
const { searchValue, setSearchValue, searchOptions } = useSearchOptions.useSearchOptions(
options,
fieldNames,
prefixCls
);
const dropDownStyle = vue.computed(() => {
const emptyOptions = !(searchValue.value ? searchOptions.value : options.value).length;
return emptyOptions ? {} : { minWidth: "auto" };
});
const values = vue.useModel(__props, "value");
const checkedValues = vue.ref([]);
const halfCheckedValues = vue.ref([]);
vue.watchEffect(() => {
if (checkStrictly.value) {
checkedValues.value = values.value;
return;
}
const { checkedKeys, halfCheckedKeys } = utils.conductCheck(
values.value,
true,
pathKeyEntities.value,
maxLevel.value,
levelEntities.value
);
checkedValues.value = checkedKeys;
halfCheckedValues.value = halfCheckedKeys;
});
const onInternalSearch = (searchText) => {
setSearchValue(searchText);
};
const triggerChange = (nextValues) => {
values.value = nextValues;
emit("change", nextValues);
};
const onInternalSelect = (valuePath) => {
setSearchValue("");
const lastPathKey = valuePath[valuePath.length - 1];
const halfCheckedPathKeys = halfCheckedValues.value;
if (checkStrictly.value) {
const existInChecked2 = values.value.includes(lastPathKey);
const nextValues = existInChecked2 ? values.value.filter((key) => key !== lastPathKey) : [...values.value, lastPathKey];
triggerChange(nextValues);
return;
}
const existInChecked = checkedValues.value.includes(lastPathKey);
const nextRawCheckedKeys = existInChecked ? checkedValues.value.filter((key) => key !== lastPathKey) : [...checkedValues.value, lastPathKey];
let checkedKeys;
if (existInChecked) {
({ checkedKeys } = utils.conductCheck(
nextRawCheckedKeys,
{ checked: false, halfCheckedKeys: halfCheckedPathKeys },
pathKeyEntities.value,
maxLevel.value,
levelEntities.value
));
} else {
({ checkedKeys } = utils.conductCheck(
nextRawCheckedKeys,
true,
pathKeyEntities.value,
maxLevel.value,
levelEntities.value
));
}
const deDuplicatedKeys = utils.formatStrategyValues(
checkedKeys,
pathKeyEntities.value
// props.showCheckedStrategy,
);
triggerChange(deDuplicatedKeys);
};
const getLabelText = (pathKey) => {
const entity = pathKeyEntities.value[pathKey];
if (!entity) {
return "undefined";
}
const labels = entity.nodes.map((item) => item[fieldNames.value.label]);
return props.displayRender ? props.displayRender(labels) : entity.node[fieldNames.value.label];
};
context.useProviderInnerCascader({
height,
options,
searchValue,
searchOptions,
fieldNames,
values,
checkedValues,
halfCheckedValues,
onSelect: onInternalSelect
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.Select), vue.mergeProps({
value: values.value,
"onUpdate:value": _cache[0] || (_cache[0] = ($event) => values.value = $event),
mode: "multiple",
"show-search": "",
"allow-clear": "",
options: vue.unref(options),
"dropdown-match-select-width": false,
"dropdown-style": dropDownStyle.value,
"field-names": vue.unref(fieldNames),
"max-tag-count": "responsive"
}, _ctx.$attrs, { onSearch: onInternalSearch }), {
dropdownRender: vue.withCtx(() => [
vue.createVNode(OptionList.default)
]),
tagRender: vue.withCtx(({ value, option }) => [
vue.createVNode(vue.unref(antDesignVue.Tag), {
closable: "",
class: "inner-cascade-selection-item",
onClose: _ctx.onClose
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", _hoisted_1, vue.toDisplayString(getLabelText(value, option)), 1)
]),
_: 2
}, 1032, ["onClose"])
]),
_: 1
}, 16, ["value", "options", "dropdown-style", "field-names"]);
};
}
});
exports.default = _sfc_main;