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.
215 lines
7.8 KiB
215 lines
7.8 KiB
import { defineComponent, inject, computed, createElementVNode, resolveComponent, openBlock, createElementBlock, normalizeClass, createCommentVNode, createBlock, withModifiers, withCtx, createVNode, Fragment } from 'vue';
|
|
import { ElCheckbox } from '../../checkbox/index.mjs';
|
|
import { ElRadio } from '../../radio/index.mjs';
|
|
import { ElIcon } from '../../icon/index.mjs';
|
|
import '../../../hooks/index.mjs';
|
|
import { Check, Loading, ArrowRight } from '@element-plus/icons-vue';
|
|
import NodeContent from './node-content.mjs';
|
|
import { CASCADER_PANEL_INJECTION_KEY } from './types.mjs';
|
|
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
|
|
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
|
|
|
|
const _sfc_main = defineComponent({
|
|
name: "ElCascaderNode",
|
|
components: {
|
|
ElCheckbox,
|
|
ElRadio,
|
|
NodeContent,
|
|
ElIcon,
|
|
Check,
|
|
Loading,
|
|
ArrowRight
|
|
},
|
|
props: {
|
|
node: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
menuId: String
|
|
},
|
|
emits: ["expand"],
|
|
setup(props, { emit }) {
|
|
const panel = inject(CASCADER_PANEL_INJECTION_KEY);
|
|
const ns = useNamespace("cascader-node");
|
|
const isHoverMenu = computed(() => panel.isHoverMenu);
|
|
const multiple = computed(() => panel.config.multiple);
|
|
const checkStrictly = computed(() => panel.config.checkStrictly);
|
|
const checkedNodeId = computed(() => {
|
|
var _a;
|
|
return (_a = panel.checkedNodes[0]) == null ? void 0 : _a.uid;
|
|
});
|
|
const isDisabled = computed(() => props.node.isDisabled);
|
|
const isLeaf = computed(() => props.node.isLeaf);
|
|
const expandable = computed(() => checkStrictly.value && !isLeaf.value || !isDisabled.value);
|
|
const inExpandingPath = computed(() => isInPath(panel.expandingNode));
|
|
const inCheckedPath = computed(() => checkStrictly.value && panel.checkedNodes.some(isInPath));
|
|
const isInPath = (node) => {
|
|
var _a;
|
|
const { level, uid } = props.node;
|
|
return ((_a = node == null ? void 0 : node.pathNodes[level - 1]) == null ? void 0 : _a.uid) === uid;
|
|
};
|
|
const doExpand = () => {
|
|
if (inExpandingPath.value)
|
|
return;
|
|
panel.expandNode(props.node);
|
|
};
|
|
const doCheck = (checked) => {
|
|
const { node } = props;
|
|
if (checked === node.checked)
|
|
return;
|
|
panel.handleCheckChange(node, checked);
|
|
};
|
|
const doLoad = () => {
|
|
panel.lazyLoad(props.node, () => {
|
|
if (!isLeaf.value)
|
|
doExpand();
|
|
});
|
|
};
|
|
const handleHoverExpand = (e) => {
|
|
if (!isHoverMenu.value)
|
|
return;
|
|
handleExpand();
|
|
!isLeaf.value && emit("expand", e);
|
|
};
|
|
const handleExpand = () => {
|
|
const { node } = props;
|
|
if (!expandable.value || node.loading)
|
|
return;
|
|
node.loaded ? doExpand() : doLoad();
|
|
};
|
|
const handleClick = () => {
|
|
if (isHoverMenu.value && !isLeaf.value)
|
|
return;
|
|
if (isLeaf.value && !isDisabled.value && !checkStrictly.value && !multiple.value) {
|
|
handleCheck(true);
|
|
} else {
|
|
handleExpand();
|
|
}
|
|
};
|
|
const handleSelectCheck = (checked) => {
|
|
if (checkStrictly.value) {
|
|
doCheck(checked);
|
|
if (props.node.loaded) {
|
|
doExpand();
|
|
}
|
|
} else {
|
|
handleCheck(checked);
|
|
}
|
|
};
|
|
const handleCheck = (checked) => {
|
|
if (!props.node.loaded) {
|
|
doLoad();
|
|
} else {
|
|
doCheck(checked);
|
|
!checkStrictly.value && doExpand();
|
|
}
|
|
};
|
|
return {
|
|
panel,
|
|
isHoverMenu,
|
|
multiple,
|
|
checkStrictly,
|
|
checkedNodeId,
|
|
isDisabled,
|
|
isLeaf,
|
|
expandable,
|
|
inExpandingPath,
|
|
inCheckedPath,
|
|
ns,
|
|
handleHoverExpand,
|
|
handleExpand,
|
|
handleClick,
|
|
handleCheck,
|
|
handleSelectCheck
|
|
};
|
|
}
|
|
});
|
|
const _hoisted_1 = ["id", "aria-haspopup", "aria-owns", "aria-expanded", "tabindex"];
|
|
const _hoisted_2 = /* @__PURE__ */ createElementVNode("span", null, null, -1);
|
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_el_checkbox = resolveComponent("el-checkbox");
|
|
const _component_el_radio = resolveComponent("el-radio");
|
|
const _component_check = resolveComponent("check");
|
|
const _component_el_icon = resolveComponent("el-icon");
|
|
const _component_node_content = resolveComponent("node-content");
|
|
const _component_loading = resolveComponent("loading");
|
|
const _component_arrow_right = resolveComponent("arrow-right");
|
|
return openBlock(), createElementBlock("li", {
|
|
id: `${_ctx.menuId}-${_ctx.node.uid}`,
|
|
role: "menuitem",
|
|
"aria-haspopup": !_ctx.isLeaf,
|
|
"aria-owns": _ctx.isLeaf ? null : _ctx.menuId,
|
|
"aria-expanded": _ctx.inExpandingPath,
|
|
tabindex: _ctx.expandable ? -1 : void 0,
|
|
class: normalizeClass([
|
|
_ctx.ns.b(),
|
|
_ctx.ns.is("selectable", _ctx.checkStrictly),
|
|
_ctx.ns.is("active", _ctx.node.checked),
|
|
_ctx.ns.is("disabled", !_ctx.expandable),
|
|
_ctx.inExpandingPath && "in-active-path",
|
|
_ctx.inCheckedPath && "in-checked-path"
|
|
]),
|
|
onMouseenter: _cache[2] || (_cache[2] = (...args) => _ctx.handleHoverExpand && _ctx.handleHoverExpand(...args)),
|
|
onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.handleHoverExpand && _ctx.handleHoverExpand(...args)),
|
|
onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
|
|
}, [
|
|
createCommentVNode(" prefix "),
|
|
_ctx.multiple ? (openBlock(), createBlock(_component_el_checkbox, {
|
|
key: 0,
|
|
"model-value": _ctx.node.checked,
|
|
indeterminate: _ctx.node.indeterminate,
|
|
disabled: _ctx.isDisabled,
|
|
onClick: _cache[0] || (_cache[0] = withModifiers(() => {
|
|
}, ["stop"])),
|
|
"onUpdate:modelValue": _ctx.handleSelectCheck
|
|
}, null, 8, ["model-value", "indeterminate", "disabled", "onUpdate:modelValue"])) : _ctx.checkStrictly ? (openBlock(), createBlock(_component_el_radio, {
|
|
key: 1,
|
|
"model-value": _ctx.checkedNodeId,
|
|
label: _ctx.node.uid,
|
|
disabled: _ctx.isDisabled,
|
|
"onUpdate:modelValue": _ctx.handleSelectCheck,
|
|
onClick: _cache[1] || (_cache[1] = withModifiers(() => {
|
|
}, ["stop"]))
|
|
}, {
|
|
default: withCtx(() => [
|
|
createCommentVNode("\n Add an empty element to avoid render label,\n do not use empty fragment here for https://github.com/vuejs/vue-next/pull/2485\n "),
|
|
_hoisted_2
|
|
]),
|
|
_: 1
|
|
}, 8, ["model-value", "label", "disabled", "onUpdate:modelValue"])) : _ctx.isLeaf && _ctx.node.checked ? (openBlock(), createBlock(_component_el_icon, {
|
|
key: 2,
|
|
class: normalizeClass(_ctx.ns.e("prefix"))
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_check)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true),
|
|
createCommentVNode(" content "),
|
|
createVNode(_component_node_content),
|
|
createCommentVNode(" postfix "),
|
|
!_ctx.isLeaf ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
|
|
_ctx.node.loading ? (openBlock(), createBlock(_component_el_icon, {
|
|
key: 0,
|
|
class: normalizeClass([_ctx.ns.is("loading"), _ctx.ns.e("postfix")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_loading)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : (openBlock(), createBlock(_component_el_icon, {
|
|
key: 1,
|
|
class: normalizeClass(["arrow-right", _ctx.ns.e("postfix")])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_arrow_right)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"]))
|
|
], 64)) : createCommentVNode("v-if", true)
|
|
], 42, _hoisted_1);
|
|
}
|
|
var ElCascaderNode = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/cascader-panel/src/node.vue"]]);
|
|
|
|
export { ElCascaderNode as default };
|
|
//# sourceMappingURL=node2.mjs.map
|
|
|