index.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543
  1. /* eslint-disable no-unused-vars */
  2. import Utils from '../utils/index.js'
  3. const VERSION = '1.19.1'
  4. const bootstrapVersion = Utils.getBootstrapVersion()
  5. const CONSTANTS = {
  6. 3: {
  7. classes: {
  8. buttonsPrefix: 'btn',
  9. buttons: 'default',
  10. buttonsGroup: 'btn-group',
  11. buttonsDropdown: 'btn-group',
  12. pull: 'pull',
  13. inputGroup: 'input-group',
  14. inputPrefix: 'input-',
  15. input: 'form-control',
  16. select: 'form-control',
  17. paginationDropdown: 'btn-group dropdown',
  18. dropup: 'dropup',
  19. dropdownActive: 'active',
  20. paginationActive: 'active',
  21. buttonActive: 'active'
  22. },
  23. html: {
  24. toolbarDropdown: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
  25. toolbarDropdownItem: '<li class="dropdown-item-marker" role="menuitem"><label>%s</label></li>',
  26. toolbarDropdownSeparator: '<li class="divider"></li>',
  27. pageDropdown: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
  28. pageDropdownItem: '<li role="menuitem" class="%s"><a href="#">%s</a></li>',
  29. dropdownCaret: '<span class="caret"></span>',
  30. pagination: ['<ul class="pagination%s">', '</ul>'],
  31. paginationItem: '<li class="page-item%s"><a class="page-link" aria-label="%s" href="javascript:void(0)">%s</a></li>',
  32. icon: '<i class="%s %s"></i>',
  33. inputGroup: '<div class="input-group">%s<span class="input-group-btn">%s</span></div>',
  34. searchInput: '<input class="%s%s" type="text" placeholder="%s">',
  35. searchButton: '<button class="%s" type="button" name="search" title="%s">%s %s</button>',
  36. searchClearButton: '<button class="%s" type="button" name="clearSearch" title="%s">%s %s</button>'
  37. }
  38. },
  39. 4: {
  40. classes: {
  41. buttonsPrefix: 'btn',
  42. buttons: 'secondary',
  43. buttonsGroup: 'btn-group',
  44. buttonsDropdown: 'btn-group',
  45. pull: 'float',
  46. inputGroup: 'btn-group',
  47. inputPrefix: 'form-control-',
  48. input: 'form-control',
  49. select: 'form-control',
  50. paginationDropdown: 'btn-group dropdown',
  51. dropup: 'dropup',
  52. dropdownActive: 'active',
  53. paginationActive: 'active',
  54. buttonActive: 'active'
  55. },
  56. html: {
  57. toolbarDropdown: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
  58. toolbarDropdownItem: '<label class="dropdown-item dropdown-item-marker">%s</label>',
  59. pageDropdown: ['<div class="dropdown-menu">', '</div>'],
  60. pageDropdownItem: '<a class="dropdown-item %s" href="#">%s</a>',
  61. toolbarDropdownSeparator: '<div class="dropdown-divider"></div>',
  62. dropdownCaret: '<span class="caret"></span>',
  63. pagination: ['<ul class="pagination%s">', '</ul>'],
  64. paginationItem: '<li class="page-item%s"><a class="page-link" aria-label="%s" href="javascript:void(0)">%s</a></li>',
  65. icon: '<i class="%s %s"></i>',
  66. inputGroup: '<div class="input-group">%s<div class="input-group-append">%s</div></div>',
  67. searchInput: '<input class="%s%s" type="text" placeholder="%s">',
  68. searchButton: '<button class="%s" type="button" name="search" title="%s">%s %s</button>',
  69. searchClearButton: '<button class="%s" type="button" name="clearSearch" title="%s">%s %s</button>'
  70. }
  71. },
  72. 5: {
  73. classes: {
  74. buttonsPrefix: 'btn',
  75. buttons: 'secondary',
  76. buttonsGroup: 'btn-group',
  77. buttonsDropdown: 'btn-group',
  78. pull: 'float',
  79. inputGroup: 'btn-group',
  80. inputPrefix: 'form-control-',
  81. input: 'form-control',
  82. select: 'form-select',
  83. paginationDropdown: 'btn-group dropdown',
  84. dropup: 'dropup',
  85. dropdownActive: 'active',
  86. paginationActive: 'active',
  87. buttonActive: 'active'
  88. },
  89. html: {
  90. dataToggle: 'data-bs-toggle',
  91. toolbarDropdown: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
  92. toolbarDropdownItem: '<label class="dropdown-item dropdown-item-marker">%s</label>',
  93. pageDropdown: ['<div class="dropdown-menu">', '</div>'],
  94. pageDropdownItem: '<a class="dropdown-item %s" href="#">%s</a>',
  95. toolbarDropdownSeparator: '<div class="dropdown-divider"></div>',
  96. dropdownCaret: '<span class="caret"></span>',
  97. pagination: ['<ul class="pagination%s">', '</ul>'],
  98. paginationItem: '<li class="page-item%s"><a class="page-link" aria-label="%s" href="javascript:void(0)">%s</a></li>',
  99. icon: '<i class="%s %s"></i>',
  100. inputGroup: '<div class="input-group">%s%s</div>',
  101. searchInput: '<input class="%s%s" type="text" placeholder="%s">',
  102. searchButton: '<button class="%s" type="button" name="search" title="%s">%s %s</button>',
  103. searchClearButton: '<button class="%s" type="button" name="clearSearch" title="%s">%s %s</button>'
  104. }
  105. }
  106. }[bootstrapVersion]
  107. const DEFAULTS = {
  108. height: undefined,
  109. classes: 'table table-bordered table-hover',
  110. buttons: {},
  111. theadClasses: '',
  112. headerStyle (column) {
  113. return {}
  114. },
  115. rowStyle (row, index) {
  116. return {}
  117. },
  118. rowAttributes (row, index) {
  119. return {}
  120. },
  121. undefinedText: '-',
  122. locale: undefined,
  123. virtualScroll: false,
  124. virtualScrollItemHeight: undefined,
  125. sortable: true,
  126. sortClass: undefined,
  127. silentSort: true,
  128. sortName: undefined,
  129. sortOrder: undefined,
  130. sortReset: false,
  131. sortStable: false,
  132. rememberOrder: false,
  133. serverSort: true,
  134. customSort: undefined,
  135. columns: [
  136. []
  137. ],
  138. data: [],
  139. url: undefined,
  140. method: 'get',
  141. cache: true,
  142. contentType: 'application/json',
  143. dataType: 'json',
  144. ajax: undefined,
  145. ajaxOptions: {},
  146. queryParams (params) {
  147. return params
  148. },
  149. queryParamsType: 'limit', // 'limit', undefined
  150. responseHandler (res) {
  151. return res
  152. },
  153. totalField: 'total',
  154. totalNotFilteredField: 'totalNotFiltered',
  155. dataField: 'rows',
  156. footerField: 'footer',
  157. pagination: false,
  158. paginationParts: ['pageInfo', 'pageSize', 'pageList'],
  159. showExtendedPagination: false,
  160. paginationLoop: true,
  161. sidePagination: 'client', // client or server
  162. totalRows: 0,
  163. totalNotFiltered: 0,
  164. pageNumber: 1,
  165. pageSize: 10,
  166. pageList: [10, 25, 50, 100],
  167. paginationHAlign: 'right', // right, left
  168. paginationVAlign: 'bottom', // bottom, top, both
  169. paginationDetailHAlign: 'left', // right, left
  170. paginationPreText: '&lsaquo;',
  171. paginationNextText: '&rsaquo;',
  172. paginationSuccessivelySize: 5, // Maximum successively number of pages in a row
  173. paginationPagesBySide: 1, // Number of pages on each side (right, left) of the current page.
  174. paginationUseIntermediate: false, // Calculate intermediate pages for quick access
  175. search: false,
  176. searchHighlight: false,
  177. searchOnEnterKey: false,
  178. strictSearch: false,
  179. regexSearch: false,
  180. searchSelector: false,
  181. visibleSearch: false,
  182. showButtonIcons: true,
  183. showButtonText: false,
  184. showSearchButton: false,
  185. showSearchClearButton: false,
  186. trimOnSearch: true,
  187. searchAlign: 'right',
  188. searchTimeOut: 500,
  189. searchText: '',
  190. customSearch: undefined,
  191. showHeader: true,
  192. showFooter: false,
  193. footerStyle (column) {
  194. return {}
  195. },
  196. searchAccentNeutralise: false,
  197. showColumns: false,
  198. showColumnsToggleAll: false,
  199. showColumnsSearch: false,
  200. minimumCountColumns: 1,
  201. showPaginationSwitch: false,
  202. showRefresh: false,
  203. showToggle: false,
  204. showFullscreen: false,
  205. smartDisplay: true,
  206. escape: false,
  207. filterOptions: {
  208. filterAlgorithm: 'and'
  209. },
  210. idField: undefined,
  211. selectItemName: 'btSelectItem',
  212. clickToSelect: false,
  213. ignoreClickToSelectOn ({ tagName }) {
  214. return ['A', 'BUTTON'].includes(tagName)
  215. },
  216. singleSelect: false,
  217. checkboxHeader: true,
  218. maintainMetaData: false,
  219. multipleSelectRow: false,
  220. uniqueId: undefined,
  221. cardView: false,
  222. detailView: false,
  223. detailViewIcon: true,
  224. detailViewByClick: false,
  225. detailViewAlign: 'left',
  226. detailFormatter (index, row) {
  227. return ''
  228. },
  229. detailFilter (index, row) {
  230. return true
  231. },
  232. toolbar: undefined,
  233. toolbarAlign: 'left',
  234. buttonsToolbar: undefined,
  235. buttonsAlign: 'right',
  236. buttonsOrder: ['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns'],
  237. buttonsPrefix: CONSTANTS.classes.buttonsPrefix,
  238. buttonsClass: CONSTANTS.classes.buttons,
  239. iconsPrefix: undefined, // init in initConstants
  240. icons: {}, // init in initConstants
  241. iconSize: undefined,
  242. loadingFontSize: 'auto',
  243. loadingTemplate (loadingMessage) {
  244. return `<span class="loading-wrap">
  245. <span class="loading-text">${loadingMessage}</span>
  246. <span class="animation-wrap"><span class="animation-dot"></span></span>
  247. </span>
  248. `
  249. },
  250. onAll (name, args) {
  251. return false
  252. },
  253. onClickCell (field, value, row, $element) {
  254. return false
  255. },
  256. onDblClickCell (field, value, row, $element) {
  257. return false
  258. },
  259. onClickRow (item, $element) {
  260. return false
  261. },
  262. onDblClickRow (item, $element) {
  263. return false
  264. },
  265. onSort (name, order) {
  266. return false
  267. },
  268. onCheck (row) {
  269. return false
  270. },
  271. onUncheck (row) {
  272. return false
  273. },
  274. onCheckAll (rows) {
  275. return false
  276. },
  277. onUncheckAll (rows) {
  278. return false
  279. },
  280. onCheckSome (rows) {
  281. return false
  282. },
  283. onUncheckSome (rows) {
  284. return false
  285. },
  286. onLoadSuccess (data) {
  287. return false
  288. },
  289. onLoadError (status) {
  290. return false
  291. },
  292. onColumnSwitch (field, checked) {
  293. return false
  294. },
  295. onColumnSwitchAll (checked) {
  296. return false
  297. },
  298. onPageChange (number, size) {
  299. return false
  300. },
  301. onSearch (text) {
  302. return false
  303. },
  304. onToggle (cardView) {
  305. return false
  306. },
  307. onPreBody (data) {
  308. return false
  309. },
  310. onPostBody () {
  311. return false
  312. },
  313. onPostHeader () {
  314. return false
  315. },
  316. onPostFooter () {
  317. return false
  318. },
  319. onExpandRow (index, row, $detail) {
  320. return false
  321. },
  322. onCollapseRow (index, row) {
  323. return false
  324. },
  325. onRefreshOptions (options) {
  326. return false
  327. },
  328. onRefresh (params) {
  329. return false
  330. },
  331. onResetView () {
  332. return false
  333. },
  334. onScrollBody () {
  335. return false
  336. },
  337. onTogglePagination (newState) {
  338. return false
  339. },
  340. onVirtualScroll (startIndex, endIndex) {
  341. return false
  342. }
  343. }
  344. const EN = {
  345. formatLoadingMessage () {
  346. return 'Loading, please wait'
  347. },
  348. formatRecordsPerPage (pageNumber) {
  349. return `${pageNumber} rows per page`
  350. },
  351. formatShowingRows (pageFrom, pageTo, totalRows, totalNotFiltered) {
  352. if (totalNotFiltered !== undefined && totalNotFiltered > 0 && totalNotFiltered > totalRows) {
  353. return `Showing ${pageFrom} to ${pageTo} of ${totalRows} rows (filtered from ${totalNotFiltered} total rows)`
  354. }
  355. return `Showing ${pageFrom} to ${pageTo} of ${totalRows} rows`
  356. },
  357. formatSRPaginationPreText () {
  358. return 'previous page'
  359. },
  360. formatSRPaginationPageText (page) {
  361. return `to page ${page}`
  362. },
  363. formatSRPaginationNextText () {
  364. return 'next page'
  365. },
  366. formatDetailPagination (totalRows) {
  367. return `Showing ${totalRows} rows`
  368. },
  369. formatSearch () {
  370. return 'Search'
  371. },
  372. formatClearSearch () {
  373. return 'Clear Search'
  374. },
  375. formatNoMatches () {
  376. return 'No matching records found'
  377. },
  378. formatPaginationSwitch () {
  379. return 'Hide/Show pagination'
  380. },
  381. formatPaginationSwitchDown () {
  382. return 'Show pagination'
  383. },
  384. formatPaginationSwitchUp () {
  385. return 'Hide pagination'
  386. },
  387. formatRefresh () {
  388. return 'Refresh'
  389. },
  390. formatToggle () {
  391. return 'Toggle'
  392. },
  393. formatToggleOn () {
  394. return 'Show card view'
  395. },
  396. formatToggleOff () {
  397. return 'Hide card view'
  398. },
  399. formatColumns () {
  400. return 'Columns'
  401. },
  402. formatColumnsToggleAll () {
  403. return 'Toggle all'
  404. },
  405. formatFullscreen () {
  406. return 'Fullscreen'
  407. },
  408. formatAllRows () {
  409. return 'All'
  410. }
  411. }
  412. const COLUMN_DEFAULTS = {
  413. field: undefined,
  414. title: undefined,
  415. titleTooltip: undefined,
  416. class: undefined,
  417. width: undefined,
  418. widthUnit: 'px',
  419. rowspan: undefined,
  420. colspan: undefined,
  421. align: undefined, // left, right, center
  422. halign: undefined, // left, right, center
  423. falign: undefined, // left, right, center
  424. valign: undefined, // top, middle, bottom
  425. cellStyle: undefined,
  426. radio: false,
  427. checkbox: false,
  428. checkboxEnabled: true,
  429. clickToSelect: true,
  430. showSelectTitle: false,
  431. sortable: false,
  432. sortName: undefined,
  433. order: 'asc', // asc, desc
  434. sorter: undefined,
  435. visible: true,
  436. switchable: true,
  437. cardVisible: true,
  438. searchable: true,
  439. formatter: undefined,
  440. footerFormatter: undefined,
  441. detailFormatter: undefined,
  442. searchFormatter: true,
  443. searchHighlightFormatter: false,
  444. escape: undefined,
  445. events: undefined
  446. }
  447. const METHODS = [
  448. 'getOptions',
  449. 'refreshOptions',
  450. 'getData',
  451. 'getSelections',
  452. 'load', 'append', 'prepend',
  453. 'remove', 'removeAll',
  454. 'insertRow', 'updateRow',
  455. 'getRowByUniqueId', 'updateByUniqueId', 'removeByUniqueId',
  456. 'updateCell', 'updateCellByUniqueId',
  457. 'showRow', 'hideRow', 'getHiddenRows',
  458. 'showColumn', 'hideColumn',
  459. 'getVisibleColumns', 'getHiddenColumns',
  460. 'showAllColumns', 'hideAllColumns',
  461. 'mergeCells',
  462. 'checkAll', 'uncheckAll', 'checkInvert',
  463. 'check', 'uncheck',
  464. 'checkBy', 'uncheckBy',
  465. 'refresh',
  466. 'destroy',
  467. 'resetView',
  468. 'showLoading', 'hideLoading',
  469. 'togglePagination', 'toggleFullscreen', 'toggleView',
  470. 'resetSearch',
  471. 'filterBy',
  472. 'scrollTo', 'getScrollPosition',
  473. 'selectPage', 'prevPage', 'nextPage',
  474. 'toggleDetailView',
  475. 'expandRow', 'collapseRow', 'expandRowByUniqueId', 'collapseRowByUniqueId',
  476. 'expandAllRows', 'collapseAllRows',
  477. 'updateColumnTitle', 'updateFormatText'
  478. ]
  479. const EVENTS = {
  480. 'all.bs.table': 'onAll',
  481. 'click-row.bs.table': 'onClickRow',
  482. 'dbl-click-row.bs.table': 'onDblClickRow',
  483. 'click-cell.bs.table': 'onClickCell',
  484. 'dbl-click-cell.bs.table': 'onDblClickCell',
  485. 'sort.bs.table': 'onSort',
  486. 'check.bs.table': 'onCheck',
  487. 'uncheck.bs.table': 'onUncheck',
  488. 'check-all.bs.table': 'onCheckAll',
  489. 'uncheck-all.bs.table': 'onUncheckAll',
  490. 'check-some.bs.table': 'onCheckSome',
  491. 'uncheck-some.bs.table': 'onUncheckSome',
  492. 'load-success.bs.table': 'onLoadSuccess',
  493. 'load-error.bs.table': 'onLoadError',
  494. 'column-switch.bs.table': 'onColumnSwitch',
  495. 'column-switch-all.bs.table': 'onColumnSwitchAll',
  496. 'page-change.bs.table': 'onPageChange',
  497. 'search.bs.table': 'onSearch',
  498. 'toggle.bs.table': 'onToggle',
  499. 'pre-body.bs.table': 'onPreBody',
  500. 'post-body.bs.table': 'onPostBody',
  501. 'post-header.bs.table': 'onPostHeader',
  502. 'post-footer.bs.table': 'onPostFooter',
  503. 'expand-row.bs.table': 'onExpandRow',
  504. 'collapse-row.bs.table': 'onCollapseRow',
  505. 'refresh-options.bs.table': 'onRefreshOptions',
  506. 'reset-view.bs.table': 'onResetView',
  507. 'refresh.bs.table': 'onRefresh',
  508. 'scroll-body.bs.table': 'onScrollBody',
  509. 'toggle-pagination.bs.table': 'onTogglePagination',
  510. 'virtual-scroll.bs.table': 'onVirtualScroll'
  511. }
  512. Object.assign(DEFAULTS, EN)
  513. export default {
  514. VERSION,
  515. THEME: `bootstrap${bootstrapVersion}`,
  516. CONSTANTS,
  517. DEFAULTS,
  518. COLUMN_DEFAULTS,
  519. METHODS,
  520. EVENTS,
  521. LOCALES: {
  522. en: EN,
  523. 'en-US': EN
  524. }
  525. }