@x33025/sveltely 0.0.28 → 0.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ChipInput.svelte +60 -2
- package/dist/style.css +3 -0
- package/package.json +1 -1
|
@@ -20,6 +20,9 @@
|
|
|
20
20
|
let inputValue = $state('');
|
|
21
21
|
let showInput = $state(false);
|
|
22
22
|
let inputEl = $state<HTMLInputElement | null>(null);
|
|
23
|
+
let editingTag = $state<string | null>(null);
|
|
24
|
+
let editingValue = $state('');
|
|
25
|
+
let editingEl = $state<HTMLInputElement | null>(null);
|
|
23
26
|
const selectionEnabled = $derived(selection !== undefined);
|
|
24
27
|
|
|
25
28
|
const addTag = (rawValue: string) => {
|
|
@@ -64,6 +67,48 @@
|
|
|
64
67
|
inputEl?.focus();
|
|
65
68
|
};
|
|
66
69
|
|
|
70
|
+
const startEditing = async (tag: string) => {
|
|
71
|
+
editingTag = tag;
|
|
72
|
+
editingValue = tag;
|
|
73
|
+
await tick();
|
|
74
|
+
editingEl?.focus();
|
|
75
|
+
editingEl?.select();
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
const commitEdit = () => {
|
|
79
|
+
if (!editingTag) return;
|
|
80
|
+
|
|
81
|
+
const previous = editingTag;
|
|
82
|
+
const next = editingValue.trim();
|
|
83
|
+
editingTag = null;
|
|
84
|
+
|
|
85
|
+
if (!next || next === previous) return;
|
|
86
|
+
if (tags.includes(next)) return;
|
|
87
|
+
|
|
88
|
+
tags = tags.map((tag) => (tag === previous ? next : tag));
|
|
89
|
+
if (selection?.includes(previous)) {
|
|
90
|
+
selection = selection.map((tag) => (tag === previous ? next : tag));
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
const cancelEdit = () => {
|
|
95
|
+
editingTag = null;
|
|
96
|
+
editingValue = '';
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
const onEditKeydown = (event: KeyboardEvent) => {
|
|
100
|
+
if (event.key === 'Enter') {
|
|
101
|
+
event.preventDefault();
|
|
102
|
+
commitEdit();
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
if (event.key === 'Escape') {
|
|
107
|
+
event.preventDefault();
|
|
108
|
+
cancelEdit();
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
|
|
67
112
|
const onBlur = () => {
|
|
68
113
|
if (!inputValue.trim()) {
|
|
69
114
|
showInput = false;
|
|
@@ -82,18 +127,31 @@
|
|
|
82
127
|
<div class="w-full max-w-lg">
|
|
83
128
|
<div class="tag-row flex flex-wrap items-center">
|
|
84
129
|
{#each tags as tag (tag)}
|
|
85
|
-
{#if
|
|
130
|
+
{#if editingTag === tag}
|
|
131
|
+
<input
|
|
132
|
+
bind:this={editingEl}
|
|
133
|
+
bind:value={editingValue}
|
|
134
|
+
class="tag-surface tag-input-field min-w-20 outline-none"
|
|
135
|
+
onblur={commitEdit}
|
|
136
|
+
onkeydown={onEditKeydown}
|
|
137
|
+
/>
|
|
138
|
+
{:else if selectionEnabled}
|
|
86
139
|
<button
|
|
87
140
|
type="button"
|
|
88
141
|
class="tag-surface inline-flex items-center gap-2"
|
|
89
142
|
class:tag-selected={selection?.includes(tag)}
|
|
90
143
|
onclick={() => toggleSelected(tag)}
|
|
144
|
+
ondblclick={() => startEditing(tag)}
|
|
91
145
|
aria-pressed={selection?.includes(tag)}
|
|
92
146
|
>
|
|
93
147
|
{tag}
|
|
94
148
|
</button>
|
|
95
149
|
{:else}
|
|
96
|
-
<
|
|
150
|
+
<button
|
|
151
|
+
type="button"
|
|
152
|
+
class="tag-surface inline-flex items-center gap-2"
|
|
153
|
+
ondblclick={() => startEditing(tag)}>{tag}</button
|
|
154
|
+
>
|
|
97
155
|
{/if}
|
|
98
156
|
{/each}
|
|
99
157
|
|
package/dist/style.css
CHANGED