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

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

@@ -1,6 +1,6 @@
 import { d as useElementBounding, u as useElementHover, e as useDraggable } from '../../index-cc89d6b7.js';
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
-import { RangeSlider, RangeSliderOrientations, RangeSliderRail, RangeSliderRailOrientations, RangeSliderOffset, RangeSliderOffsetOrientations, RangeSliderTrack, RangeSliderTrackColors, RangeSliderThumb, RangeSliderThumbColors, RangeSliderBreakpointMark, RangeSliderBreakpointMarkColors, RangeSliderLabel, RangeSliderLabelOrientations, RangeSliderLabelMark } from './styles.js';
+import { RangeSlider, RangeSliderOrientations, RangeSliderRail, RangeSliderRailOrientations, RangeSliderOffset, RangeSliderOffsetOrientations, RangeSliderTrack, RangeSliderTrackColors, RangeSliderThumb, RangeSliderThumbColors, RangeSliderBreakpointMark, RangeSliderBreakpointMarkColors, RangeSliderLabel, RangeSliderLabelOrientations, RangeSliderLabelMark, RangeSliderLabelMarkOrientations } from './styles.js';
 import __vue_component__$1 from '../OrTooltipV3/OrTooltip.js';
 import { SliderColor, SliderOrientation } from '../OrSliderV3/props.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
@@ -96,7 +96,7 @@ var script = defineComponent({
     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]]);
-    const labelMarkStyles = computed(() => [...RangeSliderLabelMark]);
+    const labelMarkStyles = computed(() => [...RangeSliderLabelMark, ...RangeSliderLabelMarkOrientations[props.orientation]]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
       defaultValue: computed(() => [props.minValue, props.maxValue])
@@ -393,7 +393,7 @@ var __vue_render__ = function () {
     attrs: {
       "disabled": _vm.disabled
     }
-  }), _vm._v(" "), _vm._l(_vm.breakpoints, function (breakpoint) {
+  }), _vm._v(" "), _vm.breakpoints.length > 0 ? _vm._l([_vm.minValue].concat(_vm.breakpoints, [_vm.maxValue]), function (breakpoint) {
     return _c('div', {
       key: breakpoint,
       class: _vm.breakpointMarkStyles,
@@ -403,15 +403,22 @@ var __vue_render__ = function () {
         "disabled": _vm.disabled
       }
     });
-  })], 2), _vm._v(" "), _c('div', {
+  }) : _vm._e()], 2), _vm._v(" "), _c('div', {
     class: _vm.labelStyles
-  }, [_c('div', {
-    class: _vm.labelMarkStyles
-  }, [_vm._v("\n      " + _vm._s(_vm.minValue) + "\n    ")]), _vm._v(" "), _c('div', {
-    class: ['grow']
-  }), _vm._v(" "), _c('div', {
-    class: _vm.labelMarkStyles
-  }, [_vm._v("\n      " + _vm._s(_vm.maxValue) + "\n    ")])])]);
+  }, _vm._l([_vm.minValue].concat(_vm.breakpoints, [_vm.maxValue]), function (breakpoint) {
+    return _c('div', {
+      key: breakpoint,
+      class: _vm.labelMarkStyles,
+      style: _vm.getBreakpointMarkComputedStyles(breakpoint),
+      attrs: {
+        "disabled": _vm.disabled
+      }
+    }, [_vm._t("label-" + breakpoint, function () {
+      return [_vm._v("\n        " + _vm._s(breakpoint) + "\n      ")];
+    }, {
+      "value": breakpoint
+    })], 2);
+  }), 0)]);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/bundled/v2/components/OrRangeSliderV3/styles.d.ts

@@ -14,3 +14,4 @@ export declare const RangeSliderBreakpointMarkColors: Record<RangeSliderColor, s
 export declare const RangeSliderLabel: string[];
 export declare const RangeSliderLabelOrientations: Record<RangeSliderOrientation, string[]>;
 export declare const RangeSliderLabelMark: string[];
+export declare const RangeSliderLabelMarkOrientations: Record<RangeSliderOrientation, string[]>;

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

@@ -144,7 +144,9 @@ const RangeSliderBreakpointMarkColors = {
   // Theme (disabled)
   'disabled:!bg-on-disabled', 'dark:disabled:!bg-on-disabled-dark']
 };
