index.js 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  10. var _commonUtil = require("../utils/commonUtil");
  11. var _useActive = _interopRequireDefault(require("./useActive"));
  12. var _useKeyboard = _interopRequireDefault(require("./useKeyboard"));
  13. var _treeUtil = require("../utils/treeUtil");
  14. var _vcSelect = require("../../vc-select");
  15. var _context = require("../context");
  16. var _Column = _interopRequireWildcard(require("./Column"));
  17. function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
  18. function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
  19. var _default = exports.default = (0, _vue.defineComponent)({
  20. compatConfig: {
  21. MODE: 3
  22. },
  23. name: 'OptionList',
  24. inheritAttrs: false,
  25. setup(_props, context) {
  26. const {
  27. attrs,
  28. slots
  29. } = context;
  30. const baseProps = (0, _vcSelect.useBaseProps)();
  31. const containerRef = (0, _vue.ref)();
  32. const rtl = (0, _vue.computed)(() => baseProps.direction === 'rtl');
  33. const {
  34. options,
  35. values,
  36. halfValues,
  37. fieldNames,
  38. changeOnSelect,
  39. onSelect,
  40. searchOptions,
  41. dropdownPrefixCls,
  42. loadData,
  43. expandTrigger,
  44. customSlots
  45. } = (0, _context.useInjectCascader)();
  46. const mergedPrefixCls = (0, _vue.computed)(() => dropdownPrefixCls.value || baseProps.prefixCls);
  47. // ========================= loadData =========================
  48. const loadingKeys = (0, _vue.shallowRef)([]);
  49. const internalLoadData = valueCells => {
  50. // Do not load when search
  51. if (!loadData.value || baseProps.searchValue) {
  52. return;
  53. }
  54. const optionList = (0, _treeUtil.toPathOptions)(valueCells, options.value, fieldNames.value);
  55. const rawOptions = optionList.map(_ref => {
  56. let {
  57. option
  58. } = _ref;
  59. return option;
  60. });
  61. const lastOption = rawOptions[rawOptions.length - 1];
  62. if (lastOption && !(0, _commonUtil.isLeaf)(lastOption, fieldNames.value)) {
  63. const pathKey = (0, _commonUtil.toPathKey)(valueCells);
  64. loadingKeys.value = [...loadingKeys.value, pathKey];
  65. loadData.value(rawOptions);
  66. }
  67. };
  68. (0, _vue.watchEffect)(() => {
  69. if (loadingKeys.value.length) {
  70. loadingKeys.value.forEach(loadingKey => {
  71. const valueStrCells = (0, _commonUtil.toPathValueStr)(loadingKey);
  72. const optionList = (0, _treeUtil.toPathOptions)(valueStrCells, options.value, fieldNames.value, true).map(_ref2 => {
  73. let {
  74. option
  75. } = _ref2;
  76. return option;
  77. });
  78. const lastOption = optionList[optionList.length - 1];
  79. if (!lastOption || lastOption[fieldNames.value.children] || (0, _commonUtil.isLeaf)(lastOption, fieldNames.value)) {
  80. loadingKeys.value = loadingKeys.value.filter(key => key !== loadingKey);
  81. }
  82. });
  83. }
  84. });
  85. // ========================== Values ==========================
  86. const checkedSet = (0, _vue.computed)(() => new Set((0, _commonUtil.toPathKeys)(values.value)));
  87. const halfCheckedSet = (0, _vue.computed)(() => new Set((0, _commonUtil.toPathKeys)(halfValues.value)));
  88. // ====================== Accessibility =======================
  89. const [activeValueCells, setActiveValueCells] = (0, _useActive.default)();
  90. // =========================== Path ===========================
  91. const onPathOpen = nextValueCells => {
  92. setActiveValueCells(nextValueCells);
  93. // Trigger loadData
  94. internalLoadData(nextValueCells);
  95. };
  96. const isSelectable = option => {
  97. const {
  98. disabled
  99. } = option;
  100. const isMergedLeaf = (0, _commonUtil.isLeaf)(option, fieldNames.value);
  101. return !disabled && (isMergedLeaf || changeOnSelect.value || baseProps.multiple);
  102. };
  103. const onPathSelect = function (valuePath, leaf) {
  104. let fromKeyboard = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  105. onSelect(valuePath);
  106. if (!baseProps.multiple && (leaf || changeOnSelect.value && (expandTrigger.value === 'hover' || fromKeyboard))) {
  107. baseProps.toggleOpen(false);
  108. }
  109. };
  110. // ========================== Option ==========================
  111. const mergedOptions = (0, _vue.computed)(() => {
  112. if (baseProps.searchValue) {
  113. return searchOptions.value;
  114. }
  115. return options.value;
  116. });
  117. // ========================== Column ==========================
  118. const optionColumns = (0, _vue.computed)(() => {
  119. const optionList = [{
  120. options: mergedOptions.value
  121. }];
  122. let currentList = mergedOptions.value;
  123. for (let i = 0; i < activeValueCells.value.length; i += 1) {
  124. const activeValueCell = activeValueCells.value[i];
  125. const currentOption = currentList.find(option => option[fieldNames.value.value] === activeValueCell);
  126. const subOptions = currentOption === null || currentOption === void 0 ? void 0 : currentOption[fieldNames.value.children];
  127. if (!(subOptions === null || subOptions === void 0 ? void 0 : subOptions.length)) {
  128. break;
  129. }
  130. currentList = subOptions;
  131. optionList.push({
  132. options: subOptions
  133. });
  134. }
  135. return optionList;
  136. });
  137. // ========================= Keyboard =========================
  138. const onKeyboardSelect = (selectValueCells, option) => {
  139. if (isSelectable(option)) {
  140. onPathSelect(selectValueCells, (0, _commonUtil.isLeaf)(option, fieldNames.value), true);
  141. }
  142. };
  143. (0, _useKeyboard.default)(context, mergedOptions, fieldNames, activeValueCells, onPathOpen, onKeyboardSelect);
  144. const onListMouseDown = event => {
  145. event.preventDefault();
  146. };
  147. (0, _vue.onMounted)(() => {
  148. (0, _vue.watch)(activeValueCells, cells => {
  149. var _a;
  150. for (let i = 0; i < cells.length; i += 1) {
  151. const cellPath = cells.slice(0, i + 1);
  152. const cellKeyPath = (0, _commonUtil.toPathKey)(cellPath);
  153. const ele = (_a = containerRef.value) === null || _a === void 0 ? void 0 : _a.querySelector(`li[data-path-key="${cellKeyPath.replace(/\\{0,2}"/g, '\\"')}"]`);
  154. if (ele) {
  155. (0, _commonUtil.scrollIntoParentView)(ele);
  156. }
  157. }
  158. }, {
  159. flush: 'post',
  160. immediate: true
  161. });
  162. });
  163. return () => {
  164. var _a, _b, _c, _d, _e;
  165. // ========================== Render ==========================
  166. const {
  167. notFoundContent = ((_a = slots.notFoundContent) === null || _a === void 0 ? void 0 : _a.call(slots)) || ((_c = (_b = customSlots.value).notFoundContent) === null || _c === void 0 ? void 0 : _c.call(_b)),
  168. multiple,
  169. toggleOpen
  170. } = baseProps;
  171. // >>>>> Empty
  172. const isEmpty = !((_e = (_d = optionColumns.value[0]) === null || _d === void 0 ? void 0 : _d.options) === null || _e === void 0 ? void 0 : _e.length);
  173. const emptyList = [{
  174. [fieldNames.value.value]: '__EMPTY__',
  175. [_Column.FIX_LABEL]: notFoundContent,
  176. disabled: true
  177. }];
  178. const columnProps = (0, _extends2.default)((0, _extends2.default)({}, attrs), {
  179. multiple: !isEmpty && multiple,
  180. onSelect: onPathSelect,
  181. onActive: onPathOpen,
  182. onToggleOpen: toggleOpen,
  183. checkedSet: checkedSet.value,
  184. halfCheckedSet: halfCheckedSet.value,
  185. loadingKeys: loadingKeys.value,
  186. isSelectable
  187. });
  188. // >>>>> Columns
  189. const mergedOptionColumns = isEmpty ? [{
  190. options: emptyList
  191. }] : optionColumns.value;
  192. const columnNodes = mergedOptionColumns.map((col, index) => {
  193. const prevValuePath = activeValueCells.value.slice(0, index);
  194. const activeValue = activeValueCells.value[index];
  195. return (0, _vue.createVNode)(_Column.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
  196. "key": index
  197. }, columnProps), {}, {
  198. "prefixCls": mergedPrefixCls.value,
  199. "options": col.options,
  200. "prevValuePath": prevValuePath,
  201. "activeValue": activeValue
  202. }), null);
  203. });
  204. return (0, _vue.createVNode)("div", {
  205. "class": [`${mergedPrefixCls.value}-menus`, {
  206. [`${mergedPrefixCls.value}-menu-empty`]: isEmpty,
  207. [`${mergedPrefixCls.value}-rtl`]: rtl.value
  208. }],
  209. "onMousedown": onListMouseDown,
  210. "ref": containerRef
  211. }, [columnNodes]);
  212. };
  213. }
  214. });