@hearthlog/module-finance 1.1.1 → 1.2.0

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.
Files changed (4) hide show
  1. package/hearthlog.module.json +1 -1
  2. package/package.json +6 -6
  3. package/src/components/finance/BudgetItemDrawer.svelte +4 -2
  4. package/src/components/finance/TransactionDrawer.svelte +10 -22
package/hearthlog.module.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "manifestVersion": 1,
3
3
  "id": "org.stor.finance",
4
4
  "package": "@hearthlog/module-finance",
5
- "version": "1.1.1",
5
+ "version": "1.2.0",
6
6
  "compatibility": {
7
7
  "moduleApi": 1
8
8
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hearthlog/module-finance",
3
- "version": "1.1.1",
3
+ "version": "1.2.0",
4
4
  "license": "AGPL-3.0-only",
5
5
  "type": "module",
6
6
  "exports": {
@@ -19,8 +19,8 @@
19
19
  "kysely": "^0.29.6"
20
20
  },
21
21
  "peerDependencies": {
22
- "@hearthlog/contracts": ">=0.1.0 <0.2.0 || 0.2.0 || 0.3.1 || 0.4.0",
23
- "@hearthlog/sdk": ">=0.1.0 <0.2.0 || 0.2.0 || 0.3.1 || 0.4.0"
22
+ "@hearthlog/contracts": "0.5.0",
23
+ "@hearthlog/sdk": "0.5.0"
24
24
  },
25
25
  "repository": {
26
26
  "type": "git",
@@ -36,9 +36,9 @@
36
36
  "!**/*.test.ts"
37
37
  ],
38
38
  "devDependencies": {
39
- "@hearthlog/contracts": ">=0.1.0 <0.2.0 || 0.2.0 || 0.3.1 || 0.4.0",
40
- "@hearthlog/sdk": ">=0.1.0 <0.2.0 || 0.2.0 || 0.3.1 || 0.4.0",
41
- "@hearthlog/tooling": ">=0.1.0 <0.2.0 || 0.2.0 || 0.3.1 || 0.4.0",
39
+ "@hearthlog/contracts": "0.5.0",
40
+ "@hearthlog/sdk": "0.5.0",
41
+ "@hearthlog/tooling": "0.5.0",
42
42
  "vitest": "^4.1.11"
43
43
  },
44
44
  "scripts": {
package/src/components/finance/BudgetItemDrawer.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script lang="ts">
2
2
  import { Drawer } from "@hearthlog/sdk/ui";
3
- import { Button } from "@hearthlog/sdk/ui";
3
+ import { AmountField, Button, Field } from "@hearthlog/sdk/ui";
4
4
  import { Input } from "@hearthlog/sdk/ui";
5
5
  import { Label } from "@hearthlog/sdk/ui";
6
6
  import { Select, type SelectOption } from "@hearthlog/sdk/ui";
@@ -104,7 +104,9 @@
104
104
  </div>
105
105
  </fieldset>
106
106
  <Label class="block">Name<Input data-testid="budget-item-name" class="mt-1.5" bind:value={form.name} placeholder="Rent, salary, groceries…" /></Label>
107
- <Label class="block">Amount<div class="relative mt-1.5"><Input data-testid="budget-item-amount" type="number" inputmode="decimal" min="0.01" step="0.01" class="pr-12 font-medium" bind:value={form.amount} /><span class="pointer-events-none absolute inset-y-0 right-4 flex items-center text-sm text-[var(--stor-muted-text)]">Kč</span></div><span class="mt-1 block text-xs text-[var(--stor-muted-text)] max-md:hidden">Always enter a positive amount.</span></Label>
107
+ <Field label="Amount" htmlFor="budget-item-amount" hintClass="max-md:hidden" hint="Always enter a positive amount.">
108
+ <AmountField id="budget-item-amount" data-testid="budget-item-amount" directions={false} bind:value={() => form.amount || null, (value) => (form.amount = value ?? 0)} />
109
+ </Field>
108
110
  <Label class="block">Category<Select class="mt-1.5" value={form.category} options={categories} onValueChange={(value) => form.category = value} /></Label>
109
111
  {#if !initialItem}<label class="flex min-h-11 items-center gap-2 text-sm text-stone-700"><input type="checkbox" bind:checked={addAnother} class="h-4 w-4 rounded accent-[var(--stor-action)]" /> Add another after saving</label>{/if}
110
112
  {#if errorMessage}<p class="text-sm text-[var(--stor-negative)]" role="alert">{errorMessage}</p>{/if}
package/src/components/finance/TransactionDrawer.svelte CHANGED
@@ -3,7 +3,7 @@
3
3
  const drawerFormId0 = drawerId + "-0";
4
4
 
5
5
  import { Drawer } from "@hearthlog/sdk/ui";
6
- import { Button } from "@hearthlog/sdk/ui";
6
+ import { AmountField, Button, Field } from "@hearthlog/sdk/ui";
7
7
  import { DatePicker } from "@hearthlog/sdk/ui";
8
8
  import { Input } from "@hearthlog/sdk/ui";
9
9
  import { Label } from "@hearthlog/sdk/ui";
@@ -281,11 +281,6 @@
281
281
  {onClose}
282
282
  >
283
283
  <form id={drawerFormId0} class="flex flex-col gap-4" onsubmit={submit}>
284
- <div class="grid grid-cols-2 rounded-full bg-[var(--stor-surface-muted)] p-1" aria-label="Transaction direction">
285
- <button type="button" class="h-10 rounded-full text-sm font-semibold transition {form.direction === 'expense' ? 'bg-[var(--stor-action)] text-[var(--stor-action-text)] shadow-[var(--stor-shadow-sm)]' : 'text-[var(--stor-muted-text)]'}" aria-pressed={form.direction === "expense"} onclick={() => (form.direction = "expense")}>Expense</button>
286
- <button type="button" class="h-10 rounded-full text-sm font-semibold transition {form.direction === 'income' ? 'bg-[var(--stor-action)] text-[var(--stor-action-text)] shadow-[var(--stor-shadow-sm)]' : 'text-[var(--stor-muted-text)]'}" aria-pressed={form.direction === "income"} onclick={() => (form.direction = "income")}>Income</button>
287
- </div>
288
-
289
284
  <Label class="block max-md:order-2">
290
285
  Name
291
286
  <Input
@@ -299,22 +294,15 @@
299
294
  />
300
295
  </Label>
301
296
 
302
- <Label class="block max-md:order-1">
303
- <span class="max-md:sr-only">Amount</span>
304
- <div class="relative mt-1.5 max-md:mt-0">
305
- <Input
306
- data-testid="transaction-amount"
307
- type="number"
308
- inputmode="decimal"
309
- step="0.01"
310
- bind:value={form.amount}
311
- class="pr-12 font-medium max-md:!h-16 max-md:!rounded-none max-md:!border-0 max-md:!border-b-2 max-md:!border-[var(--stor-action)] max-md:!bg-transparent max-md:!px-0 max-md:!text-[40px] max-md:!font-semibold max-md:!shadow-none max-md:!ring-0 max-md:!outline-none"
312
- onblur={() => void suggest()}
313
- />
314
- <span class="pointer-events-none absolute inset-y-0 right-4 flex items-center text-sm text-[var(--stor-muted-text)]">Kč</span>
315
- </div>
316
- <span class="mt-1 block text-[11px] leading-4 text-[var(--stor-muted-text)] max-md:hidden">Enter a positive amount; Expense or Income sets the direction.</span>
317
- </Label>
297
+ <Field class="max-md:order-1" label="Amount" htmlFor="{drawerId}-amount" labelClass="max-md:sr-only" hintClass="max-md:hidden" hint="Type 1200+84 to add. Expense or Income sets the direction.">
298
+ <AmountField
299
+ id="{drawerId}-amount"
300
+ data-testid="transaction-amount"
301
+ bind:value={() => form.amount || null, (value) => (form.amount = value ?? 0)}
302
+ bind:direction={form.direction}
303
+ onblur={() => void suggest()}
304
+ />
305
+ </Field>
318
306
 
319
307
  <div class="grid gap-3 max-md:order-3 sm:grid-cols-2">
320
308
  <div class="block">