summaryrefslogtreecommitdiffstatshomepage
path: root/frontend
diff options
context:
space:
mode:
authorWolfgang Müller2024-07-12 19:54:44 +0200
committerWolfgang Müller2024-07-22 14:08:03 +0200
commitf530348de4aa5db05eff44c801af6251200372cf (patch)
tree0e280dbfec4e8d342b915928bf1d1fa00f0ac0e9 /frontend
parent2fe2b3cf8627f97eb32aba5548034630f1187109 (diff)
downloadhircine-f530348de4aa5db05eff44c801af6251200372cf.tar.gz
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.
Diffstat (limited to '')
-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}