flowbite-svelte 0.25.15 → 0.25.16
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/CHANGELOG.md +9 -0
- package/dropdowns/DropdownItem.svelte +1 -1
- package/icons/Envelope.svelte +37 -0
- package/icons/Envelope.svelte.d.ts +22 -0
- package/icons/Home.svelte +37 -0
- package/icons/Home.svelte.d.ts +22 -0
- package/icons/QrCode.svelte +37 -0
- package/icons/QrCode.svelte.d.ts +22 -0
- package/index.d.ts +6 -0
- package/index.js +7 -0
- package/package.json +7 -1
- package/toolbar/Toolbar.svelte +57 -0
- package/toolbar/Toolbar.svelte.d.ts +21 -0
- package/toolbar/ToolbarButton.svelte +52 -0
- package/toolbar/ToolbarButton.svelte.d.ts +24 -0
- package/toolbar/ToolbarGroup.svelte +9 -0
- package/toolbar/ToolbarGroup.svelte.d.ts +16 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [0.25.16](https://github.com/themesberg/flowbite-svelte/compare/v0.25.15...v0.25.16) (2022-08-25)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* create utilities/closebutton, label, and toolbar ([3ad9775](https://github.com/themesberg/flowbite-svelte/commit/3ad9775ffbed66908cbaa82845b86151e179d534))
|
|
11
|
+
* toolbar ([f02ff55](https://github.com/themesberg/flowbite-svelte/commit/f02ff558fa938913c32117ff51b46bdd6088e38a))
|
|
12
|
+
* toolbar w/html ([93116c3](https://github.com/themesberg/flowbite-svelte/commit/93116c34b4063eb9d166d85ef3dd7e20126fa29e))
|
|
13
|
+
|
|
5
14
|
### [0.25.15](https://github.com/themesberg/flowbite-svelte/compare/v0.25.14...v0.25.15) (2022-08-25)
|
|
6
15
|
|
|
7
16
|
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<script>export let size = '24';
|
|
2
|
+
export let color = 'currentColor';
|
|
3
|
+
export let variation = 'outline';
|
|
4
|
+
let viewBox;
|
|
5
|
+
let svgpath;
|
|
6
|
+
let svgoutline = `<path d="M21.75 6.75V17.25C21.75 18.4926 20.7426 19.5 19.5 19.5H4.5C3.25736 19.5 2.25 18.4926 2.25 17.25V6.75M21.75 6.75C21.75 5.50736 20.7426 4.5 19.5 4.5H4.5C3.25736 4.5 2.25 5.50736 2.25 6.75M21.75 6.75V6.99271C21.75 7.77405 21.3447 8.49945 20.6792 8.90894L13.1792 13.5243C12.4561 13.9694 11.5439 13.9694 10.8208 13.5243L3.32078 8.90894C2.65535 8.49945 2.25 7.77405 2.25 6.99271V6.75" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
|
|
7
|
+
let svgsolid = `<path d="M1.5 8.6691V17.25C1.5 18.9069 2.84315 20.25 4.5 20.25H19.5C21.1569 20.25 22.5 18.9069 22.5 17.25V8.6691L13.5723 14.1631C12.6081 14.7564 11.3919 14.7564 10.4277 14.1631L1.5 8.6691Z" fill="${color}"/> <path d="M22.5 6.90783V6.75C22.5 5.09315 21.1569 3.75 19.5 3.75H4.5C2.84315 3.75 1.5 5.09315 1.5 6.75V6.90783L11.2139 12.8856C11.696 13.1823 12.304 13.1823 12.7861 12.8856L22.5 6.90783Z" fill="${color}"/> `;
|
|
8
|
+
$: switch (variation) {
|
|
9
|
+
case 'outline':
|
|
10
|
+
svgpath = svgoutline;
|
|
11
|
+
viewBox = '0 0 24 24';
|
|
12
|
+
break;
|
|
13
|
+
case 'solid':
|
|
14
|
+
svgpath = svgsolid;
|
|
15
|
+
viewBox = '0 0 24 24';
|
|
16
|
+
break;
|
|
17
|
+
default:
|
|
18
|
+
svgpath = svgoutline;
|
|
19
|
+
viewBox = '0 0 24 24';
|
|
20
|
+
}
|
|
21
|
+
export let ariaLabel = 'envelope';
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<svg
|
|
25
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
26
|
+
width={size}
|
|
27
|
+
height={size}
|
|
28
|
+
class={$$props.class}
|
|
29
|
+
{...$$restProps}
|
|
30
|
+
aria-label={ariaLabel}
|
|
31
|
+
fill="none"
|
|
32
|
+
{viewBox}
|
|
33
|
+
stroke-width="2"
|
|
34
|
+
on:click
|
|
35
|
+
>
|
|
36
|
+
{@html svgpath}
|
|
37
|
+
</svg>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
size?: string;
|
|
6
|
+
color?: string;
|
|
7
|
+
variation?: 'solid' | 'outline';
|
|
8
|
+
ariaLabel?: string;
|
|
9
|
+
};
|
|
10
|
+
events: {
|
|
11
|
+
click: MouseEvent;
|
|
12
|
+
} & {
|
|
13
|
+
[evt: string]: CustomEvent<any>;
|
|
14
|
+
};
|
|
15
|
+
slots: {};
|
|
16
|
+
};
|
|
17
|
+
export declare type EnvelopeProps = typeof __propDef.props;
|
|
18
|
+
export declare type EnvelopeEvents = typeof __propDef.events;
|
|
19
|
+
export declare type EnvelopeSlots = typeof __propDef.slots;
|
|
20
|
+
export default class Envelope extends SvelteComponentTyped<EnvelopeProps, EnvelopeEvents, EnvelopeSlots> {
|
|
21
|
+
}
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<script>export let size = '24';
|
|
2
|
+
export let color = 'currentColor';
|
|
3
|
+
export let variation = 'outline';
|
|
4
|
+
let viewBox;
|
|
5
|
+
let svgpath;
|
|
6
|
+
let svgoutline = `<path d="M2.25 11.9998L11.2045 3.04533C11.6438 2.60599 12.3562 2.60599 12.7955 3.04532L21.75 11.9998M4.5 9.74983V19.8748C4.5 20.4961 5.00368 20.9998 5.625 20.9998H9.75V16.1248C9.75 15.5035 10.2537 14.9998 10.875 14.9998H13.125C13.7463 14.9998 14.25 15.5035 14.25 16.1248V20.9998H18.375C18.9963 20.9998 19.5 20.4962 19.5 19.8748V9.74983M8.25 20.9998H16.5" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
|
|
7
|
+
let svgsolid = `<path d="M11.4697 3.84076C11.7626 3.54787 12.2374 3.54787 12.5303 3.84076L21.2197 12.5301C21.5126 12.823 21.9874 12.823 22.2803 12.5301C22.5732 12.2372 22.5732 11.7623 22.2803 11.4694L13.591 2.7801C12.7123 1.90142 11.2877 1.90142 10.409 2.7801L1.71967 11.4694C1.42678 11.7623 1.42678 12.2372 1.71967 12.5301C2.01256 12.823 2.48744 12.823 2.78033 12.5301L11.4697 3.84076Z" fill="${color}"/> <path d="M12 5.43176L20.159 13.5908C20.1887 13.6205 20.2191 13.6492 20.25 13.6769V19.8748C20.25 20.9103 19.4105 21.7498 18.375 21.7498H15C14.5858 21.7498 14.25 21.414 14.25 20.9998V16.4998C14.25 16.0856 13.9142 15.7498 13.5 15.7498H10.5C10.0858 15.7498 9.75 16.0856 9.75 16.4998V20.9998C9.75 21.414 9.41421 21.7498 9 21.7498H5.625C4.58947 21.7498 3.75 20.9103 3.75 19.8748V13.6769C3.78093 13.6492 3.81127 13.6205 3.84099 13.5908L12 5.43176Z" fill="${color}"/> `;
|
|
8
|
+
$: switch (variation) {
|
|
9
|
+
case 'outline':
|
|
10
|
+
svgpath = svgoutline;
|
|
11
|
+
viewBox = '0 0 24 24';
|
|
12
|
+
break;
|
|
13
|
+
case 'solid':
|
|
14
|
+
svgpath = svgsolid;
|
|
15
|
+
viewBox = '0 0 24 24';
|
|
16
|
+
break;
|
|
17
|
+
default:
|
|
18
|
+
svgpath = svgoutline;
|
|
19
|
+
viewBox = '0 0 24 24';
|
|
20
|
+
}
|
|
21
|
+
export let ariaLabel = 'home';
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<svg
|
|
25
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
26
|
+
width={size}
|
|
27
|
+
height={size}
|
|
28
|
+
class={$$props.class}
|
|
29
|
+
{...$$restProps}
|
|
30
|
+
aria-label={ariaLabel}
|
|
31
|
+
fill="none"
|
|
32
|
+
{viewBox}
|
|
33
|
+
stroke-width="2"
|
|
34
|
+
on:click
|
|
35
|
+
>
|
|
36
|
+
{@html svgpath}
|
|
37
|
+
</svg>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
size?: string;
|
|
6
|
+
color?: string;
|
|
7
|
+
variation?: 'solid' | 'outline';
|
|
8
|
+
ariaLabel?: string;
|
|
9
|
+
};
|
|
10
|
+
events: {
|
|
11
|
+
click: MouseEvent;
|
|
12
|
+
} & {
|
|
13
|
+
[evt: string]: CustomEvent<any>;
|
|
14
|
+
};
|
|
15
|
+
slots: {};
|
|
16
|
+
};
|
|
17
|
+
export declare type HomeProps = typeof __propDef.props;
|
|
18
|
+
export declare type HomeEvents = typeof __propDef.events;
|
|
19
|
+
export declare type HomeSlots = typeof __propDef.slots;
|
|
20
|
+
export default class Home extends SvelteComponentTyped<HomeProps, HomeEvents, HomeSlots> {
|
|
21
|
+
}
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<script>export let size = '24';
|
|
2
|
+
export let color = 'currentColor';
|
|
3
|
+
export let variation = 'outline';
|
|
4
|
+
let viewBox;
|
|
5
|
+
let svgpath;
|
|
6
|
+
let svgoutline = `<path d="M3.75 4.875C3.75 4.25368 4.25368 3.75 4.875 3.75H9.375C9.99632 3.75 10.5 4.25368 10.5 4.875V9.375C10.5 9.99632 9.99632 10.5 9.375 10.5H4.875C4.25368 10.5 3.75 9.99632 3.75 9.375V4.875Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.75 14.625C3.75 14.0037 4.25368 13.5 4.875 13.5H9.375C9.99632 13.5 10.5 14.0037 10.5 14.625V19.125C10.5 19.7463 9.99632 20.25 9.375 20.25H4.875C4.25368 20.25 3.75 19.7463 3.75 19.125V14.625Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.5 4.875C13.5 4.25368 14.0037 3.75 14.625 3.75H19.125C19.7463 3.75 20.25 4.25368 20.25 4.875V9.375C20.25 9.99632 19.7463 10.5 19.125 10.5H14.625C14.0037 10.5 13.5 9.99632 13.5 9.375V4.875Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6.75 6.75H7.5V7.5H6.75V6.75Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6.75 16.5H7.5V17.25H6.75V16.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.5 6.75H17.25V7.5H16.5V6.75Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.5 13.5H14.25V14.25H13.5V13.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.5 19.5H14.25V20.25H13.5V19.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19.5 13.5H20.25V14.25H19.5V13.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19.5 19.5H20.25V20.25H19.5V19.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.5 16.5H17.25V17.25H16.5V16.5Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
|
|
7
|
+
let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 4.875C3 3.83947 3.83947 3 4.875 3H9.375C10.4105 3 11.25 3.83947 11.25 4.875V9.375C11.25 10.4105 10.4105 11.25 9.375 11.25H4.875C3.83947 11.25 3 10.4105 3 9.375V4.875ZM4.875 4.5C4.66789 4.5 4.5 4.66789 4.5 4.875V9.375C4.5 9.58211 4.66789 9.75 4.875 9.75H9.375C9.58211 9.75 9.75 9.58211 9.75 9.375V4.875C9.75 4.66789 9.58211 4.5 9.375 4.5H4.875ZM12.75 4.875C12.75 3.83947 13.5895 3 14.625 3H19.125C20.1605 3 21 3.83947 21 4.875V9.375C21 10.4105 20.1605 11.25 19.125 11.25H14.625C13.5895 11.25 12.75 10.4105 12.75 9.375V4.875ZM14.625 4.5C14.4179 4.5 14.25 4.66789 14.25 4.875V9.375C14.25 9.58211 14.4179 9.75 14.625 9.75H19.125C19.3321 9.75 19.5 9.58211 19.5 9.375V4.875C19.5 4.66789 19.3321 4.5 19.125 4.5H14.625ZM6 6.75C6 6.33579 6.33579 6 6.75 6H7.5C7.91421 6 8.25 6.33579 8.25 6.75V7.5C8.25 7.91421 7.91421 8.25 7.5 8.25H6.75C6.33579 8.25 6 7.91421 6 7.5V6.75ZM15.75 6.75C15.75 6.33579 16.0858 6 16.5 6H17.25C17.6642 6 18 6.33579 18 6.75V7.5C18 7.91421 17.6642 8.25 17.25 8.25H16.5C16.0858 8.25 15.75 7.91421 15.75 7.5V6.75ZM3 14.625C3 13.5895 3.83947 12.75 4.875 12.75H9.375C10.4105 12.75 11.25 13.5895 11.25 14.625V19.125C11.25 20.1605 10.4105 21 9.375 21H4.875C3.83947 21 3 20.1605 3 19.125V14.625ZM4.875 14.25C4.66789 14.25 4.5 14.4179 4.5 14.625V19.125C4.5 19.3321 4.66789 19.5 4.875 19.5H9.375C9.58211 19.5 9.75 19.3321 9.75 19.125V14.625C9.75 14.4179 9.58211 14.25 9.375 14.25H4.875ZM12.75 13.5C12.75 13.0858 13.0858 12.75 13.5 12.75H14.25C14.6642 12.75 15 13.0858 15 13.5V14.25C15 14.6642 14.6642 15 14.25 15H13.5C13.0858 15 12.75 14.6642 12.75 14.25V13.5ZM18.75 13.5C18.75 13.0858 19.0858 12.75 19.5 12.75H20.25C20.6642 12.75 21 13.0858 21 13.5V14.25C21 14.6642 20.6642 15 20.25 15H19.5C19.0858 15 18.75 14.6642 18.75 14.25V13.5ZM6 16.5C6 16.0858 6.33579 15.75 6.75 15.75H7.5C7.91421 15.75 8.25 16.0858 8.25 16.5V17.25C8.25 17.6642 7.91421 18 7.5 18H6.75C6.33579 18 6 17.6642 6 17.25V16.5ZM15.75 16.5C15.75 16.0858 16.0858 15.75 16.5 15.75H17.25C17.6642 15.75 18 16.0858 18 16.5V17.25C18 17.6642 17.6642 18 17.25 18H16.5C16.0858 18 15.75 17.6642 15.75 17.25V16.5ZM12.75 19.5C12.75 19.0858 13.0858 18.75 13.5 18.75H14.25C14.6642 18.75 15 19.0858 15 19.5V20.25C15 20.6642 14.6642 21 14.25 21H13.5C13.0858 21 12.75 20.6642 12.75 20.25V19.5ZM18.75 19.5C18.75 19.0858 19.0858 18.75 19.5 18.75H20.25C20.6642 18.75 21 19.0858 21 19.5V20.25C21 20.6642 20.6642 21 20.25 21H19.5C19.0858 21 18.75 20.6642 18.75 20.25V19.5Z" fill="${color}"/> `;
|
|
8
|
+
$: switch (variation) {
|
|
9
|
+
case 'outline':
|
|
10
|
+
svgpath = svgoutline;
|
|
11
|
+
viewBox = '0 0 24 24';
|
|
12
|
+
break;
|
|
13
|
+
case 'solid':
|
|
14
|
+
svgpath = svgsolid;
|
|
15
|
+
viewBox = '0 0 24 24';
|
|
16
|
+
break;
|
|
17
|
+
default:
|
|
18
|
+
svgpath = svgoutline;
|
|
19
|
+
viewBox = '0 0 24 24';
|
|
20
|
+
}
|
|
21
|
+
export let ariaLabel = 'qr code';
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<svg
|
|
25
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
26
|
+
width={size}
|
|
27
|
+
height={size}
|
|
28
|
+
class={$$props.class}
|
|
29
|
+
{...$$restProps}
|
|
30
|
+
aria-label={ariaLabel}
|
|
31
|
+
fill="none"
|
|
32
|
+
{viewBox}
|
|
33
|
+
stroke-width="2"
|
|
34
|
+
on:click
|
|
35
|
+
>
|
|
36
|
+
{@html svgpath}
|
|
37
|
+
</svg>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
size?: string;
|
|
6
|
+
color?: string;
|
|
7
|
+
variation?: 'solid' | 'outline';
|
|
8
|
+
ariaLabel?: string;
|
|
9
|
+
};
|
|
10
|
+
events: {
|
|
11
|
+
click: MouseEvent;
|
|
12
|
+
} & {
|
|
13
|
+
[evt: string]: CustomEvent<any>;
|
|
14
|
+
};
|
|
15
|
+
slots: {};
|
|
16
|
+
};
|
|
17
|
+
export declare type QrCodeProps = typeof __propDef.props;
|
|
18
|
+
export declare type QrCodeEvents = typeof __propDef.events;
|
|
19
|
+
export declare type QrCodeSlots = typeof __propDef.slots;
|
|
20
|
+
export default class QrCode extends SvelteComponentTyped<QrCodeProps, QrCodeEvents, QrCodeSlots> {
|
|
21
|
+
}
|
|
22
|
+
export {};
|
package/index.d.ts
CHANGED
|
@@ -40,13 +40,16 @@ export { default as Textarea } from './forms/Textarea.svelte';
|
|
|
40
40
|
export { default as Toggle } from './forms/Toggle.svelte';
|
|
41
41
|
export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
|
|
42
42
|
export { default as CodeBracket } from './icons/CodeBracket.svelte';
|
|
43
|
+
export { default as Envelope } from './icons/Envelope.svelte';
|
|
43
44
|
export { default as FaceSmile } from './icons/FaceSmile.svelte';
|
|
44
45
|
export { default as Figma } from './icons/Figma.svelte';
|
|
46
|
+
export { default as Home } from './icons/Home.svelte';
|
|
45
47
|
export { default as Map } from './icons/Map.svelte';
|
|
46
48
|
export { default as MapPin } from './icons/MapPin.svelte';
|
|
47
49
|
export { default as PaperAirplane } from './icons/PaperAirplane.svelte';
|
|
48
50
|
export { default as PaperClip } from './icons/PaperClip.svelte';
|
|
49
51
|
export { default as Photo } from './icons/Photo.svelte';
|
|
52
|
+
export { default as QrCode } from './icons/QrCode.svelte';
|
|
50
53
|
export { default as QuoteLeft } from './icons/QuoteLeft.svelte';
|
|
51
54
|
export { default as Kbd } from './kbd/Kbd.svelte';
|
|
52
55
|
export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
|
|
@@ -118,6 +121,9 @@ export { default as TimelineHorizontal } from './timelines/TimelineHorizontal.sv
|
|
|
118
121
|
export { default as TimelineItemHorizontal } from './timelines/TimelineItemHorizontal.svelte';
|
|
119
122
|
export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte';
|
|
120
123
|
export { default as Toast } from './toasts/Toast.svelte';
|
|
124
|
+
export { default as Toolbar } from './toolbar/Toolbar.svelte';
|
|
125
|
+
export { default as ToolbarButton } from './toolbar/ToolbarButton.svelte';
|
|
126
|
+
export { default as ToolbarGroup } from './toolbar/ToolbarGroup.svelte';
|
|
121
127
|
export { default as Tooltip } from './tooltips/Tooltip.svelte';
|
|
122
128
|
export { default as A } from './typography/A.svelte';
|
|
123
129
|
export { default as Blockquote } from './typography/Blockquote.svelte';
|
package/index.js
CHANGED
|
@@ -55,13 +55,16 @@ export { default as Toggle } from './forms/Toggle.svelte';
|
|
|
55
55
|
export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
|
|
56
56
|
// Icons
|
|
57
57
|
export { default as CodeBracket } from './icons/CodeBracket.svelte';
|
|
58
|
+
export { default as Envelope } from './icons/Envelope.svelte';
|
|
58
59
|
export { default as FaceSmile } from './icons/FaceSmile.svelte';
|
|
59
60
|
export { default as Figma } from './icons/Figma.svelte';
|
|
61
|
+
export { default as Home } from './icons/Home.svelte';
|
|
60
62
|
export { default as Map } from './icons/Map.svelte';
|
|
61
63
|
export { default as MapPin } from './icons/MapPin.svelte';
|
|
62
64
|
export { default as PaperAirplane } from './icons/PaperAirplane.svelte';
|
|
63
65
|
export { default as PaperClip } from './icons/PaperClip.svelte';
|
|
64
66
|
export { default as Photo } from './icons/Photo.svelte';
|
|
67
|
+
export { default as QrCode } from './icons/QrCode.svelte';
|
|
65
68
|
export { default as QuoteLeft } from './icons/QuoteLeft.svelte';
|
|
66
69
|
// Kbd
|
|
67
70
|
export { default as Kbd } from './kbd/Kbd.svelte';
|
|
@@ -149,6 +152,10 @@ export { default as TimelineItemHorizontal } from './timelines/TimelineItemHoriz
|
|
|
149
152
|
export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte';
|
|
150
153
|
// Toast
|
|
151
154
|
export { default as Toast } from './toasts/Toast.svelte';
|
|
155
|
+
// Toolbar
|
|
156
|
+
export { default as Toolbar } from './toolbar/Toolbar.svelte';
|
|
157
|
+
export { default as ToolbarButton } from './toolbar/ToolbarButton.svelte';
|
|
158
|
+
export { default as ToolbarGroup } from './toolbar/ToolbarGroup.svelte';
|
|
152
159
|
// Tooltips
|
|
153
160
|
export { default as Tooltip } from './tooltips/Tooltip.svelte';
|
|
154
161
|
// Typography
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.25.
|
|
3
|
+
"version": "0.25.16",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": {
|
|
@@ -149,13 +149,16 @@
|
|
|
149
149
|
"./forms/Toggle.svelte": "./forms/Toggle.svelte",
|
|
150
150
|
"./forms/VoiceSearch.svelte": "./forms/VoiceSearch.svelte",
|
|
151
151
|
"./icons/CodeBracket.svelte": "./icons/CodeBracket.svelte",
|
|
152
|
+
"./icons/Envelope.svelte": "./icons/Envelope.svelte",
|
|
152
153
|
"./icons/FaceSmile.svelte": "./icons/FaceSmile.svelte",
|
|
153
154
|
"./icons/Figma.svelte": "./icons/Figma.svelte",
|
|
155
|
+
"./icons/Home.svelte": "./icons/Home.svelte",
|
|
154
156
|
"./icons/Map.svelte": "./icons/Map.svelte",
|
|
155
157
|
"./icons/MapPin.svelte": "./icons/MapPin.svelte",
|
|
156
158
|
"./icons/PaperAirplane.svelte": "./icons/PaperAirplane.svelte",
|
|
157
159
|
"./icons/PaperClip.svelte": "./icons/PaperClip.svelte",
|
|
158
160
|
"./icons/Photo.svelte": "./icons/Photo.svelte",
|
|
161
|
+
"./icons/QrCode.svelte": "./icons/QrCode.svelte",
|
|
159
162
|
"./icons/QuoteLeft.svelte": "./icons/QuoteLeft.svelte",
|
|
160
163
|
".": "./index.js",
|
|
161
164
|
"./kbd/ArrowKeyDown.svelte": "./kbd/ArrowKeyDown.svelte",
|
|
@@ -228,6 +231,9 @@
|
|
|
228
231
|
"./timelines/TimelineItemHorizontal.svelte": "./timelines/TimelineItemHorizontal.svelte",
|
|
229
232
|
"./timelines/TimelineItemVertical.svelte": "./timelines/TimelineItemVertical.svelte",
|
|
230
233
|
"./toasts/Toast.svelte": "./toasts/Toast.svelte",
|
|
234
|
+
"./toolbar/Toolbar.svelte": "./toolbar/Toolbar.svelte",
|
|
235
|
+
"./toolbar/ToolbarButton.svelte": "./toolbar/ToolbarButton.svelte",
|
|
236
|
+
"./toolbar/ToolbarGroup.svelte": "./toolbar/ToolbarGroup.svelte",
|
|
231
237
|
"./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
|
|
232
238
|
"./types": "./types.js",
|
|
233
239
|
"./typography/A.svelte": "./typography/A.svelte",
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<script>import { setContext } from 'svelte';
|
|
2
|
+
import { writable } from 'svelte/store';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
const separators = writable(false);
|
|
5
|
+
setContext('toolbar', separators);
|
|
6
|
+
export let color = 'dark';
|
|
7
|
+
export let embedded = false;
|
|
8
|
+
const bgColors = {
|
|
9
|
+
gray: 'bg-gray-100 dark:bg-gray-200 ',
|
|
10
|
+
red: 'bg-red-100 dark:bg-red-200',
|
|
11
|
+
yellow: 'bg-yellow-100 dark:bg-yellow-200 ',
|
|
12
|
+
green: 'bg-green-100 dark:bg-green-200 ',
|
|
13
|
+
indigo: 'bg-indigo-100 dark:bg-indigo-200 ',
|
|
14
|
+
purple: 'bg-purple-100 dark:bg-purple-200 ',
|
|
15
|
+
pink: 'bg-pink-100 dark:bg-pink-200 ',
|
|
16
|
+
blue: 'bg-blue-100 dark:bg-blue-200 ',
|
|
17
|
+
dark: 'bg-gray-50 dark:bg-gray-700'
|
|
18
|
+
// custom: customBgClass
|
|
19
|
+
};
|
|
20
|
+
const textColors = {
|
|
21
|
+
gray: 'text-gray-500 dark:text-gray-700',
|
|
22
|
+
red: 'text-red-500 dark:text-red-700',
|
|
23
|
+
yellow: 'text-yellow-500 dark:text-yellow-700',
|
|
24
|
+
green: 'text-green-500 dark:text-green-700',
|
|
25
|
+
indigo: 'text-indigo-500 dark:text-indigo-700',
|
|
26
|
+
purple: 'text-purple-500 dark:text-purple-700',
|
|
27
|
+
pink: 'text-pink-500 dark:text-pink-700',
|
|
28
|
+
blue: 'text-blue-500 dark:text-blue-700',
|
|
29
|
+
dark: 'text-gray-500 dark:text-gray-400'
|
|
30
|
+
// custom: customTextColor
|
|
31
|
+
};
|
|
32
|
+
let divClass;
|
|
33
|
+
$: divClass = classNames('flex justify-between items-center', embedded || 'rounded-lg border border-gray-200 dark:border-gray-600 py-2 px-3', embedded || textColors[color], embedded || bgColors[color], $$props.class);
|
|
34
|
+
const divideColors = {
|
|
35
|
+
gray: 'divide-gray-200 dark:divide-gray-700',
|
|
36
|
+
red: 'divide-red-200 dark:divide-red-700',
|
|
37
|
+
yellow: 'divide-yellow-200 dark:divide-yellow-700',
|
|
38
|
+
green: 'divide-green-200 dark:divide-green-700',
|
|
39
|
+
indigo: 'divide-indigo-200 dark:divide-indigo-700',
|
|
40
|
+
purple: 'divide-purple-200 dark:divide-purple-700',
|
|
41
|
+
pink: 'divide-pink-200 dark:divide-pink-700',
|
|
42
|
+
blue: 'divide-blue-200 dark:divide-blue-700',
|
|
43
|
+
dark: 'divide-gray-200 dark:divide-gray-600'
|
|
44
|
+
// custom: customTextColor
|
|
45
|
+
};
|
|
46
|
+
let separatorsClass;
|
|
47
|
+
$: separatorsClass = classNames($separators && 'divide-gray-200 sm:divide-x',
|
|
48
|
+
// dark:divide-gray-600'
|
|
49
|
+
divideColors[color]);
|
|
50
|
+
</script>
|
|
51
|
+
|
|
52
|
+
<div class={divClass}>
|
|
53
|
+
<div class="flex flex-wrap items-center {separatorsClass}">
|
|
54
|
+
<slot />
|
|
55
|
+
</div>
|
|
56
|
+
<slot name="end" />
|
|
57
|
+
</div>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
color?: string;
|
|
6
|
+
embedded?: boolean;
|
|
7
|
+
};
|
|
8
|
+
events: {
|
|
9
|
+
[evt: string]: CustomEvent<any>;
|
|
10
|
+
};
|
|
11
|
+
slots: {
|
|
12
|
+
default: {};
|
|
13
|
+
end: {};
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export declare type ToolbarProps = typeof __propDef.props;
|
|
17
|
+
export declare type ToolbarEvents = typeof __propDef.events;
|
|
18
|
+
export declare type ToolbarSlots = typeof __propDef.slots;
|
|
19
|
+
export default class Toolbar extends SvelteComponentTyped<ToolbarProps, ToolbarEvents, ToolbarSlots> {
|
|
20
|
+
}
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<script>import { getContext } from 'svelte';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
const background = getContext('background');
|
|
4
|
+
export let color = 'default';
|
|
5
|
+
export let name = undefined;
|
|
6
|
+
export let ariaLabel = undefined;
|
|
7
|
+
export let size = 'md';
|
|
8
|
+
const colors = {
|
|
9
|
+
default: 'hover:text-gray-900 hover:bg-gray-100 text-gray-500 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600',
|
|
10
|
+
gray: 'focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-300',
|
|
11
|
+
red: 'focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-300',
|
|
12
|
+
yellow: 'focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-300',
|
|
13
|
+
green: 'focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-300',
|
|
14
|
+
indigo: 'focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-300',
|
|
15
|
+
purple: 'focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-300',
|
|
16
|
+
pink: 'focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-300',
|
|
17
|
+
blue: 'focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-300'
|
|
18
|
+
};
|
|
19
|
+
const sizing = {
|
|
20
|
+
xs: 'm-0.5 rounded focus:ring-1 p-0.5',
|
|
21
|
+
sm: 'm-0.5 rounded focus:ring-1 p-0.5',
|
|
22
|
+
md: 'rounded-lg focus:ring-2 p-1.5'
|
|
23
|
+
};
|
|
24
|
+
let buttonClass;
|
|
25
|
+
$: buttonClass = classNames('focus:outline-none whitespace-normal', sizing[size], colors[color], color === 'default' &&
|
|
26
|
+
(background
|
|
27
|
+
? 'hover:bg-gray-100 dark:hover:bg-gray-600'
|
|
28
|
+
: 'hover:bg-gray-100 dark:hover:bg-gray-700'), $$props.class);
|
|
29
|
+
const svgSizes = {
|
|
30
|
+
xs: 'w-3 h-3',
|
|
31
|
+
sm: 'w-3.5 h-3.5',
|
|
32
|
+
md: 'w-5 h-5'
|
|
33
|
+
};
|
|
34
|
+
</script>
|
|
35
|
+
|
|
36
|
+
<button on:click type="button" class={buttonClass} aria-label={ariaLabel ?? name}>
|
|
37
|
+
{#if name}<span class="sr-only">{name}</span>{/if}
|
|
38
|
+
<slot>
|
|
39
|
+
<svg
|
|
40
|
+
class={svgSizes[size]}
|
|
41
|
+
fill="currentColor"
|
|
42
|
+
viewBox="0 0 20 20"
|
|
43
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
44
|
+
>
|
|
45
|
+
<path
|
|
46
|
+
fill-rule="evenodd"
|
|
47
|
+
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
48
|
+
clip-rule="evenodd"
|
|
49
|
+
/>
|
|
50
|
+
</svg>
|
|
51
|
+
</slot>
|
|
52
|
+
</button>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
color?: string;
|
|
6
|
+
name?: string;
|
|
7
|
+
ariaLabel?: string;
|
|
8
|
+
size?: 'xs' | 'sm' | 'md';
|
|
9
|
+
};
|
|
10
|
+
events: {
|
|
11
|
+
click: MouseEvent;
|
|
12
|
+
} & {
|
|
13
|
+
[evt: string]: CustomEvent<any>;
|
|
14
|
+
};
|
|
15
|
+
slots: {
|
|
16
|
+
default: {};
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
export declare type ToolbarButtonProps = typeof __propDef.props;
|
|
20
|
+
export declare type ToolbarButtonEvents = typeof __propDef.events;
|
|
21
|
+
export declare type ToolbarButtonSlots = typeof __propDef.slots;
|
|
22
|
+
export default class ToolbarButton extends SvelteComponentTyped<ToolbarButtonProps, ToolbarButtonEvents, ToolbarButtonSlots> {
|
|
23
|
+
}
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {};
|
|
4
|
+
events: {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
};
|
|
7
|
+
slots: {
|
|
8
|
+
default: {};
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export declare type ToolbarGroupProps = typeof __propDef.props;
|
|
12
|
+
export declare type ToolbarGroupEvents = typeof __propDef.events;
|
|
13
|
+
export declare type ToolbarGroupSlots = typeof __propDef.slots;
|
|
14
|
+
export default class ToolbarGroup extends SvelteComponentTyped<ToolbarGroupProps, ToolbarGroupEvents, ToolbarGroupSlots> {
|
|
15
|
+
}
|
|
16
|
+
export {};
|