flowbite-svelte 0.43.2 → 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/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/BottomNavItem.svelte +8 -2
- package/dist/bottom-nav/BottomNavItem.svelte.d.ts +1 -2
- package/dist/bottom-nav/BottomNavItem.svelte.d.ts.map +1 -1
- package/dist/dropdowns/Dropdown.svelte +7 -0
- package/dist/dropdowns/Dropdown.svelte.d.ts +1 -0
- package/dist/dropdowns/Dropdown.svelte.d.ts.map +1 -1
- package/dist/dropdowns/DropdownItem.svelte +11 -2
- package/dist/dropdowns/DropdownItem.svelte.d.ts +0 -1
- package/dist/dropdowns/DropdownItem.svelte.d.ts.map +1 -1
- 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/package.json +1 -1
|
@@ -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"}
|
|
@@ -3,10 +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
|
|
7
|
-
export let href;
|
|
6
|
+
export let href = '';
|
|
8
7
|
const navType = getContext('navType');
|
|
9
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;
|
|
10
15
|
const btnClasses = {
|
|
11
16
|
default: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
|
|
12
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',
|
|
@@ -33,6 +38,7 @@ const appBtnClasses = {
|
|
|
33
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'
|
|
34
39
|
};
|
|
35
40
|
let btnClass;
|
|
41
|
+
// let active = navUrl ? href === navUrl : false;
|
|
36
42
|
$: btnClass = twMerge(btnClasses[navType], appBtnClasses[appBtnPosition], active && (activeClass ?? context.activeClass), $$props.btnClass);
|
|
37
43
|
let spanClass;
|
|
38
44
|
$: spanClass = twMerge(spanClasses[navType], active && (activeClass ?? context.activeClass), $$props.spanClass);
|
|
@@ -5,8 +5,7 @@ declare const __propDef: {
|
|
|
5
5
|
btnName?: string | undefined;
|
|
6
6
|
appBtnPosition?: "left" | "middle" | "right" | undefined;
|
|
7
7
|
activeClass?: string | undefined;
|
|
8
|
-
|
|
9
|
-
href: string;
|
|
8
|
+
href?: string | undefined;
|
|
10
9
|
};
|
|
11
10
|
events: {
|
|
12
11
|
click: MouseEvent;
|
|
@@ -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"}
|
|
@@ -4,6 +4,9 @@
|
|
|
4
4
|
<script>import { twMerge } from 'tailwind-merge';
|
|
5
5
|
import Popper from '../utils/Popper.svelte';
|
|
6
6
|
import { setContext } from 'svelte';
|
|
7
|
+
import { writable } from 'svelte/store';
|
|
8
|
+
const activeUrlStore = writable('');
|
|
9
|
+
export let activeUrl = '';
|
|
7
10
|
export let open = false;
|
|
8
11
|
export let containerClass = 'divide-y z-50';
|
|
9
12
|
export let headerClass = 'py-1 overflow-hidden rounded-t-lg';
|
|
@@ -11,6 +14,10 @@ export let footerClass = 'py-1 overflow-hidden rounded-b-lg';
|
|
|
11
14
|
export let activeClass = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
|
|
12
15
|
let activeCls = twMerge(activeClass, $$props.classActive);
|
|
13
16
|
setContext('DropdownType', { activeClass: activeCls });
|
|
17
|
+
$: {
|
|
18
|
+
activeUrlStore.set(activeUrl);
|
|
19
|
+
}
|
|
20
|
+
setContext('activeUrl', activeUrlStore);
|
|
14
21
|
let containerCls = twMerge(containerClass, $$props.classContainer);
|
|
15
22
|
let headerCls = twMerge(headerClass, $$props.classHeader);
|
|
16
23
|
let ulCls = twMerge('py-1', $$props.class);
|
|
@@ -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;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;
|
|
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"}
|
|
@@ -4,10 +4,19 @@ import { getContext } from 'svelte';
|
|
|
4
4
|
export let defaultClass = 'font-medium py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
|
|
5
5
|
export let href = undefined;
|
|
6
6
|
export let activeClass = undefined;
|
|
7
|
-
export let active = false;
|
|
7
|
+
// export let active: boolean = false;
|
|
8
8
|
const context = getContext('DropdownType') ?? {};
|
|
9
|
-
|
|
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;
|
|
10
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)
|
|
11
20
|
let wrap = true;
|
|
12
21
|
function init(node) {
|
|
13
22
|
wrap = node.parentElement?.tagName === 'UL';
|
|
@@ -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"}
|
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"}
|