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

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

@@ -1 +1 @@
-export { s as default } from '../OrRangeSliderV3-5b22cbac.js';
+export { s as default } from '../OrRangeSliderV3-71b95de0.js';

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

@@ -1,2 +1,2 @@
-export { s as OrRangeSliderV3 } from '../OrRangeSliderV3-5b22cbac.js';
-export { S as RangeSliderColor, a as RangeSliderOrientation } from '../OrSliderV3-7bddcc19.js';
+export { s as OrRangeSliderV3 } from '../OrRangeSliderV3-71b95de0.js';
+export { S as RangeSliderColor, a as RangeSliderOrientation } from '../OrSliderV3-53a7d617.js';

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

@@ -1 +1 @@
-export { S as RangeSliderColor, a as RangeSliderOrientation } from '../OrSliderV3-7bddcc19.js';
+export { S as RangeSliderColor, a as RangeSliderOrientation } from '../OrSliderV3-53a7d617.js';

package/dist/bundled/v3/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/v3/components/OrRangeSliderV3/styles.js

@@ -1,2 +1,2 @@
-import '../OrSliderV3-7bddcc19.js';
-export { R as RangeSlider, j as RangeSliderBreakpointMark, k as RangeSliderBreakpointMarkColors, l as RangeSliderLabel, n as RangeSliderLabelMark, m as RangeSliderLabelOrientations, d as RangeSliderOffset, e as RangeSliderOffsetOrientations, a as RangeSliderOrientations, b as RangeSliderRail, c as RangeSliderRailOrientations, h as RangeSliderThumb, i as RangeSliderThumbColors, f as RangeSliderTrack, g as RangeSliderTrackColors } from '../OrRangeSliderV3-5b22cbac.js';
+import '../OrSliderV3-53a7d617.js';
+export { R as RangeSlider, j as RangeSliderBreakpointMark, k as RangeSliderBreakpointMarkColors, l as RangeSliderLabel, n as RangeSliderLabelMark, o as RangeSliderLabelMarkOrientations, m as RangeSliderLabelOrientations, d as RangeSliderOffset, e as RangeSliderOffsetOrientations, a as RangeSliderOrientations, b as RangeSliderRail, c as RangeSliderRailOrientations, h as RangeSliderThumb, i as RangeSliderThumbColors, f as RangeSliderTrack, g as RangeSliderTrackColors } from '../OrRangeSliderV3-71b95de0.js';

package/dist/bundled/v3/components/{OrRangeSliderV3-5b22cbac.js → OrRangeSliderV3-71b95de0.js}

@@ -1,5 +1,5 @@
-import { a as SliderOrientation, S as SliderColor } from './OrSliderV3-7bddcc19.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, withCtx, Fragment, renderList, toDisplayString } from 'vue';
+import { a as SliderOrientation, S as SliderColor } from './OrSliderV3-53a7d617.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, withCtx, Fragment, renderList, createCommentVNode, renderSlot, createTextVNode, toDisplayString } from 'vue';
 import { h as useElementBounding, a as useElementHover, i as useDraggable, j as clamp } from './OrBottomSheetV3-83beaa38.js';
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { s as script$1 } from './OrTooltipV3-71f1920b.js';
@@ -149,7 +149,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
@@ -173,10 +175,28 @@ 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']
+};
 
 var script = defineComponent({
   components: {
@@ -267,7 +287,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])
@@ -502,10 +522,7 @@ const _hoisted_5 = ["disabled"];
 const _hoisted_6 = ["disabled"];
 const _hoisted_7 = ["disabled"];
 const _hoisted_8 = ["activated", "disabled"];
-const _hoisted_9 = /*#__PURE__*/createElementVNode("div", {
-  class: /*#__PURE__*/normalizeClass(['grow'])
-}, null, -1 /* HOISTED */);
-
+const _hoisted_9 = ["disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrTooltip = resolveComponent("OrTooltip");
   return openBlock(), createElementBlock("div", {
@@ -558,7 +575,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "filler",
     class: normalizeClass(['grow', ..._ctx.offsetStyles]),
     disabled: _ctx.disabled
-  }, null, 10 /* CLASS, PROPS */, _hoisted_7), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.breakpoints, breakpoint => {
+  }, null, 10 /* CLASS, PROPS */, _hoisted_7), _ctx.breakpoints.length > 0 ? (openBlock(true), createElementBlock(Fragment, {
+    key: 0
+  }, renderList([_ctx.minValue, ..._ctx.breakpoints, _ctx.maxValue], breakpoint => {
     return openBlock(), createElementBlock("div", {
       key: breakpoint,
       class: normalizeClass(_ctx.breakpointMarkStyles),
@@ -566,16 +585,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       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", {
+  }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true)], 10 /* CLASS, PROPS */, _hoisted_2), createElementVNode("div", {
     class: normalizeClass(_ctx.labelStyles)
-  }, [createElementVNode("div", {
-    class: normalizeClass(_ctx.labelMarkStyles)
-  }, toDisplayString(_ctx.minValue), 3 /* TEXT, CLASS */), _hoisted_9, createElementVNode("div", {
-    class: normalizeClass(_ctx.labelMarkStyles)
-  }, toDisplayString(_ctx.maxValue), 3 /* TEXT, CLASS */)], 2 /* CLASS */)], 10 /* CLASS, PROPS */, _hoisted_1);
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList([_ctx.minValue, ..._ctx.breakpoints, _ctx.maxValue], breakpoint => {
+    return openBlock(), createElementBlock("div", {
+      key: breakpoint,
+      class: normalizeClass(_ctx.labelMarkStyles),
+      style: normalizeStyle(_ctx.getBreakpointMarkComputedStyles(breakpoint)),
+      disabled: _ctx.disabled
+    }, [renderSlot(_ctx.$slots, `label-${breakpoint}`, {
+      value: breakpoint
+    }, () => [createTextVNode(toDisplayString(breakpoint), 1 /* TEXT */)])], 14 /* CLASS, STYLE, PROPS */, _hoisted_9);
+  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)], 10 /* CLASS, PROPS */, _hoisted_1);
 }
 
 script.render = render;
 script.__file = "src/components/or-range-slider-v3/OrRangeSlider.vue";
 
