feat: add position options to tooltip

src/components/Select/WSelect.spec.ts

@@ -14,17 +14,19 @@ describe('WSelect', () => {
           label: 'English',
           icon: null
         },
-        options: [{
+        options: [
+          {
             key: 'en',
             label: 'English',
             icon: null
-          },{
+          },
+          {
             key: 'es',
             label: 'Español',
-            icon: null,
+            icon: null
           }
         ]
-      },
+      }
     })
 
     expect(wrapper.element).toMatchSnapshot()
@@ -39,17 +41,19 @@ describe('WSelect', () => {
           label: 'English',
           icon: Icon
         },
-        options: [{
+        options: [
+          {
             key: 'en',
             label: 'English',
             icon: Icon
-          },{
+          },
+          {
             key: 'es',
             label: 'Español',
-            icon: Icon,
+            icon: Icon
           }
         ]
-      },
+      }
     })
 
     expect(wrapper.element).toMatchSnapshot()

src/components/Select/WSelect.stories.ts

@@ -10,18 +10,22 @@ const meta: any = {
   component: WSelect,
   tags: ['autodocs'],
   argTypes: {
-    dropdownPosition: { control: 'select', options: dropdownPostions },
+    dropdownPosition: { control: 'select', options: dropdownPostions }
   },
   args: {
-    options: [{
-      key: 'en',
-      label: 'English',
-      icon: null,
-    },{
-      key: 'es',
-      label: 'Español',
-      icon: null,
-    }]}
+    options: [
+      {
+        key: 'en',
+        label: 'English',
+        icon: null
+      },
+      {
+        key: 'es',
+        label: 'Español',
+        icon: null
+      }
+    ]
+  }
 } satisfies Meta<typeof WSelect>
 
 export default meta
@@ -34,26 +38,29 @@ export const Default: Story = {
       const model = ref({
         key: 'en',
         label: 'English',
-        icon: null,
-      });
+        icon: null
+      })
 
       function update($event: any) {
         model.value = $event
       }
-  
-      return { args, model, update };
+
+      return { args, model, update }
     },
     template: `<WSelect v-bind="args" v-model="model" @update:model-value="update" />`,
     args: {
-      options: [{
-        key: 'en',
-        label: 'English',
-        icon: null,
-      },{
-        key: 'es',
-        label: 'Español',
-        icon: Icon,
-      }]
+      options: [
+        {
+          key: 'en',
+          label: 'English',
+          icon: null
+        },
+        {
+          key: 'es',
+          label: 'Español',
+          icon: Icon
+        }
+      ]
     }
   })
-}
+}

src/components/Select/WSelect.ts

@@ -1,6 +1,6 @@
-export type Option = {key: string, label: string, icon: string | null}
+export type Option = { key: string; label: string; icon: string | null }
 export enum DropdownPosition {
   Top = 'top',
   Bottom = 'bottom'
 }
-export const dropdownPostions = Object.values(DropdownPosition)
+export const dropdownPostions = Object.values(DropdownPosition)

src/components/Select/WSelect.vue

@@ -35,7 +35,7 @@
 <script setup lang="ts">
 import vSelect from 'vue-select'
 import 'vue-select/dist/vue-select.css'
-import { dropdownPostions, DropdownPosition} from './WSelect'
+import { dropdownPostions, DropdownPosition } from './WSelect'
 import { PropType, computed, DefineComponent, SVGAttributes } from 'vue'
 
 type Option = { key: string; label: string; icon: DefineComponent<SVGAttributes> | null }
