@onereach/ui-components 8.2.0 → 8.2.1-beta.3640.0

package/dist/bundled/v2/components/OrBottomSheetV3/OrBottomSheet.js

@@ -1,4 +1,4 @@
-import { o as onClickOutside } from '../../index-a77d7adf.js';
+import { o as onClickOutside } from '../../index-f29777b6.js';
 import { defineComponent, ref, toRefs, computed, watch } from 'vue-demi';
 import useBottomSheetSwipeState from './hooks/useBottomSheetSwipeState.js';
 import { BottomSheetVariant } from './props.js';

package/dist/bundled/v2/components/OrBottomSheetV3/hooks/useBottomSheetSwipeState.js

@@ -1,5 +1,5 @@
 import { ref, computed, unref } from 'vue-demi';
-import { n as usePointerSwipe, S as SwipeDirection } from '../../../index-a77d7adf.js';
+import { n as usePointerSwipe, S as SwipeDirection } from '../../../index-f29777b6.js';
 import { BottomSheetVariant } from '../props.js';
 import { useTheme } from '../../../hooks/useTheme.js';
 

package/dist/bundled/v2/components/OrCheckboxTreeV3/OrCheckboxTree.js

@@ -4,7 +4,7 @@ import { extractChildrenValues } from './utils/extractChildrenValues.js';
 import __vue_component__$1 from '../OrIconV3/OrIcon.js';
 import __vue_component__$2 from '../OrCheckboxV3/OrCheckbox.js';
 import __vue_component__$3 from '../OrButtonV3/OrButton.js';
-import { u as useToggle } from '../../index-210a7ab2.js';
+import { u as useToggle } from '../../index-39fe2838.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 

package/dist/bundled/v2/components/OrCode/OrCode.js

@@ -1,6 +1,6 @@
 import { E as EditorView, a as EditorState, k as keymap } from '../../index-10711eb4.js';
 import { b as basicSetup, i as indentWithTab } from '../../index-f1a845c3.js';
-import { u as useElementHover } from '../../index-a77d7adf.js';
+import { u as useElementHover } from '../../index-f29777b6.js';
 import { defineComponent, ref } from 'vue-demi';
 import __vue_component__$3 from '../OrTeleport/OrTeleport.js';
 import { OrCodeLanguages } from './constants.js';

package/dist/bundled/v2/components/OrColorPicker/OrColorPicker.js

@@ -1,10 +1,10 @@
 import Palette from './constants.js';
 import { defineComponent, ref } from 'vue-demi';
-import { o as onClickOutside } from '../../index-a77d7adf.js';
+import { o as onClickOutside } from '../../index-f29777b6.js';
 import defaultPalette from './utils/defultPalette.js';
 import __vue_component__$1 from '../OrFloating/OrFloating.js';
 import { OrFloatingPlacements } from '../OrFloating/constants.js';
-import { u as useToggle } from '../../index-210a7ab2.js';
+import { u as useToggle } from '../../index-39fe2838.js';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 

package/dist/bundled/v2/components/OrConfirm/OrConfirm.js

@@ -1,12 +1,12 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { a as useMagicKeys, b as useActiveElement } from '../../index-a77d7adf.js';
-import { l as logicAnd } from '../../index-bd1d316d.js';
+import { a as useMagicKeys, b as useActiveElement } from '../../index-f29777b6.js';
+import { l as logicAnd } from '../../index-adc8aac4.js';
 import __vue_component__$1 from '../OrButtonV2/OrButton.js';
 import __vue_component__$2 from '../OrModal/OrModal.js';
 import __vue_component__$3 from '../OrInput/OrInput.js';
 import { BUTTON_COLOR } from '../OrButtonV2/constants.js';
 import { OrModalSizes } from '../OrModal/constants.js';
-import { w as whenever } from '../../index-210a7ab2.js';
+import { w as whenever } from '../../index-39fe2838.js';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 

