brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor zo zod and felte

Browse Source
This commit is contained in:
Christian Beutel
2024-12-30 19:52:44 +01:00
parent 75c94a3ce4
commit 871481a84e
45 changed files with 659 additions and 1040 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/lib/components/base/datepicker.svelte
View File

@@ -1,8 +1,10 @@
<script lang="ts">
import { _ } from "svelte-i18n";
export let name: string = "";
export let value: string | Date = "";
export let label: string = "";
export let error: string = "";
export let error: string | string[] | null = "";
</script>
<div>
@@ -15,15 +17,17 @@
<input
{name}
class="bg-input-background border border-input-border rounded-md p-3 transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0 w-full"
class:border-red-400={error.length > 0}
class:bg-red-50={error.length > 0}
class:border-red-400={(error?.length ?? 0) > 0}
class:bg-input-background-error={(error?.length ?? 0) > 0}
type="date"
bind:value
on:change
/>
</div>
<span class="textfield-error text-xs text-red-400">
{error}
</span>
{#if error}
<span class="textfield-error text-xs text-red-400">
{error instanceof Array ? $_(error[0]) : error}
</span>
{/if}
</div>

2
web/src/lib/components/base/select.svelte
View File

@@ -9,8 +9,8 @@
import { createEventDispatcher } from "svelte";
export let name: string = "";
export let value: any;
export let items: SelectItem[] = [];
export let value: any = items.at(0)?.value ?? "";
export let label: string = "";
export let disabled: boolean = false;

16
web/src/lib/components/base/text_field.svelte
View File

@@ -1,10 +1,12 @@
<script lang="ts">
import { _ } from "svelte-i18n";
export let name: string = "";
export let value: string | number = "";
export let placeholder: string = "";
export let disabled: boolean = false;
export let label: string = "";
export let error: string = "";
export let error: string | string[] | null = "";
export let icon: string = "";
export let extraClasses: string = "";
export let type: "text" | "password" | "search" = "text";
@@ -29,8 +31,8 @@
<input
{name}
class="bg-input-background border border-input-border rounded-md p-3 transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0 w-full {extraClasses}"
class:border-red-400={error.length > 0}
class:bg-input-background-error={error.length > 0}
class:border-red-400={(error?.length ?? 0) > 0}
class:bg-input-background-error={(error?.length ?? 0) > 0}
class:text-gray-500={disabled}
{disabled}
{autocomplete}
@@ -44,7 +46,9 @@
/>
</div>
<span class="textfield-error text-xs text-red-400">
{error}
</span>
{#if error}
<span class="textfield-error text-xs text-red-400">
{error instanceof Array ? $_(error[0]) : error}
</span>
{/if}
</div>

16
web/src/lib/components/base/textarea.svelte
View File

@@ -1,10 +1,12 @@
<script lang="ts">
import { _ } from "svelte-i18n";
export let name: string = "";
export let value: string | number = "";
export let placeholder: string = "";
export let rows: number = 3;
export let label: string = "";
export let error: string = "";
export let error: string | string[] | null = "";
export let extraClasses: string = "";
</script>
@@ -19,12 +21,14 @@
class="bg-input-background border border-input-border rounded-md p-3 resize-none transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0 w-full {extraClasses}"
{rows}
{placeholder}
class:border-red-400={error.length > 0}
class:bg-red-50={error.length > 0}
class:border-red-400={(error?.length ?? 0) > 0}
class:bg-input-background-error={(error?.length ?? 0) > 0}
bind:value
on:change
/>
<span class="textfield-error text-xs text-red-400">
{error}
</span>
{#if error}
<span class="textfield-error text-xs text-red-400">
{error instanceof Array ? $_(error[0]) : error}
</span>
{/if}
</div>