hongluan-ui
Version:
Hongluan Component Library for Vue 3
329 lines (324 loc) • 12.7 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var shared = require('@vue/shared');
var index = require('../../cascader-panel/index.js');
var index$1 = require('../../scrollbar/index.js');
var index$2 = require('../../selector/index.js');
require('../../../utils/index.js');
require('../../../constants/index.js');
require('../../../hooks/index.js');
require('../../../tokens/index.js');
var cascader = require('./cascader.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var event = require('../../../constants/event.js');
var index$3 = require('../../../hooks/use-namespace/index.js');
var index$4 = require('../../../hooks/use-locale/index.js');
var index$5 = require('../../../hooks/use-form-item/index.js');
var index$6 = require('../../../hooks/use-empty-values/index.js');
var index$7 = require('../../../hooks/use-consistent-prop/index.js');
var form = require('../../../tokens/form.js');
var error = require('../../../utils/error.js');
var aria = require('../../../constants/aria.js');
var aria$1 = require('../../../utils/dom/aria.js');
const _sfc_main = vue.defineComponent({
name: "Cascader",
components: {
HlCascaderPanel: index.HlCascaderPanel,
HlScrollbar: index$1.HlScrollbar,
HlSelector: index$2.HlSelector
},
props: cascader.cascaderProps,
emits: [
event.UPDATE_MODEL_EVENT,
event.CHANGE_EVENT,
"focus",
"blur",
"clear",
"visible-change",
"expand-change",
"remove-tag"
],
setup(props, { emit }) {
const { namespace } = index$3.useNamespace("cascader");
const { t } = index$4.useLocale();
const { formItem } = index$5.useFormItem();
const { valueOnClear } = index$6.useEmptyValues(props);
const hlSelector = vue.ref(null);
const panel = vue.ref(null);
const suggestionPanel = vue.ref(null);
const filtering = vue.ref(false);
const searchKeyword = vue.ref("");
const suggestions = vue.ref([]);
const multiple = vue.computed(() => !!props.props.multiple);
const checkedNodes = vue.computed(() => {
var _a;
return ((_a = panel.value) == null ? void 0 : _a.checkedNodes) || [];
});
const { size: cascaderSize, disabled: isDisabled, fill: cascaderFill } = index$7.useConsistentProp();
const checkedValue = vue.computed({
get() {
return lodashUnified.cloneDeep(props.modelValue);
},
set(val) {
var _a;
const value = val != null ? val : valueOnClear.value;
emit(event.UPDATE_MODEL_EVENT, value);
emit(event.CHANGE_EVENT, value);
if (props.validateEvent) {
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, form.FormItemEvents.change).catch((err) => error.debugWarn(err));
}
}
});
const popperPaneRef = vue.computed(() => {
var _a;
return (_a = hlSelector.value) == null ? void 0 : _a.popperPaneRef;
});
const togglePopperVisible = (visible) => {
hlSelector.value.togglePopperVisible(visible);
};
const updatePopperPosition = () => {
hlSelector.value.updatePopperPosition();
};
const hideSuggestionPanel = () => {
filtering.value = false;
};
const deleteTag = (tag) => {
var _a;
const node = tag.text;
node.doCheck(false);
(_a = panel.value) == null ? void 0 : _a.calculateCheckedValue();
emit("remove-tag", node.valueByOption);
};
const calculateSuggestions = () => {
const { filterMethod, showAllLevels, separator } = props;
const res = panel.value.getFlattedNodes(!props.props.checkStrictly).filter((node) => {
if (node.isDisabled)
return false;
node.calcText(showAllLevels, separator);
return filterMethod(node, searchKeyword.value);
});
if (multiple.value) {
hlSelector.value.updateTags((tag) => {
tag.hitState = false;
});
}
filtering.value = true;
suggestions.value = res;
updatePopperPosition();
};
const handleSuggestionKeyDown = (e) => {
const target = e.target;
const { code } = e;
switch (code) {
case aria.EVENT_CODE.up:
case aria.EVENT_CODE.down: {
const distance = code === aria.EVENT_CODE.up ? -1 : 1;
aria$1.focusNode(aria$1.getSibling(target, distance, '.cascader-suggestion-item[tabindex="-1"]'));
break;
}
case aria.EVENT_CODE.enter:
target.click();
break;
}
};
const focusFirstNode = () => {
var _a;
let firstNode = null;
if (filtering.value && suggestionPanel.value) {
firstNode = suggestionPanel.value.$el.querySelector(".cascader-suggestion-item");
} else {
firstNode = (_a = panel.value) == null ? void 0 : _a.$el.querySelector('.cascader-node[tabindex="-1"]');
}
if (firstNode) {
firstNode.focus();
!filtering.value && firstNode.click();
}
};
const resizePanel = (inputInner) => {
var _a;
const suggestionPanelEl = (_a = suggestionPanel.value) == null ? void 0 : _a.$el;
if (suggestionPanelEl) {
const suggestionList = suggestionPanelEl.querySelector(".cascader-suggestion-list");
suggestionList.style.minWidth = inputInner.offsetWidth + "px";
}
};
const getCheckedNodes = (leafOnly) => {
var _a;
return (_a = panel.value) == null ? void 0 : _a.getCheckedNodes(leafOnly);
};
const handleExpandChange = (value) => {
updatePopperPosition();
emit("expand-change", value);
};
const handleClear = () => {
var _a;
(_a = panel.value) == null ? void 0 : _a.clearCheckedNodes();
emit("clear");
};
const handleSuggestionClick = (node) => {
var _a, _b;
const { checked } = node;
if (multiple.value) {
(_a = panel.value) == null ? void 0 : _a.handleCheckChange(node, !checked, false);
} else {
!checked && ((_b = panel.value) == null ? void 0 : _b.handleCheckChange(node, true, false));
togglePopperVisible(false);
}
};
const handleFilter = lodashUnified.debounce(() => {
const { value } = searchKeyword;
if (!value)
return;
const passed = props.beforeFilter(value);
if (shared.isPromise(passed)) {
passed.then(calculateSuggestions).catch(() => {
});
} else if (passed !== false) {
calculateSuggestions();
} else {
hideSuggestionPanel();
}
}, props.debounce);
const handleInput = (val) => {
searchKeyword.value = val;
val ? handleFilter() : hideSuggestionPanel();
};
vue.watch(filtering, updatePopperPosition);
vue.watch(checkedNodes, (nodes) => {
if (multiple.value) {
hlSelector.value.setValue(nodes || []);
} else {
const { showAllLevels, separator } = props;
hlSelector.value.setValue(nodes.length ? nodes[0].calcText(showAllLevels, separator) : "");
}
});
return {
namespace,
hlSelector,
popperPaneRef,
panel,
suggestionPanel,
filtering,
checkedValue,
suggestions,
isDisabled,
cascaderSize,
cascaderFill,
multiple,
t,
togglePopperVisible,
hideSuggestionPanel,
resizePanel,
deleteTag,
focusFirstNode,
getCheckedNodes,
handleExpandChange,
handleClear,
handleSuggestionClick,
handleSuggestionKeyDown,
handleInput
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_hl_cascader_panel = vue.resolveComponent("hl-cascader-panel");
const _component_hl_scrollbar = vue.resolveComponent("hl-scrollbar");
const _component_hl_selector = vue.resolveComponent("hl-selector");
return vue.openBlock(), vue.createBlock(_component_hl_selector, {
ref: "hlSelector",
size: _ctx.cascaderSize,
fill: _ctx.cascaderFill,
placeholder: _ctx.placeholder,
disabled: _ctx.isDisabled,
clearable: !_ctx.filtering && _ctx.clearable,
filterable: _ctx.filterable,
"collapse-tags": _ctx.collapseTags,
"max-collapse-tags": _ctx.maxCollapseTags,
"collapse-tags-tooltip": _ctx.collapseTagsTooltip,
"tag-type": _ctx.tagType,
"tag-effect": _ctx.tagEffect,
"popper-class": _ctx.popperClass + " " + _ctx.namespace + "-popper",
block: _ctx.block,
multiple: _ctx.props.multiple,
"fallback-placements": _ctx.fallbackPlacements,
placement: _ctx.placement,
"popper-append-to-body": _ctx.popperAppendToBody,
teleported: _ctx.teleported,
"popper-offset": _ctx.popperOffset,
persistent: _ctx.persistent,
onFocus: (e) => _ctx.$emit("focus", e),
onBlur: (e) => _ctx.$emit("blur", e),
onResize: _ctx.resizePanel,
onKeyboardDown: _ctx.focusFirstNode,
onInput: _ctx.handleInput,
onClear: _ctx.handleClear,
onRemoveTag: _ctx.deleteTag,
onVisibleChange: (e) => _ctx.$emit("visible-change", e),
onAfterLeave: _ctx.hideSuggestionPanel
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createVNode(_component_hl_cascader_panel, {
ref: "panel",
modelValue: _ctx.checkedValue,
"onUpdate:modelValue": ($event) => _ctx.checkedValue = $event,
options: _ctx.options,
props: _ctx.props,
border: false,
"render-label": _ctx.$slots.default,
onExpandChange: _ctx.handleExpandChange,
onClose: ($event) => _ctx.togglePopperVisible(false)
}, null, 8, ["modelValue", "onUpdate:modelValue", "options", "props", "render-label", "onExpandChange", "onClose"]), [
[vue.vShow, !_ctx.filtering]
]),
_ctx.filterable ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_hl_scrollbar, {
key: 0,
ref: "suggestionPanel",
tag: "ul",
class: vue.normalizeClass([_ctx.namespace + "-suggestion-panel"]),
"view-class": "cascader-suggestion-list",
onKeydown: _ctx.handleSuggestionKeyDown
}, {
default: vue.withCtx(() => [
_ctx.suggestions.length ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.suggestions, (item) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: item.uid,
class: vue.normalizeClass([
"cascader-suggestion-item",
item.checked && "is-active"
]),
tabindex: -1,
onClick: ($event) => _ctx.handleSuggestionClick(item)
}, [
vue.createElementVNode("span", null, vue.toDisplayString(item.text), 1),
item.checked ? (vue.openBlock(), vue.createElementBlock("i", {
key: 0,
class: vue.normalizeClass(["system-icon checked cascader-item-prefix"])
})) : vue.createCommentVNode("v-if", true)
], 10, ["onClick"]);
}), 128)) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
vue.createElementVNode("li", { class: "cascader-empty-text" }, vue.toDisplayString(_ctx.t("hl.cascader.noMatch")), 1)
])
]),
_: 3
}, 8, ["class", "onKeydown"])), [
[vue.vShow, _ctx.filtering]
]) : vue.createCommentVNode("v-if", true)
]),
tag: vue.withCtx(({ tag }) => [
tag.key === "-1" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createTextVNode(vue.toDisplayString(tag.text), 1)
], 2112)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
vue.createTextVNode(vue.toDisplayString(tag.text.calcText(_ctx.showAllLevels, _ctx.separator)), 1)
], 2112))
]),
"collapse-tag": vue.withCtx(({ tag }) => [
vue.createTextVNode(vue.toDisplayString(tag.text.calcText(_ctx.showAllLevels, _ctx.separator)), 1)
]),
_: 3
}, 8, ["size", "fill", "placeholder", "disabled", "clearable", "filterable", "collapse-tags", "max-collapse-tags", "collapse-tags-tooltip", "tag-type", "tag-effect", "popper-class", "block", "multiple", "fallback-placements", "placement", "popper-append-to-body", "teleported", "popper-offset", "persistent", "onFocus", "onBlur", "onResize", "onKeyboardDown", "onInput", "onClear", "onRemoveTag", "onVisibleChange", "onAfterLeave"]);
}
var Cascader = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
exports["default"] = Cascader;
//# sourceMappingURL=cascader2.js.map