@onereach/ui-components 8.19.5 → 8.20.0

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

@@ -3,19 +3,19 @@ import { RangeSliderColor, RangeSliderOrientation } from './props';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<[number, number]>;
-        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: () => RangeSliderColor;
     };
     orientation: {
-        type: PropType<"horizontal" | "vertical">;
+        type: PropType<"horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed">;
         default: () => RangeSliderOrientation;
     };
     disabled: {
         type: BooleanConstructor;
-        default: boolean;
+        default: () => boolean;
     };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
@@ -45,19 +45,28 @@ declare const _default: import("vue-demi").DefineComponent<{
     railStyles: import("vue-demi").ComputedRef<string[]>;
     offsetStyles: import("vue-demi").ComputedRef<string[]>;
     offsetComputedStyles: import("vue-demi").ComputedRef<{
-        [x: string]: string;
-    }>;
+        width: string;
+        height?: undefined;
+    } | {
+        height: string;
+        width?: undefined;
+    } | undefined>;
     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, number]>;
+    tooltipPlacement: import("vue-demi").ComputedRef<"top" | "right" | undefined>;
     selectedControl: import("vue-demi").Ref<"from" | "to" | undefined>;
-    getBreakpointOffset: (breakpoint: number) => number;
+    getBreakpointMarkComputedStyles: (breakpoint: number) => Partial<CSSStyleDeclaration> | undefined;
     isHoveringOffset: import("vue-demi").Ref<boolean>;
     isHoveringTrack: import("vue-demi").Ref<boolean>;
     isHoveringFiller: import("vue-demi").Ref<boolean>;
@@ -68,19 +77,19 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, 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]>;
-        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[]>;
@@ -91,12 +100,12 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: () => RangeSliderColor;
     };
     orientation: {
-        type: PropType<"horizontal" | "vertical">;
+        type: PropType<"horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed">;
         default: () => RangeSliderOrientation;
     };
     disabled: {
         type: BooleanConstructor;
-        default: boolean;
+        default: () => boolean;
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -107,7 +116,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/esm/v3/components/or-range-slider-v3/index.js

@@ -1,5 +1,5 @@
-export { s as OrRangeSliderV3 } from '../../OrRangeSlider-1c6ff524.js';
-export { S as RangeSliderColor, a as RangeSliderOrientation } from '../../OrSlider-654bd19f.js';
+export { s as OrRangeSliderV3 } from '../../OrRangeSlider-cd72332c.js';
+export { S as RangeSliderColor, a as RangeSliderOrientation } from '../../OrSlider-ba7aff7c.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../dom-aecadd9a.js';

package/dist/esm/v3/components/or-slider-v3/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/esm/v3/components/or-slider-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from '../../OrSlider-654bd19f.js';
+export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from '../../OrSlider-ba7aff7c.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../dom-aecadd9a.js';

package/dist/esm/v3/components/or-slider-v3/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/esm/v3/index.js

@@ -89,8 +89,8 @@ export { s as OrRadio } from './OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioGroupV3 } from './OrRadioGroup-2aa70aba.js';
 export { s as OrRadioV3 } from './OrRadio-c6f7ba23.js';
-export { s as OrRangeSliderV3 } from './OrRangeSlider-1c6ff524.js';
-export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider-654bd19f.js';
+export { s as OrRangeSliderV3 } from './OrRangeSlider-cd72332c.js';
+export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSlider-ba7aff7c.js';
 export { s as OrRatingV3 } from './OrRating-ec9462c5.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-ae6a014f.js';
 export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-06c85acf.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.19.5",
+  "version": "8.20.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -178,5 +178,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "df3e3b6c62c6f5d0f3e95f096ad5263ba290743d"
+  "gitHead": "24dbc34bb789a688730618bdea9715eafcc70310"
 }

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

@@ -19,8 +19,8 @@
       <OrTooltip
         :class="['relative', 'z-10']"
         :is-open="(!isDragging && (isHoveringRail || isHoveringThumbFrom)) || (isDragging && selectedControl === 'from')"
-        :content="String(proxyModelValue[0])"
-        :placement="orientation === 'horizontal' ? 'top' : 'right'"
+        :content="String(proxyModelValue[orientation.endsWith('-reversed') ? 1 : 0])"
+        :placement="tooltipPlacement"
         :offset="24"
         :external-control="true"
       >
