@onereach/ui-components 8.19.5 → 8.20.0

package/dist/bundled/v3/components/{OrRangeSliderV3-f8024c15.js → OrRangeSliderV3-fac9697f.js}

@@ -1,4 +1,4 @@
-import { a as SliderOrientation, S as SliderColor } from './OrSliderV3-b69331d1.js';
+import { a as SliderOrientation, S as SliderColor } from './OrSliderV3-6d75304d.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, withCtx, Fragment, renderList, toDisplayString } from 'vue';
 import { h as useElementBounding, a as useElementHover, i as useDraggable, j as clamp } from './OrBottomSheetV3-66815f6f.js';
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
@@ -14,10 +14,20 @@ 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 = [
@@ -37,12 +47,26 @@ 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 = [];
@@ -50,8 +74,14 @@ const RangeSliderOffsetOrientations = {
   [SliderOrientation.Horizontal]: [
   // Box
   'h-full'],
+  [SliderOrientation.HorizontalReversed]: [
+  // Box
+  'h-full'],
   [SliderOrientation.Vertical]: [
   // Box
+  'w-full'],
+  [SliderOrientation.VerticalReversed]: [
+  // Box
   'w-full']
 };
 const RangeSliderTrack = [
@@ -126,10 +156,20 @@ 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 = [
@@ -149,19 +189,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,
@@ -177,7 +217,7 @@ var script = defineComponent({
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: () => false
     }
   },
   emits: ['update:modelValue'],
@@ -195,13 +235,35 @@ 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(() => ({
-      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${internalModelValueFrom.value * 100}%`
-    }));
+    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 trackStyles = computed(() => [...RangeSliderTrack, ...RangeSliderTrackColors[props.color]]);
-    const trackComputedStyles = computed(() => ({
-      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${(internalModelValueTo.value - internalModelValueFrom.value) * 100}%`
-    }));
+    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 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]]);
@@ -212,24 +274,66 @@ var script = defineComponent({
     });
     const internalModelValueFrom = computed({
       get: () => {
-        return (proxyModelValue.value[0] - props.minValue) / (props.maxValue - props.minValue);
+        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);
       },
       set: value => {
         const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
-        proxyModelValue.value = [internalBreakpoints.value.reduce((a, b) => {
+        const draftProxyModelValue = [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: () => {
-        return (proxyModelValue.value[1] - props.minValue) / (props.maxValue - props.minValue);
+        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);
       },
       set: value => {
         const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
-        proxyModelValue.value = [internalModelValueFrom.value * (props.maxValue - props.minValue) + props.minValue, internalBreakpoints.value.reduce((a, b) => {
+        const draftProxyModelValue = [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(() => {
@@ -239,6 +343,16 @@ 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) {
@@ -248,12 +362,59 @@ var script = defineComponent({
       const totalWidth = railBoundingBox.width.value;
       const totalHeight = railBoundingBox.height.value;
       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;
+        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;
+        }
       } 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;
+        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;
+        }
       }
     }
     // 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);
     }
@@ -319,8 +480,9 @@ var script = defineComponent({
       labelStyles,
       labelMarkStyles,
       proxyModelValue,
+      tooltipPlacement,
       selectedControl,
-      getBreakpointOffset,
+      getBreakpointMarkComputedStyles,
       isHoveringOffset,
       isHoveringTrack,
       isHoveringFiller,
@@ -362,8 +524,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_3), createVNode(_component_OrTooltip, {
     class: normalizeClass(['relative', 'z-10']),
     "is-open": !_ctx.isDragging && (_ctx.isHoveringRail || _ctx.isHoveringThumbFrom) || _ctx.isDragging && _ctx.selectedControl === 'from',
-    content: String(_ctx.proxyModelValue[0]),
-    placement: _ctx.orientation === 'horizontal' ? 'top' : 'right',
+    content: String(_ctx.proxyModelValue[_ctx.orientation.endsWith('-reversed') ? 1 : 0]),
+    placement: _ctx.tooltipPlacement,
     offset: 24,
     "external-control": true
   }, {
@@ -381,8 +543,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_5), createVNode(_component_OrTooltip, {
     class: normalizeClass(['relative', 'z-10']),
     "is-open": !_ctx.isDragging && (_ctx.isHoveringRail || _ctx.isHoveringThumbTo) || _ctx.isDragging && _ctx.selectedControl === 'to',
-    content: String(_ctx.proxyModelValue[1]),
-    placement: _ctx.orientation === 'horizontal' ? 'top' : 'right',
+    content: String(_ctx.proxyModelValue[_ctx.orientation.endsWith('-reversed') ? 0 : 1]),
+    placement: _ctx.tooltipPlacement,
     offset: 24,
     "external-control": true
   }, {
@@ -400,10 +562,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     return openBlock(), createElementBlock("div", {
       key: breakpoint,
       class: normalizeClass(_ctx.breakpointMarkStyles),
-      style: normalizeStyle({
-        [_ctx.orientation === 'horizontal' ? 'left' : 'bottom']: `${_ctx.getBreakpointOffset(breakpoint) * 100}%`
-      }),
-      activated: breakpoint >= _ctx.proxyModelValue[0] && breakpoint <= _ctx.proxyModelValue[1],
+      style: normalizeStyle(_ctx.getBreakpointMarkComputedStyles(breakpoint)),
+      activated: breakpoint >= _ctx.proxyModelValue[_ctx.orientation.endsWith('-reversed') ? 1 : 0] && breakpoint <= _ctx.proxyModelValue[_ctx.orientation.endsWith('-reversed') ? 0 : 1],
       disabled: _ctx.disabled
     }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_8);
   }), 128 /* KEYED_FRAGMENT */))], 10 /* CLASS, PROPS */, _hoisted_2), createElementVNode("div", {

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

@@ -1 +1 @@
-export { s as default } from '../OrSliderV3-b69331d1.js';
+export { s as default } from '../OrSliderV3-6d75304d.js';

package/dist/bundled/v3/components/OrSliderV3/OrSlider.vue.d.ts

@@ -3,19 +3,19 @@ import { SliderColor, SliderOrientation } from './props';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: NumberConstructor;
-        default: undefined;
+        default: () => undefined;
     };
     minValue: {
         type: NumberConstructor;
-        default: number;
+        default: () => number;
     };
     maxValue: {
         type: NumberConstructor;
-        default: number;
+        default: () => number;
     };
     step: {
         type: NumberConstructor;
-        default: number;
+        default: () => number;
     };
     breakpoints: {
         type: PropType<number[]>;
@@ -26,12 +26,12 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: () => SliderColor;
     };
     orientation: {
-        type: PropType<"horizontal" | "vertical">;
+        type: PropType<"horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed">;
         default: () => SliderOrientation;
     };
     disabled: {
         type: BooleanConstructor;
-        default: boolean;
+        default: () => boolean;
     };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
@@ -41,32 +41,37 @@ declare const _default: import("vue-demi").DefineComponent<{
     railStyles: import("vue-demi").ComputedRef<string[]>;
     trackStyles: import("vue-demi").ComputedRef<string[]>;
     trackComputedStyles: import("vue-demi").ComputedRef<{
-        [x: string]: string;
-    }>;
+        width: string;
+        height?: undefined;
+    } | {
+        height: string;
+        width?: undefined;
+    } | undefined>;
     thumbStyles: import("vue-demi").ComputedRef<string[]>;
     breakpointMarkStyles: import("vue-demi").ComputedRef<string[]>;
     labelStyles: import("vue-demi").ComputedRef<string[]>;
     labelMarkStyles: import("vue-demi").ComputedRef<string[]>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<number>;
-    getBreakpointOffset: (breakpoint: number) => number;
+    tooltipPlacement: import("vue-demi").ComputedRef<"top" | "right" | undefined>;
+    getBreakpointMarkComputedStyles: (breakpoint: number) => Partial<CSSStyleDeclaration> | undefined;
     isHovering: import("vue-demi").Ref<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: NumberConstructor;
-        default: undefined;
+        default: () => undefined;
     };
     minValue: {
         type: NumberConstructor;
-        default: number;
+        default: () => number;
     };
     maxValue: {
         type: NumberConstructor;
-        default: number;
+        default: () => number;
     };
     step: {
         type: NumberConstructor;
-        default: number;
+        default: () => number;
     };
     breakpoints: {
         type: PropType<number[]>;
@@ -77,12 +82,12 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: () => SliderColor;
     };
     orientation: {
-        type: PropType<"horizontal" | "vertical">;
+        type: PropType<"horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed">;
         default: () => SliderOrientation;
     };
     disabled: {
         type: BooleanConstructor;
-        default: boolean;
+        default: () => boolean;
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -93,7 +98,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     step: number;
     breakpoints: number[];
     color: "primary" | "secondary";
-    orientation: "horizontal" | "vertical";
+    orientation: "horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed";
     disabled: boolean;
 }>;
 export default _default;

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

@@ -1 +1 @@
-export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from '../OrSliderV3-b69331d1.js';
+export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from '../OrSliderV3-6d75304d.js';

package/dist/bundled/v3/components/OrSliderV3/props.d.ts

@@ -4,5 +4,7 @@ export declare enum SliderColor {
 }
 export declare enum SliderOrientation {
     Horizontal = "horizontal",
-    Vertical = "vertical"
+    HorizontalReversed = "horizontal-reversed",
+    Vertical = "vertical",
+    VerticalReversed = "vertical-reversed"
 }

package/dist/bundled/v3/components/OrSliderV3/props.js

@@ -1 +1 @@
-export { S as SliderColor, a as SliderOrientation } from '../OrSliderV3-b69331d1.js';
+export { S as SliderColor, a as SliderOrientation } from '../OrSliderV3-6d75304d.js';

package/dist/bundled/v3/components/OrSliderV3/styles.js

@@ -1 +1 @@
-export { b as Slider, j as SliderBreakpointMark, k as SliderBreakpointMarkColors, l as SliderLabel, n as SliderLabelMark, m as SliderLabelOrientations, c as SliderOrientations, d as SliderRail, e as SliderRailOrientations, h as SliderThumb, i as SliderThumbColors, f as SliderTrack, g as SliderTrackColors } from '../OrSliderV3-b69331d1.js';
+export { b as Slider, j as SliderBreakpointMark, k as SliderBreakpointMarkColors, l as SliderLabel, n as SliderLabelMark, m as SliderLabelOrientations, c as SliderOrientations, d as SliderRail, e as SliderRailOrientations, h as SliderThumb, i as SliderThumbColors, f as SliderTrack, g as SliderTrackColors } from '../OrSliderV3-6d75304d.js';