@veritree/ui 0.22.3 → 0.24.0

package/src/components/Utils/FloatingUi.vue

@@ -7,19 +7,19 @@
       leave-active-class="duration-200 ease-in"
       leave-class="translate-y-0 opacity-100"
       leave-to-class="translate-y-[15px] opacity-0"
-      @after-leave="hide"
+      @after-leave="hidden"
+      @after-enter="shown"
     >
       <div
         v-if="visible"
-        :id="id"
         :class="[
           headless
-            ? null
-            : 'absolute z-50 grid overflow-x-hidden rounded-md py-2 px-3 border-gray-100 bg-white shadow-300',
-          floatingUiClass ? floatingUiClass : null,
+            ? `${this.component}-content`
+            : `shadow-300 absolute z-50 grid overflow-x-hidden rounded-md py-2 px-3 ${this.classes} ${this.portalClass}`,
         ]"
+        v-bind="$attrs"
       >
-        <slot></slot>
+        <slot />
       </div>
     </transition>
   </Portal>
@@ -34,27 +34,41 @@ export default {
   },
 
   props: {
+    component: {
+      type: String,
+      default: null,
+    },
     headless: {
       type: Boolean,
       default: false,
     },
-    id: {
-      type: [String, Number],
-      default: null,
-    },
     visible: {
       type: Boolean,
       default: false,
     },
-    floatingUiClass: {
+    portalClass: {
       type: [String, Function],
       default: null,
     },
   },
 
+  computed: {
+    isTooltip() {
+      return this.component === 'tooltip';
+    },
+
+    classes() {
+      return this.isTooltip ? 'bg-gray-800 text-sm text-white' : 'bg-white';
+    },
+  },
+
   methods: {
-    hide() {
-      this.$emit('hide');
+    shown() {
+      this.$emit('shown');
+    },
+
+    hidden() {
+      this.$emit('hidden');
     },
   },
 };