flowbite-svelte 0.8.1 → 0.8.2
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/index.d.ts +2 -1
- package/index.js +6 -1
- package/package.json +3 -2
- package/tabs/InteractiveTabs.svelte +2 -1
- package/tooltips/Tooltip.svelte +117 -0
- package/tooltips/Tooltip.svelte.d.ts +41 -0
package/index.d.ts
CHANGED
|
@@ -38,4 +38,5 @@ import SpinnerButton from "./spinners/SpinnerButton.svelte";
|
|
|
38
38
|
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
|
+
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 };
|
package/index.js
CHANGED
|
@@ -65,6 +65,9 @@ import InteractiveTabs from './tabs/InteractiveTabs.svelte'
|
|
|
65
65
|
import DefaultTabs from './tabs/DefaultTabs.svelte'
|
|
66
66
|
import PillTabs from './tabs/PillTabs.svelte'
|
|
67
67
|
|
|
68
|
+
// Tooltips
|
|
69
|
+
import Tooltip from './tooltips/Tooltip.svelte'
|
|
70
|
+
|
|
68
71
|
export {
|
|
69
72
|
// Accordions
|
|
70
73
|
Accordion,
|
|
@@ -119,5 +122,7 @@ export {
|
|
|
119
122
|
// Tabs
|
|
120
123
|
InteractiveTabs,
|
|
121
124
|
DefaultTabs,
|
|
122
|
-
PillTabs
|
|
125
|
+
PillTabs,
|
|
126
|
+
// Tooltips
|
|
127
|
+
Tooltip,
|
|
123
128
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.2",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Shinichi Okada",
|
|
@@ -88,7 +88,8 @@
|
|
|
88
88
|
"./tables/Table.svelte": "./tables/Table.svelte",
|
|
89
89
|
"./tabs/DefaultTabs.svelte": "./tabs/DefaultTabs.svelte",
|
|
90
90
|
"./tabs/InteractiveTabs.svelte": "./tabs/InteractiveTabs.svelte",
|
|
91
|
-
"./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte"
|
|
91
|
+
"./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte",
|
|
92
|
+
"./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte"
|
|
92
93
|
},
|
|
93
94
|
"svelte": "./index.js"
|
|
94
95
|
}
|
|
@@ -36,13 +36,14 @@
|
|
|
36
36
|
<div class="mb-4 border-b border-gray-200 dark:border-gray-700">
|
|
37
37
|
<ul class="flex flex-wrap -mb-px" id={tabId} role="tablist">
|
|
38
38
|
{#each tabs as { label, selected, id }}
|
|
39
|
-
<li class="mr-2" role="presentation"
|
|
39
|
+
<li class="mr-2" role="presentation">
|
|
40
40
|
<button
|
|
41
41
|
on:click={handleClick(id)}
|
|
42
42
|
class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
|
|
43
43
|
id="{label}-tab"
|
|
44
44
|
type="button"
|
|
45
45
|
role="tab"
|
|
46
|
+
class:active={activeTabValue === id}
|
|
46
47
|
aria-controls={label}
|
|
47
48
|
aria-selected={selected}>{label}</button
|
|
48
49
|
>
|
|
@@ -0,0 +1,117 @@
|
|
|
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 = "bg-gray-900";
|
|
9
|
+
|
|
10
|
+
// let style = `background-color: ${color};`;
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<div class="tooltip-wrapper">
|
|
14
|
+
<span class="tooltip-slot">
|
|
15
|
+
<slot />
|
|
16
|
+
</span>
|
|
17
|
+
<div
|
|
18
|
+
class="inline-block absolute invisible z-10 py-2 px-3 {bgColor} rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip"
|
|
19
|
+
class:active
|
|
20
|
+
class:left
|
|
21
|
+
class:right
|
|
22
|
+
class:bottom
|
|
23
|
+
class:top
|
|
24
|
+
>
|
|
25
|
+
{#if tip}
|
|
26
|
+
<div class="text-sm font-medium text-white dark:bg-gray-700">{tip}</div>
|
|
27
|
+
<div class="tooltip-arrow" />
|
|
28
|
+
{:else}
|
|
29
|
+
<slot name="custom-tip" />
|
|
30
|
+
{/if}
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<style>
|
|
35
|
+
.tooltip-wrapper {
|
|
36
|
+
position: relative;
|
|
37
|
+
display: inline-block;
|
|
38
|
+
}
|
|
39
|
+
.tooltip {
|
|
40
|
+
position: absolute;
|
|
41
|
+
font-family: inherit;
|
|
42
|
+
display: inline-block;
|
|
43
|
+
white-space: nowrap;
|
|
44
|
+
color: inherit;
|
|
45
|
+
opacity: 0;
|
|
46
|
+
visibility: hidden;
|
|
47
|
+
transition: opacity 150ms, visibility 150ms;
|
|
48
|
+
}
|
|
49
|
+
.tooltip.top:after {
|
|
50
|
+
content: "";
|
|
51
|
+
position: absolute;
|
|
52
|
+
top: 100%;
|
|
53
|
+
left: 50%;
|
|
54
|
+
margin-left: -10px;
|
|
55
|
+
border-width: 4px;
|
|
56
|
+
border-style: solid;
|
|
57
|
+
border-color: blue transparent transparent transparent;
|
|
58
|
+
}
|
|
59
|
+
.tooltip.bottom::after {
|
|
60
|
+
content: "";
|
|
61
|
+
position: absolute;
|
|
62
|
+
top: -20%;
|
|
63
|
+
left: 50%;
|
|
64
|
+
margin-left: -10px;
|
|
65
|
+
border-width: 4px;
|
|
66
|
+
border-style: solid;
|
|
67
|
+
border-color: transparent transparent blue transparent;
|
|
68
|
+
}
|
|
69
|
+
.tooltip.right::after {
|
|
70
|
+
content: "";
|
|
71
|
+
position: absolute;
|
|
72
|
+
top: 43%;
|
|
73
|
+
left: 2%;
|
|
74
|
+
margin-left: -10px;
|
|
75
|
+
border-width: 4px;
|
|
76
|
+
border-style: solid;
|
|
77
|
+
border-color: transparent blue transparent transparent;
|
|
78
|
+
}
|
|
79
|
+
.tooltip.left::after {
|
|
80
|
+
content: "";
|
|
81
|
+
position: absolute;
|
|
82
|
+
top: 43%;
|
|
83
|
+
left: 104%;
|
|
84
|
+
margin-left: -10px;
|
|
85
|
+
border-width: 4px;
|
|
86
|
+
border-style: solid;
|
|
87
|
+
border-color: transparent transparent transparent blue;
|
|
88
|
+
}
|
|
89
|
+
.tooltip.top {
|
|
90
|
+
left: 50%;
|
|
91
|
+
transform: translate(-50%, -100%);
|
|
92
|
+
margin-top: -8px;
|
|
93
|
+
}
|
|
94
|
+
.tooltip.bottom {
|
|
95
|
+
left: 50%;
|
|
96
|
+
bottom: 0px;
|
|
97
|
+
transform: translate(-50%, 100%);
|
|
98
|
+
/* margin-bottom: -px; */
|
|
99
|
+
}
|
|
100
|
+
.tooltip.left {
|
|
101
|
+
left: 0;
|
|
102
|
+
transform: translateX(-100%);
|
|
103
|
+
margin-left: -8px;
|
|
104
|
+
}
|
|
105
|
+
.tooltip.right {
|
|
106
|
+
right: 0;
|
|
107
|
+
transform: translateX(100%);
|
|
108
|
+
margin-right: 0px;
|
|
109
|
+
}
|
|
110
|
+
.tooltip.active {
|
|
111
|
+
opacity: 1;
|
|
112
|
+
visibility: initial;
|
|
113
|
+
}
|
|
114
|
+
.tooltip-slot:hover + .tooltip {
|
|
115
|
+
opacity: 1;
|
|
116
|
+
visibility: initial;
|
|
117
|
+
}</style>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} TooltipProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} TooltipEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} TooltipSlots */
|
|
4
|
+
export default class Tooltip extends SvelteComponentTyped<{
|
|
5
|
+
tip?: string;
|
|
6
|
+
top?: boolean;
|
|
7
|
+
right?: boolean;
|
|
8
|
+
bottom?: boolean;
|
|
9
|
+
left?: boolean;
|
|
10
|
+
active?: boolean;
|
|
11
|
+
bgColor?: string;
|
|
12
|
+
}, {
|
|
13
|
+
[evt: string]: CustomEvent<any>;
|
|
14
|
+
}, {
|
|
15
|
+
default: {};
|
|
16
|
+
'custom-tip': {};
|
|
17
|
+
}> {
|
|
18
|
+
}
|
|
19
|
+
export type TooltipProps = typeof __propDef.props;
|
|
20
|
+
export type TooltipEvents = typeof __propDef.events;
|
|
21
|
+
export type TooltipSlots = typeof __propDef.slots;
|
|
22
|
+
import { SvelteComponentTyped } from "svelte";
|
|
23
|
+
declare const __propDef: {
|
|
24
|
+
props: {
|
|
25
|
+
tip?: string;
|
|
26
|
+
top?: boolean;
|
|
27
|
+
right?: boolean;
|
|
28
|
+
bottom?: boolean;
|
|
29
|
+
left?: boolean;
|
|
30
|
+
active?: boolean;
|
|
31
|
+
bgColor?: string;
|
|
32
|
+
};
|
|
33
|
+
events: {
|
|
34
|
+
[evt: string]: CustomEvent<any>;
|
|
35
|
+
};
|
|
36
|
+
slots: {
|
|
37
|
+
default: {};
|
|
38
|
+
'custom-tip': {};
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
export {};
|