{"version":3,"file":"event-helper.mjs","names":[],"sources":["../../../../../../../packages/components/table/src/table-header/event-helper.ts"],"sourcesContent":["import { getCurrentInstance, inject, ref } from 'vue'\nimport { isNull } from 'lodash-unified'\nimport {\n addClass,\n hasClass,\n isClient,\n isElement,\n removeClass,\n} from '@element-plus/utils'\nimport { TABLE_INJECTION_KEY } from '../tokens'\n\nimport type { EmitFn } from '@element-plus/utils'\nimport type { TableHeaderProps } from '.'\nimport type { TableColumnCtx } from '../table-column/defaults'\nimport type { DefaultRow, TableSortOrder } from '../table/defaults'\n\nfunction useEvent(\n props: TableHeaderProps,\n emit: EmitFn\n) {\n const instance = getCurrentInstance()\n const parent = inject(TABLE_INJECTION_KEY)\n const handleFilterClick = (event: Event) => {\n event.stopPropagation()\n return\n }\n\n const handleHeaderClick = (event: Event, column: TableColumnCtx) => {\n if (!column.filters && column.sortable) {\n handleSortClick(event, column, false)\n } else if (column.filterable && !column.sortable) {\n handleFilterClick(event)\n }\n parent?.emit('header-click', column, event)\n }\n\n const handleHeaderContextMenu = (event: Event, column: TableColumnCtx) => {\n parent?.emit('header-contextmenu', column, event)\n }\n const draggingColumn = ref | null>(null)\n const dragging = ref(false)\n const dragState = ref<{\n startMouseLeft: number\n startLeft: number\n startColumnLeft: number\n tableLeft: number\n }>()\n const handleMouseDown = (event: MouseEvent, column: TableColumnCtx) => {\n if (!isClient) return\n if (column.children && column.children.length > 0) return\n /* istanbul ignore if */\n if (\n draggingColumn.value &&\n props.border &&\n draggingColumn.value.id === column.id\n ) {\n dragging.value = true\n\n const table = parent\n emit('set-drag-visible', true)\n const tableEl = table?.vnode.el\n const tableLeft = tableEl?.getBoundingClientRect().left\n const columnEl = instance?.vnode?.el?.querySelector(`th.${column.id}`)\n const columnRect = columnEl.getBoundingClientRect()\n const minLeft = columnRect.left - tableLeft + 30\n\n addClass(columnEl, 'noclick')\n\n dragState.value = {\n startMouseLeft: event.clientX,\n startLeft: columnRect.right - tableLeft,\n startColumnLeft: columnRect.left - tableLeft,\n tableLeft,\n }\n const resizeProxy = table?.refs.resizeProxy as HTMLElement\n resizeProxy.style.left = `${(dragState.value as any).startLeft}px`\n\n document.onselectstart = function () {\n return false\n }\n document.ondragstart = function () {\n return false\n }\n\n const handleMouseMove = (event: MouseEvent) => {\n const deltaLeft =\n event.clientX - (dragState.value as any).startMouseLeft\n const proxyLeft = (dragState.value as any).startLeft + deltaLeft\n\n resizeProxy.style.left = `${Math.max(minLeft, proxyLeft)}px`\n }\n\n const handleMouseUp = () => {\n if (dragging.value) {\n const { startColumnLeft, startLeft } = dragState.value as any\n const finalLeft = Number.parseInt(resizeProxy.style.left, 10)\n const columnWidth = finalLeft - startColumnLeft\n column.width = column.realWidth = columnWidth\n table?.emit(\n 'header-dragend',\n column.width,\n startLeft - startColumnLeft,\n column,\n event\n )\n requestAnimationFrame(() => {\n props.store.scheduleLayout(false, true)\n })\n document.body.style.cursor = ''\n dragging.value = false\n draggingColumn.value = null\n dragState.value = undefined\n emit('set-drag-visible', false)\n }\n\n document.removeEventListener('mousemove', handleMouseMove)\n document.removeEventListener('mouseup', handleMouseUp)\n document.onselectstart = null\n document.ondragstart = null\n\n setTimeout(() => {\n removeClass(columnEl, 'noclick')\n }, 0)\n }\n\n document.addEventListener('mousemove', handleMouseMove)\n document.addEventListener('mouseup', handleMouseUp)\n }\n }\n\n const handleMouseMove = (event: MouseEvent, column: TableColumnCtx) => {\n if (!props.border || (column.children && column.children.length > 0)) return\n const el = event.target as HTMLElement\n const target = isElement(el) ? el.closest('th') : null\n if (!target) {\n return\n }\n\n const isSortable = hasClass(target, 'is-sortable')\n\n if (isSortable) {\n const cursor = dragging.value ? 'col-resize' : ''\n target.style.cursor = cursor\n\n const caret = target.querySelector('.caret-wrapper')\n if (caret) {\n caret.style.cursor = cursor\n }\n }\n\n if (!column.resizable || dragging.value) {\n draggingColumn.value = null\n return\n }\n\n const rect = target.getBoundingClientRect()\n const isLastTh = target.parentNode?.lastElementChild === target\n const allowDrag = props.allowDragLastColumn || !isLastTh\n const isResizeHandleActive =\n rect.width > 12 && rect.right - event.clientX < 8 && allowDrag\n const cursor = isResizeHandleActive ? 'col-resize' : ''\n\n document.body.style.cursor = cursor\n draggingColumn.value = isResizeHandleActive ? (column as any) : null\n if (isSortable) {\n target.style.cursor = cursor\n }\n }\n\n const handleMouseOut = () => {\n if (!isClient || dragging.value) return\n document.body.style.cursor = ''\n }\n const toggleOrder = ({ order, sortOrders }: TableColumnCtx) => {\n if ((order as string) === '') return sortOrders[0]\n const index = sortOrders.indexOf(order || null)\n return sortOrders[index > sortOrders.length - 2 ? 0 : index + 1]\n }\n const handleSortClick = (\n event: Event,\n column: TableColumnCtx,\n givenOrder?: TableSortOrder | boolean\n ) => {\n event.stopPropagation()\n const order = (\n column.order === givenOrder ? null : givenOrder || toggleOrder(column)\n ) as TableSortOrder | null\n const target = (event.target as HTMLElement)?.closest('th')\n\n if (target) {\n if (hasClass(target, 'noclick')) {\n removeClass(target, 'noclick')\n return\n }\n }\n\n if (!column.sortable) return\n\n const clickTarget = event.currentTarget\n\n if (\n ['ascending', 'descending'].some(\n (str) =>\n hasClass(clickTarget as Element, str) &&\n !column.sortOrders.includes(str as TableSortOrder)\n )\n ) {\n return\n }\n\n const states = props.store.states\n let sortProp = states.sortProp.value\n let sortOrder\n const sortingColumn = states.sortingColumn.value\n\n if (\n sortingColumn !== column ||\n (sortingColumn === column && isNull(sortingColumn.order))\n ) {\n if (sortingColumn) {\n sortingColumn.order = null\n }\n states.sortingColumn.value = column\n sortProp = column.property\n }\n if (!order) {\n sortOrder = column.order = null\n } else {\n sortOrder = column.order = order\n }\n\n states.sortProp.value = sortProp\n states.sortOrder.value = sortOrder\n\n parent?.store.commit('changeSortCondition')\n }\n\n return {\n handleHeaderClick,\n handleHeaderContextMenu,\n handleMouseDown,\n handleMouseMove,\n handleMouseOut,\n handleSortClick,\n handleFilterClick,\n }\n}\n\nexport default useEvent\n"],"mappings":"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"}