@onereach/ui-components 8.2.1-beta.3645.0 → 8.3.0

package/dist/bundled/v2/components/OrRangeSliderV3/OrRangeSlider.js

@@ -88,40 +88,40 @@ var script = defineComponent({
       }
     });
     const railBoundingBox = useElementBounding(rail);
+    const selectedControl = ref();
     // Handlers
-    function onDragFrom(position, event) {
+    function onDrag(position, event) {
       if (props.disabled) {
         return;
       }
       const totalWidth = railBoundingBox.width.value;
       const totalHeight = railBoundingBox.height.value;
-      internalModelValueFrom.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
-    }
-    function onDragTo(position, event) {
-      if (props.disabled) {
-        return;
+      if (selectedControl.value === 'from') {
+        internalModelValueFrom.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
+      } else {
+        internalModelValueTo.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
       }
-      const totalWidth = railBoundingBox.width.value;
-      const totalHeight = railBoundingBox.height.value;
-      internalModelValueTo.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
     }
     // Effects
     const isHovering = useElementHover(rail);
     const {
-      isDragging: isDraggingFrom
+      isDragging
     } = useDraggable(rail, {
-      handle: thumbFrom,
-      onStart: onDragFrom,
-      onMove: onDragFrom,
-      onEnd: onDragFrom
-    });
-    const {
-      isDragging: isDraggingTo
-    } = useDraggable(rail, {
-      handle: thumbTo,
-      onStart: onDragTo,
-      onMove: onDragTo,
-      onEnd: onDragTo
+      onStart: (position, event) => {
+        switch (event.target) {
+          case thumbFrom.value:
+            selectedControl.value = 'from';
+            break;
+          case thumbTo.value:
+            selectedControl.value = 'to';
+            break;
+          default:
+            selectedControl.value = selectedControl.value === 'from' ? 'to' : 'from';
+        }
+        onDrag(position, event);
+      },
+      onMove: onDrag,
+      onEnd: onDrag
     });
     return {
       root,
@@ -140,9 +140,9 @@ var script = defineComponent({
       proxyModelValue,
       internalModelValueFrom,
       internalModelValueTo,
+      selectedControl,
       isHovering,
-      isDraggingFrom,
-      isDraggingTo
+      isDragging
     };
   }
 });
@@ -176,7 +176,7 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrTooltip', {
     class: ['relative', 'z-10'],
     attrs: {
-      "is-open": _vm.isHovering || _vm.isDraggingFrom,
+      "is-open": _vm.isHovering || _vm.isDragging,
       "content": String(_vm.proxyModelValue[0]),
       "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
       "offset": 8,
@@ -197,7 +197,7 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrTooltip', {
     class: ['relative', 'z-10'],
     attrs: {
-      "is-open": _vm.isHovering || _vm.isDraggingTo,
+      "is-open": _vm.isHovering || _vm.isDragging,
       "content": String(_vm.proxyModelValue[1]),
       "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
       "offset": 8,

package/dist/bundled/v2/components/OrRangeSliderV3/OrRangeSlider.vue.d.ts

@@ -21,9 +21,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
     internalModelValueFrom: import("@vue/composition-api").WritableComputedRef<number>;
     internalModelValueTo: import("@vue/composition-api").WritableComputedRef<number>;
+    selectedControl: import("@vue/composition-api").Ref<"from" | "to" | undefined>;
     isHovering: import("@vue/composition-api").Ref<boolean>;
-    isDraggingFrom: import("@vue/composition-api").ComputedRef<boolean>;
-    isDraggingTo: import("@vue/composition-api").ComputedRef<boolean>;
+    isDragging: import("@vue/composition-api").ComputedRef<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: PropType<[number, number]>;
@@ -113,9 +113,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
     internalModelValueFrom: import("@vue/composition-api").WritableComputedRef<number>;
     internalModelValueTo: import("@vue/composition-api").WritableComputedRef<number>;
+    selectedControl: import("@vue/composition-api").Ref<"from" | "to" | undefined>;
     isHovering: import("@vue/composition-api").Ref<boolean>;
-    isDraggingFrom: import("@vue/composition-api").ComputedRef<boolean>;
-    isDraggingTo: import("@vue/composition-api").ComputedRef<boolean>;
+    isDragging: import("@vue/composition-api").ComputedRef<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: [number, number];
     minValue: number;

package/dist/bundled/v3/{OrRangeSlider.vue_vue_type_script_lang-1cf46751.js → OrRangeSlider.vue_vue_type_script_lang-3ca2a3e9.js}

@@ -88,40 +88,40 @@ var script = defineComponent({
       }
     });
     const railBoundingBox = useElementBounding(rail);
+    const selectedControl = ref();
     // Handlers
-    function onDragFrom(position, event) {
+    function onDrag(position, event) {
       if (props.disabled) {
         return;
       }
       const totalWidth = railBoundingBox.width.value;
       const totalHeight = railBoundingBox.height.value;
-      internalModelValueFrom.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
-    }
-    function onDragTo(position, event) {
-      if (props.disabled) {
-        return;
+      if (selectedControl.value === 'from') {
+        internalModelValueFrom.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
+      } else {
+        internalModelValueTo.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
       }
-      const totalWidth = railBoundingBox.width.value;
-      const totalHeight = railBoundingBox.height.value;
-      internalModelValueTo.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
     }
     // Effects
     const isHovering = useElementHover(rail);
     const {
-      isDragging: isDraggingFrom
+      isDragging
     } = useDraggable(rail, {
-      handle: thumbFrom,
-      onStart: onDragFrom,
-      onMove: onDragFrom,
-      onEnd: onDragFrom
-    });
-    const {
-      isDragging: isDraggingTo
-    } = useDraggable(rail, {
-      handle: thumbTo,
-      onStart: onDragTo,
-      onMove: onDragTo,
-      onEnd: onDragTo
+      onStart: (position, event) => {
+        switch (event.target) {
+          case thumbFrom.value:
+            selectedControl.value = 'from';
+            break;
+          case thumbTo.value:
+            selectedControl.value = 'to';
+            break;
+          default:
+            selectedControl.value = selectedControl.value === 'from' ? 'to' : 'from';
+        }
+        onDrag(position, event);
+      },
+      onMove: onDrag,
+      onEnd: onDrag
     });
     return {
       root,
@@ -140,9 +140,9 @@ var script = defineComponent({
       proxyModelValue,
       internalModelValueFrom,
       internalModelValueTo,
+      selectedControl,
       isHovering,
-      isDraggingFrom,
-      isDraggingTo
+      isDragging
     };
   }
 });

package/dist/bundled/v3/components/OrRangeSliderV3/OrRangeSlider.js

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrRangeSlider.vue_vue_type_script_lang-1cf46751.js';
-export { s as default } from '../../OrRangeSlider.vue_vue_type_script_lang-1cf46751.js';
+import { s as script } from '../../OrRangeSlider.vue_vue_type_script_lang-3ca2a3e9.js';
+export { s as default } from '../../OrRangeSlider.vue_vue_type_script_lang-3ca2a3e9.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, withCtx, toDisplayString } from 'vue';
 
 const _hoisted_1 = ["disabled"];
@@ -28,7 +28,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: _ctx.disabled
   }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_3), createVNode(_component_OrTooltip, {
     class: normalizeClass(['relative', 'z-10']),
-    "is-open": _ctx.isHovering || _ctx.isDraggingFrom,
+    "is-open": _ctx.isHovering || _ctx.isDragging,
     content: String(_ctx.proxyModelValue[0]),
     placement: _ctx.orientation === 'horizontal' ? 'top' : 'right',
     offset: 8,
@@ -46,7 +46,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: _ctx.disabled
   }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_5), createVNode(_component_OrTooltip, {
     class: normalizeClass(['relative', 'z-10']),
-    "is-open": _ctx.isHovering || _ctx.isDraggingTo,
+    "is-open": _ctx.isHovering || _ctx.isDragging,
     content: String(_ctx.proxyModelValue[1]),
     placement: _ctx.orientation === 'horizontal' ? 'top' : 'right',
     offset: 8,

package/dist/bundled/v3/components/OrRangeSliderV3/OrRangeSlider.vue.d.ts

@@ -50,9 +50,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
     internalModelValueFrom: import("vue-demi").WritableComputedRef<number>;
     internalModelValueTo: import("vue-demi").WritableComputedRef<number>;
+    selectedControl: import("vue-demi").Ref<"from" | "to" | undefined>;
     isHovering: import("vue-demi").Ref<boolean>;
-    isDraggingFrom: import("vue-demi").ComputedRef<boolean>;
-    isDraggingTo: import("vue-demi").ComputedRef<boolean>;
+    isDragging: import("vue-demi").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: PropType<[number, number]>;

package/dist/bundled/v3/components/OrRangeSliderV3/index.js

@@ -1,2 +1,2 @@
-export { s as OrRangeSliderV3 } from '../../OrRangeSlider.vue_vue_type_script_lang-1cf46751.js';
+export { s as OrRangeSliderV3 } from '../../OrRangeSlider.vue_vue_type_script_lang-3ca2a3e9.js';
 export { SliderColor as RangeSliderColor, SliderOrientation as RangeSliderOrientation } from '../OrSliderV3/props.js';

package/dist/bundled/v3/components/index.js

@@ -130,7 +130,7 @@ export { s as OrRadio } from '../OrRadio.vue_vue_type_script_lang-a4f043e9.js';
 export { s as OrRadioGroup } from '../OrRadioGroup.vue_vue_type_script_lang-75b6c81b.js';
 export { s as OrRadioGroupV3 } from '../OrRadioGroup.vue_vue_type_script_lang-8fad9a5f.js';
 export { s as OrRadioV3 } from '../OrRadio.vue_vue_type_script_lang-750ce51f.js';
-export { s as OrRangeSliderV3 } from '../OrRangeSlider.vue_vue_type_script_lang-1cf46751.js';
+export { s as OrRangeSliderV3 } from '../OrRangeSlider.vue_vue_type_script_lang-3ca2a3e9.js';
 export { SliderColor as RangeSliderColor, SliderOrientation as RangeSliderOrientation, SliderColor, SliderOrientation } from './OrSliderV3/props.js';
 export { s as OrResizeablePanelV3 } from '../OrResizeablePanel.vue_vue_type_script_lang-9bbd20fa.js';
 export { ResizeablePanelPadding, ResizeablePanelPlacement, ResizeablePanelPadding as SidebarPadding } from './OrResizeablePanelV3/props.js';

package/dist/bundled/v3/index.js

@@ -80,7 +80,7 @@ export { s as OrRadioGroup } from './OrRadioGroup.vue_vue_type_script_lang-75b6c
 import './components/OrRadioGroupV3/OrRadioGroup.js';
 export { s as OrRadioGroupV3 } from './OrRadioGroup.vue_vue_type_script_lang-8fad9a5f.js';
 import './components/OrRangeSliderV3/OrRangeSlider.js';
-export { s as OrRangeSliderV3 } from './OrRangeSlider.vue_vue_type_script_lang-1cf46751.js';
+export { s as OrRangeSliderV3 } from './OrRangeSlider.vue_vue_type_script_lang-3ca2a3e9.js';
 import './components/OrRichTextEditorV3/OrRichTextEditor.js';
 export { s as OrRichTextEditorV3 } from './OrRichTextEditor.vue_vue_type_script_lang-bf036571.js';
 import './components/OrSegmentedControlV3/OrSegmentedControl.js';

package/dist/esm/v2/{OrRangeSlider-37a8921e.js → OrRangeSlider-5b939e85.js}

@@ -184,40 +184,40 @@ var script = defineComponent({
       }
     });
     const railBoundingBox = useElementBounding(rail);
+    const selectedControl = ref();
     // Handlers
-    function onDragFrom(position, event) {
+    function onDrag(position, event) {
       if (props.disabled) {
         return;
       }
       const totalWidth = railBoundingBox.width.value;
       const totalHeight = railBoundingBox.height.value;
-      internalModelValueFrom.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
-    }
-    function onDragTo(position, event) {
-      if (props.disabled) {
-        return;
+      if (selectedControl.value === 'from') {
+        internalModelValueFrom.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
+      } else {
+        internalModelValueTo.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
       }
-      const totalWidth = railBoundingBox.width.value;
-      const totalHeight = railBoundingBox.height.value;
-      internalModelValueTo.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
     }
     // Effects
     const isHovering = useElementHover(rail);
     const {
-      isDragging: isDraggingFrom
+      isDragging
     } = useDraggable(rail, {
-      handle: thumbFrom,
-      onStart: onDragFrom,
-      onMove: onDragFrom,
-      onEnd: onDragFrom
-    });
-    const {
-      isDragging: isDraggingTo
-    } = useDraggable(rail, {
-      handle: thumbTo,
-      onStart: onDragTo,
-      onMove: onDragTo,
-      onEnd: onDragTo
+      onStart: (position, event) => {
+        switch (event.target) {
+          case thumbFrom.value:
+            selectedControl.value = 'from';
+            break;
+          case thumbTo.value:
+            selectedControl.value = 'to';
+            break;
+          default:
+            selectedControl.value = selectedControl.value === 'from' ? 'to' : 'from';
+        }
+        onDrag(position, event);
+      },
+      onMove: onDrag,
+      onEnd: onDrag
     });
     return {
       root,
@@ -236,9 +236,9 @@ var script = defineComponent({
       proxyModelValue,
       internalModelValueFrom,
       internalModelValueTo,
+      selectedControl,
       isHovering,
-      isDraggingFrom,
-      isDraggingTo
+      isDragging
     };
   }
 });
@@ -272,7 +272,7 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrTooltip', {
     class: ['relative', 'z-10'],
     attrs: {
-      "is-open": _vm.isHovering || _vm.isDraggingFrom,
+      "is-open": _vm.isHovering || _vm.isDragging,
       "content": String(_vm.proxyModelValue[0]),
       "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
       "offset": 8,
@@ -293,7 +293,7 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrTooltip', {
     class: ['relative', 'z-10'],
     attrs: {
-      "is-open": _vm.isHovering || _vm.isDraggingTo,
+      "is-open": _vm.isHovering || _vm.isDragging,
       "content": String(_vm.proxyModelValue[1]),
       "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
       "offset": 8,

package/dist/esm/v2/components/index.js

@@ -90,7 +90,7 @@ export { _ as OrRadio } from '../OrRadio-811ad5a4.js';
 export { _ as OrRadioGroup } from '../OrRadioGroup-11424644.js';
 export { _ as OrRadioGroupV3 } from '../OrRadioGroup-c0ad9bf3.js';
 export { _ as OrRadioV3 } from '../OrRadio-81a1263e.js';
-export { _ as OrRangeSliderV3 } from '../OrRangeSlider-37a8921e.js';
+export { _ as OrRangeSliderV3 } from '../OrRangeSlider-5b939e85.js';
 export { _ as OrSliderV3 } from '../OrSlider-f33d3b38.js';
 export { S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from '../OrSlider.vue_rollup-plugin-vue_script-cb6c48c1.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from '../OrResizeablePanel-0888f196.js';

package/dist/esm/v2/components/or-range-slider-v3/OrRangeSlider.vue.d.ts

@@ -21,9 +21,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
     internalModelValueFrom: import("@vue/composition-api").WritableComputedRef<number>;
     internalModelValueTo: import("@vue/composition-api").WritableComputedRef<number>;
+    selectedControl: import("@vue/composition-api").Ref<"from" | "to" | undefined>;
     isHovering: import("@vue/composition-api").Ref<boolean>;
-    isDraggingFrom: import("@vue/composition-api").ComputedRef<boolean>;
-    isDraggingTo: import("@vue/composition-api").ComputedRef<boolean>;
+    isDragging: import("@vue/composition-api").ComputedRef<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: PropType<[number, number]>;
@@ -113,9 +113,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
     internalModelValueFrom: import("@vue/composition-api").WritableComputedRef<number>;
     internalModelValueTo: import("@vue/composition-api").WritableComputedRef<number>;
+    selectedControl: import("@vue/composition-api").Ref<"from" | "to" | undefined>;
     isHovering: import("@vue/composition-api").Ref<boolean>;
-    isDraggingFrom: import("@vue/composition-api").ComputedRef<boolean>;
-    isDraggingTo: import("@vue/composition-api").ComputedRef<boolean>;
+    isDragging: import("@vue/composition-api").ComputedRef<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: [number, number];
     minValue: number;

package/dist/esm/v2/components/or-range-slider-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrRangeSliderV3 } from '../../OrRangeSlider-37a8921e.js';
+export { _ as OrRangeSliderV3 } from '../../OrRangeSlider-5b939e85.js';
 export { S as RangeSliderColor, a as RangeSliderOrientation } from '../../OrSlider.vue_rollup-plugin-vue_script-cb6c48c1.js';
 import '@vueuse/core';
 import 'vue-demi';

package/dist/esm/v2/index.js

@@ -90,7 +90,7 @@ export { _ as OrRadio } from './OrRadio-811ad5a4.js';
 export { _ as OrRadioGroup } from './OrRadioGroup-11424644.js';
 export { _ as OrRadioGroupV3 } from './OrRadioGroup-c0ad9bf3.js';
 export { _ as OrRadioV3 } from './OrRadio-81a1263e.js';
-export { _ as OrRangeSliderV3 } from './OrRangeSlider-37a8921e.js';
+export { _ as OrRangeSliderV3 } from './OrRangeSlider-5b939e85.js';
 export { _ as OrSliderV3 } from './OrSlider-f33d3b38.js';
 export { S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider.vue_rollup-plugin-vue_script-cb6c48c1.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-0888f196.js';

package/dist/esm/v3/{OrRangeSlider-bac56cd9.js → OrRangeSlider-07ddbed1.js}

@@ -184,40 +184,40 @@ var script = defineComponent({
       }
     });
     const railBoundingBox = useElementBounding(rail);
+    const selectedControl = ref();
     // Handlers
-    function onDragFrom(position, event) {
+    function onDrag(position, event) {
       if (props.disabled) {
         return;
       }
       const totalWidth = railBoundingBox.width.value;
       const totalHeight = railBoundingBox.height.value;
-      internalModelValueFrom.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
-    }
-    function onDragTo(position, event) {
-      if (props.disabled) {
-        return;
+      if (selectedControl.value === 'from') {
+        internalModelValueFrom.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
+      } else {
+        internalModelValueTo.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
       }
-      const totalWidth = railBoundingBox.width.value;
-      const totalHeight = railBoundingBox.height.value;
-      internalModelValueTo.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
     }
     // Effects
     const isHovering = useElementHover(rail);
     const {
-      isDragging: isDraggingFrom
+      isDragging
     } = useDraggable(rail, {
-      handle: thumbFrom,
-      onStart: onDragFrom,
-      onMove: onDragFrom,
-      onEnd: onDragFrom
-    });
-    const {
-      isDragging: isDraggingTo
-    } = useDraggable(rail, {
-      handle: thumbTo,
-      onStart: onDragTo,
-      onMove: onDragTo,
-      onEnd: onDragTo
+      onStart: (position, event) => {
+        switch (event.target) {
+          case thumbFrom.value:
+            selectedControl.value = 'from';
+            break;
+          case thumbTo.value:
+            selectedControl.value = 'to';
+            break;
+          default:
+            selectedControl.value = selectedControl.value === 'from' ? 'to' : 'from';
+        }
+        onDrag(position, event);
+      },
+      onMove: onDrag,
+      onEnd: onDrag
     });
     return {
       root,
@@ -236,9 +236,9 @@ var script = defineComponent({
       proxyModelValue,
       internalModelValueFrom,
       internalModelValueTo,
+      selectedControl,
       isHovering,
-      isDraggingFrom,
-      isDraggingTo
+      isDragging
     };
   }
 });
@@ -269,7 +269,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: _ctx.disabled
   }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_3), createVNode(_component_OrTooltip, {
     class: normalizeClass(['relative', 'z-10']),
-    "is-open": _ctx.isHovering || _ctx.isDraggingFrom,
+    "is-open": _ctx.isHovering || _ctx.isDragging,
     content: String(_ctx.proxyModelValue[0]),
     placement: _ctx.orientation === 'horizontal' ? 'top' : 'right',
     offset: 8,
@@ -287,7 +287,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: _ctx.disabled
   }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_5), createVNode(_component_OrTooltip, {
     class: normalizeClass(['relative', 'z-10']),
-    "is-open": _ctx.isHovering || _ctx.isDraggingTo,
+    "is-open": _ctx.isHovering || _ctx.isDragging,
     content: String(_ctx.proxyModelValue[1]),
     placement: _ctx.orientation === 'horizontal' ? 'top' : 'right',
     offset: 8,

package/dist/esm/v3/components/index.js

@@ -88,7 +88,7 @@ export { s as OrRadio } from '../OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from '../OrRadioGroup-00785e41.js';
 export { s as OrRadioGroupV3 } from '../OrRadioGroup-b4b6d364.js';
 export { s as OrRadioV3 } from '../OrRadio-50b0ead5.js';
-export { s as OrRangeSliderV3 } from '../OrRangeSlider-bac56cd9.js';
+export { s as OrRangeSliderV3 } from '../OrRangeSlider-07ddbed1.js';
 export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from '../OrSlider-f932d1c4.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from '../OrResizeablePanel-5dfd3f6d.js';
 export { F as Formats, s as OrRichTextEditorV3 } from '../OrRichTextEditor-24040de1.js';

package/dist/esm/v3/components/or-range-slider-v3/OrRangeSlider.vue.d.ts

@@ -50,9 +50,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
     internalModelValueFrom: import("vue-demi").WritableComputedRef<number>;
     internalModelValueTo: import("vue-demi").WritableComputedRef<number>;
+    selectedControl: import("vue-demi").Ref<"from" | "to" | undefined>;
     isHovering: import("vue-demi").Ref<boolean>;
-    isDraggingFrom: import("vue-demi").ComputedRef<boolean>;
-    isDraggingTo: import("vue-demi").ComputedRef<boolean>;
+    isDragging: import("vue-demi").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: PropType<[number, number]>;

package/dist/esm/v3/components/or-range-slider-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrRangeSliderV3 } from '../../OrRangeSlider-bac56cd9.js';
+export { s as OrRangeSliderV3 } from '../../OrRangeSlider-07ddbed1.js';
 export { S as RangeSliderColor, a as RangeSliderOrientation } from '../../OrSlider-f932d1c4.js';
 import '@vueuse/core';
 import 'vue-demi';

package/dist/esm/v3/index.js

@@ -88,7 +88,7 @@ export { s as OrRadio } from './OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioGroupV3 } from './OrRadioGroup-b4b6d364.js';
 export { s as OrRadioV3 } from './OrRadio-50b0ead5.js';
-export { s as OrRangeSliderV3 } from './OrRangeSlider-bac56cd9.js';
+export { s as OrRangeSliderV3 } from './OrRangeSlider-07ddbed1.js';
 export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider-f932d1c4.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-5dfd3f6d.js';
 export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-24040de1.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.2.1-beta.3645.0",
+  "version": "8.3.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -175,5 +175,6 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "gitHead": "6c038407431f826d6e14fea7f14fe6c1ea94ce90"
 }

package/src/components/or-range-slider-v3/OrRangeSlider.vue

@@ -17,7 +17,7 @@
 
       <OrTooltip
         :class="['relative', 'z-10']"
-        :is-open="isHovering || isDraggingFrom"
+        :is-open="isHovering || isDragging"
         :content="String(proxyModelValue[0])"
         :placement="orientation === 'horizontal' ? 'top' : 'right'"
         :offset="8"
@@ -38,7 +38,7 @@
 
       <OrTooltip
         :class="['relative', 'z-10']"
-        :is-open="isHovering || isDraggingTo"
+        :is-open="isHovering || isDragging"
         :content="String(proxyModelValue[1])"
         :placement="orientation === 'horizontal' ? 'top' : 'right'"
         :offset="8"
@@ -213,8 +213,10 @@ export default defineComponent({
 
     const railBoundingBox = useElementBounding(rail);
 
+    const selectedControl = ref<'from' | 'to'>();
+
     // Handlers
-    function onDragFrom(position: Position, event: MouseEvent | PointerEvent): void {
+    function onDrag(position: Position, event: MouseEvent | PointerEvent): void {
       if (props.disabled) {
         return;
       }
@@ -222,41 +224,40 @@ export default defineComponent({
       const totalWidth = railBoundingBox.width.value;
       const totalHeight = railBoundingBox.height.value;
 
-      internalModelValueFrom.value = props.orientation === RangeSliderOrientation.Horizontal
-        ? clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth
-        : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
-    }
-
-    function onDragTo(position: Position, event: MouseEvent | PointerEvent): void {
-      if (props.disabled) {
-        return;
+      if (selectedControl.value === 'from') {
+        internalModelValueFrom.value = props.orientation === RangeSliderOrientation.Horizontal
+          ? clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth
+          : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
+      } else {
+        internalModelValueTo.value = props.orientation === RangeSliderOrientation.Horizontal
+          ? clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth
+          : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
       }
-
-      const totalWidth = railBoundingBox.width.value;
-      const totalHeight = railBoundingBox.height.value;
-
-      internalModelValueTo.value = props.orientation === RangeSliderOrientation.Horizontal
-        ? clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth
-        : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
     }
 
     // Effects
     const isHovering = useElementHover(rail);
 
-    const { isDragging: isDraggingFrom } = useDraggable(rail, {
-      handle: thumbFrom,
+    const { isDragging } = useDraggable(rail, {
+      onStart: (position, event) => {
+        switch (event.target) {
+          case thumbFrom.value:
+            selectedControl.value = 'from';
+            break;
 
-      onStart: onDragFrom,
-      onMove: onDragFrom,
-      onEnd: onDragFrom,
-    });
+          case thumbTo.value:
+            selectedControl.value = 'to';
+            break;
+
+          default:
+            selectedControl.value = selectedControl.value === 'from' ? 'to' : 'from';
+        }
 
-    const { isDragging: isDraggingTo } = useDraggable(rail, {
-      handle: thumbTo,
+        onDrag(position, event);
+      },
 
-      onStart: onDragTo,
-      onMove: onDragTo,
-      onEnd: onDragTo,
+      onMove: onDrag,
+      onEnd: onDrag,
     });
 
     return {
@@ -277,10 +278,10 @@ export default defineComponent({
       proxyModelValue,
       internalModelValueFrom,
       internalModelValueTo,
+      selectedControl,
 
       isHovering,
-      isDraggingFrom,
-      isDraggingTo,
+      isDragging,
     };
   },
 });