bramw_baserow/web-frontend/modules/database/components/view/grid/GridViewWidthHandle.vue

<template>
  <div :class="{ dragging: dragging }" @mousedown.stop="start($event)"></div>
</template>

<script>
export default {
  name: 'GridViewWidthHandle',
  props: {
    width: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      dragging: false,
      mouseStart: 0,
      startWidth: 0,
    }
  },
  methods: {
    start(event) {
      event.preventDefault()
      this.dragging = true
      this.mouseStart = event.clientX
      this.startWidth = parseFloat(this.width)

      this.$el.moveEvent = (event) => this.move(event)
      this.$el.upEvent = (event) => this.up(event)

      window.addEventListener('mousemove', this.$el.moveEvent)
      window.addEventListener('mouseup', this.$el.upEvent)
      document.body.classList.add('resizing-horizontal')
    },
    move(event) {
      event.preventDefault()
      const difference = event.clientX - this.mouseStart
      const newWidth = Math.max(this.startWidth + difference, 100)

      this.$emit('move', newWidth)
    },
    up(event) {
      event.preventDefault()
      this.dragging = false
      const difference = event.clientX - this.mouseStart
      const newWidth = Math.max(this.startWidth + difference, 100)
      window.removeEventListener('mousemove', this.$el.moveEvent)
      window.removeEventListener('mouseup', this.$el.upEvent)
      document.body.classList.remove('resizing-horizontal')

      if (newWidth === this.startWidth) {
        return
      }

      this.$emit('update', { width: newWidth, oldWidth: this.startWidth })
    },
  },
}
</script>