Skip to content

Commit 7df99a3

Browse files
bootwindlabsbootwindlabs
authored
Merge pull request #55 from bootwindt/add-react
Add react
2 parents 69bc965 + f8e93a8 commit 7df99a3

File tree

19 files changed

+1303
-25
lines changed

19 files changed

+1303
-25
lines changed

‎packages/@bootwind-helpers/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
Bootwind Template (WIP)
1+
1. getFloating : to create tooltip , dropdown , select

‎packages/@bootwind-helpers/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/@bootwind-helpers/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@bootwind/helpers",
3-
"version": "0.0.2",
3+
"version": "0.0.4",
44
"type": "module",
55
"scripts": {
66
"dev": "vite",

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

Lines changed: 63 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div style="min-height: 200vh;">
3-
<button role="label" @mouseenter="toggleContent(1)" ref="btn">Button</button>
3+
<button role="label" @click="toggleContent(1)" ref="btn">Button</button>
44
<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}`">
55
<div role="option" id="listbox1-1" class="selected" aria-selected="true">
66
Green
@@ -16,19 +16,45 @@
1616
</div>
1717
</div>
1818
<br>
19+
<div >
20+
<button ref="dropdown_btn_left" @click="toggleContent(3)">
21+
Dropdown button
22+
</button>
23+
<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;">
24+
<a href="#">Action</a>
25+
<a href="#">Another action</a>
26+
<a href="#">Something else here</a>
27+
</div>
28+
</div>
29+
<div style="float:right">
30+
<button ref="dropdown_btn" @click="toggleContent(4)">
31+
Dropdown button
32+
</button>
33+
<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;">
34+
<a href="#">Action</a>
35+
<a href="#">Another action</a>
36+
<a href="#">Something else here</a>
37+
</div>
38+
</div>
39+
<br>
1940
<div style="text-align: right;margin-top: 500px;">
20-
<button @mouseenter="toggleContent(2)" ref="tooltip_btn">Button</button>
21-
<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}`">
41+
<button @click="toggleContent(2)" ref="tooltip_btn">Button</button>
42+
<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}`">
2243

2344
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.
2445
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.
2546
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.
2647
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.
48+
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.
49+
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.
50+
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.
51+
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.
52+
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.
2753
</div>
2854
</div>
2955
</template>
3056
<script setup>
31-
import { ref, reactive } from 'vue'
57+
import { ref, reactive, onMounted } from 'vue'
3258
import { getFloating } from './index.js'
3359
3460
const btn = ref(null);
@@ -37,23 +63,52 @@ const element = ref(null);
3763
const tooltip_btn = ref(null);
3864
const tooltip_content = ref(null);
3965
66+
const dropdown_btn_left = ref(null);
67+
const dropdown_menu_left = ref(null);
68+
69+
const dropdown_btn = ref(null);
70+
const dropdown_menu = ref(null);
71+
4072
const content = reactive({
4173
position: '',
4274
position_2: '',
75+
dropdown_left: '',
76+
dropdown_right: '',
4377
active: false,
44-
active_2: false
78+
active_2: false,
79+
active_3: false,
80+
active_4: false,
81+
})
82+
83+
onMounted(() => {
84+
document.addEventListener('scroll', ()=> {
85+
content.active = false
86+
content.active_2 = false
87+
content.active_3 = false
88+
content.active_4 = false
89+
})
4590
})
4691
4792
const toggleContent = (n) => {
4893
if(n === 1){
4994
content.active = !content.active
5095
setTimeout(() => {
51-
content.position = getFloating(btn.value,element.value, 'right', 10, 10)
96+
content.position = getFloating(btn.value,element.value, 'top-right', 10, 10)
5297
})
53-
}else{
98+
}else if(n === 2){
5499
content.active_2 = !content.active_2
55100
setTimeout(() => {
56-
content.position_2 = getFloating(tooltip_btn.value,tooltip_content.value, 'left', 10, 10)
101+
content.position_2 = getFloating(tooltip_btn.value,tooltip_content.value, 'top-left', 10, 10)
102+
})
103+
}else if(n === 3){
104+
content.active_3 = !content.active_3
105+
setTimeout(() => {
106+
content.dropdown_left = getFloating(dropdown_btn_left.value,dropdown_menu_left.value, 'left', 10, 10)
107+
})
108+
}else if(n === 4){
109+
content.active_4 = !content.active_4
110+
setTimeout(() => {
111+
content.dropdown_right = getFloating(dropdown_btn.value,dropdown_menu.value, 'right', 10, 10)
57112
})
58113
}
59114
}

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

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,45 @@
22
const getFloating = (btn, el, position, x = 0, y = 0) => {
33
if(btn && el && position){
44

5-
const btnWidth = btn.offsetWidth
6-
const btnTop = btn.offsetTop
7-
const btnLeft = btn.offsetLeft
5+
const btnWidth = btn.getBoundingClientRect().width
6+
const btnHeight = btn.getBoundingClientRect().height
7+
const btnTop = btn.getBoundingClientRect().top
8+
const btnLeft = btn.getBoundingClientRect().left
9+
10+
const elTop = el.getBoundingClientRect().top
11+
const elHeight = el.getBoundingClientRect().height
12+
const innerWidth = window.innerWidth
813

9-
let top = btnTop + y
14+
const topLeftRight = btnTop + btnHeight + y
1015

11-
const elTop = el.offsetTop
12-
const elHeight = el.offsetHeight
13-
if(elTop + elHeight > window.innerHeight){
14-
top = window.innerHeight - elHeight - y
16+
if(position === 'left') {
17+
return `top:${topLeftRight}px`
1518
}
1619

1720
if(position === 'right') {
18-
const left = btnWidth + btnLeft + x
19-
return `left:${left}px;top:${top}px`
21+
return `top:${topLeftRight}px`
22+
}
23+
24+
25+
let top = btnTop + y
26+
27+
if(elTop + elHeight > innerHeight){
28+
top = innerHeight - elHeight - y
2029
}
2130

22-
if(position === 'left') {
23-
const right = window.innerWidth - btnLeft + x
31+
32+
if(position === 'top-left') {
33+
const right = innerWidth - btnLeft + x
2434
return `right:${right}px;top:${top}px`
2535
}
2636

37+
if(position === 'top-right') {
38+
const left = btnWidth + btnLeft + x
39+
return `left:${left}px;top:${top}px`
40+
}
41+
2742
}
2843
return ''
29-
3044
}
3145

3246
export {

‎packages/@bootwind-react/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎packages/@bootwind-react/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Bootwind Template (WIP)

0 commit comments

Comments
 (0)