@iroco/ui 1.0.0 → 1.0.1
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/Button.svelte +1 -9
- package/dist/Button.svelte.d.ts +2 -9
- package/dist/DataTable.svelte +7 -2
- package/dist/DataTable.svelte.d.ts +3 -3
- package/dist/IconIrocoLogo.svelte +9 -7
- package/dist/IconIrocoLogo.svelte.d.ts +3 -3
- package/dist/IrocoLogo.svelte +8 -6
- package/dist/IrocoLogo.svelte.d.ts +3 -3
- package/dist/NavBar.svelte +4 -6
- package/dist/NavBar.svelte.d.ts +2 -0
- package/dist/Navigation.svelte +14 -11
- package/dist/Navigation.svelte.d.ts +3 -3
- package/dist/RadioButton.svelte +4 -4
- package/dist/TextInput.svelte +0 -1
- package/package.json +1 -1
package/dist/Button.svelte
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
fullWidth?: boolean;
|
|
10
10
|
id?: string | null;
|
|
11
11
|
children?: import('svelte').Snippet;
|
|
12
|
-
onclick
|
|
12
|
+
onclick?: MouseEventHandler<HTMLButtonElement>;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
let {
|
|
@@ -23,14 +23,6 @@
|
|
|
23
23
|
onclick
|
|
24
24
|
}: Props = $props();
|
|
25
25
|
|
|
26
|
-
export {
|
|
27
|
-
type,
|
|
28
|
-
disabled,
|
|
29
|
-
kind,
|
|
30
|
-
size,
|
|
31
|
-
fullWidth,
|
|
32
|
-
id,
|
|
33
|
-
}
|
|
34
26
|
</script>
|
|
35
27
|
|
|
36
28
|
<button
|
package/dist/Button.svelte.d.ts
CHANGED
|
@@ -7,15 +7,8 @@ interface Props {
|
|
|
7
7
|
fullWidth?: boolean;
|
|
8
8
|
id?: string | null;
|
|
9
9
|
children?: import('svelte').Snippet;
|
|
10
|
-
onclick
|
|
10
|
+
onclick?: MouseEventHandler<HTMLButtonElement>;
|
|
11
11
|
}
|
|
12
|
-
declare const Button: import("svelte").Component<Props, {
|
|
13
|
-
type: "button" | "reset" | "submit" | null;
|
|
14
|
-
disabled: boolean;
|
|
15
|
-
kind: "success" | "danger" | "dark" | "basic";
|
|
16
|
-
size: "small" | "regular";
|
|
17
|
-
fullWidth: boolean;
|
|
18
|
-
id: string | null;
|
|
19
|
-
}, "">;
|
|
12
|
+
declare const Button: import("svelte").Component<Props, {}, "">;
|
|
20
13
|
type Button = ReturnType<typeof Button>;
|
|
21
14
|
export default Button;
|
package/dist/DataTable.svelte
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
|
-
<script
|
|
1
|
+
<script lang="ts">
|
|
2
2
|
import type { Component } from 'svelte';
|
|
3
3
|
|
|
4
|
+
interface Props {
|
|
5
|
+
rows: Array<TableRow>,
|
|
6
|
+
columns: Array<TableColumn>
|
|
7
|
+
}
|
|
8
|
+
|
|
4
9
|
type TableColumn = {
|
|
5
10
|
key: string;
|
|
6
11
|
title: string;
|
|
@@ -15,7 +20,7 @@
|
|
|
15
20
|
[key: string]: string | number;
|
|
16
21
|
};
|
|
17
22
|
|
|
18
|
-
let { rows, columns }:
|
|
23
|
+
let { rows, columns }: Props = $props();
|
|
19
24
|
</script>
|
|
20
25
|
|
|
21
26
|
<table class="data-table">
|
|
@@ -10,10 +10,10 @@ type TableColumn = {
|
|
|
10
10
|
type TableRow = {
|
|
11
11
|
[key: string]: string | number;
|
|
12
12
|
};
|
|
13
|
-
|
|
13
|
+
interface Props {
|
|
14
14
|
rows: Array<TableRow>;
|
|
15
15
|
columns: Array<TableColumn>;
|
|
16
|
-
}
|
|
17
|
-
declare const DataTable: Component
|
|
16
|
+
}
|
|
17
|
+
declare const DataTable: Component<Props, {}, "">;
|
|
18
18
|
type DataTable = ReturnType<typeof DataTable>;
|
|
19
19
|
export default DataTable;
|
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { Color } from './definition';
|
|
3
3
|
|
|
4
|
+
interface Props {
|
|
5
|
+
href?: string;
|
|
6
|
+
ariaLabel?: string;
|
|
7
|
+
width?: string;
|
|
8
|
+
height?: string;
|
|
9
|
+
color?: Color | string;
|
|
10
|
+
}
|
|
11
|
+
|
|
4
12
|
let {
|
|
5
13
|
href = '/',
|
|
6
14
|
ariaLabel = 'go to Iroco home',
|
|
7
15
|
width = '5rem',
|
|
8
16
|
height = '5rem',
|
|
9
17
|
color = Color.green
|
|
10
|
-
}:
|
|
11
|
-
href?: string;
|
|
12
|
-
ariaLabel?: string;
|
|
13
|
-
width?: string;
|
|
14
|
-
height?: string;
|
|
15
|
-
color?: Color|string;
|
|
16
|
-
} = $props();
|
|
18
|
+
}: Props = $props();
|
|
17
19
|
</script>
|
|
18
20
|
|
|
19
21
|
<a class="iroco-logo" {href} aria-label={ariaLabel}>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { Color } from './definition';
|
|
2
|
-
|
|
2
|
+
interface Props {
|
|
3
3
|
href?: string;
|
|
4
4
|
ariaLabel?: string;
|
|
5
5
|
width?: string;
|
|
6
6
|
height?: string;
|
|
7
7
|
color?: Color | string;
|
|
8
|
-
}
|
|
9
|
-
declare const IconIrocoLogo: import("svelte").Component
|
|
8
|
+
}
|
|
9
|
+
declare const IconIrocoLogo: import("svelte").Component<Props, {}, "">;
|
|
10
10
|
type IconIrocoLogo = ReturnType<typeof IconIrocoLogo>;
|
|
11
11
|
export default IconIrocoLogo;
|
package/dist/IrocoLogo.svelte
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
|
|
3
|
+
interface Props {
|
|
4
|
+
href?: string;
|
|
5
|
+
ariaLabel?: string;
|
|
6
|
+
width?: string;
|
|
7
|
+
height?: string;
|
|
8
|
+
}
|
|
9
|
+
|
|
3
10
|
let {
|
|
4
11
|
href = `/`,
|
|
5
12
|
ariaLabel = 'go to Iroco home',
|
|
6
13
|
width = '10rem',
|
|
7
14
|
height = '10rem'
|
|
8
|
-
}:
|
|
9
|
-
href?: string;
|
|
10
|
-
ariaLabel?: string;
|
|
11
|
-
width?: string;
|
|
12
|
-
height?: string;
|
|
13
|
-
} = $props();
|
|
15
|
+
}: Props = $props();
|
|
14
16
|
</script>
|
|
15
17
|
|
|
16
18
|
<a class="iroco-logo" {href} aria-label={ariaLabel}>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
interface Props {
|
|
2
2
|
href?: string;
|
|
3
3
|
ariaLabel?: string;
|
|
4
4
|
width?: string;
|
|
5
5
|
height?: string;
|
|
6
|
-
}
|
|
7
|
-
declare const IrocoLogo: import("svelte").Component
|
|
6
|
+
}
|
|
7
|
+
declare const IrocoLogo: import("svelte").Component<Props, {}, "">;
|
|
8
8
|
type IrocoLogo = ReturnType<typeof IrocoLogo>;
|
|
9
9
|
export default IrocoLogo;
|
package/dist/NavBar.svelte
CHANGED
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { createBubbler } from 'svelte/legacy';
|
|
3
|
-
|
|
4
|
-
const bubble = createBubbler();
|
|
5
2
|
import { IconClose } from './index';
|
|
6
3
|
import { createEventDispatcher } from 'svelte';
|
|
7
4
|
import { NavigationItemType, NavigationItem } from './definition.js';
|
|
5
|
+
import type { MouseEventHandler } from 'svelte/elements';
|
|
8
6
|
|
|
9
7
|
interface Props {
|
|
10
8
|
navigationItems: Array<NavigationItem>;
|
|
11
9
|
type: 'sidebar' | 'topbar';
|
|
12
10
|
version?: string | null;
|
|
13
11
|
navigating?: { to: { url: { pathname: string } } } | null;
|
|
12
|
+
onclick?: MouseEventHandler<HTMLButtonElement>;
|
|
14
13
|
}
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
let { navigationItems, type, version = null, navigating = null }: Props = $props();
|
|
15
|
+
let { navigationItems, type, version = null, navigating = null, onclick }: Props = $props();
|
|
18
16
|
|
|
19
17
|
const dispatch = createEventDispatcher();
|
|
20
18
|
|
|
@@ -37,7 +35,7 @@
|
|
|
37
35
|
</script>
|
|
38
36
|
|
|
39
37
|
<nav data-testid={type} class="nav__{type}">
|
|
40
|
-
<button title="Close menu" onclick
|
|
38
|
+
<button title="Close menu" {onclick} class="nav__{type}__close">
|
|
41
39
|
<IconClose width="3em" height="3em" />
|
|
42
40
|
</button>
|
|
43
41
|
|
package/dist/NavBar.svelte.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { NavigationItem } from './definition.js';
|
|
2
|
+
import type { MouseEventHandler } from 'svelte/elements';
|
|
2
3
|
interface Props {
|
|
3
4
|
navigationItems: Array<NavigationItem>;
|
|
4
5
|
type: 'sidebar' | 'topbar';
|
|
@@ -10,6 +11,7 @@ interface Props {
|
|
|
10
11
|
};
|
|
11
12
|
};
|
|
12
13
|
} | null;
|
|
14
|
+
onclick?: MouseEventHandler<HTMLButtonElement>;
|
|
13
15
|
}
|
|
14
16
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
15
17
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
package/dist/Navigation.svelte
CHANGED
|
@@ -3,6 +3,19 @@
|
|
|
3
3
|
import { Color } from './definition';
|
|
4
4
|
import { IconBurger, IconIrocoLogo, IrocoLogo, NavBar } from './';
|
|
5
5
|
|
|
6
|
+
interface Props {
|
|
7
|
+
baseUrl?: string;
|
|
8
|
+
href?: string;
|
|
9
|
+
navigationItems: Array<NavigationItem>;
|
|
10
|
+
type?: 'sidebar' | 'topbar';
|
|
11
|
+
title?: string | null;
|
|
12
|
+
version?: string | null;
|
|
13
|
+
color?: Color | string;
|
|
14
|
+
navigating?: { to: { url: { pathname: string } } } | null;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
let showMenu = $state(false);
|
|
18
|
+
|
|
6
19
|
let {
|
|
7
20
|
baseUrl = '',
|
|
8
21
|
href = `${baseUrl}/`,
|
|
@@ -12,17 +25,7 @@
|
|
|
12
25
|
version = null,
|
|
13
26
|
color = Color.green,
|
|
14
27
|
navigating
|
|
15
|
-
}:
|
|
16
|
-
baseUrl?: string;
|
|
17
|
-
href?: string;
|
|
18
|
-
navigationItems: Array<NavigationItem>;
|
|
19
|
-
type?: 'sidebar' | 'topbar';
|
|
20
|
-
title?: string | null;
|
|
21
|
-
version?: string | null;
|
|
22
|
-
color?: Color|string;
|
|
23
|
-
navigating?: { to: { url: { pathname: string } } } | null
|
|
24
|
-
} = $props();
|
|
25
|
-
let showMenu = $state(false);
|
|
28
|
+
}: Props = $props();
|
|
26
29
|
</script>
|
|
27
30
|
|
|
28
31
|
<div class="navigation--mobile">
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { NavigationItem } from './definition';
|
|
2
2
|
import { Color } from './definition';
|
|
3
|
-
|
|
3
|
+
interface Props {
|
|
4
4
|
baseUrl?: string;
|
|
5
5
|
href?: string;
|
|
6
6
|
navigationItems: Array<NavigationItem>;
|
|
@@ -15,7 +15,7 @@ type $$ComponentProps = {
|
|
|
15
15
|
};
|
|
16
16
|
};
|
|
17
17
|
} | null;
|
|
18
|
-
}
|
|
19
|
-
declare const Navigation: import("svelte").Component
|
|
18
|
+
}
|
|
19
|
+
declare const Navigation: import("svelte").Component<Props, {}, "">;
|
|
20
20
|
type Navigation = ReturnType<typeof Navigation>;
|
|
21
21
|
export default Navigation;
|
package/dist/RadioButton.svelte
CHANGED
|
@@ -17,14 +17,14 @@
|
|
|
17
17
|
children
|
|
18
18
|
}: Props = $props();
|
|
19
19
|
|
|
20
|
-
function onchange(event: Event) {
|
|
21
|
-
|
|
22
|
-
}
|
|
20
|
+
function onchange(event: Event) {
|
|
21
|
+
group = event.currentTarget.value;
|
|
22
|
+
}
|
|
23
23
|
|
|
24
24
|
</script>
|
|
25
25
|
|
|
26
26
|
<label class="iroco-ui-radio">
|
|
27
|
-
<input type="radio" bind:group={group} {value} {name} {checked} {onchange}/>
|
|
27
|
+
<input type="radio" bind:group={group} {value} {name} {checked} {onchange} />
|
|
28
28
|
<span class="radio-button-color"></span>
|
|
29
29
|
{@render children?.()}
|
|
30
30
|
</label>
|
package/dist/TextInput.svelte
CHANGED