-export { RangeSlider as R, RangeSliderOrientations as a, RangeSliderRail as b, RangeSliderRailOrientations as c, RangeSliderOffset as d, RangeSliderOffsetOrientations as e, RangeSliderTrack as f, RangeSliderTrackColors as g, RangeSliderThumb as h, RangeSliderThumbColors as i, RangeSliderBreakpointMark as j, RangeSliderBreakpointMarkColors as k, RangeSliderLabel as l, RangeSliderLabelOrientations as m, RangeSliderLabelMark as n, script as s };
+export { RangeSlider as R, RangeSliderOrientations as a, RangeSliderRail as b, RangeSliderRailOrientations as c, RangeSliderOffset as d, RangeSliderOffsetOrientations as e, RangeSliderTrack as f, RangeSliderTrackColors as g, RangeSliderThumb as h, RangeSliderThumbColors as i, RangeSliderBreakpointMark as j, RangeSliderBreakpointMarkColors as k, RangeSliderLabel as l, RangeSliderLabelOrientations as m, RangeSliderLabelMark as n, RangeSliderLabelMarkOrientations as o, script as s };

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

@@ -1 +1 @@
-export { s as default } from '../OrSliderV3-7bddcc19.js';
+export { s as default } from '../OrSliderV3-53a7d617.js';

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

@@ -1 +1 @@
-export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from '../OrSliderV3-7bddcc19.js';
+export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from '../OrSliderV3-53a7d617.js';

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

@@ -1 +1 @@
-export { S as SliderColor, a as SliderOrientation } from '../OrSliderV3-7bddcc19.js';
+export { S as SliderColor, a as SliderOrientation } from '../OrSliderV3-53a7d617.js';

