@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.0 → 7.24.3-EPDM-8441.0

package/src/components/rangeSlider/Slider.vue

@@ -1,547 +1,547 @@
-<template>
-  <div
-    :class="className"
-    :data-id="dataId"
-    :style="style"
-    @mousedown="elementMouseDown"
-    @touchstart="elementTouchDown"
-  >
-    <div
-      v-for="handle in actualHandles"
-      :key="handle"
-      :style="{ display: enabled ? 'block' : 'none' }"
-      @mousedown.stop.prevent="handleDown(handle, $event)"
-      @touchstart.stop.prevent="handleTouchDown(handle, $event)"
-    >
-      <slot :name="handle"></slot>
-    </div>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-  import {
-    matchesSelectorToParentElements,
-    addEvent,
-    removeEvent
-  } from './utils/dom'
-  import { computeWidth, restrictToBounds, snapToGrid } from './utils/fns'
-
-  const events = {
-    mouse: {
-      start: 'mousedown',
-      move: 'mousemove',
-      stop: 'mouseup'
-    },
-    touch: {
-      start: 'touchstart',
-      move: 'touchmove',
-      stop: 'touchend'
-    }
-  }
-
-  const userSelectNone = {
-    userSelect: 'none',
-    MozUserSelect: 'none',
-    WebkitUserSelect: 'none',
-    MsUserSelect: 'none'
-  }
-
-  const userSelectAuto = {
-    userSelect: 'auto',
-    MozUserSelect: 'auto',
-    WebkitUserSelect: 'auto',
-    MsUserSelect: 'auto'
-  }
-
-  let eventsFor = events.mouse
-
-  export default {
-    replace: true,
-    name: 'SliderComponent',
-    props: {
-      dataId: {
-        type: String,
-        default: ''
-      },
-      className: {
-        type: String,
-        default: 'vdr'
-      },
-      disableUserSelect: {
-        type: Boolean,
-        default: true
-      },
-      preventDeactivation: {
-        type: Boolean,
-        default: false
-      },
-      active: {
-        type: Boolean,
-        default: false
-      },
-      draggable: {
-        type: Boolean,
-        default: true
-      },
-      resizable: {
-        type: Boolean,
-        default: true
-      },
-      minWidth: {
-        type: Number,
-        default: 1,
-        validator: (val) => val >= 0
-      },
-      step: {
-        type: Number,
-        default: 1,
-        validator: (val) => val > 0
-      },
-      stepCount: {
-        type: Number,
-        default: 0,
-        validator: (val) => val > 0
-      },
-      subStepCount: {
-        type: Number,
-        default: 0,
-        validator: (val) => val >= 0
-      },
-      h: {
-        type: [Number, String],
-        default: 'auto',
-        validator: (val) => {
-          if (typeof val === 'number') {
-            return val > 0
-          }
-
-          return val === 'auto'
-        }
-      },
-      z: {
-        type: [String, Number],
-        default: 'auto',
-        validator: (val) => (typeof val === 'string' ? val === 'auto' : val >= 0)
-      },
-      min: {
-        type: Number,
-        default: 0,
-        validator: (val) => val >= 0
-      },
-      max: {
-        type: Number,
-        default: 0,
-        validator: (val) => val >= 0
-      },
-      dragHandle: {
-        type: String,
-        default: null
-      },
-      dragCancel: {
-        type: String,
-        default: null
-      },
-      onDrag: {
-        type: Function,
-        default: () => true
-      },
-      onResize: {
-        type: Function,
-        default: () => true
-      }
-    },
-
-    data: function() {
-      return {
-        left: null,
-        right: null,
-        width: null,
-        height: null,
-        parentWidth: null,
-        parentHeight: null,
-        widthTouched: false,
-        heightTouched: false,
-
-        handle: null,
-        resizing: false,
-        dragging: false,
-        dragEnable: false,
-        resizeEnable: false,
-        enabled: this.active,
-
-        zIndex: this.z,
-        handles: ['ml', 'mr']
-      }
-    },
-    computed: {
-      style() {
-        return {
-          transform: `translate(${this.left}px, 0px)`,
-          width: this.computedWidth,
-          height: this.computedHeight,
-          zIndex: this.zIndex,
-          ...(this.dragging && this.disableUserSelect
-            ? userSelectNone
-            : userSelectAuto)
-        }
-      },
-      actualHandles() {
-        if (!this.resizable) return []
-
-        return this.handles
-      },
-      pxPerStep() {
-        return this.parentWidth / this.stepCount
-      },
-      minWidthByPx() {
-        return this.minWidth * this.pxPerStep
-      },
-      computedWidth() {
-        if (this.width === 'auto') {
-          if (!this.widthTouched) {
-            return 'auto'
-          }
-        }
-
-        return this.width + 'px'
-      },
-      computedHeight() {
-        if (this.height === 'auto') {
-          if (!this.heightTouched) {
-            return 'auto'
-          }
-        }
-
-        return this.height + 'px'
-      }
-    },
-
-    watch: {
-      active(val) {
-        this.enabled = val
-
-        if (val) {
-          this.$emit('activated')
-        } else {
-          this.$emit('deactivated')
-        }
-      },
-      z(val) {
-        if (val >= 0 || val === 'auto') {
-          this.zIndex = val
-        }
-      }
-    },
-
-    created: function() {
-      this.resetBoundsAndMouseState()
-    },
-    mounted: function() {
-      const [parentWidth, parentHeight] = this.getParentSize()
-
-      this.parentWidth = parentWidth
-      this.parentHeight = parentHeight
-
-      this.left = this.min * this.pxPerStep
-      this.right = this.max * this.pxPerStep
-      this.width = computeWidth(this.left, this.right)
-      this.height = this.h !== 'auto' ? this.h : parentHeight
-
-      if (this.active) {
-        this.$emit('activated')
-      }
-
-      addEvent(document.documentElement, 'mousedown', this.deselect)
-      addEvent(document.documentElement, 'touchend touchcancel', this.deselect)
-
-      addEvent(window, 'resize', this.checkParentSize)
-    },
-    beforeUnmount: function() {
-      removeEvent(document.documentElement, 'mousedown', this.deselect)
-      removeEvent(document.documentElement, 'touchstart', this.handleUp)
-      removeEvent(document.documentElement, 'mousemove', this.move)
-      removeEvent(document.documentElement, 'touchmove', this.move)
-      removeEvent(document.documentElement, 'mouseup', this.handleUp)
-      removeEvent(document.documentElement, 'touchend touchcancel', this.deselect)
-
-      removeEvent(window, 'resize', this.checkParentSize)
-    },
-
-    methods: {
-      resetBoundsAndMouseState() {
-        this.mouseClickPosition = { mouseX: 0, mouseY: 0, x: 0, y: 0, w: 0, h: 0 }
-
-        this.bounds = {
-          minLeft: null,
-          maxLeft: null,
-          minRight: null,
-          maxRight: null
-        }
-      },
-      checkParentSize() {
-        const [newParentWidth, newParentHeight] = this.getParentSize()
-
-        this.parentWidth = newParentWidth
-        this.parentHeight = newParentHeight
-      },
-      getParentSize() {
-        const style = window.getComputedStyle(this.$el.parentNode, null)
-
-        return [
-          parseInt(style.getPropertyValue('width'), 10),
-          parseInt(style.getPropertyValue('height'), 10)
-        ]
-      },
-      elementTouchDown(e) {
-        eventsFor = events.touch
-
-        this.elementDown(e)
-      },
-      elementMouseDown(e) {
-        eventsFor = events.mouse
-
-        this.elementDown(e)
-      },
-      elementDown(e) {
-        if (e instanceof MouseEvent && e.button !== 0) {
-          return
-        }
-
-        const target = e.target || e.srcElement
-
-        if (this.$el.contains(target)) {
-          if (
-            (this.dragHandle &&
-              !matchesSelectorToParentElements(
-                target,
-                this.dragHandle,
-                this.$el
-              )) ||
-            (this.dragCancel &&
-              matchesSelectorToParentElements(target, this.dragCancel, this.$el))
-          ) {
-            this.dragging = false
-
-            return
-          }
-
-          if (!this.enabled) {
-            this.enabled = true
-
-            this.$emit('activated')
-            this.$emit('update:active', true)
-          }
-
-          if (this.draggable) {
-            this.dragEnable = true
-          }
-
-          const newPosition = {
-            ...this.mouseClickPosition,
-            mouseX: e.touches ? e.touches[0].pageX : e.pageX,
-            left: this.left,
-            right: this.right
-          }
-
-          this.mouseClickPosition = newPosition
-          this.bounds = this.calcDragLimits()
-
-          addEvent(document.documentElement, eventsFor.move, this.move)
-          addEvent(document.documentElement, eventsFor.stop, this.handleUp)
-        }
-      },
-      calcDragLimits() {
-        const limits = {
-          minLeft: null,
-          maxLeft: null,
-          minRight: null,
-          maxRight: null
-        }
-
-        limits.minLeft = 0
-        limits.maxLeft = this.parentWidth - this.width
-        limits.minRight = this.width
-        limits.maxRight = this.parentWidth
-
-        return limits
-      },
-      deselect(e) {
-        const target = e.target || e.srcElement
-        const regex = new RegExp(this.className + '-([trmbl]{2})', '')
-
-        if (!this.$el.contains(target) && !regex.test(target.className)) {
-          if (this.enabled && !this.preventDeactivation) {
-            this.enabled = false
-
-            this.$emit('deactivated')
-            this.$emit('update:active', false)
-          }
-
-          removeEvent(document.documentElement, eventsFor.move, this.handleResize)
-        }
-
-        this.resetBoundsAndMouseState()
-      },
-      handleTouchDown(handle, e) {
-        eventsFor = events.touch
-
-        this.handleDown(handle, e)
-      },
-      handleDown(handle, e) {
-        if (e instanceof MouseEvent && e.which !== 1) {
-          return
-        }
-
-        if (e.stopPropagation) e.stopPropagation()
-
-        this.handle = handle
-        this.resizeEnable = true
-
-        const newPosition = {
-          ...this.mouseClickPosition,
-          mouseX: e.touches ? e.touches[0].pageX : e.pageX,
-          left: this.left,
-          right: this.right
-        }
-
-        this.mouseClickPosition = newPosition
-        this.bounds = this.calcResizeLimits()
-
-        addEvent(document.documentElement, eventsFor.move, this.handleResize)
-        addEvent(document.documentElement, eventsFor.stop, this.handleUp)
-      },
-      calcResizeLimits() {
-        const limits = {
-          minLeft: null,
-          maxLeft: null,
-          minRight: null,
-          maxRight: null
-        }
-
-        limits.minLeft = 0
-        limits.maxLeft = this.right - this.minWidthByPx
-        limits.minRight = this.left + this.minWidthByPx
-        limits.maxRight = this.parentWidth
-
-        return limits
-      },
-      move(e) {
-        if (this.resizing) {
-          this.handleResize(e)
-        } else if (this.dragEnable) {
-          this.handleDrag(e)
-        }
-      },
-      handleDrag(e) {
-        let left = this.left
-        let right = this.right
-        const bounds = this.bounds
-        const mouseClickPosition = this.mouseClickPosition
-
-        const tmpDeltaX =
-          mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX)
-
-        const deltaX = snapToGrid(this.parentWidth / this.subStepCount, tmpDeltaX)
-
-        left = restrictToBounds(
-          mouseClickPosition.left - deltaX,
-          bounds.minLeft,
-          bounds.maxLeft
-        )
-
-        right = restrictToBounds(
-          mouseClickPosition.right - deltaX,
-          bounds.minRight,
-          bounds.maxRight
-        )
-
-        this.left = left
-        this.right = right
-
-        this.$emit('dragging', this.left, this.right)
-        this.dragging = true
-      },
-      handleResize(e) {
-        let left = this.left
-        let right = this.right
-        const bounds = this.bounds
-        const mouseClickPosition = this.mouseClickPosition
-
-        const tmpDeltaX =
-          mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX)
-
-        if (!this.widthTouched && tmpDeltaX) {
-          this.widthTouched = true
-        }
-
-        const deltaX = snapToGrid(this.parentWidth / this.subStepCount, tmpDeltaX)
-
-        if (this.handle.includes('r')) {
-          right = restrictToBounds(
-            mouseClickPosition.right - deltaX,
-            bounds.minRight,
-            bounds.maxRight
-          )
-        } else if (this.handle.includes('l')) {
-          left = restrictToBounds(
-            mouseClickPosition.left - deltaX,
-            bounds.minLeft,
-            bounds.maxLeft
-          )
-        }
-
-        const width = computeWidth(left, right)
-
-        if (this.onResize(this.handle, left, width, this.height) === false) {
-          return
-        }
-
-        this.left = left
-        this.right = right
-        this.width = width
-
-        this.$emit('resizing', this.left, this.right)
-        this.resizing = true
-      },
-      handleUp() {
-        this.handle = null
-
-        this.dragEnable = false
-        this.resizeEnable = false
-
-        if (this.resizing) {
-          this.resizing = false
-          this.$emit('resizeStop', {
-            min: this.roundToNearestStep(this.left),
-            max: this.roundToNearestStep(this.right)
-          })
-        }
-
-        if (this.dragging) {
-          this.dragging = false
-          this.$emit('dragStop', {
-            min: this.roundToNearestStep(this.left),
-            max: this.roundToNearestStep(this.right)
-          })
-        }
-
-        removeEvent(document.documentElement, eventsFor.move, this.handleResize)
-      },
-      roundToNearestStep(value) {
-        const val = value / this.pxPerStep
-
-        const int = 1.0 / this.step
-        return (Math.round(val * int) / int).toFixed(2)
-      }
-    }
-  }
-</script>
-<style scoped>
-.vdr {
-  touch-action: none;
-  position: absolute;
-  box-sizing: border-box;
-  border: 1px dashed black;
-}
-</style>
+<template>
+  <div
+    :data-id="dataId"
+    :style="style"
+    :class="className"
+    @mousedown="elementMouseDown"
+    @touchstart="elementTouchDown"
+  >
+    <div
+      v-for="handle in actualHandles"
+      :key="handle"
+      :style="{ display: enabled ? 'block' : 'none' }"
+      @mousedown.stop.prevent="handleDown(handle, $event)"
+      @touchstart.stop.prevent="handleTouchDown(handle, $event)"
+    >
+      <slot :name="handle"></slot>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import {
+  matchesSelectorToParentElements,
+  addEvent,
+  removeEvent
+} from './utils/dom'
+import { computeWidth, restrictToBounds, snapToGrid } from './utils/fns'
+
+const events = {
+  mouse: {
+    start: 'mousedown',
+    move: 'mousemove',
+    stop: 'mouseup'
+  },
+  touch: {
+    start: 'touchstart',
+    move: 'touchmove',
+    stop: 'touchend'
+  }
+}
+
+const userSelectNone = {
+  userSelect: 'none',
+  MozUserSelect: 'none',
+  WebkitUserSelect: 'none',
+  MsUserSelect: 'none'
+}
+
+const userSelectAuto = {
+  userSelect: 'auto',
+  MozUserSelect: 'auto',
+  WebkitUserSelect: 'auto',
+  MsUserSelect: 'auto'
+}
+
+let eventsFor = events.mouse
+
+export default {
+  replace: true,
+  name: 'SliderComponent',
+  props: {
+    dataId: {
+      type: String,
+      default: ''
+    },
+    className: {
+      type: String,
+      default: 'vdr'
+    },
+    disableUserSelect: {
+      type: Boolean,
+      default: true
+    },
+    preventDeactivation: {
+      type: Boolean,
+      default: false
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+    draggable: {
+      type: Boolean,
+      default: true
+    },
+    resizable: {
+      type: Boolean,
+      default: true
+    },
+    minWidth: {
+      type: Number,
+      default: 1,
+      validator: (val) => val >= 0
+    },
+    step: {
+      type: Number,
+      default: 1,
+      validator: (val) => val > 0
+    },
+    stepCount: {
+      type: Number,
+      default: 0,
+      validator: (val) => val > 0
+    },
+    subStepCount: {
+      type: Number,
+      default: 0,
+      validator: (val) => val >= 0
+    },
+    h: {
+      type: [Number, String],
+      default: 'auto',
+      validator: (val) => {
+        if (typeof val === 'number') {
+          return val > 0
+        }
+
+        return val === 'auto'
+      }
+    },
+    z: {
+      type: [String, Number],
+      default: 'auto',
+      validator: (val) => (typeof val === 'string' ? val === 'auto' : val >= 0)
+    },
+    min: {
+      type: Number,
+      default: 0,
+      validator: (val) => val >= 0
+    },
+    max: {
+      type: Number,
+      default: 0,
+      validator: (val) => val >= 0
+    },
+    dragHandle: {
+      type: String,
+      default: null
+    },
+    dragCancel: {
+      type: String,
+      default: null
+    },
+    onDrag: {
+      type: Function,
+      default: () => true
+    },
+    onResize: {
+      type: Function,
+      default: () => true
+    }
+  },
+
+  data: function () {
+    return {
+      left: null,
+      right: null,
+      width: null,
+      height: null,
+      parentWidth: null,
+      parentHeight: null,
+      widthTouched: false,
+      heightTouched: false,
+
+      handle: null,
+      resizing: false,
+      dragging: false,
+      dragEnable: false,
+      resizeEnable: false,
+      enabled: this.active,
+
+      zIndex: this.z,
+      handles: ['ml', 'mr']
+    }
+  },
+
+  created: function () {
+    this.resetBoundsAndMouseState()
+  },
+  mounted: function () {
+    const [parentWidth, parentHeight] = this.getParentSize()
+
+    this.parentWidth = parentWidth
+    this.parentHeight = parentHeight
+
+    this.left = this.min * this.pxPerStep
+    this.right = this.max * this.pxPerStep
+    this.width = computeWidth(this.left, this.right)
+    this.height = this.h !== 'auto' ? this.h : parentHeight
+
+    if (this.active) {
+      this.$emit('activated')
+    }
+
+    addEvent(document.documentElement, 'mousedown', this.deselect)
+    addEvent(document.documentElement, 'touchend touchcancel', this.deselect)
+
+    addEvent(window, 'resize', this.checkParentSize)
+  },
+  beforeUnmount: function () {
+    removeEvent(document.documentElement, 'mousedown', this.deselect)
+    removeEvent(document.documentElement, 'touchstart', this.handleUp)
+    removeEvent(document.documentElement, 'mousemove', this.move)
+    removeEvent(document.documentElement, 'touchmove', this.move)
+    removeEvent(document.documentElement, 'mouseup', this.handleUp)
+    removeEvent(document.documentElement, 'touchend touchcancel', this.deselect)
+
+    removeEvent(window, 'resize', this.checkParentSize)
+  },
+
+  methods: {
+    resetBoundsAndMouseState() {
+      this.mouseClickPosition = { mouseX: 0, mouseY: 0, x: 0, y: 0, w: 0, h: 0 }
+
+      this.bounds = {
+        minLeft: null,
+        maxLeft: null,
+        minRight: null,
+        maxRight: null
+      }
+    },
+    checkParentSize() {
+      const [newParentWidth, newParentHeight] = this.getParentSize()
+
+      this.parentWidth = newParentWidth
+      this.parentHeight = newParentHeight
+    },
+    getParentSize() {
+      const style = window.getComputedStyle(this.$el.parentNode, null)
+
+      return [
+        parseInt(style.getPropertyValue('width'), 10),
+        parseInt(style.getPropertyValue('height'), 10)
+      ]
+    },
+    elementTouchDown(e) {
+      eventsFor = events.touch
+
+      this.elementDown(e)
+    },
+    elementMouseDown(e) {
+      eventsFor = events.mouse
+
+      this.elementDown(e)
+    },
+    elementDown(e) {
+      if (e instanceof MouseEvent && e.button !== 0) {
+        return
+      }
+
+      const target = e.target || e.srcElement
+
+      if (this.$el.contains(target)) {
+        if (
+          (this.dragHandle &&
+            !matchesSelectorToParentElements(
+              target,
+              this.dragHandle,
+              this.$el
+            )) ||
+          (this.dragCancel &&
+            matchesSelectorToParentElements(target, this.dragCancel, this.$el))
+        ) {
+          this.dragging = false
+
+          return
+        }
+
+        if (!this.enabled) {
+          this.enabled = true
+
+          this.$emit('activated')
+          this.$emit('update:active', true)
+        }
+
+        if (this.draggable) {
+          this.dragEnable = true
+        }
+
+        const newPosition = {
+          ...this.mouseClickPosition,
+          mouseX: e.touches ? e.touches[0].pageX : e.pageX,
+          left: this.left,
+          right: this.right
+        }
+
+        this.mouseClickPosition = newPosition
+        this.bounds = this.calcDragLimits()
+
+        addEvent(document.documentElement, eventsFor.move, this.move)
+        addEvent(document.documentElement, eventsFor.stop, this.handleUp)
+      }
+    },
+    calcDragLimits() {
+      const limits = {
+        minLeft: null,
+        maxLeft: null,
+        minRight: null,
+        maxRight: null
+      }
+
+      limits.minLeft = 0
+      limits.maxLeft = this.parentWidth - this.width
+      limits.minRight = this.width
+      limits.maxRight = this.parentWidth
+
+      return limits
+    },
+    deselect(e) {
+      const target = e.target || e.srcElement
+      const regex = new RegExp(this.className + '-([trmbl]{2})', '')
+
+      if (!this.$el.contains(target) && !regex.test(target.className)) {
+        if (this.enabled && !this.preventDeactivation) {
+          this.enabled = false
+
+          this.$emit('deactivated')
+          this.$emit('update:active', false)
+        }
+
+        removeEvent(document.documentElement, eventsFor.move, this.handleResize)
+      }
+
+      this.resetBoundsAndMouseState()
+    },
+    handleTouchDown(handle, e) {
+      eventsFor = events.touch
+
+      this.handleDown(handle, e)
+    },
+    handleDown(handle, e) {
+      if (e instanceof MouseEvent && e.which !== 1) {
+        return
+      }
+
+      if (e.stopPropagation) e.stopPropagation()
+
+      this.handle = handle
+      this.resizeEnable = true
+
+      const newPosition = {
+        ...this.mouseClickPosition,
+        mouseX: e.touches ? e.touches[0].pageX : e.pageX,
+        left: this.left,
+        right: this.right
+      }
+
+      this.mouseClickPosition = newPosition
+      this.bounds = this.calcResizeLimits()
+
+      addEvent(document.documentElement, eventsFor.move, this.handleResize)
+      addEvent(document.documentElement, eventsFor.stop, this.handleUp)
+    },
+    calcResizeLimits() {
+      const limits = {
+        minLeft: null,
+        maxLeft: null,
+        minRight: null,
+        maxRight: null
+      }
+
+      limits.minLeft = 0
+      limits.maxLeft = this.right - this.minWidthByPx
+      limits.minRight = this.left + this.minWidthByPx
+      limits.maxRight = this.parentWidth
+
+      return limits
+    },
+    move(e) {
+      if (this.resizing) {
+        this.handleResize(e)
+      } else if (this.dragEnable) {
+        this.handleDrag(e)
+      }
+    },
+    handleDrag(e) {
+      let left = this.left
+      let right = this.right
+      const bounds = this.bounds
+      const mouseClickPosition = this.mouseClickPosition
+
+      const tmpDeltaX =
+        mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX)
+
+      const deltaX = snapToGrid(this.parentWidth / this.subStepCount, tmpDeltaX)
+
+      left = restrictToBounds(
+        mouseClickPosition.left - deltaX,
+        bounds.minLeft,
+        bounds.maxLeft
+      )
+
+      right = restrictToBounds(
+        mouseClickPosition.right - deltaX,
+        bounds.minRight,
+        bounds.maxRight
+      )
+
+      this.left = left
+      this.right = right
+
+      this.$emit('dragging', this.left, this.right)
+      this.dragging = true
+    },
+    handleResize(e) {
+      let left = this.left
+      let right = this.right
+      const bounds = this.bounds
+      const mouseClickPosition = this.mouseClickPosition
+
+      const tmpDeltaX =
+        mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX)
+
+      if (!this.widthTouched && tmpDeltaX) {
+        this.widthTouched = true
+      }
+
+      const deltaX = snapToGrid(this.parentWidth / this.subStepCount, tmpDeltaX)
+
+      if (this.handle.includes('r')) {
+        right = restrictToBounds(
+          mouseClickPosition.right - deltaX,
+          bounds.minRight,
+          bounds.maxRight
+        )
+      } else if (this.handle.includes('l')) {
+        left = restrictToBounds(
+          mouseClickPosition.left - deltaX,
+          bounds.minLeft,
+          bounds.maxLeft
+        )
+      }
+
+      const width = computeWidth(left, right)
+
+      if (this.onResize(this.handle, left, width, this.height) === false) {
+        return
+      }
+
+      this.left = left
+      this.right = right
+      this.width = width
+
+      this.$emit('resizing', this.left, this.right)
+      this.resizing = true
+    },
+    handleUp() {
+      this.handle = null
+
+      this.dragEnable = false
+      this.resizeEnable = false
+
+      if (this.resizing) {
+        this.resizing = false
+        this.$emit('resizeStop', {
+          min: this.roundToNearestStep(this.left),
+          max: this.roundToNearestStep(this.right)
+        })
+      }
+
+      if (this.dragging) {
+        this.dragging = false
+        this.$emit('dragStop', {
+          min: this.roundToNearestStep(this.left),
+          max: this.roundToNearestStep(this.right)
+        })
+      }
+
+      removeEvent(document.documentElement, eventsFor.move, this.handleResize)
+    },
+    roundToNearestStep(value) {
+      const val = value / this.pxPerStep
+
+      const int = 1.0 / this.step
+      return (Math.round(val * int) / int).toFixed(2)
+    }
+  },
+  computed: {
+    style() {
+      return {
+        transform: `translate(${this.left}px, 0px)`,
+        width: this.computedWidth,
+        height: this.computedHeight,
+        zIndex: this.zIndex,
+        ...(this.dragging && this.disableUserSelect
+          ? userSelectNone
+          : userSelectAuto)
+      }
+    },
+    actualHandles() {
+      if (!this.resizable) return []
+
+      return this.handles
+    },
+    pxPerStep() {
+      return this.parentWidth / this.stepCount
+    },
+    minWidthByPx() {
+      return this.minWidth * this.pxPerStep
+    },
+    computedWidth() {
+      if (this.width === 'auto') {
+        if (!this.widthTouched) {
+          return 'auto'
+        }
+      }
+
+      return this.width + 'px'
+    },
+    computedHeight() {
+      if (this.height === 'auto') {
+        if (!this.heightTouched) {
+          return 'auto'
+        }
+      }
+
+      return this.height + 'px'
+    }
+  },
+
+  watch: {
+    active(val) {
+      this.enabled = val
+
+      if (val) {
+        this.$emit('activated')
+      } else {
+        this.$emit('deactivated')
+      }
+    },
+    z(val) {
+      if (val >= 0 || val === 'auto') {
+        this.zIndex = val
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.vdr {
+  touch-action: none;
+  position: absolute;
+  box-sizing: border-box;
+  border: 1px dashed black;
+}
+</style>