@onereach/ui-components 8.22.2 → 8.22.3-beta.4120.0

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

@@ -257,7 +257,10 @@ export const RangeSliderBreakpointMarkColors: Record<RangeSliderColor, string[]>
   ],
 };
 
-export const RangeSliderLabel: string[] = [];
+export const RangeSliderLabel: string[] = [
+  // Position
+  'relative',
+];
 
 export const RangeSliderLabelOrientations: Record<RangeSliderOrientation, string[]> = {
   [RangeSliderOrientation.Horizontal]: [
@@ -294,10 +297,43 @@ export const RangeSliderLabelOrientations: Record<RangeSliderOrientation, string
 };
 
 export const RangeSliderLabelMark: string[] = [
+  // Position
+  'absolute',
+
   // Typography
-  'typography-caption-regular',
+  'typography-caption-regular whitespace-nowrap',
 
   // Theme
-  'theme-foreground-default',
-  'dark:theme-foreground-default-dark',
+  'theme-foreground-outline',
+  'dark:theme-foreground-outline-dark',
+
+  // Theme (hover)
+  'hover:theme-foreground-default',
+  'dark:hover:theme-foreground-default-dark',
 ];
+
+export const RangeSliderLabelMarkOrientations: Record<RangeSliderOrientation, string[]> = {
+  [RangeSliderOrientation.Horizontal]: [
+    // Position
+    '-translate-x-1/2',
+    'translate-y-1/2',
+  ],
+
+  [RangeSliderOrientation.HorizontalReversed]: [
+    // Position
+    'translate-x-1/2',
+    'translate-y-1/2',
+  ],
+
+  [RangeSliderOrientation.Vertical]: [
+    // Position
+    'translate-x-1/2',
+    'translate-y-1/2',
+  ],
+
+  [RangeSliderOrientation.VerticalReversed]: [
+    // Position
+    'translate-x-1/2',
+    '-translate-y-1/2',
+  ],
+};

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

@@ -30,25 +30,32 @@
         />
       </OrTooltip>
 
+      <template v-if="breakpoints.length > 0">
+        <div
+          v-for="breakpoint of [minValue, ...breakpoints, maxValue]"
+          :key="breakpoint"
+          :class="breakpointMarkStyles"
+          :style="getBreakpointMarkComputedStyles(breakpoint)"
+          :activated="breakpoint <= proxyModelValue"
+          :disabled="disabled"
+        />
+      </template>
+    </div>
+
+    <div :class="labelStyles">
       <div
-        v-for="breakpoint of breakpoints"
+        v-for="breakpoint of [minValue, ...breakpoints, maxValue]"
         :key="breakpoint"
-        :class="breakpointMarkStyles"
+        :class="labelMarkStyles"
         :style="getBreakpointMarkComputedStyles(breakpoint)"
-        :activated="breakpoint <= proxyModelValue"
         :disabled="disabled"
-      />
-    </div>
-
-    <div :class="labelStyles">
-      <div :class="labelMarkStyles">
-        {{ minValue }}
-      </div>
-
-      <div :class="['grow']" />
-
-      <div :class="labelMarkStyles">
-        {{ maxValue }}
+      >
+        <slot
+          :name="`label-${breakpoint}`"
+          :value="breakpoint"
+        >
+          {{ breakpoint }}
+        </slot>
       </div>
     </div>
   </div>
@@ -60,7 +67,7 @@ import { PropType, computed, defineComponent, ref, toRef, watch } from 'vue-demi
 import { useProxyModelValue } from '../../hooks';
 import { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3';
 import { SliderColor, SliderOrientation } from './props';
-import { Slider, SliderBreakpointMark, SliderBreakpointMarkColors, SliderLabel, SliderLabelMark, SliderLabelOrientations, SliderOrientations, SliderRail, SliderRailOrientations, SliderThumb, SliderThumbColors, SliderTrack, SliderTrackColors } from './styles';
+import { Slider, SliderBreakpointMark, SliderBreakpointMarkColors, SliderLabel, SliderLabelMark, SliderLabelMarkOrientations, SliderLabelOrientations, SliderOrientations, SliderRail, SliderRailOrientations, SliderThumb, SliderThumbColors, SliderTrack, SliderTrackColors } from './styles';
 
 export default defineComponent({
   components: {
@@ -176,6 +183,7 @@ export default defineComponent({
 
     const labelMarkStyles = computed(() => [
       ...SliderLabelMark,
+      ...SliderLabelMarkOrientations[props.orientation],
     ]);
 
     // State

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

@@ -233,7 +233,10 @@ export const SliderBreakpointMarkColors: Record<SliderColor, string[]> = {
   ],
 };
 
-export const SliderLabel: string[] = [];
+export const SliderLabel: string[] = [
+  // Position
+  'relative',
+];
 
 export const SliderLabelOrientations: Record<SliderOrientation, string[]> = {
   [SliderOrientation.Horizontal]: [
@@ -270,10 +273,43 @@ export const SliderLabelOrientations: Record<SliderOrientation, string[]> = {
 };
 
 export const SliderLabelMark: string[] = [
+  // Position
+  'absolute',
+
   // Typography
-  'typography-caption-regular',
+  'typography-caption-regular whitespace-nowrap',
 
   // Theme
-  'theme-foreground-default',
-  'dark:theme-foreground-default-dark',
+  'theme-foreground-outline',
+  'dark:theme-foreground-outline-dark',
+
+  // Theme (hover)
+  'hover:theme-foreground-default',
+  'dark:hover:theme-foreground-default-dark',
 ];
+
+export const SliderLabelMarkOrientations: Record<SliderOrientation, string[]> = {
+  [SliderOrientation.Horizontal]: [
+    // Position
+    '-translate-x-1/2',
+    'translate-y-1/2',
+  ],
+
+  [SliderOrientation.HorizontalReversed]: [
+    // Position
+    'translate-x-1/2',
+    'translate-y-1/2',
+  ],
+
+  [SliderOrientation.Vertical]: [
+    // Position
+    'translate-x-1/2',
+    'translate-y-1/2',
+  ],
+
+  [SliderOrientation.VerticalReversed]: [
+    // Position
+    'translate-x-1/2',
+    '-translate-y-1/2',
+  ],
+};