@marianmeres/stuic 1.47.0 → 1.48.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.
|
@@ -1,15 +1,7 @@
|
|
|
1
|
-
<script>import { slide } from "svelte/transition";
|
|
1
|
+
<script context="module">import { slide } from "svelte/transition";
|
|
2
2
|
import { twMerge } from "tailwind-merge";
|
|
3
3
|
import { Thc, X } from "../../index.js";
|
|
4
|
-
|
|
5
|
-
export { _class as class };
|
|
6
|
-
export let classContent = "";
|
|
7
|
-
export let classDismiss = "";
|
|
8
|
-
export let duration = 150;
|
|
9
|
-
export let message;
|
|
10
|
-
export let onDismiss = () => message = null;
|
|
11
|
-
export let theme = "primary";
|
|
12
|
-
const preset = {
|
|
4
|
+
const themes = {
|
|
13
5
|
primary: "bg-stuic-primary/10 text-stuic-primary dark:bg-stuic-primary dark:text-white/90",
|
|
14
6
|
secondary: "bg-stuic-secondary/10 text-stuic-secondary dark:bg-stuic-secondary dark:text-white/90",
|
|
15
7
|
slate: "bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-100",
|
|
@@ -35,32 +27,63 @@ const preset = {
|
|
|
35
27
|
pink: "bg-pink-100 text-pink-800 dark:bg-pink-800 dark:text-pink-100",
|
|
36
28
|
rose: "bg-rose-100 text-rose-800 dark:bg-rose-800 dark:text-rose-100"
|
|
37
29
|
};
|
|
30
|
+
export class DismissibleMessageConfig {
|
|
31
|
+
static preset = {
|
|
32
|
+
box: `mb-4 rounded flex text-sm`,
|
|
33
|
+
content: `flex-1 px-4 py-3`,
|
|
34
|
+
dismiss: `
|
|
35
|
+
hover:bg-black/5 dark:hover:bg-black/20
|
|
36
|
+
rounded rounded-l-none
|
|
37
|
+
px-3
|
|
38
|
+
flex items-center justify-center
|
|
39
|
+
group
|
|
40
|
+
`
|
|
41
|
+
};
|
|
42
|
+
static class = {
|
|
43
|
+
box: ``,
|
|
44
|
+
content: ``,
|
|
45
|
+
dismiss: ``
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
</script>
|
|
49
|
+
|
|
50
|
+
<script>let _class = "";
|
|
51
|
+
export { _class as class };
|
|
52
|
+
export let classContent = "";
|
|
53
|
+
export let classDismiss = "";
|
|
54
|
+
export let duration = 150;
|
|
55
|
+
export let message;
|
|
56
|
+
export let onDismiss = () => message = null;
|
|
57
|
+
export let theme = "primary";
|
|
38
58
|
</script>
|
|
39
59
|
|
|
40
60
|
{#if message}
|
|
41
61
|
<div
|
|
42
|
-
class={twMerge(
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
62
|
+
class={twMerge(
|
|
63
|
+
DismissibleMessageConfig.preset.box,
|
|
64
|
+
DismissibleMessageConfig.class.box,
|
|
65
|
+
themes[theme] ?? themes.primary,
|
|
66
|
+
_class
|
|
67
|
+
)}
|
|
48
68
|
transition:slide={{ duration }}
|
|
49
69
|
>
|
|
50
|
-
<div
|
|
70
|
+
<div
|
|
71
|
+
class={twMerge(
|
|
72
|
+
DismissibleMessageConfig.preset.content,
|
|
73
|
+
DismissibleMessageConfig.class.content,
|
|
74
|
+
classContent
|
|
75
|
+
)}
|
|
76
|
+
>
|
|
51
77
|
<Thc thc={message} />
|
|
52
78
|
</div>
|
|
53
79
|
|
|
54
80
|
{#if typeof onDismiss === 'function'}
|
|
55
81
|
<button
|
|
56
|
-
class={twMerge(
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
group
|
|
62
|
-
${classDismiss}
|
|
63
|
-
`)}
|
|
82
|
+
class={twMerge(
|
|
83
|
+
DismissibleMessageConfig.preset.dismiss,
|
|
84
|
+
DismissibleMessageConfig.class.dismiss,
|
|
85
|
+
classDismiss
|
|
86
|
+
)}
|
|
64
87
|
on:click={() => onDismiss()}
|
|
65
88
|
>
|
|
66
89
|
<X class="opacity-75 group-hover:opacity-100" strokeWidth={1.5} />
|
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
2
|
import { type THC, type TW_COLORS } from '../../index.js';
|
|
3
|
+
export declare class DismissibleMessageConfig {
|
|
4
|
+
static preset: {
|
|
5
|
+
box: string;
|
|
6
|
+
content: string;
|
|
7
|
+
dismiss: string;
|
|
8
|
+
};
|
|
9
|
+
static class: {
|
|
10
|
+
box: string;
|
|
11
|
+
content: string;
|
|
12
|
+
dismiss: string;
|
|
13
|
+
};
|
|
14
|
+
}
|
|
3
15
|
declare const __propDef: {
|
|
4
16
|
props: {
|
|
5
17
|
class?: string | undefined;
|
package/dist/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export { default as Button, ButtonConfig } from './components/Button/Button.svel
|
|
|
6
6
|
export { default as SystemAwareColorScheme } from './components/ColorScheme/SystemAwareColorScheme.svelte';
|
|
7
7
|
export { default as LocalColorScheme } from './components/ColorScheme/LocalColorScheme.svelte';
|
|
8
8
|
export { ColorScheme } from './components/ColorScheme/color-scheme.js';
|
|
9
|
-
export { default as DismissibleMessage } from './components/DismissibleMessage/DismissibleMessage.svelte';
|
|
9
|
+
export { default as DismissibleMessage, DismissibleMessageConfig, } from './components/DismissibleMessage/DismissibleMessage.svelte';
|
|
10
10
|
export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer.svelte';
|
|
11
11
|
export { default as HoverExpandableWidth } from './components/HoverExpandableWidth/HoverExpandableWidth.svelte';
|
|
12
12
|
export { default as Field } from './components/Input/Field.svelte';
|
package/dist/index.js
CHANGED
|
@@ -13,7 +13,7 @@ export { default as SystemAwareColorScheme } from './components/ColorScheme/Syst
|
|
|
13
13
|
export { default as LocalColorScheme } from './components/ColorScheme/LocalColorScheme.svelte';
|
|
14
14
|
export { ColorScheme } from './components/ColorScheme/color-scheme.js';
|
|
15
15
|
//
|
|
16
|
-
export { default as DismissibleMessage } from './components/DismissibleMessage/DismissibleMessage.svelte';
|
|
16
|
+
export { default as DismissibleMessage, DismissibleMessageConfig, } from './components/DismissibleMessage/DismissibleMessage.svelte';
|
|
17
17
|
//
|
|
18
18
|
export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer.svelte';
|
|
19
19
|
//
|