Merge pull request #55 from bootwindt/add-react

Add react

packages/@bootwind-helpers/README.md

@@ -1 +1 @@
-Bootwind Template (WIP)
+1. getFloating : to create tooltip , dropdown , select

packages/@bootwind-helpers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bootwind/helpers",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

packages/@bootwind-helpers/src/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div style="min-height: 200vh;">
-        <button role="label" @mouseenter="toggleContent(1)" ref="btn">Button</button>
+        <button role="label" @click="toggleContent(1)" ref="btn">Button</button>
         <div role="listbox"  tabindex="0" @mouseleave="toggleContent(1)" v-if="content.active" style="position:fixed;max-width: 200px;" ref="element" :style="`background: black;color: white; ${content.position}`">
             <div role="option" id="listbox1-1" class="selected" aria-selected="true">
                 Green
@@ -16,19 +16,45 @@
         </div>
     </div>
     <br>
+    <div >
+        <button ref="dropdown_btn_left" @click="toggleContent(3)">
+            Dropdown button
+        </button>
+        <div v-if="content.active_3" :style="content.dropdown_left" ref="dropdown_menu_left" style="position:fixed;display: grid;gap:15px;padding:10px;background: black;max-width: 200px;">
+            <a href="#">Action</a>
+            <a href="#">Another action</a>
+            <a href="#">Something else here</a>
+        </div>
+    </div>
+    <div  style="float:right">
+        <button ref="dropdown_btn"  @click="toggleContent(4)">
+            Dropdown button
+        </button>
+        <div v-if="content.active_4" :style="content.dropdown_right" ref="dropdown_menu" style="position:fixed;display: grid;gap:15px;padding:10px;background: black;max-width: 200px;">
+            <a href="#">Action</a>
+            <a href="#">Another action</a>
+            <a href="#">Something else here</a>
+        </div>
+    </div>
+    <br>
     <div style="text-align: right;margin-top: 500px;">
-        <button @mouseenter="toggleContent(2)" ref="tooltip_btn">Button</button>
-        <div @mouseleave="toggleContent(2)" v-if="content.active_2" style="position:fixed;max-width: 200px;" ref="tooltip_content" :style="`background: black;color: white; ${content.position_2}`">
+        <button @click="toggleContent(2)" ref="tooltip_btn">Button</button>
+        <div @mouseleave="toggleContent(2)" v-if="content.active_2" style="position:fixed;max-width: 200px;max-height: 90vh;overflow: scroll;" ref="tooltip_content" :style="`background: black;color: white; ${content.position_2}`">
 
             Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, explicabo velit suscipit, veritatis fugit veniam excepturi quasi soluta nam dignissimos facere cum labore ab tempora modi, asperiores commodi temporibus? Voluptates.
             Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, explicabo velit suscipit, veritatis fugit veniam excepturi quasi soluta nam dignissimos facere cum labore ab tempora modi, asperiores commodi temporibus? Voluptates.
             Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, explicabo velit suscipit, veritatis fugit veniam excepturi quasi soluta nam dignissimos facere cum labore ab tempora modi, asperiores commodi temporibus? Voluptates.
             Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, explicabo velit suscipit, veritatis fugit veniam excepturi quasi soluta nam dignissimos facere cum labore ab tempora modi, asperiores commodi temporibus? Voluptates.
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, explicabo velit suscipit, veritatis fugit veniam excepturi quasi soluta nam dignissimos facere cum labore ab tempora modi, asperiores commodi temporibus? Voluptates.
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, explicabo velit suscipit, veritatis fugit veniam excepturi quasi soluta nam dignissimos facere cum labore ab tempora modi, asperiores commodi temporibus? Voluptates.
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, explicabo velit suscipit, veritatis fugit veniam excepturi quasi soluta nam dignissimos facere cum labore ab tempora modi, asperiores commodi temporibus? Voluptates.
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, explicabo velit suscipit, veritatis fugit veniam excepturi quasi soluta nam dignissimos facere cum labore ab tempora modi, asperiores commodi temporibus? Voluptates.
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, explicabo velit suscipit, veritatis fugit veniam excepturi quasi soluta nam dignissimos facere cum labore ab tempora modi, asperiores commodi temporibus? Voluptates.
         </div>
     </div>
 </template>
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { getFloating } from './index.js'
 
 const btn = ref(null);