@@ -41,8 +41,8 @@
       <OrTooltip
         :class="['relative', 'z-10']"
         :is-open="(!isDragging && (isHoveringRail || isHoveringThumbTo)) || (isDragging && selectedControl === 'to')"
-        :content="String(proxyModelValue[1])"
-        :placement="orientation === 'horizontal' ? 'top' : 'right'"
+        :content="String(proxyModelValue[orientation.endsWith('-reversed') ? 0 : 1])"
+        :placement="tooltipPlacement"
         :offset="24"
         :external-control="true"
       >
@@ -63,8 +63,8 @@
         v-for="breakpoint of breakpoints"
         :key="breakpoint"
         :class="breakpointMarkStyles"
-        :style="{ [orientation === 'horizontal' ? 'left' : 'bottom']: `${getBreakpointOffset(breakpoint) * 100}%` }"
-        :activated="breakpoint >= proxyModelValue[0] && breakpoint <= proxyModelValue[1]"
+        :style="getBreakpointMarkComputedStyles(breakpoint)"
+        :activated="breakpoint >= proxyModelValue[orientation.endsWith('-reversed') ? 1 : 0] && breakpoint <= proxyModelValue[orientation.endsWith('-reversed') ? 0 : 1]"
         :disabled="disabled"
       />
     </div>
