hongluan-ui
Version:
Hongluan Component Library for Vue 3
208 lines (205 loc) • 7.38 kB
JavaScript
import { defineComponent, inject, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, createCommentVNode, createBlock, withModifiers, withCtx, createElementVNode, createVNode, Fragment } from 'vue';
import { HlCheckbox } from '../../checkbox/index.mjs';
import { HlRadio } from '../../radio/index.mjs';
import { HlSpinner } from '../../spinner/index.mjs';
import { HlIcon } from '../../icon/index.mjs';
import '../../system-icon/index.mjs';
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 SystemArrowRight from '../../system-icon/src/arrow-right.mjs';
import SystemChecked from '../../system-icon/src/checked.mjs';
const _sfc_main = defineComponent({
name: "CascaderNode",
components: {
HlCheckbox,
HlRadio,
HlSpinner,
HlIcon,
SystemArrowRight,
SystemChecked,
NodeContent
},
props: {
node: {
type: Object,
required: true
},
menuId: String
},
emits: ["expand"],
setup(props, { emit }) {
const panel = inject(CASCADER_PANEL_INJECTION_KEY);
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,
handleHoverExpand,
handleExpand,
handleClick,
handleCheck,
handleSelectCheck
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_hl_checkbox = resolveComponent("hl-checkbox");
const _component_hl_radio = resolveComponent("hl-radio");
const _component_system_checked = resolveComponent("system-checked");
const _component_hl_icon = resolveComponent("hl-icon");
const _component_node_content = resolveComponent("node-content");
const _component_hl_spinner = resolveComponent("hl-spinner");
const _component_system_arrow_right = resolveComponent("system-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([
"cascader-node",
_ctx.checkStrictly && "is-selectable",
_ctx.inExpandingPath && "in-active-path",
_ctx.inCheckedPath && "in-checked-path",
_ctx.node.checked && "is-active",
!_ctx.expandable && "is-disabled"
]),
onMouseenter: _ctx.handleHoverExpand,
onFocus: _ctx.handleHoverExpand,
onClick: _ctx.handleClick
}, [
createCommentVNode(" prefix "),
_ctx.multiple ? (openBlock(), createBlock(_component_hl_checkbox, {
key: 0,
"model-value": _ctx.node.checked,
indeterminate: _ctx.node.indeterminate,
disabled: _ctx.isDisabled,
onClick: withModifiers(() => {
}, ["stop"]),
"onUpdate:modelValue": _ctx.handleSelectCheck
}, null, 8, ["model-value", "indeterminate", "disabled", "onClick", "onUpdate:modelValue"])) : _ctx.checkStrictly ? (openBlock(), createBlock(_component_hl_radio, {
key: 1,
"model-value": _ctx.checkedNodeId,
label: _ctx.node.uid,
disabled: _ctx.isDisabled,
"onUpdate:modelValue": _ctx.handleSelectCheck,
onClick: 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 "),
createElementVNode("span")
]),
_: 1
}, 8, ["model-value", "label", "disabled", "onUpdate:modelValue", "onClick"])) : _ctx.isLeaf && _ctx.node.checked ? (openBlock(), createBlock(_component_hl_icon, {
key: 2,
class: normalizeClass(["cascader-item-prefix checked"])
}, {
default: withCtx(() => [
createVNode(_component_system_checked)
]),
_: 1
})) : 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_hl_spinner, {
key: 0,
class: "cascader-item-suffix"
})) : (openBlock(), createBlock(_component_hl_icon, {
key: 1,
class: "cascader-item-suffix"
}, {
default: withCtx(() => [
createVNode(_component_system_arrow_right)
]),
_: 1
}))
], 2112)) : createCommentVNode("v-if", true)
], 42, ["id", "aria-haspopup", "aria-owns", "aria-expanded", "tabindex", "onMouseenter", "onFocus", "onClick"]);
}
var HlCascaderNode = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { HlCascaderNode as default };
//# sourceMappingURL=node.mjs.map