diff options
| -rw-r--r-- | frontend/package-lock.json | 13 | ||||
| -rw-r--r-- | frontend/package.json | 2 | ||||
| -rw-r--r-- | frontend/src/app.css | 52 | ||||
| -rw-r--r-- | 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 @@ <script lang="ts"> import type { ListItem } from '$lib/Utils'; - - // @ts-expect-error Svelecte 3 does not have types, and 4 (which does) is pending stabilization import Svelecte from 'svelecte'; let inputId: string; @@ -17,12 +15,6 @@ export let value: Value; export { inputId as id, valueAsObject as object, multiple as multi }; - - function optionsPlaceholder(from: Value): Item[] { - if (from === undefined || from === null) return []; - - return Array.isArray(from) ? from : [from]; - } </script> {#if options !== null && options !== undefined} @@ -39,17 +31,5 @@ bind:value /> {:else} - <Svelecte - virtualList - valueField="id" - labelField="name" - disabled - options={optionsPlaceholder(value)} - {multiple} - {clearable} - {inputId} - {valueAsObject} - {placeholder} - {value} - /> + <Svelecte {placeholder} /> {/if} |