element-plus/es/components/table/src/table-header/index.mjs.map

A Component Library for Vue 3

{"version":3,"file":"index.mjs","sources":["../../../../../../../packages/components/table/src/table-header/index.ts"],"sourcesContent":["import {\n  defineComponent,\n  getCurrentInstance,\n  computed,\n  onMounted,\n  nextTick,\n  ref,\n  h,\n} from 'vue'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport FilterPanel from '../filter-panel.vue'\nimport useLayoutObserver from '../layout-observer'\nimport { hColgroup } from '../h-helper'\nimport useEvent from './event-helper'\nimport useStyle from './style.helper'\nimport useUtils from './utils-helper'\n\nimport type { ComponentInternalInstance, Ref, PropType } from 'vue'\nimport type { DefaultRow, Sort, Table } from '../table/defaults'\nimport type { Store } from '../store'\nexport interface TableHeader extends ComponentInternalInstance {\n  state: {\n    onColumnsChange\n    onScrollableChange\n  }\n  filterPanels: Ref<unknown>\n}\nexport interface TableHeaderProps<T> {\n  fixed: string\n  store: Store<T>\n  border: boolean\n  defaultSort: Sort\n}\n\nexport default defineComponent({\n  name: 'ElTableHeader',\n  components: {\n    ElCheckbox,\n  },\n  props: {\n    fixed: {\n      type: String,\n      default: '',\n    },\n    store: {\n      required: true,\n      type: Object as PropType<TableHeaderProps<DefaultRow>['store']>,\n    },\n    border: Boolean,\n    defaultSort: {\n      type: Object as PropType<TableHeaderProps<DefaultRow>['defaultSort']>,\n      default: () => {\n        return {\n          prop: '',\n          order: '',\n        }\n      },\n    },\n  },\n  setup(props, { emit }) {\n    const instance = getCurrentInstance() as TableHeader\n    const parent = instance.parent as Table<unknown>\n    const storeData = parent.store.states\n    const filterPanels = ref({})\n    const { tableLayout, onColumnsChange, onScrollableChange } =\n      useLayoutObserver(parent)\n    const hasGutter = computed(() => {\n      return !props.fixed && tableLayout.gutterWidth\n    })\n    onMounted(() => {\n      nextTick(() => {\n        const { prop, order } = props.defaultSort\n        const init = true\n        parent.store.commit('sort', { prop, order, init })\n      })\n    })\n    const {\n      handleHeaderClick,\n      handleHeaderContextMenu,\n      handleMouseDown,\n      handleMouseMove,\n      handleMouseOut,\n      handleSortClick,\n      handleFilterClick,\n    } = useEvent(props as TableHeaderProps<unknown>, emit)\n    const {\n      getHeaderRowStyle,\n      getHeaderRowClass,\n      getHeaderCellStyle,\n      getHeaderCellClass,\n    } = useStyle(props as TableHeaderProps<unknown>)\n    const { isGroup, toggleAllSelection, columnRows } = useUtils(\n      props as TableHeaderProps<unknown>\n    )\n\n    instance.state = {\n      onColumnsChange,\n      onScrollableChange,\n    }\n    // eslint-disable-next-line\n    instance.filterPanels = filterPanels\n\n    return {\n      columns: storeData.columns,\n      filterPanels,\n      hasGutter,\n      onColumnsChange,\n      onScrollableChange,\n      columnRows,\n      getHeaderRowClass,\n      getHeaderRowStyle,\n      getHeaderCellClass,\n      getHeaderCellStyle,\n      handleHeaderClick,\n      handleHeaderContextMenu,\n      handleMouseDown,\n      handleMouseMove,\n      handleMouseOut,\n      handleSortClick,\n      handleFilterClick,\n      isGroup,\n      toggleAllSelection,\n    }\n  },\n  render() {\n    return h(\n      'table',\n      {\n        border: '0',\n        cellpadding: '0',\n        cellspacing: '0',\n        class: 'el-table__header',\n      },\n      [\n        hColgroup(this.columns, this.hasGutter),\n        h(\n          'thead',\n          {\n            class: { 'is-group': this.isGroup, 'has-gutter': this.hasGutter },\n          },\n          this.columnRows.map((subColumns, rowIndex) =>\n            h(\n              'tr',\n              {\n                class: this.getHeaderRowClass(rowIndex),\n                key: rowIndex,\n                style: this.getHeaderRowStyle(rowIndex),\n              },\n              subColumns.map((column, cellIndex) =>\n                h(\n                  'th',\n                  {\n                    class: this.getHeaderCellClass(\n                      rowIndex,\n                      cellIndex,\n                      subColumns,\n                      column\n                    ),\n                    colspan: column.colSpan,\n                    key: `${column.id}-thead`,\n                    rowSpan: column.rowSpan,\n                    style: this.getHeaderCellStyle(\n                      rowIndex,\n                      cellIndex,\n                      subColumns,\n                      column\n                    ),\n                    onClick: ($event) => this.handleHeaderClick($event, column),\n                    onContextmenu: ($event) =>\n                      this.handleHeaderContextMenu($event, column),\n                    onMousedown: ($event) =>\n                      this.handleMouseDown($event, column),\n                    onMousemove: ($event) =>\n                      this.handleMouseMove($event, column),\n                    onMouseout: this.handleMouseOut,\n                  },\n                  [\n                    h(\n                      'div',\n                      {\n                        class: [\n                          'cell',\n                          column.filteredValue &&\n                          column.filteredValue.length > 0\n                            ? 'highlight'\n                            : '',\n                          column.labelClassName,\n                        ],\n                      },\n                      [\n                        column.renderHeader\n                          ? column.renderHeader({\n                              column,\n                              $index: cellIndex,\n                              store: this.store,\n                              _self: this.$parent,\n                            })\n                          : column.label,\n                        column.sortable &&\n                          h(\n                            'span',\n                            {\n                              onClick: ($event) =>\n                                this.handleSortClick($event, column),\n                              class: 'caret-wrapper',\n                            },\n                            [\n                              h('i', {\n                                onClick: ($event) =>\n                                  this.handleSortClick(\n                                    $event,\n                                    column,\n                                    'ascending'\n                                  ),\n                                class: 'sort-caret ascending',\n                              }),\n                              h('i', {\n                                onClick: ($event) =>\n                                  this.handleSortClick(\n                                    $event,\n                                    column,\n                                    'descending'\n                                  ),\n                                class: 'sort-caret descending',\n                              }),\n                            ]\n                          ),\n                        column.filterable &&\n                          h(FilterPanel, {\n                            store: this.$parent.store,\n                            placement: column.filterPlacement || 'bottom-start',\n                            column,\n                            upDataColumn: (key, value) => {\n                              column[key] = value\n                            },\n                          }),\n                      ]\n                    ),\n                  ]\n                )\n              )\n            )\n          )\n        ),\n      ]\n    )\n  },\n})\n"],"names":["FilterPanel"],"mappings":"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"}