diff options
| -rwxr-xr-x | bun.lockb | bin | 120802 -> 127908 bytes | |||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/payments/[...page]/+page.svelte | 21 | ||||
| -rw-r--r-- | tailwind.config.cjs | 28 |
4 files changed, 42 insertions, 9 deletions
| Binary files differ diff --git a/package.json b/package.json index 2e686149..72a3452b 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@sveltejs/adapter-node": "^2.0.0", "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0", + "@tailwindcss/forms": "^0.5.7", "@tailwindcss/line-clamp": "^0.4.2", "@zerodevx/svelte-toast": "^0.7.2", "autoprefixer": "^10.4.13", @@ -28,6 +29,7 @@ "qrcode-base64": "^1.0.1", "rollup": "^2.79.1", "screenfull": "^6.0.2", + "stwui": "^0.21.2-next", "svelte": "^4.0.0", "svelte-adapter-bun": "^0.5.1", "svelte-dnd-action": "^0.9.39", diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte index 90f2ddbc..8c88f321 100644 --- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte +++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte @@ -9,9 +9,11 @@ import { page } from "$app/stores"; import { differenceInDays, getUnixTime, sub } from "date-fns"; import { goto, invalidate } from "$app/navigation"; + import { DatePicker } from "stwui"; export let data; + let calendar; let { start, end, user, rates, payments } = data; let change = ({ target: { value } }) => goto(value); @@ -144,6 +146,13 @@ </div> </div> + <div data-theme="mytheme"> + <DatePicker name="date" label="Date" showTime minuteStep={15}> + <DatePicker.Label slot="label">Date</DatePicker.Label> + <DatePicker.Trailing slot="trailing" data={calendar} /> + </DatePicker> + </div> + <div class="flex flex-wrap justify-center mb-8"> {#if pages.length > 1} {#each pages as _, i} @@ -256,7 +265,7 @@ {$t("payments.tips")} {/if} </span> - <span></span> + <span /> {#each Object.keys(totals) as c} {@const total = totals[c]["fiat"]} @@ -265,12 +274,10 @@ {@const gain = (pv * 100) / total - 100} <span class="text-lg"><b>{f(total, c)}</b></span> <span class="text-lg"> - - {#if payments.some((p) => p.tip > 0)} - <b>{f(tips, c)}</b> - {/if} - <span></span> - + {#if payments.some((p) => p.tip > 0)} + <b>{f(tips, c)}</b> + {/if} + <span /> </span> {/each} </div> diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 746f4ca6..4ab8945f 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,6 +1,26 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./src/**/*.{html,js,svelte}"], + content: [ + "./src/**/*.{html,js,svelte}", + "./node_modules/stwui/**/*.{svelte,js,ts,html}", + ], + stwui: { + themes: [ + "light", + "dark", + { + mytheme: { + primary: "#2563eb", + default: "#333", + danger: "#dc2626", + surface: "#ffffff", + background: "#F0F2F5", + border: "#E8E9EC", + hover: "#000000", + }, + }, + ], + }, theme: { extend: { colors: { @@ -12,6 +32,10 @@ module.exports = { }, }, }, - plugins: [require("tailwind-scrollbar")], + plugins: [ + require("tailwind-scrollbar"), + require("@tailwindcss/forms"), + require("stwui/plugin"), + ], safelist: ["w-16", "h-16", "w-20", "h-20", "w-24", "h-24"], }; |