flowbite-svelte 0.28.11 → 0.29.0
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 +18 -0
- package/forms/Range.svelte +9 -9
- package/forms/Textarea.svelte +27 -28
- package/megamenu/MegaMenu.svelte +24 -29
- package/navbar/NavDropdown.svelte +33 -40
- package/package.json +2 -2
- package/toolbar/Toolbar.svelte +4 -4
- package/toolbar/ToolbarButton.svelte +9 -9
- package/utils/backdrop.d.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
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.29.0](https://github.com/themesberg/flowbite-svelte/compare/v0.28.12...v0.29.0) (2022-12-18)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### ⚠ BREAKING CHANGES
|
|
9
|
+
|
|
10
|
+
* update sveltekit 1.0.1
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
* update sveltekit 1.0.1 ([9b812c8](https://github.com/themesberg/flowbite-svelte/commit/9b812c861b25ef338574e91c95de3a1c0219f3b5))
|
|
15
|
+
|
|
16
|
+
### [0.28.12](https://github.com/themesberg/flowbite-svelte/compare/v0.28.11...v0.28.12) (2022-12-18)
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
### Bug Fixes
|
|
20
|
+
|
|
21
|
+
* npm run check fixes ([#484](https://github.com/themesberg/flowbite-svelte/issues/484)) ([be4f0f6](https://github.com/themesberg/flowbite-svelte/commit/be4f0f6270b93296d8e2cd3eab60ef77fc621261))
|
|
22
|
+
|
|
5
23
|
### [0.28.11](https://github.com/themesberg/flowbite-svelte/compare/v0.28.10...v0.28.11) (2022-12-10)
|
|
6
24
|
|
|
7
25
|
|
package/forms/Range.svelte
CHANGED
|
@@ -11,12 +11,12 @@ $: inputClass = classNames('w-full bg-gray-200 rounded-lg appearance-none cursor
|
|
|
11
11
|
</script>
|
|
12
12
|
|
|
13
13
|
<input
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
14
|
+
type="range"
|
|
15
|
+
bind:value
|
|
16
|
+
{...$$restProps}
|
|
17
|
+
class={inputClass}
|
|
18
|
+
on:change
|
|
19
|
+
on:click
|
|
20
|
+
on:keydown
|
|
21
|
+
on:keypress
|
|
22
|
+
on:keyup />
|
package/forms/Textarea.svelte
CHANGED
|
@@ -17,32 +17,31 @@ $: innerWrapperClass = classNames('py-2 px-4 bg-white dark:bg-gray-800', $$slots
|
|
|
17
17
|
</script>
|
|
18
18
|
|
|
19
19
|
<Wrapper show={wrapped} class={wrapperClass}>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
{/if}
|
|
20
|
+
{#if $$slots.header}
|
|
21
|
+
<div class={headerClass(true)}>
|
|
22
|
+
<slot name="header" />
|
|
23
|
+
</div>
|
|
24
|
+
{/if}
|
|
25
|
+
<Wrapper show={wrapped} class={innerWrapperClass}>
|
|
26
|
+
<textarea
|
|
27
|
+
bind:value
|
|
28
|
+
on:blur
|
|
29
|
+
on:change
|
|
30
|
+
on:click
|
|
31
|
+
on:focus
|
|
32
|
+
on:keydown
|
|
33
|
+
on:keypress
|
|
34
|
+
on:keyup
|
|
35
|
+
on:mouseenter
|
|
36
|
+
on:mouseleave
|
|
37
|
+
on:mouseover
|
|
38
|
+
on:paste
|
|
39
|
+
{...$$restProps}
|
|
40
|
+
class={textareaClass} />
|
|
41
|
+
</Wrapper>
|
|
42
|
+
{#if $$slots.footer}
|
|
43
|
+
<div class={headerClass(false)}>
|
|
44
|
+
<slot name="footer" />
|
|
45
|
+
</div>
|
|
46
|
+
{/if}
|
|
48
47
|
</Wrapper>
|
package/megamenu/MegaMenu.svelte
CHANGED
|
@@ -7,36 +7,31 @@ let wrapperClass;
|
|
|
7
7
|
$: wrapperClass = classNames(full && 'border-y w-full', $$props.class);
|
|
8
8
|
let ulClass;
|
|
9
9
|
$: ulClass = classNames('grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max', full && $$slots.extra ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3', 'text-sm font-medium', full && $$slots.extra && 'md:w-2/3');
|
|
10
|
-
const init = (node) => {
|
|
11
|
-
if (full) {
|
|
12
|
-
node.parentElement.classList.add('inset-x-0');
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
10
|
</script>
|
|
16
11
|
|
|
17
12
|
<Popper
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
13
|
+
color={full ? 'default' : 'dropdown'}
|
|
14
|
+
border={!full}
|
|
15
|
+
rounded={!full}
|
|
16
|
+
activeContent
|
|
17
|
+
arrow={false}
|
|
18
|
+
trigger="click"
|
|
19
|
+
placement="bottom"
|
|
20
|
+
yOnly={full}
|
|
21
|
+
{...$$restProps}
|
|
22
|
+
class={wrapperClass}
|
|
23
|
+
on:show
|
|
24
|
+
bind:open>
|
|
25
|
+
<div class="flex flex-col md:flex-row p-4 max-w-screen-md justify-center mx-auto">
|
|
26
|
+
<ul class={ulClass}>
|
|
27
|
+
{#each items as item, index}
|
|
28
|
+
<li>
|
|
29
|
+
<slot {item} {index} />
|
|
30
|
+
</li>
|
|
31
|
+
{:else}
|
|
32
|
+
<slot />
|
|
33
|
+
{/each}
|
|
34
|
+
</ul>
|
|
35
|
+
{#if full && $$slots.extra}<div class="md:w-1/3 mt-4 md:mt-0"><slot name="extra" /></div>{/if}
|
|
36
|
+
</div>
|
|
42
37
|
</Popper>
|
|
@@ -15,45 +15,38 @@ let liClass = 'flex justify-center py-2 pr-4 pl-3 text-gray-700 border-b border-
|
|
|
15
15
|
</script>
|
|
16
16
|
|
|
17
17
|
<li use:clickOutside={() => !hidden && handleDropdown()} class={liClass}>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
fill-rule="evenodd"
|
|
27
|
-
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"
|
|
28
|
-
clip-rule="evenodd"
|
|
29
|
-
/></svg
|
|
30
|
-
></button
|
|
31
|
-
>
|
|
18
|
+
<button on:click={() => handleDropdown()} class={liButtonClass}
|
|
19
|
+
>{name}
|
|
20
|
+
<svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
|
|
21
|
+
><path
|
|
22
|
+
fill-rule="evenodd"
|
|
23
|
+
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"
|
|
24
|
+
clip-rule="evenodd" /></svg
|
|
25
|
+
></button>
|
|
32
26
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</div>
|
|
27
|
+
<!-- Dropdown menu -->
|
|
28
|
+
<div class:hidden class="absolute {dropdownDiv} mt-8 z-10">
|
|
29
|
+
<slot>
|
|
30
|
+
<ul class="py-1" aria-labelledby="dropdownLargeButton">
|
|
31
|
+
{#each child as item}
|
|
32
|
+
<li>
|
|
33
|
+
<a
|
|
34
|
+
href={item.href}
|
|
35
|
+
{rel}
|
|
36
|
+
on:blur
|
|
37
|
+
on:change
|
|
38
|
+
on:click
|
|
39
|
+
on:focus
|
|
40
|
+
on:keydown
|
|
41
|
+
on:keypress
|
|
42
|
+
on:keyup
|
|
43
|
+
on:mouseenter
|
|
44
|
+
on:mouseleave
|
|
45
|
+
on:mouseover
|
|
46
|
+
class={dropdownLinkClassWithChild}>{item.name}</a>
|
|
47
|
+
</li>
|
|
48
|
+
{/each}
|
|
49
|
+
</ul>
|
|
50
|
+
</slot>
|
|
51
|
+
</div>
|
|
59
52
|
</li>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.29.0",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": {
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"devDependencies": {
|
|
15
15
|
"@playwright/test": "^1.28.1",
|
|
16
16
|
"@sveltejs/adapter-vercel": "next",
|
|
17
|
-
"@sveltejs/kit": "
|
|
17
|
+
"@sveltejs/kit": "^1.0.1",
|
|
18
18
|
"@sveltejs/package": "1.0.0-next.3",
|
|
19
19
|
"@typescript-eslint/eslint-plugin": "^5.46.0",
|
|
20
20
|
"@typescript-eslint/parser": "^5.46.0",
|
package/toolbar/Toolbar.svelte
CHANGED
|
@@ -50,8 +50,8 @@ divideColors[color]);
|
|
|
50
50
|
</script>
|
|
51
51
|
|
|
52
52
|
<div class={divClass}>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
53
|
+
<div class="flex flex-wrap items-center {separatorsClass}">
|
|
54
|
+
<slot />
|
|
55
|
+
</div>
|
|
56
|
+
<slot name="end" />
|
|
57
57
|
</div>
|
|
@@ -32,13 +32,13 @@ const svgSizes = {
|
|
|
32
32
|
</script>
|
|
33
33
|
|
|
34
34
|
<button on:click type="button" {...$$restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
35
|
+
{#if name}<span class="sr-only">{name}</span>{/if}
|
|
36
|
+
<slot>
|
|
37
|
+
<svg class={svgSizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
38
|
+
<path
|
|
39
|
+
fill-rule="evenodd"
|
|
40
|
+
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"
|
|
41
|
+
clip-rule="evenodd" />
|
|
42
|
+
</svg>
|
|
43
|
+
</slot>
|
|
44
44
|
</button>
|
package/utils/backdrop.d.ts
CHANGED