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

A Component Library for Vue 3

{"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<T extends DefaultRow>(\n  props: TableHeaderProps<T>,\n  emit: EmitFn<string[]>\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<T>) => {\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<T>) => {\n    parent?.emit('header-contextmenu', column, event)\n  }\n  const draggingColumn = ref<TableColumnCtx<T> | 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<T>) => {\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<T>) => {\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<HTMLElement>('.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<T>) => {\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<T>,\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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"}