swaf/test/assets/views/home_test.svelte

62 lines
1.0 KiB
Svelte
Raw Normal View History

2021-03-24 16:07:50 +01:00
<script>
import {locals} from "../ts/stores.js";
2021-03-24 16:07:50 +01:00
import HomeDep from "./home_dep.svelte";
import Layout from "./layout.svelte";
let count = 5;
2021-03-18 16:22:25 +01:00
2021-03-24 16:07:50 +01:00
function handleClick() {
2021-03-18 16:22:25 +01:00
count++;
}
2021-03-24 16:07:50 +01:00
let depTest;
let mode = ($locals).name === 'locals' ? 'RENDU' : 'PRE RENDU'
2021-03-18 16:22:25 +01:00
</script>
<style lang="scss">
2021-03-24 16:07:50 +01:00
p:last-of-type {
color: blueviolet;
}
.style-test {
p {
color: blue;
}
}
2021-03-18 16:22:25 +01:00
</style>
<h1 id="rendertest">{mode}</h1>
<Layout title="Home">
<svelte:fragment slot="body">
<h1>BONJOUR lol</h1>
</svelte:fragment>
</Layout>
2021-03-24 16:07:50 +01:00
2021-03-18 16:22:25 +01:00
<h1>Hello {count}!</h1>
<button on:click={handleClick}>More hellos!!</button>
<p>Direct access: {$locals.direct}</p>
2021-03-24 16:07:50 +01:00
{#if $locals.route('auth') === '/'}
2021-03-18 16:22:25 +01:00
We're home!
{:else}
We're somewhere else... {$locals.route('auth')}
2021-03-18 16:22:25 +01:00
{/if}
<p>The route to auth is {$locals.route('auth')}</p>
2021-03-18 16:22:25 +01:00
<p>\$locals.notcode</p>
2021-03-18 16:22:25 +01:00
<p>{`{\\$locals.escaped}`}</p>
2021-03-18 16:22:25 +01:00
<div class="style-test">
<p>Blue!</p>
</div>
2021-03-24 16:07:50 +01:00
<HomeDep bind:depTest={depTest}/>
2021-03-24 16:07:50 +01:00
<p>Dependency test: {depTest}</p>