package/dist/bundled/v2/components/OrConfirmV3/OrConfirm.js

@@ -1,5 +1,5 @@
-import { a as useMagicKeys, o as onClickOutside } from '../../index-a77d7adf.js';
-import { l as logicAnd } from '../../index-bd1d316d.js';
+import { a as useMagicKeys, o as onClickOutside } from '../../index-f29777b6.js';
+import { l as logicAnd } from '../../index-adc8aac4.js';
 import { defineComponent, ref, toRef, computed, watch } from 'vue-demi';
 import { ConfirmType } from './props.js';
 import { Confirm, ConfirmHeader, ConfirmInput, ConfirmFooter, ConfirmFooterTypes, ConfirmFooterButtons } from './styles.js';
@@ -8,7 +8,7 @@ import __vue_component__$2 from '../OrButtonV3/OrButton.js';
 import __vue_component__$3 from '../OrInputV3/OrInput.js';
 import { ButtonColor } from '../OrButtonV3/props.js';
 import { usePopoverState } from '../../hooks/usePopoverState.js';
-import { w as whenever } from '../../index-210a7ab2.js';
+import { w as whenever } from '../../index-39fe2838.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
 var script = defineComponent({

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
 import { DatePicker, DatePickerPopover } from './styles.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-12085f90.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-eccc1549.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-a9664055.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-72397f4c.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
 import __vue_component__$3 from '../OrIconV3/OrIcon.js';

package/dist/bundled/v2/components/OrDateRangePickerV3/OrDateRangePicker.js

@@ -8,8 +8,8 @@ import __vue_component__$5 from '../OrInputBoxV3/OrInputBox.js';
 import __vue_component__$6 from '../OrLabelV3/OrLabel.js';
 import __vue_component__$7 from '../OrPopoverV3/OrPopover.js';
 import { getNextMonthDate } from '../OrDateTimePickerV3/utils/getNextMonthDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-12085f90.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-eccc1549.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-a9664055.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-72397f4c.js';
 import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';

package/dist/bundled/v2/components/OrDateTimePicker/OrDateTimePicker.js

@@ -2,7 +2,7 @@ import { _ as _baseToString, t as toString_1 } from '../../toString-b6e4472a.js'
 import { _ as _baseProperty } from '../../_baseProperty-a52739e9.js';
 import { t as toInteger_1 } from '../../toInteger-9fa0151c.js';
 import { defineComponent, ref, getCurrentInstance } from 'vue-demi';
-import { o as onClickOutside } from '../../index-a77d7adf.js';
+import { o as onClickOutside } from '../../index-f29777b6.js';
 import { o as setStyle, r as requestAF, u as getCS, b as reflow, c as cancelAF } from '../../dom-cec392f3.js';
 import { pxToRem } from '../../utils/functions/px-to-rem.js';
 import { OrDateTimePickerItemTypes, OrDateTimePickerTypes, DEFAULT_TEXT } from './constants.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-12085f90.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-eccc1549.js';
-import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-9e43a0fd.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-a9664055.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-72397f4c.js';
+import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-c59105c1.js';
 import { DateTimePickerTimeFormat } from './props.js';
 import { DateTimePicker, DateTimePickerDatePopover, DateTimePickerTimePopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/index.js

@@ -1,7 +1,7 @@
 export { default as OrDateTimePickerV3 } from './OrDateTimePicker.js';
-export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-12085f90.js';
-export { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-eccc1549.js';
-export { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-9e43a0fd.js';
+export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-a9664055.js';
+export { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-72397f4c.js';
+export { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-c59105c1.js';
 export { DateTimePickerTimeFormat } from './props.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
 export { formatDate } from './utils/formatDate.js';

package/dist/bundled/v2/components/OrInlineTextEdit/OrInlineTextEdit.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, getCurrentInstance } from 'vue-demi';
 import { InlineTextEditTypes, InlineTextEditTrimmingTypes } from './constants.js';
-import { c as useVModel } from '../../index-a77d7adf.js';
+import { c as useVModel } from '../../index-f29777b6.js';
 import { o as setStyle, r as requestAF, u as getCS, b as reflow, c as cancelAF } from '../../dom-cec392f3.js';
 import { pxToRem } from '../../utils/functions/px-to-rem.js';
 import __vue_component__$1 from '../OrCollapse/OrCollapse.js';

package/dist/bundled/v2/components/OrListV3/OrList.js

@@ -1,2 +1,2 @@
-export { _ as default } from '../../OrList-307e390d.js';
+export { _ as default } from '../../OrList-e889a448.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/v2/components/OrListV3/index.js

@@ -1 +1 @@
-export { O as OrListItem, _ as OrListV3 } from '../../OrList-307e390d.js';
+export { O as OrListItem, _ as OrListV3 } from '../../OrList-e889a448.js';

package/dist/bundled/v2/components/OrLoaderV3/OrLoader.js

@@ -1,4 +1,4 @@
-import { h as useElementSize } from '../../index-a77d7adf.js';
+import { h as useElementSize } from '../../index-f29777b6.js';
 import { defineComponent, ref, computed } from 'vue-demi';
 import { LoaderVariant, LoaderColor, LoaderSize } from './props.js';
 import { LoaderRoot, LoaderRootColors, LoaderTitle, LoaderDescription, LoaderContainer } from './styles.js';

package/dist/bundled/v2/components/OrModal/OrModal.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, watch, onBeforeUnmount } from 'vue-demi';
 import { OrModalSizes } from './constants.js';
-import { o as onClickOutside } from '../../index-a77d7adf.js';
-import { u as useFocusTrap } from '../../useFocusTrap-dad25115.js';
+import { o as onClickOutside } from '../../index-f29777b6.js';
+import { u as useFocusTrap } from '../../useFocusTrap-1bc572f0.js';
 import __vue_component__$1 from '../OrIconButtonV2/OrIconButton.js';
 import __vue_component__$2 from '../OrOverlay/OrOverlay.js';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';

package/dist/bundled/v2/components/OrOverflowMenu/OrOverflowMenu.js

@@ -1,12 +1,12 @@
 import { defineComponent, ref } from 'vue-demi';
-import { o as onClickOutside } from '../../index-a77d7adf.js';
+import { o as onClickOutside } from '../../index-f29777b6.js';
 import __vue_component__$2 from '../OrButtonV2/OrButton.js';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import __vue_component__$3 from '../OrIconButtonV2/OrIconButton.js';
 import __vue_component__$4 from '../OrFloating/OrFloating.js';
 import { OrFloatingPlacements } from '../OrFloating/constants.js';
-import { u as useToggle } from '../../index-210a7ab2.js';
+import { u as useToggle } from '../../index-39fe2838.js';
 
 var script$1 = defineComponent({
   name: 'OrOverflowMenuItem',

package/dist/bundled/v2/components/OrOverlayV3/OrOverlay.js

@@ -1,4 +1,4 @@
-import { i as useScrollLock } from '../../index-a77d7adf.js';
+import { i as useScrollLock } from '../../index-f29777b6.js';
 import { defineComponent, ref, computed } from 'vue-demi';
 import { Overlay } from './styles.js';
 import __vue_component__$1 from '../OrTeleportV3/OrTeleport.js';

package/dist/bundled/v2/components/OrPassword/OrPassword.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref } from 'vue-demi';
-import { c as useVModel } from '../../index-a77d7adf.js';
+import { c as useVModel } from '../../index-f29777b6.js';
 import __vue_component__$1 from '../OrInput/OrInput.js';
 import __vue_component__$2 from '../OrIconButtonV2/OrIconButton.js';
 import useToggle from '../../hooks/useToggle.js';

package/dist/bundled/v2/components/OrPopoverV3/OrPopover.js

@@ -1,5 +1,5 @@
 import { o as offset, s as shift, f as flip, h as hide, b as size, a as autoUpdate } from '../../floating-ui.dom-d9ef0d1f.js';
-import { o as onClickOutside } from '../../index-a77d7adf.js';
+import { o as onClickOutside } from '../../index-f29777b6.js';
 import { defineComponent, ref, computed, toRefs, toRef } from 'vue-demi';
 import { useFloating } from './hooks/useFloating.js';
 import { PopoverVariant, PopoverPlacement } from './props.js';

package/dist/bundled/v2/components/OrProgressV3/OrProgress.js

@@ -1,4 +1,4 @@
-import { d as useElementBounding } from '../../index-a77d7adf.js';
+import { d as useElementBounding } from '../../index-f29777b6.js';
 import { r as round_1 } from '../../round-567ede34.js';
 import { defineComponent, ref, useSlots, computed } from 'vue-demi';
 import { ProgressType, ProgressColor } from './props.js';

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

@@ -0,0 +1,245 @@
+import { d as useElementBounding, e as useDraggable } from '../../index-f29777b6.js';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import { RangeSlider, RangeSliderOrientations, RangeSliderRail, RangeSliderRailOrientations, RangeSliderOffset, RangeSliderOffsetOrientations, RangeSliderTrack, RangeSliderTrackColors, RangeSliderThumb, RangeSliderThumbColors, RangeSliderLabel, RangeSliderLabelOrientations, RangeSliderLabelMark } from './styles.js';
+import __vue_component__$1 from '../OrTooltipV3/OrTooltip.js';
+import { SliderColor, SliderOrientation } from '../OrSliderV3/props.js';
+import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
+import { c as clamp } from '../../index-39fe2838.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+
+var script = defineComponent({
+  components: {
+    OrTooltip: __vue_component__$1
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      default: undefined
+    },
+    minValue: {
+      type: Number,
+      default: 0
+    },
+    maxValue: {
+      type: Number,
+      default: 100
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    color: {
+      type: String,
+      default: SliderColor.Primary
+    },
+    orientation: {
+      type: String,
+      default: SliderOrientation.Horizontal
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    const rail = ref();
+    const thumbFrom = ref();
+    const thumbTo = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-range-slider-v3', ...RangeSlider, ...RangeSliderOrientations[props.orientation]]);
+    const railStyles = computed(() => [...RangeSliderRail, ...RangeSliderRailOrientations[props.orientation]]);
+    const offsetStyles = computed(() => [...RangeSliderOffset, ...RangeSliderOffsetOrientations[props.orientation]]);
+    const offsetComputedStyles = computed(() => ({
+      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${internalModelValueFrom.value * 100}%`
+    }));
+    const trackStyles = computed(() => [...RangeSliderTrack, ...RangeSliderTrackColors[props.color]]);
+    const trackComputedStyles = computed(() => ({
+      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${(internalModelValueTo.value - internalModelValueFrom.value) * 100}%`
+    }));
+    const thumbStyles = computed(() => [...RangeSliderThumb, ...RangeSliderThumbColors[props.color]]);
+    const labelStyles = computed(() => [...RangeSliderLabel, ...RangeSliderLabelOrientations[props.orientation]]);
+    const labelMarkStyles = computed(() => [...RangeSliderLabelMark]);
+    // State
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const internalModelValueFrom = computed({
+      get: () => {
+        if (!proxyModelValue.value) {
+          return props.minValue;
+        }
+        return (proxyModelValue.value[0] - props.minValue) / (props.maxValue - props.minValue);
+      },
+      set: value => {
+        proxyModelValue.value = [Math.round(value * (props.maxValue - props.minValue) + props.minValue), Math.round(internalModelValueTo.value * (props.maxValue - props.minValue) + props.minValue)];
+      }
+    });
+    const internalModelValueTo = computed({
+      get: () => {
+        if (!proxyModelValue.value) {
+          return props.maxValue;
+        }
+        return (proxyModelValue.value[1] - props.minValue) / (props.maxValue - props.minValue);
+      },
+      set: value => {
+        proxyModelValue.value = [Math.round(internalModelValueFrom.value * (props.maxValue - props.minValue) + props.minValue), Math.round(value * (props.maxValue - props.minValue) + props.minValue)];
+      }
+    });
+    const railBoundingBox = useElementBounding(rail);
+    // Handlers
+    function onDragFrom(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;
+      }
+      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 {
+      isDragging: isDraggingFrom
+    } = useDraggable(rail, {
+      handle: thumbFrom,
+      onStart: onDragFrom,
+      onMove: onDragFrom,
+      onEnd: onDragFrom
+    });
+    const {
+      isDragging: isDraggingTo
+    } = useDraggable(rail, {
+      handle: thumbTo,
+      onStart: onDragTo,
+      onMove: onDragTo,
+      onEnd: onDragTo
+    });
+    return {
+      root,
+      rail,
+      thumbFrom,
+      thumbTo,
+      rootStyles,
+      railStyles,
+      offsetStyles,
+      offsetComputedStyles,
+      trackStyles,
+      trackComputedStyles,
+      thumbStyles,
+      labelStyles,
+      labelMarkStyles,
+      proxyModelValue,
+      internalModelValueFrom,
+      internalModelValueTo,
+      isDraggingFrom,
+      isDraggingTo
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_c('div', {
+    ref: "rail",
+    class: _vm.railStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_c('div', {
+    class: _vm.offsetStyles,
+    style: _vm.offsetComputedStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }), _vm._v(" "), _c('OrTooltip', {
+    class: ['relative', 'z-1'],
+    attrs: {
+      "is-open": _vm.isDraggingFrom,
+      "content": _vm.proxyModelValue && String(_vm.proxyModelValue[0]),
+      "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
+      "offset": 8,
+      "external-control": true
+    }
+  }, [_c('div', {
+    ref: "thumbFrom",
+    class: _vm.thumbStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  })]), _vm._v(" "), _c('div', {
+    class: _vm.trackStyles,
+    style: _vm.trackComputedStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }), _vm._v(" "), _c('OrTooltip', {
+    class: ['relative', 'z-1'],
+    attrs: {
+      "is-open": _vm.isDraggingTo,
+      "content": _vm.proxyModelValue && String(_vm.proxyModelValue[1]),
+      "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
+      "offset": 8,
+      "external-control": true
+    }
+  }, [_c('div', {
+    ref: "thumbTo",
+    class: _vm.thumbStyles,
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  })])], 1), _vm._v(" "), _c('div', {
+    class: _vm.labelStyles
+  }, [_c('div', {
+    class: _vm.labelMarkStyles
+  }, [_vm._v("\n      " + _vm._s(_vm.minValue) + "\n    ")]), _vm._v(" "), _c('div', {
+    class: ['grow']
+  }), _vm._v(" "), _c('div', {
+    class: _vm.labelMarkStyles
+  }, [_vm._v("\n      " + _vm._s(_vm.maxValue) + "\n    ")])])]);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { __vue_component__ as default };

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

@@ -0,0 +1,136 @@
+import { PropType } from 'vue-demi';
+import { RangeSliderColor, RangeSliderOrientation } from './props';
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rail: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    thumbFrom: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    thumbTo: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    railStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    offsetStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    offsetComputedStyles: import("@vue/composition-api").ComputedRef<{
+        [x: string]: string;
+    }>;
+    trackStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    trackComputedStyles: import("@vue/composition-api").ComputedRef<{
+        [x: string]: string;
+    }>;
+    thumbStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    labelStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    labelMarkStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
+    internalModelValueFrom: import("@vue/composition-api").WritableComputedRef<number>;
+    internalModelValueTo: import("@vue/composition-api").WritableComputedRef<number>;
+    isDraggingFrom: import("@vue/composition-api").ComputedRef<boolean>;
+    isDraggingTo: import("@vue/composition-api").ComputedRef<boolean>;
+}> & import("@vue/composition-api").Data, {}, {}, {
+    modelValue: {
+        type: PropType<[number, number]>;
+        default: undefined;
+    };
+    minValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: PropType<"primary" | "secondary">;
+        default: RangeSliderColor;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: RangeSliderOrientation;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, import("@vue/composition-api").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<[number, number]>;
+        default: undefined;
+    };
+    minValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: PropType<"primary" | "secondary">;
+        default: RangeSliderColor;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: RangeSliderOrientation;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    modelValue: [number, number];
+    minValue: number;
+    maxValue: number;
+    step: number;
+    color: "primary" | "secondary";
+    orientation: "horizontal" | "vertical";
+    disabled: boolean;
+} & {} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rail: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    thumbFrom: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    thumbTo: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    railStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    offsetStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    offsetComputedStyles: import("@vue/composition-api").ComputedRef<{
+        [x: string]: string;
+    }>;
+    trackStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    trackComputedStyles: import("@vue/composition-api").ComputedRef<{
+        [x: string]: string;
+    }>;
+    thumbStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    labelStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    labelMarkStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[number, number]>;
+    internalModelValueFrom: import("@vue/composition-api").WritableComputedRef<number>;
+    internalModelValueTo: import("@vue/composition-api").WritableComputedRef<number>;
+    isDraggingFrom: import("@vue/composition-api").ComputedRef<boolean>;
+    isDraggingTo: import("@vue/composition-api").ComputedRef<boolean>;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
+    modelValue: [number, number];
+    minValue: number;
+    maxValue: number;
+    step: number;
+    color: "primary" | "secondary";
+    orientation: "horizontal" | "vertical";
+    disabled: boolean;
+} & {} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: [number, number];
+    minValue: number;
+    maxValue: number;
+    step: number;
+    color: "primary" | "secondary";
+    orientation: "horizontal" | "vertical";
+    disabled: boolean;
+}, true>);
+export default _default;

package/dist/bundled/v2/components/OrRangeSliderV3/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OrRangeSliderV3 } from './OrRangeSlider.vue';
+export * from './props';

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

@@ -0,0 +1,2 @@
+export { default as OrRangeSliderV3 } from './OrRangeSlider.js';
+export { SliderColor as RangeSliderColor, SliderOrientation as RangeSliderOrientation } from '../OrSliderV3/props.js';

package/dist/bundled/v2/components/OrRangeSliderV3/props.d.ts

@@ -0,0 +1 @@
+export { SliderColor as RangeSliderColor, SliderOrientation as RangeSliderOrientation } from '../or-slider-v3';

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

@@ -0,0 +1 @@
+export { SliderColor as RangeSliderColor, SliderOrientation as RangeSliderOrientation } from '../OrSliderV3/props.js';

package/dist/bundled/v2/components/OrRangeSliderV3/styles.d.ts

@@ -0,0 +1,14 @@
+import { RangeSliderColor, RangeSliderOrientation } from './props';
+export declare const RangeSlider: string[];
+export declare const RangeSliderOrientations: Record<RangeSliderOrientation, string[]>;
+export declare const RangeSliderRail: string[];
+export declare const RangeSliderRailOrientations: Record<RangeSliderOrientation, string[]>;
+export declare const RangeSliderOffset: string[];
+export declare const RangeSliderOffsetOrientations: Record<RangeSliderOrientation, string[]>;
+export declare const RangeSliderTrack: string[];
+export declare const RangeSliderTrackColors: Record<RangeSliderColor, string[]>;
+export declare const RangeSliderThumb: string[];
+export declare const RangeSliderThumbColors: Record<RangeSliderColor, string[]>;
+export declare const RangeSliderLabel: string[];
+export declare const RangeSliderLabelOrientations: Record<RangeSliderOrientation, string[]>;
+export declare const RangeSliderLabelMark: string[];