@onereach/ui-components 8.19.5 → 8.20.0

package/src/components/or-range-slider-v3/styles.ts

@@ -14,6 +14,14 @@ export const RangeSliderOrientations: Record<RangeSliderOrientation, string[]> =
     'w-full',
   ],
 
+  [RangeSliderOrientation.HorizontalReversed]: [
+    // Layout
+    'layout-column',
+
+    // Box
+    'w-full',
+  ],
+
   [RangeSliderOrientation.Vertical]: [
     // Layout
     'layout-row',
@@ -21,6 +29,14 @@ export const RangeSliderOrientations: Record<RangeSliderOrientation, string[]> =
     // Box
     'h-full',
   ],
+
+  [RangeSliderOrientation.VerticalReversed]: [
+    // Layout
+    'layout-row',
+
+    // Box
+    'h-full',
+  ],
 };
 
 export const RangeSliderRail: string[] = [
@@ -52,6 +68,19 @@ export const RangeSliderRailOrientations: Record<RangeSliderOrientation, string[
     'my-md+',
   ],
 
+  [RangeSliderOrientation.HorizontalReversed]: [
+    // Layout
+    'layout-row-reverse',
+
+    // Box
+    'w-full',
+    'h-xs',
+
+    // Spacing
+    'mx-0',
+    'my-md+',
+  ],
+
   [RangeSliderOrientation.Vertical]: [
     // Layout
     'layout-column-reverse items-center',
@@ -64,6 +93,19 @@ export const RangeSliderRailOrientations: Record<RangeSliderOrientation, string[
     'mx-md+',
     'my-0',
   ],
+
+  [RangeSliderOrientation.VerticalReversed]: [
+    // Layout
+    'layout-column items-center',
+
+    // Box
+    'w-xs',
+    'h-full',
+
+    // Spacing
+    'mx-md+',
+    'my-0',
+  ],
 };
 
 export const RangeSliderOffset: string[] = [];
@@ -74,10 +116,20 @@ export const RangeSliderOffsetOrientations: Record<RangeSliderOrientation, strin
     'h-full',
   ],
 
+  [RangeSliderOrientation.HorizontalReversed]: [
+    // Box
+    'h-full',
+  ],
+
   [RangeSliderOrientation.Vertical]: [
     // Box
     'w-full',
   ],
+
+  [RangeSliderOrientation.VerticalReversed]: [
+    // Box
+    'w-full',
+  ],
 };
 
 export const RangeSliderTrack: string[] = [
@@ -216,6 +268,14 @@ export const RangeSliderLabelOrientations: Record<RangeSliderOrientation, string
     'w-full',
   ],
 
+  [RangeSliderOrientation.HorizontalReversed]: [
+    // Layout
+    'layout-row-reverse',
+
+    // Box
+    'w-full',
+  ],
+
   [RangeSliderOrientation.Vertical]: [
     // Layout
     'layout-column-reverse items-center',
@@ -223,6 +283,14 @@ export const RangeSliderLabelOrientations: Record<RangeSliderOrientation, string
     // Box
     'h-full',
   ],
