@onereach/ui-components 8.10.0 → 8.10.1-beta.3757.0

package/src/components/or-button-group-v3/styles.ts

@@ -16,10 +16,10 @@ export const ButtonGroupVariants: Record<ButtonGroupVariant, string[]> = {
   ],
 
   [ButtonGroupVariant.Outlined]: [
-    // Position
-    'relative',
+    // Position (children)
+    'children:relative',
 
-    // Position (active, children)
+    // Position (children/active)
     'active:children:z-10',
 
     // Spacing

package/src/components/or-combined-input-v3/styles.ts

@@ -13,13 +13,16 @@ export const CombinedInputControlGroup: string[] = [
   // Box
   'w-full',
 
-  // Shape (.or-input-box-v3)
-  '[&_.or-input-box-v3]:first-child:rounded-r-none',
-  '[&_.or-input-box-v3]:middle-child:rounded-none',
-  '[&_.or-input-box-v3]:last-child:rounded-l-none',
+  // Position (.or-input-box-v3)
+  '[&_.or-input-box-v3]:children:relative',
+
+  // Position (.or-input-box-v3/focus)
+  'focus-within:[&_.or-input-box-v3]:children:z-10',
 
   // Spacing (.or-input-box-v3)
-  '[&_.or-input-box-v3]:first-child:mr-[-1px]',
-  '[&_.or-input-box-v3]:middle-child:border-x-0',
-  '[&_.or-input-box-v3]:last-child:ml-[-1px]',
+  '[&_.or-input-box-v3]:[&:not(:first-child)]:children:ml-[-1px]',
+
+  // Shape (.or-input-box-v3)
+  '[&_.or-input-box-v3]:[&:not(:first-child)]:children:rounded-l-none',
+  '[&_.or-input-box-v3]:[&:not(:last-child)]:children:rounded-r-none',
 ];

package/src/components/or-input-box-v3/styles.ts

@@ -96,8 +96,8 @@ export const InputBoxSizes: Record<InputBoxSize, string[]> = {
     'children:min-h-[46px] children:md:min-h-[34px]',
 
     // Spacing
-    'first-child:ml-md first-child:md:ml-sm+',
-    'last-child:mr-md last-child:md:mr-sm+',
+    'first:children:ml-md first:children:md:ml-sm+',
+    'last:children:mr-md last:children:md:mr-sm+',
 
     'gap-sm+ md:gap-sm',
 
@@ -110,8 +110,8 @@ export const InputBoxSizes: Record<InputBoxSize, string[]> = {
     'children:min-h-[30px]',
 
     // Spacing
-    'first-child:ml-md first-child:md:ml-sm+',
-    'last-child:mr-md last-child:md:mr-sm+',
+    'first:children:ml-md first:children:md:ml-sm+',
+    'last:children:mr-md last:children:md:mr-sm+',
 
     'gap-[6px]',
 

package/src/components/or-notification-v3/OrNotification.vue

@@ -28,7 +28,7 @@ import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { NotificationVariant } from './props';
-import { NotificationIcon, NotificationIconVariants, NotificationRoot, NotificationRootVariants } from './styles';
+import { Notification, NotificationIcon, NotificationIconVariants, NotificationVariants } from './styles';
 
 export default defineComponent({
   name: 'OrNotification',
@@ -61,8 +61,8 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-notification-v3',
-      ...NotificationRoot,
-      ...NotificationRootVariants[props.variant],
+      ...Notification,
+      ...NotificationVariants[props.variant],
     ]);
 
     const iconStyles = computed(() => [

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

@@ -1,6 +1,6 @@
 import { NotificationVariant } from './props';
 
-export const NotificationRoot: string[] = [
+export const Notification: string[] = [
   // Layout
   'layout-row !items-start',
 
@@ -16,27 +16,27 @@ export const NotificationRoot: string[] = [
   // Typography
   'typography-body-2-regular',
 
-  // Typography (links)
-  'links:typography-body-2-bold',
-
-  // Theme
-  'theme-foreground-default',
-  'dark:theme-foreground-default-dark',
+  // Typography (children)
+  '[&_:any-link]:typography-body-2-bold',
 
   // Elevation
   'shadow-contextual',
   'dark:shadow-contextual-dark',
+
+  // Theme
+  'theme-foreground-default',
+  'dark:theme-foreground-default-dark',
 ];
 
-export const NotificationRootVariants: Record<NotificationVariant, string[]> = {
+export const NotificationVariants: Record<NotificationVariant, string[]> = {
   'success': [
     // Theme
     'theme-background-success-container',
     'dark:theme-background-success-container-dark',
 
-    // Theme (links)
-    'links:theme-foreground-success',
-    'dark:links:theme-foreground-success-dark',
+    // Theme (children)
+    '[&_:any-link]:theme-foreground-success',
+    'dark:[&_:any-link]:theme-foreground-success-dark',
   ],
 
   'warning': [
@@ -44,9 +44,9 @@ export const NotificationRootVariants: Record<NotificationVariant, string[]> = {
     'theme-background-warning-container',
     'dark:theme-background-warning-container-dark',
 
-    // Theme (links)
-    'links:theme-foreground-warning',
-    'dark:links:theme-foreground-warning-dark',
+    // Theme (children)
+    '[&_:any-link]:theme-foreground-warning',
+    'dark:[&_:any-link]:theme-foreground-warning-dark',
   ],
 
   'error': [
@@ -54,9 +54,9 @@ export const NotificationRootVariants: Record<NotificationVariant, string[]> = {
     'theme-background-error-container',
     'dark:theme-background-error-container-dark',
 
-    // Theme (links)
-    'links:theme-foreground-error',
-    'dark:links:theme-foreground-error-dark',
+    // Theme (children)
+    '[&_:any-link]:theme-foreground-error',
+    'dark:[&_:any-link]:theme-foreground-error-dark',
   ],
 
   'info': [
@@ -64,9 +64,9 @@ export const NotificationRootVariants: Record<NotificationVariant, string[]> = {
     'theme-background-primary-container',
     'dark:theme-background-primary-container-dark',
 
-    // Theme (links)
-    'links:theme-foreground-primary',
-    'dark:links:theme-foreground-primary-dark',
+    // Theme (children)
+    '[&_:any-link]:theme-foreground-primary',
+    'dark:[&_:any-link]:theme-foreground-primary-dark',
   ],
 };
 

package/src/components/or-range-slider-v3/OrRangeSlider.vue

@@ -10,6 +10,7 @@
       :disabled="disabled"
     >
       <div
+        ref="offset"
         :class="offsetStyles"
         :style="offsetComputedStyles"
         :disabled="disabled"
@@ -17,10 +18,10 @@
 
       <OrTooltip
         :class="['relative', 'z-10']"
-        :is-open="isHovering || isDragging"
+        :is-open="(!isDragging && (isHoveringRail || isHoveringThumbFrom)) || (isDragging && selectedControl === 'from')"
         :content="String(proxyModelValue[0])"
         :placement="orientation === 'horizontal' ? 'top' : 'right'"
-        :offset="8"
+        :offset="24"
         :external-control="true"
       >
         <div
@@ -31,6 +32,7 @@
       </OrTooltip>
 
       <div
+        ref="track"
         :class="trackStyles"
         :style="trackComputedStyles"
         :disabled="disabled"
@@ -38,10 +40,10 @@
 
       <OrTooltip
         :class="['relative', 'z-10']"
-        :is-open="isHovering || isDragging"
+        :is-open="(!isDragging && (isHoveringRail || isHoveringThumbTo)) || (isDragging && selectedControl === 'to')"
         :content="String(proxyModelValue[1])"
         :placement="orientation === 'horizontal' ? 'top' : 'right'"
-        :offset="8"
+        :offset="24"
         :external-control="true"
       >
         <div
@@ -50,6 +52,12 @@
           :disabled="disabled"
         />
       </OrTooltip>
+
+      <div
+        ref="filler"
+        :class="['grow', ...offsetStyles]"
+        :disabled="disabled"
+      />
     </div>
 
     <div :class="labelStyles">
@@ -68,7 +76,7 @@
 
 <script lang="ts">
 import { Position, clamp, useDraggable, useElementBounding, useElementHover } from '@vueuse/core';
-import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRef, watch } from 'vue-demi';
 import { useProxyModelValue } from '../../hooks';
 import { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3';
 import { RangeSliderColor, RangeSliderOrientation } from './props';
@@ -105,6 +113,11 @@ export default defineComponent({
       default: 1,
     },
 
+    breakpoints: {
+      type: Array as PropType<number[]>,
+      default: () => [],
+    },
+
     color: {
       type: String as PropType<`${RangeSliderColor}`>,
       default: RangeSliderColor.Primary,
@@ -133,6 +146,9 @@ export default defineComponent({
     // Refs
     const root = ref<HTMLElement>();
     const rail = ref<HTMLElement>();
+    const offset = ref<HTMLElement>();
+    const track = ref<HTMLElement>();
+    const filler = ref<HTMLElement>();
     const thumbFrom = ref<HTMLElement>();
     const thumbTo = ref<HTMLElement>();
 
@@ -191,9 +207,14 @@ export default defineComponent({
       },
 
       set: (value) => {
+        const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
+
         proxyModelValue.value = [
-          Math.round(value * (props.maxValue - props.minValue) + props.minValue),
-          Math.round(internalModelValueTo.value * (props.maxValue - props.minValue) + props.minValue),
+          internalBreakpoints.value.reduce((a, b) => {
+            return Math.abs(a - modelValue) < Math.abs(b - modelValue) ? a : b;
+          }),
+
+          internalModelValueTo.value * (props.maxValue - props.minValue) + props.minValue,
         ];
       },
     });
@@ -204,13 +225,30 @@ export default defineComponent({
       },
 
       set: (value) => {
+        const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
+
         proxyModelValue.value = [
-          Math.round(internalModelValueFrom.value * (props.maxValue - props.minValue) + props.minValue),
-          Math.round(value * (props.maxValue - props.minValue) + props.minValue),
+          internalModelValueFrom.value * (props.maxValue - props.minValue) + props.minValue,
+
+          internalBreakpoints.value.reduce((a, b) => {
+            return Math.abs(a - modelValue) < Math.abs(b - modelValue) ? a : b;
+          }),
         ];
       },
     });
 
+    const internalBreakpoints = computed(() => {
+      if (!props.step) {
+        return [props.minValue, ...props.breakpoints, props.maxValue];
+      }
+
+      return Array(Math.ceil(Math.abs(props.maxValue - props.minValue) / props.step))
+        .fill(null)
+        .map((value, index) => Math.floor((props.minValue + props.step * index) * 1000) / 1000)
+        .concat(...props.breakpoints, props.maxValue)
+        .sort((a, b) => a - b);
+    });
+
     const railBoundingBox = useElementBounding(rail);
 
     const selectedControl = ref<'from' | 'to'>();
@@ -236,7 +274,16 @@ export default defineComponent({
     }
 
     // Effects
-    const isHovering = useElementHover(rail);
+    const isHoveringOffset = useElementHover(offset);
+    const isHoveringTrack = useElementHover(track);
+    const isHoveringFiller = useElementHover(filler);
+
+    const isHoveringRail = computed(() => {
+      return isHoveringOffset.value || isHoveringTrack.value || isHoveringFiller.value;
+    });
+
+    const isHoveringThumbFrom = useElementHover(thumbFrom);
+    const isHoveringThumbTo = useElementHover(thumbTo);
 
     const { isDragging } = useDraggable(rail, {
       onStart: (position, event) => {
@@ -260,9 +307,25 @@ export default defineComponent({
       onEnd: onDrag,
     });
 
+    // Constraints
+    watch(toRef(props, 'minValue'), (value) => {
+      if (value >= props.maxValue) {
+        throw new Error('OrRangeSlider: `minValue` cannot be greater or equal to `maxValue`.');
+      }
+    }, { immediate: true });
+
+    watch(toRef(props, 'maxValue'), (value) => {
+      if (value <= props.minValue) {
+        throw new Error('OrRangeSlider: `maxValue` cannot be lesser or equal to `minValue`.');
+      }
+    }, { immediate: true });
+
     return {
       root,
       rail,
+      offset,
+      track,
+      filler,
       thumbFrom,
       thumbTo,
       rootStyles,
@@ -276,11 +339,14 @@ export default defineComponent({
       labelMarkStyles,
 
       proxyModelValue,
-      internalModelValueFrom,
-      internalModelValueTo,
       selectedControl,
 
-      isHovering,
+      isHoveringOffset,
+      isHoveringTrack,
+      isHoveringFiller,
+      isHoveringRail,
+      isHoveringThumbFrom,
+      isHoveringThumbTo,
       isDragging,
     };
   },

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

@@ -63,17 +63,24 @@ export const RangeSliderRailOrientations: Record<RangeSliderOrientation, string[
 export const RangeSliderOffset: string[] = [];
 
 export const RangeSliderOffsetOrientations: Record<RangeSliderOrientation, string[]> = {
-  [RangeSliderOrientation.Horizontal]: [],
-  [RangeSliderOrientation.Vertical]: [],
+  [RangeSliderOrientation.Horizontal]: [
+    // Box
+    'h-full',
+  ],
+
+  [RangeSliderOrientation.Vertical]: [
+    // Box
+    'w-full',
+  ],
 };
 
 export const RangeSliderTrack: string[] = [
+  // Shape
+  'rounded-full',
+
   // Box
   'w-full',
   'h-full',
-
-  // Shape
-  'rounded-full',
 ];
 
 export const RangeSliderTrackColors: Record<RangeSliderColor, string[]> = {
@@ -94,6 +101,9 @@ export const RangeSliderThumb: string[] = [
   // Layout
   'shrink-0',
 
+  // Shape
+  'rounded-full',
+
   // Box
   'w-[20px]',
   'h-[20px]',
@@ -101,11 +111,9 @@ export const RangeSliderThumb: string[] = [
   '-mx-[10px]',
   '-my-[10px]',
 
-  // Shape
-  'rounded-full',
-
   // Theme
-  'bg-white dark:bg-black',
+  'theme-background-base',
+  'dark:theme-background-base-dark',
 ];
 
 export const RangeSliderThumbColors: Record<RangeSliderColor, string[]> = {
@@ -114,16 +122,16 @@ export const RangeSliderThumbColors: Record<RangeSliderColor, string[]> = {
     'theme-border-4-primary',
     'dark:theme-border-4-primary-dark',
 
-    // Theme (enabled, hover)
-    'hover:enabled:theme-background-primary',
-    'dark:hover:enabled:theme-background-primary-dark',
+    // Theme (hover)
+    'hover:theme-background-primary',
+    'dark:hover:theme-background-primary-dark',
 
-    // Theme (enabled, active)
-    'active:enabled:theme-background-primary',
-    'dark:active:enabled:theme-background-primary-dark',
+    // Theme (active)
+    'active:theme-background-primary',
+    'dark:active:theme-background-primary-dark',
 
-    'active:enabled:theme-outline-10-primary',
-    'dark:active:enabled:theme-outline-10-primary-dark',
+    'active:theme-outline-10-primary',
+    'dark:active:theme-outline-10-primary-dark',
   ],
 
   [RangeSliderColor.Secondary]: [
@@ -131,16 +139,16 @@ export const RangeSliderThumbColors: Record<RangeSliderColor, string[]> = {
     'theme-border-4-secondary',
     'dark:theme-border-4-secondary-dark',
 
-    // Theme (enabled, hover)
-    'hover:enabled:theme-background-secondary',
-    'dark:hover:enabled:theme-background-secondary-dark',
+    // Theme (hover)
+    'hover:theme-background-secondary',
+    'dark:hover:theme-background-secondary-dark',
 
-    // Theme (enabled, active)
-    'active:enabled:theme-background-secondary',
-    'dark:active:enabled:theme-background-secondary-dark',
+    // Theme (active)
+    'active:theme-background-secondary',
+    'dark:active:theme-background-secondary-dark',
 
-    'active:enabled:theme-outline-10-secondary',
-    'dark:active:enabled:theme-outline-10-secondary-dark',
+    'active:theme-outline-10-secondary',
+    'dark:active:theme-outline-10-secondary-dark',
   ],
 };
 

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

@@ -20,7 +20,7 @@
         :is-open="isHovering || isDragging"
         :content="String(proxyModelValue)"
         :placement="orientation === 'horizontal' ? 'top' : 'right'"
-        :offset="8"
+        :offset="24"
         :external-control="true"
       >
         <div
@@ -47,7 +47,7 @@
 
 <script lang="ts">
 import { Position, clamp, useDraggable, useElementBounding, useElementHover } from '@vueuse/core';
-import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
+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';
@@ -84,6 +84,11 @@ export default defineComponent({
       default: 1,
     },
 
+    breakpoints: {
+      type: Array as PropType<number[]>,
+      default: () => [],
+    },
+
     color: {
       type: String as PropType<`${SliderColor}`>,
       default: SliderColor.Primary,
@@ -160,10 +165,26 @@ export default defineComponent({
       },
 
       set: (value) => {
-        proxyModelValue.value = Math.round(value * (props.maxValue - props.minValue) + props.minValue);
+        const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
+
+        proxyModelValue.value = internalBreakpoints.value.reduce((a, b) => {
+          return Math.abs(a - modelValue) < Math.abs(b - modelValue) ? a : b;
+        });
       },
     });
 
+    const internalBreakpoints = computed(() => {
+      if (!props.step) {
+        return [props.minValue, ...props.breakpoints, props.maxValue];
+      }
+
+      return Array(Math.ceil(Math.abs(props.maxValue - props.minValue) / props.step))
+        .fill(null)
+        .map((value, index) => Math.floor((props.minValue + props.step * index) * 1000) / 1000)
+        .concat(...props.breakpoints, props.maxValue)
+        .sort((a, b) => a - b);
+    });
+
     const railBoundingBox = useElementBounding(rail);
 
     // Handlers
@@ -189,6 +210,19 @@ export default defineComponent({
       onEnd: onDrag,
     });
 
+    // Constraints
+    watch(toRef(props, 'minValue'), (value) => {
+      if (value >= props.maxValue) {
+        throw new Error('OrRangeSlider: `minValue` cannot be greater or equal to `maxValue`.');
+      }
+    }, { immediate: true });
+
+    watch(toRef(props, 'maxValue'), (value) => {
+      if (value <= props.minValue) {
+        throw new Error('OrRangeSlider: `maxValue` cannot be lesser or equal to `minValue`.');
+      }
+    }, { immediate: true });
+
     return {
       root,
       rail,
@@ -202,7 +236,6 @@ export default defineComponent({
       labelMarkStyles,
 
       proxyModelValue,
-      internalModelValue,
 
       isHovering,
       isDragging,

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

@@ -61,12 +61,12 @@ export const SliderRailOrientations: Record<SliderOrientation, string[]> = {
 };
 
 export const SliderTrack: string[] = [
+  // Shape
+  'rounded-full',
+
   // Box
   'w-full',
   'h-full',
-
-  // Shape
-  'rounded-full',
 ];
 
 export const SliderTrackColors: Record<SliderColor, string[]> = {
@@ -87,6 +87,9 @@ export const SliderThumb: string[] = [
   // Layout
   'shrink-0',
 
+  // Shape
+  'rounded-full',
+
   // Box
   'w-[20px]',
   'h-[20px]',
@@ -94,11 +97,9 @@ export const SliderThumb: string[] = [
   '-mx-[10px]',
   '-my-[10px]',
 
-  // Shape
-  'rounded-full',
-
   // Theme
-  'bg-white dark:bg-black',
+  'theme-background-base',
+  'dark:theme-background-base-dark',
 ];
 
 export const SliderThumbColors: Record<SliderColor, string[]> = {
@@ -107,16 +108,16 @@ export const SliderThumbColors: Record<SliderColor, string[]> = {
     'theme-border-4-primary',
     'dark:theme-border-4-primary-dark',
 
-    // Theme (enabled, hover)
-    'hover:enabled:theme-background-primary',
-    'dark:hover:enabled:theme-background-primary-dark',
+    // Theme (hover)
+    'hover:theme-background-primary',
+    'dark:hover:theme-background-primary-dark',
 
-    // Theme (enabled, active)
-    'active:enabled:theme-background-primary',
-    'dark:active:enabled:theme-background-primary-dark',
+    // Theme (active)
+    'active:theme-background-primary',
+    'dark:active:theme-background-primary-dark',
 
-    'active:enabled:theme-outline-10-primary',
-    'dark:active:enabled:theme-outline-10-primary-dark',
+    'active:theme-outline-10-primary',
+    'dark:active:theme-outline-10-primary-dark',
   ],
 
   [SliderColor.Secondary]: [
@@ -124,16 +125,16 @@ export const SliderThumbColors: Record<SliderColor, string[]> = {
     'theme-border-4-secondary',
     'dark:theme-border-4-secondary-dark',
 
-    // Theme (enabled, hover)
-    'hover:enabled:theme-background-secondary',
-    'dark:hover:enabled:theme-background-secondary-dark',
+    // Theme (hover)
+    'hover:theme-background-secondary',
+    'dark:hover:theme-background-secondary-dark',
 
-    // Theme (enabled, active)
-    'active:enabled:theme-background-secondary',
-    'dark:active:enabled:theme-background-secondary-dark',
+    // Theme (active)
+    'active:theme-background-secondary',
+    'dark:active:theme-background-secondary-dark',
 
-    'active:enabled:theme-outline-10-secondary',
-    'dark:active:enabled:theme-outline-10-secondary-dark',
+    'active:theme-outline-10-secondary',
+    'dark:active:theme-outline-10-secondary-dark',
   ],
 };