Migrate popovers and tooltips to floating-vue

packages/vue-components/README.md

@@ -12,18 +12,16 @@ Most of the styles are based on Bootstrap's markup and CSS, but no dependency on
 
 Many of the components under this folder were originally from [MarkBind/vue-strap](https://github.com/MarkBind/vue-strap), forked from [yuche/vue-strap](https://github.com/yuche/vue-strap), and modified to suit MarkBind's needs for educational and documentation websites.
 
-The generated bundle also includes some of [BootstrapVue's](https://bootstrap-vue.org/) components.
-
 Some custom components and directives are also added for MarkBind's use.
 
 ### MarkBind components newly created or revamped since moving here
 - Modal.vue (built on [Vue Final Modal](https://vue-final-modal.org/))
 - Question.vue
 - QOption.vue
 - Quiz.vue
-- Popover.vue (built on bootstrap-vue's popovers)
-- Tooltip.vue (built on bootstrap-vue's tooltips)
-- Trigger.vue (built on bootstrap-vue's popovers and tooltips)
+- Popover.vue (built on floating-vue's [Menu](https://floating-vue.starpad.dev/guide/component.html#hover-menu) component)
+- Tooltip.vue (built on floating-vue's [Tooltip](https://floating-vue.starpad.dev/guide/component.html#tooltip) component)
+- Trigger.vue (built on vue-final-modal's [$vfm API](https://vue-final-modal.org/api#api) and Floating Vue's Menus and Tooltips)
 
 ### MarkBind components ported from [MarkBind/vue-strap](https://github.com/MarkBind/vue-strap):
 
@@ -50,11 +48,6 @@ Some custom components and directives are also added for MarkBind's use.
 - Tabset.vue
 - Typeahead.vue
 
-### BootstrapVue components included in the bundle
-
-- Popover.vue 
-- Tooltip.vue 
-
 ## Installation
 
 ### Browser globals

packages/vue-components/package.json

@@ -38,6 +38,7 @@
     "bootstrap-vue": "^2.16.0",
     "css-loader": "^3.6.0",
     "eslint-plugin-vue": "^7.9.0",
+    "floating-vue": "^1.0.0-beta.14",
     "jest": "^27.5.1",
     "jest-serializer-vue": "^2.0.2",
     "portal-vue": "^2.1.7",

packages/vue-components/src/Popover.vue

@@ -4,43 +4,53 @@
     data-mb-component-type="popover"
     tabindex="0"
   >
-    <portal v-if="targetEl.id" :to="'header:' + targetEl.id">
-      <slot name="header"></slot>
-    </portal>
-    <portal v-if="targetEl.id" :to="'content:' + targetEl.id">
-      <div class="popover-content">
+    <portal v-if="targetEl.id" :to="'popover:' + targetEl.id">
+      <h3 v-if="hasHeader" class="popover-header">
+        <slot name="header"></slot>
+      </h3>
+      <div class="popover-body">
         <slot name="content"></slot>
       </div>
     </portal>
 
-    <b-popover
+    <v-popover
       v-if="isMounted"
-      :target="targetEl"
-      :triggers="trigger"
+      :auto-hide="!isInput"
+      :triggers="triggers"
+      :popper-triggers="triggers"
+      :hide-triggers="triggers"
       :placement="placement"
+      :delay="0"
+      shift-cross-axis
     >
-      <template #title>
-        <slot name="header"></slot>
+      <!-- floating-vue triggers must be elements that receive mouse events, hence an empty @click -->
+      <span v-if="!isInput" @click.stop>
+        <slot></slot>
+      </span>
+      <!-- However, input elements are handled separately as they will lose focus when wrapped in a span -->
+      <slot v-else></slot>
+      <template #popper>
+        <div class="popover-container">
+          <h3 v-if="hasHeader" class="popover-header">
+            <slot name="header"></slot>
+          </h3>
+          <div class="popover-body">
+            <slot name="content"></slot>
+          </div>
+        </div>
       </template>
-      <div class="popover-content">
-        <slot name="content"></slot>
-      </div>
-    </b-popover>
-    <slot></slot>
+    </v-popover>
   </span>
 </template>
 
 <script>
-/* eslint-disable import/no-extraneous-dependencies */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { Portal } from 'portal-vue';
-import { BPopover } from 'bootstrap-vue';
-/* eslint-enable import/no-extraneous-dependencies */
 
 export default {
   name: 'Popover',
   components: {
     Portal,
-    BPopover,
   },
   props: {
     trigger: {
@@ -58,16 +68,35 @@ export default {
       isMounted: false,
     };
   },
+  computed: {
+    triggers() {
+      return this.trigger.split(' ');
+    },
+    hasHeader() {
+      return !!this.$slots.header;
+    },
+  },
   mounted() {
     this.targetEl = this.$el;
+    // <input> tags need to be handled separately as they need to retain focus on inputs
+    this.isInput = this.$slots.default && this.$slots.default.some(node => node.tag === 'input');
     this.isMounted = true;
   },
 };
 </script>
 
-<style scoped>
-    .popover-content {
+<style>
+    .popover-container {
         overflow: auto;
         max-height: 50vh;
+        max-width: 276px;  /* following bootstrap */
+    }
+
+    .popover-body {
+        font-size: 0.875rem;  /* following bootstrap */
+    }
+
+    .v-popper {
+        display: inline;
     }
 </style>

packages/vue-components/src/Tooltip.vue

@@ -4,33 +4,40 @@
     data-mb-component-type="tooltip"
     tabindex="0"
   >
-    <portal v-if="targetEl.id" :to="targetEl.id">
+    <portal v-if="targetEl.id" :to="'tooltip:' + targetEl.id">
       <slot name="content"></slot>
     </portal>
 
-    <b-tooltip
+    <v-tooltip
       v-if="isMounted"
-      :target="targetEl"
-      :triggers="trigger"
+      :auto-hide="!isInput"
+      :triggers="triggers"
+      :popper-triggers="triggers"
+      :hide-triggers="triggers"
       :placement="placement"
+      :delay="0"
+      shift-cross-axis
     >
-      <slot name="content"></slot>
-    </b-tooltip>
-    <slot></slot>
+      <template #popper>
+        <slot name="content"></slot>
+      </template>
+
+      <span v-if="!isInput" @click.stop>
+        <slot></slot>
+      </span>
+      <slot v-else></slot>
+    </v-tooltip>
   </span>
 </template>
 
 <script>
-/* eslint-disable import/no-extraneous-dependencies */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { Portal } from 'portal-vue';
-import { BTooltip } from 'bootstrap-vue';
-/* eslint-enable import/no-extraneous-dependencies */
 
 export default {
   name: 'Tooltip',
   components: {
     Portal,
-    BTooltip,
   },
   props: {
     trigger: {
@@ -45,12 +52,31 @@ export default {
   data() {
     return {
       targetEl: {},
+      isInput: false,
       isMounted: false,
     };
   },
+  computed: {
+    triggers() {
+      return this.trigger.split(' ');
+    },
+  },
   mounted() {
     this.targetEl = this.$el;
+    // <input> tags need to be handled separately as they need to retain focus on inputs
+    this.isInput = this.$slots.default && this.$slots.default.some(node => node.tag === 'input');
     this.isMounted = true;
   },
 };
 </script>
+
+<style>
+    .v-popper--theme-tooltip .v-popper__inner {
+        /* following bootstrap */
+        background: rgba(0, 0, 0, 0.9);
+        padding: 4px 8px;
+        font-size: 0.875rem;
+        max-width: 200px;
+        text-align: center;
+    }
+</style>