feature: introduce new no-flip modifier

Closes #35.
ryangjchandler · Jan 7, 2024 · d63fb36 · d63fb36
1 parent 452ad5c
commit d63fb36
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 6 deletions.
diff --git a/dist/cdn.js b/dist/cdn.js
@@ -2939,6 +2939,12 @@
     if (modifiers.includes("placement")) {
       config.placement = getModifierArgument("placement");
     }
+    const popperOptions = {};
+    if (modifiers.includes("no-flip")) {
+      popperOptions.modifiers ||= [];
+      popperOptions.modifiers.push({name: "flip", enabled: false});
+    }
+    config.popperOptions = popperOptions;
     return config;
   };
 

diff --git a/dist/cdn.min.js b/dist/cdn.min.js
diff --git a/dist/module.cjs.js b/dist/module.cjs.js
@@ -3411,6 +3411,12 @@ var buildConfigFromModifiers = (modifiers) => {
   if (modifiers.includes("placement")) {
     config.placement = getModifierArgument("placement");
   }
+  const popperOptions = {};
+  if (modifiers.includes("no-flip")) {
+    popperOptions.modifiers || (popperOptions.modifiers = []);
+    popperOptions.modifiers.push({name: "flip", enabled: false});
+  }
+  config.popperOptions = popperOptions;
   return config;
 };
 

diff --git a/dist/module.esm.js b/dist/module.esm.js
@@ -3401,6 +3401,12 @@ var buildConfigFromModifiers = (modifiers) => {
   if (modifiers.includes("placement")) {
     config.placement = getModifierArgument("placement");
   }
+  const popperOptions = {};
+  if (modifiers.includes("no-flip")) {
+    popperOptions.modifiers ||= [];
+    popperOptions.modifiers.push({name: "flip", enabled: false});
+  }
+  config.popperOptions = popperOptions;
   return config;
 };
 

diff --git a/examples/no-flip.html b/examples/no-flip.html
@@ -0,0 +1,35 @@
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alpine.js Toolkit - x-html</title>
+    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6.3.1/dist/tippy.css">
+    <script type="module">
+        import Tooltip from '/dist/module.esm.js'
+
+        document.addEventListener('alpine:initializing', () => {
+            window.Alpine.plugin(
+                Tooltip
+                    .defaultProps({
+                        theme: 'material'
+                    })
+            )
+        })
+    </script>
+    <script src="//unpkg.com/alpinejs" defer></script>
+</head>
+
+<body x-data="{ content: 'Hello!' }">
+    <button x-tooltip.on.click.placement.left.no-flip="content">
+        Click me!
+    </button>
+
+    <input type="text" x-model="content">
+
+    <button x-tooltip.raw="Hello, world!">
+        Raw tooltip
+    </button>
+</body>
+</html>
diff --git a/src/buildConfigFromModifiers.js b/src/buildConfigFromModifiers.js
@@ -73,5 +73,14 @@ export const buildConfigFromModifiers = modifiers => {
         config.placement = getModifierArgument('placement')
     }
 
+    const popperOptions = {}
+
+    if (modifiers.includes('no-flip')) {
+        popperOptions.modifiers ||= [];
+        popperOptions.modifiers.push({ name: 'flip', enabled: false });
+    }
+
+    config.popperOptions = popperOptions;
+
     return config
 }