@onereach/ui-components 4.19.0-beta.3138.0 → 5.0.0

package/src/components/or-bottom-sheet-v3/OrBottomSheet.vue

@@ -19,7 +19,7 @@
 
       <div
         ref="content"
-        :class="contentStyles"
+        :class="['grow', fullscreen || variant === 'basic' ? 'overflow-y-auto' : 'overflow-hidden']"
       >
         <slot />
       </div>
@@ -32,9 +32,9 @@ import { onClickOutside } from '@vueuse/core';
 import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue-demi';
 import { usePopoverState } from '../../hooks';
 import { OrOverlayV3 as OrOverlay } from '../or-overlay-v3';
-import { BottomSheetVariant } from './props';
-import { BottomSheet, BottomSheetHandle, BottomSheetHeader, BottomSheetVariants, BottomSheetContent } from './styles';
 import useBottomSheetSwipeState from './hooks/useBottomSheetSwipeState';
+import { BottomSheetVariant } from './props';
+import { BottomSheet, BottomSheetHandle, BottomSheetHeader, BottomSheetVariants } from './styles';
 
 export default defineComponent({
   name: 'OrBottomSheet',
@@ -79,6 +79,21 @@ export default defineComponent({
     const root = ref<HTMLElement>();
     const content = ref<HTMLElement>();
 
+    // Styles
+    const rootStyles = computed(() => [
+      'or-bottom-sheet-v3',
+      ...BottomSheet,
+      ...BottomSheetVariants[props.variant],
+    ]);
+
+    const handleStyles = computed(() => [
+      ...BottomSheetHandle,
+    ]);
+
+    const headerStyles = computed(() => [
+      ...BottomSheetHeader,
+    ]);
+
     // State
     const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit);
 
@@ -106,32 +121,11 @@ export default defineComponent({
     });
     // #endregion
 
-    // Styles
-    const rootStyles = computed(() => [
-      'or-bottom-sheet-v3',
-      ...BottomSheet,
-      ...BottomSheetVariants[props.variant],
-    ]);
-
-    const handleStyles = computed(() => [
-      ...BottomSheetHandle,
-    ]);
-
-    const headerStyles = computed(() => [
-      ...BottomSheetHeader,
-    ]);
-
-    const contentStyles = computed(() => [
-      ...BottomSheetContent,
-      fullscreen.value || props.variant === BottomSheetVariant.Basic ? 'overflow-y-auto' : 'overflow-hidden',
-    ]);
-
     return {
       root,
       content,
       rootStyles,
       rootInlineStyles,
-      contentStyles,
       handleStyles,
       headerStyles,
       state,

package/src/components/or-bottom-sheet-v3/styles.ts

@@ -14,26 +14,29 @@ export const BottomSheet: string[] = [
   // Shape
   'rounded-t-lg',
 
+  // Elevation
+  'shadow-contextual',
+  'dark:shadow-contextual-dark',
+
+  // Typography
+  'typography-body-2-regular',
+
   // Theme
   'theme-background-base',
   'dark:theme-background-base-dark',
 
   'theme-foreground-default',
   'dark:theme-foreground-default-dark',
-
-  // Elevation
-  'shadow-contextual',
-  'dark:shadow-contextual-dark',
 ];
 
 export const BottomSheetVariants: Record<BottomSheetVariant, string[]> = {
-  'basic': [],
+  [BottomSheetVariant.Basic]: [],
 
-  'advanced': [
+  [BottomSheetVariant.Advanced]: [
     // Box
     'max-h-[50%]',
 
-    // Animation
+    // Transition
     'transition-[min-height]',
     'transition-[max-height]',
   ],
@@ -43,19 +46,19 @@ export const BottomSheetHandle: string[] = [
   // Layout
   'layout-row justify-center',
 
+  // Interactivity
+  'interactivity-auto !cursor-grab',
+
   // Box
   'after:w-2xl',
   'after:h-xs',
 
-  // Shape
-  'after:rounded-full',
-
   // Spacing
   'px-sm',
   'py-sm',
 
-  // Interactivity
-  'cursor-grab',
+  // Shape
+  'after:rounded-full',
 
   // Theme
   'after:bg-outline',
@@ -63,7 +66,7 @@ export const BottomSheetHandle: string[] = [
 ];
 
 export const BottomSheetHeader: string[] = [
-  // Layout
+  // Layout (empty)
   'empty:hidden',
 
   // Spacing
@@ -73,7 +76,3 @@ export const BottomSheetHeader: string[] = [
   // Typography
   'typography-headline-3',
 ];
-
-export const BottomSheetContent: string[] = [
-  'grow',
-];

package/src/components/or-button-v3/OrButton.vue

@@ -38,7 +38,7 @@
 import { PropType, computed, defineComponent, isVue3, ref } from 'vue-demi';
 import { OrLoaderV3 as OrLoader } from '../or-loader-v3';
 import { ButtonColor, ButtonType, ButtonVariant } from './props';
-import { ButtonRoot, ButtonRootColors, ButtonRootVariants } from './styles';
+import { Button, ButtonColors, ButtonVariants } from './styles';
 
 export default defineComponent({
   name: 'OrButton',
@@ -101,9 +101,9 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-button-v3',
-      ...ButtonRoot,
-      ...ButtonRootVariants[props.variant],
-      ...ButtonRootColors[`${props.color}-${props.variant}`],
+      ...Button,
+      ...ButtonVariants[props.variant],
+      ...ButtonColors[`${props.color}-${props.variant}`],
       props.loading && 'interactivity-none',
     ]);
 

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

@@ -1,21 +1,24 @@
 import { ButtonColor, ButtonVariant } from './props';
 
-export const ButtonRoot: string[] = [
+export const Button: string[] = [
   // Layout
   'layout-inline-row justify-center',
 
-  // Shape
-  'rounded-md',
+  // Overflow
+  'overflow-hidden',
 
   // Interactivity
   'interactivity-auto',
 
+  // Shape
+  'rounded-md',
+
   // Typography
   'typography-button',
 ];
 
-export const ButtonRootVariants: Record<ButtonVariant, string[]> = {
-  'contained': [
+export const ButtonVariants: Record<ButtonVariant, string[]> = {
+  [ButtonVariant.Contained]: [
     // Box
     'min-w-[96px]',
 
@@ -25,12 +28,12 @@ export const ButtonRootVariants: Record<ButtonVariant, string[]> = {
 
     'gap-sm+ md:gap-sm',
 
-    // Theme
+    // Elevation (enabled)
     'enabled:shadow-button',
     'dark:enabled:shadow-button-dark',
   ],
 
-  'outlined': [
+  [ButtonVariant.Outlined]: [
     // Box
     'min-w-[96px]',
 
@@ -41,7 +44,7 @@ export const ButtonRootVariants: Record<ButtonVariant, string[]> = {
     'gap-sm+ md:gap-sm',
   ],
 
-  'text': [
+  [ButtonVariant.Text]: [
     // Box
     'min-w-[96px]',
 
@@ -52,13 +55,13 @@ export const ButtonRootVariants: Record<ButtonVariant, string[]> = {
     'gap-sm+ md:gap-sm',
   ],
 
-  'link': [
+  [ButtonVariant.Link]: [
     // Spacing
     'gap-xs',
   ],
 };
 
-export const ButtonRootColors: Record<`${ButtonColor}-${ButtonVariant}`, string[]> = {
+export const ButtonColors: Record<`${ButtonColor}-${ButtonVariant}`, string[]> = {
   'primary-contained': [
     // Theme
     'theme-preset-1-primary',

package/src/components/or-card-collection-v3/OrCardCollection.vue

@@ -80,10 +80,10 @@
 import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrSearchV3 as OrSearch } from '../or-search-v3';
-import OrCardCollectionView from './partials/OrCardCollectionView.vue3.vue';
 import { OrSortingV3 as OrSorting, SortOption } from '../or-sorting-v3';
+import OrCardCollectionView from './partials/OrCardCollectionView.vue3.vue';
 import { defaultViewModes, gridView } from './props';
-import { CardCollectionRoot, CardCollectionToolbar, CardCollectionToolbarPanel } from './styles';
+import { CardCollection, CardCollectionToolbar, CardCollectionToolbarPanel } from './styles';
 import { CardCollectionItem, ViewMode } from './types';
 
 export default defineComponent({
@@ -155,7 +155,7 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-card-collection-v3',
-      ...CardCollectionRoot,
+      ...CardCollection,
     ]);
 
     const toolbarStyles = computed(() => [

package/src/components/or-card-collection-v3/partials/OrCardCollectionView.vue2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="contentStyles">
+  <div :class="rootStyles">
     <slot
       v-for="(item) in items"
       name="item"
@@ -12,30 +12,38 @@
     </slot>
   </div>
 </template>
+
 <script lang="ts">
-import { defineComponent, computed, PropType } from 'vue-demi';
+import { PropType, computed, defineComponent } from 'vue-demi';
+import { CardCollectionView } from '../props';
 import { CardCollectionContent, CardCollectionContentViews } from '../styles';
 import { CardCollectionItem } from '../types';
-import { DefaultCardCollectionViews } from '../props';
 
 export default defineComponent({
   name: 'OrCardCollectionView',
+
   props: {
     items: {
       type: Array as PropType<CardCollectionItem[]>,
       default: [] as CardCollectionItem[],
     },
+
     mode: {
-      type: String as PropType<DefaultCardCollectionViews>,
+      type: String as PropType<`${CardCollectionView}`>,
       required: true,
     },
   },
+
   setup(props) {
-    const contentStyles = computed(() => [
+    // Styles
+    const rootStyles = computed(() => [
       ...CardCollectionContent,
       ...CardCollectionContentViews[props.mode],
     ]);
-    return { contentStyles };
+
+    return {
+      rootStyles,
+    };
   },
 });
 </script>

package/src/components/or-card-collection-v3/partials/OrCardCollectionView.vue3.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="contentStyles">
+  <div :class="rootStyles">
     <slot
       v-for="(item, index) in items"
       :key="item.key || index"
@@ -13,30 +13,38 @@
     </slot>
   </div>
 </template>
+
 <script lang="ts">
-import { defineComponent, computed, PropType } from 'vue-demi';
+import { PropType, computed, defineComponent } from 'vue-demi';
+import { CardCollectionView } from '../props';
 import { CardCollectionContent, CardCollectionContentViews } from '../styles';
 import { CardCollectionItem } from '../types';
-import { DefaultCardCollectionViews } from '../props';
 
 export default defineComponent({
   name: 'OrCardCollectionView',
+
   props: {
     items: {
       type: Array as PropType<CardCollectionItem[]>,
       default: [] as CardCollectionItem[],
     },
+
     mode: {
-      type: String as PropType<DefaultCardCollectionViews>,
+      type: String as PropType<`${CardCollectionView}`>,
       required: true,
     },
   },
+
   setup(props) {
-    const contentStyles = computed(() => [
+    // Styles
+    const rootStyles = computed(() => [
       ...CardCollectionContent,
       ...CardCollectionContentViews[props.mode],
     ]);
-    return { contentStyles };
+
+    return {
+      rootStyles,
+    };
   },
 });
 </script>

package/src/components/or-card-collection-v3/props.ts

@@ -1,16 +1,16 @@
 import { ViewMode } from './types';
 
-export enum DefaultCardCollectionViews {
+export enum CardCollectionView {
   Grid = 'grid',
   List = 'list',
 }
 
 export const gridView: ViewMode = {
-  view: DefaultCardCollectionViews.Grid,
+  view: CardCollectionView.Grid,
   icon: 'grid_view',
 };
 export const listView: ViewMode = {
-  view: DefaultCardCollectionViews.List,
+  view: CardCollectionView.List,
   icon: 'view_agenda',
 };
 

package/src/components/or-card-collection-v3/styles.ts

@@ -1,12 +1,14 @@
-import { DefaultCardCollectionViews } from './props';
+import { CardCollectionView } from './props';
 
-export const CardCollectionRoot: string[] = [
+export const CardCollection: string[] = [
   // Layout
   'layout-column',
 
+  // Box
+  'max-h-full',
+
   // Spacing
   'gap-md',
-  'max-h-full',
 ];
 
 export const CardCollectionToolbar: string[] = [
@@ -33,24 +35,29 @@ export const CardCollectionContent: string[] = [
   // Layout
   'grid',
 
+  // Overflow
+  'overflow-auto',
+
   // Spacing
-  'gap-sm md:gap-md',
+  '-mx-sm',
+  '-my-sm',
 
-  // Overflow
-  'overflow-y-auto',
-  'p-xs*',
-  '-m-xs*',
-  '-mr-[7px]',
+  '-mr-[calc(theme(spacing.sm) * 2)]',
+
+  'px-sm',
+  'py-sm',
+
+  'gap-sm md:gap-md',
 ];
 
-export const CardCollectionContentViews: Record<DefaultCardCollectionViews, string[]> = {
-  'grid': [
+export const CardCollectionContentViews: Record<CardCollectionView, string[]> = {
+  [CardCollectionView.Grid]: [
     // Layout
-    'grid-cols-1',
-    'md:grid-cols-5',
+    'grid-cols-1 md:grid-cols-5',
   ],
 
-  'list': [
+  [CardCollectionView.List]: [
+    // Layout
     'grid-cols-1',
   ],
 };

package/src/components/or-confirm-v3/OrConfirm.vue

@@ -74,7 +74,7 @@ import { ButtonColor, OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrInputV3 as OrInput } from '../or-input-v3';
 import { OrOverlayV3 as OrOverlay } from '../or-overlay-v3';
 import { ConfirmType } from './props';
-import { ConfirmFooter, ConfirmFooterButtons, ConfirmFooterTypes, ConfirmHeader, ConfirmInput, ConfirmRoot } from './styles';
+import { Confirm, ConfirmFooter, ConfirmFooterButtons, ConfirmFooterTypes, ConfirmHeader, ConfirmInput } from './styles';
 
 export default defineComponent({
   name: 'OrConfirm',
@@ -232,7 +232,7 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-confirm-v3',
-      ...ConfirmRoot,
+      ...Confirm,
     ]);
 
     const headerStyles = computed(() => [

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

@@ -1,6 +1,6 @@
 import { ConfirmType } from './props';
 
-export const ConfirmRoot: string[] = [
+export const Confirm: string[] = [
   // Position
   'fixed md:static',
 
@@ -14,15 +14,19 @@ export const ConfirmRoot: string[] = [
   // Box
   'w-full md:w-[320px]',
 
-  // Shape
-  'rounded-0 md:rounded-md',
-
   // Spacing
   'px-lg',
   'py-lg',
 
   'gap-md',
 
+  // Shape
+  'md:rounded-md',
+
+  // Elevation
+  'shadow-modal',
+  'dark:shadow-modal-dark',
+
   // Typography
   'typography-body-2-regular',
 
@@ -32,10 +36,6 @@ export const ConfirmRoot: string[] = [
 
   'theme-foreground-default',
   'dark:theme-foreground-default-dark',
-
-  // Elevation
-  'shadow-modal',
-  'dark:shadow-modal-dark',
 ];
 
 export const ConfirmHeader: string[] = [

package/src/components/or-modal-v3/OrModal.vue

@@ -12,7 +12,7 @@
         <slot name="header" />
       </OrModalHeader>
 
-      <OrModalContent>
+      <OrModalContent :class="['grow']">
         <slot />
       </OrModalContent>
 
@@ -31,7 +31,7 @@ import OrModalContent from './partials/or-modal-content/OrModalContent.vue';
 import OrModalFooter from './partials/or-modal-footer/OrModalFooter.vue';
 import OrModalHeader from './partials/or-modal-header/OrModalHeader.vue';
 import { ModalSize } from './props';
-import { ModalRoot, ModalRootSizes } from './styles';
+import { Modal, ModalSizes } from './styles';
 
 export default defineComponent({
   name: 'OrModal',
@@ -80,8 +80,8 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-modal-v3',
-      ...ModalRoot,
-      ...ModalRootSizes[props.size],
+      ...Modal,
+      ...ModalSizes[props.size],
     ]);
 
     // State

package/src/components/or-modal-v3/partials/or-modal-content/styles.ts

@@ -1,7 +1,4 @@
 export const ModalContent: string[] = [
-  // Layout
-  'grow',
-
   // Overflow
   'overflow-auto',
 

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

@@ -1,6 +1,6 @@
 import { ModalSize } from './props';
 
-export const ModalRoot: string[] = [
+export const Modal: string[] = [
   // Layout
   'layout-column',
 
@@ -8,13 +8,17 @@ export const ModalRoot: string[] = [
   'w-full',
   'h-full md:h-auto md:max-h-[min(calc(100%-(2*theme(spacing.3xl))),772px)]',
 
-  // Shape
-  'md:rounded-md',
-
   // Spacing
   'py-md md:py-lg',
   'gap-md md:gap-lg',
 
+  // Shape
+  'md:rounded-md',
+
+  // Elevation
+  'shadow-modal',
+  'dark:shadow-modal-dark',
+
   // Typography
   'typography-body-2-regular',
 
@@ -24,24 +28,20 @@ export const ModalRoot: string[] = [
 
   'theme-foreground-default',
   'dark:theme-foreground-default-dark',
-
-  // Elevation
-  'shadow-modal',
-  'dark:shadow-modal-dark',
 ];
 
-export const ModalRootSizes: Record<ModalSize, string[]> = {
-  'l': [
+export const ModalSizes: Record<ModalSize, string[]> = {
+  [ModalSize.L]: [
     // Box
     'md:w-[1050px]',
   ],
 
-  'm': [
+  [ModalSize.M]: [
     // Box
     'md:w-[700px]',
   ],
 
-  's': [
+  [ModalSize.S]: [
     // Box
     'md:w-[480px]',
   ],

package/src/components/or-overlay-v3/OrOverlay.vue

@@ -15,7 +15,7 @@ import { useScrollLock } from '@vueuse/core';
 import { computed, defineComponent, ref } from 'vue-demi';
 import { useElevation } from '../../hooks';
 import { OrTeleportV3 as OrTeleport } from '../or-teleport-v3';
-import { OverlayRoot } from './styles';
+import { Overlay } from './styles';
 
 export default defineComponent({
   name: 'OrOverlay',
@@ -44,7 +44,7 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-overlay-v3',
-      ...OverlayRoot,
+      ...Overlay,
     ]);
 
     // Effects

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

@@ -1,14 +1,14 @@
-export const OverlayRoot: string[] = [
+export const Overlay: string[] = [
   // Position
-  'fixed',
-  'inset-none',
+  'fixed inset-none',
 
   // Layout
-  'flex',
-  'items-center',
-  'justify-center',
+  'layout-row justify-center',
 
   // Theme
-  'bg-overlay',
-  'dark:bg-overlay-dark',
+  'theme-background-overlay',
+  'dark:theme-background-overlay-dark',
+
+  'theme-foreground-base',
+  'dark:theme-foreground-base',
 ];

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

@@ -6,23 +6,23 @@ export const Popover: string[] = [
 ];
 
 export const PopoverBody: string[] = [
-  // Shape
-  'rounded-md',
-
   // Spacing
   'mx-sm',
   'my-sm',
 
+  // Shape
+  'rounded-md',
+
+  // Elevation
+  'shadow-contextual',
+  'dark:shadow-contextual-dark',
+
   // Theme
   'theme-background-base',
   'dark:theme-background-base-dark',
 
   'theme-foreground-default',
   'dark:theme-foreground-default-dark',
-
-  // Elevation
-  'shadow-contextual',
-  'dark:shadow-contextual-dark',
 ];
 
 export const PopoverBodyPlacements: Record<PopoverPlacement, string[]> = {