feat: implement base text manager and view components

2026-02-05 18:20:05 +05:00
parent f1f37aec9e
commit a5cea0ab57
8 changed files with 281 additions and 11 deletions
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import Button from "$components/ui/Button.svelte";
+  import IconCross from "$components/ui/Icons/IconCross.svelte";
+
+  interface Props {
+    text: string;
+    ondelete: () => void;
+  }
+
+  let { text = $bindable(), ondelete }: Props = $props();
+</script>
+
+<div class="text-item">
+  <input type="text" bind:value={text} />
+  <Button icon={IconCross} type="danger" on:click={ondelete} />
+</div>
+
+<style>
+  .text-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    transition: var(--transition);
+  }
+
+  .text-item:hover {
+    border-color: var(--border-hover);
+  }
+
+  .text-item input {
+    flex: 1;
+    padding: 6px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 14px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    transition: var(--transition);
+    font-family: inherit;
+  }
+
+  .text-item input:focus {
+    outline: none;
+    border-color: var(--accent-primary);
+  }
+</style>
@@ -0,0 +1,39 @@
+<script lang="ts">
+  interface Props {
+    text: string;
+    onenter: () => void;
+  }
+
+  let { text = $bindable(), onenter }: Props = $props();
+
+  function handleKeyboard(event: KeyboardEvent) {
+    if (event.key === "Enter") {
+      onenter();
+    }
+  }
+</script>
+
+<input bind:value={text} class="text-input" type="text" placeholder="Введите текст..." onkeydown={handleKeyboard} />
+
+<style>
+  .text-input {
+    flex: 1;
+    padding: 10px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    font-size: 14px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    transition: var(--transition);
+    font-family: inherit;
+  }
+
+  .text-input:focus {
+    outline: none;
+    border-color: var(--accent-primary);
+  }
+
+  .text-input::placeholder {
+    color: var(--text-tertiary);
+  }
+</style>
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import Card from "$components/layout/Card.svelte";
+  import InputGroup from "$components/layout/InputGroup.svelte";
+  import Button from "$components/ui/Button.svelte";
+  import IconPlus from "$components/ui/Icons/IconPlus.svelte";
+  import { textsState } from "$states/texts.state.svelte";
+  import TextInlineEdit from "./TextInlineEdit.svelte";
+  import TextInput from "./TextInput.svelte";
+
+  let text: string = $state("");
+
+  function addText() {
+    console.log(text);
+    text = "";
+  }
+
+  function deleteText(id: number) {}
+</script>
+
+<Card title="Тексты панелей">
+  <InputGroup>
+    <TextInput bind:text onenter={addText} />
+    <Button icon={IconPlus} onclick={addText} />
+  </InputGroup>
+  <div class="texts-list">
+    {#each textsState.texts as { text, id } (id)}
+      <TextInlineEdit {text} ondelete={() => deleteText(id)} />
+    {/each}
+  </div>
+</Card>
+
+<style>
+  /* Texts List */
+  .texts-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+</style>