mirror of
https://github.com/woutdp/live_svelte
synced 2026-05-24 09:28:21 +00:00
bfdae993c2
* add an exmaple with a static svelte component in a live view parent with list * adjusted the styling of example * chore: added more e2e tests * chore: preserve client state * chore: added tests for simple counter * chore: added live lights e2e tests * chore: added sigil e2e tests * chore: added plus/minus tests * chore: added live plus/minus tests * chore: added hybrid plus/minus tests * chore: added static color demo tests * fix: handle correctly v sigil props * chore: added tests to log list example * chore: added tests to breaking news example * chore: added chat tests * chore: added tests for live json * chore: added tests for simple slots * chore: added tests for dynamic slots. added missing test ids * chore: add tests to client loading * chore: addes tests to otp ecto example * chore: prepare for 0.17.4 release
35 lines
1.8 KiB
Svelte
35 lines
1.8 KiB
Svelte
<script>
|
|
/** @type {{number: any, initialClientValue?: number}} */
|
|
let { number, initialClientValue = 1 } = $props()
|
|
let other = $state(initialClientValue)
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Simple Counter</title>
|
|
</svelte:head>
|
|
|
|
<div class="min-h-[50vh] flex flex-col justify-center items-center p-6 bg-base-200/40">
|
|
<h1 class="text-2xl font-semibold text-base-content/80 mb-8 tracking-tight">Simple Counter</h1>
|
|
|
|
<div class="flex flex-wrap justify-center gap-8">
|
|
<!-- Server counter card -->
|
|
<div class="card bg-base-100 shadow-lg border border-base-300/50 w-52 md:min-w-md">
|
|
<div class="card-body items-center text-center gap-4 py-6">
|
|
<span class="badge badge-outline badge-sm font-medium text-base-content/70">Server</span>
|
|
<span class="text-4xl font-bold tabular-nums text-brand">{number}</span>
|
|
<button class="btn btn-sm bg-brand text-white border-0 hover:opacity-90" phx-click="increment"> +1 </button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Client counter card -->
|
|
<div class="card bg-base-100 shadow-lg border border-base-300/50 w-52 md:min-w-md">
|
|
<div class="card-body items-center text-center gap-4 py-6">
|
|
<span class="badge badge-outline badge-sm font-medium text-base-content/70">Client</span>
|
|
<span data-testid="simple-counter-client-value" class="text-4xl font-bold tabular-nums text-success">{other}</span>
|
|
<button data-testid="simple-counter-client-increment" class="btn btn-sm btn-success border-0" onclick={() => (other += 1)}> +1 </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mt-8 text-sm text-base-content/50 max-w-sm text-center">Server state updates via LiveView; client state updates locally.</p>
|
|
</div>
|