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

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

@@ -26,21 +26,21 @@ export const InputBoxVariants: Record<InputBoxVariant, string[]> = {
     'theme-foreground-default',
     'dark:theme-foreground-default-dark',
 
-    'theme-border-outline border-1',
-    'dark:theme-border-outline-dark',
+    'theme-border-1-outline',
+    'dark:theme-border-1-outline-dark',
 
-    'theme-outline-transparent outline-2',
-    'dark:theme-outline-transparent',
+    'theme-outline-2-transparent',
+    'dark:theme-outline-2-transparent',
 
     // Theme (focus)
     'focus-within:theme-background-primary-translucent-1',
     'dark:focus-within:theme-background-primary-translucent-1-dark',
 
-    'focus-within:theme-border-primary focus-within:border-1',
-    'dark:focus-within:theme-border-primary-dark',
+    'focus-within:theme-border-1-primary',
+    'dark:focus-within:theme-border-1-primary-dark',
 
-    'focus-within:theme-outline-primary focus-within:outline-2',
-    'dark:focus-within:theme-outline-primary-dark',
+    'focus-within:theme-outline-2-primary',
+    'dark:focus-within:theme-outline-2-primary-dark',
 
     // Theme (invalid)
     'invalid:theme-preset-3-error',
@@ -52,21 +52,21 @@ export const InputBoxVariants: Record<InputBoxVariant, string[]> = {
     'invalid:theme-foreground-default',
     'dark:invalid:theme-foreground-default-dark',
 
-    'invalid:theme-border-error invalid:border-1',
-    'dark:invalid:theme-border-error-dark',
+    'invalid:theme-border-1-error',
+    'dark:invalid:theme-border-1-error-dark',
 
-    'invalid:theme-outline-transparent invalid:outline-2',
-    'dark:invalid:theme-outline-transparent',
+    'invalid:theme-outline-2-transparent',
+    'dark:invalid:theme-outline-2-transparent',
 
-    // Theme (invalid + focus)
+    // Theme (invalid/focus)
     'invalid:focus-within:theme-background-error-translucent-1',
     'dark:invalid:focus-within:theme-background-error-translucent-1-dark',
 
-    'invalid:focus-within:theme-border-error invalid:focus-within:border-1',
-    'dark:invalid:focus-within:theme-border-error-dark',
+    'invalid:focus-within:theme-border-1-error',
+    'dark:invalid:focus-within:theme-border-1-error-dark',
 
-    'invalid:focus-within:theme-outline-error invalid:focus-within:outline-2',
-    'dark:invalid:focus-within:theme-outline-error-dark',
+    'invalid:focus-within:theme-outline-2-error',
+    'dark:invalid:focus-within:theme-outline-2-error-dark',
 
     // Theme (read-only)
     'read-only:theme-background-primary-translucent-1',

package/src/components/or-input-v3/OrInput.vue

@@ -74,7 +74,7 @@
                 :icon="'close'"
                 :color="'inherit'"
                 :disabled="disabled"
-                @click.stop="clear()"
+                @click.stop="$emit('update:modelValue', '')"
               />
             </template>
 
@@ -239,7 +239,6 @@ export default defineComponent({
   expose: [
     'root',
 
-    'clear',
     'focus',
     'blur',
   ],
@@ -278,10 +277,6 @@ export default defineComponent({
     });
 
     // Methods
-    function clear(): void {
-      model.value = undefined;
-    }
-
     function focus(): void {
       control.value?.focus();
     }
@@ -308,7 +303,6 @@ export default defineComponent({
       length,
       maxLength,
 
-      clear,
       focus,
       blur,
 

package/src/components/or-list-v3/partials/or-list-item/styles.ts

@@ -2,20 +2,20 @@ export const ListItem: string[] = [
   // Interactivity (draggable)
   'draggable:interactivity-drag',
 
-  // Shape
-  'rounded-md',
-
   // Spacing
   'px-md md:px-sm',
   'py-md md:py-sm',
 
+  // Shape
+  'rounded-md',
+
   // Theme (hover)
   'hover:theme-background-primary-translucent-1',
   'dark:hover:theme-background-primary-translucent-1-dark',
 
   // Theme (focus)
-  'focus-within:theme-outline-primary focus-within:outline-2',
-  'dark:focus-within:theme-outline-primary-dark',
+  'focus-within:theme-outline-2-primary',
+  'dark:focus-within:theme-outline-2-primary-dark',
 
   // Theme (selected)
   'selected:theme-background-primary-translucent-3',

package/src/components/or-pagination-v3/OrPagination.vue

@@ -9,7 +9,7 @@
         :variant="'link'"
         :color="'inherit'"
         :disabled="currentPage === firstPage"
-        @click="toPreviousPage()"
+        @click.stop="toPreviousPage()"
       >
         <OrIcon :icon="'keyboard_arrow_left'" />
       </OrButton>
@@ -22,7 +22,7 @@
           :variant="'link'"
           :color="'inherit'"
           :activated="currentPage === page"
-          @click="typeof page === 'number' && toPage(page)"
+          @click.stop="typeof page === 'number' && toPage(page)"
         >
           {{ page }}
         </OrButton>
@@ -32,7 +32,7 @@
           :variant="'link'"
           :color="'inherit'"
           :disabled="currentPage === lastPage"
-          @click="toNextPage()"
+          @click.stop="toNextPage()"
         >
           <OrIcon :icon="'keyboard_arrow_right'" />
         </OrButton>
@@ -50,7 +50,7 @@
         :variant="'link'"
         :color="'inherit'"
         :activated="true"
-        @click="limitMenu && limitMenu.open()"
+        @click.stop="limitMenu.open()"
       >
         {{ currentLimit }} <OrIcon :icon="limitMenu && limitMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'" />
       </OrButton>
@@ -62,9 +62,9 @@
         :placement="'top'"
       >
         <OrMenuItem
-          v-for="pageSize in options"
+          v-for="pageSize in pageSizeOptions"
           :key="pageSize"
-          @click="currentLimit = pageSize; limitMenu && limitMenu.close()"
+          @click.stop="currentLimit = pageSize; limitMenu.close()"
         >
           {{ pageSize }}
         </OrMenuItem>
@@ -78,7 +78,7 @@
           :variant="'link'"
           :color="'inherit'"
           :disabled="currentPage === lastPage"
-          @click="toNextPage()"
+          @click.stop="toNextPage()"
         >
           <OrIcon :icon="'keyboard_arrow_right'" />
         </OrButton>
@@ -95,7 +95,7 @@ import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrMenuV3 as OrMenu } from '../or-menu-v3';
 import { PaginationItem, PaginationLimitControl, PaginationOffsetControl, PaginationRoot } from './styles';
-import { PaginationModelValue } from './types';
+import { PaginationModel } from './types';
 
 export default defineComponent({
   name: 'OrPagination',
@@ -114,7 +114,7 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: undefined as unknown as PropType<PaginationModelValue>,
+      type: Object as PropType<PaginationModel>,
       default: undefined,
     },
 
@@ -123,7 +123,7 @@ export default defineComponent({
       required: true,
     },
 
-    options: {
+    pageSizeOptions: {
       type: Array as PropType<number[]>,
       default: () => [50, 20, 10, 5],
     },
@@ -169,7 +169,7 @@ export default defineComponent({
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const currentLimit = computed<number>({
-      get: () => proxyModelValue.value?.limit ?? props.options[0],
+      get: () => proxyModelValue.value?.limit ?? props.pageSizeOptions[0],
 
       set: (value) => {
         proxyModelValue.value = {

package/src/components/or-pagination-v3/types.ts

@@ -1,6 +1,4 @@
-import { ModelValue } from '../../types';
-
-export type PaginationModelValue = ModelValue<{
+export interface PaginationModel {
   limit: number;
   offset: number;
-}>;
+}

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

@@ -27,12 +27,12 @@ export const RadioControl: 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',
@@ -47,11 +47,11 @@ export const RadioControlHandle: string[] = [
   // Shape (children)
   'after:rounded-full',
 
-  // Theme (checked / children)
+  // Theme (children/checked)
   'after:checked:bg-on-primary',
   'dark:after:checked:bg-on-primary-dark',
 
-  // Theme (checked + disabled / children)
+  // Theme (children/checked/disabled)
   'after:disabled:checked:bg-on-disabled',
   'dark:after:disabled:checked:bg-on-disabled-dark',
 ];

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

@@ -12,7 +12,7 @@
       <div
         :ref="'offset'"
         :class="offsetStyles"
-        :style="offsetInlineStyles"
+        :style="offsetComputedStyles"
         :disabled="disabled"
       />
 
@@ -43,7 +43,7 @@
       <div
         :ref="'track'"
         :class="trackStyles"
-        :style="trackInlineStyles"
+        :style="trackComputedStyles"
         :disabled="disabled"
       />
 
@@ -98,7 +98,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="onClick(breakpoint)"
@@ -120,8 +120,7 @@ import { PropType, computed, defineComponent, ref, toRef, watch } from 'vue-demi
 import { useProxyModelValue } from '../../hooks';
 import { SliderColor, SliderOrientation } from '../or-slider-v3';
 import { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3';
-import * as Styles from './styles';
-import { RangeSliderModelValue } from './types';
+import { RangeSlider, RangeSliderBreakpointMark, RangeSliderBreakpointMarkColors, RangeSliderLabel, RangeSliderLabelMark, RangeSliderLabelMarkOrientations, RangeSliderLabelOrientations, RangeSliderOffset, RangeSliderOffsetOrientations, RangeSliderOrientations, RangeSliderRail, RangeSliderRailOrientations, RangeSliderThumb, RangeSliderThumbColors, RangeSliderTrack, RangeSliderTrackColors } from './styles';
 
 export default defineComponent({
   name: 'OrRangeSlider',
@@ -137,7 +136,7 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: undefined as unknown as PropType<RangeSliderModelValue>,
+      type: Object as PropType<[number, number]>,
       default: undefined,
     },
 
@@ -158,7 +157,7 @@ export default defineComponent({
 
     breakpoints: {
       type: Array as PropType<number[]>,
-      default: () => [],
+      default: [] as number[],
     },
 
     color: {
@@ -191,31 +190,34 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Refs & Styles
+    // 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>();
 
+    // Styles
     const rootStyles = computed(() => [
       'or-range-slider-v3',
-      ...Styles.RangeSlider,
-      ...Styles.RangeSliderOrientations[props.orientation],
+      ...RangeSlider,
+      ...RangeSliderOrientations[props.orientation],
     ]);
 
-    const rail = ref<HTMLElement>();
-
     const railStyles = computed(() => [
       'or-range-slider-rail-v3',
-      ...Styles.RangeSliderRail,
-      ...Styles.RangeSliderRailOrientations[props.orientation],
+      ...RangeSliderRail,
+      ...RangeSliderRailOrientations[props.orientation],
     ]);
 
-    const offset = ref<HTMLElement>();
-
     const offsetStyles = computed(() => [
-      ...Styles.RangeSliderOffset,
-      ...Styles.RangeSliderOffsetOrientations[props.orientation],
+      ...RangeSliderOffset,
+      ...RangeSliderOffsetOrientations[props.orientation],
     ]);
 
-    const offsetInlineStyles = computed(() => {
+    const offsetComputedStyles = computed(() => {
       switch (props.orientation) {
         case SliderOrientation.Horizontal:
         case SliderOrientation.HorizontalReversed:
@@ -227,14 +229,12 @@ export default defineComponent({
       }
     });
 
-    const track = ref<HTMLElement>();
-
     const trackStyles = computed(() => [
-      ...Styles.RangeSliderTrack,
-      ...Styles.RangeSliderTrackColors[props.color],
+      ...RangeSliderTrack,
+      ...RangeSliderTrackColors[props.color],
     ]);
 
-    const trackInlineStyles = computed(() => {
+    const trackComputedStyles = computed(() => {
       switch (props.orientation) {
         case SliderOrientation.Horizontal:
         case SliderOrientation.HorizontalReversed:
@@ -246,30 +246,25 @@ export default defineComponent({
       }
     });
 
-    const filler = ref<HTMLElement>();
-
-    const thumbFrom = ref<HTMLElement>();
-    const thumbTo = ref<HTMLElement>();
-
     const thumbStyles = computed(() => [
       'or-range-slider-thumb-v3',
-      ...Styles.RangeSliderThumb,
-      ...Styles.RangeSliderThumbColors[props.color],
+      ...RangeSliderThumb,
+      ...RangeSliderThumbColors[props.color],
     ]);
 
     const breakpointMarkStyles = computed(() => [
-      ...Styles.RangeSliderBreakpointMark,
-      ...Styles.RangeSliderBreakpointMarkColors[props.color],
+      ...RangeSliderBreakpointMark,
+      ...RangeSliderBreakpointMarkColors[props.color],
     ]);
 
     const labelStyles = computed(() => [
-      ...Styles.RangeSliderLabel,
-      ...Styles.RangeSliderLabelOrientations[props.orientation],
+      ...RangeSliderLabel,
+      ...RangeSliderLabelOrientations[props.orientation],
     ]);
 
     const labelMarkStyles = computed(() => [
-      ...Styles.RangeSliderLabelMark,
-      ...Styles.RangeSliderLabelMarkOrientations[props.orientation],
+      ...RangeSliderLabelMark,
+      ...RangeSliderLabelMarkOrientations[props.orientation],
     ]);
 
     // State
@@ -356,7 +351,9 @@ export default defineComponent({
     });
 
     const internalModelValueFrom = computed({
-      get: () => (proxyModelValueFrom.value - props.minValue) / (props.maxValue - props.minValue),
+      get: () => {
+        return (proxyModelValueFrom.value - props.minValue) / (props.maxValue - props.minValue);
+      },
 
       set: (value) => {
         const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
@@ -384,7 +381,9 @@ export default defineComponent({
     });
 
     const internalModelValueTo = computed({
-      get: () => (proxyModelValueTo.value - props.minValue) / (props.maxValue - props.minValue),
+      get: () => {
+        return (proxyModelValueTo.value - props.minValue) / (props.maxValue - props.minValue);
+      },
 
       set: (value) => {
         const modelValue = value * (props.maxValue - props.minValue) + props.minValue;
@@ -417,7 +416,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);
@@ -569,27 +568,20 @@ export default defineComponent({
 
     return {
       root,
-      rootStyles,
-
       rail,
-      railStyles,
-
       offset,
-      offsetStyles,
-      offsetInlineStyles,
-
       track,
-      trackStyles,
-      trackInlineStyles,
-
       filler,
-
       thumbFrom,
       thumbTo,
+      rootStyles,
+      railStyles,
+      offsetStyles,
+      offsetComputedStyles,
+      trackStyles,
+      trackComputedStyles,
       thumbStyles,
-
       breakpointMarkStyles,
-
       labelStyles,
       labelMarkStyles,
 

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

@@ -1,2 +1 @@
 export { default as OrRangeSliderV3 } from './OrRangeSlider.vue';
-export * from './types';

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

@@ -178,8 +178,8 @@ export const RangeSliderThumb: string[] = [
 export const RangeSliderThumbColors: 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',
@@ -189,14 +189,14 @@ export const RangeSliderThumbColors: 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',
@@ -206,8 +206,8 @@ export const RangeSliderThumbColors: 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-resizeable-panel-v3/styles.ts

@@ -194,8 +194,8 @@ export const ResizeablePanelCollapseButtonContainer: string[] = [
   'theme-background-default',
   'dark:theme-background-default-dark',
 
-  'theme-border-outline-variant border-1',
-  'dark:theme-border-outline-variant-dark',
+  'theme-border-1-outline-variant',
+  'dark:theme-border-1-outline-variant-dark',
 ];
 
 export const ResizeablePanelCollapseButtonContainerPlacements: Record<ResizeablePanelPlacement, string[]> = {
@@ -234,8 +234,8 @@ export const ResizeablePanelToolbar: string[] = [
   'gap-md',
 
   // Theme
-  'theme-border-outline-variant border-1',
-  'dark:theme-border-outline-variant-dark',
+  'theme-border-1-outline-variant',
+  'dark:theme-border-1-outline-variant-dark',
 ];
 
 export const ResizeablePanelToolbarPlacements: Record<ResizeablePanelPlacement, string[]> = {