@@ -44,7 +44,7 @@ const model = defineModel()
 const props = defineProps({
   options: {
     type: Array as PropType<Array<Option>>,
-    required: true,
+    required: true
   },
   dropdownPosition: {
     type: String as PropType<DropdownPosition>,
@@ -63,11 +63,12 @@ const props = defineProps({
   }
 })
 
-const position = computed(() => props.dropdownPosition === DropdownPosition.Top ? '-210%' : '110%')
+const position = computed(() =>
+  props.dropdownPosition === DropdownPosition.Top ? '-210%' : '110%'
+)
 </script>
 
 <style lang="scss">
-
 .dropdown-enter {
   transform: translateY(-8px);
 }
@@ -81,7 +82,7 @@ const position = computed(() => props.dropdownPosition === DropdownPosition.Top
 }
 
 .dropdown-leave {
-    transform: translateY(0px);
+  transform: translateY(0px);
 }
 
 .dropdown-leave-to {
@@ -90,17 +91,17 @@ const position = computed(() => props.dropdownPosition === DropdownPosition.Top
 }
 
 .dropdown-leave-from {
-    transform: translateY(0);
+  transform: translateY(0);
 }
 
 .dropdown-leave-active {
-    transition: all .2s cubic-bezier(.42,0,.58,1);
-    transition-delay: .5s;
+  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
+  transition-delay: 0.5s;
 }
 
 .dropdown-enter-active {
-    transition: all .2s cubic-bezier(.42,0,.58,1);
-    transition-delay: .5s;
+  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
+  transition-delay: 0.5s;
 }
 .vs--open {
   .vs__open-indicator {
@@ -145,13 +146,13 @@ const position = computed(() => props.dropdownPosition === DropdownPosition.Top
 
   .vs__dropdown-option {
     font-family: 'NeueMachina-Regular', sans-serif;
-    color: v-bind(hexPrimaryColor)
+    color: v-bind(hexPrimaryColor);
   }
 
   .vs__dropdown-option--highlight {
     z-index: 10;
     color: v-bind(hexSecondaryColor);
-    background: v-bind(hexPrimaryColor)
+    background: v-bind(hexPrimaryColor);
   }
 
   .vs__clear,
@@ -206,4 +207,3 @@ const position = computed(() => props.dropdownPosition === DropdownPosition.Top
 //   }
 // }
 </style>
-

src/components/Tooltip/WTooltip.spec.ts

@@ -6,7 +6,7 @@ describe('WTooltip', () => {
   it('renders properly', () => {
     const wrapper = mount(WTooltip, {
       props: {
-        bgColor: '#000',
+        bgColor: '#000'
       },
       slots: {
         main: `<p>Text</p>`,

src/components/Tooltip/WTooltip.stories.ts

@@ -1,14 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import WTooltip from './WTooltip.vue'
+import { TooltipPosition, tooltipPostions } from './WTooltip'
 
 const meta: any = {
   title: 'Example/WTooltip',
   component: WTooltip,
   tags: ['autodocs'],
-  argTypes: {},
+  argTypes: {
+    position: { control: 'select', options: tooltipPostions }
+  },
   args: {
     bgColor: '#000',
-  },
+    position: TooltipPosition.CenterTop
+  }
 } satisfies Meta<typeof WTooltip>
 
 export default meta
@@ -20,11 +24,11 @@ export const Default: Story = {
     setup() {
       return { args }
     },
-    template: `<WTooltip v-bind="args"><template #tooltip><p class="text-white-50 w-[200px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></template><template #main>
+    template: `<div class="h-[200px] w-auto flex justify-center items-center"><WTooltip v-bind="args"><template #tooltip><p class="text-white-50 w-[200px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></template><template #main>
               <span class="text-xs ml-xs">ⓘ</span>
-            </template></WTooltip>`,
+            </template></WTooltip></div>`,
     args: {
-      bgColor: 'black-950',
+      bgColor: 'black-950'
     }
   })
 }

src/components/Tooltip/WTooltip.ts

@@ -0,0 +1,9 @@
+export enum TooltipPosition {
+  CenterTop = 'center-top',
+  RightTop = 'right-top',
+  LeftTop = 'left-top',
+  CenterBottom = 'center-bottom',
+  RightBottom = 'right-bottom',
+  LeftBottom = 'left-bottom'
+}
+export const tooltipPostions = Object.values(TooltipPosition)

src/components/Tooltip/WTooltip.vue

@@ -1,20 +1,42 @@
 <template>
-  <div class="group inline relative p-[4px] -p-[4px]">
+  <div class="group inline relative p-sm -m-sm">
     <slot name="main"></slot>
     <div
-      class="tooltip-container hidden min-w-max py-md px-md rounded-lg group-hover:inline hover:inline transition-opacity text-sm rounded-md absolute bottom-md -translate-x-[50%] mb-sm"
+      :class="tooltipPosition"
+      class="tooltip-container hidden min-w-max py-md px-md rounded-lg group-hover:inline group-hover:opacity-100 text-sm rounded-md absolute"
     >
       <slot name="tooltip"></slot>
     </div>
   </div>
 </template>
 
-<script setup>
-defineProps({
+<script setup lang="ts">
+import { TooltipPosition, tooltipPostions } from './WTooltip'
+import { PropType, computed } from 'vue'
+
+const props = defineProps({
   bgColor: {
     type: String,
-    required: true,
+    required: true
   },
+  position: {
+    type: String as PropType<TooltipPosition>,
+    default: TooltipPosition.CenterTop,
+    validation(value: TooltipPosition) {
+      tooltipPostions.includes(value)
+    }
+  }
+})
+const tooltipStypePositions: Record<TooltipPosition, string> = {
+  [TooltipPosition.CenterTop]: 'bottom-lg -translate-x-[50%]',
+  [TooltipPosition.CenterBottom]: 'top-lg -translate-x-[50%]',
+  [TooltipPosition.RightTop]: 'bottom-lg translate-x-[0%]',
+  [TooltipPosition.RightBottom]: 'top-lg translate-x-[0%]',
+  [TooltipPosition.LeftTop]: 'bottom-lg -translate-x-[100%]',
+  [TooltipPosition.LeftBottom]: 'top-lg -translate-x-[100%]'
+}
+const tooltipPosition = computed(() => {
+  return tooltipStypePositions[props.position]
 })
 </script>