summaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
-rw-r--r--frontend/package-lock.json13
-rw-r--r--frontend/package.json2
-rw-r--r--frontend/src/app.css52
-rw-r--r--frontend/src/lib/components/Select.svelte22
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}