fix: resolve texts add and delete flow

This commit is contained in:
2026-02-05 18:35:13 +05:00
parent a5cea0ab57
commit 1b8a035708
5 changed files with 14 additions and 10 deletions
-1
View File
@@ -26,7 +26,6 @@
</header> </header>
<style> <style>
/* Header */
.header { .header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white; color: white;
+3 -2
View File
@@ -4,15 +4,16 @@
interface Props { interface Props {
text: string; text: string;
id: number;
ondelete: () => void; ondelete: () => void;
} }
let { text = $bindable(), ondelete }: Props = $props(); let { text = $bindable(), id, ondelete }: Props = $props();
</script> </script>
<div class="text-item"> <div class="text-item">
<input type="text" bind:value={text} /> <input type="text" bind:value={text} />
<Button icon={IconCross} type="danger" on:click={ondelete} /> <Button icon={IconCross} type="danger" onclick={() => ondelete(id)} />
</div> </div>
<style> <style>
+8 -4
View File
@@ -10,11 +10,16 @@
let text: string = $state(""); let text: string = $state("");
function addText() { function addText() {
console.log(text); let trimmed = text.trim();
if (trimmed.length !== 0) {
textsState.addText(trimmed);
}
text = ""; text = "";
} }
function deleteText(id: number) {} function deleteText(id: number) {
textsState.removeText(id);
}
</script> </script>
<Card title="Тексты панелей"> <Card title="Тексты панелей">
@@ -24,13 +29,12 @@
</InputGroup> </InputGroup>
<div class="texts-list"> <div class="texts-list">
{#each textsState.texts as { text, id } (id)} {#each textsState.texts as { text, id } (id)}
<TextInlineEdit {text} ondelete={() => deleteText(id)} /> <TextInlineEdit {id} {text} ondelete={() => deleteText(id)} />
{/each} {/each}
</div> </div>
</Card> </Card>
<style> <style>
/* Texts List */
.texts-list { .texts-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
+2 -2
View File
@@ -4,13 +4,13 @@
interface Props { interface Props {
icon: Component; icon: Component;
onclick: MouseEventHandler<HTMLButtonElement>;
disabled?: boolean; disabled?: boolean;
label?: string; label?: string;
type?: "primary" | "secondary" | "danger" | "outline"; type?: "primary" | "secondary" | "danger" | "outline";
onclick: MouseEventHandler<HTMLButtonElement>;
} }
let { icon: Icon, disabled = false, label, type = "primary", onclick }: Props = $props(); let { icon: Icon, onclick, disabled = false, label = "", type = "primary" }: Props = $props();
</script> </script>
<button <button
+1 -1
View File
@@ -24,7 +24,7 @@ function createTextsState(): TextsState {
nextId++; nextId++;
}, },
removeText(id: number) { removeText(id: number) {
texts.filter((textItem) => textItem.id === id); texts = texts.filter((textItem) => textItem.id !== id);
}, },
}; };
} }