index.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. Object.defineProperty(exports, "ListItem", {
  7. enumerable: true,
  8. get: function get() {
  9. return _Item.default;
  10. }
  11. });
  12. Object.defineProperty(exports, "ListItemMeta", {
  13. enumerable: true,
  14. get: function get() {
  15. return _ItemMeta.default;
  16. }
  17. });
  18. exports.listProps = exports.default = void 0;
  19. var _vue = require("vue");
  20. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  21. var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  22. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  23. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  24. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  25. var _spin = _interopRequireDefault(require("../spin"));
  26. var _pagination = _interopRequireDefault(require("../pagination"));
  27. var _grid = require("../grid");
  28. var _Item = _interopRequireDefault(require("./Item"));
  29. var _propsUtil = require("../_util/props-util");
  30. var _initDefaultProps = _interopRequireDefault(require("../_util/props-util/initDefaultProps"));
  31. var _ItemMeta = _interopRequireDefault(require("./ItemMeta"));
  32. var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
  33. var _useBreakpoint = _interopRequireDefault(require("../_util/hooks/useBreakpoint"));
  34. var _responsiveObserve = require("../_util/responsiveObserve");
  35. var _eagerComputed = _interopRequireDefault(require("../_util/eagerComputed"));
  36. var _contextKey = require("./contextKey");
  37. var listProps = function listProps() {
  38. return {
  39. bordered: {
  40. type: Boolean,
  41. default: undefined
  42. },
  43. dataSource: _vueTypes.default.array,
  44. extra: _vueTypes.default.any,
  45. grid: {
  46. type: Object,
  47. default: undefined
  48. },
  49. itemLayout: String,
  50. loading: {
  51. type: [Boolean, Object],
  52. default: undefined
  53. },
  54. loadMore: _vueTypes.default.any,
  55. pagination: {
  56. type: [Boolean, Object],
  57. default: undefined
  58. },
  59. prefixCls: String,
  60. rowKey: [String, Number, Function],
  61. renderItem: Function,
  62. size: String,
  63. split: {
  64. type: Boolean,
  65. default: undefined
  66. },
  67. header: _vueTypes.default.any,
  68. footer: _vueTypes.default.any,
  69. locale: {
  70. type: Object
  71. }
  72. };
  73. };
  74. exports.listProps = listProps;
  75. var List = (0, _vue.defineComponent)({
  76. compatConfig: {
  77. MODE: 3
  78. },
  79. name: 'AList',
  80. Item: _Item.default,
  81. props: (0, _initDefaultProps.default)(listProps(), {
  82. dataSource: [],
  83. bordered: false,
  84. split: true,
  85. loading: false,
  86. pagination: false
  87. }),
  88. slots: ['extra', 'loadMore', 'renderItem', 'header', 'footer'],
  89. setup: function setup(props, _ref) {
  90. var _paginationObj$value$, _paginationObj$value$2;
  91. var slots = _ref.slots;
  92. (0, _vue.provide)(_contextKey.ListContextKey, {
  93. grid: (0, _vue.toRef)(props, 'grid'),
  94. itemLayout: (0, _vue.toRef)(props, 'itemLayout')
  95. });
  96. var defaultPaginationProps = {
  97. current: 1,
  98. total: 0
  99. };
  100. var _useConfigInject = (0, _useConfigInject2.default)('list', props),
  101. prefixCls = _useConfigInject.prefixCls,
  102. direction = _useConfigInject.direction,
  103. renderEmpty = _useConfigInject.renderEmpty;
  104. var paginationObj = (0, _vue.computed)(function () {
  105. return props.pagination && (0, _typeof2.default)(props.pagination) === 'object' ? props.pagination : {};
  106. });
  107. var paginationCurrent = (0, _vue.ref)((_paginationObj$value$ = paginationObj.value.defaultCurrent) !== null && _paginationObj$value$ !== void 0 ? _paginationObj$value$ : 1);
  108. var paginationSize = (0, _vue.ref)((_paginationObj$value$2 = paginationObj.value.defaultPageSize) !== null && _paginationObj$value$2 !== void 0 ? _paginationObj$value$2 : 10);
  109. (0, _vue.watch)(paginationObj, function () {
  110. if ('current' in paginationObj.value) {
  111. paginationCurrent.value = paginationObj.value.current;
  112. }
  113. if ('pageSize' in paginationObj.value) {
  114. paginationSize.value = paginationObj.value.pageSize;
  115. }
  116. });
  117. var listItemsKeys = [];
  118. var triggerPaginationEvent = function triggerPaginationEvent(eventName) {
  119. return function (page, pageSize) {
  120. paginationCurrent.value = page;
  121. paginationSize.value = pageSize;
  122. if (paginationObj.value[eventName]) {
  123. paginationObj.value[eventName](page, pageSize);
  124. }
  125. };
  126. };
  127. var onPaginationChange = triggerPaginationEvent('onChange');
  128. var onPaginationShowSizeChange = triggerPaginationEvent('onShowSizeChange');
  129. var renderEmptyFunc = function renderEmptyFunc(renderEmptyHandler) {
  130. var _props$locale;
  131. return (0, _vue.createVNode)("div", {
  132. "class": "".concat(prefixCls.value, "-empty-text")
  133. }, [((_props$locale = props.locale) === null || _props$locale === void 0 ? void 0 : _props$locale.emptyText) || renderEmptyHandler('List')]);
  134. };
  135. var loadingProp = (0, _vue.computed)(function () {
  136. if (typeof props.loading === 'boolean') {
  137. return {
  138. spinning: props.loading
  139. };
  140. } else {
  141. return props.loading;
  142. }
  143. });
  144. var isLoading = (0, _vue.computed)(function () {
  145. return loadingProp.value && loadingProp.value.spinning;
  146. });
  147. var sizeCls = (0, _vue.computed)(function () {
  148. var size = '';
  149. switch (props.size) {
  150. case 'large':
  151. size = 'lg';
  152. break;
  153. case 'small':
  154. size = 'sm';
  155. break;
  156. default:
  157. break;
  158. }
  159. return size;
  160. });
  161. var classObj = (0, _vue.computed)(function () {
  162. var _ref2;
  163. return _ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(prefixCls.value), true), (0, _defineProperty2.default)(_ref2, "".concat(prefixCls.value, "-vertical"), props.itemLayout === 'vertical'), (0, _defineProperty2.default)(_ref2, "".concat(prefixCls.value, "-").concat(sizeCls.value), sizeCls.value), (0, _defineProperty2.default)(_ref2, "".concat(prefixCls.value, "-split"), props.split), (0, _defineProperty2.default)(_ref2, "".concat(prefixCls.value, "-bordered"), props.bordered), (0, _defineProperty2.default)(_ref2, "".concat(prefixCls.value, "-loading"), isLoading.value), (0, _defineProperty2.default)(_ref2, "".concat(prefixCls.value, "-grid"), !!props.grid), (0, _defineProperty2.default)(_ref2, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _ref2;
  164. });
  165. var paginationProps = (0, _vue.computed)(function () {
  166. var pp = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, defaultPaginationProps), {}, {
  167. total: props.dataSource.length,
  168. current: paginationCurrent.value,
  169. pageSize: paginationSize.value
  170. }, props.pagination || {});
  171. var largestPage = Math.ceil(pp.total / pp.pageSize);
  172. if (pp.current > largestPage) {
  173. pp.current = largestPage;
  174. }
  175. return pp;
  176. });
  177. var splitDataSource = (0, _vue.computed)(function () {
  178. var dd = (0, _toConsumableArray2.default)(props.dataSource);
  179. if (props.pagination) {
  180. if (props.dataSource.length > (paginationProps.value.current - 1) * paginationProps.value.pageSize) {
  181. dd = (0, _toConsumableArray2.default)(props.dataSource).splice((paginationProps.value.current - 1) * paginationProps.value.pageSize, paginationProps.value.pageSize);
  182. }
  183. }
  184. return dd;
  185. });
  186. var screens = (0, _useBreakpoint.default)();
  187. var currentBreakpoint = (0, _eagerComputed.default)(function () {
  188. for (var i = 0; i < _responsiveObserve.responsiveArray.length; i += 1) {
  189. var breakpoint = _responsiveObserve.responsiveArray[i];
  190. if (screens.value[breakpoint]) {
  191. return breakpoint;
  192. }
  193. }
  194. return undefined;
  195. });
  196. var colStyle = (0, _vue.computed)(function () {
  197. if (!props.grid) {
  198. return undefined;
  199. }
  200. var columnCount = currentBreakpoint.value && props.grid[currentBreakpoint.value] ? props.grid[currentBreakpoint.value] : props.grid.column;
  201. if (columnCount) {
  202. return {
  203. width: "".concat(100 / columnCount, "%"),
  204. maxWidth: "".concat(100 / columnCount, "%")
  205. };
  206. }
  207. return undefined;
  208. });
  209. var renderInnerItem = function renderInnerItem(item, index) {
  210. var _props$renderItem;
  211. var renderItem = (_props$renderItem = props.renderItem) !== null && _props$renderItem !== void 0 ? _props$renderItem : slots.renderItem;
  212. if (!renderItem) return null;
  213. var key;
  214. var rowKeyType = (0, _typeof2.default)(props.rowKey);
  215. if (rowKeyType === 'function') {
  216. key = props.rowKey(item);
  217. } else if (rowKeyType === 'string' || rowKeyType === 'number') {
  218. key = item[props.rowKey];
  219. } else {
  220. key = item.key;
  221. }
  222. if (!key) {
  223. key = "list-item-".concat(index);
  224. }
  225. listItemsKeys[index] = key;
  226. return renderItem({
  227. item: item,
  228. index: index
  229. });
  230. };
  231. return function () {
  232. var _props$loadMore, _slots$loadMore, _props$footer, _slots$footer, _props$header, _slots$header, _slots$default;
  233. var loadMore = (_props$loadMore = props.loadMore) !== null && _props$loadMore !== void 0 ? _props$loadMore : (_slots$loadMore = slots.loadMore) === null || _slots$loadMore === void 0 ? void 0 : _slots$loadMore.call(slots);
  234. var footer = (_props$footer = props.footer) !== null && _props$footer !== void 0 ? _props$footer : (_slots$footer = slots.footer) === null || _slots$footer === void 0 ? void 0 : _slots$footer.call(slots);
  235. var header = (_props$header = props.header) !== null && _props$header !== void 0 ? _props$header : (_slots$header = slots.header) === null || _slots$header === void 0 ? void 0 : _slots$header.call(slots);
  236. var children = (0, _propsUtil.flattenChildren)((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots));
  237. var isSomethingAfterLastItem = !!(loadMore || props.pagination || footer);
  238. var classString = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, classObj.value), {}, (0, _defineProperty2.default)({}, "".concat(prefixCls.value, "-something-after-last-item"), isSomethingAfterLastItem));
  239. var paginationContent = props.pagination ? (0, _vue.createVNode)("div", {
  240. "class": "".concat(prefixCls.value, "-pagination")
  241. }, [(0, _vue.createVNode)(_pagination.default, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, paginationProps.value), {}, {
  242. "onChange": onPaginationChange,
  243. "onShowSizeChange": onPaginationShowSizeChange
  244. }), null)]) : null;
  245. var childrenContent = isLoading.value && (0, _vue.createVNode)("div", {
  246. "style": {
  247. minHeight: '53px'
  248. }
  249. }, null);
  250. if (splitDataSource.value.length > 0) {
  251. listItemsKeys.length = 0;
  252. var items = splitDataSource.value.map(function (item, index) {
  253. return renderInnerItem(item, index);
  254. });
  255. var childrenList = items.map(function (child, index) {
  256. return (0, _vue.createVNode)("div", {
  257. "key": listItemsKeys[index],
  258. "style": colStyle.value
  259. }, [child]);
  260. });
  261. childrenContent = props.grid ? (0, _vue.createVNode)(_grid.Row, {
  262. "gutter": props.grid.gutter
  263. }, {
  264. default: function _default() {
  265. return [childrenList];
  266. }
  267. }) : (0, _vue.createVNode)("ul", {
  268. "class": "".concat(prefixCls.value, "-items")
  269. }, [items]);
  270. } else if (!children.length && !isLoading.value) {
  271. childrenContent = renderEmptyFunc(renderEmpty.value);
  272. }
  273. var paginationPosition = paginationProps.value.position || 'bottom';
  274. return (0, _vue.createVNode)("div", {
  275. "class": classString
  276. }, [(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent, header && (0, _vue.createVNode)("div", {
  277. "class": "".concat(prefixCls.value, "-header")
  278. }, [header]), (0, _vue.createVNode)(_spin.default, loadingProp.value, {
  279. default: function _default() {
  280. return [childrenContent, children];
  281. }
  282. }), footer && (0, _vue.createVNode)("div", {
  283. "class": "".concat(prefixCls.value, "-footer")
  284. }, [footer]), loadMore || (paginationPosition === 'bottom' || paginationPosition === 'both') && paginationContent]);
  285. };
  286. }
  287. });
  288. /* istanbul ignore next */
  289. List.install = function (app) {
  290. app.component(List.name, List);
  291. app.component(List.Item.name, List.Item);
  292. app.component(List.Item.Meta.name, List.Item.Meta);
  293. return app;
  294. };
  295. var _default2 = List;
  296. exports.default = _default2;