src/components/SetMemo.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<script lang="ts">
  import { focus } from "$lib/utils";

  let { submit = $bindable(), settingMemo, setMemo, memo = $bindable(), toggleMemo, t } = $props();
</script>

{#if settingMemo}
  <div class="fixed inset-0 bg-base-100/90 overflow-y-auto h-full w-full z-50">
    <div class="relative mx-auto mt-24 p-12 max-w-xl shadow-lg rounded-md bg-base-100 space-y-5">
      <form onsubmit={setMemo} class="space-y-5">
        <input type="text" use:focus placeholder={t("invoice.memo")} bind:value={memo} />
        <div class="w-full flex flex-wrap gap-2">
          <button bind:this={submit} type="submit" onclick={setMemo} class="btn btn-accent !w-auto grow">
            <div class="my-auto">{t("payments.ok")}</div>
          </button>
          <button type="button" class="btn !w-auto grow" onclick={toggleMemo} onkeydown={toggleMemo}>
            <div class="my-auto">{t("payments.cancel")}</div>
          </button>
        </div>
      </form>
    </div>
  </div>
{/if}