flowbite-svelte 0.43.1 → 0.43.3
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/accordion/AccordionItem.svelte +2 -16
- package/dist/accordion/AccordionItem.svelte.d.ts.map +1 -1
- package/dist/bottom-nav/BottomNav.svelte +10 -1
- package/dist/bottom-nav/BottomNav.svelte.d.ts +2 -1
- package/dist/bottom-nav/BottomNav.svelte.d.ts.map +1 -1
- package/dist/bottom-nav/BottomNavHeaderItem.svelte +1 -11
- package/dist/bottom-nav/BottomNavItem.svelte +10 -3
- package/dist/bottom-nav/BottomNavItem.svelte.d.ts +1 -1
- package/dist/bottom-nav/BottomNavItem.svelte.d.ts.map +1 -1
- package/dist/buttons/Button.svelte +1 -1
- package/dist/buttons/GradientButton.svelte +1 -13
- package/dist/carousels/Carousel.svelte +2 -15
- package/dist/carousels/CarouselTransition.svelte +1 -9
- package/dist/carousels/Thumbnail.svelte +1 -8
- package/dist/darkmode/DarkMode.svelte +2 -5
- package/dist/dropdowns/Dropdown.svelte +14 -0
- package/dist/dropdowns/Dropdown.svelte.d.ts +4 -0
- package/dist/dropdowns/Dropdown.svelte.d.ts.map +1 -1
- package/dist/dropdowns/DropdownItem.svelte +16 -3
- package/dist/dropdowns/DropdownItem.svelte.d.ts +1 -0
- package/dist/dropdowns/DropdownItem.svelte.d.ts.map +1 -1
- package/dist/forms/Dropzone.svelte +1 -13
- package/dist/forms/FloatingLabelInput.svelte +1 -24
- package/dist/forms/FloatingLabelInput.svelte.d.ts.map +1 -1
- package/dist/forms/Input.svelte +1 -18
- package/dist/forms/Textarea.svelte.d.ts.map +1 -1
- package/dist/forms/Toggle.svelte.d.ts.map +1 -1
- package/dist/list-group/Listgroup.svelte +2 -4
- package/dist/list-group/ListgroupItem.svelte +1 -15
- package/dist/modals/Modal.svelte +1 -5
- package/dist/navbar/NavLi.svelte +10 -5
- package/dist/navbar/NavLi.svelte.d.ts +0 -1
- package/dist/navbar/NavLi.svelte.d.ts.map +1 -1
- package/dist/navbar/NavUl.svelte +8 -1
- package/dist/navbar/NavUl.svelte.d.ts +1 -0
- package/dist/navbar/NavUl.svelte.d.ts.map +1 -1
- package/dist/sidebars/Sidebar.svelte +15 -1
- package/dist/sidebars/Sidebar.svelte.d.ts +7 -0
- package/dist/sidebars/Sidebar.svelte.d.ts.map +1 -1
- package/dist/sidebars/SidebarItem.svelte +18 -5
- package/dist/sidebars/SidebarItem.svelte.d.ts +1 -2
- package/dist/sidebars/SidebarItem.svelte.d.ts.map +1 -1
- package/dist/speed-dial/SpeedDial.svelte.d.ts.map +1 -1
- package/dist/utils/Popper.svelte +12 -19
- package/dist/utils/Popper.svelte.d.ts.map +1 -1
- package/package.json +10 -10
|
@@ -47,22 +47,8 @@ onMount(() => {
|
|
|
47
47
|
});
|
|
48
48
|
const handleToggle = (_) => selected.set(open ? {} : self);
|
|
49
49
|
let buttonClass;
|
|
50
|
-
$: buttonClass = twMerge([
|
|
51
|
-
|
|
52
|
-
ctx.flush || borderClass,
|
|
53
|
-
borderBottomClass,
|
|
54
|
-
borderSharedClass,
|
|
55
|
-
ctx.flush ? paddingFlush : paddingDefault,
|
|
56
|
-
open && (ctx.flush ? textFlushOpen : activeCls || ctx.activeClass),
|
|
57
|
-
!open && (ctx.flush ? textFlushDefault : inactiveCls || ctx.inactiveClass),
|
|
58
|
-
$$props.class
|
|
59
|
-
]);
|
|
60
|
-
$: contentClass = twMerge([
|
|
61
|
-
ctx.flush ? paddingFlush : paddingDefault,
|
|
62
|
-
ctx.flush ? '' : borderOpenClass,
|
|
63
|
-
borderBottomClass,
|
|
64
|
-
borderSharedClass
|
|
65
|
-
]);
|
|
50
|
+
$: buttonClass = twMerge([defaultClass, ctx.flush || borderClass, borderBottomClass, borderSharedClass, ctx.flush ? paddingFlush : paddingDefault, open && (ctx.flush ? textFlushOpen : activeCls || ctx.activeClass), !open && (ctx.flush ? textFlushDefault : inactiveCls || ctx.inactiveClass), $$props.class]);
|
|
51
|
+
$: contentClass = twMerge([ctx.flush ? paddingFlush : paddingDefault, ctx.flush ? '' : borderOpenClass, borderBottomClass, borderSharedClass]);
|
|
66
52
|
</script>
|
|
67
53
|
|
|
68
54
|
<h2 class="group">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/AccordionItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAKD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/AccordionItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAKD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA0GtE,QAAA,MAAM,SAAS;;;;sBADqhB,MAAM,GAAG,SAAS;wBAAkB,MAAM,GAAG,SAAS;;;;;;;;;;;;sBAA6T,MAAM,GAAG,SAAS;wBAAkB,MAAM,GAAG,SAAS;;;;;;;;;;;CAC/3B,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
|
|
@@ -2,15 +2,24 @@
|
|
|
2
2
|
</script>
|
|
3
3
|
|
|
4
4
|
<script>import { setContext } from 'svelte';
|
|
5
|
+
import { writable } from 'svelte/store';
|
|
5
6
|
import { twMerge } from 'tailwind-merge';
|
|
7
|
+
export let activeUrl = '';
|
|
6
8
|
export let position = 'fixed';
|
|
7
9
|
export let navType = 'default';
|
|
8
10
|
export let outerClass = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
|
|
9
11
|
export let innerClass = 'grid h-full max-w-lg mx-auto';
|
|
10
12
|
export let activeClass = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
|
|
11
|
-
let
|
|
13
|
+
// export let activeUrl: string = '';
|
|
14
|
+
let activeCls = '';
|
|
15
|
+
const activeUrlStore = writable('');
|
|
16
|
+
activeCls = twMerge(activeClass, $$props.classActive);
|
|
12
17
|
setContext('navType', navType);
|
|
13
18
|
setContext('bottomNavType', { activeClass: activeCls });
|
|
19
|
+
$: {
|
|
20
|
+
activeUrlStore.set(activeUrl);
|
|
21
|
+
}
|
|
22
|
+
setContext('activeUrl', activeUrlStore);
|
|
14
23
|
const outerDivClasses = {
|
|
15
24
|
default: 'bottom-0 left-0 h-16 bg-white border-t',
|
|
16
25
|
border: 'bottom-0 left-0 h-16 bg-white border-t',
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
export type
|
|
2
|
+
export type BottomNavType = {
|
|
3
3
|
activeClass: string;
|
|
4
4
|
};
|
|
5
5
|
declare const __propDef: {
|
|
6
6
|
props: {
|
|
7
7
|
[x: string]: any;
|
|
8
|
+
activeUrl?: string | undefined;
|
|
8
9
|
position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
|
|
9
10
|
navType?: "default" | "border" | "application" | "group" | "pagination" | "card" | "meeting" | "video" | undefined;
|
|
10
11
|
outerClass?: string | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNav.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"BottomNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNav.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAwEJ,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
|
|
@@ -6,17 +6,7 @@ export let activeClass = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900
|
|
|
6
6
|
$: btnClass = active ? activeClass : defaultClass;
|
|
7
7
|
</script>
|
|
8
8
|
|
|
9
|
-
<button
|
|
10
|
-
class={twMerge(btnClass, $$props.class)}
|
|
11
|
-
{...$$restProps}
|
|
12
|
-
on:click
|
|
13
|
-
on:change
|
|
14
|
-
on:keydown
|
|
15
|
-
on:keyup
|
|
16
|
-
on:focus
|
|
17
|
-
on:blur
|
|
18
|
-
on:mouseenter
|
|
19
|
-
on:mouseleave>
|
|
9
|
+
<button class={twMerge(btnClass, $$props.class)} {...$$restProps} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
|
|
20
10
|
{itemName}
|
|
21
11
|
</button>
|
|
22
12
|
|
|
@@ -3,9 +3,15 @@ import { twMerge } from 'tailwind-merge';
|
|
|
3
3
|
export let btnName = '';
|
|
4
4
|
export let appBtnPosition = 'middle';
|
|
5
5
|
export let activeClass = undefined;
|
|
6
|
-
export let
|
|
6
|
+
export let href = '';
|
|
7
7
|
const navType = getContext('navType');
|
|
8
8
|
const context = getContext('bottomNavType') ?? {};
|
|
9
|
+
const activeUrlStore = getContext('activeUrl');
|
|
10
|
+
let navUrl = '';
|
|
11
|
+
activeUrlStore.subscribe(value => {
|
|
12
|
+
navUrl = value;
|
|
13
|
+
});
|
|
14
|
+
$: active = navUrl ? href === navUrl : false;
|
|
9
15
|
const btnClasses = {
|
|
10
16
|
default: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
|
|
11
17
|
border: 'inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600',
|
|
@@ -32,15 +38,16 @@ const appBtnClasses = {
|
|
|
32
38
|
right: 'inline-flex flex-col items-center justify-center px-5 rounded-r-full hover:bg-gray-50 dark:hover:bg-gray-800 group'
|
|
33
39
|
};
|
|
34
40
|
let btnClass;
|
|
41
|
+
// let active = navUrl ? href === navUrl : false;
|
|
35
42
|
$: btnClass = twMerge(btnClasses[navType], appBtnClasses[appBtnPosition], active && (activeClass ?? context.activeClass), $$props.btnClass);
|
|
36
43
|
let spanClass;
|
|
37
44
|
$: spanClass = twMerge(spanClasses[navType], active && (activeClass ?? context.activeClass), $$props.spanClass);
|
|
38
45
|
</script>
|
|
39
46
|
|
|
40
|
-
<button {...$$restProps} class={btnClass}
|
|
47
|
+
<svelte:element this={href ? 'a' : 'button'} aria-label={btnName} {href} role={href ? 'link' : 'button'} {...$$restProps} class={btnClass} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
|
|
41
48
|
<slot />
|
|
42
49
|
<span class={spanClass}>{btnName}</span>
|
|
43
|
-
</
|
|
50
|
+
</svelte:element>
|
|
44
51
|
|
|
45
52
|
<!--
|
|
46
53
|
@component
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomNavItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;
|
|
1
|
+
{"version":3,"file":"BottomNavItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-nav/BottomNavItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2ED,QAAA,MAAM,SAAS;;;;;sBAD+K,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;CAClI,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
|
|
@@ -68,7 +68,7 @@ let buttonClass;
|
|
|
68
68
|
$: buttonClass = twMerge('text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', group || 'focus:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' && (group ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600' : 'dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-700'), outline && color === 'dark' && (group ? 'dark:text-white dark:border-white' : 'dark:text-gray-400 dark:border-gray-700'), coloredFocusClasses[color], hasBorder() && group && 'border-l-0 first:border-l', group ? (pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg' : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
|
|
69
69
|
</script>
|
|
70
70
|
|
|
71
|
-
<svelte:element this={href ? 'a' : 'button'} type={href ? undefined : type} {href} {...$$restProps} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave
|
|
71
|
+
<svelte:element this={href ? 'a' : 'button'} type={href ? undefined : type} {href} role={href ? 'link' : 'button'} {...$$restProps} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave>
|
|
72
72
|
<slot />
|
|
73
73
|
</svelte:element>
|
|
74
74
|
|
|
@@ -50,19 +50,7 @@ $: divClass = twMerge($$props.outline && 'p-0.5', gradientClasses[color], shadow
|
|
|
50
50
|
<!-- Trick to prentend outline without using border
|
|
51
51
|
This has a limitation of no supporting transparency as
|
|
52
52
|
is set to bg-white dark:bg-gray-900 -->
|
|
53
|
-
<Button
|
|
54
|
-
{...$$restProps}
|
|
55
|
-
color="none"
|
|
56
|
-
class={gradientOutlineClass}
|
|
57
|
-
on:click
|
|
58
|
-
on:change
|
|
59
|
-
on:keydown
|
|
60
|
-
on:keyup
|
|
61
|
-
on:touchstart
|
|
62
|
-
on:touchend
|
|
63
|
-
on:touchcancel
|
|
64
|
-
on:mouseenter
|
|
65
|
-
on:mouseleave><slot /></Button>
|
|
53
|
+
<Button {...$$restProps} color="none" class={gradientOutlineClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave><slot /></Button>
|
|
66
54
|
</div>
|
|
67
55
|
{:else}
|
|
68
56
|
<Button {...$$restProps} color="none" class={divClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave>
|
|
@@ -66,12 +66,7 @@ if (loop) {
|
|
|
66
66
|
|
|
67
67
|
<div {id} class="relative">
|
|
68
68
|
<div class={divCls}>
|
|
69
|
-
<Slide
|
|
70
|
-
image={image.imgurl}
|
|
71
|
-
altTag={image.name}
|
|
72
|
-
attr={image.attribution}
|
|
73
|
-
slideClass={slideCls}
|
|
74
|
-
imgClass={imgCls} />
|
|
69
|
+
<Slide image={image.imgurl} altTag={image.name} attr={image.attribution} slideClass={slideCls} imgClass={imgCls} />
|
|
75
70
|
</div>
|
|
76
71
|
{#if showIndicators}
|
|
77
72
|
<!-- Slider indicators -->
|
|
@@ -117,15 +112,7 @@ if (loop) {
|
|
|
117
112
|
{#if showThumbs}
|
|
118
113
|
<div class={thumbDivCls}>
|
|
119
114
|
{#each images as { id, imgurl, name, attribution }}
|
|
120
|
-
<Thumbnail
|
|
121
|
-
thumbClass={thumbCls}
|
|
122
|
-
thumbBtnClass={thumbBtnCls}
|
|
123
|
-
thumbImg={imgurl}
|
|
124
|
-
altTag={name}
|
|
125
|
-
titleLink={attribution}
|
|
126
|
-
{id}
|
|
127
|
-
selected={imageShowingIndex === id}
|
|
128
|
-
on:click={() => goToSlide(id)} />
|
|
115
|
+
<Thumbnail thumbClass={thumbCls} thumbBtnClass={thumbBtnCls} thumbImg={imgurl} altTag={name} titleLink={attribution} {id} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
|
|
129
116
|
{/each}
|
|
130
117
|
</div>
|
|
131
118
|
{/if}
|
|
@@ -140,15 +140,7 @@ if (loop) {
|
|
|
140
140
|
{#if showThumbs}
|
|
141
141
|
<div class={thumbDivCls}>
|
|
142
142
|
{#each images as { id, imgurl, name, attribution }}
|
|
143
|
-
<Thumbnail
|
|
144
|
-
thumbClass={thumbCls}
|
|
145
|
-
thumbBtnClass={thumbBtnCls}
|
|
146
|
-
thumbImg={imgurl}
|
|
147
|
-
altTag={name}
|
|
148
|
-
titleLink={attribution}
|
|
149
|
-
{id}
|
|
150
|
-
selected={imageShowingIndex === id}
|
|
151
|
-
on:click={() => goToSlide(id)} />
|
|
143
|
+
<Thumbnail thumbClass={thumbCls} thumbBtnClass={thumbBtnCls} thumbImg={imgurl} altTag={name} titleLink={attribution} {id} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
|
|
152
144
|
{/each}
|
|
153
145
|
</div>
|
|
154
146
|
{/if}
|
|
@@ -10,14 +10,7 @@ export let thumbBtnClass = '';
|
|
|
10
10
|
|
|
11
11
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
12
12
|
<button on:click aria-label="Click to view image" class={thumbBtnClass}>
|
|
13
|
-
<img
|
|
14
|
-
class={thumbClass}
|
|
15
|
-
class:active={selected}
|
|
16
|
-
id={id.toString()}
|
|
17
|
-
src={thumbImg}
|
|
18
|
-
alt={altTag}
|
|
19
|
-
title="Image from {titleLink}"
|
|
20
|
-
width="{thumbWidth}%" />
|
|
13
|
+
<img class={thumbClass} class:active={selected} id={id.toString()} src={thumbImg} alt={altTag} title="Image from {titleLink}" width="{thumbWidth}%" />
|
|
21
14
|
</button>
|
|
22
15
|
|
|
23
16
|
<!--
|
|
@@ -16,13 +16,10 @@ const toggleTheme = () => {
|
|
|
16
16
|
<script>
|
|
17
17
|
if ('color-theme' in localStorage) {
|
|
18
18
|
// explicit preference - overrides author's choice
|
|
19
|
-
localStorage.getItem('color-theme') === 'dark'
|
|
20
|
-
? window.document.documentElement.classList.add('dark')
|
|
21
|
-
: window.document.documentElement.classList.remove('dark');
|
|
19
|
+
localStorage.getItem('color-theme') === 'dark' ? window.document.documentElement.classList.add('dark') : window.document.documentElement.classList.remove('dark');
|
|
22
20
|
} else {
|
|
23
21
|
// browser preference - does not overrides
|
|
24
|
-
if (window.matchMedia('(prefers-color-scheme: dark)').matches)
|
|
25
|
-
window.document.documentElement.classList.add('dark');
|
|
22
|
+
if (window.matchMedia('(prefers-color-scheme: dark)').matches) window.document.documentElement.classList.add('dark');
|
|
26
23
|
}
|
|
27
24
|
</script>
|
|
28
25
|
</svelte:head>
|
|
@@ -1,9 +1,23 @@
|
|
|
1
|
+
<script context="module">export {};
|
|
2
|
+
</script>
|
|
3
|
+
|
|
1
4
|
<script>import { twMerge } from 'tailwind-merge';
|
|
2
5
|
import Popper from '../utils/Popper.svelte';
|
|
6
|
+
import { setContext } from 'svelte';
|
|
7
|
+
import { writable } from 'svelte/store';
|
|
8
|
+
const activeUrlStore = writable('');
|
|
9
|
+
export let activeUrl = '';
|
|
3
10
|
export let open = false;
|
|
4
11
|
export let containerClass = 'divide-y z-50';
|
|
5
12
|
export let headerClass = 'py-1 overflow-hidden rounded-t-lg';
|
|
6
13
|
export let footerClass = 'py-1 overflow-hidden rounded-b-lg';
|
|
14
|
+
export let activeClass = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
|
|
15
|
+
let activeCls = twMerge(activeClass, $$props.classActive);
|
|
16
|
+
setContext('DropdownType', { activeClass: activeCls });
|
|
17
|
+
$: {
|
|
18
|
+
activeUrlStore.set(activeUrl);
|
|
19
|
+
}
|
|
20
|
+
setContext('activeUrl', activeUrlStore);
|
|
7
21
|
let containerCls = twMerge(containerClass, $$props.classContainer);
|
|
8
22
|
let headerCls = twMerge(headerClass, $$props.classHeader);
|
|
9
23
|
let ulCls = twMerge('py-1', $$props.class);
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
export type DropdownType = {
|
|
3
|
+
activeClass: string;
|
|
4
|
+
};
|
|
2
5
|
declare const __propDef: {
|
|
3
6
|
props: {
|
|
4
7
|
download?: any;
|
|
@@ -242,6 +245,7 @@ declare const __propDef: {
|
|
|
242
245
|
containerClass?: string | undefined;
|
|
243
246
|
headerClass?: string | undefined;
|
|
244
247
|
footerClass?: string | undefined;
|
|
248
|
+
activeUrl?: string | undefined;
|
|
245
249
|
};
|
|
246
250
|
events: {
|
|
247
251
|
show: CustomEvent<any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;
|
|
1
|
+
{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAgFJ,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
|
|
@@ -1,9 +1,22 @@
|
|
|
1
1
|
<script>import Wrapper from '../utils/Wrapper.svelte';
|
|
2
2
|
import { twMerge } from 'tailwind-merge';
|
|
3
|
+
import { getContext } from 'svelte';
|
|
3
4
|
export let defaultClass = 'font-medium py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
|
|
4
5
|
export let href = undefined;
|
|
5
|
-
let
|
|
6
|
-
|
|
6
|
+
export let activeClass = undefined;
|
|
7
|
+
// export let active: boolean = false;
|
|
8
|
+
const context = getContext('DropdownType') ?? {};
|
|
9
|
+
const activeUrlStore = getContext('activeUrl');
|
|
10
|
+
let sidebarUrl = '';
|
|
11
|
+
activeUrlStore.subscribe(value => {
|
|
12
|
+
// console.log('value: ', value)
|
|
13
|
+
sidebarUrl = value;
|
|
14
|
+
});
|
|
15
|
+
$: active = sidebarUrl ? href === sidebarUrl : false;
|
|
16
|
+
// let liClass: string;
|
|
17
|
+
$: liClass = twMerge(defaultClass, href ? 'block' : 'w-full text-left', active && (activeClass ?? context.activeClass), $$props.class);
|
|
18
|
+
// twMerge(active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
|
|
19
|
+
// console.log('active: ', active)
|
|
7
20
|
let wrap = true;
|
|
8
21
|
function init(node) {
|
|
9
22
|
wrap = node.parentElement?.tagName === 'UL';
|
|
@@ -11,7 +24,7 @@ function init(node) {
|
|
|
11
24
|
</script>
|
|
12
25
|
|
|
13
26
|
<Wrapper tag="li" show={wrap} use={init}>
|
|
14
|
-
<svelte:element this={href ? 'a' : 'button'} {href} type={href ? undefined : 'button'} {...$$restProps} class={liClass} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave
|
|
27
|
+
<svelte:element this={href ? 'a' : 'button'} {href} type={href ? undefined : 'button'} role={href ? 'link' : 'button'} {...$$restProps} class={liClass} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
|
|
15
28
|
<slot />
|
|
16
29
|
</svelte:element>
|
|
17
30
|
</Wrapper>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/DropdownItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;
|
|
1
|
+
{"version":3,"file":"DropdownItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/DropdownItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiDD,QAAA,MAAM,SAAS;;;;eADwG,MAAM,GAAG,SAAS;sBAAgB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;CAC7F,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
|
|
@@ -11,19 +11,7 @@ function keydown(ev) {
|
|
|
11
11
|
}
|
|
12
12
|
</script>
|
|
13
13
|
|
|
14
|
-
<button
|
|
15
|
-
class={twMerge(defaultClass, $$props.class)}
|
|
16
|
-
on:keydown={keydown}
|
|
17
|
-
on:focus
|
|
18
|
-
on:blur
|
|
19
|
-
on:mouseenter
|
|
20
|
-
on:mouseleave
|
|
21
|
-
on:mouseover
|
|
22
|
-
on:dragenter
|
|
23
|
-
on:dragleave
|
|
24
|
-
on:dragover
|
|
25
|
-
on:drop
|
|
26
|
-
type="button">
|
|
14
|
+
<button class={twMerge(defaultClass, $$props.class)} on:keydown={keydown} on:focus on:blur on:mouseenter on:mouseleave on:mouseover on:dragenter on:dragleave on:dragover on:drop type="button">
|
|
27
15
|
<label class="flex flex-col items-center" tabIndex="0">
|
|
28
16
|
<slot />
|
|
29
17
|
<input {...$$restProps} bind:value bind:files bind:this={input} on:change on:click type="file" class="hidden" />
|
|
@@ -63,30 +63,7 @@ const labelColorClasses = {
|
|
|
63
63
|
</script>
|
|
64
64
|
|
|
65
65
|
<div class={twMerge(divClasses[style], $$props.classDiv)}>
|
|
66
|
-
<input
|
|
67
|
-
{id}
|
|
68
|
-
{...$$restProps}
|
|
69
|
-
bind:value
|
|
70
|
-
on:blur
|
|
71
|
-
on:change
|
|
72
|
-
on:click
|
|
73
|
-
on:focus
|
|
74
|
-
on:input
|
|
75
|
-
on:keydown
|
|
76
|
-
on:keypress
|
|
77
|
-
on:keyup
|
|
78
|
-
on:mouseenter
|
|
79
|
-
on:mouseleave
|
|
80
|
-
on:mouseover
|
|
81
|
-
on:paste
|
|
82
|
-
{...{ type }}
|
|
83
|
-
placeholder=" "
|
|
84
|
-
class={twMerge(
|
|
85
|
-
inputClasses[style],
|
|
86
|
-
inputColorClasses[color],
|
|
87
|
-
inputSizes[style][size],
|
|
88
|
-
$$props.classInput
|
|
89
|
-
)} />
|
|
66
|
+
<input {id} {...$$restProps} bind:value on:blur on:change on:click on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {...{ type }} placeholder=" " class={twMerge(inputClasses[style], inputColorClasses[color], inputSizes[style][size], $$props.classInput)} />
|
|
90
67
|
|
|
91
68
|
<label for={id} class={twMerge(labelClasses[style], labelColorClasses[color], labelSizes[style][size], $$props.classLabel)}>
|
|
92
69
|
{label}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingLabelInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/FloatingLabelInput.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"FloatingLabelInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/FloatingLabelInput.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAwF1C,QAAA,MAAM,SAAS;;;;;;;;gBADqP,GAAG;;;;;;;;;;;;;;;;;;;;CACzL,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}
|
package/dist/forms/Input.svelte
CHANGED
|
@@ -51,24 +51,7 @@ $: {
|
|
|
51
51
|
</div>
|
|
52
52
|
{/if}
|
|
53
53
|
<slot props={{ ...$$restProps, class: inputClass }}>
|
|
54
|
-
<input
|
|
55
|
-
{...$$restProps}
|
|
56
|
-
bind:value
|
|
57
|
-
on:blur
|
|
58
|
-
on:change
|
|
59
|
-
on:click
|
|
60
|
-
on:contextmenu
|
|
61
|
-
on:focus
|
|
62
|
-
on:keydown
|
|
63
|
-
on:keypress
|
|
64
|
-
on:keyup
|
|
65
|
-
on:mouseover
|
|
66
|
-
on:mouseenter
|
|
67
|
-
on:mouseleave
|
|
68
|
-
on:paste
|
|
69
|
-
on:input
|
|
70
|
-
{...{ type }}
|
|
71
|
-
class={inputClass} />
|
|
54
|
+
<input {...$$restProps} bind:value on:blur on:change on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input {...{ type }} class={inputClass} />
|
|
72
55
|
</slot>
|
|
73
56
|
{#if $$slots.right}
|
|
74
57
|
<div class="{twMerge(floatClass, $$props.classRight)} right-0 pr-2.5"><slot name="right" /></div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Textarea.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;
|
|
1
|
+
{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Textarea.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmDD,QAAA,MAAM,SAAS;;;gBADiI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CACrE,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Toggle.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;
|
|
1
|
+
{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Toggle.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwDD,QAAA,MAAM,SAAS;;;;;;kBAD6M,OAAO,GAAG,SAAS;;;;;;;;;;;;CACjK,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
|
|
@@ -14,11 +14,9 @@ $: groupClass = twMerge(defaultClass, $$props.class);
|
|
|
14
14
|
<Frame tag={active ? 'div' : 'ul'} {...$$restProps} rounded border class={groupClass}>
|
|
15
15
|
{#each items as item, index}
|
|
16
16
|
{#if typeof item === 'object'}
|
|
17
|
-
<ListgroupItem {active} {...item} {index} on:click={() => dispatch('click', item)}
|
|
18
|
-
><slot {item} {index} /></ListgroupItem>
|
|
17
|
+
<ListgroupItem {active} {...item} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
|
|
19
18
|
{:else}
|
|
20
|
-
<ListgroupItem {active} {index} on:click={() => dispatch('click', item)}
|
|
21
|
-
><slot {item} {index} /></ListgroupItem>
|
|
19
|
+
<ListgroupItem {active} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
|
|
22
20
|
{/if}
|
|
23
21
|
{:else}
|
|
24
22
|
<slot item={items[0]} />
|
|
@@ -30,21 +30,7 @@ $: itemClass = twMerge(itemDefaultClass, states[state], active && state === 'dis
|
|
|
30
30
|
<slot item={$$props} />
|
|
31
31
|
</a>
|
|
32
32
|
{:else}
|
|
33
|
-
<button
|
|
34
|
-
type="button"
|
|
35
|
-
class="flex items-center text-left {itemClass}"
|
|
36
|
-
{disabled}
|
|
37
|
-
on:blur
|
|
38
|
-
on:change
|
|
39
|
-
on:click
|
|
40
|
-
on:focus
|
|
41
|
-
on:keydown
|
|
42
|
-
on:keypress
|
|
43
|
-
on:keyup
|
|
44
|
-
on:mouseenter
|
|
45
|
-
on:mouseleave
|
|
46
|
-
on:mouseover
|
|
47
|
-
aria-current={current}>
|
|
33
|
+
<button type="button" class="flex items-center text-left {itemClass}" {disabled} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover aria-current={current}>
|
|
48
34
|
<slot item={$$props} />
|
|
49
35
|
</button>
|
|
50
36
|
{/if}
|
package/dist/modals/Modal.svelte
CHANGED
|
@@ -105,11 +105,7 @@ function handleKeys(e) {
|
|
|
105
105
|
<CloseButton name="Close modal" class="absolute top-3 right-2.5" on:click={hide} color={$$restProps.color} />
|
|
106
106
|
{/if}
|
|
107
107
|
<!-- Modal body -->
|
|
108
|
-
<div
|
|
109
|
-
class={twMerge('p-6 space-y-6 flex-1 overflow-y-auto overscroll-contain', $$props.bodyClass)}
|
|
110
|
-
on:keydown|stopPropagation={handleKeys}
|
|
111
|
-
role="document"
|
|
112
|
-
on:wheel|stopPropagation|passive>
|
|
108
|
+
<div class={twMerge('p-6 space-y-6 flex-1 overflow-y-auto overscroll-contain', $$props.bodyClass)} on:keydown|stopPropagation={handleKeys} role="document" on:wheel|stopPropagation|passive>
|
|
113
109
|
<slot />
|
|
114
110
|
</div>
|
|
115
111
|
<!-- Modal footer -->
|
package/dist/navbar/NavLi.svelte
CHANGED
|
@@ -1,12 +1,17 @@
|
|
|
1
|
-
<script>import {
|
|
2
|
-
import {
|
|
1
|
+
<script>import { getContext } from 'svelte';
|
|
2
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
3
|
export let href = '';
|
|
4
|
-
export let active = false;
|
|
5
4
|
export let activeClass = undefined;
|
|
6
5
|
export let nonActiveClass = undefined;
|
|
7
|
-
const context = getContext('
|
|
8
|
-
|
|
6
|
+
const context = getContext('navbarContext') ?? {};
|
|
7
|
+
const activeUrlStore = getContext('activeUrl');
|
|
8
|
+
let navUrl = '';
|
|
9
|
+
activeUrlStore.subscribe(value => {
|
|
10
|
+
navUrl = value;
|
|
11
|
+
});
|
|
12
|
+
$: active = navUrl ? href === navUrl : false;
|
|
9
13
|
$: liClass = twMerge('block py-2 pr-4 pl-3 md:p-0 rounded md:border-0', active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
|
|
14
|
+
// $: console.log()
|
|
10
15
|
</script>
|
|
11
16
|
|
|
12
17
|
<li>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavLi.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavLi.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;
|
|
1
|
+
{"version":3,"file":"NavLi.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavLi.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsCD,QAAA,MAAM,SAAS;;;;sBAD2G,MAAM,GAAG,SAAS;yBAAmB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CACnG,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
|
package/dist/navbar/NavUl.svelte
CHANGED
|
@@ -6,13 +6,20 @@ import { slide } from 'svelte/transition';
|
|
|
6
6
|
import { quintOut } from 'svelte/easing';
|
|
7
7
|
import Frame from '../utils/Frame.svelte';
|
|
8
8
|
import { setContext } from 'svelte';
|
|
9
|
+
import { writable } from 'svelte/store';
|
|
10
|
+
const activeUrlStore = writable('');
|
|
11
|
+
export let activeUrl = '';
|
|
9
12
|
export let divClass = 'w-full md:block md:w-auto';
|
|
10
13
|
export let ulClass = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
|
|
11
14
|
export let hidden = true;
|
|
12
15
|
export let slideParams = { delay: 250, duration: 500, easing: quintOut };
|
|
13
16
|
export let activeClass = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
|
|
14
17
|
export let nonActiveClass = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
|
|
15
|
-
setContext('
|
|
18
|
+
setContext('navbarContext', { activeClass, nonActiveClass, });
|
|
19
|
+
$: {
|
|
20
|
+
activeUrlStore.set(activeUrl);
|
|
21
|
+
}
|
|
22
|
+
setContext('activeUrl', activeUrlStore);
|
|
16
23
|
let _divClass;
|
|
17
24
|
$: _divClass = twMerge(divClass, $$props.class);
|
|
18
25
|
let _ulClass;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavUl.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavUl.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAIJ,OAAO,EAAS,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"NavUl.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavUl.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAIJ,OAAO,EAAS,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA6D5D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
|
|
@@ -1,5 +1,19 @@
|
|
|
1
|
-
<script>
|
|
1
|
+
<script context="module">export {};
|
|
2
|
+
</script>
|
|
3
|
+
|
|
4
|
+
<script>import { setContext } from 'svelte';
|
|
5
|
+
import { twMerge } from 'tailwind-merge';
|
|
6
|
+
import { writable } from 'svelte/store';
|
|
7
|
+
const activeUrlStore = writable('');
|
|
8
|
+
export let activeUrl = '';
|
|
2
9
|
export let asideClass = 'w-64';
|
|
10
|
+
export let nonActiveClass = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
|
|
11
|
+
export let activeClass = 'flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
|
|
12
|
+
setContext('sidebarContext', { activeClass, nonActiveClass, });
|
|
13
|
+
$: {
|
|
14
|
+
activeUrlStore.set(activeUrl);
|
|
15
|
+
}
|
|
16
|
+
setContext('activeUrl', activeUrlStore);
|
|
3
17
|
</script>
|
|
4
18
|
|
|
5
19
|
<aside {...$$restProps} class={twMerge(asideClass, $$props.class)} aria-label="Sidebar">
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
export type SidebarType = {
|
|
3
|
+
activeClass: string;
|
|
4
|
+
nonActiveClass: string;
|
|
5
|
+
};
|
|
2
6
|
declare const __propDef: {
|
|
3
7
|
props: {
|
|
4
8
|
[x: string]: any;
|
|
9
|
+
activeUrl?: string | undefined;
|
|
5
10
|
asideClass?: string | undefined;
|
|
11
|
+
nonActiveClass?: string | undefined;
|
|
12
|
+
activeClass?: string | undefined;
|
|
6
13
|
};
|
|
7
14
|
events: {
|
|
8
15
|
[evt: string]: CustomEvent<any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/Sidebar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;
|
|
1
|
+
{"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/Sidebar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAqCJ,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
|
|
@@ -1,14 +1,27 @@
|
|
|
1
|
-
<script>import {
|
|
2
|
-
|
|
1
|
+
<script>import { getContext } from 'svelte';
|
|
2
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
3
|
export let href = '';
|
|
4
4
|
export let label = '';
|
|
5
5
|
export let spanClass = 'ml-3';
|
|
6
|
-
export let activeClass =
|
|
7
|
-
export let
|
|
6
|
+
export let activeClass = undefined;
|
|
7
|
+
export let nonActiveClass = undefined;
|
|
8
|
+
// export let active: boolean = false;
|
|
9
|
+
const context = getContext('sidebarContext') ?? {};
|
|
10
|
+
const activeUrlStore = getContext('activeUrl');
|
|
11
|
+
let sidebarUrl = '';
|
|
12
|
+
activeUrlStore.subscribe(value => {
|
|
13
|
+
// console.log('value: ', value)
|
|
14
|
+
sidebarUrl = value;
|
|
15
|
+
});
|
|
16
|
+
// console.log('sidbarUrl: ', sidebarUrl)
|
|
17
|
+
// console.log('href: ', href)
|
|
18
|
+
$: active = sidebarUrl ? href === sidebarUrl : false;
|
|
19
|
+
// console.log('active: ', active)
|
|
20
|
+
$: aClass = twMerge(active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
|
|
8
21
|
</script>
|
|
9
22
|
|
|
10
23
|
<li>
|
|
11
|
-
<a {...$$restProps} {href} on:blur on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover class={
|
|
24
|
+
<a {...$$restProps} {href} on:blur on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover class={aClass}>
|
|
12
25
|
<slot name="icon" />
|
|
13
26
|
<span class={spanClass}>{label}</span>
|
|
14
27
|
{#if $$slots.subtext}
|
|
@@ -2,12 +2,11 @@ import { SvelteComponentTyped } from "svelte";
|
|
|
2
2
|
declare const __propDef: {
|
|
3
3
|
props: {
|
|
4
4
|
[x: string]: any;
|
|
5
|
-
aClass?: string | undefined;
|
|
6
5
|
href?: string | undefined;
|
|
7
6
|
label?: string | undefined;
|
|
8
7
|
spanClass?: string | undefined;
|
|
9
8
|
activeClass?: string | undefined;
|
|
10
|
-
|
|
9
|
+
nonActiveClass?: string | undefined;
|
|
11
10
|
};
|
|
12
11
|
events: {
|
|
13
12
|
blur: FocusEvent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/SidebarItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;
|
|
1
|
+
{"version":3,"file":"SidebarItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/SidebarItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgDD,QAAA,MAAM,SAAS;;;;;;sBADqL,MAAM,GAAG,SAAS;yBAAmB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CAC7K,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpeedDial.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/speed-dial/SpeedDial.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,SAAS,GAAG,MAAM,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;CACtB;
|
|
1
|
+
{"version":3,"file":"SpeedDial.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/speed-dial/SpeedDial.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,SAAS,GAAG,MAAM,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;CACtB;AAsEH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
|
package/dist/utils/Popper.svelte
CHANGED
|
@@ -61,16 +61,9 @@ const oppositeSideMap = {
|
|
|
61
61
|
top: 'bottom'
|
|
62
62
|
};
|
|
63
63
|
let middleware;
|
|
64
|
-
$: middleware = [
|
|
65
|
-
dom.flip(),
|
|
66
|
-
dom.shift(),
|
|
67
|
-
dom.offset(+offset),
|
|
68
|
-
arrowEl && dom.arrow({ element: arrowEl, padding: 10 })
|
|
69
|
-
];
|
|
64
|
+
$: middleware = [dom.flip(), dom.shift(), dom.offset(+offset), arrowEl && dom.arrow({ element: arrowEl, padding: 10 })];
|
|
70
65
|
function updatePosition() {
|
|
71
|
-
dom
|
|
72
|
-
.computePosition(referenceEl, floatingEl, { placement, strategy, middleware })
|
|
73
|
-
.then(({ x, y, middlewareData, placement, strategy }) => {
|
|
66
|
+
dom.computePosition(referenceEl, floatingEl, { placement, strategy, middleware }).then(({ x, y, middlewareData, placement, strategy }) => {
|
|
74
67
|
floatingEl.style.position = strategy;
|
|
75
68
|
floatingEl.style.left = yOnly ? '0' : px(x);
|
|
76
69
|
floatingEl.style.top = px(y);
|
|
@@ -122,6 +115,11 @@ onMount(() => {
|
|
|
122
115
|
if (referenceEl === document.body) {
|
|
123
116
|
console.error(`Popup reference not found: '${reference}'`);
|
|
124
117
|
}
|
|
118
|
+
else {
|
|
119
|
+
referenceEl.addEventListener('focusout', hideHandler);
|
|
120
|
+
if (!clickable)
|
|
121
|
+
referenceEl.addEventListener('mouseleave', hideHandler);
|
|
122
|
+
}
|
|
125
123
|
}
|
|
126
124
|
else {
|
|
127
125
|
referenceEl = triggerEls[0];
|
|
@@ -133,6 +131,10 @@ onMount(() => {
|
|
|
133
131
|
element.removeEventListener(name, handler);
|
|
134
132
|
}
|
|
135
133
|
});
|
|
134
|
+
if (referenceEl) {
|
|
135
|
+
referenceEl.addEventListener('focusout', hideHandler);
|
|
136
|
+
referenceEl.addEventListener('mouseleave', hideHandler);
|
|
137
|
+
}
|
|
136
138
|
};
|
|
137
139
|
});
|
|
138
140
|
function optional(pred, func) {
|
|
@@ -155,16 +157,7 @@ function initArrow(node) {
|
|
|
155
157
|
{/if}
|
|
156
158
|
|
|
157
159
|
{#if open && referenceEl}
|
|
158
|
-
<Frame
|
|
159
|
-
use={init}
|
|
160
|
-
options={referenceEl}
|
|
161
|
-
role="tooltip"
|
|
162
|
-
tabindex={activeContent ? -1 : undefined}
|
|
163
|
-
on:focusin={optional(activeContent, showHandler)}
|
|
164
|
-
on:focusout={optional(activeContent, hideHandler)}
|
|
165
|
-
on:mouseenter={optional(activeContent && !clickable, showHandler)}
|
|
166
|
-
on:mouseleave={optional(activeContent && !clickable, hideHandler)}
|
|
167
|
-
{...$$restProps}>
|
|
160
|
+
<Frame use={init} options={referenceEl} role="tooltip" tabindex={activeContent ? -1 : undefined} on:focusin={optional(activeContent, showHandler)} on:focusout={optional(activeContent, hideHandler)} on:mouseenter={optional(activeContent && !clickable, showHandler)} on:mouseleave={optional(activeContent && !clickable, hideHandler)} {...$$restProps}>
|
|
168
161
|
<slot />
|
|
169
162
|
{#if arrow}<div use:initArrow class={arrowClass} />{/if}
|
|
170
163
|
</Frame>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/Popper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAqC,SAAS,EAAQ,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Popper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/Popper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAqC,SAAS,EAAQ,MAAM,kBAAkB,CAAC;AA0M3F,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.43.
|
|
3
|
+
"version": "0.43.3",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"author": {
|
|
@@ -31,19 +31,19 @@
|
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@docsearch/js": "^3.5.1",
|
|
34
|
-
"@playwright/test": "^1.
|
|
34
|
+
"@playwright/test": "^1.37.0",
|
|
35
35
|
"@sveltejs/adapter-vercel": "^3.0.3",
|
|
36
|
-
"@sveltejs/kit": "^1.22.
|
|
36
|
+
"@sveltejs/kit": "^1.22.6",
|
|
37
37
|
"@sveltejs/package": "2.1.0",
|
|
38
38
|
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
|
39
39
|
"@typescript-eslint/parser": "^5.62.0",
|
|
40
|
-
"autoprefixer": "^10.4.
|
|
40
|
+
"autoprefixer": "^10.4.15",
|
|
41
41
|
"createprops": "^0.5.5",
|
|
42
42
|
"esbuild": "0.18.10",
|
|
43
|
-
"eslint": "^8.
|
|
43
|
+
"eslint": "^8.47.0",
|
|
44
44
|
"eslint-config-prettier": "^8.10.0",
|
|
45
45
|
"eslint-plugin-svelte": "^2.32.4",
|
|
46
|
-
"flowbite-svelte-icons": "^0.3.
|
|
46
|
+
"flowbite-svelte-icons": "^0.3.6",
|
|
47
47
|
"mdsvex": "^0.11.0",
|
|
48
48
|
"mdsvexamples": "^0.3.4",
|
|
49
49
|
"postcss": "^8.4.27",
|
|
@@ -52,16 +52,16 @@
|
|
|
52
52
|
"prettier-plugin-svelte": "^2.10.1",
|
|
53
53
|
"prism-themes": "^1.9.0",
|
|
54
54
|
"publint": "^0.1.16",
|
|
55
|
-
"svelte": "^4.
|
|
56
|
-
"svelte-check": "^3.
|
|
55
|
+
"svelte": "^4.2.0",
|
|
56
|
+
"svelte-check": "^3.5.0",
|
|
57
57
|
"svelte-meta-tags": "^2.8.0",
|
|
58
58
|
"svelte-preprocess": "^5.0.4",
|
|
59
|
-
"svelte2tsx": "^0.6.
|
|
59
|
+
"svelte2tsx": "^0.6.20",
|
|
60
60
|
"tailwind-merge": "^1.13.1",
|
|
61
61
|
"tailwindcss": "^3.3.3",
|
|
62
62
|
"tslib": "^2.6.1",
|
|
63
63
|
"typescript": "^5.1.6",
|
|
64
|
-
"vite": "^4.4.
|
|
64
|
+
"vite": "^4.4.9",
|
|
65
65
|
"vitest": "^0.32.4"
|
|
66
66
|
},
|
|
67
67
|
"peerDependencies": {
|