index.js 12 KB

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