node2.mjs 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. import { defineComponent, inject, computed, createElementVNode, resolveComponent, openBlock, createElementBlock, normalizeClass, createCommentVNode, createBlock, withModifiers, withCtx, createVNode, Fragment } from 'vue';
  2. import { ElCheckbox } from '../../checkbox/index.mjs';
  3. import { ElRadio } from '../../radio/index.mjs';
  4. import { ElIcon } from '../../icon/index.mjs';
  5. import '../../../hooks/index.mjs';
  6. import { Check, Loading, ArrowRight } from '@element-plus/icons-vue';
  7. import NodeContent from './node-content.mjs';
  8. import { CASCADER_PANEL_INJECTION_KEY } from './types.mjs';
  9. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  10. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  11. const _sfc_main = defineComponent({
  12. name: "ElCascaderNode",
  13. components: {
  14. ElCheckbox,
  15. ElRadio,
  16. NodeContent,
  17. ElIcon,
  18. Check,
  19. Loading,
  20. ArrowRight
  21. },
  22. props: {
  23. node: {
  24. type: Object,
  25. required: true
  26. },
  27. menuId: String
  28. },
  29. emits: ["expand"],
  30. setup(props, { emit }) {
  31. const panel = inject(CASCADER_PANEL_INJECTION_KEY);
  32. const ns = useNamespace("cascader-node");
  33. const isHoverMenu = computed(() => panel.isHoverMenu);
  34. const multiple = computed(() => panel.config.multiple);
  35. const checkStrictly = computed(() => panel.config.checkStrictly);
  36. const checkedNodeId = computed(() => {
  37. var _a;
  38. return (_a = panel.checkedNodes[0]) == null ? void 0 : _a.uid;
  39. });
  40. const isDisabled = computed(() => props.node.isDisabled);
  41. const isLeaf = computed(() => props.node.isLeaf);
  42. const expandable = computed(() => checkStrictly.value && !isLeaf.value || !isDisabled.value);
  43. const inExpandingPath = computed(() => isInPath(panel.expandingNode));
  44. const inCheckedPath = computed(() => checkStrictly.value && panel.checkedNodes.some(isInPath));
  45. const isInPath = (node) => {
  46. var _a;
  47. const { level, uid } = props.node;
  48. return ((_a = node == null ? void 0 : node.pathNodes[level - 1]) == null ? void 0 : _a.uid) === uid;
  49. };
  50. const doExpand = () => {
  51. if (inExpandingPath.value)
  52. return;
  53. panel.expandNode(props.node);
  54. };
  55. const doCheck = (checked) => {
  56. const { node } = props;
  57. if (checked === node.checked)
  58. return;
  59. panel.handleCheckChange(node, checked);
  60. };
  61. const doLoad = () => {
  62. panel.lazyLoad(props.node, () => {
  63. if (!isLeaf.value)
  64. doExpand();
  65. });
  66. };
  67. const handleHoverExpand = (e) => {
  68. if (!isHoverMenu.value)
  69. return;
  70. handleExpand();
  71. !isLeaf.value && emit("expand", e);
  72. };
  73. const handleExpand = () => {
  74. const { node } = props;
  75. if (!expandable.value || node.loading)
  76. return;
  77. node.loaded ? doExpand() : doLoad();
  78. };
  79. const handleClick = () => {
  80. if (isHoverMenu.value && !isLeaf.value)
  81. return;
  82. if (isLeaf.value && !isDisabled.value && !checkStrictly.value && !multiple.value) {
  83. handleCheck(true);
  84. } else {
  85. handleExpand();
  86. }
  87. };
  88. const handleSelectCheck = (checked) => {
  89. if (checkStrictly.value) {
  90. doCheck(checked);
  91. if (props.node.loaded) {
  92. doExpand();
  93. }
  94. } else {
  95. handleCheck(checked);
  96. }
  97. };
  98. const handleCheck = (checked) => {
  99. if (!props.node.loaded) {
  100. doLoad();
  101. } else {
  102. doCheck(checked);
  103. !checkStrictly.value && doExpand();
  104. }
  105. };
  106. return {
  107. panel,
  108. isHoverMenu,
  109. multiple,
  110. checkStrictly,
  111. checkedNodeId,
  112. isDisabled,
  113. isLeaf,
  114. expandable,
  115. inExpandingPath,
  116. inCheckedPath,
  117. ns,
  118. handleHoverExpand,
  119. handleExpand,
  120. handleClick,
  121. handleCheck,
  122. handleSelectCheck
  123. };
  124. }
  125. });
  126. const _hoisted_1 = ["id", "aria-haspopup", "aria-owns", "aria-expanded", "tabindex"];
  127. const _hoisted_2 = /* @__PURE__ */ createElementVNode("span", null, null, -1);
  128. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  129. const _component_el_checkbox = resolveComponent("el-checkbox");
  130. const _component_el_radio = resolveComponent("el-radio");
  131. const _component_check = resolveComponent("check");
  132. const _component_el_icon = resolveComponent("el-icon");
  133. const _component_node_content = resolveComponent("node-content");
  134. const _component_loading = resolveComponent("loading");
  135. const _component_arrow_right = resolveComponent("arrow-right");
  136. return openBlock(), createElementBlock("li", {
  137. id: `${_ctx.menuId}-${_ctx.node.uid}`,
  138. role: "menuitem",
  139. "aria-haspopup": !_ctx.isLeaf,
  140. "aria-owns": _ctx.isLeaf ? null : _ctx.menuId,
  141. "aria-expanded": _ctx.inExpandingPath,
  142. tabindex: _ctx.expandable ? -1 : void 0,
  143. class: normalizeClass([
  144. _ctx.ns.b(),
  145. _ctx.ns.is("selectable", _ctx.checkStrictly),
  146. _ctx.ns.is("active", _ctx.node.checked),
  147. _ctx.ns.is("disabled", !_ctx.expandable),
  148. _ctx.inExpandingPath && "in-active-path",
  149. _ctx.inCheckedPath && "in-checked-path"
  150. ]),
  151. onMouseenter: _cache[2] || (_cache[2] = (...args) => _ctx.handleHoverExpand && _ctx.handleHoverExpand(...args)),
  152. onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.handleHoverExpand && _ctx.handleHoverExpand(...args)),
  153. onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
  154. }, [
  155. createCommentVNode(" prefix "),
  156. _ctx.multiple ? (openBlock(), createBlock(_component_el_checkbox, {
  157. key: 0,
  158. "model-value": _ctx.node.checked,
  159. indeterminate: _ctx.node.indeterminate,
  160. disabled: _ctx.isDisabled,
  161. onClick: _cache[0] || (_cache[0] = withModifiers(() => {
  162. }, ["stop"])),
  163. "onUpdate:modelValue": _ctx.handleSelectCheck
  164. }, null, 8, ["model-value", "indeterminate", "disabled", "onUpdate:modelValue"])) : _ctx.checkStrictly ? (openBlock(), createBlock(_component_el_radio, {
  165. key: 1,
  166. "model-value": _ctx.checkedNodeId,
  167. label: _ctx.node.uid,
  168. disabled: _ctx.isDisabled,
  169. "onUpdate:modelValue": _ctx.handleSelectCheck,
  170. onClick: _cache[1] || (_cache[1] = withModifiers(() => {
  171. }, ["stop"]))
  172. }, {
  173. default: withCtx(() => [
  174. 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 "),
  175. _hoisted_2
  176. ]),
  177. _: 1
  178. }, 8, ["model-value", "label", "disabled", "onUpdate:modelValue"])) : _ctx.isLeaf && _ctx.node.checked ? (openBlock(), createBlock(_component_el_icon, {
  179. key: 2,
  180. class: normalizeClass(_ctx.ns.e("prefix"))
  181. }, {
  182. default: withCtx(() => [
  183. createVNode(_component_check)
  184. ]),
  185. _: 1
  186. }, 8, ["class"])) : createCommentVNode("v-if", true),
  187. createCommentVNode(" content "),
  188. createVNode(_component_node_content),
  189. createCommentVNode(" postfix "),
  190. !_ctx.isLeaf ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
  191. _ctx.node.loading ? (openBlock(), createBlock(_component_el_icon, {
  192. key: 0,
  193. class: normalizeClass([_ctx.ns.is("loading"), _ctx.ns.e("postfix")])
  194. }, {
  195. default: withCtx(() => [
  196. createVNode(_component_loading)
  197. ]),
  198. _: 1
  199. }, 8, ["class"])) : (openBlock(), createBlock(_component_el_icon, {
  200. key: 1,
  201. class: normalizeClass(["arrow-right", _ctx.ns.e("postfix")])
  202. }, {
  203. default: withCtx(() => [
  204. createVNode(_component_arrow_right)
  205. ]),
  206. _: 1
  207. }, 8, ["class"]))
  208. ], 64)) : createCommentVNode("v-if", true)
  209. ], 42, _hoisted_1);
  210. }
  211. 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"]]);
  212. export { ElCascaderNode as default };
  213. //# sourceMappingURL=node2.mjs.map