@sveltia/ui 0.24.2 → 0.25.0
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/alert/infobar.svelte +100 -0
- package/dist/components/alert/infobar.svelte.d.ts +49 -0
- package/dist/components/slider/slider.svelte +1 -1
- package/dist/components/slider/slider.svelte.d.ts +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { _ } from 'svelte-i18n';
|
|
3
|
+
import Button from '../button/button.svelte';
|
|
4
|
+
import Icon from '../icon/icon.svelte';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* @typedef {object} Props
|
|
8
|
+
* @property {boolean} [show] - Whether to show the toast.
|
|
9
|
+
* @property {boolean} [dismissible] - Whether to show the close button.
|
|
10
|
+
* @property {'error' | 'warning' | 'info' | 'success'} [status] - Information status.
|
|
11
|
+
* @property {import('svelte').Snippet} [children] - Primary slot content.
|
|
12
|
+
* @property {import('svelte').Snippet} [icon] - Icon slot content.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
/** @type {Props} */
|
|
16
|
+
let {
|
|
17
|
+
/* eslint-disable prefer-const */
|
|
18
|
+
show = $bindable(true),
|
|
19
|
+
dismissible = true,
|
|
20
|
+
status = 'info',
|
|
21
|
+
children = undefined,
|
|
22
|
+
icon = undefined,
|
|
23
|
+
/* eslint-enable prefer-const */
|
|
24
|
+
} = $props();
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
{#if show}
|
|
28
|
+
<div role="none" class="infobar {status}">
|
|
29
|
+
<div role="alert" class="message">
|
|
30
|
+
{#if icon}
|
|
31
|
+
{@render icon()}
|
|
32
|
+
{:else}
|
|
33
|
+
<Icon name={status === 'success' ? 'check_circle' : status} />
|
|
34
|
+
{/if}
|
|
35
|
+
{@render children?.()}
|
|
36
|
+
</div>
|
|
37
|
+
{#if dismissible}
|
|
38
|
+
<div role="none">
|
|
39
|
+
<Button
|
|
40
|
+
iconic
|
|
41
|
+
size="small"
|
|
42
|
+
variant="ghost"
|
|
43
|
+
aria-label={$_('dismiss')}
|
|
44
|
+
onclick={() => {
|
|
45
|
+
show = false;
|
|
46
|
+
}}
|
|
47
|
+
>
|
|
48
|
+
<Icon name="close" />
|
|
49
|
+
</Button>
|
|
50
|
+
</div>
|
|
51
|
+
{/if}
|
|
52
|
+
</div>
|
|
53
|
+
{/if}
|
|
54
|
+
|
|
55
|
+
<style>.infobar {
|
|
56
|
+
flex: none;
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
gap: var(--sui-infobar-gap, 8px);
|
|
60
|
+
border-width: var(--sui-infobar-border-width, 0 0 1px);
|
|
61
|
+
border-style: var(--sui-infobar-border-style, solid);
|
|
62
|
+
padding: var(--sui-infobar-padding, 0);
|
|
63
|
+
min-height: var(--sui-infobar-min-height, 32px);
|
|
64
|
+
font-size: var(--sui-infobar-font-size, var(--sui-font-size-small));
|
|
65
|
+
}
|
|
66
|
+
.infobar.info {
|
|
67
|
+
border-color: var(--sui-info-border-color);
|
|
68
|
+
color: var(--sui-info-foreground-color);
|
|
69
|
+
background-color: var(--sui-info-background-color);
|
|
70
|
+
}
|
|
71
|
+
.infobar.warning {
|
|
72
|
+
border-color: var(--sui-warning-border-color);
|
|
73
|
+
color: var(--sui-warning-foreground-color);
|
|
74
|
+
background-color: var(--sui-warning-background-color);
|
|
75
|
+
}
|
|
76
|
+
.infobar.error {
|
|
77
|
+
border-color: var(--sui-error-border-color);
|
|
78
|
+
color: var(--sui-error-foreground-color);
|
|
79
|
+
background-color: var(--sui-error-background-color);
|
|
80
|
+
}
|
|
81
|
+
.infobar.success {
|
|
82
|
+
border-color: var(--sui-success-border-color);
|
|
83
|
+
color: var(--sui-success-foreground-color);
|
|
84
|
+
background-color: var(--sui-success-background-color);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.message {
|
|
88
|
+
flex: auto;
|
|
89
|
+
display: flex;
|
|
90
|
+
align-items: center;
|
|
91
|
+
justify-content: var(--sui-infobar-message-justify-content, left);
|
|
92
|
+
gap: var(--sui-infobar-message-gap, 6px);
|
|
93
|
+
padding: var(--sui-infobar-message-padding, 0 8px);
|
|
94
|
+
}
|
|
95
|
+
.message :global(button) {
|
|
96
|
+
font-size: inherit !important;
|
|
97
|
+
}
|
|
98
|
+
.message :global(.icon) {
|
|
99
|
+
font-size: 16px; /* !hardcoded */
|
|
100
|
+
}</style>
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
export default Infobar;
|
|
2
|
+
type Infobar = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const Infobar: import("svelte").Component<{
|
|
7
|
+
/**
|
|
8
|
+
* - Whether to show the toast.
|
|
9
|
+
*/
|
|
10
|
+
show?: boolean | undefined;
|
|
11
|
+
/**
|
|
12
|
+
* - Whether to show the close button.
|
|
13
|
+
*/
|
|
14
|
+
dismissible?: boolean | undefined;
|
|
15
|
+
/**
|
|
16
|
+
* - Information status.
|
|
17
|
+
*/
|
|
18
|
+
status?: "error" | "warning" | "info" | "success" | undefined;
|
|
19
|
+
/**
|
|
20
|
+
* - Primary slot content.
|
|
21
|
+
*/
|
|
22
|
+
children?: import("svelte").Snippet<[]> | undefined;
|
|
23
|
+
/**
|
|
24
|
+
* - Icon slot content.
|
|
25
|
+
*/
|
|
26
|
+
icon?: import("svelte").Snippet<[]> | undefined;
|
|
27
|
+
}, {}, "show">;
|
|
28
|
+
type Props = {
|
|
29
|
+
/**
|
|
30
|
+
* - Whether to show the toast.
|
|
31
|
+
*/
|
|
32
|
+
show?: boolean | undefined;
|
|
33
|
+
/**
|
|
34
|
+
* - Whether to show the close button.
|
|
35
|
+
*/
|
|
36
|
+
dismissible?: boolean | undefined;
|
|
37
|
+
/**
|
|
38
|
+
* - Information status.
|
|
39
|
+
*/
|
|
40
|
+
status?: "error" | "warning" | "info" | "success" | undefined;
|
|
41
|
+
/**
|
|
42
|
+
* - Primary slot content.
|
|
43
|
+
*/
|
|
44
|
+
children?: import("svelte").Snippet<[]> | undefined;
|
|
45
|
+
/**
|
|
46
|
+
* - Icon slot content.
|
|
47
|
+
*/
|
|
48
|
+
icon?: import("svelte").Snippet<[]> | undefined;
|
|
49
|
+
};
|
|
@@ -83,7 +83,7 @@ declare const Slider: import("svelte").Component<{
|
|
|
83
83
|
values?: number[];
|
|
84
84
|
value?: number;
|
|
85
85
|
}) => void) | undefined;
|
|
86
|
-
} & Record<string, any>, {}, "value">;
|
|
86
|
+
} & Record<string, any>, {}, "value" | "values">;
|
|
87
87
|
type Props = {
|
|
88
88
|
/**
|
|
89
89
|
* - Current value.
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ export function initLocales({ fallbackLocale, initialLocale }?: {
|
|
|
3
3
|
initialLocale?: string | undefined;
|
|
4
4
|
} | undefined): void;
|
|
5
5
|
export { default as Alert } from "./components/alert/alert.svelte";
|
|
6
|
+
export { default as Infobar } from "./components/alert/infobar.svelte";
|
|
6
7
|
export { default as ButtonGroup } from "./components/button/button-group.svelte";
|
|
7
8
|
export { default as Button } from "./components/button/button.svelte";
|
|
8
9
|
export { default as SelectButtonGroup } from "./components/button/select-button-group.svelte";
|
package/dist/index.js
CHANGED
|
@@ -28,6 +28,7 @@ export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}
|
|
|
28
28
|
initLocales();
|
|
29
29
|
|
|
30
30
|
export { default as Alert } from './components/alert/alert.svelte';
|
|
31
|
+
export { default as Infobar } from './components/alert/infobar.svelte';
|
|
31
32
|
export { default as ButtonGroup } from './components/button/button-group.svelte';
|
|
32
33
|
export { default as Button } from './components/button/button.svelte';
|
|
33
34
|
export { default as SelectButtonGroup } from './components/button/select-button-group.svelte';
|