package/dist/bundled/v3/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/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-7bddcc19.js';
+export { b as Slider, j as SliderBreakpointMark, k as SliderBreakpointMarkColors, l as SliderLabel, n as SliderLabelMark, o as SliderLabelMarkOrientations, 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-53a7d617.js';

package/dist/bundled/v3/components/{OrSliderV3-7bddcc19.js → OrSliderV3-53a7d617.js}

@@ -1,4 +1,4 @@
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, withCtx, Fragment, renderList, toDisplayString } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, withCtx, Fragment, renderList, createCommentVNode, renderSlot, createTextVNode, toDisplayString } from 'vue';
 import { h as useElementBounding, a as useElementHover, i as useDraggable, j as clamp } from './OrBottomSheetV3-83beaa38.js';
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { s as script$1 } from './OrTooltipV3-71f1920b.js';
@@ -146,7 +146,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
@@ -170,10 +172,28 @@ 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']
+};
 
 var script = defineComponent({
   components: {
@@ -245,7 +265,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')
@@ -375,10 +395,7 @@ const _hoisted_2 = ["disabled"];
 const _hoisted_3 = ["disabled"];
 const _hoisted_4 = ["disabled"];
 const _hoisted_5 = ["activated", "disabled"];
-const _hoisted_6 = /*#__PURE__*/createElementVNode("div", {
-  class: /*#__PURE__*/normalizeClass(['grow'])
-}, null, -1 /* HOISTED */);
-
+const _hoisted_6 = ["disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrTooltip = resolveComponent("OrTooltip");
   return openBlock(), createElementBlock("div", {
@@ -407,7 +424,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       disabled: _ctx.disabled
     }, null, 10 /* CLASS, PROPS */, _hoisted_4)]),
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["is-open", "content", "placement"]), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.breakpoints, breakpoint => {
+  }, 8 /* PROPS */, ["is-open", "content", "placement"]), _ctx.breakpoints.length > 0 ? (openBlock(true), createElementBlock(Fragment, {
+    key: 0
+  }, renderList([_ctx.minValue, ..._ctx.breakpoints, _ctx.maxValue], breakpoint => {
     return openBlock(), createElementBlock("div", {
       key: breakpoint,
       class: normalizeClass(_ctx.breakpointMarkStyles),
@@ -415,16 +434,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       activated: breakpoint <= _ctx.proxyModelValue,
       disabled: _ctx.disabled
     }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_5);
-  }), 128 /* KEYED_FRAGMENT */))], 10 /* CLASS, PROPS */, _hoisted_2), createElementVNode("div", {
+  }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true)], 10 /* CLASS, PROPS */, _hoisted_2), createElementVNode("div", {
     class: normalizeClass(_ctx.labelStyles)
-  }, [createElementVNode("div", {
-    class: normalizeClass(_ctx.labelMarkStyles)
-  }, toDisplayString(_ctx.minValue), 3 /* TEXT, CLASS */), _hoisted_6, createElementVNode("div", {
-    class: normalizeClass(_ctx.labelMarkStyles)
-  }, toDisplayString(_ctx.maxValue), 3 /* TEXT, CLASS */)], 2 /* CLASS */)], 10 /* CLASS, PROPS */, _hoisted_1);
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList([_ctx.minValue, ..._ctx.breakpoints, _ctx.maxValue], breakpoint => {
+    return openBlock(), createElementBlock("div", {
+      key: breakpoint,
+      class: normalizeClass(_ctx.labelMarkStyles),
+      style: normalizeStyle(_ctx.getBreakpointMarkComputedStyles(breakpoint)),
+      disabled: _ctx.disabled
+    }, [renderSlot(_ctx.$slots, `label-${breakpoint}`, {
+      value: breakpoint
+    }, () => [createTextVNode(toDisplayString(breakpoint), 1 /* TEXT */)])], 14 /* CLASS, STYLE, PROPS */, _hoisted_6);
+  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)], 10 /* CLASS, PROPS */, _hoisted_1);
 }
 
 script.render = render;
 script.__file = "src/components/or-slider-v3/OrSlider.vue";
 
-export { SliderColor as S, SliderOrientation as a, Slider as b, SliderOrientations as c, SliderRail as d, SliderRailOrientations as e, SliderTrack as f, SliderTrackColors as g, SliderThumb as h, SliderThumbColors as i, SliderBreakpointMark as j, SliderBreakpointMarkColors as k, SliderLabel as l, SliderLabelOrientations as m, SliderLabelMark as n, script as s };
+export { SliderColor as S, SliderOrientation as a, Slider as b, SliderOrientations as c, SliderRail as d, SliderRailOrientations as e, SliderTrack as f, SliderTrackColors as g, SliderThumb as h, SliderThumbColors as i, SliderBreakpointMark as j, SliderBreakpointMarkColors as k, SliderLabel as l, SliderLabelOrientations as m, SliderLabelMark as n, SliderLabelMarkOrientations as o, script as s };

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

@@ -77,8 +77,8 @@ export { s as OrRadio } from './OrRadio-57f50838.js';
 export { default as OrRadioGroup } from './OrRadioGroup/OrRadioGroup.js';
 export { default as OrRadioGroupV3 } from './OrRadioGroupV3/OrRadioGroup.js';
 export { s as OrRadioV3 } from './OrRadioV3-091f1eab.js';
-export { s as OrRangeSliderV3 } from './OrRangeSliderV3-5b22cbac.js';
-export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSliderV3-7bddcc19.js';
+export { s as OrRangeSliderV3 } from './OrRangeSliderV3-71b95de0.js';
+export { s as OrSliderV3, S as RangeSliderColor, a as RangeSliderOrientation, S as SliderColor, a as SliderOrientation } from './OrSliderV3-53a7d617.js';
 export { s as OrRatingV3 } from './OrRatingV3-b6b47938.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanelV3-084bbd82.js';
 export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditorV3-ae8f39d3.js';