@onereach/ui-components 8.22.3-beta.4128.0 → 8.22.3-beta.4137.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';
@@ -47,10 +47,6 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: () => false
-    },
-    tooltip: {
-      type: Object,
-      default: () => undefined
     }
   },
   emits: ['update:modelValue'],
@@ -100,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])
@@ -354,26 +350,16 @@ var __vue_render__ = function () {
     attrs: {
       "disabled": _vm.disabled
     }
-  }), _vm._v(" "), _c('OrTooltip', _vm._b({
+  }), _vm._v(" "), _c('OrTooltip', {
     class: ['relative', 'z-10'],
     attrs: {
       "is-open": !_vm.isDragging && (_vm.isHoveringRail || _vm.isHoveringThumbFrom) || _vm.isDragging && _vm.selectedControl === 'from',
+      "content": String(_vm.proxyModelValue[_vm.orientation.endsWith('-reversed') ? 1 : 0]),
       "placement": _vm.tooltipPlacement,
       "offset": 24,
       "external-control": true
-    },
-    scopedSlots: _vm._u([{
-      key: "content",
-      fn: function () {
-        return [_vm._t("tooltipContent", function () {
-          return [_vm._v("\n          " + _vm._s(_vm.proxyModelValue[_vm.orientation.endsWith('-reversed') ? 1 : 0]) + "\n        ")];
-        }, {
-          "value": _vm.proxyModelValue[_vm.orientation.endsWith('-reversed') ? 1 : 0]
-        })];
-      },
-      proxy: true
-    }], null, true)
-  }, 'OrTooltip', _vm.tooltip, false), [_c('div', {
+    }
+  }, [_c('div', {
     ref: "thumbFrom",
     class: _vm.thumbStyles,
     attrs: {
@@ -386,26 +372,16 @@ var __vue_render__ = function () {
     attrs: {
       "disabled": _vm.disabled
     }
-  }), _vm._v(" "), _c('OrTooltip', _vm._b({
+  }), _vm._v(" "), _c('OrTooltip', {
     class: ['relative', 'z-10'],
     attrs: {
       "is-open": !_vm.isDragging && (_vm.isHoveringRail || _vm.isHoveringThumbTo) || _vm.isDragging && _vm.selectedControl === 'to',
+      "content": String(_vm.proxyModelValue[_vm.orientation.endsWith('-reversed') ? 0 : 1]),
       "placement": _vm.tooltipPlacement,
       "offset": 24,
       "external-control": true
-    },
-    scopedSlots: _vm._u([{
-      key: "content",
-      fn: function () {
-        return [_vm._t("tooltipContent", function () {
-          return [_vm._v("\n          " + _vm._s(_vm.proxyModelValue[_vm.orientation.endsWith('-reversed') ? 0 : 1]) + "\n        ")];
-        }, {
-          "value": _vm.proxyModelValue[_vm.orientation.endsWith('-reversed') ? 0 : 1]
-        })];
-      },
-      proxy: true
-    }], null, true)
-  }, 'OrTooltip', _vm.tooltip, false), [_c('div', {
+    }
+  }, [_c('div', {
     ref: "thumbTo",
     class: _vm.thumbStyles,
     attrs: {
@@ -417,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,
@@ -427,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(breakpoint + "-label", function () {
+      return [_vm._v("\n        " + _vm._s(breakpoint) + "\n      ")];
+    }, {
+      "value": breakpoint
+    })], 2);
+  }), 0)]);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/bundled/v2/components/OrRangeSliderV3/OrRangeSlider.vue.d.ts

@@ -74,12 +74,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: () => false;
     };
-    tooltip: {
-        type: PropType<Pick<Readonly<Partial<{
-            [x: number]: string;
-        } | {}> & Omit<{} & {}, never>>, "placement" | "offset" | "debounce">>;
-        default: () => undefined;
-    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: PropType<[number, number]>;
@@ -113,12 +107,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: () => false;
     };
-    tooltip: {
-        type: PropType<Pick<Readonly<Partial<{
-            [x: number]: string;
-        } | {}> & Omit<{} & {}, never>>, "placement" | "offset" | "debounce">>;
-        default: () => undefined;
-    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: [number, number];
     minValue: number;
@@ -128,9 +116,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     color: "primary" | "secondary";
     orientation: "horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed";
     disabled: boolean;
-    tooltip: Pick<Readonly<Partial<{
-        [x: number]: string;
-    } | {}> & Omit<{} & {}, never>>, "placement" | "offset" | "debounce">;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -183,9 +168,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     color: "primary" | "secondary";
     orientation: "horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed";
     disabled: boolean;
-    tooltip: Pick<Readonly<Partial<{
-        [x: number]: string;
-    } | {}> & Omit<{} & {}, never>>, "placement" | "offset" | "debounce">;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -197,8 +179,5 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     color: "primary" | "secondary";
     orientation: "horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed";
     disabled: boolean;
-    tooltip: Pick<Readonly<Partial<{
-        [x: number]: string;
-    } | {}> & Omit<{} & {}, never>>, "placement" | "offset" | "debounce">;
 }, true>);
 export default _default;

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';
@@ -47,10 +47,6 @@ var script = defineComponent({
     disabled: {
       type: Boolean,
       default: () => false
-    },
-    tooltip: {
-      type: Object,
-      default: () => undefined
     }
   },
   emits: ['update:modelValue'],
@@ -81,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')
@@ -232,32 +228,22 @@ var __vue_render__ = function () {
     attrs: {
       "disabled": _vm.disabled
     }
-  }), _vm._v(" "), _c('OrTooltip', _vm._b({
+  }), _vm._v(" "), _c('OrTooltip', {
     class: ['relative', 'z-10'],
     attrs: {
       "is-open": _vm.isHovering || _vm.isDragging,
+      "content": String(_vm.proxyModelValue),
       "placement": _vm.tooltipPlacement,
       "offset": 24,
       "external-control": true
-    },
-    scopedSlots: _vm._u([{
-      key: "content",
-      fn: function () {
-        return [_vm._t("tooltipContent", function () {
-          return [_vm._v("\n          " + _vm._s(_vm.proxyModelValue) + "\n        ")];
-        }, {
-          "value": _vm.proxyModelValue
-        })];
-      },
-      proxy: true
-    }], null, true)
-  }, 'OrTooltip', _vm.tooltip, false), [_c('div', {
+    }
+  }, [_c('div', {
     ref: "thumb",
     class: _vm.thumbStyles,
     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,
@@ -267,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(breakpoint + "-label", function () {
+      return [_vm._v("\n        " + _vm._s(breakpoint) + "\n      ")];
+    }, {
+      "value": breakpoint
+    })], 2);
+  }), 0)]);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/bundled/v2/components/OrSliderV3/OrSlider.vue.d.ts

