flowbite-svelte 0.8.2 → 0.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/index.d.ts +2 -1
- package/index.js +2 -0
- package/package.json +2 -1
- package/tooltips/LightTooltip.svelte +122 -0
- package/tooltips/LightTooltip.svelte.d.ts +39 -0
- package/tooltips/Tooltip.svelte +25 -20
- package/tooltips/Tooltip.svelte.d.ts +0 -2
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# FLOWBITE-SVELTE
|
|
2
2
|
|
|
3
|
+
[Flowbite-Svelte](https://flowbite-svelte.vercel.app/) is an unofficial Flowbite component library for Svelte. All interactivities are handled by Svelte.
|
|
4
|
+
|
|
3
5
|
## Installation
|
|
4
6
|
|
|
5
7
|
[Getting started](https://flowbite-svelte.vercel.app/getting-started)
|
package/index.d.ts
CHANGED
|
@@ -39,4 +39,5 @@ import InteractiveTabs from "./tabs/InteractiveTabs.svelte";
|
|
|
39
39
|
import DefaultTabs from "./tabs/DefaultTabs.svelte";
|
|
40
40
|
import PillTabs from "./tabs/PillTabs.svelte";
|
|
41
41
|
import Tooltip from "./tooltips/Tooltip.svelte";
|
|
42
|
-
|
|
42
|
+
import LightTooltip from "./tooltips/LightTooltip.svelte";
|
|
43
|
+
export { Accordion, AccordionItem, Alert, BorderAlert, InfoAlert, Badge, BadgeIcon, BadgeLink, Button, ColorShadowButton, GradientDuotoneButton, GradientMonochromeButton, GradientOutlineButton, ButtonGroup, ButtonGroupOutline, Card, HorizontalCard, InteractiveCard, ListCard, CtaCard, EcommerceCard, SignInCard, DarkMode, Dropdown, SimpleFooter, List, modalIdStore, ExtraLargeModal, LargeModal, MediumModal, ModalButton, SignInModal, SmallModal, Navbar, DropdownNavbar, Spinner, SpinnerButton, InteractiveTabs, DefaultTabs, PillTabs, Tooltip, LightTooltip };
|
package/index.js
CHANGED
|
@@ -67,6 +67,7 @@ import PillTabs from './tabs/PillTabs.svelte'
|
|
|
67
67
|
|
|
68
68
|
// Tooltips
|
|
69
69
|
import Tooltip from './tooltips/Tooltip.svelte'
|
|
70
|
+
import LightTooltip from './tooltips/LightTooltip.svelte'
|
|
70
71
|
|
|
71
72
|
export {
|
|
72
73
|
// Accordions
|
|
@@ -125,4 +126,5 @@ export {
|
|
|
125
126
|
PillTabs,
|
|
126
127
|
// Tooltips
|
|
127
128
|
Tooltip,
|
|
129
|
+
LightTooltip,
|
|
128
130
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.3",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Shinichi Okada",
|
|
@@ -89,6 +89,7 @@
|
|
|
89
89
|
"./tabs/DefaultTabs.svelte": "./tabs/DefaultTabs.svelte",
|
|
90
90
|
"./tabs/InteractiveTabs.svelte": "./tabs/InteractiveTabs.svelte",
|
|
91
91
|
"./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte",
|
|
92
|
+
"./tooltips/LightTooltip.svelte": "./tooltips/LightTooltip.svelte",
|
|
92
93
|
"./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte"
|
|
93
94
|
},
|
|
94
95
|
"svelte": "./index.js"
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let tip = "";
|
|
3
|
+
export let top = false;
|
|
4
|
+
export let right = false;
|
|
5
|
+
export let bottom = false;
|
|
6
|
+
export let left = false;
|
|
7
|
+
export let active = false;
|
|
8
|
+
// export let bgColor = "";
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<div class="tooltip-wrapper">
|
|
12
|
+
<span class="tooltip-slot">
|
|
13
|
+
<slot />
|
|
14
|
+
</span>
|
|
15
|
+
<div
|
|
16
|
+
class="inline-block absolute invisible z-10 py-2 px-3 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 tooltip"
|
|
17
|
+
class:active
|
|
18
|
+
class:left
|
|
19
|
+
class:right
|
|
20
|
+
class:bottom
|
|
21
|
+
class:top
|
|
22
|
+
>
|
|
23
|
+
{#if tip}
|
|
24
|
+
<div class="text-sm font-medium text-gray-900">{tip}</div>
|
|
25
|
+
{:else}
|
|
26
|
+
<slot name="custom-tip" />
|
|
27
|
+
{/if}
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<style>
|
|
32
|
+
.tooltip-wrapper {
|
|
33
|
+
position: relative;
|
|
34
|
+
display: inline-block;
|
|
35
|
+
}
|
|
36
|
+
.tooltip {
|
|
37
|
+
position: absolute;
|
|
38
|
+
font-family: inherit;
|
|
39
|
+
display: inline-block;
|
|
40
|
+
white-space: nowrap;
|
|
41
|
+
color: inherit;
|
|
42
|
+
opacity: 0;
|
|
43
|
+
visibility: hidden;
|
|
44
|
+
transition: opacity 150ms, visibility 150ms;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.tooltip.top:after {
|
|
48
|
+
content: "";
|
|
49
|
+
position: absolute;
|
|
50
|
+
top: 100%;
|
|
51
|
+
left: 50%;
|
|
52
|
+
margin-left: -10px;
|
|
53
|
+
border-width: 5px;
|
|
54
|
+
border-style: solid;
|
|
55
|
+
border-color: #ddd transparent transparent transparent;
|
|
56
|
+
}
|
|
57
|
+
.tooltip.bottom::after {
|
|
58
|
+
content: "";
|
|
59
|
+
position: absolute;
|
|
60
|
+
top: -20%;
|
|
61
|
+
left: 50%;
|
|
62
|
+
margin-left: -10px;
|
|
63
|
+
border-width: 5px;
|
|
64
|
+
border-style: solid;
|
|
65
|
+
border-color: transparent transparent #ddd transparent;
|
|
66
|
+
}
|
|
67
|
+
.tooltip.right::after {
|
|
68
|
+
content: "";
|
|
69
|
+
position: absolute;
|
|
70
|
+
/* vertically center */
|
|
71
|
+
top: 50%;
|
|
72
|
+
transform: translateY(-50%);
|
|
73
|
+
/* position tooltip correctly */
|
|
74
|
+
right: 100%;
|
|
75
|
+
margin-left: -5px;
|
|
76
|
+
|
|
77
|
+
border-width: 5px;
|
|
78
|
+
border-style: solid;
|
|
79
|
+
border-color: transparent #ddd transparent transparent;
|
|
80
|
+
}
|
|
81
|
+
.tooltip.left::after {
|
|
82
|
+
content: "";
|
|
83
|
+
position: absolute;
|
|
84
|
+
/* vertically center */
|
|
85
|
+
top: 50%;
|
|
86
|
+
transform: translateY(-50%);
|
|
87
|
+
/* position tooltip correctly */
|
|
88
|
+
left: 100%;
|
|
89
|
+
/* margin-left: -5px; */
|
|
90
|
+
border-width: 5px;
|
|
91
|
+
border-style: solid;
|
|
92
|
+
border-color: transparent transparent transparent #ddd;
|
|
93
|
+
}
|
|
94
|
+
.tooltip.top {
|
|
95
|
+
left: 50%;
|
|
96
|
+
transform: translate(-50%, -100%);
|
|
97
|
+
margin-top: -8px;
|
|
98
|
+
}
|
|
99
|
+
.tooltip.bottom {
|
|
100
|
+
left: 50%;
|
|
101
|
+
bottom: 0px;
|
|
102
|
+
transform: translate(-50%, 100%);
|
|
103
|
+
/* margin-bottom: -px; */
|
|
104
|
+
}
|
|
105
|
+
.tooltip.left {
|
|
106
|
+
left: 0;
|
|
107
|
+
transform: translateX(-100%);
|
|
108
|
+
margin-left: -8px;
|
|
109
|
+
}
|
|
110
|
+
.tooltip.right {
|
|
111
|
+
right: 0;
|
|
112
|
+
transform: translateX(100%);
|
|
113
|
+
margin-right: 0px;
|
|
114
|
+
}
|
|
115
|
+
.tooltip.active {
|
|
116
|
+
opacity: 1;
|
|
117
|
+
visibility: initial;
|
|
118
|
+
}
|
|
119
|
+
.tooltip-slot:hover + .tooltip {
|
|
120
|
+
opacity: 1;
|
|
121
|
+
visibility: initial;
|
|
122
|
+
}</style>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} LightTooltipProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} LightTooltipEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} LightTooltipSlots */
|
|
4
|
+
export default class LightTooltip extends SvelteComponentTyped<{
|
|
5
|
+
tip?: string;
|
|
6
|
+
top?: boolean;
|
|
7
|
+
right?: boolean;
|
|
8
|
+
bottom?: boolean;
|
|
9
|
+
left?: boolean;
|
|
10
|
+
active?: boolean;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {
|
|
14
|
+
default: {};
|
|
15
|
+
'custom-tip': {};
|
|
16
|
+
}> {
|
|
17
|
+
}
|
|
18
|
+
export type LightTooltipProps = typeof __propDef.props;
|
|
19
|
+
export type LightTooltipEvents = typeof __propDef.events;
|
|
20
|
+
export type LightTooltipSlots = typeof __propDef.slots;
|
|
21
|
+
import { SvelteComponentTyped } from "svelte";
|
|
22
|
+
declare const __propDef: {
|
|
23
|
+
props: {
|
|
24
|
+
tip?: string;
|
|
25
|
+
top?: boolean;
|
|
26
|
+
right?: boolean;
|
|
27
|
+
bottom?: boolean;
|
|
28
|
+
left?: boolean;
|
|
29
|
+
active?: boolean;
|
|
30
|
+
};
|
|
31
|
+
events: {
|
|
32
|
+
[evt: string]: CustomEvent<any>;
|
|
33
|
+
};
|
|
34
|
+
slots: {
|
|
35
|
+
default: {};
|
|
36
|
+
'custom-tip': {};
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
export {};
|
package/tooltips/Tooltip.svelte
CHANGED
|
@@ -5,9 +5,7 @@
|
|
|
5
5
|
export let bottom = false;
|
|
6
6
|
export let left = false;
|
|
7
7
|
export let active = false;
|
|
8
|
-
export let bgColor = "
|
|
9
|
-
|
|
10
|
-
// let style = `background-color: ${color};`;
|
|
8
|
+
// export let bgColor = "";
|
|
11
9
|
</script>
|
|
12
10
|
|
|
13
11
|
<div class="tooltip-wrapper">
|
|
@@ -15,7 +13,7 @@
|
|
|
15
13
|
<slot />
|
|
16
14
|
</span>
|
|
17
15
|
<div
|
|
18
|
-
class="inline-block absolute invisible z-10 py-2 px-3
|
|
16
|
+
class="inline-block absolute invisible z-10 py-2 px-3 bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"
|
|
19
17
|
class:active
|
|
20
18
|
class:left
|
|
21
19
|
class:right
|
|
@@ -23,8 +21,7 @@
|
|
|
23
21
|
class:top
|
|
24
22
|
>
|
|
25
23
|
{#if tip}
|
|
26
|
-
<div class="text-sm font-medium text-white
|
|
27
|
-
<div class="tooltip-arrow" />
|
|
24
|
+
<div class="text-sm font-medium text-white ">{tip}</div>
|
|
28
25
|
{:else}
|
|
29
26
|
<slot name="custom-tip" />
|
|
30
27
|
{/if}
|
|
@@ -46,15 +43,16 @@
|
|
|
46
43
|
visibility: hidden;
|
|
47
44
|
transition: opacity 150ms, visibility 150ms;
|
|
48
45
|
}
|
|
46
|
+
|
|
49
47
|
.tooltip.top:after {
|
|
50
48
|
content: "";
|
|
51
49
|
position: absolute;
|
|
52
50
|
top: 100%;
|
|
53
51
|
left: 50%;
|
|
54
52
|
margin-left: -10px;
|
|
55
|
-
border-width:
|
|
53
|
+
border-width: 5px;
|
|
56
54
|
border-style: solid;
|
|
57
|
-
border-color:
|
|
55
|
+
border-color: rgb(55 65 81) transparent transparent transparent;
|
|
58
56
|
}
|
|
59
57
|
.tooltip.bottom::after {
|
|
60
58
|
content: "";
|
|
@@ -62,29 +60,36 @@
|
|
|
62
60
|
top: -20%;
|
|
63
61
|
left: 50%;
|
|
64
62
|
margin-left: -10px;
|
|
65
|
-
border-width:
|
|
63
|
+
border-width: 5px;
|
|
66
64
|
border-style: solid;
|
|
67
|
-
border-color: transparent transparent
|
|
65
|
+
border-color: transparent transparent rgb(55 65 81) transparent;
|
|
68
66
|
}
|
|
69
67
|
.tooltip.right::after {
|
|
70
68
|
content: "";
|
|
71
69
|
position: absolute;
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
70
|
+
/* vertically center */
|
|
71
|
+
top: 50%;
|
|
72
|
+
transform: translateY(-50%);
|
|
73
|
+
/* position tooltip correctly */
|
|
74
|
+
right: 100%;
|
|
75
|
+
margin-left: -5px;
|
|
76
|
+
|
|
77
|
+
border-width: 5px;
|
|
76
78
|
border-style: solid;
|
|
77
|
-
border-color: transparent
|
|
79
|
+
border-color: transparent rgb(55 65 81) transparent transparent;
|
|
78
80
|
}
|
|
79
81
|
.tooltip.left::after {
|
|
80
82
|
content: "";
|
|
81
83
|
position: absolute;
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
/* vertically center */
|
|
85
|
+
top: 50%;
|
|
86
|
+
transform: translateY(-50%);
|
|
87
|
+
/* position tooltip correctly */
|
|
88
|
+
left: 100%;
|
|
89
|
+
/* margin-left: -5px; */
|
|
90
|
+
border-width: 5px;
|
|
86
91
|
border-style: solid;
|
|
87
|
-
border-color: transparent transparent transparent
|
|
92
|
+
border-color: transparent transparent transparent rgb(55 65 81);
|
|
88
93
|
}
|
|
89
94
|
.tooltip.top {
|
|
90
95
|
left: 50%;
|
|
@@ -8,7 +8,6 @@ export default class Tooltip extends SvelteComponentTyped<{
|
|
|
8
8
|
bottom?: boolean;
|
|
9
9
|
left?: boolean;
|
|
10
10
|
active?: boolean;
|
|
11
|
-
bgColor?: string;
|
|
12
11
|
}, {
|
|
13
12
|
[evt: string]: CustomEvent<any>;
|
|
14
13
|
}, {
|
|
@@ -28,7 +27,6 @@ declare const __propDef: {
|
|
|
28
27
|
bottom?: boolean;
|
|
29
28
|
left?: boolean;
|
|
30
29
|
active?: boolean;
|
|
31
|
-
bgColor?: string;
|
|
32
30
|
};
|
|
33
31
|
events: {
|
|
34
32
|
[evt: string]: CustomEvent<any>;
|