128 lines
5.3 KiB
JavaScript
128 lines
5.3 KiB
JavaScript
|
"use strict";
|
||
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
const vue_1 = require("vue");
|
||
|
|
const vdirs_1 = require("vdirs");
|
||
|
|
const focus_detector_1 = __importDefault(require("../../_internal/focus-detector"));
|
||
|
|
const _utils_1 = require("../../_utils");
|
||
|
|
const empty_1 = require("../../empty");
|
||
|
|
const _internal_1 = require("../../_internal");
|
||
|
|
const CascaderSubmenu_1 = __importDefault(require("./CascaderSubmenu"));
|
||
|
|
const interface_1 = require("./interface");
|
||
|
|
exports.default = (0, vue_1.defineComponent)({
|
||
|
|
name: 'NCascaderMenu',
|
||
|
|
props: {
|
||
|
|
value: [String, Number, Array],
|
||
|
|
placement: {
|
||
|
|
type: String,
|
||
|
|
default: 'bottom-start'
|
||
|
|
},
|
||
|
|
show: Boolean,
|
||
|
|
menuModel: {
|
||
|
|
type: Array,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
loading: Boolean,
|
||
|
|
onFocus: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
onBlur: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
onKeydown: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
onMousedown: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
onTabout: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setup(props) {
|
||
|
|
const { localeRef, isMountedRef, mergedClsPrefixRef, syncCascaderMenuPosition, handleCascaderMenuClickOutside, mergedThemeRef
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||
|
|
} = (0, vue_1.inject)(interface_1.cascaderInjectionKey);
|
||
|
|
const submenuInstRefs = [];
|
||
|
|
const maskInstRef = (0, vue_1.ref)(null);
|
||
|
|
const selfElRef = (0, vue_1.ref)(null);
|
||
|
|
function handleResize() {
|
||
|
|
syncCascaderMenuPosition();
|
||
|
|
}
|
||
|
|
(0, _utils_1.useOnResize)(selfElRef, handleResize);
|
||
|
|
function showErrorMessage(label) {
|
||
|
|
var _a;
|
||
|
|
const { value: { loadingRequiredMessage } } = localeRef;
|
||
|
|
(_a = maskInstRef.value) === null || _a === void 0 ? void 0 : _a.showOnce(loadingRequiredMessage(label));
|
||
|
|
}
|
||
|
|
function handleClickOutside(e) {
|
||
|
|
handleCascaderMenuClickOutside(e);
|
||
|
|
}
|
||
|
|
function handleFocusin(e) {
|
||
|
|
const { value: selfEl } = selfElRef;
|
||
|
|
if (!selfEl)
|
||
|
|
return;
|
||
|
|
if (!selfEl.contains(e.relatedTarget)) {
|
||
|
|
props.onFocus(e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function handleFocusout(e) {
|
||
|
|
const { value: selfEl } = selfElRef;
|
||
|
|
if (!selfEl)
|
||
|
|
return;
|
||
|
|
if (!selfEl.contains(e.relatedTarget)) {
|
||
|
|
props.onBlur(e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const exposedRef = {
|
||
|
|
scroll(depth, index, elSize) {
|
||
|
|
const submenuInst = submenuInstRefs[depth];
|
||
|
|
if (submenuInst) {
|
||
|
|
submenuInst.scroll(index, elSize);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
showErrorMessage
|
||
|
|
};
|
||
|
|
return Object.assign({ isMounted: isMountedRef, mergedClsPrefix: mergedClsPrefixRef, selfElRef,
|
||
|
|
submenuInstRefs,
|
||
|
|
maskInstRef, mergedTheme: mergedThemeRef, handleFocusin,
|
||
|
|
handleFocusout,
|
||
|
|
handleClickOutside }, exposedRef);
|
||
|
|
},
|
||
|
|
render() {
|
||
|
|
const { submenuInstRefs, mergedClsPrefix, mergedTheme } = this;
|
||
|
|
return ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
|
||
|
|
default: () => {
|
||
|
|
if (!this.show)
|
||
|
|
return null;
|
||
|
|
return (0, vue_1.withDirectives)((0, vue_1.h)("div", { tabindex: "0", ref: "selfElRef", class: `${mergedClsPrefix}-cascader-menu`, onMousedown: this.onMousedown, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout, onKeydown: this.onKeydown },
|
||
|
|
this.menuModel[0].length ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-submenu-wrapper` },
|
||
|
|
this.menuModel.map((submenuOptions, index) => ((0, vue_1.h)(CascaderSubmenu_1.default, { ref: ((instance) => {
|
||
|
|
if (instance) {
|
||
|
|
submenuInstRefs[index] = instance;
|
||
|
|
}
|
||
|
|
}), key: index, tmNodes: submenuOptions, depth: index + 1 }))),
|
||
|
|
(0, vue_1.h)(_internal_1.NBaseMenuMask, { clsPrefix: mergedClsPrefix, ref: "maskInstRef" }))) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-menu__empty` }, (0, _utils_1.resolveSlot)(this.$slots.empty, () => [
|
||
|
|
(0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
|
||
|
|
]))),
|
||
|
|
(0, _utils_1.resolveWrappedSlot)(this.$slots.action, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-menu-action`, "data-action": true }, children))),
|
||
|
|
(0, vue_1.h)(focus_detector_1.default, { onFocus: this.onTabout })), [
|
||
|
|
[
|
||
|
|
vdirs_1.clickoutside,
|
||
|
|
this.handleClickOutside,
|
||
|
|
undefined,
|
||
|
|
{ capture: true }
|
||
|
|
]
|
||
|
|
]);
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
});
|