@onereach/ui-components 10.4.5-beta.4373.0 → 10.5.0-beta.4375.0

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

@@ -11,7 +11,7 @@
     >
       <div
         :class="trackStyles"
-        :style="trackInlineStyles"
+        :style="trackComputedStyles"
         :disabled="disabled"
       />
 
@@ -60,7 +60,7 @@
         :class="labelMarkStyles"
         :style="getBreakpointMarkComputedStyles(breakpoint)"
         :disabled="disabled"
-        :force-state="highlightedBreakpoint === breakpoint ? 'hover' : undefined"
+        :force-state="highlightedBreakpoint === breakpoint ? 'hover' : null"
         @mouseenter="highlightedBreakpoint = breakpoint"
         @mouseleave="highlightedBreakpoint = undefined"
         @click="proxyModelValue = breakpoint"
@@ -81,8 +81,8 @@ import { Position, clamp, useDraggable, useElementBounding, useElementHover } fr
 import { PropType, computed, defineComponent, ref, toRef, watch } from 'vue-demi';
 import { useProxyModelValue } from '../../hooks';
 import { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3';
-import * as Styles from './styles';
-import { SliderColor, SliderModelValue, SliderOrientation } from './types';
+import { SliderColor, SliderOrientation } from './props';
+import { Slider, SliderBreakpointMark, SliderBreakpointMarkColors, SliderLabel, SliderLabelMark, SliderLabelMarkOrientations, SliderLabelOrientations, SliderOrientations, SliderRail, SliderRailOrientations, SliderThumb, SliderThumbColors, SliderTrack, SliderTrackColors } from './styles';
 
 export default defineComponent({
   name: 'OrSlider',
@@ -98,7 +98,7 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: undefined as unknown as PropType<SliderModelValue>,
+      type: Number,
       default: undefined,
     },
 
@@ -119,7 +119,7 @@ export default defineComponent({
 
     breakpoints: {
       type: Array as PropType<number[]>,
-      default: () => [],
+      default: [] as number[],
     },
 
     color: {
@@ -152,29 +152,30 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Refs & Styles
+    // Refs
     const root = ref<HTMLElement>();
+    const rail = ref<HTMLElement>();
+    const thumb = ref<HTMLElement>();
 
+    // Styles
     const rootStyles = computed(() => [
       'or-slider-v3',
-      ...Styles.Slider,
-      ...Styles.SliderOrientations[props.orientation],
+      ...Slider,
+      ...SliderOrientations[props.orientation],
     ]);
 
-    const rail = ref<HTMLElement>();
-
     const railStyles = computed(() => [
       'or-slider-rail-v3',
-      ...Styles.SliderRail,
-      ...Styles.SliderRailOrientations[props.orientation],
+      ...SliderRail,
+      ...SliderRailOrientations[props.orientation],
     ]);
 
     const trackStyles = computed(() => [
-      ...Styles.SliderTrack,
-      ...Styles.SliderTrackColors[props.color],
+      ...SliderTrack,
+      ...SliderTrackColors[props.color],
     ]);
 
-    const trackInlineStyles = computed(() => {
+    const trackComputedStyles = computed(() => {
       switch (props.orientation) {
         case SliderOrientation.Horizontal:
         case SliderOrientation.HorizontalReversed:
@@ -186,27 +187,25 @@ export default defineComponent({
       }
     });
 
-    const thumb = ref<HTMLElement>();
-
     const thumbStyles = computed(() => [
       'or-slider-thumb-v3',
-      ...Styles.SliderThumb,
-      ...Styles.SliderThumbColors[props.color],
+      ...SliderThumb,
+      ...SliderThumbColors[props.color],
     ]);
 
     const breakpointMarkStyles = computed(() => [
-      ...Styles.SliderBreakpointMark,
-      ...Styles.SliderBreakpointMarkColors[props.color],
+      ...SliderBreakpointMark,
+      ...SliderBreakpointMarkColors[props.color],
     ]);
 
     const labelStyles = computed(() => [
-      ...Styles.SliderLabel,
-      ...Styles.SliderLabelOrientations[props.orientation],
+      ...SliderLabel,
+      ...SliderLabelOrientations[props.orientation],
     ]);
 
     const labelMarkStyles = computed(() => [
-      ...Styles.SliderLabelMark,
-      ...Styles.SliderLabelMarkOrientations[props.orientation],
+      ...SliderLabelMark,
+      ...SliderLabelMarkOrientations[props.orientation],
     ]);
 
     // State
@@ -215,7 +214,9 @@ export default defineComponent({
     });
 
     const internalModelValue = computed({
-      get: () => (proxyModelValue.value - props.minValue) / (props.maxValue - props.minValue),
+      get: () => {
+        return (proxyModelValue.value - props.minValue) / (props.maxValue - props.minValue);
+      },
 
       set: (value) => {
         const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
@@ -232,7 +233,7 @@ export default defineComponent({
       }
 
       return Array(Math.ceil(Math.abs(props.maxValue - props.minValue) / props.step))
-        .fill(undefined)
+        .fill(null)
         .map((value, index) => Math.floor((props.minValue + props.step * index) * 1000) / 1000)
         .concat(...props.breakpoints, props.maxValue)
         .sort((a, b) => a - b);
@@ -328,19 +329,14 @@ export default defineComponent({
 
     return {
       root,
-      rootStyles,
-
       rail,
+      thumb,
+      rootStyles,
       railStyles,
-
       trackStyles,
-      trackInlineStyles,
-
-      thumb,
+      trackComputedStyles,
       thumbStyles,
-
       breakpointMarkStyles,
-
       labelStyles,
       labelMarkStyles,
 

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

@@ -1,2 +1,2 @@
 export { default as OrSliderV3 } from './OrSlider.vue';
-export * from './types';
+export * from './props';

package/src/components/or-slider-v3/{types.ts → props.ts}

@@ -1,7 +1,3 @@
-import { ModelValue } from '../../types';
-
-export type SliderModelValue = ModelValue<number>;
-
 export enum SliderColor {
   Primary = 'primary',
   Secondary = 'secondary',

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

@@ -1,4 +1,4 @@
-import { SliderColor, SliderOrientation } from './types';
+import { SliderColor, SliderOrientation } from './props';
 
 export const Slider: string[] = [
   // Interactivity
@@ -154,8 +154,8 @@ export const SliderThumb: string[] = [
 export const SliderThumbColors: Record<SliderColor, string[]> = {
   [SliderColor.Primary]: [
     // Theme
-    'theme-border-primary border-4',
-    'dark:theme-border-primary-dark',
+    'theme-border-4-primary',
+    'dark:theme-border-4-primary-dark',
 
     // Theme (hover)
     'hover:theme-background-primary',
@@ -165,14 +165,14 @@ export const SliderThumbColors: Record<SliderColor, string[]> = {
     'active:theme-background-primary',
     'dark:active:theme-background-primary-dark',
 
-    'active:theme-outline-primary active:outline-10',
-    'dark:active:theme-outline-primary-dark',
+    'active:theme-outline-10-primary',
+    'dark:active:theme-outline-10-primary-dark',
   ],
 
   [SliderColor.Secondary]: [
     // Theme
-    'theme-border-secondary border-4',
-    'dark:theme-border-secondary-dark',
+    'theme-border-4-secondary',
+    'dark:theme-border-4-secondary-dark',
 
     // Theme (hover)
     'hover:theme-background-secondary',
@@ -182,8 +182,8 @@ export const SliderThumbColors: Record<SliderColor, string[]> = {
     'active:theme-background-secondary',
     'dark:active:theme-background-secondary-dark',
 
-    'active:theme-outline-secondary active:outline-10',
-    'dark:active:theme-outline-secondary-dark',
+    'active:theme-outline-10-secondary',
+    'dark:active:theme-outline-10-secondary-dark',
   ],
 };
 

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

@@ -35,12 +35,12 @@ export const SwitchControl: string[] = [
   'theme-background-default',
   'dark:theme-background-default-dark',
 
-  'theme-border-outline border-1',
-  'dark:theme-border-outline-dark',
+  'theme-border-1-outline',
+  'dark:theme-border-1-outline-dark',
 
   // Theme (focus)
-  'focus-visible:theme-outline-primary focus-visible:outline-2',
-  'dark:focus-visible:theme-outline-primary-dark',
+  'focus-visible:theme-outline-2-primary',
+  'dark:focus-visible:theme-outline-2-primary-dark',
 
   // Theme (checked)
   'checked:theme-preset-1-primary',
@@ -104,8 +104,8 @@ export const SwitchLoader: string[] = [
   'rounded-full',
 
   // Theme
-  'theme-border-outline border-1',
-  'dark:theme-border-outline-dark',
+  'theme-border-1-outline',
+  'dark:theme-border-1-outline-dark',
 ];
 
 export const SwitchLoaderHandle: string[] = [

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

@@ -18,8 +18,10 @@ export const Tab: string[] = [
   'theme-foreground-secondary',
   'dark:theme-foreground-secondary-dark',
 
-  'theme-border-transparent border-b-2',
-  'dark:theme-border-transparent-dark',
+  'theme-border-underline',
+
+  'theme-border-2-transparent',
+  'dark:theme-border-2-transparent-dark',
 
   // Theme (hover)
   'hover:md:theme-foreground-default',
@@ -29,28 +31,34 @@ export const Tab: string[] = [
   'active:theme-foreground-default',
   'dark:active:theme-foreground-default-dark',
 
-  'active:theme-border-current active:border-b-2',
-  'dark:active:theme-border-current-dark',
+  'active:theme-border-underline',
+
+  'active:theme-border-2-current',
+  'dark:active:theme-border-2-current-dark',
 
   // Theme (selected)
   'selected:theme-foreground-default',
   'dark:selected:theme-foreground-default-dark',
 
-  'selected:theme-border-current selected:border-b-2',
-  'dark:selected:theme-border-current-dark',
+  'selected:theme-border-underline',
+
+  'selected:theme-border-2-current',
+  'dark:selected:theme-border-2-current-dark',
 
   // Theme (invalid)
   'invalid:theme-foreground-error',
   'dark:invalid:theme-foreground-error-dark',
 
-  // Theme (invalid + hover)
+  // Theme (invalid/hover)
   'hover:invalid:md:theme-foreground-error-hover',
   'dark:hover:invalid:md:theme-foreground-error-hover-dark',
 
-  // Theme (invalid + active)
+  // Theme (invalid/active)
   'active:invalid:theme-foreground-error',
   'dark:active:invalid:theme-foreground-error-dark',
 
-  'active:invalid:theme-border-current active:invalid:border-b-2',
-  'dark:active:invalid:theme-border-current-dark',
+  'active:invalid:theme-border-underline',
+
+  'active:invalid:theme-border-2-current',
+  'dark:active:invalid:theme-border-2-current-dark',
 ];

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

@@ -17,8 +17,10 @@ export const Tabs: string[] = [
   'grid grid-flow-col items-center shrink-0',
 
   // Theme
-  'theme-border-outline border-b-1',
-  'dark:theme-border-outline',
+  'theme-border-underline',
+
+  'theme-border-1-outline',
+  'dark:theme-border-1-outline',
 ];
 
 export const TabsVariants: Record<TabsVariant, string[]> = {

package/src/components/or-tag-input-v3/OrTagInput.vue

@@ -173,7 +173,7 @@ export default defineComponent({
   props: {
     modelValue: {
       type: undefined as unknown as PropType<TagInputModelValue>,
-      default: () => [],
+      default: [] as string[],
     },
 
     label: {
@@ -293,7 +293,7 @@ export default defineComponent({
 
     const activated = ref(false);
     const proxyModelValue = useProxyModelValue(modelValue, context.emit);
-    const draftModelValue = ref<string>();
+    const draftModelValue = ref<string>('');
 
     const tagsItems = computed(() => {
       return toArray(proxyModelValue.value).map((item) => ({
@@ -310,7 +310,7 @@ export default defineComponent({
     const maxLength = computed(() => controlAttributes.maxlength);
 
     const controlInlineStyles = computed(() => {
-      const chars = draftModelValue.value
+      const chars = draftModelValue.value.length > 0
         ? draftModelValue.value.length
         : currentLength.value === 0
           ? placeholder.value?.length ?? 0
@@ -321,7 +321,7 @@ export default defineComponent({
     });
 
     const showControl = computed(() => {
-      return draftModelValue.value
+      return draftModelValue.value.length > 0
         || currentLength.value === 0
         || activated.value;
     });

package/src/components/or-time-range-picker-v3/OrTimeRangePicker.vue

@@ -319,7 +319,7 @@ export default defineComponent({
       get: () => draft.value?.[0],
 
       set: (value) => {
-        draft.value = [value, draft.value?.[1]];
+        draft.value = [value ?? null, draft.value?.[1] ?? null];
       },
     });
 
@@ -327,7 +327,7 @@ export default defineComponent({
       get: () => draft.value?.[1],
 
       set: (value) => {
-        draft.value = [draft.value?.[0], value];
+        draft.value = [draft.value?.[0] ?? null, value ?? null];
       },
     });
 
@@ -347,7 +347,7 @@ export default defineComponent({
     }
 
     function reset(): void {
-      draft.value = model.value ?? [undefined, undefined];
+      draft.value = model.value ?? [null, null];
     }
 
     function openPopover(control: 'from' | 'to'): void {

package/src/types/index.ts

@@ -1,9 +1,7 @@
-export * from './DataModel';
 export * from './DateFormat';
 export * from './FilterFunction';
 export * from './Group';
 export * from './GroupFunction';
-export * from './Id';
 export * from './Item';
 export * from './Locale';
 export * from './ModelValue';