@onereach/ui-components 8.19.5-beta.3998.0 → 8.19.5

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

@@ -18,19 +18,19 @@ var script = defineComponent({
   props: {
     modelValue: {
       type: Object,
-      default: () => undefined
+      default: undefined
     },
     minValue: {
       type: Number,
-      default: () => 0
+      default: 0
     },
     maxValue: {
       type: Number,
-      default: () => 100
+      default: 100
     },
     step: {
       type: Number,
-      default: () => 1
+      default: 1
     },
     breakpoints: {
       type: Array,
@@ -46,7 +46,7 @@ var script = defineComponent({
     },
     disabled: {
       type: Boolean,
-      default: () => false
+      default: false
     }
   },
   emits: ['update:modelValue'],
@@ -64,35 +64,13 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-range-slider-v3', ...RangeSlider, ...RangeSliderOrientations[props.orientation]]);
     const railStyles = computed(() => ['or-range-slider-rail-v3', ...RangeSliderRail, ...RangeSliderRailOrientations[props.orientation]]);
     const offsetStyles = computed(() => [...RangeSliderOffset, ...RangeSliderOffsetOrientations[props.orientation]]);
-    const offsetComputedStyles = computed(() => {
-      switch (props.orientation) {
-        case SliderOrientation.Horizontal:
-        case SliderOrientation.HorizontalReversed:
-          return {
-            width: `${internalModelValueFrom.value * 100}%`
-          };
-        case SliderOrientation.Vertical:
-        case SliderOrientation.VerticalReversed:
-          return {
-            height: `${internalModelValueFrom.value * 100}%`
-          };
-      }
-    });
+    const offsetComputedStyles = computed(() => ({
+      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${internalModelValueFrom.value * 100}%`
+    }));
     const trackStyles = computed(() => [...RangeSliderTrack, ...RangeSliderTrackColors[props.color]]);
-    const trackComputedStyles = computed(() => {
-      switch (props.orientation) {
-        case SliderOrientation.Horizontal:
-        case SliderOrientation.HorizontalReversed:
-          return {
-            width: `${(internalModelValueTo.value - internalModelValueFrom.value) * 100}%`
-          };
-        case SliderOrientation.Vertical:
-        case SliderOrientation.VerticalReversed:
-          return {
-            height: `${(internalModelValueTo.value - internalModelValueFrom.value) * 100}%`
-          };
-      }
-    });
+    const trackComputedStyles = computed(() => ({
+      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${(internalModelValueTo.value - internalModelValueFrom.value) * 100}%`
+    }));
     const thumbStyles = computed(() => ['or-range-slider-thumb-v3', ...RangeSliderThumb, ...RangeSliderThumbColors[props.color]]);
     const breakpointMarkStyles = computed(() => [...RangeSliderBreakpointMark, ...RangeSliderBreakpointMarkColors[props.color]]);
     const labelStyles = computed(() => [...RangeSliderLabel, ...RangeSliderLabelOrientations[props.orientation]]);
@@ -103,66 +81,24 @@ var script = defineComponent({
     });
     const internalModelValueFrom = computed({
       get: () => {
-        let modelValue = 0;
-        switch (props.orientation) {
-          case SliderOrientation.Horizontal:
-          case SliderOrientation.Vertical:
-            modelValue = proxyModelValue.value[0];
-            break;
-          case SliderOrientation.HorizontalReversed:
-          case SliderOrientation.VerticalReversed:
-            modelValue = proxyModelValue.value[1];
-            break;
-        }
-        return (modelValue - props.minValue) / (props.maxValue - props.minValue);
+        return (proxyModelValue.value[0] - props.minValue) / (props.maxValue - props.minValue);
       },
       set: value => {
         const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
-        const draftProxyModelValue = [internalBreakpoints.value.reduce((a, b) => {
+        proxyModelValue.value = [internalBreakpoints.value.reduce((a, b) => {
           return Math.abs(a - modelValue) < Math.abs(b - modelValue) ? a : b;
         }), internalModelValueTo.value * (props.maxValue - props.minValue) + props.minValue];
-        switch (props.orientation) {
-          case SliderOrientation.Horizontal:
-          case SliderOrientation.Vertical:
-            proxyModelValue.value = draftProxyModelValue;
-            break;
-          case SliderOrientation.HorizontalReversed:
-          case SliderOrientation.VerticalReversed:
-            proxyModelValue.value = draftProxyModelValue.reverse();
-            break;
-        }
       }
     });
     const internalModelValueTo = computed({
       get: () => {
-        let modelValue = 0;
-        switch (props.orientation) {
-          case SliderOrientation.Horizontal:
-          case SliderOrientation.Vertical:
-            modelValue = proxyModelValue.value[1];
-            break;
-          case SliderOrientation.HorizontalReversed:
-          case SliderOrientation.VerticalReversed:
-            modelValue = proxyModelValue.value[0];
-            break;
-        }
-        return (modelValue - props.minValue) / (props.maxValue - props.minValue);
+        return (proxyModelValue.value[1] - props.minValue) / (props.maxValue - props.minValue);
       },
       set: value => {
         const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
-        const draftProxyModelValue = [internalModelValueFrom.value * (props.maxValue - props.minValue) + props.minValue, internalBreakpoints.value.reduce((a, b) => {
+        proxyModelValue.value = [internalModelValueFrom.value * (props.maxValue - props.minValue) + props.minValue, internalBreakpoints.value.reduce((a, b) => {
           return Math.abs(a - modelValue) < Math.abs(b - modelValue) ? a : b;
         })];
-        switch (props.orientation) {
-          case SliderOrientation.Horizontal:
-          case SliderOrientation.Vertical:
-            proxyModelValue.value = draftProxyModelValue;
-            break;
-          case SliderOrientation.HorizontalReversed:
-          case SliderOrientation.VerticalReversed:
-            proxyModelValue.value = draftProxyModelValue.reverse();
-            break;
-        }
       }
     });
     const internalBreakpoints = computed(() => {
@@ -172,16 +108,6 @@ var script = defineComponent({
       return Array(Math.ceil(Math.abs(props.maxValue - props.minValue) / props.step)).fill(null).map((value, index) => Math.floor((props.minValue + props.step * index) * 1000) / 1000).concat(...props.breakpoints, props.maxValue).sort((a, b) => a - b);
     });
     const railBoundingBox = useElementBounding(rail);
-    const tooltipPlacement = computed(() => {
-      switch (props.orientation) {
-        case SliderOrientation.Horizontal:
-        case SliderOrientation.HorizontalReversed:
-          return 'top';
-        case SliderOrientation.Vertical:
-        case SliderOrientation.VerticalReversed:
-          return 'right';
-      }
-    });
     const selectedControl = ref();
     // Handlers
     function onDrag(position, event) {
@@ -191,59 +117,12 @@ var script = defineComponent({
       const totalWidth = railBoundingBox.width.value;
       const totalHeight = railBoundingBox.height.value;
       if (selectedControl.value === 'from') {
-        switch (props.orientation) {
-          case SliderOrientation.Horizontal:
-            internalModelValueFrom.value = clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth;
-            break;
-          case SliderOrientation.HorizontalReversed:
-            internalModelValueFrom.value = clamp(railBoundingBox.right.value - event.clientX, 0, internalModelValueTo.value * totalWidth) / totalWidth;
-            break;
-          case SliderOrientation.Vertical:
-            internalModelValueFrom.value = clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
-            break;
-          case SliderOrientation.VerticalReversed:
-            internalModelValueFrom.value = clamp(totalHeight - (railBoundingBox.bottom.value - event.clientY), 0, internalModelValueTo.value * totalHeight) / totalHeight;
-            break;
-        }
+        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 {
-        switch (props.orientation) {
-          case SliderOrientation.Horizontal:
-            internalModelValueTo.value = clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth;
-            break;
-          case SliderOrientation.HorizontalReversed:
-            internalModelValueTo.value = clamp(railBoundingBox.right.value - event.clientX, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth;
-            break;
-          case SliderOrientation.Vertical:
-            internalModelValueTo.value = clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
-            break;
-          case SliderOrientation.VerticalReversed:
-            internalModelValueTo.value = clamp(totalHeight - (railBoundingBox.bottom.value - event.clientY), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
-            break;
-        }
+        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;
       }
     }
     // Methods
-    function getBreakpointMarkComputedStyles(breakpoint) {
-      switch (props.orientation) {
-        case SliderOrientation.Horizontal:
-          return {
-            left: `${getBreakpointOffset(breakpoint) * 100}%`
-          };
-        case SliderOrientation.HorizontalReversed:
-          return {
-            right: `${getBreakpointOffset(breakpoint) * 100}%`
-          };
-        case SliderOrientation.Vertical:
-          return {
-            bottom: `${getBreakpointOffset(breakpoint) * 100}%`
-          };
-        case SliderOrientation.VerticalReversed:
-          return {
-            top: `${getBreakpointOffset(breakpoint) * 100}%`
-          };
-      }
-    }
-    // Helpers
     function getBreakpointOffset(breakpoint) {
       return (breakpoint - props.minValue) / (props.maxValue - props.minValue);
     }
@@ -309,9 +188,8 @@ var script = defineComponent({
       labelStyles,
       labelMarkStyles,
       proxyModelValue,
-      tooltipPlacement,
       selectedControl,
-      getBreakpointMarkComputedStyles,
+      getBreakpointOffset,
       isHoveringOffset,
       isHoveringTrack,
       isHoveringFiller,
@@ -354,8 +232,8 @@ var __vue_render__ = function () {
     class: ['relative', 'z-10'],
     attrs: {
       "is-open": !_vm.isDragging && (_vm.isHoveringRail || _vm.isHoveringThumbFrom) || _vm.isDragging && _vm.selectedControl === 'from',
-      "content": String(_vm.proxyModelValue[_vm.orientation.endsWith('-reversed') ? 1 : 0]),
-      "placement": _vm.tooltipPlacement,
+      "content": String(_vm.proxyModelValue[0]),
+      "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
       "offset": 24,
       "external-control": true
     }
@@ -376,8 +254,8 @@ var __vue_render__ = function () {
     class: ['relative', 'z-10'],
     attrs: {
       "is-open": !_vm.isDragging && (_vm.isHoveringRail || _vm.isHoveringThumbTo) || _vm.isDragging && _vm.selectedControl === 'to',
-      "content": String(_vm.proxyModelValue[_vm.orientation.endsWith('-reversed') ? 0 : 1]),
-      "placement": _vm.tooltipPlacement,
+      "content": String(_vm.proxyModelValue[1]),
+      "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
       "offset": 24,
       "external-control": true
     }
@@ -394,12 +272,13 @@ var __vue_render__ = function () {
       "disabled": _vm.disabled
     }
   }), _vm._v(" "), _vm._l(_vm.breakpoints, function (breakpoint) {
+    var _obj;
     return _c('div', {
       key: breakpoint,
       class: _vm.breakpointMarkStyles,
-      style: _vm.getBreakpointMarkComputedStyles(breakpoint),
+      style: (_obj = {}, _obj[_vm.orientation === 'horizontal' ? 'left' : 'bottom'] = _vm.getBreakpointOffset(breakpoint) * 100 + "%", _obj),
       attrs: {
-        "activated": breakpoint >= _vm.proxyModelValue[_vm.orientation.endsWith('-reversed') ? 1 : 0] && breakpoint <= _vm.proxyModelValue[_vm.orientation.endsWith('-reversed') ? 0 : 1],
+        "activated": breakpoint >= _vm.proxyModelValue[0] && breakpoint <= _vm.proxyModelValue[1],
         "disabled": _vm.disabled
       }
     });

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

@@ -12,28 +12,19 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     railStyles: import("@vue/composition-api").ComputedRef<string[]>;
     offsetStyles: import("@vue/composition-api").ComputedRef<string[]>;
     offsetComputedStyles: import("@vue/composition-api").ComputedRef<{
-        width: string;
-        height?: undefined;
-    } | {
-        height: string;
-        width?: undefined;
-    } | undefined>;
+        [x: string]: string;
+    }>;
     trackStyles: import("@vue/composition-api").ComputedRef<string[]>;
     trackComputedStyles: import("@vue/composition-api").ComputedRef<{
-        width: string;
-        height?: undefined;
-    } | {
-        height: string;
-        width?: undefined;
-    } | undefined>;
+        [x: string]: string;
+    }>;
     thumbStyles: import("@vue/composition-api").ComputedRef<string[]>;
     breakpointMarkStyles: 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]>;
-    tooltipPlacement: import("@vue/composition-api").ComputedRef<"top" | "right" | undefined>;
     selectedControl: import("@vue/composition-api").Ref<"from" | "to" | undefined>;
-    getBreakpointMarkComputedStyles: (breakpoint: number) => Partial<CSSStyleDeclaration> | undefined;
+    getBreakpointOffset: (breakpoint: number) => number;
     isHoveringOffset: import("@vue/composition-api").Ref<boolean>;
     isHoveringTrack: import("@vue/composition-api").Ref<boolean>;
     isHoveringFiller: import("@vue/composition-api").Ref<boolean>;
@@ -44,19 +35,19 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: PropType<[number, number]>;
-        default: () => undefined;
+        default: undefined;
     };
     minValue: {
         type: NumberConstructor;
-        default: () => 0;
+        default: number;
     };
     maxValue: {
         type: NumberConstructor;
-        default: () => 100;
+        default: number;
     };
     step: {
         type: NumberConstructor;
-        default: () => 1;
+        default: number;
     };
     breakpoints: {
         type: PropType<number[]>;
@@ -67,29 +58,29 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: () => RangeSliderColor.Primary;
     };
     orientation: {
-        type: PropType<"horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed">;
+        type: PropType<"horizontal" | "vertical">;
         default: () => RangeSliderOrientation.Horizontal;
     };
     disabled: {
         type: BooleanConstructor;
-        default: () => false;
+        default: boolean;
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: PropType<[number, number]>;
-        default: () => undefined;
+        default: undefined;
     };
     minValue: {
         type: NumberConstructor;
-        default: () => 0;
+        default: number;
     };
     maxValue: {
         type: NumberConstructor;
-        default: () => 100;
+        default: number;
     };
     step: {
         type: NumberConstructor;
-        default: () => 1;
+        default: number;
     };
     breakpoints: {
         type: PropType<number[]>;
@@ -100,12 +91,12 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: () => RangeSliderColor.Primary;
     };
     orientation: {
-        type: PropType<"horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed">;
+        type: PropType<"horizontal" | "vertical">;
         default: () => RangeSliderOrientation.Horizontal;
     };
     disabled: {
         type: BooleanConstructor;
-        default: () => false;
+        default: boolean;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: [number, number];
@@ -114,7 +105,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     step: number;
     breakpoints: number[];
     color: "primary" | "secondary";
-    orientation: "horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed";
+    orientation: "horizontal" | "vertical";
     disabled: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -130,28 +121,19 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     railStyles: import("@vue/composition-api").ComputedRef<string[]>;
     offsetStyles: import("@vue/composition-api").ComputedRef<string[]>;
     offsetComputedStyles: import("@vue/composition-api").ComputedRef<{
-        width: string;
-        height?: undefined;
-    } | {
-        height: string;
-        width?: undefined;
-    } | undefined>;
+        [x: string]: string;
+    }>;
     trackStyles: import("@vue/composition-api").ComputedRef<string[]>;
     trackComputedStyles: import("@vue/composition-api").ComputedRef<{
-        width: string;
-        height?: undefined;
-    } | {
-        height: string;
-        width?: undefined;
-    } | undefined>;
+        [x: string]: string;
+    }>;
     thumbStyles: import("@vue/composition-api").ComputedRef<string[]>;
     breakpointMarkStyles: 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]>;
-    tooltipPlacement: import("@vue/composition-api").ComputedRef<"top" | "right" | undefined>;
     selectedControl: import("@vue/composition-api").Ref<"from" | "to" | undefined>;
-    getBreakpointMarkComputedStyles: (breakpoint: number) => Partial<CSSStyleDeclaration> | undefined;
+    getBreakpointOffset: (breakpoint: number) => number;
     isHoveringOffset: import("@vue/composition-api").Ref<boolean>;
     isHoveringTrack: import("@vue/composition-api").Ref<boolean>;
     isHoveringFiller: import("@vue/composition-api").Ref<boolean>;
@@ -166,7 +148,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     step: number;
     breakpoints: number[];
     color: "primary" | "secondary";
-    orientation: "horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed";
+    orientation: "horizontal" | "vertical";
     disabled: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -177,7 +159,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     step: number;
     breakpoints: number[];
     color: "primary" | "secondary";
-    orientation: "horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed";
+    orientation: "horizontal" | "vertical";
     disabled: boolean;
 }, true>);
 export default _default;

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

@@ -9,20 +9,10 @@ const RangeSliderOrientations = {
   'layout-column',
   // Box
   'w-full'],
-  [SliderOrientation.HorizontalReversed]: [
-  // Layout
-  'layout-column',
-  // Box
-  'w-full'],
   [SliderOrientation.Vertical]: [
   // Layout
   'layout-row',
   // Box
-  'h-full'],
-  [SliderOrientation.VerticalReversed]: [
-  // Layout
-  'layout-row',
-  // Box
   'h-full']
 };
 const RangeSliderRail = [
@@ -42,26 +32,12 @@ const RangeSliderRailOrientations = {
   'w-full', 'h-xs',
   // Spacing
   'mx-0', 'my-md+'],
-  [SliderOrientation.HorizontalReversed]: [
-  // Layout
-  'layout-row-reverse',
-  // Box
-  'w-full', 'h-xs',
-  // Spacing
-  'mx-0', 'my-md+'],
   [SliderOrientation.Vertical]: [
   // Layout
   'layout-column-reverse items-center',
   // Box
   'w-xs', 'h-full',
   // Spacing
-  'mx-md+', 'my-0'],
-  [SliderOrientation.VerticalReversed]: [
-  // Layout
-  'layout-column items-center',
-  // Box
-  'w-xs', 'h-full',
-  // Spacing
   'mx-md+', 'my-0']
 };
 const RangeSliderOffset = [];
@@ -69,14 +45,8 @@ const RangeSliderOffsetOrientations = {
   [SliderOrientation.Horizontal]: [
   // Box
   'h-full'],
-  [SliderOrientation.HorizontalReversed]: [
-  // Box
-  'h-full'],
   [SliderOrientation.Vertical]: [
   // Box
-  'w-full'],
-  [SliderOrientation.VerticalReversed]: [
-  // Box
   'w-full']
 };
 const RangeSliderTrack = [
@@ -151,20 +121,10 @@ const RangeSliderLabelOrientations = {
   'layout-row',
   // Box
   'w-full'],
-  [SliderOrientation.HorizontalReversed]: [
-  // Layout
-  'layout-row-reverse',
-  // Box
-  'w-full'],
   [SliderOrientation.Vertical]: [
   // Layout
   'layout-column-reverse items-center',
   // Box
-  'h-full'],
-  [SliderOrientation.VerticalReversed]: [
-  // Layout
-  'layout-column items-center',
-  // Box
   'h-full']
 };
 const RangeSliderLabelMark = [

package/dist/bundled/v2/components/OrSliderV3/OrSlider.js

@@ -18,19 +18,19 @@ var script = defineComponent({
   props: {
     modelValue: {
       type: Number,
-      default: () => undefined
+      default: undefined
     },
     minValue: {
       type: Number,
-      default: () => 0
+      default: 0
     },
     maxValue: {
       type: Number,
-      default: () => 100
+      default: 100
     },
     step: {
       type: Number,
-      default: () => 1
+      default: 1
     },
     breakpoints: {
       type: Array,
@@ -46,7 +46,7 @@ var script = defineComponent({
     },
     disabled: {
       type: Boolean,
-      default: () => false
+      default: false
     }
   },
   emits: ['update:modelValue'],
@@ -60,20 +60,9 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-slider-v3', ...Slider, ...SliderOrientations[props.orientation]]);
     const railStyles = computed(() => ['or-slider-rail-v3', ...SliderRail, ...SliderRailOrientations[props.orientation]]);
     const trackStyles = computed(() => [...SliderTrack, ...SliderTrackColors[props.color]]);
-    const trackComputedStyles = computed(() => {
-      switch (props.orientation) {
-        case SliderOrientation.Horizontal:
-        case SliderOrientation.HorizontalReversed:
-          return {
-            width: `${internalModelValue.value * 100}%`
-          };
-        case SliderOrientation.Vertical:
-        case SliderOrientation.VerticalReversed:
-          return {
-            height: `${internalModelValue.value * 100}%`
-          };
-      }
-    });
+    const trackComputedStyles = computed(() => ({
+      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${internalModelValue.value * 100}%`
+    }));
     const thumbStyles = computed(() => ['or-slider-thumb-v3', ...SliderThumb, ...SliderThumbColors[props.color]]);
     const breakpointMarkStyles = computed(() => [...SliderBreakpointMark, ...SliderBreakpointMarkColors[props.color]]);
     const labelStyles = computed(() => [...SliderLabel, ...SliderLabelOrientations[props.orientation]]);
@@ -100,16 +89,6 @@ var script = defineComponent({
       return Array(Math.ceil(Math.abs(props.maxValue - props.minValue) / props.step)).fill(null).map((value, index) => Math.floor((props.minValue + props.step * index) * 1000) / 1000).concat(...props.breakpoints, props.maxValue).sort((a, b) => a - b);
     });
     const railBoundingBox = useElementBounding(rail);
-    const tooltipPlacement = computed(() => {
-      switch (props.orientation) {
-        case SliderOrientation.Horizontal:
-        case SliderOrientation.HorizontalReversed:
-          return 'top';
-        case SliderOrientation.Vertical:
-        case SliderOrientation.VerticalReversed:
-          return 'right';
-      }
-    });
     // Handlers
     function onDrag(position, event) {
       if (props.disabled) {
@@ -117,43 +96,9 @@ var script = defineComponent({
       }
       const totalWidth = railBoundingBox.width.value;
       const totalHeight = railBoundingBox.height.value;
-      switch (props.orientation) {
-        case SliderOrientation.Horizontal:
-          internalModelValue.value = clamp(event.clientX - railBoundingBox.left.value, 0, totalWidth) / totalWidth;
-          break;
-        case SliderOrientation.HorizontalReversed:
-          internalModelValue.value = clamp(railBoundingBox.right.value - event.clientX, 0, totalWidth) / totalWidth;
-          break;
-        case SliderOrientation.Vertical:
-          internalModelValue.value = clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, totalHeight) / totalHeight;
-          break;
-        case SliderOrientation.VerticalReversed:
-          internalModelValue.value = clamp(totalHeight - (railBoundingBox.bottom.value - event.clientY), 0, totalHeight) / totalHeight;
-          break;
-      }
+      internalModelValue.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, 0, totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, totalHeight) / totalHeight;
     }
     // Methods
-    function getBreakpointMarkComputedStyles(breakpoint) {
-      switch (props.orientation) {
-        case SliderOrientation.Horizontal:
-          return {
-            left: `${getBreakpointOffset(breakpoint) * 100}%`
-          };
-        case SliderOrientation.HorizontalReversed:
-          return {
-            right: `${getBreakpointOffset(breakpoint) * 100}%`
-          };
-        case SliderOrientation.Vertical:
-          return {
-            bottom: `${getBreakpointOffset(breakpoint) * 100}%`
-          };
-        case SliderOrientation.VerticalReversed:
-          return {
-            top: `${getBreakpointOffset(breakpoint) * 100}%`
-          };
-      }
-    }
-    // Helpers
     function getBreakpointOffset(breakpoint) {
       return (breakpoint - props.minValue) / (props.maxValue - props.minValue);
     }
@@ -194,8 +139,7 @@ var script = defineComponent({
       labelStyles,
       labelMarkStyles,
       proxyModelValue,
-      tooltipPlacement,
-      getBreakpointMarkComputedStyles,
+      getBreakpointOffset,
       isHovering,
       isDragging
     };
@@ -233,7 +177,7 @@ var __vue_render__ = function () {
     attrs: {
       "is-open": _vm.isHovering || _vm.isDragging,
       "content": String(_vm.proxyModelValue),
-      "placement": _vm.tooltipPlacement,
+      "placement": _vm.orientation === 'horizontal' ? 'top' : 'right',
       "offset": 24,
       "external-control": true
     }
@@ -244,10 +188,11 @@ var __vue_render__ = function () {
       "disabled": _vm.disabled
     }
   })]), _vm._v(" "), _vm._l(_vm.breakpoints, function (breakpoint) {
+    var _obj;
     return _c('div', {
       key: breakpoint,
       class: _vm.breakpointMarkStyles,
-      style: _vm.getBreakpointMarkComputedStyles(breakpoint),
+      style: (_obj = {}, _obj[_vm.orientation === 'horizontal' ? 'left' : 'bottom'] = _vm.getBreakpointOffset(breakpoint) * 100 + "%", _obj),
       attrs: {
         "activated": breakpoint <= _vm.proxyModelValue,
         "disabled": _vm.disabled