flowbite-svelte 0.46.5 → 0.46.6
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/dist/badge/Badge.svelte +59 -36
- package/dist/badge/Badge.svelte.d.ts +22 -20
- package/dist/types.d.ts +1 -0
- package/package.json +8 -8
package/dist/badge/Badge.svelte
CHANGED
|
@@ -1,16 +1,21 @@
|
|
|
1
|
-
<script>import
|
|
2
|
-
import { createEventDispatcher } from "svelte";
|
|
1
|
+
<script>import { createEventDispatcher } from "svelte";
|
|
3
2
|
import { twMerge } from "tailwind-merge";
|
|
4
|
-
import CloseButton from "
|
|
3
|
+
import { CloseButton } from "..";
|
|
4
|
+
import { fade } from "svelte/transition";
|
|
5
|
+
const dispatcher = createEventDispatcher();
|
|
5
6
|
export let color = "primary";
|
|
6
7
|
export let large = false;
|
|
7
8
|
export let dismissable = false;
|
|
8
|
-
|
|
9
|
+
export let border = false;
|
|
10
|
+
export let href = "";
|
|
11
|
+
export let rounded = false;
|
|
12
|
+
export let transition = fade;
|
|
13
|
+
export let params = {};
|
|
14
|
+
let badgeStatus = true;
|
|
9
15
|
const colors = {
|
|
10
16
|
primary: "bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300",
|
|
11
|
-
blue: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
|
|
12
17
|
dark: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300",
|
|
13
|
-
|
|
18
|
+
blue: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
|
|
14
19
|
red: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
|
|
15
20
|
green: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
|
|
16
21
|
yellow: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
|
|
@@ -21,8 +26,8 @@ const colors = {
|
|
|
21
26
|
};
|
|
22
27
|
const borderedColors = {
|
|
23
28
|
primary: "bg-primary-100 text-primary-800 dark:bg-gray-700 dark:text-primary-400 border-primary-400 dark:border-primary-400",
|
|
29
|
+
dark: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400 border-gray-400 dark:border-gray-400",
|
|
24
30
|
blue: "bg-blue-100 text-blue-800 dark:bg-gray-700 dark:text-blue-400 border-blue-400 dark:border-blue-400",
|
|
25
|
-
dark: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400 border-gray-500 dark:border-gray-500",
|
|
26
31
|
red: "bg-red-100 text-red-800 dark:bg-gray-700 dark:text-red-400 border-red-400 dark:border-red-400",
|
|
27
32
|
green: "bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border-green-400 dark:border-green-400",
|
|
28
33
|
yellow: "bg-yellow-100 text-yellow-800 dark:bg-gray-700 dark:text-yellow-300 border-yellow-300 dark:border-yellow-300",
|
|
@@ -33,8 +38,8 @@ const borderedColors = {
|
|
|
33
38
|
};
|
|
34
39
|
const hoverColors = {
|
|
35
40
|
primary: "hover:bg-primary-200",
|
|
36
|
-
blue: "hover:bg-blue-200",
|
|
37
41
|
dark: "hover:bg-gray-200",
|
|
42
|
+
blue: "hover:bg-blue-200",
|
|
38
43
|
red: "hover:bg-red-200",
|
|
39
44
|
green: "hover:bg-green-200",
|
|
40
45
|
yellow: "hover:bg-yellow-200",
|
|
@@ -43,40 +48,58 @@ const hoverColors = {
|
|
|
43
48
|
pink: "hover:bg-pink-200",
|
|
44
49
|
none: ""
|
|
45
50
|
};
|
|
46
|
-
const
|
|
47
|
-
|
|
48
|
-
$: badgeClass = twMerge(baseClass, large ? "text-sm" : "text-xs", $$restProps.border ? `border ${borderedColors[color]}` : colors[color], $$restProps.href && hoverColors[color], $$restProps.rounded ? "rounded-full" : "rounded", $$props.class);
|
|
49
|
-
const closeBtnColors = {
|
|
50
|
-
primary: "text-primary-400 hover:text-primary-900 dark:hover:bg-primary-800 dark:hover:text-primary-300",
|
|
51
|
-
blue: "text-blue-400 hover:text-blue-900 dark:hover:bg-blue-800 dark:hover:text-blue-300",
|
|
52
|
-
dark: "text-gray-400 hover:text-gray-400 hover:bg-gray-600 dark:hover:text-gray-300",
|
|
53
|
-
red: "text-red-400 hover:text-red-900 dark:hover:bg-red-800 dark:hover:text-red-300",
|
|
54
|
-
green: "text-green-400 hover:text-green-900 dark:hover:bg-green-800 dark:hover:text-green-300",
|
|
55
|
-
yellow: "text-yellow-400 hover:text-yellow-900 dark:hover:bg-yellow-800 dark:hover:text-yellow-300",
|
|
56
|
-
indigo: "text-indigo-400 hover:text-indigo-900 dark:hover:bg-indigo-800 dark:hover:text-indigo-300",
|
|
57
|
-
purple: "text-purple-400 hover:text-purple-900 dark:hover:bg-purple-800 dark:hover:text-purple-300",
|
|
58
|
-
pink: "text-pink-400 hover:text-pink-900 dark:hover:bg-pink-800 dark:hover:text-pink-300",
|
|
59
|
-
none: ""
|
|
51
|
+
const close = () => {
|
|
52
|
+
badgeStatus = false;
|
|
60
53
|
};
|
|
54
|
+
const baseClass = "font-medium inline-flex items-center justify-center px-2.5 py-0.5";
|
|
55
|
+
let badgeClass = twMerge(
|
|
56
|
+
baseClass,
|
|
57
|
+
large ? "text-sm" : "text-xs",
|
|
58
|
+
border ? `border ${borderedColors[color]}` : colors[color],
|
|
59
|
+
href && hoverColors[color],
|
|
60
|
+
rounded ? "rounded-full" : "rounded",
|
|
61
|
+
$$restProps.class
|
|
62
|
+
);
|
|
61
63
|
</script>
|
|
62
64
|
|
|
63
|
-
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
65
|
+
{#if badgeStatus}
|
|
66
|
+
<div {...$$restProps} transition:transition={params} class={badgeClass} on:close>
|
|
67
|
+
{#if href}
|
|
68
|
+
<a {href}>
|
|
69
|
+
<slot></slot>
|
|
70
|
+
</a>
|
|
71
|
+
{:else}
|
|
72
|
+
<slot></slot>
|
|
73
|
+
{/if}
|
|
74
|
+
{#if dismissable}
|
|
75
|
+
<slot name="close-button" {close}>
|
|
76
|
+
<CloseButton
|
|
77
|
+
divclass="ms-1.5 -me-1.5"
|
|
78
|
+
{color}
|
|
79
|
+
size={large ? 'sm' : 'xs'}
|
|
80
|
+
ariaLabel="Remove badge"
|
|
81
|
+
on:click={() => {
|
|
82
|
+
badgeStatus = false;
|
|
83
|
+
dispatcher('close');
|
|
84
|
+
}}
|
|
85
|
+
/>
|
|
86
|
+
</slot>
|
|
87
|
+
{/if}
|
|
88
|
+
</div>
|
|
89
|
+
{/if}
|
|
74
90
|
|
|
75
91
|
<!--
|
|
76
92
|
@component
|
|
77
93
|
[Go to docs](https://flowbite-svelte.com/)
|
|
78
94
|
## Props
|
|
79
|
-
@prop export let color:
|
|
80
|
-
|
|
81
|
-
|
|
95
|
+
@prop export let color: ColorVariant = 'primary'
|
|
96
|
+
export let large: boolean = false
|
|
97
|
+
export let dismissable: boolean = false
|
|
98
|
+
export let border: boolean = false
|
|
99
|
+
export let href: string = ''
|
|
100
|
+
export let rounded: boolean = false
|
|
101
|
+
export let transition = fade
|
|
102
|
+
export let params = {}
|
|
103
|
+
|
|
104
|
+
let badgeStatus: boolean = true;
|
|
82
105
|
-->
|
|
@@ -1,22 +1,17 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
import type { ColorVariant } from '../types';
|
|
3
|
+
import { fade } from 'svelte/transition';
|
|
2
4
|
declare const __propDef: {
|
|
3
|
-
props:
|
|
4
|
-
|
|
5
|
-
color?:
|
|
6
|
-
rounded?: boolean;
|
|
7
|
-
border?: boolean;
|
|
8
|
-
shadow?: boolean;
|
|
9
|
-
node?: HTMLElement | undefined;
|
|
10
|
-
use?: import("svelte/action").Action<HTMLElement, any>;
|
|
11
|
-
options?: object;
|
|
12
|
-
class?: string;
|
|
13
|
-
role?: string;
|
|
14
|
-
open?: boolean;
|
|
15
|
-
transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
|
|
16
|
-
params?: any;
|
|
17
|
-
} & import("..").Dismissable, "color"> & {
|
|
18
|
-
color?: "primary" | "blue" | "dark" | "red" | "green" | "yellow" | "indigo" | "purple" | "pink" | "none";
|
|
5
|
+
props: {
|
|
6
|
+
[x: string]: any;
|
|
7
|
+
color?: ColorVariant;
|
|
19
8
|
large?: boolean;
|
|
9
|
+
dismissable?: boolean;
|
|
10
|
+
border?: boolean;
|
|
11
|
+
href?: string;
|
|
12
|
+
rounded?: boolean;
|
|
13
|
+
transition?: typeof fade;
|
|
14
|
+
params?: {};
|
|
20
15
|
};
|
|
21
16
|
events: {
|
|
22
17
|
close: CustomEvent<any>;
|
|
@@ -26,7 +21,7 @@ declare const __propDef: {
|
|
|
26
21
|
slots: {
|
|
27
22
|
default: {};
|
|
28
23
|
'close-button': {
|
|
29
|
-
close: (
|
|
24
|
+
close: () => void;
|
|
30
25
|
};
|
|
31
26
|
};
|
|
32
27
|
};
|
|
@@ -36,9 +31,16 @@ export type BadgeSlots = typeof __propDef.slots;
|
|
|
36
31
|
/**
|
|
37
32
|
* [Go to docs](https://flowbite-svelte.com/)
|
|
38
33
|
* ## Props
|
|
39
|
-
* @prop export let color:
|
|
40
|
-
*
|
|
41
|
-
*
|
|
34
|
+
* @prop export let color: ColorVariant = 'primary'
|
|
35
|
+
* export let large: boolean = false
|
|
36
|
+
* export let dismissable: boolean = false
|
|
37
|
+
* export let border: boolean = false
|
|
38
|
+
* export let href: string = ''
|
|
39
|
+
* export let rounded: boolean = false
|
|
40
|
+
* export let transition = fade
|
|
41
|
+
* export let params = {}
|
|
42
|
+
*
|
|
43
|
+
* let badgeStatus: boolean = true;
|
|
42
44
|
*/
|
|
43
45
|
export default class Badge extends SvelteComponentTyped<BadgeProps, BadgeEvents, BadgeSlots> {
|
|
44
46
|
}
|
package/dist/types.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements
|
|
|
2
2
|
export type BlockQuoteType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
|
|
3
3
|
export type ButtonType = 'button' | 'submit' | 'reset';
|
|
4
4
|
export type ButtonColorType = 'alternative' | 'blue' | 'dark' | 'green' | 'light' | 'primary' | 'purple' | 'red' | 'yellow' | 'none';
|
|
5
|
+
export type ColorVariant = 'dark' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'primary' | 'none';
|
|
5
6
|
export type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink' | 'white' | 'custom' | 'primary' | 'secondary';
|
|
6
7
|
export type ImgType = {
|
|
7
8
|
src: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.46.
|
|
3
|
+
"version": "0.46.6",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"author": {
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
"homepage": "https://flowbite-svelte.com/",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"devDependencies": {
|
|
15
|
-
"@changesets/cli": "^2.27.
|
|
15
|
+
"@changesets/cli": "^2.27.6",
|
|
16
16
|
"@docsearch/css": "^3.6.0",
|
|
17
17
|
"@docsearch/js": "^3.6.0",
|
|
18
|
-
"@playwright/test": "^1.
|
|
18
|
+
"@playwright/test": "^1.45.0",
|
|
19
19
|
"@sveltejs/adapter-vercel": "^5.3.2",
|
|
20
20
|
"@sveltejs/kit": "^2.5.17",
|
|
21
21
|
"@sveltejs/package": "2.3.2",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"esbuild": "0.21.5",
|
|
28
28
|
"eslint": "^9.5.0",
|
|
29
29
|
"eslint-config-prettier": "^9.1.0",
|
|
30
|
-
"eslint-plugin-svelte": "^2.
|
|
31
|
-
"flowbite-svelte": "^0.46.
|
|
30
|
+
"eslint-plugin-svelte": "^2.41.0",
|
|
31
|
+
"flowbite-svelte": "^0.46.6",
|
|
32
32
|
"flowbite-svelte-blocks": "^1.1.3",
|
|
33
33
|
"flowbite-svelte-icons": "^1.6.1",
|
|
34
34
|
"mdsvex": "^0.11.2",
|
|
@@ -39,11 +39,11 @@
|
|
|
39
39
|
"prism-themes": "^1.9.0",
|
|
40
40
|
"publint": "^0.2.8",
|
|
41
41
|
"svelte": "^4.2.18",
|
|
42
|
-
"svelte-check": "^3.8.
|
|
42
|
+
"svelte-check": "^3.8.2",
|
|
43
43
|
"svelte-lib-helpers": "^0.4.6",
|
|
44
44
|
"svelte-meta-tags": "^3.1.2",
|
|
45
45
|
"svelte-preprocess": "^6.0.1",
|
|
46
|
-
"svelte2tsx": "^0.7.
|
|
46
|
+
"svelte2tsx": "^0.7.11",
|
|
47
47
|
"tailwind-merge": "^1.13.1",
|
|
48
48
|
"tailwindcss": "^3.4.4",
|
|
49
49
|
"tslib": "^2.6.3",
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
"url": "https://github.com/themesberg/flowbite-svelte"
|
|
100
100
|
},
|
|
101
101
|
"dependencies": {
|
|
102
|
-
"@floating-ui/dom": "^1.6.
|
|
102
|
+
"@floating-ui/dom": "^1.6.6",
|
|
103
103
|
"apexcharts": "^3.49.1",
|
|
104
104
|
"flowbite": "^2.3.0",
|
|
105
105
|
"tailwind-merge": "^2.3.0"
|