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
43 lines
1.4 KiB
Svelte
43 lines
1.4 KiB
Svelte
<script>
|
|
import {run} from "svelte/legacy"
|
|
import {tweened} from "svelte/motion"
|
|
import {cubicOut} from "svelte/easing"
|
|
|
|
/** @type {{ brightness?: number }} */
|
|
let {brightness = 0} = $props()
|
|
|
|
const progress = tweened(0, {
|
|
duration: 400,
|
|
easing: cubicOut,
|
|
})
|
|
|
|
const updateProgress = b => progress.set(b / 100)
|
|
|
|
run(() => {
|
|
updateProgress(brightness)
|
|
})
|
|
</script>
|
|
|
|
<div class="card bg-base-100 shadow-md border border-base-300/50 overflow-hidden md:min-w-md">
|
|
<div class="card-body gap-3 p-4">
|
|
<span class="badge badge-ghost badge-sm font-medium text-base-content/70 w-fit"> Brightness </span>
|
|
<progress class="progress progress-brand border-0 w-full rounded-full h-3 bg-base-200" value={$progress} max="1"></progress>
|
|
<div class="flex items-center justify-center min-h-10">
|
|
<span class="font-mono text-lg font-semibold tabular-nums {brightness > 0 ? 'text-brand' : 'text-base-content/50'}" data-testid="light-brightness-value">
|
|
{brightness > 0 ? `${brightness}%` : "OFF"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.progress-brand {
|
|
color: var(--color-brand);
|
|
}
|
|
.progress-brand::-webkit-progress-value {
|
|
background-color: var(--color-brand);
|
|
}
|
|
.progress-brand::-moz-progress-bar {
|
|
background-color: var(--color-brand);
|
|
}
|
|
</style>
|