Skip to content

Commit e790fbc

Browse files
committed
Some upgrades
1 parent 29edcef commit e790fbc

File tree

8 files changed

+164
-17
lines changed

8 files changed

+164
-17
lines changed

src/lib/components/Inputs/Dropdown.svelte

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
export let appearance: "subtle" | "primary" | "warning" | "danger" | "discover" = "subtle";
33
export let iconbefore: string | undefined = undefined;
4-
export let actions: { label: string; onClick?: () => void; value?: string | number | object | null }[] = [];
4+
export let actions: { label: string; onClick?: () => void; value?: string | number | object | null; iconbefore?: string | null }[] = [];
55
export let alwaysshowslot: boolean = false;
66
77
// Bindable selected value (kan string, number, object zijn)
@@ -81,6 +81,7 @@
8181
<slot />
8282
{:else if value !== null}
8383
{#if actions.find((a) => a.value === value)?.label}
84+
<span class="material-symbols-outlined dropdown-arrow" aria-hidden="true">{actions.find((a) => a.value === value)?.iconbefore}</span>
8485
{actions.find((a) => a.value === value)?.label}
8586
{:else}
8687
{value}
@@ -97,7 +98,7 @@
9798
{#each actions as action, i (action.label)}
9899
<li role="none">
99100
<button role="menuitem" tabindex={i === 0 ? 0 : -1} bind:this={menuItems[i]} on:click={() => handleAction(action, action.label)}>
100-
{action.label}
101+
<span class="material-symbols-outlined dropdown-arrow" aria-hidden="true">{action.iconbefore}</span> {action.label}
101102
</button>
102103
</li>
103104
{/each}
@@ -129,9 +130,11 @@
129130
}
130131
131132
.dropdown-toggle {
133+
width: fit-content(100%);
132134
min-width: 120px;
133135
justify-content: center;
134136
gap: 0.4rem;
137+
white-space: nowrap;
135138
}
136139
137140
.icon {
@@ -230,9 +233,16 @@
230233
padding: 0.25rem 0;
231234
z-index: 1000;
232235
min-width: max-content;
236+
overflow-x: scroll;
237+
max-height: 15rem;
233238
}
234239
235240
.dropdown li button {
241+
display: inline-flex;
242+
flex-direction: row;
243+
align-items: center;
244+
gap: var(--token-space-2);
245+
vertical-align: middle;
236246
background: none;
237247
border: none;
238248
width: 100%;
@@ -243,6 +253,7 @@
243253
font-size: 1rem;
244254
line-height: 1;
245255
user-select: none;
256+
white-space: nowrap;
246257
}
247258
248259
.dropdown li button:hover {
Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<script lang="ts">
2+
export let id: string = "textarea-" + Math.random().toString(36).substring(2, 8);
3+
export let label: string;
4+
export let placeholder: string = "";
5+
export let value: string = "";
6+
export let disabled: boolean = false;
7+
export let invalid: boolean = false;
8+
export let invalidMessage: string = "Invalid";
9+
export let required: boolean = false;
10+
export let onEnter: (event: KeyboardEvent) => void = () => {};
11+
export let width: string = "100%";
12+
export let resize: "none" | "vertical" | "horizontal" | "both" = "none";
13+
export let autoGrow: boolean = true;
14+
export let maxLength: number | null = null; // optional character limit
15+
16+
let textareaEl: HTMLTextAreaElement;
17+
18+
function adjustHeight() {
19+
if (autoGrow && textareaEl) {
20+
textareaEl.style.height = "auto";
21+
textareaEl.style.height = textareaEl.scrollHeight + "px";
22+
}
23+
}
24+
</script>
25+
26+
<div class="textarea-root" style="width: {width};">
27+
<label for={id}>
28+
{label}
29+
{#if required}
30+
<span aria-hidden="true" style="color: red;">*</span>
31+
{/if}
32+
</label>
33+
34+
<!-- svelte-ignore element_invalid_self_closing_tag -->
35+
<textarea
36+
bind:this={textareaEl}
37+
{id}
38+
{placeholder}
39+
{disabled}
40+
{required}
41+
maxlength={maxLength}
42+
style="resize: {resize}; overflow: hidden;"
43+
aria-required={required}
44+
aria-invalid={invalid}
45+
aria-describedby={(invalid ? id + "-error" : undefined)}
46+
bind:value
47+
on:input={adjustHeight}
48+
on:keydown={(event) => {
49+
if (event.key === "Enter" && onEnter) {
50+
onEnter(event);
51+
}
52+
}}
53+
/>
54+
55+
<!-- Error message or placeholder -->
56+
{#if invalid}
57+
<div id={id + "-error"} class="error-message">
58+
<span class="material-symbols-outlined" aria-hidden="true">error</span>
59+
{invalidMessage}
60+
</div>
61+
{:else}
62+
<div class="error-placeholder"></div>
63+
{/if}
64+
65+
<!-- Character counter if maxLength is set -->
66+
{#if maxLength !== null && maxLength == value.length}
67+
<div class="max-char-counter">{value.length}/{maxLength}</div>
68+
{:else if maxLength !== null}
69+
<div class="char-counter">{value.length}/{maxLength}</div>
70+
{/if}
71+
</div>
72+
73+
<style>
74+
.textarea-root {
75+
display: flex;
76+
flex-direction: column;
77+
gap: 0.25rem;
78+
}
79+
80+
label {
81+
font-size: 0.875rem;
82+
font-weight: 500;
83+
}
84+
85+
textarea {
86+
all: unset;
87+
border: 1px solid transparent;
88+
border-radius: 8px;
89+
cursor: text;
90+
padding: 0.5rem;
91+
font-family: var(--token-font-main);
92+
background-color: var(--token-color-surface-raised-normal);
93+
transition: border-color 0.2s;
94+
min-height: 2.5rem;
95+
}
96+
97+
textarea:focus {
98+
border-color: var(--token-color-primary);
99+
outline: none;
100+
}
101+
102+
textarea[aria-invalid="true"] {
103+
border-color: var(--token-color-text-danger);
104+
}
105+
106+
.error-message {
107+
display: flex;
108+
align-items: center;
109+
color: var(--token-color-text-danger);
110+
gap: var(--token-space-1);
111+
min-height: 1.4rem;
112+
width: 100%;
113+
white-space: normal;
114+
overflow-wrap: break-word;
115+
vertical-align: middle;
116+
}
117+
118+
.error-placeholder {
119+
min-height: 1.4rem;
120+
}
121+
122+
.char-counter {
123+
font-size: 0.75rem;
124+
color: var(--token-color-text-secondary);
125+
text-align: right;
126+
}
127+
128+
.max-char-counter {
129+
font-size: 0.75rem;
130+
color: var(--token-color-text-danger);
131+
text-align: right;
132+
}
133+
</style>
134+
135+
<svelte:window on:load={adjustHeight} />

src/lib/components/Inputs/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export { default as Dropdown } from "$lib/components/Inputs/Dropdown.svelte";
22
export { default as IconDropdown } from "$lib/components/Inputs/IconDropdown.svelte";
3+
export { default as TextArea } from "$lib/components/Inputs/TextArea.svelte";
34
export { default as TextField } from "$lib/components/Inputs/TextField.svelte";
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
export let icon: string;
33
export let size: string = "1rem";
4-
export let color: string = "var(--token-color-text)";
4+
export let color: string = "var(--token-color-text-default-normal)";
55
</script>
66

77
<span style="color: {color}; font-size: {size};" class="icon material-symbols-outlined" translate="no" aria-hidden="true">{icon}</span>

src/lib/components/Themes/ThemeMenu.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,10 @@
4848
iconbefore="format_paint"
4949
alwaysshowslot
5050
actions={[
51-
{ label: "System (auto)", onClick: () => setTheme("system") },
52-
{ label: "Light", onClick: () => setTheme("light") },
53-
{ label: "Dark", onClick: () => setTheme("dark") },
54-
{ label: "Highcontrast", onClick: () => setTheme("highcontrast") }
51+
{ label: "System (auto)", onClick: () => setTheme("system"), iconbefore: "routine" },
52+
{ label: "Light", onClick: () => setTheme("light"), iconbefore: "light_mode"},
53+
{ label: "Dark", onClick: () => setTheme("dark"), iconbefore: "dark_mode"},
54+
{ label: "Highcontrast", onClick: () => setTheme("highcontrast"), iconbefore: "contrast"}
5555
]}
5656
>
5757
Theme

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: "b06772b",
8-
fullCommitHash: "b06772b633e8e8dc4ffb27828fd0c801157d0325",
9-
commitDate: "2025-08-11T00:23:59+02:00",
7+
commitHash: "29edcef",
8+
fullCommitHash: "29edcef289a4725f20f6834ccf7907759c1fd322",
9+
commitDate: "2025-08-11T11:01:17+02:00",
1010
branch: "main",
11-
commitUrl: "https://github.com/davidnet-net/svelte-ui/commit/b06772b633e8e8dc4ffb27828fd0c801157d0325",
11+
commitUrl: "https://github.com/davidnet-net/svelte-ui/commit/29edcef289a4725f20f6834ccf7907759c1fd322",
1212
repoUrl: "https://github.com/davidnet-net/svelte-ui"
1313
};

themes/dev/dark.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -125,8 +125,8 @@
125125
"6": "2rem"
126126
},
127127
"font": {
128-
"mono": "JetBrains Mono",
129-
"main": "Inter",
130-
"heading": "Merriweather Sans"
128+
"mono": "JetBrains Mono, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
129+
"main": "Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
130+
"heading": "Merriweather Sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"
131131
}
132132
}

themes/gen/dark.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
--token-space-4: 1rem;
7373
--token-space-5: 1.5rem;
7474
--token-space-6: 2rem;
75-
--token-font-mono: JetBrains Mono;
76-
--token-font-main: Inter;
77-
--token-font-heading: Merriweather Sans;
75+
--token-font-mono: JetBrains Mono, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
76+
--token-font-main: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
77+
--token-font-heading: Merriweather Sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
7878
}

0 commit comments

Comments
 (0)