@immich/ui 0.24.5 → 0.24.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ThemeSwitcher/ThemeSwitcher.svelte +2 -3
- package/dist/internal/Button.svelte +10 -2
- package/dist/internal/Button.svelte.d.ts +1 -1
- package/dist/services/theme.svelte.d.ts +1 -0
- package/dist/services/theme.svelte.js +4 -0
- package/dist/types.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import IconButton from '../IconButton/IconButton.svelte';
|
|
3
|
-
import {
|
|
3
|
+
import { theme, toggleTheme } from '../../services/theme.svelte.js';
|
|
4
4
|
import { t } from '../../services/translation.svelte.js';
|
|
5
5
|
import {
|
|
6
6
|
Theme,
|
|
@@ -31,9 +31,8 @@
|
|
|
31
31
|
}: Props = $props();
|
|
32
32
|
|
|
33
33
|
const handleToggleTheme = () => {
|
|
34
|
-
|
|
34
|
+
toggleTheme();
|
|
35
35
|
onChange?.(theme.value);
|
|
36
|
-
onThemeChange();
|
|
37
36
|
};
|
|
38
37
|
|
|
39
38
|
const themeIcon = $derived(theme.value === Theme.Light ? mdiWeatherSunny : mdiWeatherNight);
|
|
@@ -13,7 +13,8 @@
|
|
|
13
13
|
icon?: boolean;
|
|
14
14
|
};
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
let {
|
|
17
|
+
ref = $bindable(null),
|
|
17
18
|
type = 'button',
|
|
18
19
|
href,
|
|
19
20
|
variant = 'filled',
|
|
@@ -152,7 +153,13 @@
|
|
|
152
153
|
{/snippet}
|
|
153
154
|
|
|
154
155
|
{#if href}
|
|
155
|
-
<a
|
|
156
|
+
<a
|
|
157
|
+
bind:this={ref}
|
|
158
|
+
{href}
|
|
159
|
+
class={classList}
|
|
160
|
+
aria-disabled={disabled}
|
|
161
|
+
{...restProps as HTMLAnchorAttributes}
|
|
162
|
+
>
|
|
156
163
|
{#if loading}
|
|
157
164
|
<div class="flex items-center justify-center gap-2">
|
|
158
165
|
<LoadingSpinner {color} size={spinnerSizes[size]} />
|
|
@@ -164,6 +171,7 @@
|
|
|
164
171
|
</a>
|
|
165
172
|
{:else}
|
|
166
173
|
<ButtonPrimitive.Root
|
|
174
|
+
bind:ref
|
|
167
175
|
class={classList}
|
|
168
176
|
type={type as HTMLButtonAttributes['type']}
|
|
169
177
|
{...restProps as HTMLButtonAttributes}
|
|
@@ -3,6 +3,6 @@ type InternalButtonProps = ButtonProps & {
|
|
|
3
3
|
/** when true, button width to height ratio is 1:1 */
|
|
4
4
|
icon?: boolean;
|
|
5
5
|
};
|
|
6
|
-
declare const Button: import("svelte").Component<InternalButtonProps, {}, "">;
|
|
6
|
+
declare const Button: import("svelte").Component<InternalButtonProps, {}, "ref">;
|
|
7
7
|
type Button = ReturnType<typeof Button>;
|
|
8
8
|
export default Button;
|
|
@@ -14,5 +14,6 @@ type ThemePreference = {
|
|
|
14
14
|
};
|
|
15
15
|
export declare const theme: ThemePreference;
|
|
16
16
|
export declare const onThemeChange: () => void;
|
|
17
|
+
export declare const toggleTheme: () => void;
|
|
17
18
|
export declare const initializeTheme: (options?: ThemeOptions) => void;
|
|
18
19
|
export {};
|
|
@@ -56,6 +56,10 @@ const syncToDom = () => {
|
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
};
|
|
59
|
+
export const toggleTheme = () => {
|
|
60
|
+
theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
|
|
61
|
+
onThemeChange();
|
|
62
|
+
};
|
|
59
63
|
export const initializeTheme = (options) => {
|
|
60
64
|
if (options) {
|
|
61
65
|
setThemeOptions(options);
|
package/dist/types.d.ts
CHANGED