node2.js 7.6 KB

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