hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 3.79 kB
Source Map (JSON)
{"version":3,"file":"header-cell.mjs","sources":["../../../../../../../packages/components/table-v2/src/renderers/header-cell.tsx"],"sourcesContent":["import { renderSlot } from 'vue'\nimport { HeaderCell, SortIcon } from '../components'\n// import ColumnResizer from '../table-column-resizer'\nimport { Alignment, SortOrder, oppositeOrderMap } from '../constants'\nimport { placeholderSign } from '../private'\nimport { componentToSlot, enforceUnit, tryCall } from '../utils'\n\nimport type { FunctionalComponent, UnwrapNestedRefs } from 'vue'\nimport type { TableV2HeaderRowCellRendererParams } from '../components'\nimport type { UseTableReturn } from '../use-table'\nimport type { TableV2Props } from '../table'\n\nexport type HeaderCellRendererProps = TableV2HeaderRowCellRendererParams &\nUnwrapNestedRefs<Pick<UseTableReturn, 'onColumnSorted'>> &\nPick<TableV2Props, 'sortBy' | 'sortState' | 'headerCellProps'>\n\nconst HeaderCellRenderer: FunctionalComponent<HeaderCellRendererProps> = (\n props,\n { slots },\n) => {\n const { column, style, onColumnSorted } = props\n\n const cellStyle = enforceUnit(style)\n\n if (column.placeholderSign === placeholderSign) {\n return (\n <div class={'table-v2-header-row-cell-placeholder'} style={cellStyle} />\n )\n }\n\n const { headerCellRenderer, headerClass, sortable } = column\n\n /**\n * render Cell children\n */\n\n const cellProps = {\n ...props,\n class: 'table-v2-header-cell-text',\n }\n\n const columnCellRenderer =\n componentToSlot<typeof cellProps>(headerCellRenderer)\n\n const Cell = columnCellRenderer\n ? columnCellRenderer(cellProps)\n : renderSlot(slots, 'default', cellProps, () => [\n <HeaderCell {...cellProps} />,\n ])\n\n /**\n * Render cell container and sort indicator\n */\n const { sortBy, sortState, headerCellProps } = props\n\n let sorting: boolean, sortOrder: SortOrder\n if (sortState) {\n const order = sortState[column.key]\n sorting = Boolean(oppositeOrderMap[order])\n sortOrder = sorting ? order : SortOrder.ASC\n } else {\n sorting = column.key === sortBy.key\n sortOrder = sorting ? sortBy.order : SortOrder.ASC\n }\n\n const cellKls = [\n 'table-v2-header-cell',\n tryCall(headerClass, props, ''),\n column.align === Alignment.CENTER && 'is-align-center',\n column.align === Alignment.RIGHT && 'is-align-right',\n sortable && 'is-sortable',\n ]\n\n const cellWrapperProps = {\n ...tryCall(headerCellProps, props),\n onClick: column.sortable ? onColumnSorted : undefined,\n class: cellKls,\n style: cellStyle,\n ['data-key']: column.key,\n }\n\n // For now we don't deliver resizable column feature since it has some UX issue.\n return (\n <div {...cellWrapperProps} role=\"columnheader\">\n {Cell}\n\n {sortable && (\n <SortIcon\n class={['table-v2-sort-icon', sorting && 'is-sorting']}\n sortOrder={sortOrder}\n />\n )}\n </div>\n )\n}\n\nexport default HeaderCellRenderer\nexport type HeaderCellSlotProps = HeaderCellRendererProps & { class: string; }\n"],"names":["HeaderCellRenderer","slots","column","style","onColumnSorted","props","placeholderSign","headerCellRenderer","headerClass","sortable","class","columnCellRenderer","sortBy","sortState","headerCellProps","sortOrder","sorting","_createVNode"],"mappings":";;;;;;;;wBAKA;;AAWA,MAAMA;AAEFC,EAAAA;AAAF;AAEA;AAAQC,IAAAA;AAAQC;AAAOC;AAAjB,MAAoCC;AAE1C,8BAA6B;;AAE7B,MAAIH,OAAOI;AACT;AAAA;AAAA;AAAA;AAGD;;AAED;AAAQC;AAAoBC,IAAAA;AAAaC,IAAAA;AAAnC;AAEN;AACF;AACA;;AAEE;AAEEC,IAAAA;AAFgB,GAAlB;AAKA;AAGA,eAAaC;AAMb;AACF;AACA;;AACE;AAAQC,IAAAA;AAAQC;AAAWC;AAArB;AAEN,eAAsBC;;AACtB;AACE;AACAC,IAAAA;AACAD,IAAAA;AACD,SAAME;AACLD,IAAAA;AACAD,IAAAA,SAAS,wBAAU;AACpB;;AAED;AAQA;;;;"}