feat: switch to floating-ui

Author: Akryum

Diff for: packages/demo/src/PageHome.vue

@@ -95,7 +95,7 @@
             theme: 'info-tooltip',
             // Inline override
             placement,
-            offset: [0, 100],
+            distance: 100,
             ariaId: 'test-id',
           }"
           class="tooltip-target b2"
@@ -293,7 +293,7 @@
         </div>
 
         <VDropdown
-          :offset="[0, offset]"
+          :distance="offset"
           :placement="placement"
           :auto-hide="isAutoHiding"
           :disabled="!isEnabled"
@@ -461,7 +461,7 @@
           <VDropdown
             :triggers="[]"
             :shown="isOpen"
-            :offset="[0, 16]"
+            :distance="16"
             :auto-hide="false"
           >
             <button class="tooltip-target b1 popover-btn">

Diff for: packages/demo/src/PageHoverDropdown.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="box">
     <VMenu
-      :offset="[0, 16]"
+      :distance="16"
       placement="right"
     >
       <button class="tooltip-target b1 popover-btn">Target</button>
@@ -13,7 +13,7 @@
 
     <VDropdown
       :triggers="['hover']"
-      :offset="[0, 16]"
+      :distance="16"
       :auto-hide="false"
       placement="right"
     >

Diff for: packages/docs/src/.vuepress/components/ArrowPadding.vue

@@ -4,11 +4,10 @@
       :triggers="[]"
       :shown="true"
       placement="right"
-      :offset="offset"
-      :modifiers="[
-        { name: 'preventOverflow', enabled: false },
-        { name: 'arrow', options: { padding: tempPadding } },
-      ]"
+      :distance="offset[1]"
+      :skidding="offset[0]"
+      :prevent-overflow="false"
+      :arrow-padding="tempPadding"
     >
       <button class="px-4 py-6 bg-gray-500 text-white rounded-lg !md:text-sm">
         Reference
@@ -24,8 +23,8 @@
       <input
         v-model.number="offset[0]"
         type="range"
-        min="-32"
-        max="32"
+        min="-64"
+        max="64"
         class="w-full"
       >
 

Diff for: packages/docs/src/.vuepress/components/DropdownSimpleExample.vue

@@ -6,7 +6,9 @@
       </button>
 
       <template #popper>
-        This is awesome!
+        <div class="p-6">
+          This is awesome!
+        </div>
       </template>
     </VDropdown>
   </div>

Diff for: packages/docs/src/.vuepress/components/MenuSimpleExample.vue

@@ -7,7 +7,7 @@
 
       <template #popper>
         <button
-          class="border border-gray-300 rounded px-4 py-2"
+          class="border border-gray-300 rounded px-4 py-2 m-4"
           @click="count++"
         >
           +{{ count }}

Diff for: packages/docs/src/.vuepress/components/OffsetExample.vue

@@ -5,10 +5,10 @@
       :shown="true"
       :auto-hide="false"
       placement="right"
-      :offset="tempOffset"
-      :modifiers="[
-        { name: 'preventOverflow', enabled: false }
-      ]"
+      :distance="tempOffset[1]"
+      :skidding="tempOffset[0]"
+      :prevent-overflow="false"
+      :arrow-padding="6"
     >
       <button class="px-4 py-12 md:p-16 bg-gray-500 text-white rounded-lg !md:text-sm">
         Reference

Diff for: packages/docs/src/.vuepress/components/TooltipHtml.vue

@@ -7,9 +7,7 @@
         placement: 'right',
         triggers: [],
         shown: true,
-        modifiers: [
-          { name: 'preventOverflow', enabled: false },
-        ],
+        preventOverflow: false,
       }"
       class="border border-gray-300 rounded px-4 py-2"
     >

Diff for: packages/docs/src/.vuepress/components/TooltipPlacement.vue

@@ -6,10 +6,8 @@
         placement,
         triggers: [],
         shown: true,
-        modifiers: [
-          { name: 'preventOverflow', enabled: false },
-          { name: 'arrow', options: { padding: 8 } },
-        ],
+        preventOverflow: false,
+        arrowPadding: 8,
       }"
       class="border border-gray-300 rounded px-4 py-3 text-xl"
     >

Diff for: packages/docs/src/.vuepress/components/theme-editor/Button.vue

@@ -11,16 +11,33 @@ export default {
       default: false,
     },
   },
+
+  created () {
+    this.colors = {
+      green: {
+        normal: 'bg-green-300 text-green-900',
+        hover: 'hover:bg-green-200 hover:text-green-900',
+      },
+      red: {
+        normal: 'bg-red-300 text-red-900',
+        hover: 'hover:bg-red-200 hover:text-red-900',
+      },
+      gray: {
+        normal: 'bg-gray-300 text-gray-900',
+        hover: 'hover:bg-gray-200 hover:text-gray-900',
+      },
+    }
+  },
 }
 </script>
 
 <template>
   <button
     class="flex items-center justify-center rounded text-center"
     :class="[
-      `hover:bg-${color}-200 hover:text-${color}-900`,
+      colors[color].hover,
       {
-        [`bg-${color}-300 text-${color}-900`]: !flat,
+        [colors[color].normal]: !flat,
       },
     ]"
     @click="$emit('click', $event)"