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

A Component Library for Vue 3

{"version":3,"file":"index.mjs","names":["FilterPanel"],"sources":["../../../../../../../packages/components/table/src/table-header/index.ts"],"sourcesContent":["import {\n  defineComponent,\n  getCurrentInstance,\n  h,\n  inject,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useLocale } from '@element-plus/hooks/use-locale'\nimport FilterPanel from '../filter-panel.vue'\nimport useLayoutObserver from '../layout-observer'\nimport { TABLE_INJECTION_KEY } from '../tokens'\nimport useEvent from './event-helper'\nimport useStyle from './style.helper'\nimport useUtils from './utils-helper'\n\nimport type TableLayout from '../table-layout'\nimport type { ComponentInternalInstance, PropType, Ref } from 'vue'\nimport type { DefaultRow, Sort } from '../table/defaults'\nimport type { Store } from '../store'\n\nexport interface TableHeader extends ComponentInternalInstance {\n  state: {\n    onColumnsChange: (layout: TableLayout<any>) => void\n    onScrollableChange: (layout: TableLayout<any>) => void\n  }\n  filterPanels: Ref<DefaultRow>\n}\nexport interface TableHeaderProps<T extends DefaultRow> {\n  fixed: string\n  store: Store<T>\n  border: boolean\n  defaultSort: Sort\n  allowDragLastColumn: boolean\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<any>['store']>,\n    },\n    border: Boolean,\n    defaultSort: {\n      type: Object as PropType<TableHeaderProps<any>['defaultSort']>,\n      default: () => {\n        return {\n          prop: '',\n          order: '',\n        }\n      },\n    },\n    appendFilterPanelTo: {\n      type: String,\n    },\n    allowDragLastColumn: {\n      type: Boolean,\n    },\n  },\n  setup(props, { emit }) {\n    const instance = getCurrentInstance() as TableHeader\n    const parent = inject(TABLE_INJECTION_KEY)\n    const ns = useNamespace('table')\n    const filterPanels = ref({})\n    const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent!)\n\n    const isTableLayoutAuto = parent?.props.tableLayout === 'auto'\n    const saveIndexSelection = reactive(new Map())\n    const theadRef = ref()\n\n    let delayId: ReturnType<typeof setTimeout> | undefined\n    const updateFixedColumnStyle = () => {\n      delayId = setTimeout(() => {\n        if (saveIndexSelection.size > 0) {\n          saveIndexSelection.forEach((column, key) => {\n            const el = theadRef.value.querySelector(\n              `.${key.replace(/\\s/g, '.')}`\n            )\n            if (el) {\n              const width = el.getBoundingClientRect().width\n              column.width = width || column.width\n            }\n          })\n          saveIndexSelection.clear()\n        }\n      })\n    }\n\n    watch(saveIndexSelection, updateFixedColumnStyle)\n    onBeforeUnmount(() => {\n      if (delayId) {\n        clearTimeout(delayId)\n        delayId = undefined\n      }\n    })\n\n    onMounted(async () => {\n      // Need double await, because updateColumns is executed after nextTick for now\n      await nextTick()\n      await nextTick()\n      const { prop, order } = props.defaultSort\n      parent?.store.commit('sort', { prop, order, init: true })\n\n      updateFixedColumnStyle()\n    })\n\n    const {\n      handleHeaderClick,\n      handleHeaderContextMenu,\n      handleMouseDown,\n      handleMouseMove,\n      handleMouseOut,\n      handleSortClick,\n      handleFilterClick,\n    } = useEvent(props as TableHeaderProps<any>, emit)\n    const {\n      getHeaderRowStyle,\n      getHeaderRowClass,\n      getHeaderCellStyle,\n      getHeaderCellClass,\n    } = useStyle(props as TableHeaderProps<any>)\n    const { isGroup, toggleAllSelection, columnRows } = useUtils(\n      props as TableHeaderProps<any>\n    )\n\n    const { t } = useLocale()\n\n    instance.state = {\n      onColumnsChange,\n      onScrollableChange,\n    }\n    instance.filterPanels = filterPanels\n\n    return {\n      ns,\n      t,\n      filterPanels,\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      saveIndexSelection,\n      isTableLayoutAuto,\n      theadRef,\n      updateFixedColumnStyle,\n    }\n  },\n  render() {\n    const {\n      ns,\n      t,\n      isGroup,\n      columnRows,\n      getHeaderCellStyle,\n      getHeaderCellClass,\n      getHeaderRowClass,\n      getHeaderRowStyle,\n      handleHeaderClick,\n      handleHeaderContextMenu,\n      handleMouseDown,\n      handleMouseMove,\n      handleSortClick,\n      handleMouseOut,\n      store,\n      $parent,\n      saveIndexSelection,\n      isTableLayoutAuto,\n    } = this\n    let rowSpan = 1\n    return h(\n      'thead',\n      {\n        ref: 'theadRef',\n        class: ns.is('group', isGroup),\n      },\n      columnRows.map((subColumns, rowIndex) =>\n        h(\n          'tr',\n          {\n            class: getHeaderRowClass(rowIndex),\n            key: rowIndex,\n            style: getHeaderRowStyle(rowIndex),\n          },\n          subColumns.map((column, cellIndex) => {\n            if (column.rowSpan > rowSpan) {\n              rowSpan = column.rowSpan\n            }\n            const _class = getHeaderCellClass(\n              rowIndex,\n              cellIndex,\n              subColumns,\n              column\n            )\n            if (isTableLayoutAuto && column.fixed) {\n              saveIndexSelection.set(_class, column)\n            }\n            return h(\n              'th',\n              {\n                class: _class,\n                colspan: column.colSpan,\n                key: `${column.id}-thead`,\n                rowspan: column.rowSpan,\n                scope: column.colSpan > 1 ? 'colgroup' : 'col',\n                ariaSort: column.sortable ? column.order : undefined,\n                style: getHeaderCellStyle(\n                  rowIndex,\n                  cellIndex,\n                  subColumns,\n                  column\n                ),\n                onClick: ($event: Event) => {\n                  if (\n                    ($event.currentTarget as Element)?.classList.contains(\n                      'noclick'\n                    )\n                  ) {\n                    return\n                  }\n                  handleHeaderClick($event, column)\n                },\n                onContextmenu: ($event: MouseEvent) =>\n                  handleHeaderContextMenu($event, column),\n                onMousedown: ($event: MouseEvent) =>\n                  handleMouseDown($event, column),\n                onMousemove: ($event: MouseEvent) =>\n                  handleMouseMove($event, column),\n                onMouseout: handleMouseOut,\n              },\n              [\n                h(\n                  'div',\n                  {\n                    class: [\n                      'cell',\n                      column.filteredValue && column.filteredValue.length > 0\n                        ? 'highlight'\n                        : '',\n                    ],\n                  },\n                  [\n                    column.renderHeader\n                      ? column.renderHeader({\n                          column,\n                          $index: cellIndex,\n                          store,\n                          _self: $parent,\n                        })\n                      : column.label,\n                    column.sortable &&\n                      h(\n                        'button',\n                        {\n                          type: 'button',\n                          class: 'caret-wrapper',\n                          'aria-label': t('el.table.sortLabel', {\n                            column: column.label || '',\n                          }),\n                          onClick: ($event: Event) =>\n                            handleSortClick($event, column),\n                        },\n                        [\n                          h('i', {\n                            onClick: ($event: Event) =>\n                              handleSortClick($event, column, 'ascending'),\n                            class: 'sort-caret ascending',\n                          }),\n                          h('i', {\n                            onClick: ($event: Event) =>\n                              handleSortClick($event, column, 'descending'),\n                            class: 'sort-caret descending',\n                          }),\n                        ]\n                      ),\n                    column.filterable &&\n                      h(\n                        FilterPanel as any,\n                        {\n                          store,\n                          placement: column.filterPlacement || 'bottom-start',\n                          appendTo: ($parent as any)?.appendFilterPanelTo,\n                          column,\n                          upDataColumn: (key: never, value: never) => {\n                            column[key] = value\n                          },\n                        },\n                        {\n                          'filter-icon': () =>\n                            column.renderFilterIcon\n                              ? column.renderFilterIcon({\n                                  filterOpened: column.filterOpened,\n                                })\n                              : null,\n                        }\n                      ),\n                  ]\n                ),\n              ]\n            )\n          })\n        )\n      )\n    )\n  },\n})\n"],"mappings":";;;;;;;;;;;;AA0CA,2BAAe,gBAAgB;CAC7B,MAAM;CACN,YAAY,EACV,YACD;CACD,OAAO;EACL,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACD,OAAO;GACL,UAAU;GACV,MAAM;GACP;EACD,QAAQ;EACR,aAAa;GACX,MAAM;GACN,eAAe;AACb,WAAO;KACL,MAAM;KACN,OAAO;KACR;;GAEJ;EACD,qBAAqB,EACnB,MAAM,QACP;EACD,qBAAqB,EACnB,MAAM,SACP;EACF;CACD,MAAM,OAAO,EAAE,QAAQ;EACrB,MAAM,WAAW,oBAAoB;EACrC,MAAM,SAAS,OAAO,oBAAoB;EAC1C,MAAM,KAAK,aAAa,QAAQ;EAChC,MAAM,eAAe,IAAI,EAAE,CAAC;EAC5B,MAAM,EAAE,iBAAiB,uBAAuB,kBAAkB,OAAQ;EAE1E,MAAM,oBAAoB,QAAQ,MAAM,gBAAgB;EACxD,MAAM,qBAAqB,yBAAS,IAAI,KAAK,CAAC;EAC9C,MAAM,WAAW,KAAK;EAEtB,IAAI;EACJ,MAAM,+BAA+B;AACnC,aAAU,iBAAiB;AACzB,QAAI,mBAAmB,OAAO,GAAG;AAC/B,wBAAmB,SAAS,QAAQ,QAAQ;MAC1C,MAAM,KAAK,SAAS,MAAM,cACxB,IAAI,IAAI,QAAQ,OAAO,IAAI,GAC5B;AACD,UAAI,GAEF,QAAO,QADO,GAAG,uBAAuB,CAAC,SACjB,OAAO;OAEjC;AACF,wBAAmB,OAAO;;KAE5B;;AAGJ,QAAM,oBAAoB,uBAAuB;AACjD,wBAAsB;AACpB,OAAI,SAAS;AACX,iBAAa,QAAQ;AACrB,cAAU;;IAEZ;AAEF,YAAU,YAAY;AAEpB,SAAM,UAAU;AAChB,SAAM,UAAU;GAChB,MAAM,EAAE,MAAM,UAAU,MAAM;AAC9B,WAAQ,MAAM,OAAO,QAAQ;IAAE;IAAM;IAAO,MAAM;IAAM,CAAC;AAEzD,2BAAwB;IACxB;EAEF,MAAM,EACJ,mBACA,yBACA,iBACA,iBACA,gBACA,iBACA,sBACE,SAAS,OAAgC,KAAK;EAClD,MAAM,EACJ,mBACA,mBACA,oBACA,uBACE,SAAS,MAA+B;EAC5C,MAAM,EAAE,SAAS,oBAAoB,eAAe,SAClD,MACD;EAED,MAAM,EAAE,MAAM,WAAW;AAEzB,WAAS,QAAQ;GACf;GACA;GACD;AACD,WAAS,eAAe;AAExB,SAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;;CAEH,SAAS;EACP,MAAM,EACJ,IACA,GACA,SACA,YACA,oBACA,oBACA,mBACA,mBACA,mBACA,yBACA,iBACA,iBACA,iBACA,gBACA,OACA,SACA,oBACA,sBACE;EACJ,IAAI,UAAU;AACd,SAAO,EACL,SACA;GACE,KAAK;GACL,OAAO,GAAG,GAAG,SAAS,QAAQ;GAC/B,EACD,WAAW,KAAK,YAAY,aAC1B,EACE,MACA;GACE,OAAO,kBAAkB,SAAS;GAClC,KAAK;GACL,OAAO,kBAAkB,SAAS;GACnC,EACD,WAAW,KAAK,QAAQ,cAAc;AACpC,OAAI,OAAO,UAAU,QACnB,WAAU,OAAO;GAEnB,MAAM,SAAS,mBACb,UACA,WACA,YACA,OACD;AACD,OAAI,qBAAqB,OAAO,MAC9B,oBAAmB,IAAI,QAAQ,OAAO;AAExC,UAAO,EACL,MACA;IACE,OAAO;IACP,SAAS,OAAO;IAChB,KAAK,GAAG,OAAO,GAAG;IAClB,SAAS,OAAO;IAChB,OAAO,OAAO,UAAU,IAAI,aAAa;IACzC,UAAU,OAAO,WAAW,OAAO,QAAQ;IAC3C,OAAO,mBACL,UACA,WACA,YACA,OACD;IACD,UAAU,WAAkB;AAC1B,SACG,OAAO,eAA2B,UAAU,SAC3C,UACD,CAED;AAEF,uBAAkB,QAAQ,OAAO;;IAEnC,gBAAgB,WACd,wBAAwB,QAAQ,OAAO;IACzC,cAAc,WACZ,gBAAgB,QAAQ,OAAO;IACjC,cAAc,WACZ,gBAAgB,QAAQ,OAAO;IACjC,YAAY;IACb,EACD,CACE,EACE,OACA,EACE,OAAO,CACL,QACA,OAAO,iBAAiB,OAAO,cAAc,SAAS,IAClD,cACA,GACL,EACF,EACD;IACE,OAAO,eACH,OAAO,aAAa;KAClB;KACA,QAAQ;KACR;KACA,OAAO;KACR,CAAC,GACF,OAAO;IACX,OAAO,YACL,EACE,UACA;KACE,MAAM;KACN,OAAO;KACP,cAAc,EAAE,sBAAsB,EACpC,QAAQ,OAAO,SAAS,IACzB,CAAC;KACF,UAAU,WACR,gBAAgB,QAAQ,OAAO;KAClC,EACD,CACE,EAAE,KAAK;KACL,UAAU,WACR,gBAAgB,QAAQ,QAAQ,YAAY;KAC9C,OAAO;KACR,CAAC,EACF,EAAE,KAAK;KACL,UAAU,WACR,gBAAgB,QAAQ,QAAQ,aAAa;KAC/C,OAAO;KACR,CAAC,CACH,CACF;IACH,OAAO,cACL,EACEA,sBACA;KACE;KACA,WAAW,OAAO,mBAAmB;KACrC,UAAW,SAAiB;KAC5B;KACA,eAAe,KAAY,UAAiB;AAC1C,aAAO,OAAO;;KAEjB,EACD,EACE,qBACE,OAAO,mBACH,OAAO,iBAAiB,EACtB,cAAc,OAAO,cACtB,CAAC,GACF,MACP,CACF;IACJ,CACF,CACF,CACF;IACD,CACH,CACF,CACF;;CAEJ,CAAC"}