@kahitsan/ksui 0.39.0 → 0.39.1
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kahitsan/ksui",
|
|
3
|
-
"version": "0.39.
|
|
3
|
+
"version": "0.39.1",
|
|
4
4
|
"description": "ksui is a standalone set of SolidJS UI components for KahitSan/Hilinga and any SolidJS app. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with only solid-js externalized; it depends on nothing but solid-js + lucide-solid and injects its own CSS.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./src/index.ts",
|
|
@@ -299,7 +299,10 @@ export interface TransactionFormProps {
|
|
|
299
299
|
}
|
|
300
300
|
|
|
301
301
|
export default function TransactionForm(props: TransactionFormProps) {
|
|
302
|
-
injectCSS("ksui-transaction-form-compact", `.ks-transaction-compact{min-height:0;font-family:var(--ks-font-body,
|
|
302
|
+
injectCSS("ksui-transaction-form-compact", `.ks-transaction-compact{min-height:0;font-family:var(--ks-font-body,"Inter", system-ui, sans-serif)}.ks-transaction-compact-body{display:flex;flex-direction:column;min-height:0;overflow:auto;padding:1rem 1.25rem 1.5rem;gap:1rem}.ks-transaction-compact-body>div{width:100%;flex:0 0 auto}.ks-transaction-compact-body input[data-testid="transactions-form-amount"]{min-height:3.5rem;text-align:center;font-size:2rem}.ks-transaction-compact-body input[data-testid="transactions-form-description"]{background:transparent;border-color:var(--ks-border)}.ks-transaction-compact-body>div:has(input[data-testid="transactions-form-amount"])>label,.ks-transaction-compact-body>div:has(input[data-testid="transactions-form-description"])>label{display:none}.ks-transaction-compact-body>div:has(button[aria-label="Today"])>label{font-size:0;text-transform:uppercase;letter-spacing:.12em}.ks-transaction-compact-body>div:has(button[aria-label="Today"])>label:after{content:"TRANSACTION DATE";font-size:10px}.ks-transaction-compact-body [role="radiogroup"]{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.ks-transaction-compact-body [role="radiogroup"]::-webkit-scrollbar{display:none}.ks-transaction-compact-body [role="radio"]{min-width:8rem}.ks-transaction-compact-footer{flex:0 0 auto}.ks-transaction-compact:not(.ks-transaction-compact-details) .ks-transaction-compact-body>div:has(button[data-testid="form-payee-picker"]),.ks-transaction-compact:not(.ks-transaction-compact-details) .ks-transaction-compact-body>div:has([data-testid="subcategory-select"]),.ks-transaction-compact:not(.ks-transaction-compact-details) .ks-transaction-compact-body>div:has(textarea),.ks-transaction-compact:not(.ks-transaction-compact-details) .ks-transaction-compact-body>div:has(button[aria-label="Add attachment"]){display:none}
|
|
303
|
+
.ks-transaction-compact:not(.ks-transaction-compact-details) .ks-transaction-compact-secondary{display:none;}
|
|
304
|
+
.ks-transaction-compact .ks-transaction-compact-body{display:flex;flex-direction:column;min-height:0;overflow:auto;}
|
|
305
|
+
`);
|
|
303
306
|
const compact = () => props.layout === "compact";
|
|
304
307
|
const catConfig = () =>
|
|
305
308
|
CATEGORY_FORM[props.category] || CATEGORY_FORM.expense;
|
|
@@ -426,7 +429,7 @@ export default function TransactionForm(props: TransactionFormProps) {
|
|
|
426
429
|
return (
|
|
427
430
|
<div
|
|
428
431
|
class="relative flex flex-col flex-1 min-h-0"
|
|
429
|
-
classList={{ "ks-transaction-compact": compact() }}
|
|
432
|
+
classList={{ "ks-transaction-compact": compact(), "ks-transaction-compact-details": compact() && viewMode() === "advanced" }}
|
|
430
433
|
onDragEnter={handleDragEnter}
|
|
431
434
|
onDragLeave={handleDragLeave}
|
|
432
435
|
onDragOver={handleDragOver}
|
|
@@ -648,7 +651,7 @@ export default function TransactionForm(props: TransactionFormProps) {
|
|
|
648
651
|
</FormField>
|
|
649
652
|
|
|
650
653
|
<Show when={catConfig().showPayee}>
|
|
651
|
-
<div class="grid grid-cols-2 gap-4">
|
|
654
|
+
<div class="grid grid-cols-2 gap-4" classList={{ "ks-transaction-compact-secondary": compact() }}>
|
|
652
655
|
<FormField label={catConfig().payeeLabel!}>
|
|
653
656
|
<ComboBox<PayeeOption>
|
|
654
657
|
testIdPrefix="form-payee-picker"
|
|
@@ -696,7 +699,8 @@ export default function TransactionForm(props: TransactionFormProps) {
|
|
|
696
699
|
</div>
|
|
697
700
|
</Show>
|
|
698
701
|
<Show when={!catConfig().showPayee}>
|
|
699
|
-
<
|
|
702
|
+
<div classList={{ "ks-transaction-compact-secondary": compact() }}>
|
|
703
|
+
<FormField label="Reference #">
|
|
700
704
|
<input
|
|
701
705
|
type="text"
|
|
702
706
|
value={props.refNumber}
|
|
@@ -704,11 +708,13 @@ export default function TransactionForm(props: TransactionFormProps) {
|
|
|
704
708
|
class="w-full bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)] border border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] px-3 py-3 text-sm text-[var(--ks-fg,#ffffff)] ks-hud-clip-button focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)]"
|
|
705
709
|
placeholder="Reference number (optional)"
|
|
706
710
|
/>
|
|
707
|
-
|
|
711
|
+
</FormField>
|
|
712
|
+
</div>
|
|
708
713
|
</Show>
|
|
709
714
|
|
|
710
715
|
<Show when={subcategoryAppliesTo() !== null}>
|
|
711
|
-
<
|
|
716
|
+
<div classList={{ "ks-transaction-compact-secondary": compact() }}>
|
|
717
|
+
<FormField label="Category">
|
|
712
718
|
<Show
|
|
713
719
|
when={subcategoryOptionsReady()}
|
|
714
720
|
fallback={
|
|
@@ -754,11 +760,13 @@ export default function TransactionForm(props: TransactionFormProps) {
|
|
|
754
760
|
<p class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] mt-0.5">
|
|
755
761
|
Optional. Used for tax-prep classification.
|
|
756
762
|
</p>
|
|
757
|
-
|
|
763
|
+
</FormField>
|
|
764
|
+
</div>
|
|
758
765
|
</Show>
|
|
759
766
|
|
|
760
767
|
<Show when={props.category === "payable"}>
|
|
761
|
-
<
|
|
768
|
+
<div classList={{ "ks-transaction-compact-secondary": compact() }}>
|
|
769
|
+
<TransactionPayableFields
|
|
762
770
|
payableKind={props.payableKind}
|
|
763
771
|
setPayableKind={props.setPayableKind}
|
|
764
772
|
dueDate={props.dueDate}
|
|
@@ -767,7 +775,8 @@ export default function TransactionForm(props: TransactionFormProps) {
|
|
|
767
775
|
setChequeNumber={props.setChequeNumber}
|
|
768
776
|
pdcStatus={props.pdcStatus}
|
|
769
777
|
setPdcStatus={props.setPdcStatus}
|
|
770
|
-
|
|
778
|
+
/>
|
|
779
|
+
</div>
|
|
771
780
|
</Show>
|
|
772
781
|
|
|
773
782
|
<TransactionAccountFields
|
|
@@ -787,6 +796,7 @@ export default function TransactionForm(props: TransactionFormProps) {
|
|
|
787
796
|
allowTransferFee={props.allowTransferFee}
|
|
788
797
|
/>
|
|
789
798
|
|
|
799
|
+
<div classList={{ "ks-transaction-compact-secondary": compact() }}>
|
|
790
800
|
<FormField label="Notes">
|
|
791
801
|
<MentionTextarea
|
|
792
802
|
value={props.notes}
|
|
@@ -797,6 +807,7 @@ export default function TransactionForm(props: TransactionFormProps) {
|
|
|
797
807
|
ariaLabel="Notes"
|
|
798
808
|
/>
|
|
799
809
|
</FormField>
|
|
810
|
+
</div>
|
|
800
811
|
|
|
801
812
|
<div>
|
|
802
813
|
<div class="flex items-center gap-1 mb-2 text-xs text-[var(--ks-fg-subtle,#71717a)]">
|