-const RangeSliderLabel = [];
+const RangeSliderLabel = [
+// Position
+'relative'];
 const RangeSliderLabelOrientations = {
   [SliderOrientation.Horizontal]: [
   // Layout
@@ -168,9 +170,27 @@ const RangeSliderLabelOrientations = {
   'h-full']
 };
 const RangeSliderLabelMark = [
+// 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'];
+const RangeSliderLabelMarkOrientations = {
+  [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']
+};
 
-export { RangeSlider, RangeSliderBreakpointMark, RangeSliderBreakpointMarkColors, RangeSliderLabel, RangeSliderLabelMark, RangeSliderLabelOrientations, RangeSliderOffset, RangeSliderOffsetOrientations, RangeSliderOrientations, RangeSliderRail, RangeSliderRailOrientations, RangeSliderThumb, RangeSliderThumbColors, RangeSliderTrack, RangeSliderTrackColors };
+export { RangeSlider, RangeSliderBreakpointMark, RangeSliderBreakpointMarkColors, RangeSliderLabel, RangeSliderLabelMark, RangeSliderLabelMarkOrientations, RangeSliderLabelOrientations, RangeSliderOffset, RangeSliderOffsetOrientations, RangeSliderOrientations, RangeSliderRail, RangeSliderRailOrientations, RangeSliderThumb, RangeSliderThumbColors, RangeSliderTrack, RangeSliderTrackColors };

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

@@ -1,7 +1,7 @@
 import { d as useElementBounding, u as useElementHover, e as useDraggable } from '../../index-cc89d6b7.js';
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { SliderColor, SliderOrientation } from './props.js';
-import { Slider, SliderOrientations, SliderRail, SliderRailOrientations, SliderTrack, SliderTrackColors, SliderThumb, SliderThumbColors, SliderBreakpointMark, SliderBreakpointMarkColors, SliderLabel, SliderLabelOrientations, SliderLabelMark } from './styles.js';
+import { Slider, SliderOrientations, SliderRail, SliderRailOrientations, SliderTrack, SliderTrackColors, SliderThumb, SliderThumbColors, SliderBreakpointMark, SliderBreakpointMarkColors, SliderLabel, SliderLabelOrientations, SliderLabelMark, SliderLabelMarkOrientations } from './styles.js';
 import __vue_component__$1 from '../OrTooltipV3/OrTooltip.js';
 import { c as clamp } from '../../index-1612099e.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
@@ -77,7 +77,7 @@ var script = defineComponent({
     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]]);
-    const labelMarkStyles = computed(() => [...SliderLabelMark]);
+    const labelMarkStyles = computed(() => [...SliderLabelMark, ...SliderLabelMarkOrientations[props.orientation]]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
       defaultValue: toRef(props, 'minValue')
@@ -243,7 +243,7 @@ var __vue_render__ = function () {
     attrs: {
       "disabled": _vm.disabled
     }
-  })]), _vm._v(" "), _vm._l(_vm.breakpoints, function (breakpoint) {
+  })]), _vm._v(" "), _vm.breakpoints.length > 0 ? _vm._l([_vm.minValue].concat(_vm.breakpoints, [_vm.maxValue]), function (breakpoint) {
     return _c('div', {
       key: breakpoint,
       class: _vm.breakpointMarkStyles,
@@ -253,15 +253,22 @@ var __vue_render__ = function () {
         "disabled": _vm.disabled
       }
     });
-  })], 2), _vm._v(" "), _c('div', {
+  }) : _vm._e()], 2), _vm._v(" "), _c('div', {
     class: _vm.labelStyles
-  }, [_c('div', {
-    class: _vm.labelMarkStyles
-  }, [_vm._v("\n      " + _vm._s(_vm.minValue) + "\n    ")]), _vm._v(" "), _c('div', {
-    class: ['grow']
-  }), _vm._v(" "), _c('div', {
-    class: _vm.labelMarkStyles
-  }, [_vm._v("\n      " + _vm._s(_vm.maxValue) + "\n    ")])])]);
+  }, _vm._l([_vm.minValue].concat(_vm.breakpoints, [_vm.maxValue]), function (breakpoint) {
+    return _c('div', {
+      key: breakpoint,
+      class: _vm.labelMarkStyles,
+      style: _vm.getBreakpointMarkComputedStyles(breakpoint),
+      attrs: {
+        "disabled": _vm.disabled
+      }
+    }, [_vm._t("label-" + breakpoint, function () {
+      return [_vm._v("\n        " + _vm._s(breakpoint) + "\n      ")];
+    }, {
+      "value": breakpoint
+    })], 2);
+  }), 0)]);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/bundled/v2/components/OrSliderV3/styles.d.ts

@@ -12,3 +12,4 @@ export declare const SliderBreakpointMarkColors: Record<SliderColor, string[]>;
 export declare const SliderLabel: string[];
 export declare const SliderLabelOrientations: Record<SliderOrientation, string[]>;
 export declare const SliderLabelMark: string[];
+export declare const SliderLabelMarkOrientations: Record<SliderOrientation, string[]>;

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

@@ -129,7 +129,9 @@ const SliderBreakpointMarkColors = {
   // Theme (disabled)
   'disabled:!bg-on-disabled', 'dark:disabled:!bg-on-disabled-dark']
 };
-const SliderLabel = [];
+const SliderLabel = [
+// Position
+'relative'];
 const SliderLabelOrientations = {
   [SliderOrientation.Horizontal]: [
   // Layout
@@ -153,9 +155,27 @@ const SliderLabelOrientations = {
   'h-full']
 };
 const SliderLabelMark = [
+// 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'];
+const SliderLabelMarkOrientations = {
+  [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']
+};
 
-export { Slider, SliderBreakpointMark, SliderBreakpointMarkColors, SliderLabel, SliderLabelMark, SliderLabelOrientations, SliderOrientations, SliderRail, SliderRailOrientations, SliderThumb, SliderThumbColors, SliderTrack, SliderTrackColors };
+export { Slider, SliderBreakpointMark, SliderBreakpointMarkColors, SliderLabel, SliderLabelMark, SliderLabelMarkOrientations, SliderLabelOrientations, SliderOrientations, SliderRail, SliderRailOrientations, SliderThumb, SliderThumbColors, SliderTrack, SliderTrackColors };