@eturnity/eturnity_reusable_components 7.30.3 → 7.32.0

package/src/components/rangeSlider/Slider.vue

@@ -1,8 +1,8 @@
 <template>
   <div
+    :class="className"
     :data-id="dataId"
     :style="style"
-    :class="className"
     @mousedown="elementMouseDown"
     @touchstart="elementTouchDown"
   >
@@ -20,528 +20,554 @@
 </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'
-      }
+  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',
     },
-    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
+  const userSelectNone = {
+    userSelect: 'none',
+    MozUserSelect: 'none',
+    WebkitUserSelect: 'none',
+    MsUserSelect: 'none',
+  }
 
-      this.elementDown(e)
-    },
-    elementMouseDown(e) {
-      eventsFor = events.mouse
+  const userSelectAuto = {
+    userSelect: 'auto',
+    MozUserSelect: 'auto',
+    WebkitUserSelect: 'auto',
+    MsUserSelect: 'auto',
+  }
 
-      this.elementDown(e)
-    },
-    elementDown(e) {
-      if (e instanceof MouseEvent && e.button !== 0) {
-        return
+  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'],
       }
-
-      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)
+    },
+    computed: {
+      style() {
+        return {
+          transform: `translate(${this.left}px, 0px)`,
+          width: this.computedWidth,
+          height: this.computedHeight,
+          zIndex: this.zIndex,
+          ...(this.dragging && this.disableUserSelect
+            ? userSelectNone
+            : userSelectAuto),
         }
-
-        if (this.draggable) {
-          this.dragEnable = true
+      },
+      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'
+          }
         }
 
-        const newPosition = {
-          ...this.mouseClickPosition,
-          mouseX: e.touches ? e.touches[0].pageX : e.pageX,
-          left: this.left,
-          right: this.right
+        return this.width + 'px'
+      },
+      computedHeight() {
+        if (this.height === 'auto') {
+          if (!this.heightTouched) {
+            return 'auto'
+          }
         }
 
-        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
+        return this.height + 'px'
+      },
     },
-    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
+    watch: {
+      active(val) {
+        this.enabled = val
 
+        if (val) {
+          this.$emit('activated')
+        } else {
           this.$emit('deactivated')
-          this.$emit('update:active', false)
         }
-
-        removeEvent(document.documentElement, eventsFor.move, this.handleResize)
-      }
-
-      this.resetBoundsAndMouseState()
+      },
+      z(val) {
+        if (val >= 0 || val === 'auto') {
+          this.zIndex = val
+        }
+      },
     },
-    handleTouchDown(handle, e) {
-      eventsFor = events.touch
 
-      this.handleDown(handle, e)
+    created: function () {
+      this.resetBoundsAndMouseState()
     },
-    handleDown(handle, e) {
-      if (e instanceof MouseEvent && e.which !== 1) {
-        return
-      }
+    mounted: function () {
+      const [parentWidth, parentHeight] = this.getParentSize()
 
-      if (e.stopPropagation) e.stopPropagation()
+      this.parentWidth = parentWidth
+      this.parentHeight = parentHeight
 
-      this.handle = handle
-      this.resizeEnable = true
+      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
 
-      const newPosition = {
-        ...this.mouseClickPosition,
-        mouseX: e.touches ? e.touches[0].pageX : e.pageX,
-        left: this.left,
-        right: this.right
+      if (this.active) {
+        this.$emit('activated')
       }
 
-      this.mouseClickPosition = newPosition
-      this.bounds = this.calcResizeLimits()
+      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
+      )
 
-      addEvent(document.documentElement, eventsFor.move, this.handleResize)
-      addEvent(document.documentElement, eventsFor.stop, this.handleUp)
+      removeEvent(window, 'resize', this.checkParentSize)
     },
-    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
+    methods: {
+      resetBoundsAndMouseState() {
+        this.mouseClickPosition = {
+          mouseX: 0,
+          mouseY: 0,
+          x: 0,
+          y: 0,
+          w: 0,
+          h: 0,
+        }
 
-      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
+        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 tmpDeltaX =
-        mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX)
+        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,
+        }
 
-      const deltaX = snapToGrid(this.parentWidth / this.subStepCount, tmpDeltaX)
+        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
+          )
+        }
 
