diff --git a/demo/package-lock.json b/demo/package-lock.json index 4c4b6ba..90a9127 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -8,6 +8,7 @@ "name": "demo", "version": "0.0.1", "dependencies": { + "@fortawesome/fontawesome-free": "^7.1.0", "@wjfe/n-savant": "^0.12.0", "@wjfe/n-savant-sk": "file:../wjfe-n-savant-sk-0.1.0.tgz" }, @@ -438,6 +439,15 @@ "node": ">=18" } }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-7.1.0.tgz", + "integrity": "sha512-+WxNld5ZCJHvPQCr/GnzCTVREyStrAJjisUPtUxG5ngDA8TMlPnKp6dddlTpai4+1GNmltAeuk1hJEkBohwZYA==", + "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)", + "engines": { + "node": ">=6" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.13", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", diff --git a/demo/package.json b/demo/package.json index 4431e23..113acab 100644 --- a/demo/package.json +++ b/demo/package.json @@ -22,6 +22,7 @@ "vite": "^7.0.4" }, "dependencies": { + "@fortawesome/fontawesome-free": "^7.1.0", "@wjfe/n-savant": "^0.12.0", "@wjfe/n-savant-sk": "file:../wjfe-n-savant-sk-0.1.0.tgz" } diff --git a/demo/src/lib/NavBar.svelte b/demo/src/lib/NavBar.svelte index 780c4d1..9eb3e82 100644 --- a/demo/src/lib/NavBar.svelte +++ b/demo/src/lib/NavBar.svelte @@ -1,37 +1,68 @@ - - - + + + + Logo + + +

@wjfe/n-savant-sk Demo

+ + + + + Home + Start Demo + {#snippet end()} + + Sveltekit Path: {location.url.pathname} + + + + + + + + {/snippet} + + diff --git a/demo/src/lib/ThemePicker.svelte b/demo/src/lib/ThemePicker.svelte new file mode 100644 index 0000000..3e3987c --- /dev/null +++ b/demo/src/lib/ThemePicker.svelte @@ -0,0 +1,28 @@ + + + + + \ No newline at end of file diff --git a/demo/src/lib/bulma/NavBar/Brand.svelte b/demo/src/lib/bulma/NavBar/Brand.svelte new file mode 100644 index 0000000..61d9d08 --- /dev/null +++ b/demo/src/lib/bulma/NavBar/Brand.svelte @@ -0,0 +1,15 @@ + + +
+ {@render children?.()} +
diff --git a/demo/src/lib/bulma/NavBar/Burger.svelte b/demo/src/lib/bulma/NavBar/Burger.svelte new file mode 100644 index 0000000..39c1c34 --- /dev/null +++ b/demo/src/lib/bulma/NavBar/Burger.svelte @@ -0,0 +1,24 @@ + + + diff --git a/demo/src/lib/bulma/NavBar/Item.svelte b/demo/src/lib/bulma/NavBar/Item.svelte new file mode 100644 index 0000000..7591f51 --- /dev/null +++ b/demo/src/lib/bulma/NavBar/Item.svelte @@ -0,0 +1,15 @@ + + + + {@render children?.()} + diff --git a/demo/src/lib/bulma/NavBar/Link.svelte b/demo/src/lib/bulma/NavBar/Link.svelte new file mode 100644 index 0000000..ecdfbb8 --- /dev/null +++ b/demo/src/lib/bulma/NavBar/Link.svelte @@ -0,0 +1,15 @@ + + + + {@render children?.()} + diff --git a/demo/src/lib/bulma/NavBar/Menu.svelte b/demo/src/lib/bulma/NavBar/Menu.svelte new file mode 100644 index 0000000..eda8122 --- /dev/null +++ b/demo/src/lib/bulma/NavBar/Menu.svelte @@ -0,0 +1,26 @@ + + +
+
+ {@render children?.()} +
+ {#if end} +
+ {@render end()} +
+ {/if} +
diff --git a/demo/src/lib/bulma/NavBar/Root.svelte b/demo/src/lib/bulma/NavBar/Root.svelte new file mode 100644 index 0000000..e4f4653 --- /dev/null +++ b/demo/src/lib/bulma/NavBar/Root.svelte @@ -0,0 +1,28 @@ + + + diff --git a/demo/src/lib/bulma/NavBar/index.ts b/demo/src/lib/bulma/NavBar/index.ts new file mode 100644 index 0000000..f7802b8 --- /dev/null +++ b/demo/src/lib/bulma/NavBar/index.ts @@ -0,0 +1,15 @@ +import Root from "./Root.svelte" +import Brand from "./Brand.svelte" +import Burger from "./Burger.svelte" +import Item from "./Item.svelte" +import Menu from "./Menu.svelte" +import Link from "./Link.svelte" + +export const NavBar = { + Root, + Brand, + Burger, + Menu, + Item, + Link +}; diff --git a/demo/src/lib/demo/Demo.svelte b/demo/src/lib/demo/Demo.svelte index 2385b38..7e6f34e 100644 --- a/demo/src/lib/demo/Demo.svelte +++ b/demo/src/lib/demo/Demo.svelte @@ -19,8 +19,11 @@
- Path (Sveltekit): {location.url.pathname} - Hash path: {hashPath} +   + + Hash path: + {typeof hash === 'string' ? `${hash}=` : ''}{hashPath || '/'} +
diff --git a/demo/src/lib/isSkRouteActive.ts b/demo/src/lib/isSkRouteActive.ts new file mode 100644 index 0000000..c70a652 --- /dev/null +++ b/demo/src/lib/isSkRouteActive.ts @@ -0,0 +1,5 @@ +import { page } from "$app/state"; + +export function isSkRouteActive(route: string): boolean { + return page.url.pathname === route; +} diff --git a/demo/src/lib/state/theme.svelte.ts b/demo/src/lib/state/theme.svelte.ts index c6785ae..9c1b773 100644 --- a/demo/src/lib/state/theme.svelte.ts +++ b/demo/src/lib/state/theme.svelte.ts @@ -1,5 +1,38 @@ +const themeOptions = ['system', 'light', 'dark'] as const; + +type ThemeIndex = 0 | 1 | 2; + +function indexOfTheme(theme: 'system' | 'light' | 'dark'): ThemeIndex { + const index = themeOptions.indexOf(theme); + if (index === -1) { + throw new Error(`Invalid theme: ${theme}`); + } + return index as ThemeIndex; +} + export class ThemeState { - current: 'light' | 'dark' | 'system' = $state('system'); + #current: ThemeIndex = $state(0); + + get current() { + return themeOptions[this.#current]; + } + set current(value: 'light' | 'dark' | 'system') { + this.#current = indexOfTheme(value); + this.#updateTheme(); + } + + #updateTheme() { + if (this.#current === 0) { + document.documentElement.removeAttribute('data-theme'); + return; + } + document.documentElement.setAttribute('data-theme', themeOptions[this.#current]); + } + + nextTheme() { + this.#current = (this.#current + 1) % themeOptions.length as ThemeIndex; + this.#updateTheme(); + } } export default new ThemeState(); diff --git a/demo/src/routes/+layout.svelte b/demo/src/routes/+layout.svelte index 0a73d1f..6e62504 100644 --- a/demo/src/routes/+layout.svelte +++ b/demo/src/routes/+layout.svelte @@ -1,8 +1,8 @@