feat: implement teleport | update composables

packages/docs-next/.vitepress/theme/examples/autocomplete/base.vue

@@ -38,6 +38,7 @@ const filteredDataArray = computed(() =>
                 placeholder="e.g. jQuery"
                 icon="search"
                 clearable
+                open-on-focus
                 :data="filteredDataArray"
                 @select="(option) => (selected = option)">
                 <template #empty>No results found</template>

packages/docs-next/.vitepress/theme/examples/autocomplete/infinite-scroll.vue

@@ -60,6 +60,7 @@ function getMoreAsyncData() {
                 field="title"
                 :loading="isFetching"
                 check-scroll
+                open-on-focus
                 :debounce="500"
                 @input="getAsyncData"
                 @select="(option) => (selected = option)"

packages/docs-next/.vitepress/theme/examples/dropdown/base.vue

@@ -61,7 +61,7 @@
             <o-dropdown-item label="Something else" />
         </o-dropdown>
 
-        <o-dropdown append-to-body>
+        <o-dropdown teleport>
             <template #trigger>
                 <o-button label="Append to body" />
             </template>

packages/docs-next/.vitepress/theme/examples/dropdown/position.vue

@@ -1,12 +1,21 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const teleport = ref(false);
+</script>
+
 <template>
-    <section>
+    <section class="odocs-spaced">
+        <o-field>
+            <o-switch v-model="teleport" label="teleport" />
+        </o-field>
         <o-field expanded>
-            <o-dropdown position="top-right" expanded>
+            <o-dropdown position="auto" expanded :teleport="teleport">
                 <template #trigger>
                     <o-button
                         class="dropdown-toggle"
                         variant="primary"
-                        label="Position top"
+                        label="Position Auto"
                         expanded />
                 </template>
 
@@ -16,20 +25,46 @@
             </o-dropdown>
         </o-field>
 
-        <o-field expanded>
-            <o-dropdown position="bottom-left" expanded>
-                <template #trigger>
-                    <o-button
-                        class="dropdown-toggle"
-                        variant="primary"
-                        label="Position bottom"
-                        expanded />
-                </template>
+        <hr />
 
-                <o-dropdown-item label="Action" />
-                <o-dropdown-item label="Another action" />
-                <o-dropdown-item label="Something else" />
-            </o-dropdown>
-        </o-field>
+        <o-dropdown :teleport="teleport" position="right">
+            <template #trigger>
+                <o-button label="Append to body right" />
+            </template>
+
+            <o-dropdown-item label="Action" />
+            <o-dropdown-item label="Another action" />
+            <o-dropdown-item label="Something else" />
+        </o-dropdown>
+
+        <o-dropdown :teleport="teleport" position="left">
+            <template #trigger>
+                <o-button label="Append to body left" />
+            </template>
+
+            <o-dropdown-item label="Action" />
+            <o-dropdown-item label="Another action" />
+            <o-dropdown-item label="Something else" />
+        </o-dropdown>
+
+        <o-dropdown :teleport="teleport" position="top">
+            <template #trigger>
+                <o-button label="Append to body top" />
+            </template>
+
+            <o-dropdown-item label="Action" />
+            <o-dropdown-item label="Another action" />
+            <o-dropdown-item label="Something else" />
+        </o-dropdown>
+
+        <o-dropdown :teleport="teleport" position="bottom">
+            <template #trigger>
+                <o-button label="Append to body bottom" />
+            </template>
+
+            <o-dropdown-item label="Action" />
+            <o-dropdown-item label="Another action" />
+            <o-dropdown-item label="Something else" />
+        </o-dropdown>
     </section>
 </template>

packages/docs-next/.vitepress/theme/examples/modal/index.vue

@@ -2,6 +2,9 @@
 import Base from "./base.vue";
 import BaseCode from "./base.vue?raw";
 
+import Teleport from "./teleport.vue";
+import TeleportCode from "./teleport.vue?raw";
+
 import Programmatically from "./programmatically.vue";
 import ProgrammaticallyCode from "./programmatically.vue?raw";
 
@@ -13,6 +16,9 @@ import ProgrammaticallyAsyncCode from "./programmatically-async.vue?raw";
     <h3 id="base">Base</h3>
     <ExampleViewer :component="Base" :code="BaseCode" />
 
+    <h3 id="base">Teleport</h3>
+    <ExampleViewer :component="Teleport" :code="TeleportCode" />
+
     <h3 id="programmatically">Programmatically</h3>
     <ExampleViewer :component="Programmatically" :code="ProgrammaticallyCode" />
 

packages/docs-next/.vitepress/theme/examples/modal/teleport.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { ref } from "vue";
+
+const isModalActive = ref(false);
+</script>
+
+<template>
+    <section class="odocs-spaced">
+        <o-button
+            label="Open modal"
+            size="medium"
+            variant="primary"
+            @click="isModalActive = true" />
+
+        <o-modal v-model:active="isModalActive" teleport>
+            <div style="padding: 10px; background-color: white">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Etiam sodales leo nec convallis rutrum. Vivamus pharetra
+                    molestie arcu at dictum. Nulla faucibus leo eget enim
+                    egestas, in tempus justo venenatis. Duis dictum suscipit
+                    erat, a dapibus eros lobortis ac. Praesent tempor rhoncus
+                    convallis. Nullam in ipsum convallis, rutrum elit eget,
+                    dictum ipsum. Nunc sagittis aliquet massa. Etiam lacus
+                    sapien, eleifend non eros quis, finibus ornare nisl. Ut
+                    laoreet sit amet lacus non dignissim. Sed convallis mattis
+                    enim, sed interdum risus molestie ut. Praesent vel ex
+                    hendrerit, cursus lectus a, blandit felis. Nam luctus orci
+                    nec varius commodo.
+                </p>
+                <p>
+                    Sed vulputate metus purus, ut egestas erat congue et. Donec
+                    tellus orci, malesuada eget dolor sed, pellentesque bibendum
+                    nunc. In eu egestas diam. Integer sed congue massa. Sed a
+                    urna quam. Morbi vulputate dolor eleifend ligula lobortis
+                    venenatis. Aenean pellentesque risus sit amet faucibus
+                    molestie. Aliquam eu lorem aliquet, aliquam nulla in,
+                    vestibulum lorem. Donec mollis mi at sollicitudin tristique.
+                    Nullam id nibh pulvinar, dignissim nisl id, gravida risus.
+                    Nulla arcu elit, scelerisque in sollicitudin et, laoreet et
+                    metus. Aenean placerat turpis nec tincidunt tempus.
+                </p>
+            </div>
+        </o-modal>
+    </section>
+</template>

packages/docs-next/.vitepress/theme/examples/taginput/autocomplete.vue

@@ -388,18 +388,20 @@ const openOnFocus = ref(false);
             <o-switch v-model="allowNew"> Allow new items </o-switch>
             <o-switch v-model="openOnFocus"> Open on focus </o-switch>
         </o-field>
+
         <o-field label="Enter some items">
             <o-taginput
                 v-model="tags"
                 :data="filteredTags"
-                :allow-autocomplete="true"
+                allow-autocomplete
                 :allow-new="allowNew"
                 :open-on-focus="openOnFocus"
                 field="user.first_name"
                 icon="tag"
                 placeholder="Add an item"
-                @typing="getFilteredTags" />
+                @input="getFilteredTags" />
         </o-field>
+
         <p><b>Items:</b> {{ tags }}</p>
     </section>
 </template>

packages/docs-next/.vitepress/theme/examples/taginput/base.vue

@@ -13,6 +13,7 @@ const tags = ref(["Pistoia", "Valdinievole"]);
                 placeholder="Add an item"
                 aria-close-label="Delete this item" />
         </o-field>
+
         <p><b>Items:</b> {{ tags }}</p>
     </section>
 </template>

packages/docs-next/.vitepress/theme/examples/taginput/custom-selected.vue

@@ -39,6 +39,7 @@ function getType(item) {
                 </template>
             </o-taginput>
         </o-field>
+
         <p><b>Items:</b> {{ items }}</p>
     </section>
 </template>

packages/docs-next/.vitepress/theme/examples/tooltip/base.vue

@@ -8,7 +8,7 @@
             <o-button variant="warning" label="Delayed" />
         </o-tooltip>
 
-        <o-tooltip label="I'm on body" append-to-body>
+        <o-tooltip label="I'm on body" teleport>
             <o-button variant="info" label="Append on body" />
         </o-tooltip>
     </section>

packages/docs-next/.vitepress/theme/examples/tooltip/position.vue

@@ -1,18 +1,31 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const teleport = ref(false);
+</script>
+
 <template>
     <section class="odocs-spaced">
-        <o-tooltip label="Tooltip right" position="right">
+        <o-field>
+            <o-switch v-model="teleport" label="teleport" />
+        </o-field>
+
+        <o-tooltip label="Tooltip right" :teleport="teleport" position="right">
             <o-button label="Right" />
         </o-tooltip>
 
-        <o-tooltip label="Tooltip top" position="top">
+        <o-tooltip label="Tooltip top" :teleport="teleport" position="top">
             <o-button label="Top" />
         </o-tooltip>
 
-        <o-tooltip label="Tooltip bottom" position="bottom">
+        <o-tooltip
+            label="Tooltip bottom"
+            :teleport="teleport"
+            position="bottom">
             <o-button label="Bottom" />
         </o-tooltip>
 
-        <o-tooltip label="Tooltip left" position="left">
+        <o-tooltip label="Tooltip left" :teleport="teleport" position="left">
             <o-button label="Left" />
         </o-tooltip>
     </section>