@onsvisual/svelte-components 0.0.30 → 0.0.31
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.
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
/** @typedef {typeof __propDef.slots} NoticeSlots */
|
|
4
4
|
export default class Notice extends SvelteComponentTyped<{
|
|
5
5
|
title?: string;
|
|
6
|
-
mode?: "info" | "success" | "pending" | "error";
|
|
6
|
+
mode?: "info" | "success" | "pending" | "error" | "warning";
|
|
7
7
|
important?: boolean;
|
|
8
8
|
}, {
|
|
9
9
|
[evt: string]: CustomEvent<any>;
|
|
@@ -18,7 +18,7 @@ import { SvelteComponentTyped } from "svelte";
|
|
|
18
18
|
declare const __propDef: {
|
|
19
19
|
props: {
|
|
20
20
|
title?: string;
|
|
21
|
-
mode?: "info" | "success" | "pending" | "error";
|
|
21
|
+
mode?: "info" | "success" | "pending" | "error" | "warning";
|
|
22
22
|
important?: boolean;
|
|
23
23
|
};
|
|
24
24
|
events: {
|
|
@@ -4,16 +4,16 @@
|
|
|
4
4
|
* @type {string}
|
|
5
5
|
*/
|
|
6
6
|
export let title = null;
|
|
7
|
-
/**
|
|
8
|
-
* Adds an exclamation mark icon
|
|
9
|
-
* @type {boolean}
|
|
10
|
-
*/
|
|
11
|
-
export let important = false;
|
|
12
7
|
/**
|
|
13
8
|
* Sets the mode/colour of the notice
|
|
14
|
-
* @type {"info"|"success"|"pending"|"error"}
|
|
9
|
+
* @type {"info"|"success"|"pending"|"error"|"warning"}
|
|
15
10
|
*/
|
|
16
11
|
export let mode = "info";
|
|
12
|
+
/**
|
|
13
|
+
* Adds an exclamation mark icon
|
|
14
|
+
* @type {boolean}
|
|
15
|
+
*/
|
|
16
|
+
export let important = mode !== "warning";
|
|
17
17
|
|
|
18
18
|
$: style =
|
|
19
19
|
mode === "success"
|
|
@@ -25,12 +25,17 @@
|
|
|
25
25
|
: null;
|
|
26
26
|
</script>
|
|
27
27
|
|
|
28
|
-
<div
|
|
29
|
-
|
|
28
|
+
<div
|
|
29
|
+
class="ons-panel {mode === 'warning' ? 'ons-panel--warn' : 'ons-panel--info'} ons-panel--no-title"
|
|
30
|
+
style="{style}"
|
|
31
|
+
>
|
|
32
|
+
<div class="ons-u-bg--tr" class:ons-panel--warn="{important && mode !== 'warning'}">
|
|
30
33
|
{#if important}<div class="ons-panel__icon" aria-hidden="true">!</div>{/if}
|
|
31
|
-
<span class="ons-panel__assistive-text ons-u-vh"
|
|
34
|
+
<span class="ons-panel__assistive-text ons-u-vh"
|
|
35
|
+
>{mode === "warning" ? "Warning:" : "Important information:"}</span
|
|
36
|
+
>
|
|
32
37
|
<div class="ons-panel__body">
|
|
33
|
-
<div class="ons-u-fs-r
|
|
38
|
+
<div class="default-line-height" class:ons-u-fs-r="{mode !== 'warning'}">
|
|
34
39
|
{#if title}<p><strong>{title}</strong></p>{/if}
|
|
35
40
|
<p class="ons-u-mb-no">
|
|
36
41
|
<slot />
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onsvisual/svelte-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.31",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"homepage": "https://onsvisual.github.io/svelte-components",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@babel/eslint-plugin": "^7.19.1",
|
|
33
33
|
"@babel/preset-env": "^7.21.4",
|
|
34
34
|
"@evilmartians/lefthook": "^1.3.10",
|
|
35
|
-
"@onsvisual/svelte-charts": "^0.2.
|
|
35
|
+
"@onsvisual/svelte-charts": "^0.2.17",
|
|
36
36
|
"@reuters-graphics/eslint-config": "^0.0.2",
|
|
37
37
|
"@storybook/addon-actions": "^7.0.20",
|
|
38
38
|
"@storybook/addon-docs": "^7.0.20",
|