@onereach/ui-components 10.4.5-beta.4385.0 → 10.4.5-beta.4387.0

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

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

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

@@ -1,4 +1,4 @@
-import { SliderColor, SliderOrientation } from './props';
+import { SliderColor, SliderOrientation } from './types';
 
 export const Slider: string[] = [
   // Interactivity
@@ -154,8 +154,8 @@ export const SliderThumb: string[] = [
 export const SliderThumbColors: Record<SliderColor, string[]> = {
   [SliderColor.Primary]: [
     // Theme
-    'theme-border-4-primary',
-    'dark:theme-border-4-primary-dark',
+    'theme-border-primary border-4',
+    'dark:theme-border-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-10-primary',
-    'dark:active:theme-outline-10-primary-dark',
+    'active:theme-outline-primary active:outline-10',
+    'dark:active:theme-outline-primary-dark',
   ],
 
   [SliderColor.Secondary]: [
     // Theme
-    'theme-border-4-secondary',
-    'dark:theme-border-4-secondary-dark',
+    'theme-border-secondary border-4',
+    'dark:theme-border-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-10-secondary',
-    'dark:active:theme-outline-10-secondary-dark',
+    'active:theme-outline-secondary active:outline-10',
+    'dark:active:theme-outline-secondary-dark',
   ],
 };
 

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

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

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-1-outline',
-  'dark:theme-border-1-outline-dark',
+  'theme-border-outline border-1',
+  'dark:theme-border-outline-dark',
 
   // Theme (focus)
-  'focus-visible:theme-outline-2-primary',
-  'dark:focus-visible:theme-outline-2-primary-dark',
+  'focus-visible:theme-outline-primary focus-visible:outline-2',
+  'dark:focus-visible:theme-outline-primary-dark',
 
   // Theme (checked)
   'checked:theme-preset-1-primary',
@@ -104,8 +104,8 @@ export const SwitchLoader: string[] = [
   'rounded-full',
 
   // Theme
-  'theme-border-1-outline',
-  'dark:theme-border-1-outline-dark',
+  'theme-border-outline border-1',
+  'dark:theme-border-outline-dark',
 ];
 
 export const SwitchLoaderHandle: string[] = [

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

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

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

@@ -17,10 +17,8 @@ export const Tabs: string[] = [
   'grid grid-flow-col items-center shrink-0',
 
   // Theme
-  'theme-border-underline',
-
-  'theme-border-1-outline',
-  'dark:theme-border-1-outline',
+  'theme-border-outline border-b-1',
+  'dark:theme-border-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: [] as string[],
+      default: () => [],
     },
 
     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.length > 0
+      const chars = draftModelValue.value
         ? draftModelValue.value.length
         : currentLength.value === 0
           ? placeholder.value?.length ?? 0
@@ -321,7 +321,7 @@ export default defineComponent({
     });
 
     const showControl = computed(() => {
-      return draftModelValue.value.length > 0
+      return draftModelValue.value
         || 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 ?? null, draft.value?.[1] ?? null];
+        draft.value = [value, draft.value?.[1]];
       },
     });
 
@@ -327,7 +327,7 @@ export default defineComponent({
       get: () => draft.value?.[1],
 
       set: (value) => {
-        draft.value = [draft.value?.[0] ?? null, value ?? null];
+        draft.value = [draft.value?.[0], value];
       },
     });
 
@@ -347,7 +347,7 @@ export default defineComponent({
     }
 
     function reset(): void {
-      draft.value = model.value ?? [null, null];
+      draft.value = model.value ?? [undefined, undefined];
     }
 
     function openPopover(control: 'from' | 'to'): void {

package/src/types/DataModel.ts

@@ -0,0 +1,3 @@
+import { Id } from '.';
+
+export type DataModel<T extends { id: Id; } = { id: Id; }> = T;

package/src/types/Id.ts

@@ -0,0 +1 @@
+export type Id = string | number;

package/src/types/index.ts

@@ -1,7 +1,9 @@
+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';

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

@@ -1 +0,0 @@
-export { a as SliderColor, S as SliderOrientation } from '../OrSliderV3-6458c893.js';