Alexander Bocken
5c8605c690
All checks were successful
CI / update (push) Successful in 2m8s
Migrated all components and routes from Svelte 4 to Svelte 5 syntax:
- Converted export let → $props() with generic type syntax
- Replaced createEventDispatcher → callback props
- Migrated $: reactive statements → $derived() and $effect()
- Updated two-way bindings with $bindable()
- Fixed TypeScript syntax: added lang="ts" to script tags
- Converted inline type annotations to generic parameter syntax
- Updated deprecated event directives to Svelte 5 syntax:
- on:click → onclick
- on:submit → onsubmit
- on:change → onchange
- Converted deprecated <slot> elements → {@render children()}
- Updated slot props to Snippet types
- Fixed season/icon selector components with {#snippet} blocks
- Fixed non-reactive state by converting let → $state()
- Fixed infinite loop in EnhancedBalance by converting $effect → $derived
- Fixed Chart.js integration by converting $state proxies to plain arrays
- Updated cospend dashboard and payment pages with proper reactivity
- Migrated 20+ route files from export let data → $props()
- Fixed TypeScript type annotations in page components
- Updated reactive statements in error and cospend routes
- Removed invalid onchange attribute from Toggle component
- Fixed modal ID isolation in CreateIngredientList/CreateStepList
- Fixed dark mode button visibility in TranslationApproval
- Build now succeeds with zero deprecation warnings
All functionality tested and working. No breaking changes to user experience.
60 lines
1.5 KiB
Svelte
60 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
let { onclick } = $props<{ onclick?: () => void }>();
|
|
</script>
|
|
|
|
<button class="counter-button" {onclick} aria-label="Nächstes Ave Maria">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 4V2.21c0-.45-.54-.67-.85-.35l-2.8 2.79c-.2.2-.2.51 0 .71l2.79 2.79c.32.31.86.09.86-.36V6c3.31 0 6 2.69 6 6 0 .79-.15 1.56-.44 2.25-.15.36-.04.77.23 1.04.51.51 1.37.33 1.64-.34.37-.91.57-1.91.57-2.95 0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-.79.15-1.56.44-2.25.15-.36.04-.77-.23-1.04-.51-.51-1.37-.33-1.64.34C4.2 9.96 4 10.96 4 12c0 4.42 3.58 8 8 8v1.79c0 .45.54.67.85.35l2.79-2.79c.2-.2.2-.51 0-.71l-2.79-2.79c-.31-.31-.85-.09-.85.36V18z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<style>
|
|
.counter-button {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-radius: 50%;
|
|
background: var(--nord1);
|
|
border: 2px solid var(--nord9);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
@media(prefers-color-scheme: light) {
|
|
.counter-button {
|
|
background: var(--nord5);
|
|
border-color: var(--nord10);
|
|
}
|
|
}
|
|
|
|
.counter-button:hover {
|
|
background: var(--nord2);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
@media(prefers-color-scheme: light) {
|
|
.counter-button:hover {
|
|
background: var(--nord4);
|
|
}
|
|
}
|
|
|
|
.counter-button svg {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
fill: var(--nord9);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
@media(prefers-color-scheme: light) {
|
|
.counter-button svg {
|
|
fill: var(--nord10);
|
|
}
|
|
}
|
|
|
|
.counter-button:hover svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
</style>
|