yanzhen-design-vue
Version:
157 lines (156 loc) • 5.77 kB
JavaScript
import { defineComponent, mergeModels, toRefs, computed, useModel, ref, watchEffect, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, createElementVNode, toDisplayString } from "vue";
import { Select, Tag } from "ant-design-vue";
import { useProviderInnerCascader } from "./context.mjs";
import "./hooks/index.mjs";
import { conductCheck, formatStrategyValues } from "./utils.mjs";
import OptionList from "./OptionList.vue.mjs";
import { useEntities } from "./hooks/useEntities.mjs";
import { useMaxLevel } from "./hooks/useMaxLevel.mjs";
import { useSearchOptions } from "./hooks/useSearchOptions.mjs";
const _hoisted_1 = { class: "inner-cascade-selection-item-content" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "InnerCascader",
props: /* @__PURE__ */ 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__ */ mergeModels(["change"], ["update:value"]),
setup(__props, { emit: __emit }) {
const props = __props;
const { options, fieldNames, height, checkStrictly } = toRefs(props);
const emit = __emit;
const prefixCls = computed(() => props.prefixCls || "");
const pathKeyEntities = useEntities(options, fieldNames);
const { maxLevel, levelEntities } = useMaxLevel(pathKeyEntities);
const { searchValue, setSearchValue, searchOptions } = useSearchOptions(
options,
fieldNames,
prefixCls
);
const dropDownStyle = computed(() => {
const emptyOptions = !(searchValue.value ? searchOptions.value : options.value).length;
return emptyOptions ? {} : { minWidth: "auto" };
});
const values = useModel(__props, "value");
const checkedValues = ref([]);
const halfCheckedValues = ref([]);
watchEffect(() => {
if (checkStrictly.value) {
checkedValues.value = values.value;
return;
}
const { checkedKeys, halfCheckedKeys } = 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 } = conductCheck(
nextRawCheckedKeys,
{ checked: false, halfCheckedKeys: halfCheckedPathKeys },
pathKeyEntities.value,
maxLevel.value,
levelEntities.value
));
} else {
({ checkedKeys } = conductCheck(
nextRawCheckedKeys,
true,
pathKeyEntities.value,
maxLevel.value,
levelEntities.value
));
}
const deDuplicatedKeys = 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];
};
useProviderInnerCascader({
height,
options,
searchValue,
searchOptions,
fieldNames,
values,
checkedValues,
halfCheckedValues,
onSelect: onInternalSelect
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Select), mergeProps({
value: values.value,
"onUpdate:value": _cache[0] || (_cache[0] = ($event) => values.value = $event),
mode: "multiple",
"show-search": "",
"allow-clear": "",
options: unref(options),
"dropdown-match-select-width": false,
"dropdown-style": dropDownStyle.value,
"field-names": unref(fieldNames),
"max-tag-count": "responsive"
}, _ctx.$attrs, { onSearch: onInternalSearch }), {
dropdownRender: withCtx(() => [
createVNode(OptionList)
]),
tagRender: withCtx(({ value, option }) => [
createVNode(unref(Tag), {
closable: "",
class: "inner-cascade-selection-item",
onClose: _ctx.onClose
}, {
default: withCtx(() => [
createElementVNode("span", _hoisted_1, toDisplayString(getLabelText(value, option)), 1)
]),
_: 2
}, 1032, ["onClose"])
]),
_: 1
}, 16, ["value", "options", "dropdown-style", "field-names"]);
};
}
});
export {
_sfc_main as default
};