fix: resolve texts add and delete flow
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user