-      left = restrictToBounds(
-        mouseClickPosition.left - deltaX,
-        bounds.minLeft,
-        bounds.maxLeft
-      )
+        this.resetBoundsAndMouseState()
+      },
+      handleTouchDown(handle, e) {
+        eventsFor = events.touch
 
-      right = restrictToBounds(
-        mouseClickPosition.right - deltaX,
-        bounds.minRight,
-        bounds.maxRight
-      )
+        this.handleDown(handle, e)
+      },
+      handleDown(handle, e) {
+        if (e instanceof MouseEvent && e.which !== 1) {
+          return
+        }
 
-      this.left = left
-      this.right = right
+        if (e.stopPropagation) e.stopPropagation()
 
-      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
+        this.handle = handle
+        this.resizeEnable = true
 
-      const tmpDeltaX =
-        mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX)
+        const newPosition = {
+          ...this.mouseClickPosition,
+          mouseX: e.touches ? e.touches[0].pageX : e.pageX,
+          left: this.left,
+          right: this.right,
+        }
 
-      if (!this.widthTouched && tmpDeltaX) {
-        this.widthTouched = true
-      }
+        this.mouseClickPosition = newPosition
+        this.bounds = this.calcResizeLimits()
 
-      const deltaX = snapToGrid(this.parentWidth / this.subStepCount, tmpDeltaX)
+        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,
+        }
 
-      if (this.handle.includes('r')) {
-        right = restrictToBounds(
-          mouseClickPosition.right - deltaX,
-          bounds.minRight,
-          bounds.maxRight
+        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
         )
-      } else if (this.handle.includes('l')) {
+
         left = restrictToBounds(
           mouseClickPosition.left - deltaX,
           bounds.minLeft,
           bounds.maxLeft
         )
-      }
 
-      const width = computeWidth(left, right)
+        right = restrictToBounds(
+          mouseClickPosition.right - deltaX,
+          bounds.minRight,
+          bounds.maxRight
+        )
 
-      if (this.onResize(this.handle, left, width, this.height) === false) {
-        return
-      }
+        this.left = left
+        this.right = right
 
-      this.left = left
-      this.right = right
-      this.width = width
+        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
 
-      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)
-        })
-      }
+        const tmpDeltaX =
+          mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX)
 
-      if (this.dragging) {
-        this.dragging = false
-        this.$emit('dragStop', {
-          min: this.roundToNearestStep(this.left),
-          max: this.roundToNearestStep(this.right)
-        })
-      }
+        if (!this.widthTouched && tmpDeltaX) {
+          this.widthTouched = true
+        }
 
-      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 []
+        const deltaX = snapToGrid(
+          this.parentWidth / this.subStepCount,
+          tmpDeltaX
+        )
 
-      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'
+        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
+          )
         }
-      }
 
-      return this.width + 'px'
-    },
-    computedHeight() {
-      if (this.height === 'auto') {
-        if (!this.heightTouched) {
-          return 'auto'
+        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),
+          })
         }
-      }
 
-      return this.height + 'px'
-    }
-  },
+        if (this.dragging) {
+          this.dragging = false
+          this.$emit('dragStop', {
+            min: this.roundToNearestStep(this.left),
+            max: this.roundToNearestStep(this.right),
+          })
+        }
 
-  watch: {
-    active(val) {
-      this.enabled = val
+        removeEvent(document.documentElement, eventsFor.move, this.handleResize)
+      },
+      roundToNearestStep(value) {
+        const val = value / this.pxPerStep
 
-      if (val) {
-        this.$emit('activated')
-      } else {
-        this.$emit('deactivated')
-      }
+        const int = 1.0 / this.step
+        return (Math.round(val * int) / int).toFixed(2)
+      },
     },
-    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;
-}
+  .vdr {
+    touch-action: none;
+    position: absolute;
+    box-sizing: border-box;
+    border: 1px dashed black;
+  }
 </style>