@@ -56,12 +56,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: () => false;
     };
-    tooltip: {
-        type: PropType<Pick<Readonly<Partial<{
-            [x: number]: string;
-        } | {}> & Omit<{} & {}, never>>, "placement" | "offset" | "debounce">>;
-        default: () => undefined;
-    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: NumberConstructor;
@@ -95,12 +89,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: () => false;
     };
-    tooltip: {
-        type: PropType<Pick<Readonly<Partial<{
-            [x: number]: string;
-        } | {}> & Omit<{} & {}, never>>, "placement" | "offset" | "debounce">>;
-        default: () => undefined;
-    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: number;
     minValue: number;
@@ -110,9 +98,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     color: "primary" | "secondary";
     orientation: "horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed";
     disabled: boolean;
-    tooltip: Pick<Readonly<Partial<{
-        [x: number]: string;
-    } | {}> & Omit<{} & {}, never>>, "placement" | "offset" | "debounce">;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -147,9 +132,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     color: "primary" | "secondary";
     orientation: "horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed";
     disabled: boolean;
-    tooltip: Pick<Readonly<Partial<{
-        [x: number]: string;
-    } | {}> & Omit<{} & {}, never>>, "placement" | "offset" | "debounce">;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -161,8 +143,5 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     color: "primary" | "secondary";
     orientation: "horizontal" | "horizontal-reversed" | "vertical" | "vertical-reversed";
     disabled: boolean;
-    tooltip: Pick<Readonly<Partial<{
-        [x: number]: string;
-    } | {}> & Omit<{} & {}, never>>, "placement" | "offset" | "debounce">;
 }, true>);
 export default _default;

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 };