123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215 |
- 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
|