Skip to content

Commit ec87e51

Browse files
committed
Some textfield changes
1 parent 7708191 commit ec87e51

File tree

2 files changed

+33
-19
lines changed

2 files changed

+33
-19
lines changed

src/lib/components/Inputs/TextField.svelte

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,42 @@
22
export let id: string = "input-" + Math.random().toString(36).substring(2, 8);
33
export let label: string;
44
export let placeholder: string;
5-
export let type: "text" | "email" | "password" | "url" | "search" = "text";
5+
export let type: "text" | "email" | "password" | "url" | "search" | "username" = "text";
66
export let value: string = "";
77
export let disabled: boolean = false;
88
export let invalid: boolean = false;
99
export let invalidMessage: string = "Invalid";
10+
export let required: boolean = false;
1011
export let onEnter: (event: KeyboardEvent) => void = () => {};
1112
</script>
1213

1314
<div class="input-root">
14-
<label for={id}>{label}</label>
15+
<label for={id}>
16+
{label}
17+
{#if required}
18+
<span aria-hidden="true" style="color: red;">*</span>
19+
{/if}
20+
</label>
1521
<input
1622
{id}
1723
{type}
1824
{placeholder}
1925
{disabled}
20-
bind:value
26+
{required}
27+
aria-required={required}
2128
aria-invalid={invalid}
2229
aria-describedby={invalid ? id + "-error" : undefined}
23-
on:keypress={(event) => {
30+
bind:value
31+
on:keydown={(event) => {
2432
if (event.key === "Enter" && onEnter) {
2533
onEnter(event);
2634
}
2735
}}
2836
/>
2937
{#if invalid}
3038
<div id={id + "-error"} class="error-message">
31-
<p>
32-
<span class="material-symbols-outlined" aria-hidden="true">error</span>
33-
{invalidMessage}
34-
</p>
39+
<span class="material-symbols-outlined" aria-hidden="true">error</span>
40+
{invalidMessage}
3541
</div>
3642
{/if}
3743
</div>
@@ -50,26 +56,34 @@
5056
5157
input {
5258
all: unset;
59+
border: 1px solid transparent;
5360
border-radius: 8px;
5461
cursor: text;
5562
padding: 0.5rem;
5663
font-family: var(--token-font-main);
5764
background-color: var(--token-color-surface-raised-normal);
65+
transition: border-color 0.2s;
5866
}
5967
60-
.error-message {
61-
color: var(--token-color-text-danger);
68+
input:focus {
69+
border-color: var(--token-color-primary);
70+
outline: none;
6271
}
6372
64-
p {
65-
font-size: 1rem;
66-
vertical-align: middle;
73+
input[aria-invalid="true"] {
74+
border-color: var(--token-color-text-danger);
75+
}
76+
77+
.error-message {
6778
display: flex;
79+
flex-direction: row;
6880
align-items: center;
69-
gap: 0.25rem;
81+
color: var(--token-color-text-danger);
82+
gap: var(--token-space-1);
83+
vertical-align: middle;
7084
}
7185
72-
span {
86+
span.material-symbols-outlined {
7387
font-size: 1.2rem;
7488
}
7589
</style>

src/lib/metadata.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ export const metadata = {
44
version: "1.9.1",
55
packageName: "@davidnet/svelte-ui",
66
npmUrl: "https://www.npmjs.com/package/@davidnet/svelte-ui",
7-
commitHash: "159cb4e",
8-
fullCommitHash: "159cb4edfe5abf8b6f2b52aa96891625203bc7d0",
9-
commitDate: "2025-08-02T13:56:12+02:00",
7+
commitHash: "7708191",
8+
fullCommitHash: "7708191dc087cb3ee86badf1dce7b674c8a05696",
9+
commitDate: "2025-08-06T19:23:08+02:00",
1010
branch: "main",
11-
commitUrl: "https://github.com/davidnet-net/svelte-ui/commit/159cb4edfe5abf8b6f2b52aa96891625203bc7d0",
11+
commitUrl: "https://github.com/davidnet-net/svelte-ui/commit/7708191dc087cb3ee86badf1dce7b674c8a05696",
1212
repoUrl: "https://github.com/davidnet-net/svelte-ui"
1313
};

0 commit comments

Comments
 (0)