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

A Component Library for Vue 3

{"version":3,"file":"event-helper.mjs","sources":["../../../../../../../packages/components/table/src/table-header/event-helper.ts"],"sourcesContent":["import { getCurrentInstance, ref } from 'vue'\nimport { hasClass, addClass, removeClass } from '@element-plus/utils/dom'\nimport isServer from '@element-plus/utils/isServer'\n\nimport type { TableHeaderProps } from '.'\nimport type { TableColumnCtx } from '../table-column/defaults'\nimport type { Table } from '../table/defaults'\n\nfunction useEvent<T>(props: TableHeaderProps<T>, emit) {\n  const instance = getCurrentInstance()\n  const parent = instance.parent as Table<T>\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(null)\n  const dragging = ref(false)\n  const dragState = ref({})\n  const handleMouseDown = (event: MouseEvent, column: TableColumnCtx<T>) => {\n    if (isServer) return\n    if (column.children && column.children.length > 0) return\n    /* istanbul ignore if */\n    if (draggingColumn.value && props.border) {\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 = 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 = {}\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(function () {\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 (column.children && column.children.length > 0) return\n    let target = event.target as HTMLElement\n    while (target && target.tagName !== 'TH') {\n      target = target.parentNode as HTMLElement\n    }\n\n    if (!column || !column.resizable) return\n\n    if (!dragging.value && props.border) {\n      const rect = target.getBoundingClientRect()\n\n      const bodyStyle = document.body.style\n      if (rect.width > 12 && rect.right - event.pageX < 8) {\n        bodyStyle.cursor = 'col-resize'\n        if (hasClass(target, 'is-sortable')) {\n          target.style.cursor = 'col-resize'\n        }\n        draggingColumn.value = column\n      } else if (!dragging.value) {\n        bodyStyle.cursor = ''\n        if (hasClass(target, 'is-sortable')) {\n          target.style.cursor = 'pointer'\n        }\n        draggingColumn.value = null\n      }\n    }\n  }\n\n  const handleMouseOut = () => {\n    if (isServer) return\n    document.body.style.cursor = ''\n  }\n  const toggleOrder = ({ order, sortOrders }) => {\n    if (order === '') 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: string | boolean\n  ) => {\n    event.stopPropagation()\n    const order =\n      column.order === givenOrder ? null : givenOrder || toggleOrder(column)\n\n    let target = event.target as HTMLElement\n    while (target && target.tagName !== 'TH') {\n      target = target.parentNode as HTMLElement\n    }\n\n    if (target && target.tagName === 'TH') {\n      if (hasClass(target, 'noclick')) {\n        removeClass(target, 'noclick')\n        return\n      }\n    }\n\n    if (!column.sortable) return\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 && sortingColumn.order === null)\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"],"names":[],"mappings":"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"}