Skip to content

Commit 705aec3

Browse files
endorpersandendorpersand
authored
Merge pull request #47 from gtmun/skeleton-3-migration
Tailwind 4 & Skeleton 3 migration
2 parents 6df89b9 + 5dafbc2 commit 705aec3

59 files changed

Lines changed: 4243 additions & 3876 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package-lock.json‎

Lines changed: 1467 additions & 1775 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,30 +11,30 @@
1111
},
1212
"devDependencies": {
1313
"@iconify-json/mdi": "^1.2.3",
14-
"@skeletonlabs/skeleton": "^2.11.0",
15-
"@skeletonlabs/tw-plugin": "^0.4.1",
14+
"@skeletonlabs/skeleton": "^3.1.3",
15+
"@skeletonlabs/skeleton-svelte": "^1.2.2",
1616
"@sveltejs/adapter-static": "^3.0.8",
17-
"@sveltejs/kit": "^2.20.8",
17+
"@sveltejs/kit": "^2.21.1",
1818
"@sveltejs/vite-plugin-svelte": "^5.0.3",
1919
"@tailwindcss/forms": "^0.5.10",
20-
"@types/node": "^22.15.17",
20+
"@tailwindcss/vite": "^4.1.7",
21+
"@types/chroma-js": "^3.1.1",
22+
"@types/node": "^22.15.19",
2123
"@types/sortablejs": "^1.15.8",
22-
"autoprefixer": "^10.4.21",
23-
"postcss": "^8.5.3",
24-
"svelte": "^5.28.2",
25-
"svelte-check": "^4.1.7",
26-
"tailwindcss": "^3.4.17",
24+
"svelte": "^5.31.1",
25+
"svelte-check": "^4.2.1",
26+
"tailwindcss": "^4.1.7",
2727
"tslib": "^2.8.1",
2828
"typescript": "~5.8.3",
2929
"unplugin-icons": "^22.1.0",
3030
"vite": "^6.3.5"
3131
},
3232
"type": "module",
3333
"dependencies": {
34-
"@floating-ui/dom": "^1.7.0",
34+
"chroma-js": "^3.1.2",
3535
"dexie": "^4.0.11",
3636
"svelte-dnd-action": "^0.9.61",
37-
"zod": "^3.24.4"
37+
"zod": "^3.25.7"
3838
},
3939
"overrides": {
4040
"@sveltejs/kit": {
@@ -46,7 +46,8 @@
4646
"cookie": "^0.7.0"
4747
},
4848
"onlyBuiltDependencies": [
49+
"@tailwindcss/oxide",
4950
"esbuild"
5051
]
5152
}
52-
}
53+
}

‎pnpm-lock.yaml‎

Lines changed: 854 additions & 943 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎postcss.config.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/app.css‎

Lines changed: 69 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,69 @@
1-
@import "tailwindcss/base";
2-
@import "tailwindcss/components";
3-
@import "tailwindcss/utilities";
1+
@import 'tailwindcss';
2+
@import "@skeletonlabs/skeleton";
3+
@import "@skeletonlabs/skeleton/optional/presets";
4+
@import "./theme.css";
5+
@source "../node_modules/@skeletonlabs/skeleton-svelte/dist";
6+
@plugin '@tailwindcss/forms';
7+
8+
@custom-variant dark (&:where(.dark, .dark *));
9+
@custom-variant contenteditable (&:is([contenteditable]));
10+
11+
@utility card-filled {
12+
@apply card preset-ui;
13+
border: 1px solid var(--color-surface-200-800);
14+
}
15+
@utility preset-input-error {
16+
background-color: var(--color-error-100);
17+
color: var(--color-error-900);
18+
--tw-ring-color: var(--color-error-900);
19+
/* To deal with comboboxes */
20+
& > * {
21+
border-color: var(--color-error-900);
22+
}
23+
}
24+
@utility preset-ui {
25+
background-color: var(--color-surface-100-900);
26+
color: var(--color-surface-contrast-100-900);
27+
}
28+
@utility preset-ui-header {
29+
background-color: var(--color-surface-200-800);
30+
}
31+
@utility preset-ui-admin-header {
32+
background-color: var(--color-warning-200-800);
33+
}
34+
@utility preset-ui-ready {
35+
border-width: 1px;
36+
border-color: var(--color-surface-500);
37+
&:hover {
38+
border-color: var(--color-primary-500);
39+
}
40+
}
41+
@utility preset-ui-depressed {
42+
background-color: var(--color-surface-200-800);
43+
color: var(--color-surface-contrast-200-800);
44+
}
45+
@utility preset-ui-activated {
46+
background-color: var(--color-primary-500);
47+
color: var(--color-primary-contrast-500);
48+
}
49+
50+
@utility btn-icon-std {
51+
@apply btn-icon;
52+
font-size: var(--text-xl);
53+
width: var(--text-xl);
54+
height: var(--text-xl);
55+
padding: calc(var(--spacing) * 2);
56+
}
57+
@utility editable-std {
58+
@apply hover:bg-surface-500/25 focus:bg-surface-500/25 transition-[background-color,font-size];
59+
border-radius: 0.25rem;
60+
61+
@variant empty {
62+
cursor: text;
63+
&::before {
64+
content: attr(placeholder);
65+
opacity: 0.75;
66+
font-style: italic;
67+
}
68+
}
69+
}

