@onereach/ui-components 2.67.9-beta.2035.0 → 2.67.9

package/src/components/or-toast-v3/OrToast.vue

@@ -15,7 +15,6 @@
           :size="'s'"
         />
       </div>
-
       <img
         v-else-if="emojiSrc"
         :class="toastIconStyle"
@@ -29,42 +28,41 @@
         :class="messageStyle"
         v-html="messageText"
       />
+
+
+      <!-- link -->
+      <a
+        v-if="link"
+        class="or-toast__link"
+        :href="link.href"
+        :target="hrefTarget"
+        @click="onLinkClick"
+      >
+        {{ link.title }}
+      </a>
     </slot>
 
-    <template :class="['flex', 'items-center', 'self-start', 'gap-md']">
-      <template v-if="link">
-        <a
-          class="or-toast__link"
-          :href="link.href"
-          :target="hrefTarget"
-          @click="onLinkClick"
-        >
-          {{ link.title }}
-        </a>
-      </template>
-
-      <template v-if="dismissible">
-        <div :class="actionButtonStyle">
-          <OrIconButton
-            icon="close"
-            class="dark:theme-foreground-inherit"
-            @click.stop="onClose()"
-          />
-        </div>
-      </template>
-    </template>
+    <!-- close button -->
+    <div :class="actionButtonStyle">
+      <OrIconButton
+        v-if="dismissible"
+        icon="close"
+        class="dark:theme-foreground-inherit"
+        @click.stop="onClose()"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import errorPng from '../../assets/error.png';
-import successPng from '../../assets/success.png';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrLoaderV3 as OrLoader } from '../or-loader-v3';
 import { ToastType } from './props';
-import { messageStyleVariant, ToastActionButton, ToastRoot } from './styles';
+import { messageStyleVariant, ToastRoot } from './styles';
 import { ToastLink } from './types';
+import successPng from '../../assets/success.png';
+import errorPng from '../../assets/error.png';
 
 export default defineComponent({
   name: 'OrToast',
@@ -135,7 +133,8 @@ export default defineComponent({
     ]);
 
     const actionButtonStyle = computed(() => [
-      ...ToastActionButton,
+      'text-outline-dark',
+      'dark:text-outline',
     ]);
 
     // State

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

@@ -1,19 +1,17 @@
 import { PositionsX, PositionsY, ToastType } from './props';
 
-export const ToastRoot: string[] = [
+export const ToastRoot = [
   // Layout
-  'layout-inline-row',
+  'flex',
+  'items-start',
 
   // Box
   'w-[343px] md:w-[512px]',
-
-  // Shape
   'rounded-md',
 
-  // Spacing
+  // Sizing
   'px-md',
   'py-md',
-
   'gap-md',
 
   // Typography
@@ -26,32 +24,24 @@ export const ToastRoot: string[] = [
   'theme-foreground-on-surface-inverse',
   'dark:theme-foreground-on-surface-inverse-dark',
 
-  'shadow-card',
-  'dark:shadow-card-dark',
-
-  // Theme (links)
   'links:text-inverse-primary',
   'dark:links:text-inverse-primary-dark',
 
+  'shadow-card',
+  'dark:shadow-card-dark',
 ];
 
-export const ToastActionButton: string[] = [
-  // Layout
-  'contents',
-
-  // Theme
-  'theme-foreground-outline',
-  'dark:theme-foreground-outline-dark',
-];
-
-export const ToastContainer: string[] = [
+export const ToastContainer = [
   // Position
   'absolute',
 
   // Layout
-  'layout-inline-column',
+  'flex',
+  'flex-col',
 
-  // Spacing
+  'items-center',
+
+  // Sizing
   'gap-sm',
 
   // Overflow
@@ -60,53 +50,36 @@ export const ToastContainer: string[] = [
 
 export const ToastContainerPositions: Record<`${PositionsX}-${PositionsY}`, string[]> = {
   'left-top': [
-    // Position
     'left-md md:left-lg',
     'top-md md:top-lg',
   ],
 
   'center-top': [
-    // Position
     'top-md md:top-lg',
   ],
 
   'right-top': [
-    // Position
     'right-md md:right-lg',
     'top-md md:top-lg',
   ],
 
   'left-bottom': [
-    // Position
     'left-md md:left-lg',
     'bottom-md md:bottom-lg',
   ],
 
   'center-bottom': [
-    // Position
     'bottom-md md:bottom-lg',
   ],
 
   'right-bottom': [
-    // Position
     'right-md md:right-lg',
     'bottom-md md:bottom-lg',
   ],
 };
 
 export const messageStyleVariant: Record<ToastType, string[]> = {
-  'success': [
-    // Typography
-    'typography-caption-regular',
-  ],
-
-  'error': [
-    // Typography
-    'typography-caption-bold',
-  ],
-
-  'loading': [
-    // Typography
-    'typography-caption-bold',
-  ],
+  [ToastType.Success]: ['typography-caption-regular'],
+  [ToastType.Error]: ['typography-caption-bold'],
+  [ToastType.Loading]: ['typography-caption-bold'],
 };

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

@@ -2,17 +2,15 @@ import { TooltipPlacement } from './props';
 
 export const TooltipRoot: string[] = [
   // Layout
-  'layout-inline-row justify-center',
+  'inline-block',
 ];
 
 export const TooltipBody: string[] = [
-  // Layout
-  'layout-inline-row',
-
-  // Shape
+  // Box
+  'max-w-max',
   'rounded-sm',
 
-  // Spacing
+  // Sizing
   'mx-sm',
   'my-sm',
 
@@ -34,48 +32,48 @@ export const TooltipBodyPlacements: Record<TooltipPlacement, string[]> = {
   'top': [],
 
   'top-start': [
-    // Spacing
+    // Sizing
     'ml-none',
   ],
 
   'top-end': [
-    // Spacing
+    // Sizing
     'mr-none',
   ],
 
   'bottom': [],
 
   'bottom-start': [
-    // Spacing
+    // Sizing
     'ml-none',
   ],
 
   'bottom-end': [
-    // Spacing
+    // Sizing
     'mr-none',
   ],
 
   'left': [],
 
   'left-start': [
-    // Spacing
+    // Sizing
     'mt-none',
   ],
 
   'left-end': [
-    // Spacing
+    // Sizing
     'mb-none',
   ],
 
   'right': [],
 
   'right-start': [
-    // Spacing
+    // Sizing
     'mt-none',
   ],
 
   'right-end': [
-    // Spacing
+    // Sizing
     'mb-none',
   ],
 };