flowbite-svelte 0.25.16 → 0.25.19
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 +27 -0
- package/accordions/AccordionItem.svelte +41 -22
- package/accordions/AccordionItem.svelte.d.ts +3 -4
- package/breadcrumbs/Breadcrumb.svelte +4 -1
- package/breadcrumbs/Breadcrumb.svelte.d.ts +2 -0
- package/breadcrumbs/BreadcrumbItem.svelte +43 -35
- package/breadcrumbs/BreadcrumbItem.svelte.d.ts +5 -5
- package/index.d.ts +0 -13
- package/index.js +0 -14
- package/package.json +1 -14
- package/typography/Hr.svelte +8 -10
- package/typography/Hr.svelte.d.ts +6 -8
- package/utils/Popper.svelte +1 -0
- package/accordions/AccordionFlush.svelte +0 -47
- package/accordions/AccordionFlush.svelte.d.ts +0 -27
- package/icons/CodeBracket.svelte +0 -38
- package/icons/CodeBracket.svelte.d.ts +0 -22
- package/icons/Envelope.svelte +0 -37
- package/icons/Envelope.svelte.d.ts +0 -22
- package/icons/FaceSmile.svelte +0 -38
- package/icons/FaceSmile.svelte.d.ts +0 -22
- package/icons/Figma.svelte +0 -34
- package/icons/Figma.svelte.d.ts +0 -19
- package/icons/Home.svelte +0 -37
- package/icons/Home.svelte.d.ts +0 -22
- package/icons/Map.svelte +0 -38
- package/icons/Map.svelte.d.ts +0 -22
- package/icons/MapPin.svelte +0 -37
- package/icons/MapPin.svelte.d.ts +0 -22
- package/icons/PaperAirplane.svelte +0 -37
- package/icons/PaperAirplane.svelte.d.ts +0 -22
- package/icons/PaperClip.svelte +0 -38
- package/icons/PaperClip.svelte.d.ts +0 -22
- package/icons/Photo.svelte +0 -38
- package/icons/Photo.svelte.d.ts +0 -22
- package/icons/QrCode.svelte +0 -37
- package/icons/QrCode.svelte.d.ts +0 -22
- package/icons/QuoteLeft.svelte +0 -17
- package/icons/QuoteLeft.svelte.d.ts +0 -18
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,33 @@
|
|
|
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.19](https://github.com/themesberg/flowbite-svelte/compare/v0.25.18...v0.25.19) (2022-08-27)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* remove Home icons from all pages ([7ac0e7a](https://github.com/themesberg/flowbite-svelte/commit/7ac0e7aa3edc5486d597a61775a5694c76b4bb35))
|
|
11
|
+
* removed Home icon from BreadcrumbItem ([66f00dd](https://github.com/themesberg/flowbite-svelte/commit/66f00dd9e024d97c2b9766e30b03b775f227c672))
|
|
12
|
+
|
|
13
|
+
### [0.25.18](https://github.com/themesberg/flowbite-svelte/compare/v0.25.17...v0.25.18) (2022-08-27)
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
|
|
18
|
+
* change BreadcrumbItem home for all pages ([f5f895f](https://github.com/themesberg/flowbite-svelte/commit/f5f895f6157b03e435975c5735329f8dfc984485))
|
|
19
|
+
|
|
20
|
+
### [0.25.17](https://github.com/themesberg/flowbite-svelte/compare/v0.25.16...v0.25.17) (2022-08-27)
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### Features
|
|
24
|
+
|
|
25
|
+
* combine Accordionflush and AccordionItem ([e53fa64](https://github.com/themesberg/flowbite-svelte/commit/e53fa6421ca747ed46d6432b67715b3eedf4cbba))
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
### Bug Fixes
|
|
29
|
+
|
|
30
|
+
* textarea docs ([133b933](https://github.com/themesberg/flowbite-svelte/commit/133b9334841ac13d82c3a86bc24b3375de0972ff))
|
|
31
|
+
|
|
5
32
|
### [0.25.16](https://github.com/themesberg/flowbite-svelte/compare/v0.25.15...v0.25.16) (2022-08-25)
|
|
6
33
|
|
|
7
34
|
|
|
@@ -1,34 +1,25 @@
|
|
|
1
1
|
<script>import classNames from 'classnames';
|
|
2
2
|
import { slide } from 'svelte/transition';
|
|
3
|
-
|
|
4
|
-
import { ChevronDown, ChevronUp } from 'svelte-heros';
|
|
3
|
+
export let flush = false;
|
|
5
4
|
export let id = '';
|
|
6
|
-
export let slotClass = '
|
|
5
|
+
export let slotClass = 'border-gray-200 dark:border-gray-700';
|
|
6
|
+
let classSlot = classNames(slotClass, flush ? 'py-5 border-b' : 'p-5 border border-t-0');
|
|
7
7
|
export let isOpen = false;
|
|
8
8
|
export let color = false;
|
|
9
|
-
export let
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
export let
|
|
14
|
-
export let iconClass = 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300';
|
|
15
|
-
export let btnClass = 'flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800';
|
|
16
|
-
export let colorClass = 'focus:ring-blue-200 dark:focus:ring-blue-800 hover:bg-blue-100 text-blue-500 bg-blue-200 text-blue-700';
|
|
17
|
-
$: btnClass;
|
|
18
|
-
onMount(() => {
|
|
19
|
-
if (isOpen) {
|
|
20
|
-
isOpen = true;
|
|
21
|
-
}
|
|
22
|
-
});
|
|
9
|
+
export let btnClass = 'flex items-center justify-between w-full font-medium text-left text-gray-500 border-gray-200 dark:border-gray-700 dark:text-gray-400';
|
|
10
|
+
let classBtn = classNames(btnClass, flush
|
|
11
|
+
? 'py-5 border-b'
|
|
12
|
+
: 'focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 p-5 border hover:bg-gray-100 dark:hover:bg-gray-800');
|
|
13
|
+
export let colorClass = 'focus:ring-blue-200 dark:focus:ring-blue-800 hover:bg-blue-100 text-blue-500 bg-blue-200 text-blue-700';
|
|
23
14
|
const handleToggle = (id) => {
|
|
24
15
|
isOpen = !isOpen;
|
|
25
16
|
};
|
|
26
17
|
let buttonClass;
|
|
27
18
|
$: if (color && isOpen) {
|
|
28
|
-
buttonClass =
|
|
19
|
+
buttonClass = classBtn + colorClass;
|
|
29
20
|
}
|
|
30
21
|
else {
|
|
31
|
-
buttonClass =
|
|
22
|
+
buttonClass = classBtn;
|
|
32
23
|
}
|
|
33
24
|
</script>
|
|
34
25
|
|
|
@@ -42,15 +33,43 @@ else {
|
|
|
42
33
|
>
|
|
43
34
|
<slot name="header" />
|
|
44
35
|
{#if isOpen}
|
|
45
|
-
|
|
36
|
+
{#if $$slots.arrowup}
|
|
37
|
+
<slot name="arrowup" />
|
|
38
|
+
{:else}
|
|
39
|
+
<svg
|
|
40
|
+
data-accordion-icon
|
|
41
|
+
class="w-6 h-6 rotate-180 shrink-0"
|
|
42
|
+
fill="currentColor"
|
|
43
|
+
viewBox="0 0 20 20"
|
|
44
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
45
|
+
><path
|
|
46
|
+
fill-rule="evenodd"
|
|
47
|
+
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
48
|
+
clip-rule="evenodd"
|
|
49
|
+
/></svg
|
|
50
|
+
>
|
|
51
|
+
{/if}
|
|
52
|
+
{:else if $$slots.arrowdown}
|
|
53
|
+
<slot name="arrowdown" />
|
|
46
54
|
{:else}
|
|
47
|
-
<
|
|
55
|
+
<svg
|
|
56
|
+
data-accordion-icon
|
|
57
|
+
class="w-6 h-6 shrink-0"
|
|
58
|
+
fill="currentColor"
|
|
59
|
+
viewBox="0 0 20 20"
|
|
60
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
61
|
+
><path
|
|
62
|
+
fill-rule="evenodd"
|
|
63
|
+
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
64
|
+
clip-rule="evenodd"
|
|
65
|
+
/></svg
|
|
66
|
+
>
|
|
48
67
|
{/if}
|
|
49
68
|
</button>
|
|
50
69
|
</h2>
|
|
51
70
|
{#if isOpen}
|
|
52
71
|
<div transition:slide={{ duration: 500 }}>
|
|
53
|
-
<div class={
|
|
72
|
+
<div class={classSlot}>
|
|
54
73
|
<slot name="body" />
|
|
55
74
|
</div>
|
|
56
75
|
</div>
|
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { AccordionIconType } from '../types';
|
|
3
2
|
declare const __propDef: {
|
|
4
3
|
props: {
|
|
5
4
|
[x: string]: any;
|
|
5
|
+
flush?: boolean;
|
|
6
6
|
id?: string;
|
|
7
7
|
slotClass?: string;
|
|
8
8
|
isOpen?: boolean;
|
|
9
9
|
color?: boolean;
|
|
10
|
-
icons?: AccordionIconType;
|
|
11
|
-
iconSize?: number;
|
|
12
|
-
iconClass?: string;
|
|
13
10
|
btnClass?: string;
|
|
14
11
|
colorClass?: string;
|
|
15
12
|
};
|
|
@@ -18,6 +15,8 @@ declare const __propDef: {
|
|
|
18
15
|
};
|
|
19
16
|
slots: {
|
|
20
17
|
header: {};
|
|
18
|
+
arrowup: {};
|
|
19
|
+
arrowdown: {};
|
|
21
20
|
body: {};
|
|
22
21
|
};
|
|
23
22
|
};
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
<script>import classNames from 'classnames';
|
|
2
|
+
export let solid = false;
|
|
2
3
|
export let navClass = 'flex';
|
|
4
|
+
export let solidClass = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
|
|
3
5
|
export let olClass = 'inline-flex items-center space-x-1 md:space-x-3';
|
|
6
|
+
let classNav = solid ? solidClass : navClass;
|
|
4
7
|
</script>
|
|
5
8
|
|
|
6
|
-
<nav aria-label="Breadcrumb" {...$$restProps} class={classNames(
|
|
9
|
+
<nav aria-label="Breadcrumb" {...$$restProps} class={classNames(classNav, $$props.class)}>
|
|
7
10
|
<ol class={classNames(olClass, $$props.classOl)}>
|
|
8
11
|
<slot />
|
|
9
12
|
</ol>
|
|
@@ -1,43 +1,51 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export let
|
|
3
|
-
export let
|
|
4
|
-
export let
|
|
5
|
-
export let iconClass = 'mr-2';
|
|
1
|
+
<script>export let home = false;
|
|
2
|
+
export let linkClass = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
|
|
3
|
+
export let spanClass = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
|
|
4
|
+
export let homeClass = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
|
|
6
5
|
</script>
|
|
7
6
|
|
|
8
|
-
<li class="
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
7
|
+
<li class="inline-flex items-center" {...$$props}>
|
|
8
|
+
{#if home}
|
|
9
|
+
<a class={homeClass} href={$$props.href}>
|
|
10
|
+
{#if $$slots.icon}
|
|
11
|
+
<slot name="icon" />
|
|
12
|
+
{:else}
|
|
13
|
+
<svg
|
|
14
|
+
class="w-4 h-4 mr-2"
|
|
15
|
+
fill="currentColor"
|
|
16
|
+
viewBox="0 0 20 20"
|
|
17
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
18
|
+
><path
|
|
19
|
+
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
|
|
20
|
+
/></svg
|
|
21
|
+
>
|
|
23
22
|
{/if}
|
|
24
23
|
<slot />
|
|
25
24
|
</a>
|
|
26
25
|
{:else}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
26
|
+
{#if $$slots.icon}
|
|
27
|
+
<slot name="icon" />
|
|
28
|
+
{:else}
|
|
29
|
+
<svg
|
|
30
|
+
class="w-6 h-6 text-gray-400"
|
|
31
|
+
fill="currentColor"
|
|
32
|
+
viewBox="0 0 20 20"
|
|
33
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
34
|
+
><path
|
|
35
|
+
fill-rule="evenodd"
|
|
36
|
+
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
|
37
|
+
clip-rule="evenodd"
|
|
38
|
+
/></svg
|
|
39
|
+
>
|
|
40
|
+
{/if}
|
|
41
|
+
{#if $$props.href}
|
|
42
|
+
<a class={linkClass} href={$$props.href}>
|
|
43
|
+
<slot />
|
|
44
|
+
</a>
|
|
45
|
+
{:else}
|
|
46
|
+
<span class={spanClass}>
|
|
47
|
+
<slot />
|
|
48
|
+
</span>
|
|
49
|
+
{/if}
|
|
42
50
|
{/if}
|
|
43
51
|
</li>
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { SvelteComponent } from 'svelte';
|
|
3
2
|
declare const __propDef: {
|
|
4
3
|
props: {
|
|
5
4
|
[x: string]: any;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
home?: boolean;
|
|
6
|
+
linkClass?: string;
|
|
7
|
+
spanClass?: string;
|
|
8
|
+
homeClass?: string;
|
|
10
9
|
};
|
|
11
10
|
events: {
|
|
12
11
|
[evt: string]: CustomEvent<any>;
|
|
13
12
|
};
|
|
14
13
|
slots: {
|
|
14
|
+
icon: {};
|
|
15
15
|
default: {};
|
|
16
16
|
};
|
|
17
17
|
};
|
package/index.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export { default as AccordionItem } from './accordions/AccordionItem.svelte';
|
|
2
|
-
export { default as AccordionFlush } from './accordions/AccordionFlush.svelte';
|
|
3
2
|
export { default as Alert } from './alerts/Alert.svelte';
|
|
4
3
|
export { default as Avatar } from './avatar/Avatar.svelte';
|
|
5
4
|
export { default as Badge } from './badges/Badge.svelte';
|
|
@@ -39,18 +38,6 @@ export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
|
|
|
39
38
|
export { default as Textarea } from './forms/Textarea.svelte';
|
|
40
39
|
export { default as Toggle } from './forms/Toggle.svelte';
|
|
41
40
|
export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
|
|
42
|
-
export { default as CodeBracket } from './icons/CodeBracket.svelte';
|
|
43
|
-
export { default as Envelope } from './icons/Envelope.svelte';
|
|
44
|
-
export { default as FaceSmile } from './icons/FaceSmile.svelte';
|
|
45
|
-
export { default as Figma } from './icons/Figma.svelte';
|
|
46
|
-
export { default as Home } from './icons/Home.svelte';
|
|
47
|
-
export { default as Map } from './icons/Map.svelte';
|
|
48
|
-
export { default as MapPin } from './icons/MapPin.svelte';
|
|
49
|
-
export { default as PaperAirplane } from './icons/PaperAirplane.svelte';
|
|
50
|
-
export { default as PaperClip } from './icons/PaperClip.svelte';
|
|
51
|
-
export { default as Photo } from './icons/Photo.svelte';
|
|
52
|
-
export { default as QrCode } from './icons/QrCode.svelte';
|
|
53
|
-
export { default as QuoteLeft } from './icons/QuoteLeft.svelte';
|
|
54
41
|
export { default as Kbd } from './kbd/Kbd.svelte';
|
|
55
42
|
export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
|
|
56
43
|
export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';
|
package/index.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
// Accordion
|
|
2
2
|
export { default as AccordionItem } from './accordions/AccordionItem.svelte';
|
|
3
|
-
export { default as AccordionFlush } from './accordions/AccordionFlush.svelte';
|
|
4
3
|
// Alerts
|
|
5
4
|
export { default as Alert } from './alerts/Alert.svelte';
|
|
6
5
|
// Avatar
|
|
@@ -53,19 +52,6 @@ export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
|
|
|
53
52
|
export { default as Textarea } from './forms/Textarea.svelte';
|
|
54
53
|
export { default as Toggle } from './forms/Toggle.svelte';
|
|
55
54
|
export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
|
|
56
|
-
// Icons
|
|
57
|
-
export { default as CodeBracket } from './icons/CodeBracket.svelte';
|
|
58
|
-
export { default as Envelope } from './icons/Envelope.svelte';
|
|
59
|
-
export { default as FaceSmile } from './icons/FaceSmile.svelte';
|
|
60
|
-
export { default as Figma } from './icons/Figma.svelte';
|
|
61
|
-
export { default as Home } from './icons/Home.svelte';
|
|
62
|
-
export { default as Map } from './icons/Map.svelte';
|
|
63
|
-
export { default as MapPin } from './icons/MapPin.svelte';
|
|
64
|
-
export { default as PaperAirplane } from './icons/PaperAirplane.svelte';
|
|
65
|
-
export { default as PaperClip } from './icons/PaperClip.svelte';
|
|
66
|
-
export { default as Photo } from './icons/Photo.svelte';
|
|
67
|
-
export { default as QrCode } from './icons/QrCode.svelte';
|
|
68
|
-
export { default as QuoteLeft } from './icons/QuoteLeft.svelte';
|
|
69
55
|
// Kbd
|
|
70
56
|
export { default as Kbd } from './kbd/Kbd.svelte';
|
|
71
57
|
export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.25.
|
|
3
|
+
"version": "0.25.19",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": {
|
|
@@ -100,7 +100,6 @@
|
|
|
100
100
|
"exports": {
|
|
101
101
|
"./package.json": "./package.json",
|
|
102
102
|
"./.DS_Store": "./.DS_Store",
|
|
103
|
-
"./accordions/AccordionFlush.svelte": "./accordions/AccordionFlush.svelte",
|
|
104
103
|
"./accordions/AccordionItem.svelte": "./accordions/AccordionItem.svelte",
|
|
105
104
|
"./alerts/Alert.svelte": "./alerts/Alert.svelte",
|
|
106
105
|
"./avatar/Avatar.svelte": "./avatar/Avatar.svelte",
|
|
@@ -148,18 +147,6 @@
|
|
|
148
147
|
"./forms/Textarea.svelte": "./forms/Textarea.svelte",
|
|
149
148
|
"./forms/Toggle.svelte": "./forms/Toggle.svelte",
|
|
150
149
|
"./forms/VoiceSearch.svelte": "./forms/VoiceSearch.svelte",
|
|
151
|
-
"./icons/CodeBracket.svelte": "./icons/CodeBracket.svelte",
|
|
152
|
-
"./icons/Envelope.svelte": "./icons/Envelope.svelte",
|
|
153
|
-
"./icons/FaceSmile.svelte": "./icons/FaceSmile.svelte",
|
|
154
|
-
"./icons/Figma.svelte": "./icons/Figma.svelte",
|
|
155
|
-
"./icons/Home.svelte": "./icons/Home.svelte",
|
|
156
|
-
"./icons/Map.svelte": "./icons/Map.svelte",
|
|
157
|
-
"./icons/MapPin.svelte": "./icons/MapPin.svelte",
|
|
158
|
-
"./icons/PaperAirplane.svelte": "./icons/PaperAirplane.svelte",
|
|
159
|
-
"./icons/PaperClip.svelte": "./icons/PaperClip.svelte",
|
|
160
|
-
"./icons/Photo.svelte": "./icons/Photo.svelte",
|
|
161
|
-
"./icons/QrCode.svelte": "./icons/QrCode.svelte",
|
|
162
|
-
"./icons/QuoteLeft.svelte": "./icons/QuoteLeft.svelte",
|
|
163
150
|
".": "./index.js",
|
|
164
151
|
"./kbd/ArrowKeyDown.svelte": "./kbd/ArrowKeyDown.svelte",
|
|
165
152
|
"./kbd/ArrowKeyLeft.svelte": "./kbd/ArrowKeyLeft.svelte",
|
package/typography/Hr.svelte
CHANGED
|
@@ -1,27 +1,25 @@
|
|
|
1
1
|
<script>import classNames from 'classnames';
|
|
2
|
-
export let
|
|
3
|
-
export let hrClass = 'bg-gray-200 rounded border-0 dark:bg-gray-700';
|
|
4
|
-
// bg-gray-200 rounded border-0 dark:bg-gray-700
|
|
2
|
+
export let icon = false;
|
|
5
3
|
export let width = 'w-full';
|
|
6
4
|
export let height = 'h-px';
|
|
7
|
-
export let
|
|
8
|
-
export let
|
|
9
|
-
export let icon;
|
|
10
|
-
export let text;
|
|
5
|
+
export let divClass = 'inline-flex justify-center items-center w-full';
|
|
6
|
+
export let hrClass = 'bg-gray-200 rounded border-0 dark:bg-gray-700';
|
|
11
7
|
export let iconDivClass = 'absolute left-1/2 px-4 bg-white -translate-x-1/2 dark:bg-gray-900';
|
|
12
8
|
export let textSpanClass = 'absolute left-1/2 px-3 font-medium text-gray-900 bg-white -translate-x-1/2 dark:text-white dark:bg-gray-900';
|
|
13
9
|
let horizontalClass = classNames(hrClass, width, height, $$props.class);
|
|
14
10
|
</script>
|
|
15
11
|
|
|
16
|
-
{#if
|
|
12
|
+
{#if $$slots}
|
|
17
13
|
<div class={classNames(divClass, $$props.classDiv)}>
|
|
18
14
|
<hr class={horizontalClass} />
|
|
19
15
|
{#if icon}
|
|
20
16
|
<div class={iconDivClass}>
|
|
21
|
-
<
|
|
17
|
+
<slot />
|
|
22
18
|
</div>
|
|
23
19
|
{:else}
|
|
24
|
-
<span class={textSpanClass}>
|
|
20
|
+
<span class={textSpanClass}>
|
|
21
|
+
<slot />
|
|
22
|
+
</span>
|
|
25
23
|
{/if}
|
|
26
24
|
</div>
|
|
27
25
|
{:else}
|
|
@@ -1,23 +1,21 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { SvelteComponent } from 'svelte';
|
|
3
2
|
declare const __propDef: {
|
|
4
3
|
props: {
|
|
5
4
|
[x: string]: any;
|
|
6
|
-
|
|
7
|
-
hrClass?: string;
|
|
5
|
+
icon?: boolean;
|
|
8
6
|
width?: string;
|
|
9
7
|
height?: string;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
icon: typeof SvelteComponent;
|
|
13
|
-
text: string;
|
|
8
|
+
divClass?: string;
|
|
9
|
+
hrClass?: string;
|
|
14
10
|
iconDivClass?: string;
|
|
15
11
|
textSpanClass?: string;
|
|
16
12
|
};
|
|
17
13
|
events: {
|
|
18
14
|
[evt: string]: CustomEvent<any>;
|
|
19
15
|
};
|
|
20
|
-
slots: {
|
|
16
|
+
slots: {
|
|
17
|
+
default: {};
|
|
18
|
+
};
|
|
21
19
|
};
|
|
22
20
|
export declare type HrProps = typeof __propDef.props;
|
|
23
21
|
export declare type HrEvents = typeof __propDef.events;
|
package/utils/Popper.svelte
CHANGED
|
@@ -77,6 +77,7 @@ $: divClass = classNames('z-10', animation && `transition-opacity ${animation}`,
|
|
|
77
77
|
on:focusout={activeContent ? hideHandler : undefined}
|
|
78
78
|
on:mouseenter={activeContent && !clickable ? showHandler : undefined}
|
|
79
79
|
on:mouseleave={activeContent && !clickable ? hideHandler : undefined}
|
|
80
|
+
style="position: absolute;"
|
|
80
81
|
>
|
|
81
82
|
<slot />
|
|
82
83
|
{#if arrow}<div data-popper-arrow />{/if}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
<script>import classNames from 'classnames';
|
|
2
|
-
import { slide } from 'svelte/transition';
|
|
3
|
-
import { onMount } from 'svelte';
|
|
4
|
-
import { ChevronDown, ChevronUp } from 'svelte-heros';
|
|
5
|
-
export let id = '';
|
|
6
|
-
export let btnClass = 'flex justify-between items-center py-5 w-full font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400';
|
|
7
|
-
export let slotClass = 'py-5 border-b border-gray-200 dark:border-gray-700';
|
|
8
|
-
export let iconSize = 24;
|
|
9
|
-
export let iconClass = 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300';
|
|
10
|
-
export let isOpen = false;
|
|
11
|
-
export let icons = {
|
|
12
|
-
up: ChevronUp,
|
|
13
|
-
down: ChevronDown
|
|
14
|
-
};
|
|
15
|
-
onMount(() => {
|
|
16
|
-
if (isOpen) {
|
|
17
|
-
isOpen = true;
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
const handleToggle = (id) => {
|
|
21
|
-
isOpen = !isOpen;
|
|
22
|
-
};
|
|
23
|
-
</script>
|
|
24
|
-
|
|
25
|
-
<h2 aria-expanded={isOpen}>
|
|
26
|
-
<button
|
|
27
|
-
on:click={() => handleToggle(id)}
|
|
28
|
-
type="button"
|
|
29
|
-
class:rounded-t-xl={id === '1'}
|
|
30
|
-
class:border-t-0={id !== '1'}
|
|
31
|
-
class={classNames(btnClass, $$props.class)}
|
|
32
|
-
>
|
|
33
|
-
<slot name="header" />
|
|
34
|
-
{#if isOpen}
|
|
35
|
-
<svelte:component this={icons.up} size={iconSize} class="mr-2 {iconClass}" />
|
|
36
|
-
{:else}
|
|
37
|
-
<svelte:component this={icons.down} size={iconSize} class="mr-2 {iconClass}" />
|
|
38
|
-
{/if}
|
|
39
|
-
</button>
|
|
40
|
-
</h2>
|
|
41
|
-
{#if isOpen}
|
|
42
|
-
<div transition:slide={{ duration: 500 }}>
|
|
43
|
-
<div class={slotClass}>
|
|
44
|
-
<slot name="body" />
|
|
45
|
-
</div>
|
|
46
|
-
</div>
|
|
47
|
-
{/if}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { AccordionIconType } from '../types';
|
|
3
|
-
declare const __propDef: {
|
|
4
|
-
props: {
|
|
5
|
-
[x: string]: any;
|
|
6
|
-
id?: string;
|
|
7
|
-
btnClass?: string;
|
|
8
|
-
slotClass?: string;
|
|
9
|
-
iconSize?: number;
|
|
10
|
-
iconClass?: string;
|
|
11
|
-
isOpen?: boolean;
|
|
12
|
-
icons?: AccordionIconType;
|
|
13
|
-
};
|
|
14
|
-
events: {
|
|
15
|
-
[evt: string]: CustomEvent<any>;
|
|
16
|
-
};
|
|
17
|
-
slots: {
|
|
18
|
-
header: {};
|
|
19
|
-
body: {};
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
export declare type AccordionFlushProps = typeof __propDef.props;
|
|
23
|
-
export declare type AccordionFlushEvents = typeof __propDef.events;
|
|
24
|
-
export declare type AccordionFlushSlots = typeof __propDef.slots;
|
|
25
|
-
export default class AccordionFlush extends SvelteComponentTyped<AccordionFlushProps, AccordionFlushEvents, AccordionFlushSlots> {
|
|
26
|
-
}
|
|
27
|
-
export {};
|
package/icons/CodeBracket.svelte
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
<script>// https://github.com/shinokada/svelte-heros-v2
|
|
2
|
-
export let size = '24';
|
|
3
|
-
export let color = 'currentColor';
|
|
4
|
-
export let variation = 'outline';
|
|
5
|
-
let viewBox;
|
|
6
|
-
let svgpath;
|
|
7
|
-
let svgoutline = `<path d="M17.25 6.75L22.5 12L17.25 17.25M6.75 17.25L1.5 12L6.75 6.75M14.25 3.75L9.75 20.25" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
|
|
8
|
-
let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4473 3.02662C14.847 3.1356 15.0826 3.54791 14.9736 3.94753L10.4736 20.4475C10.3646 20.8471 9.95228 21.0827 9.55266 20.9738C9.15304 20.8648 8.91744 20.4525 9.02643 20.0529L13.5264 3.55285C13.6354 3.15323 14.0477 2.91763 14.4473 3.02662ZM16.7197 6.21986C17.0126 5.92696 17.4874 5.92696 17.7803 6.21986L23.0303 11.4699C23.3232 11.7628 23.3232 12.2376 23.0303 12.5305L17.7803 17.7805C17.4874 18.0734 17.0126 18.0734 16.7197 17.7805C16.4268 17.4876 16.4268 17.0128 16.7197 16.7199L21.4393 12.0002L16.7197 7.28052C16.4268 6.98762 16.4268 6.51275 16.7197 6.21986ZM7.28033 6.21986C7.57322 6.51275 7.57322 6.98763 7.28033 7.28052L2.56066 12.0002L7.28033 16.7199C7.57322 17.0128 7.57322 17.4876 7.28033 17.7805C6.98744 18.0734 6.51256 18.0734 6.21967 17.7805L0.96967 12.5305C0.676777 12.2376 0.676777 11.7628 0.96967 11.4699L6.21967 6.21986C6.51256 5.92697 6.98744 5.92697 7.28033 6.21986Z" fill="${color}"/> `;
|
|
9
|
-
$: switch (variation) {
|
|
10
|
-
case 'outline':
|
|
11
|
-
svgpath = svgoutline;
|
|
12
|
-
viewBox = '0 0 24 24';
|
|
13
|
-
break;
|
|
14
|
-
case 'solid':
|
|
15
|
-
svgpath = svgsolid;
|
|
16
|
-
viewBox = '0 0 24 24';
|
|
17
|
-
break;
|
|
18
|
-
default:
|
|
19
|
-
svgpath = svgoutline;
|
|
20
|
-
viewBox = '0 0 24 24';
|
|
21
|
-
}
|
|
22
|
-
export let ariaLabel = 'code bracket';
|
|
23
|
-
</script>
|
|
24
|
-
|
|
25
|
-
<svg
|
|
26
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
27
|
-
width={size}
|
|
28
|
-
height={size}
|
|
29
|
-
class={$$props.class}
|
|
30
|
-
{...$$restProps}
|
|
31
|
-
aria-label={ariaLabel}
|
|
32
|
-
fill="none"
|
|
33
|
-
{viewBox}
|
|
34
|
-
stroke-width="2"
|
|
35
|
-
on:click
|
|
36
|
-
>
|
|
37
|
-
{@html svgpath}
|
|
38
|
-
</svg>
|
|
@@ -1,22 +0,0 @@
|
|
|
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 CodeBracketProps = typeof __propDef.props;
|
|
18
|
-
export declare type CodeBracketEvents = typeof __propDef.events;
|
|
19
|
-
export declare type CodeBracketSlots = typeof __propDef.slots;
|
|
20
|
-
export default class CodeBracket extends SvelteComponentTyped<CodeBracketProps, CodeBracketEvents, CodeBracketSlots> {
|
|
21
|
-
}
|
|
22
|
-
export {};
|
package/icons/Envelope.svelte
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
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>
|
|
@@ -1,22 +0,0 @@
|
|
|
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 {};
|