feat: arrowOverflow prop

Akryum · Jan 15, 2022 · 0ed3801 · 0ed3801
1 parent 167a8b8
commit 0ed3801
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 17 deletions.
diff --git a/packages/docs/src/.vuepress/components/theme-editor/ConfigEditor.vue b/packages/docs/src/.vuepress/components/theme-editor/ConfigEditor.vue
@@ -449,6 +449,22 @@ export default {
         </template>
       </div>
 
+      <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <span>Arrow overflow:</span>
+        <label
+          v-for="value of [undefined, true, false]"
+          :key="value"
+          class="flex items-center space-x-1"
+        >
+          <input
+            v-model="theme.config.arrowOverflow"
+            type="radio"
+            :value="value"
+          >
+          <span>{{ value != null ? value : '(inherit)' }}</span>
+        </label>
+      </div>
+
       <div class="flex space-x-3 hover:bg-gray-50 p-2">
         <span>Flip:</span>
         <label

diff --git a/packages/docs/src/.vuepress/components/theme-editor/state.js b/packages/docs/src/.vuepress/components/theme-editor/state.js
@@ -99,6 +99,7 @@ const emptyTheme = [
   'html',
   'loadingContent',
   'arrowPadding',
+  'arrowOverflow',
   'overflowPadding',
   'preventOverflow',
   'autoMinSize',

diff --git a/packages/docs/src/guide/config.md b/packages/docs/src/guide/config.md
@@ -60,6 +60,8 @@ export const config: FloatingVueConfig = {
   overflowPadding: 0,
   // Arrow padding (px)
   arrowPadding: 0,
+  // Compute arrow overflow (useful to hide it)
+  arrowOverflow: true,
   // Themes
   themes: {
     tooltip: {

diff --git a/packages/floating-vue/src/components/Popper.ts b/packages/floating-vue/src/components/Popper.ts
@@ -198,6 +198,11 @@ export default () => ({
       default: defaultPropFactory('arrowPadding'),
     },
 
+    arrowOverflow: {
+      type: Boolean,
+      default: defaultPropFactory('arrowOverflow'),
+    },
+
     flip: {
       type: Boolean,
       default: defaultPropFactory('flip'),
@@ -456,23 +461,25 @@ export default () => ({
       }))
 
       // Arrow overflow
-      options.middleware.push({
-        name: 'arrowOverflow',
-        fn: ({ placement, rects, middlewareData }) => {
-          let overflow: boolean
-          const { centerOffset } = middlewareData.arrow
-          if (placement.startsWith('top') || placement.startsWith('bottom')) {
-            overflow = Math.abs(centerOffset) > rects.reference.width / 2
-          } else {
-            overflow = Math.abs(centerOffset) > rects.reference.height / 2
-          }
-          return {
-            data: {
-              overflow,
-            },
-          }
-        },
-      })
+      if (this.arrowOverflow) {
+        options.middleware.push({
+          name: 'arrowOverflow',
+          fn: ({ placement, rects, middlewareData }) => {
+            let overflow: boolean
+            const { centerOffset } = middlewareData.arrow
+            if (placement.startsWith('top') || placement.startsWith('bottom')) {
+              overflow = Math.abs(centerOffset) > rects.reference.width / 2
+            } else {
+              overflow = Math.abs(centerOffset) > rects.reference.height / 2
+            }
+            return {
+              data: {
+                overflow,
+              },
+            }
+          },
+        })
+      }
 
       // Auto min size for the popper inner
       if (this.autoMinSize) {

diff --git a/packages/floating-vue/src/config.ts b/packages/floating-vue/src/config.ts
@@ -29,6 +29,8 @@ export const config: FloatingVueConfig = {
   overflowPadding: 0,
   // Arrow padding (px)
   arrowPadding: 0,
+  // Compute arrow overflow (useful to hide it)
+  arrowOverflow: true,
   // Themes
   themes: {
     tooltip: {