From 63d76accfffafdb5d19311b054c78910b4cbb5c4 Mon Sep 17 00:00:00 2001 From: "Federico Pasqua (eisterman)" Date: Wed, 26 Mar 2025 17:54:48 +0100 Subject: [PATCH] First version of Toaster using MeltUI --- package.json | 2 + pnpm-lock.yaml | 105 +++++++++++++++++++++++++++++++ src/lib/Toaster.svelte | 38 +++++++++++ src/routes/+layout.svelte | 8 ++- src/routes/[qrcode]/+page.svelte | 25 ++++++-- svelte.config.js | 26 ++++---- 6 files changed, 181 insertions(+), 23 deletions(-) create mode 100644 src/lib/Toaster.svelte diff --git a/package.json b/package.json index fd20d15..769f21b 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,8 @@ "@eslint/compat": "^1.2.5", "@eslint/js": "^9.18.0", "@iconify/svelte": "^4.2.0", + "@melt-ui/pp": "^0.3.2", + "@melt-ui/svelte": "^0.86.5", "@sveltejs/adapter-auto": "^4.0.0", "@sveltejs/enhanced-img": "^0.4.4", "@sveltejs/kit": "^2.16.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8d785e1..4f3abf2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,6 +30,12 @@ importers: '@iconify/svelte': specifier: ^4.2.0 version: 4.2.0(svelte@5.25.3) + '@melt-ui/pp': + specifier: ^0.3.2 + version: 0.3.2(@melt-ui/svelte@0.86.5(svelte@5.25.3))(svelte@5.25.3) + '@melt-ui/svelte': + specifier: ^0.86.5 + version: 0.86.5(svelte@5.25.3) '@sveltejs/adapter-auto': specifier: ^4.0.0 version: 4.0.0(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.25.3)(vite@6.2.3(jiti@2.4.2)(lightningcss@1.29.2))) @@ -301,6 +307,15 @@ packages: '@exodus/schemasafe@1.3.0': resolution: {integrity: sha512-5Aap/GaRupgNx/feGBwLLTVv8OQFfv3pq2lPRzPg9R+IOBnDgghTGW7l7EuVXOvg5cc/xSAlRW8rBrjIC3Nvqw==} + '@floating-ui/core@1.6.9': + resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==} + + '@floating-ui/dom@1.6.13': + resolution: {integrity: sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==} + + '@floating-ui/utils@0.2.9': + resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==} + '@gcornut/valibot-json-schema@0.31.0': resolution: {integrity: sha512-3xGptCurm23e7nuPQkdrE5rEs1FeTPHhAUsBuwwqG4/YeZLwJOoYZv+fmsppUEfo5y9lzUwNQrNqLS/q7HMc7g==} hasBin: true @@ -455,6 +470,9 @@ packages: resolution: {integrity: sha512-1cbeEzfQLTHTl1Y2qthZWItiZHe0ok0w1rNeANW1IO8GcFCmx44WGt7KnNssiUjPl7YKi4JG9XhwwaVPqNJfyA==} engines: {node: '>=18.0.0'} + '@internationalized/date@3.7.0': + resolution: {integrity: sha512-VJ5WS3fcVx0bejE/YHfbDKR/yawZgKqn/if+oEeLqNwBtPzVB06olkfcnojTmEMX+gTpH+FlQ69SHNitJ8/erQ==} + '@jridgewell/gen-mapping@0.3.8': resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==} engines: {node: '>=6.0.0'} @@ -480,6 +498,17 @@ packages: '@lix-js/server-api-schema@0.1.1': resolution: {integrity: sha512-W1Z7KKOxAQ4Dag9V2wrDevHPh5rPk+icBUsxNfNCNB2tlPrKpba99562vcTCPoT03KXpihEbWutZNujCRtMA+g==} + '@melt-ui/pp@0.3.2': + resolution: {integrity: sha512-xKkPvaIAFinklLXcQOpwZ8YSpqAFxykjWf8Y/fSJQwsixV/0rcFs07hJ49hJjPy5vItvw5Qa0uOjzFUbXzBypQ==} + peerDependencies: + '@melt-ui/svelte': '>= 0.29.0' + svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1 + + '@melt-ui/svelte@0.86.5': + resolution: {integrity: sha512-aaVfc0pxCf6B3ByrzGJ+hB2Sop9wJamw2lNHZlzaolU0Ew1D6O9CbeJElGODT8IbH8/bhI3LcN0nCJRh2ePq+A==} + peerDependencies: + svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.118 + '@nodelib/fs.scandir@2.1.5': resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -670,6 +699,9 @@ packages: svelte: ^5.0.0 vite: ^6.0.0 + '@swc/helpers@0.5.15': + resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==} + '@tailwindcss/node@4.0.15': resolution: {integrity: sha512-IODaJjNmiasfZX3IoS+4Em3iu0fD2HS0/tgrnkYfW4hyUor01Smnr5eY3jc4rRgaTDrJlDmBTHbFO0ETTDaxWA==} @@ -988,6 +1020,10 @@ packages: resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} engines: {node: '>=0.10.0'} + dequal@2.0.3: + resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} + engines: {node: '>=6'} + detect-libc@2.0.3: resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==} engines: {node: '>=8'} @@ -1088,6 +1124,9 @@ packages: estree-walker@2.0.2: resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + estree-walker@3.0.3: + resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} + esutils@2.0.3: resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} engines: {node: '>=0.10.0'} @@ -1139,6 +1178,9 @@ packages: flatted@3.3.3: resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==} + focus-trap@7.6.4: + resolution: {integrity: sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==} + formsnap@2.0.0: resolution: {integrity: sha512-W61elddvdzeBEs10nNvwxQnx/FctJFHBXPk9uluNQAckHo1nuSUvSQGIjtLjTKIbQdQnwEOoxqWrk9tuv0U7hA==} engines: {node: '>=18', pnpm: '>=8.7.0'} @@ -1399,6 +1441,11 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + nanoid@5.1.5: + resolution: {integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==} + engines: {node: ^18 || >=20} + hasBin: true + natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} @@ -1617,6 +1664,9 @@ packages: '@sveltejs/kit': 1.x || 2.x svelte: 3.x || 4.x || >=5.0.0-next.51 + tabbable@6.2.0: + resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} + tailwindcss@4.0.15: resolution: {integrity: sha512-6ZMg+hHdMJpjpeCCFasX7K+U615U9D+7k5/cDK/iRwl6GptF24+I/AbKgOnXhVKePzrEyIXutLv36n4cRsq3Sg==} @@ -1654,6 +1704,9 @@ packages: tslib@2.4.0: resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==} + tslib@2.8.1: + resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} + type-check@0.4.0: resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} engines: {node: '>= 0.8.0'} @@ -1941,6 +1994,17 @@ snapshots: '@exodus/schemasafe@1.3.0': optional: true + '@floating-ui/core@1.6.9': + dependencies: + '@floating-ui/utils': 0.2.9 + + '@floating-ui/dom@1.6.13': + dependencies: + '@floating-ui/core': 1.6.9 + '@floating-ui/utils': 0.2.9 + + '@floating-ui/utils@0.2.9': {} + '@gcornut/valibot-json-schema@0.31.0': dependencies: valibot: 0.31.1 @@ -2079,6 +2143,10 @@ snapshots: transitivePeerDependencies: - babel-plugin-macros + '@internationalized/date@3.7.0': + dependencies: + '@swc/helpers': 0.5.15 + '@jridgewell/gen-mapping@0.3.8': dependencies: '@jridgewell/set-array': 1.2.1 @@ -2110,6 +2178,23 @@ snapshots: '@lix-js/server-api-schema@0.1.1': {} + '@melt-ui/pp@0.3.2(@melt-ui/svelte@0.86.5(svelte@5.25.3))(svelte@5.25.3)': + dependencies: + '@melt-ui/svelte': 0.86.5(svelte@5.25.3) + estree-walker: 3.0.3 + magic-string: 0.30.17 + svelte: 5.25.3 + + '@melt-ui/svelte@0.86.5(svelte@5.25.3)': + dependencies: + '@floating-ui/core': 1.6.9 + '@floating-ui/dom': 1.6.13 + '@internationalized/date': 3.7.0 + dequal: 2.0.3 + focus-trap: 7.6.4 + nanoid: 5.1.5 + svelte: 5.25.3 + '@nodelib/fs.scandir@2.1.5': dependencies: '@nodelib/fs.stat': 2.0.5 @@ -2276,6 +2361,10 @@ snapshots: transitivePeerDependencies: - supports-color + '@swc/helpers@0.5.15': + dependencies: + tslib: 2.8.1 + '@tailwindcss/node@4.0.15': dependencies: enhanced-resolve: 5.18.1 @@ -2588,6 +2677,8 @@ snapshots: deepmerge@4.3.1: {} + dequal@2.0.3: {} + detect-libc@2.0.3: {} devalue@5.1.1: {} @@ -2743,6 +2834,10 @@ snapshots: estree-walker@2.0.2: {} + estree-walker@3.0.3: + dependencies: + '@types/estree': 1.0.7 + esutils@2.0.3: {} fast-check@3.23.2: @@ -2792,6 +2887,10 @@ snapshots: flatted@3.3.3: {} + focus-trap@7.6.4: + dependencies: + tabbable: 6.2.0 + formsnap@2.0.0(svelte@5.25.3)(sveltekit-superforms@2.24.0(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.25.3)(vite@6.2.3(jiti@2.4.2)(lightningcss@1.29.2)))(@types/json-schema@7.0.15)(svelte@5.25.3)(typescript@5.8.2)): dependencies: svelte: 5.25.3 @@ -2989,6 +3088,8 @@ snapshots: nanoid@3.3.11: {} + nanoid@5.1.5: {} + natural-compare@1.4.0: {} normalize-url@8.0.1: @@ -3260,6 +3361,8 @@ snapshots: - '@types/json-schema' - typescript + tabbable@6.2.0: {} + tailwindcss@4.0.15: {} tapable@2.2.1: {} @@ -3288,6 +3391,8 @@ snapshots: tslib@2.4.0: optional: true + tslib@2.8.1: {} + type-check@0.4.0: dependencies: prelude-ls: 1.2.1 diff --git a/src/lib/Toaster.svelte b/src/lib/Toaster.svelte new file mode 100644 index 0000000..ce36790 --- /dev/null +++ b/src/lib/Toaster.svelte @@ -0,0 +1,38 @@ + + +
+ {#each $toasts as { id, data } (id)} +
+
+

+ {data.title} + +

+
+ {data.description} +
+
+ +
+ {/each} +
\ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 3153e95..0d3c72d 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,7 +1,9 @@ {@render children()} + \ No newline at end of file diff --git a/src/routes/[qrcode]/+page.svelte b/src/routes/[qrcode]/+page.svelte index e060cd6..282b3c6 100644 --- a/src/routes/[qrcode]/+page.svelte +++ b/src/routes/[qrcode]/+page.svelte @@ -2,6 +2,7 @@ import { scale } from 'svelte/transition'; import { goto } from "$app/navigation"; import BSlideOverlay from "$lib/BSlideOverlay.svelte"; + import { addToast } from '$lib/Toaster.svelte'; let { data } = $props(); @@ -13,24 +14,36 @@ startingCharge = true; try { // TODO: StartCharge fetch request - const response = await fetch(`/api/public/1/chargecontroller/${data.qrcode}/start_charge/`, { - method: 'POST', - headers: { - 'Accept': 'application/json', - } - }); + // const response = await fetch(`/api/public/1/chargecontroller/${data.qrcode}/start_charge/`, { + // method: 'POST', + // headers: { + // 'Accept': 'application/json', + // } + // }); console.log("nop"); await goto(`/${data.qrcode}/status`); } finally { startingCharge = false; } } + + function test() { + addToast({ + closeDelay: 50000, + data: { + title: 'Success', + description: 'The resource was created!', + color: 'green' + }, + }); + }
+
diff --git a/svelte.config.js b/svelte.config.js index 1295460..5d0058f 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,18 +1,16 @@ +import {preprocessMeltUI, sequence} from "@melt-ui/pp"; import adapter from '@sveltejs/adapter-auto'; -import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; - -/** @type {import('@sveltejs/kit').Config} */ +import {vitePreprocess} from '@sveltejs/vite-plugin-svelte'; +/** @type {import('@sveltejs/kit').Config}*/ const config = { - // Consult https://svelte.dev/docs/kit/integrations - // for more information about preprocessors - preprocess: vitePreprocess(), - - kit: { - // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. - // If your environment is not supported, or you settled on a specific environment, switch out the adapter. - // See https://svelte.dev/docs/kit/adapters for more information about adapters. - adapter: adapter() - } + // Consult https://svelte.dev/docs/kit/integrations + // for more information about preprocessors + preprocess: sequence([vitePreprocess(), preprocessMeltUI()]), + kit: { + // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. + // If your environment is not supported, or you settled on a specific environment, switch out the adapter. + // See https://svelte.dev/docs/kit/adapters for more information about adapters. + adapter: adapter() + } }; - export default config;