flowbite-svelte 0.34.3 → 0.34.4
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.
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
<script context="module">export {};
|
|
2
2
|
</script>
|
|
3
3
|
|
|
4
|
-
<script>import
|
|
4
|
+
<script>import { getContext } from 'svelte';
|
|
5
|
+
import classNames from 'classnames';
|
|
5
6
|
import Button from '../buttons/Button.svelte';
|
|
6
7
|
import Popper from '../utils/Popper.svelte';
|
|
7
8
|
import { setContext } from 'svelte';
|
|
@@ -13,6 +14,11 @@ export let tooltip = 'left';
|
|
|
13
14
|
export let trigger = 'hover';
|
|
14
15
|
export let textOutside = false;
|
|
15
16
|
export let id = generateId();
|
|
17
|
+
export let shadow = null;
|
|
18
|
+
export let outline = false;
|
|
19
|
+
const group = getContext('group');
|
|
20
|
+
export let color = group ? (outline ? 'dark' : 'alternative') : 'blue';
|
|
21
|
+
export let gradient = false;
|
|
16
22
|
setContext('speed-dial', { pill, tooltip, textOutside });
|
|
17
23
|
let divClass;
|
|
18
24
|
$: divClass = classNames(defaultClass, 'group', $$props.class);
|
|
@@ -21,7 +27,7 @@ $: poperClass = classNames('flex items-center mb-4 gap-2', ['top', 'bottom'].inc
|
|
|
21
27
|
</script>
|
|
22
28
|
|
|
23
29
|
<div class={divClass}>
|
|
24
|
-
<Button {pill} name="Open actions menu" aria-controls={id} aria-expanded="false" color
|
|
30
|
+
<Button {pill} name="Open actions menu" aria-controls={id} aria-expanded="false" {color} {gradient} {outline} {shadow} class="!p-3">
|
|
25
31
|
<slot name="icon">
|
|
26
32
|
<svg
|
|
27
33
|
aria-hidden="true"
|
|
@@ -15,6 +15,10 @@ declare const __propDef: {
|
|
|
15
15
|
trigger?: "click" | "hover" | undefined;
|
|
16
16
|
textOutside?: boolean | undefined;
|
|
17
17
|
id?: string | undefined;
|
|
18
|
+
shadow?: "red" | "green" | "purple" | "pink" | "blue" | "cyan" | "teal" | "lime" | null | undefined;
|
|
19
|
+
outline?: boolean | undefined;
|
|
20
|
+
color?: "red" | "yellow" | "green" | "purple" | "pink" | "blue" | "light" | "dark" | "cyan" | "teal" | "lime" | "alternative" | "primary" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow" | undefined;
|
|
21
|
+
gradient?: boolean | undefined;
|
|
18
22
|
};
|
|
19
23
|
events: {
|
|
20
24
|
[evt: string]: CustomEvent<any>;
|