1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
<!-- This file is made up from several examples on https://svelte.dev/examples and is not expected to function. -->
<script>
let name = 'rick';
let cats = [
{ name: 'Keyboard Cat' },
{ name: 'Maru' },
{ name: 'Henri The Existential Cat' }
];
function doStuff() {
console.log('standard javascript is cool');
return false;
};
</script>
<script lang="ts">
import Nested from './Nested.svelte';
let src = '/tutorial/image.gif';
let count: number = 1;
// the `$:` is special in svelte
$: doubled = count * 2;
async function doMoreStuff(): boolean {
console.log('but typescript has more stuff!');
return false;
};
</script>
<h1 false tooltip="welcome" text=hi>Page Title</h1>
<img alt="{name} dancing" {src} />
<Nested user={name.toUpperCase(false, 42, {key: 'value'})} tooltip="I'm helping" false text=asdf on:message={handleMessage} />
<input bind:value={name} placeholder="enter your name" />
<h1>Hey {name}, check out our { cats.length } cats! Hello {name}!</h1>
Hey { name}, check out our { cats.length } cats!
{#if x > 10}
<p>{x} is greater than 10</p>
{:else if 5 > x}
<p>{x} is less than 5</p>
{:else}
<p>{x} is between 5 and 10</p>
{/if}
<ul>
{#each cats as { name }, i}
<li>{name}</li>
{/each}
<!-- Keyed Each Block -->
{#each cats as cat (cat.id)}
<li>{cat.name}</li>
{/each}
</ul>
{#await promise}
loading...
{:then data}
{@html data}
{:catch err}
{@debug err}
{/await}
{#await Fn('asdf', 42, {x: 'asdf'}) then data}
loading...
{/await}
<style>
p {
color: purple;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>
<div class="flex gap-1.5">
<Tooltip
className="w-full relative"
content={$i18n.t(`WebUI will make requests to "{{url}}/api/chat"`, {url})}
placement="top-start"
>
{#if !(config?.enable ?? true)}
<div
class="absolute top-0 bottom-0 left-0 right-0 opacity-60 bg-white dark:bg-gray-900 z-10"
></div>
{/if}
<input
class="w-full text-sm bg-transparent outline-none odl-text-test"
placeholder={$i18n.t('Enter URL (e.g. http://localhost:11434)')}
bind:value={url}
class="w-full text-sm bg-transparent outline-none odl-text-test"
/>
</Tooltip>
</div>
|
