a07562c8429f0bb6b4240253e2fe857302e1d54bfbb9ea9bb69b0ee34c92dd57b1c09a67c9788f9843e9238b2da04420039221a57275a8aeb079ec3b08cabb 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var index = require('../../../checkbox/index.js');
  5. var filterPanel = require('../filter-panel.js');
  6. var layoutObserver = require('../layout-observer.js');
  7. var tokens = require('../tokens.js');
  8. var eventHelper = require('./event-helper.js');
  9. var style_helper = require('./style.helper.js');
  10. var utilsHelper = require('./utils-helper.js');
  11. var index$1 = require('../../../../hooks/use-namespace/index.js');
  12. var TableHeader = vue.defineComponent({
  13. name: "ElTableHeader",
  14. components: {
  15. ElCheckbox: index.ElCheckbox
  16. },
  17. props: {
  18. fixed: {
  19. type: String,
  20. default: ""
  21. },
  22. store: {
  23. required: true,
  24. type: Object
  25. },
  26. border: Boolean,
  27. defaultSort: {
  28. type: Object,
  29. default: () => {
  30. return {
  31. prop: "",
  32. order: ""
  33. };
  34. }
  35. },
  36. appendFilterPanelTo: {
  37. type: String
  38. },
  39. allowDragLastColumn: {
  40. type: Boolean
  41. }
  42. },
  43. setup(props, { emit }) {
  44. const instance = vue.getCurrentInstance();
  45. const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
  46. const ns = index$1.useNamespace("table");
  47. const filterPanels = vue.ref({});
  48. const { onColumnsChange, onScrollableChange } = layoutObserver["default"](parent);
  49. const isTableLayoutAuto = (parent == null ? void 0 : parent.props.tableLayout) === "auto";
  50. const saveIndexSelection = vue.reactive(/* @__PURE__ */ new Map());
  51. const theadRef = vue.ref();
  52. let delayId;
  53. const updateFixedColumnStyle = () => {
  54. delayId = setTimeout(() => {
  55. if (saveIndexSelection.size > 0) {
  56. saveIndexSelection.forEach((column, key) => {
  57. const el = theadRef.value.querySelector(`.${key.replace(/\s/g, ".")}`);
  58. if (el) {
  59. const width = el.getBoundingClientRect().width;
  60. column.width = width || column.width;
  61. }
  62. });
  63. saveIndexSelection.clear();
  64. }
  65. });
  66. };
  67. vue.watch(saveIndexSelection, updateFixedColumnStyle);
  68. vue.onBeforeUnmount(() => {
  69. if (delayId) {
  70. clearTimeout(delayId);
  71. delayId = void 0;
  72. }
  73. });
  74. vue.onMounted(async () => {
  75. await vue.nextTick();
  76. await vue.nextTick();
  77. const { prop, order } = props.defaultSort;
  78. parent == null ? void 0 : parent.store.commit("sort", { prop, order, init: true });
  79. updateFixedColumnStyle();
  80. });
  81. const {
  82. handleHeaderClick,
  83. handleHeaderContextMenu,
  84. handleMouseDown,
  85. handleMouseMove,
  86. handleMouseOut,
  87. handleSortClick,
  88. handleFilterClick
  89. } = eventHelper["default"](props, emit);
  90. const {
  91. getHeaderRowStyle,
  92. getHeaderRowClass,
  93. getHeaderCellStyle,
  94. getHeaderCellClass
  95. } = style_helper["default"](props);
  96. const { isGroup, toggleAllSelection, columnRows } = utilsHelper["default"](props);
  97. instance.state = {
  98. onColumnsChange,
  99. onScrollableChange
  100. };
  101. instance.filterPanels = filterPanels;
  102. return {
  103. ns,
  104. filterPanels,
  105. onColumnsChange,
  106. onScrollableChange,
  107. columnRows,
  108. getHeaderRowClass,
  109. getHeaderRowStyle,
  110. getHeaderCellClass,
  111. getHeaderCellStyle,
  112. handleHeaderClick,
  113. handleHeaderContextMenu,
  114. handleMouseDown,
  115. handleMouseMove,
  116. handleMouseOut,
  117. handleSortClick,
  118. handleFilterClick,
  119. isGroup,
  120. toggleAllSelection,
  121. saveIndexSelection,
  122. isTableLayoutAuto,
  123. theadRef,
  124. updateFixedColumnStyle
  125. };
  126. },
  127. render() {
  128. const {
  129. ns,
  130. isGroup,
  131. columnRows,
  132. getHeaderCellStyle,
  133. getHeaderCellClass,
  134. getHeaderRowClass,
  135. getHeaderRowStyle,
  136. handleHeaderClick,
  137. handleHeaderContextMenu,
  138. handleMouseDown,
  139. handleMouseMove,
  140. handleSortClick,
  141. handleMouseOut,
  142. store,
  143. $parent,
  144. saveIndexSelection,
  145. isTableLayoutAuto
  146. } = this;
  147. let rowSpan = 1;
  148. return vue.h("thead", {
  149. ref: "theadRef",
  150. class: { [ns.is("group")]: isGroup }
  151. }, columnRows.map((subColumns, rowIndex) => vue.h("tr", {
  152. class: getHeaderRowClass(rowIndex),
  153. key: rowIndex,
  154. style: getHeaderRowStyle(rowIndex)
  155. }, subColumns.map((column, cellIndex) => {
  156. if (column.rowSpan > rowSpan) {
  157. rowSpan = column.rowSpan;
  158. }
  159. const _class = getHeaderCellClass(rowIndex, cellIndex, subColumns, column);
  160. if (isTableLayoutAuto && column.fixed) {
  161. saveIndexSelection.set(_class, column);
  162. }
  163. return vue.h("th", {
  164. class: _class,
  165. colspan: column.colSpan,
  166. key: `${column.id}-thead`,
  167. rowspan: column.rowSpan,
  168. style: getHeaderCellStyle(rowIndex, cellIndex, subColumns, column),
  169. onClick: ($event) => {
  170. var _a;
  171. if ((_a = $event.currentTarget) == null ? void 0 : _a.classList.contains("noclick")) {
  172. return;
  173. }
  174. handleHeaderClick($event, column);
  175. },
  176. onContextmenu: ($event) => handleHeaderContextMenu($event, column),
  177. onMousedown: ($event) => handleMouseDown($event, column),
  178. onMousemove: ($event) => handleMouseMove($event, column),
  179. onMouseout: handleMouseOut
  180. }, [
  181. vue.h("div", {
  182. class: [
  183. "cell",
  184. column.filteredValue && column.filteredValue.length > 0 ? "highlight" : ""
  185. ]
  186. }, [
  187. column.renderHeader ? column.renderHeader({
  188. column,
  189. $index: cellIndex,
  190. store,
  191. _self: $parent
  192. }) : column.label,
  193. column.sortable && vue.h("span", {
  194. onClick: ($event) => handleSortClick($event, column),
  195. class: "caret-wrapper"
  196. }, [
  197. vue.h("i", {
  198. onClick: ($event) => handleSortClick($event, column, "ascending"),
  199. class: "sort-caret ascending"
  200. }),
  201. vue.h("i", {
  202. onClick: ($event) => handleSortClick($event, column, "descending"),
  203. class: "sort-caret descending"
  204. })
  205. ]),
  206. column.filterable && vue.h(filterPanel["default"], {
  207. store,
  208. placement: column.filterPlacement || "bottom-start",
  209. appendTo: $parent == null ? void 0 : $parent.appendFilterPanelTo,
  210. column,
  211. upDataColumn: (key, value) => {
  212. column[key] = value;
  213. }
  214. }, {
  215. "filter-icon": () => column.renderFilterIcon ? column.renderFilterIcon({
  216. filterOpened: column.filterOpened
  217. }) : null
  218. })
  219. ])
  220. ]);
  221. }))));
  222. }
  223. });
  224. exports["default"] = TableHeader;
  225. //# sourceMappingURL=index.js.map