@onereach/ui-components 6.1.4 → 6.1.5-beta.3304.0

package/src/components/or-tooltip-v3/OrTooltip.vue

@@ -7,7 +7,7 @@
   >
     <slot />
 
-    <template v-if="text">
+    <template v-if="$slots.content || content">
       <OrPopover
         :is-open="state === 'open'"
         :variant="'popover'"
@@ -18,7 +18,9 @@
         @update:state="state = $event"
       >
         <div :class="bodyStyles">
-          {{ text }}
+          <slot name="content">
+            {{ content }}
+          </slot>
         </div>
       </OrPopover>
     </template>
@@ -30,7 +32,7 @@ import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
 import { usePopoverState } from '../../hooks';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { TooltipOffset, TooltipPlacement } from './props';
-import { TooltipBody, TooltipBodyPlacements, TooltipRoot } from './styles';
+import { Tooltip, TooltipBody, TooltipBodyPlacements } from './styles';
 
 export default defineComponent({
   name: 'OrTooltip',
@@ -45,7 +47,7 @@ export default defineComponent({
       default: false,
     },
 
-    text: {
+    content: {
       type: String,
       default: undefined,
     },
@@ -85,7 +87,7 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-tooltip-v3',
-      ...TooltipRoot,
+      ...Tooltip,
     ]);
 
     const bodyStyles = computed(() => [

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

@@ -1,13 +1,13 @@
 import { TooltipPlacement } from './props';
 
-export const TooltipRoot: string[] = [
+export const Tooltip: string[] = [
   // Layout
   'layout-inline-row',
 ];
 
 export const TooltipBody: string[] = [
   // Layout
-  'layout-inline-row',
+  'layout-inline-column',
 
   // Shape
   'rounded-sm',
@@ -31,50 +31,50 @@ export const TooltipBody: string[] = [
 ];
 
 export const TooltipBodyPlacements: Record<TooltipPlacement, string[]> = {
-  'top': [],
+  [TooltipPlacement.Top]: [],
 
-  'top-start': [
+  [TooltipPlacement.TopStart]: [
     // Spacing
     'ml-none',
   ],
 
-  'top-end': [
+  [TooltipPlacement.TopEnd]: [
     // Spacing
     'mr-none',
   ],
 
-  'bottom': [],
+  [TooltipPlacement.Bottom]: [],
 
-  'bottom-start': [
+  [TooltipPlacement.BottomStart]: [
     // Spacing
     'ml-none',
   ],
 
-  'bottom-end': [
+  [TooltipPlacement.BottomEnd]: [
     // Spacing
     'mr-none',
   ],
 
-  'left': [],
+  [TooltipPlacement.Left]: [],
 
-  'left-start': [
+  [TooltipPlacement.LeftStart]: [
     // Spacing
     'mt-none',
   ],
 
-  'left-end': [
+  [TooltipPlacement.LeftEnd]: [
     // Spacing
     'mb-none',
   ],
 
-  'right': [],
+  [TooltipPlacement.Right]: [],
 
-  'right-start': [
+  [TooltipPlacement.RightStart]: [
     // Spacing
     'mt-none',
   ],
 
-  'right-end': [
+  [TooltipPlacement.RightEnd]: [
     // Spacing
     'mb-none',
   ],