From f530348de4aa5db05eff44c801af6251200372cf Mon Sep 17 00:00:00 2001 From: Wolfgang Müller Date: Fri, 12 Jul 2024 19:54:44 +0200 Subject: build/deps: Update Svelecte to 4.2.2 This includes changes to CSS in order to bring the look & feel in line with the previous version as much as possible. We can now remove the warning about TypeScript types (Svelecte 4 now includes them) and retire the clunky handling of pending options. Additionally, the focus issue has been fixed, allowing users to tab through controls without getting stuck. --- frontend/package-lock.json | 13 +++++--- frontend/package.json | 2 +- frontend/src/app.css | 52 ++++++++++++++++++------------- frontend/src/lib/components/Select.svelte | 22 +------------ 4 files changed, 40 insertions(+), 49 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index f8359e8..7bdc532 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13,7 +13,7 @@ "@urql/svelte": "^4.1.0", "filesize": "^10.1.0", "graphql": "npm:graphql-web-lite@^16.6.0", - "svelecte": "^3.17.3", + "svelecte": "^4.2.2", "svelte-modals": "^1.3.0" }, "devDependencies": { @@ -11755,12 +11755,15 @@ } }, "node_modules/svelecte": { - "version": "3.17.3", - "resolved": "https://registry.npmjs.org/svelecte/-/svelecte-3.17.3.tgz", - "integrity": "sha512-wnvoRxJIFFkm+CmXgjL4R3i/TcuYUIBkE+jDJSBD7AdSOzk1K6u3+nW4zwxaGT29zyZpiZkWeiy7lO62r5F+tg==", + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/svelecte/-/svelecte-4.2.2.tgz", + "integrity": "sha512-cft8l89EhLjAqSj0ZNSxgbmoteW5/f0jaO1BMnsf0I7kZ5ZqPzFOlAp/aWGM/xkIkfBLUcYHN24GzJ4dFipntg==", "license": "MIT", "dependencies": { - "svelte-tiny-virtual-list": "^2.0.0" + "svelte-tiny-virtual-list": "^2.1.0" + }, + "peerDependencies": { + "svelte": "^3.43.0 || ^4.0.0" } }, "node_modules/svelte": { diff --git a/frontend/package.json b/frontend/package.json index be2669b..e64ab99 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -51,7 +51,7 @@ "@urql/svelte": "^4.1.0", "filesize": "^10.1.0", "graphql": "npm:graphql-web-lite@^16.6.0", - "svelecte": "^3.17.3", + "svelecte": "^4.2.2", "svelte-modals": "^1.3.0" } } diff --git a/frontend/src/app.css b/frontend/src/app.css index 13a7883..e1b6ca0 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -148,33 +148,41 @@ } } -.svelecte-control { - --sv-item-color: inherit !important; - --sv-bg: theme(colors.slate.900) !important; - --sv-disabled-bg: theme(colors.slate.900) !important; - --sv-border: 1px solid rgba(0, 0, 0, 0) !important; - --sv-disabled-border-color: rgba(0, 0, 0, 0) !important; - --sv-border-color: theme(colors.slate.600) !important; - --sv-active-border: 1px solid theme(colors.slate.500) !important; - --sv-item-selected-bg: theme(colors.indigo.800) !important; - --sv-item-active-bg: theme(colors.indigo.800) !important; - --sv-highlight-bg: none !important; - --sv-item-btn-bg-hover: theme(colors.rose.900) !important; - --sv-placeholder-color: theme(colors.gray.500) !important; +.svelecte { + --sv-bg: theme(colors.slate.900); + --sv-disabled-bg: theme(colors.slate.900); + --sv-border: 1px solid rgba(0, 0, 0, 0); + --sv-dropdown-active-bg: theme(colors.indigo.800); + --sv-item-selected-bg: theme(colors.indigo.800); + --sv-item-btn-bg-hover: theme(colors.rose.900); + --sv-item-btn-color-hover: theme(colors.rose.100); + --sv-separator-bg: theme(colors.gray.700); + --sv-min-height: 38px; + --sv-item-wrap-padding: 3px 3px 3px 5px; } -.svelecte-control input { - @apply !h-8; +.svelecte.is-focused { + --sv-border: 1px solid theme(colors.slate.500); } -.exclude .svelecte-control { - --sv-border: 1px solid theme('colors.red.900') !important; - --sv-active-border: 1px solid theme('colors.red.700') !important; +.svelecte input::placeholder { + color: theme(colors.gray.500); +} + +.exclude .svelecte { + --sv-border: 1px solid theme(colors.red.900); + --sv-item-selected-bg: theme(colors.rose.800); + --sv-dropdown-active-bg: theme(colors.rose.800); +} + +.sv-item--btn { + border-radius: 0 2px 2px 0 !important; +} - --sv-item-selected-bg: theme(colors.rose.800) !important; - --sv-item-active-bg: theme(colors.rose.800) !important; +.sv-item--wrap { + border-radius: 2px 0 0 2px !important; } -.sv-dropdown { - @apply my-1 !bg-slate-950; +.sv-item--wrap.in-dropdown { + border-radius: 2px !important; } diff --git a/frontend/src/lib/components/Select.svelte b/frontend/src/lib/components/Select.svelte index f7e87a4..dece4a5 100644 --- a/frontend/src/lib/components/Select.svelte +++ b/frontend/src/lib/components/Select.svelte @@ -1,7 +1,5 @@ {#if options !== null && options !== undefined} @@ -39,17 +31,5 @@ bind:value /> {:else} - + {/if} -- cgit v1.2.3-2-gb3c3