@@ -104,22 +104,22 @@ export default defineComponent({
   props: {
     modelValue: {
       type: Object as PropType<[number, 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: {
@@ -139,7 +139,7 @@ export default defineComponent({
 
     disabled: {
       type: Boolean,
-      default: false,
+      default: () => false,
     },
   },
 
@@ -179,18 +179,34 @@ export default defineComponent({
       ...RangeSliderOffsetOrientations[props.orientation],
     ]);
 
-    const offsetComputedStyles = computed(() => ({
-      [props.orientation === RangeSliderOrientation.Horizontal ? 'width' : 'height']: `${internalModelValueFrom.value * 100}%`,
-    }));
+    const offsetComputedStyles = computed(() => {
+      switch (props.orientation) {
+        case RangeSliderOrientation.Horizontal:
+        case RangeSliderOrientation.HorizontalReversed:
+          return { width: `${internalModelValueFrom.value * 100}%` };
+
+        case RangeSliderOrientation.Vertical:
+        case RangeSliderOrientation.VerticalReversed:
+          return { height: `${internalModelValueFrom.value * 100}%` };
+      }
+    });
 
     const trackStyles = computed(() => [
       ...RangeSliderTrack,
       ...RangeSliderTrackColors[props.color],
     ]);
 
-    const trackComputedStyles = computed(() => ({
-      [props.orientation === RangeSliderOrientation.Horizontal ? 'width' : 'height']: `${(internalModelValueTo.value - internalModelValueFrom.value) * 100}%`,
-    }));
+    const trackComputedStyles = computed(() => {
+      switch (props.orientation) {
+        case RangeSliderOrientation.Horizontal:
+        case RangeSliderOrientation.HorizontalReversed:
+          return { width: `${(internalModelValueTo.value - internalModelValueFrom.value) * 100}%` };
+
+        case RangeSliderOrientation.Vertical:
+        case RangeSliderOrientation.VerticalReversed:
+          return { height: `${(internalModelValueTo.value - internalModelValueFrom.value) * 100}%` };
+      }
+    });
 
     const thumbStyles = computed(() => [
       'or-range-slider-thumb-v3',
@@ -219,37 +235,89 @@ export default defineComponent({
 
     const internalModelValueFrom = computed({
       get: () => {
-        return (proxyModelValue.value[0] - props.minValue) / (props.maxValue - props.minValue);
+        let modelValue = 0;
+
+        switch (props.orientation) {
+          case RangeSliderOrientation.Horizontal:
+          case RangeSliderOrientation.Vertical:
+            modelValue = proxyModelValue.value[0];
+            break;
+
+          case RangeSliderOrientation.HorizontalReversed:
+          case RangeSliderOrientation.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 = [
+        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 RangeSliderOrientation.Horizontal:
+          case RangeSliderOrientation.Vertical:
+            proxyModelValue.value = draftProxyModelValue as [number, number];
+            break;
+
+          case RangeSliderOrientation.HorizontalReversed:
+          case RangeSliderOrientation.VerticalReversed:
+            proxyModelValue.value = draftProxyModelValue.reverse() as [number, number];
+            break;
+        }
       },
     });
 
     const internalModelValueTo = computed({
       get: () => {
-        return (proxyModelValue.value[1] - props.minValue) / (props.maxValue - props.minValue);
+        let modelValue = 0;
+
+        switch (props.orientation) {
+          case RangeSliderOrientation.Horizontal:
+          case RangeSliderOrientation.Vertical:
+            modelValue = proxyModelValue.value[1];
+            break;
+
+          case RangeSliderOrientation.HorizontalReversed:
+          case RangeSliderOrientation.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 = [
+        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 RangeSliderOrientation.Horizontal:
+          case RangeSliderOrientation.Vertical:
+            proxyModelValue.value = draftProxyModelValue as [number, number];
+            break;
+
+          case RangeSliderOrientation.HorizontalReversed:
+          case RangeSliderOrientation.VerticalReversed:
+            proxyModelValue.value = draftProxyModelValue.reverse() as [number, number];
+            break;
+        }
       },
     });
 
@@ -267,6 +335,18 @@ export default defineComponent({
 
     const railBoundingBox = useElementBounding(rail);
 
+    const tooltipPlacement = computed(() => {
+      switch (props.orientation) {
+        case RangeSliderOrientation.Horizontal:
+        case RangeSliderOrientation.HorizontalReversed:
+          return 'top';
+
+        case RangeSliderOrientation.Vertical:
+        case RangeSliderOrientation.VerticalReversed:
+          return 'right';
+      }
+    });
+
     const selectedControl = ref<'from' | 'to'>();
 
     // Handlers
@@ -279,17 +359,62 @@ export default defineComponent({
       const totalHeight = railBoundingBox.height.value;
 
       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;
+        switch (props.orientation) {
+          case RangeSliderOrientation.Horizontal:
+            internalModelValueFrom.value = clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth;
+            break;
+
+          case RangeSliderOrientation.HorizontalReversed:
+            internalModelValueFrom.value = clamp(railBoundingBox.right.value - event.clientX, 0, internalModelValueTo.value * totalWidth) / totalWidth;
+            break;
+
+          case RangeSliderOrientation.Vertical:
+            internalModelValueFrom.value = clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
+            break;
+
+          case RangeSliderOrientation.VerticalReversed:
+            internalModelValueFrom.value = clamp(totalHeight - (railBoundingBox.bottom.value - event.clientY), 0, internalModelValueTo.value * totalHeight) / totalHeight;
+            break;
+        }
       } 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;
+        switch (props.orientation) {
+          case RangeSliderOrientation.Horizontal:
+            internalModelValueTo.value = clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth;
+            break;
+
+          case RangeSliderOrientation.HorizontalReversed:
+            internalModelValueTo.value = clamp(railBoundingBox.right.value - event.clientX, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth;
+            break;
+
+          case RangeSliderOrientation.Vertical:
+            internalModelValueTo.value = clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
+            break;
+
+          case RangeSliderOrientation.VerticalReversed:
+            internalModelValueTo.value = clamp(totalHeight - (railBoundingBox.bottom.value - event.clientY), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
+            break;
+        }
       }
     }
 
     // Methods
+    function getBreakpointMarkComputedStyles(breakpoint: number): Partial<CSSStyleDeclaration> | undefined {
+      switch (props.orientation) {
+        case RangeSliderOrientation.Horizontal:
+          return { left: `${getBreakpointOffset(breakpoint) * 100}%` };
+
+        case RangeSliderOrientation.HorizontalReversed:
+          return { right: `${getBreakpointOffset(breakpoint) * 100}%` };
+
+        case RangeSliderOrientation.Vertical:
+          return { bottom: `${getBreakpointOffset(breakpoint) * 100}%` };
+
+        case RangeSliderOrientation.VerticalReversed:
+          return { top: `${getBreakpointOffset(breakpoint) * 100}%` };
+      }
+    }
+
+    // Helpers
     function getBreakpointOffset(breakpoint: number): number {
       return (breakpoint - props.minValue) / (props.maxValue - props.minValue);
     }
@@ -361,9 +486,10 @@ export default defineComponent({
       labelMarkStyles,
 
       proxyModelValue,
+      tooltipPlacement,
       selectedControl,
 
-      getBreakpointOffset,
+      getBreakpointMarkComputedStyles,
 
       isHoveringOffset,
       isHoveringTrack,