@@ -37,23 +63,52 @@ const element = ref(null);
 const tooltip_btn = ref(null);
 const tooltip_content = ref(null);
 
+const dropdown_btn_left = ref(null);
+const dropdown_menu_left = ref(null);
+
+const dropdown_btn = ref(null);
+const dropdown_menu = ref(null);
+
 const content = reactive({
   position: '',
   position_2: '',
+  dropdown_left: '',
+  dropdown_right: '',
   active: false,
-  active_2: false
+  active_2: false,
+  active_3: false,
+  active_4: false,
+})
+
+onMounted(() => {
+    document.addEventListener('scroll', ()=> {
+        content.active = false
+        content.active_2 = false
+        content.active_3 = false
+        content.active_4 = false
+    })
 })
 
 const toggleContent = (n) => {
     if(n === 1){
         content.active = !content.active 
         setTimeout(() => {
-            content.position = getFloating(btn.value,element.value, 'right', 10, 10)
+            content.position = getFloating(btn.value,element.value, 'top-right', 10, 10)
         })
-    }else{
+    }else if(n === 2){
         content.active_2 = !content.active_2
         setTimeout(() => {
-            content.position_2 = getFloating(tooltip_btn.value,tooltip_content.value, 'left', 10, 10)
+            content.position_2 = getFloating(tooltip_btn.value,tooltip_content.value, 'top-left', 10, 10)
+        })
+    }else if(n === 3){
+        content.active_3 = !content.active_3
+        setTimeout(() => {
+            content.dropdown_left = getFloating(dropdown_btn_left.value,dropdown_menu_left.value, 'left', 10, 10)
+        })
+    }else if(n === 4){
+        content.active_4 = !content.active_4
+        setTimeout(() => {
+            content.dropdown_right = getFloating(dropdown_btn.value,dropdown_menu.value, 'right', 10, 10)
         })
     }
 }

packages/@bootwind-helpers/src/index.js

@@ -2,31 +2,45 @@
 const getFloating = (btn, el, position, x = 0, y = 0) => {
     if(btn && el && position){
 
-        const btnWidth = btn.offsetWidth
-        const btnTop = btn.offsetTop
-        const btnLeft = btn.offsetLeft
+        const btnWidth = btn.getBoundingClientRect().width
+        const btnHeight = btn.getBoundingClientRect().height
+        const btnTop = btn.getBoundingClientRect().top
+        const btnLeft = btn.getBoundingClientRect().left
+
+        const elTop = el.getBoundingClientRect().top
+        const elHeight = el.getBoundingClientRect().height
+        const innerWidth = window.innerWidth
 
-        let top = btnTop + y
+        const topLeftRight = btnTop + btnHeight + y
 
-        const elTop = el.offsetTop
-        const elHeight = el.offsetHeight
-        if(elTop + elHeight > window.innerHeight){
-            top = window.innerHeight - elHeight - y
+        if(position === 'left') {
+            return `top:${topLeftRight}px`
         }
 
         if(position === 'right') {
-            const left = btnWidth + btnLeft + x
-            return `left:${left}px;top:${top}px`
+            return `top:${topLeftRight}px`
+        }
+
+
+        let top = btnTop + y
+
+        if(elTop + elHeight > innerHeight){
+            top = innerHeight - elHeight - y
         }
 
-        if(position === 'left') {
-            const right = window.innerWidth - btnLeft + x
+
+        if(position === 'top-left') {
+            const right = innerWidth - btnLeft + x
             return `right:${right}px;top:${top}px`
         }
 
+        if(position === 'top-right') {
+            const left = btnWidth + btnLeft + x
+            return `left:${left}px;top:${top}px`
+        }
+
     }
     return ''
-
 }
 
 export {

packages/@bootwind-react/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/@bootwind-react/README.md

@@ -0,0 +1 @@
+Bootwind Template (WIP)