+
+  [RangeSliderOrientation.VerticalReversed]: [
+    // Layout
+    'layout-column items-center',
+
+    // Box
+    'h-full',
+  ],
 };
 
 export const RangeSliderLabelMark: string[] = [

package/src/components/or-slider-v3/OrSlider.vue

@@ -19,7 +19,7 @@
         :class="['relative', 'z-10']"
         :is-open="isHovering || isDragging"
         :content="String(proxyModelValue)"
-        :placement="orientation === 'horizontal' ? 'top' : 'right'"
+        :placement="tooltipPlacement"
         :offset="24"
         :external-control="true"
       >
@@ -34,7 +34,7 @@
         v-for="breakpoint of breakpoints"
         :key="breakpoint"
         :class="breakpointMarkStyles"
-        :style="{ [orientation === 'horizontal' ? 'left' : 'bottom']: `${getBreakpointOffset(breakpoint) * 100}%` }"
+        :style="getBreakpointMarkComputedStyles(breakpoint)"
         :activated="breakpoint <= proxyModelValue"
         :disabled="disabled"
       />
@@ -75,22 +75,22 @@ export default 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: {
@@ -110,7 +110,7 @@ export default defineComponent({
 
     disabled: {
       type: Boolean,
-      default: false,
+      default: () => false,
     },
   },
 
@@ -146,9 +146,17 @@ export default defineComponent({
       ...SliderTrackColors[props.color],
     ]);
 
-    const trackComputedStyles = computed(() => ({
-      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${internalModelValue.value * 100}%`,
-    }));
+    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 thumbStyles = computed(() => [
       'or-slider-thumb-v3',
@@ -203,6 +211,18 @@ export default defineComponent({
 
     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: Position, event: MouseEvent | PointerEvent): void {
       if (props.disabled) {
@@ -212,12 +232,43 @@ export default defineComponent({
       const totalWidth = railBoundingBox.width.value;
       const totalHeight = railBoundingBox.height.value;
 
-      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;
+      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;
+      }
     }
 
     // Methods
+    function getBreakpointMarkComputedStyles(breakpoint: number): Partial<CSSStyleDeclaration> | undefined {
+      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: number): number {
       return (breakpoint - props.minValue) / (props.maxValue - props.minValue);
     }
@@ -258,8 +309,9 @@ export default defineComponent({
       labelMarkStyles,
 
       proxyModelValue,
+      tooltipPlacement,
 
-      getBreakpointOffset,
+      getBreakpointMarkComputedStyles,
 
       isHovering,
       isDragging,

package/src/components/or-slider-v3/props.ts

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

package/src/components/or-slider-v3/styles.ts

@@ -14,6 +14,14 @@ export const SliderOrientations: Record<SliderOrientation, string[]> = {
     'w-full',
   ],
 
+  [SliderOrientation.HorizontalReversed]: [
+    // Layout
+    'layout-column',
+
+    // Box
+    'w-full',
+  ],
+
   [SliderOrientation.Vertical]: [
     // Layout
     'layout-row',
@@ -21,6 +29,14 @@ export const SliderOrientations: Record<SliderOrientation, string[]> = {
     // Box
     'h-full',
   ],
+
+  [SliderOrientation.VerticalReversed]: [
+    // Layout
+    'layout-row',
+
+    // Box
+    'h-full',
+  ],
 };
 
 export const SliderRail: string[] = [
@@ -52,6 +68,19 @@ export const SliderRailOrientations: Record<SliderOrientation, string[]> = {
     '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',
@@ -64,6 +93,19 @@ export const SliderRailOrientations: Record<SliderOrientation, string[]> = {
     'mx-md+',
     'my-0',
   ],
+
+  [SliderOrientation.VerticalReversed]: [
+    // Layout
+    'layout-column items-center',
+
+    // Box
+    'w-xs',
+    'h-full',
+
+    // Spacing
+    'mx-md+',
+    'my-0',
+  ],
 };
 
 export const SliderTrack: string[] = [
@@ -202,6 +244,14 @@ export const SliderLabelOrientations: Record<SliderOrientation, string[]> = {
     'w-full',
   ],
 
+  [SliderOrientation.HorizontalReversed]: [
+    // Layout
+    'layout-row-reverse',
+
+    // Box
+    'w-full',
+  ],
+
   [SliderOrientation.Vertical]: [
     // Layout
     'layout-column-reverse items-center',
@@ -209,6 +259,14 @@ export const SliderLabelOrientations: Record<SliderOrientation, string[]> = {
     // Box
     'h-full',
   ],
+
+  [SliderOrientation.VerticalReversed]: [
+    // Layout
+    'layout-column items-center',
+
+    // Box
+    'h-full',
+  ],
 };
 
 export const SliderLabelMark: string[] = [