‎src/app.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html lang="en" data-theme="sofa">
33
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
4+
<meta charset="utf-8" >
5+
<link rel="icon" href="%sveltekit.assets%/favicon.png" >
6+
<meta name="viewport" content="width=device-width, initial-scale=1" >
77
%sveltekit.head%
88
</head>
9-
<body data-sveltekit-preload-data="hover" data-theme="skeleton">
9+
<body data-sveltekit-preload-data="hover">
1010
<div style="display: contents">%sveltekit.body%</div>
1111
</body>
1212
</html>

‎src/lib/components/DelAutocomplete.svelte‎

Lines changed: 0 additions & 75 deletions
This file was deleted.

‎src/lib/components/DelCombobox.svelte‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!--
2+
@component A combobox input which acts as a delegate selector.
3+
4+
You can use this component in replacement of a standard `<input>`,
5+
and it will automatically handle autocomplete and delegate functionality.
6+
-->
7+
8+
<script lang="ts">
9+
import type { Delegate } from "$lib/db/delegates";
10+
import { Combobox } from "@skeletonlabs/skeleton-svelte";
11+
import DelLabel from "./del-label/DelLabel.svelte";
12+
import type { DelegateID } from "$lib/types";
13+
14+
interface Props {
15+
/**
16+
* Bindable property representing the input text which the autocomplete tries to complete.
17+
*/
18+
input?: string;
19+
/**
20+
* Bindable property representing where to place the value after selection.
21+
*/
22+
value?: DelegateID;
23+
/**
24+
* List of delegates. The autocomplete will automatically filter out non-present delegates.
25+
*/
26+
delegates: Delegate[];
27+
/**
28+
* Whether the input has an error.
29+
*/
30+
error?: boolean;
31+
32+
/**
33+
* Classes to apply to top of combobox.
34+
*/
35+
class?: string;
36+
37+
/**
38+
* Autocompletion behavior of combobox.
39+
*/
40+
inputBehavior?: "autohighlight" | "autocomplete" | "none",
41+
/**
42+
* What happens to the input after a value has been selected.
43+
*/
44+
selectionBehavior?: "clear" | "replace" | "preserve",
45+
/**
46+
* This prop determines what happens to the selected item after the combobox is interacted with again.
47+
*
48+
* If false (default), the selected value is preserved and highlighted on second interaction.
49+
* It cannot be reselected until it has been deselected.
50+
* If true, the selected value is not kept, not highlighted, and can be reselected on second interaction.
51+
*/
52+
forgetSelected?: boolean,
53+
/**
54+
* Action to perform when a delegate has been selected.
55+
* This is done after the value property is set (if that is used).
56+
*/
57+
onSelect?: (item: DelegateID) => void,
58+
}
59+
60+
let {
61+
input = $bindable(),
62+
value = $bindable(),
63+
error = false,
64+
delegates,
65+
class: classes = "",
66+
selectionBehavior,
67+
inputBehavior = "autohighlight",
68+
forgetSelected = false,
69+
onSelect
70+
}: Props = $props();
71+
72+
let data = $derived(
73+
delegates
74+
.filter(d => d.isPresent())
75+
.map(d => ({
76+
value: String(d.id),
77+
label: d.name,
78+
// TODO: support keywords
79+
attrs: d.getAttributes()
80+
}))
81+
);
82+
83+
let delsEmpty = $derived(data.length == 0);
84+
let comboboxValue = $derived(typeof value !== "undefined" ? [String(value)] : []);
85+
</script>
86+
87+
<Combobox
88+
{data}
89+
inputValue={input ?? ""}
90+
onInputValueChange={e => input = e.inputValue}
91+
value={comboboxValue}
92+
onValueChange={e => {
93+
let newValue = +e.value[0];
94+
if (!forgetSelected) {
95+
value = newValue;
96+
}
97+
onSelect?.(newValue);
98+
}}
99+
disabled={delsEmpty}
100+
placeholder={!delsEmpty ? "Select..." : "No delegates present"}
101+
optionHover='hover:preset-tonal hover:brightness-100'
102+
inputGroupClasses="{error ? 'preset-input-error' : ''} transition-colors"
103+
{classes}
104+
contentClasses="max-h-48 overflow-auto"
105+
{inputBehavior}
106+
{selectionBehavior}
107+
>
108+
{#snippet item(item)}
109+
<DelLabel attrs={item.attrs} inline />
110+
{/snippet}
111+
</Combobox>

‎src/lib/components/IconLabel.svelte‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,6 @@
1515
* The label if the screen is wide enough.
1616
*/
1717
label: string,
18-
/**
19-
* The screen width needed for the text to take effect.
20-
* This is any of Tailwind's default media sizes (e.g., 'sm', 'md', 'lg', etc.)
21-
*/
22-
size?: string,
23-
2418
/**
2519
* The width of the icon.
2620
*/
@@ -31,12 +25,12 @@
3125
iconHeight?: number
3226
}
3327
34-
let { icon: Icon, label, size = "md", iconWidth = 24, iconHeight = 24 }: Props = $props();
28+
let { icon: Icon, label, iconWidth = 24, iconHeight = 24 }: Props = $props();
3529
</script>
3630

3731
<!-- If on a smaller device, use an icon -->
38-
<div class="flex justify-center items-center {size}:hidden" aria-label={label} title={label}>
32+
<div class="flex justify-center items-center md:hidden" aria-label={label} title={label}>
3933
<Icon width={iconWidth} height={iconHeight} />
4034
</div>
4135
<!-- If on a larger device, use the full text -->
42-
<span class="hidden {size}:block">{label}</span>
36+
<span class="hidden md:block">{label}</span>

0 commit comments

Comments
 (0)