@oicl/openbridge-webcomponents-svelte 2.0.0-next.59 → 2.0.0-next.60
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/navigation-item/ObcNavigationItem.svelte +16 -1
- package/dist/components/navigation-item/ObcNavigationItem.svelte.d.ts +15 -0
- package/dist/components/navigation-item-group/ObcNavigationItemGroup.svelte +18 -1
- package/dist/components/navigation-item-group/ObcNavigationItemGroup.svelte.d.ts +17 -0
- package/dist/components/navigation-menu/ObcNavigationMenu.svelte +2 -1
- package/dist/components/navigation-menu/ObcNavigationMenu.svelte.d.ts +2 -1
- package/dist/components/tree-navigation/ObcTreeNavigation.svelte +32 -0
- package/dist/components/tree-navigation/ObcTreeNavigation.svelte.d.ts +15 -0
- package/dist/components/tree-navigation-group/ObcTreeNavigationGroup.svelte +64 -0
- package/dist/components/tree-navigation-group/ObcTreeNavigationGroup.svelte.d.ts +46 -0
- package/dist/components/tree-navigation-item/ObcTreeNavigationItem.svelte +68 -0
- package/dist/components/tree-navigation-item/ObcTreeNavigationItem.svelte.d.ts +53 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +3 -0
- package/package.json +2 -2
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
|
|
2
2
|
<script lang="ts">
|
|
3
3
|
export type {ObcNavigationMenuVariant} from '@oicl/openbridge-webcomponents/dist/components/navigation-menu/navigation-menu.js';
|
|
4
|
+
export type {TreeBranchType} from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
|
|
4
5
|
import '@oicl/openbridge-webcomponents/dist/components/navigation-item/navigation-item.js';
|
|
5
6
|
import { setProperties } from "../../util.js";
|
|
6
7
|
import type {ObcNavigationMenuVariant} from '@oicl/openbridge-webcomponents/dist/components/navigation-menu/navigation-menu.js';
|
|
8
|
+
import type {TreeBranchType} from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
|
|
7
9
|
import type { Snippet } from 'svelte';
|
|
8
10
|
|
|
9
11
|
export interface Props {
|
|
@@ -31,7 +33,20 @@ Only relevant when `group` is true. */
|
|
|
31
33
|
groupSelected?: boolean;
|
|
32
34
|
/** Whether the item has a leading icon. */
|
|
33
35
|
hasIcon?: boolean;
|
|
34
|
-
hasTrailingIcon?: boolean
|
|
36
|
+
hasTrailingIcon?: boolean;
|
|
37
|
+
/** Set by `obc-navigation-menu` in its Tree variant — renders the row as a tree item. */
|
|
38
|
+
treeMode?: boolean;
|
|
39
|
+
/** Indentation columns for tree mode, assigned by `obc-navigation-menu`. */
|
|
40
|
+
treeBranches?: TreeBranchType[];
|
|
41
|
+
/** Terminal type for the row in the Tree variant — one of `regular` (default),
|
|
42
|
+
`aggregated-header`, or `group-header`. Has no effect in the flat variants. */
|
|
43
|
+
terminalType?: string;
|
|
44
|
+
/** Whether a trailing alert counter badge is shown (Tree variant only). */
|
|
45
|
+
hasAlertBadge?: boolean;
|
|
46
|
+
/** The number shown in the alert badge when `hasAlertBadge` is true (Tree variant only). */
|
|
47
|
+
alertCount?: number;
|
|
48
|
+
/** The severity/type of the alert badge — one of the `obc-badge` types (Tree variant only). */
|
|
49
|
+
alertType?: string
|
|
35
50
|
}
|
|
36
51
|
export interface Events {
|
|
37
52
|
onClick?: (event: CustomEvent<void>) => void
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import '@oicl/openbridge-webcomponents/dist/components/navigation-item/navigation-item.js';
|
|
2
2
|
import type { ObcNavigationMenuVariant } from '@oicl/openbridge-webcomponents/dist/components/navigation-menu/navigation-menu.js';
|
|
3
|
+
import type { TreeBranchType } from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
|
|
3
4
|
import type { Snippet } from 'svelte';
|
|
4
5
|
export interface Props {
|
|
5
6
|
class?: string;
|
|
@@ -27,6 +28,19 @@ Only relevant when `group` is true. */
|
|
|
27
28
|
/** Whether the item has a leading icon. */
|
|
28
29
|
hasIcon?: boolean;
|
|
29
30
|
hasTrailingIcon?: boolean;
|
|
31
|
+
/** Set by `obc-navigation-menu` in its Tree variant — renders the row as a tree item. */
|
|
32
|
+
treeMode?: boolean;
|
|
33
|
+
/** Indentation columns for tree mode, assigned by `obc-navigation-menu`. */
|
|
34
|
+
treeBranches?: TreeBranchType[];
|
|
35
|
+
/** Terminal type for the row in the Tree variant — one of `regular` (default),
|
|
36
|
+
`aggregated-header`, or `group-header`. Has no effect in the flat variants. */
|
|
37
|
+
terminalType?: string;
|
|
38
|
+
/** Whether a trailing alert counter badge is shown (Tree variant only). */
|
|
39
|
+
hasAlertBadge?: boolean;
|
|
40
|
+
/** The number shown in the alert badge when `hasAlertBadge` is true (Tree variant only). */
|
|
41
|
+
alertCount?: number;
|
|
42
|
+
/** The severity/type of the alert badge — one of the `obc-badge` types (Tree variant only). */
|
|
43
|
+
alertType?: string;
|
|
30
44
|
}
|
|
31
45
|
export interface Events {
|
|
32
46
|
onClick?: (event: CustomEvent<void>) => void;
|
|
@@ -38,6 +52,7 @@ export interface Slots {
|
|
|
38
52
|
type $$ComponentProps = Props & Events & Slots;
|
|
39
53
|
declare const ObcNavigationItem: import("svelte").Component<$$ComponentProps, {
|
|
40
54
|
ObcNavigationMenuVariant: typeof ObcNavigationMenuVariant;
|
|
55
|
+
TreeBranchType: typeof TreeBranchType;
|
|
41
56
|
}, "">;
|
|
42
57
|
type ObcNavigationItem = ReturnType<typeof ObcNavigationItem>;
|
|
43
58
|
export default ObcNavigationItem;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
|
|
2
2
|
<script lang="ts">
|
|
3
3
|
export type {ObcNavigationMenuVariant} from '@oicl/openbridge-webcomponents/dist/components/navigation-menu/navigation-menu.js';
|
|
4
|
+
export type {TreeBranchType} from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
|
|
4
5
|
import '@oicl/openbridge-webcomponents/dist/components/navigation-item-group/navigation-item-group.js';
|
|
5
6
|
import { setProperties } from "../../util.js";
|
|
6
7
|
import type {ObcNavigationMenuVariant} from '@oicl/openbridge-webcomponents/dist/components/navigation-menu/navigation-menu.js';
|
|
8
|
+
import type {TreeBranchType} from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
|
|
7
9
|
import type { Snippet } from 'svelte';
|
|
8
10
|
|
|
9
11
|
export interface Props {
|
|
@@ -23,7 +25,22 @@ Controls the styling and layout of the group and its flyout. */
|
|
|
23
25
|
variant?: ObcNavigationMenuVariant;
|
|
24
26
|
/** If true, the flyout panel appears tightly anchored to the group label with compact styling. */
|
|
25
27
|
hug?: boolean;
|
|
26
|
-
hasIcon?: boolean
|
|
28
|
+
hasIcon?: boolean;
|
|
29
|
+
/** Set by `obc-navigation-menu` in its Tree variant — renders the group as a tree row. */
|
|
30
|
+
treeMode?: boolean;
|
|
31
|
+
/** Indentation columns for tree mode, assigned by `obc-navigation-menu`. */
|
|
32
|
+
treeBranches?: TreeBranchType[];
|
|
33
|
+
/** Terminal type for the group header in the Tree variant — one of `regular`
|
|
34
|
+
(default), `aggregated-header`, or `group-header`. No effect in flat variants. */
|
|
35
|
+
terminalType?: string;
|
|
36
|
+
/** Whether a trailing alert counter badge is shown on the header (Tree variant only). */
|
|
37
|
+
hasAlertBadge?: boolean;
|
|
38
|
+
/** The number shown in the header's alert badge when `hasAlertBadge` is true (Tree variant only). */
|
|
39
|
+
alertCount?: number;
|
|
40
|
+
/** The severity/type of the header's alert badge — one of the `obc-badge` types (Tree variant only). */
|
|
41
|
+
alertType?: string;
|
|
42
|
+
/** Whether the group starts expanded. Useful for trees that open by default. */
|
|
43
|
+
defaultOpen?: boolean
|
|
27
44
|
}
|
|
28
45
|
export interface Events {
|
|
29
46
|
onOpen?: (event: CustomEvent<void>) => void
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import '@oicl/openbridge-webcomponents/dist/components/navigation-item-group/navigation-item-group.js';
|
|
2
2
|
import type { ObcNavigationMenuVariant } from '@oicl/openbridge-webcomponents/dist/components/navigation-menu/navigation-menu.js';
|
|
3
|
+
import type { TreeBranchType } from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
|
|
3
4
|
import type { Snippet } from 'svelte';
|
|
4
5
|
export interface Props {
|
|
5
6
|
class?: string;
|
|
@@ -19,6 +20,21 @@ Controls the styling and layout of the group and its flyout. */
|
|
|
19
20
|
/** If true, the flyout panel appears tightly anchored to the group label with compact styling. */
|
|
20
21
|
hug?: boolean;
|
|
21
22
|
hasIcon?: boolean;
|
|
23
|
+
/** Set by `obc-navigation-menu` in its Tree variant — renders the group as a tree row. */
|
|
24
|
+
treeMode?: boolean;
|
|
25
|
+
/** Indentation columns for tree mode, assigned by `obc-navigation-menu`. */
|
|
26
|
+
treeBranches?: TreeBranchType[];
|
|
27
|
+
/** Terminal type for the group header in the Tree variant — one of `regular`
|
|
28
|
+
(default), `aggregated-header`, or `group-header`. No effect in flat variants. */
|
|
29
|
+
terminalType?: string;
|
|
30
|
+
/** Whether a trailing alert counter badge is shown on the header (Tree variant only). */
|
|
31
|
+
hasAlertBadge?: boolean;
|
|
32
|
+
/** The number shown in the header's alert badge when `hasAlertBadge` is true (Tree variant only). */
|
|
33
|
+
alertCount?: number;
|
|
34
|
+
/** The severity/type of the header's alert badge — one of the `obc-badge` types (Tree variant only). */
|
|
35
|
+
alertType?: string;
|
|
36
|
+
/** Whether the group starts expanded. Useful for trees that open by default. */
|
|
37
|
+
defaultOpen?: boolean;
|
|
22
38
|
}
|
|
23
39
|
export interface Events {
|
|
24
40
|
onOpen?: (event: CustomEvent<void>) => void;
|
|
@@ -30,6 +46,7 @@ export interface Slots {
|
|
|
30
46
|
type $$ComponentProps = Props & Events & Slots;
|
|
31
47
|
declare const ObcNavigationItemGroup: import("svelte").Component<$$ComponentProps, {
|
|
32
48
|
ObcNavigationMenuVariant: typeof ObcNavigationMenuVariant;
|
|
49
|
+
TreeBranchType: typeof TreeBranchType;
|
|
33
50
|
}, "">;
|
|
34
51
|
type ObcNavigationItemGroup = ReturnType<typeof ObcNavigationItemGroup>;
|
|
35
52
|
export default ObcNavigationItemGroup;
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
- `full`: Standard menu with icons and labels (default).
|
|
15
15
|
- `icon-only`: Compact, icon-only menu (use only when no flyouts/groups are present).
|
|
16
16
|
- `icon-only-large`: Icon-only menu supporting flyouts/groups.
|
|
17
|
-
- `compact`: Minimal, space-saving menu.
|
|
17
|
+
- `compact`: Minimal, space-saving menu.
|
|
18
|
+
- `tree`: Hierarchical tree — groups expand inline and rows are indented by depth. */
|
|
18
19
|
variant?: ObcNavigationMenuVariant;
|
|
19
20
|
/** Visual variant of the flyout.
|
|
20
21
|
One of `Full` (default) or `Compact`. */
|
|
@@ -9,7 +9,8 @@ export interface Props {
|
|
|
9
9
|
- `full`: Standard menu with icons and labels (default).
|
|
10
10
|
- `icon-only`: Compact, icon-only menu (use only when no flyouts/groups are present).
|
|
11
11
|
- `icon-only-large`: Icon-only menu supporting flyouts/groups.
|
|
12
|
-
- `compact`: Minimal, space-saving menu.
|
|
12
|
+
- `compact`: Minimal, space-saving menu.
|
|
13
|
+
- `tree`: Hierarchical tree — groups expand inline and rows are indented by depth. */
|
|
13
14
|
variant?: ObcNavigationMenuVariant;
|
|
14
15
|
/** Visual variant of the flyout.
|
|
15
16
|
One of `Full` (default) or `Compact`. */
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
|
|
2
|
+
<script lang="ts">
|
|
3
|
+
|
|
4
|
+
import '@oicl/openbridge-webcomponents/dist/components/tree-navigation/tree-navigation.js';
|
|
5
|
+
import { setProperties } from "../../util.js";
|
|
6
|
+
|
|
7
|
+
import type { Snippet } from 'svelte';
|
|
8
|
+
|
|
9
|
+
export interface Props {
|
|
10
|
+
class?: string;
|
|
11
|
+
style?: string;
|
|
12
|
+
|
|
13
|
+
}
|
|
14
|
+
export interface Events {
|
|
15
|
+
|
|
16
|
+
}
|
|
17
|
+
export interface Slots {
|
|
18
|
+
children?: Snippet
|
|
19
|
+
}
|
|
20
|
+
const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
|
|
21
|
+
|
|
22
|
+
</script>
|
|
23
|
+
<obc-tree-navigation
|
|
24
|
+
use:setProperties={props}
|
|
25
|
+
class={className}
|
|
26
|
+
style={style}
|
|
27
|
+
>
|
|
28
|
+
|
|
29
|
+
{#if children}
|
|
30
|
+
{@render children()}
|
|
31
|
+
{/if}
|
|
32
|
+
</obc-tree-navigation>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import '@oicl/openbridge-webcomponents/dist/components/tree-navigation/tree-navigation.js';
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
export interface Props {
|
|
4
|
+
class?: string;
|
|
5
|
+
style?: string;
|
|
6
|
+
}
|
|
7
|
+
export interface Events {
|
|
8
|
+
}
|
|
9
|
+
export interface Slots {
|
|
10
|
+
children?: Snippet;
|
|
11
|
+
}
|
|
12
|
+
type $$ComponentProps = Props & Events & Slots;
|
|
13
|
+
declare const ObcTreeNavigation: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
14
|
+
type ObcTreeNavigation = ReturnType<typeof ObcTreeNavigation>;
|
|
15
|
+
export default ObcTreeNavigation;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
|
|
2
|
+
<script lang="ts">
|
|
3
|
+
export type {TreeBranchType} from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
|
|
4
|
+
import '@oicl/openbridge-webcomponents/dist/components/tree-navigation-group/tree-navigation-group.js';
|
|
5
|
+
import { setProperties } from "../../util.js";
|
|
6
|
+
import type {TreeBranchType} from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
|
|
7
|
+
import type { Snippet } from 'svelte';
|
|
8
|
+
|
|
9
|
+
export interface Props {
|
|
10
|
+
class?: string;
|
|
11
|
+
style?: string;
|
|
12
|
+
/** The text label displayed for the group header row. */
|
|
13
|
+
label?: string;
|
|
14
|
+
/** Guide line to draw for each ancestor level of the header row. Normally set by
|
|
15
|
+
the parent `<obc-tree-navigation>` container from the group's position; only
|
|
16
|
+
set it manually when using a group outside the container. */
|
|
17
|
+
branches?: TreeBranchType[];
|
|
18
|
+
/** Whether the group is expanded, disclosing its children. Rotates the chevron. */
|
|
19
|
+
expanded?: boolean;
|
|
20
|
+
/** Whether the group header is the current selection. */
|
|
21
|
+
checked?: boolean;
|
|
22
|
+
/** Disables the group header, removing it from the tab order and dimming it. */
|
|
23
|
+
disabled?: boolean;
|
|
24
|
+
/** Whether the group header shows a leading icon (provided via the `icon` slot). */
|
|
25
|
+
hasIcon?: boolean;
|
|
26
|
+
/** Terminal type for the header row, controlling the alert-header marker shown in
|
|
27
|
+
the terminal. One of `regular` (default), `aggregated-header`, or `group-header`. */
|
|
28
|
+
terminalType?: string;
|
|
29
|
+
/** Whether a trailing alert counter badge is shown on the header row. */
|
|
30
|
+
hasAlertBadge?: boolean;
|
|
31
|
+
/** The number shown in the header's alert badge when `hasAlertBadge` is true. */
|
|
32
|
+
alertCount?: number;
|
|
33
|
+
/** The severity/type of the header's alert badge. One of the `obc-badge` types (default `alarm`). */
|
|
34
|
+
alertType?: string;
|
|
35
|
+
/** The URL to navigate to when the header is activated. If set, the header row
|
|
36
|
+
renders as a link; otherwise it acts as a button. */
|
|
37
|
+
href?: string | undefined
|
|
38
|
+
}
|
|
39
|
+
export interface Events {
|
|
40
|
+
onExpandToggle?: (event: CustomEvent<boolean>) => void
|
|
41
|
+
}
|
|
42
|
+
export interface Slots {
|
|
43
|
+
icon?: Snippet;
|
|
44
|
+
children?: Snippet
|
|
45
|
+
}
|
|
46
|
+
const {onExpandToggle, class: className, style, icon, children, ...props} = $props<Props & Events & Slots>();
|
|
47
|
+
|
|
48
|
+
</script>
|
|
49
|
+
<obc-tree-navigation-group
|
|
50
|
+
use:setProperties={props}
|
|
51
|
+
class={className}
|
|
52
|
+
style={style}
|
|
53
|
+
onexpand-toggle={onExpandToggle} >
|
|
54
|
+
|
|
55
|
+
{#if icon}
|
|
56
|
+
<div slot="icon">
|
|
57
|
+
{@render icon()}
|
|
58
|
+
</div>
|
|
59
|
+
{/if}
|
|
60
|
+
|
|
61
|
+
{#if children}
|
|
62
|
+
{@render children()}
|
|
63
|
+
{/if}
|
|
64
|
+
</obc-tree-navigation-group>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import '@oicl/openbridge-webcomponents/dist/components/tree-navigation-group/tree-navigation-group.js';
|
|
2
|
+
import type { TreeBranchType } from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
|
|
3
|
+
import type { Snippet } from 'svelte';
|
|
4
|
+
export interface Props {
|
|
5
|
+
class?: string;
|
|
6
|
+
style?: string;
|
|
7
|
+
/** The text label displayed for the group header row. */
|
|
8
|
+
label?: string;
|
|
9
|
+
/** Guide line to draw for each ancestor level of the header row. Normally set by
|
|
10
|
+
the parent `<obc-tree-navigation>` container from the group's position; only
|
|
11
|
+
set it manually when using a group outside the container. */
|
|
12
|
+
branches?: TreeBranchType[];
|
|
13
|
+
/** Whether the group is expanded, disclosing its children. Rotates the chevron. */
|
|
14
|
+
expanded?: boolean;
|
|
15
|
+
/** Whether the group header is the current selection. */
|
|
16
|
+
checked?: boolean;
|
|
17
|
+
/** Disables the group header, removing it from the tab order and dimming it. */
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
/** Whether the group header shows a leading icon (provided via the `icon` slot). */
|
|
20
|
+
hasIcon?: boolean;
|
|
21
|
+
/** Terminal type for the header row, controlling the alert-header marker shown in
|
|
22
|
+
the terminal. One of `regular` (default), `aggregated-header`, or `group-header`. */
|
|
23
|
+
terminalType?: string;
|
|
24
|
+
/** Whether a trailing alert counter badge is shown on the header row. */
|
|
25
|
+
hasAlertBadge?: boolean;
|
|
26
|
+
/** The number shown in the header's alert badge when `hasAlertBadge` is true. */
|
|
27
|
+
alertCount?: number;
|
|
28
|
+
/** The severity/type of the header's alert badge. One of the `obc-badge` types (default `alarm`). */
|
|
29
|
+
alertType?: string;
|
|
30
|
+
/** The URL to navigate to when the header is activated. If set, the header row
|
|
31
|
+
renders as a link; otherwise it acts as a button. */
|
|
32
|
+
href?: string | undefined;
|
|
33
|
+
}
|
|
34
|
+
export interface Events {
|
|
35
|
+
onExpandToggle?: (event: CustomEvent<boolean>) => void;
|
|
36
|
+
}
|
|
37
|
+
export interface Slots {
|
|
38
|
+
icon?: Snippet;
|
|
39
|
+
children?: Snippet;
|
|
40
|
+
}
|
|
41
|
+
type $$ComponentProps = Props & Events & Slots;
|
|
42
|
+
declare const ObcTreeNavigationGroup: import("svelte").Component<$$ComponentProps, {
|
|
43
|
+
TreeBranchType: typeof TreeBranchType;
|
|
44
|
+
}, "">;
|
|
45
|
+
type ObcTreeNavigationGroup = ReturnType<typeof ObcTreeNavigationGroup>;
|
|
46
|
+
export default ObcTreeNavigationGroup;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
|
|
2
|
+
<script lang="ts">
|
|
3
|
+
export type {TreeBranchType} from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
|
|
4
|
+
import '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
|
|
5
|
+
import { setProperties } from "../../util.js";
|
|
6
|
+
import type {TreeBranchType} from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
|
|
7
|
+
import type { Snippet } from 'svelte';
|
|
8
|
+
|
|
9
|
+
export interface Props {
|
|
10
|
+
class?: string;
|
|
11
|
+
style?: string;
|
|
12
|
+
/** The text label displayed for the row. */
|
|
13
|
+
label?: string;
|
|
14
|
+
/** Guide line for each ancestor level, outermost first; one 32px column per
|
|
15
|
+
entry. Computed by `obc-tree-navigation` — rarely set by hand. */
|
|
16
|
+
branches?: TreeBranchType[];
|
|
17
|
+
/** Whether the row shows an expand/collapse chevron. Leave false for leaf nodes. */
|
|
18
|
+
expandable?: boolean;
|
|
19
|
+
/** Whether the node is expanded. Rotates the chevron and sets `aria-expanded`. */
|
|
20
|
+
expanded?: boolean;
|
|
21
|
+
/** Whether the row is the current selection. Applies the amplified style and
|
|
22
|
+
makes the row inert to re-selection (no hover/pressed feedback, no `click`
|
|
23
|
+
or navigation); it remains keyboard-focusable. An expandable checked row
|
|
24
|
+
still fires `expand-toggle` so a selected group can open and close. */
|
|
25
|
+
checked?: boolean;
|
|
26
|
+
/** Disables the row, removing it from the tab order and dimming its appearance. */
|
|
27
|
+
disabled?: boolean;
|
|
28
|
+
/** Whether the row is in the tab order. A tree container manages this as a
|
|
29
|
+
roving tabindex (one row focusable at a time); standalone rows stay tabbable. */
|
|
30
|
+
focusable?: boolean;
|
|
31
|
+
/** Whether the row shows a leading icon (provided via the `icon` slot). */
|
|
32
|
+
hasLeadingIcon?: boolean;
|
|
33
|
+
/** Terminal type, controlling the alert-header marker shown in the terminal.
|
|
34
|
+
One of `regular` (default), `aggregated-header`, or `group-header`. */
|
|
35
|
+
terminalType?: string;
|
|
36
|
+
/** Whether a trailing alert counter badge is shown. */
|
|
37
|
+
hasAlertBadge?: boolean;
|
|
38
|
+
/** The number shown in the alert badge when `hasAlertBadge` is true. */
|
|
39
|
+
alertCount?: number;
|
|
40
|
+
/** The severity/type of the alert badge. One of the `obc-badge` types (default `alarm`). */
|
|
41
|
+
alertType?: string;
|
|
42
|
+
/** The URL to navigate to when the row is activated. If set, the row renders as
|
|
43
|
+
a link; otherwise it acts as a button. */
|
|
44
|
+
href?: string | undefined
|
|
45
|
+
}
|
|
46
|
+
export interface Events {
|
|
47
|
+
onExpandToggle?: (event: CustomEvent<boolean>) => void;
|
|
48
|
+
onClick?: (event: CustomEvent<void>) => void
|
|
49
|
+
}
|
|
50
|
+
export interface Slots {
|
|
51
|
+
icon?: Snippet
|
|
52
|
+
}
|
|
53
|
+
const {onExpandToggle, onClick, class: className, style, icon, ...props} = $props<Props & Events & Slots>();
|
|
54
|
+
|
|
55
|
+
</script>
|
|
56
|
+
<obc-tree-navigation-item
|
|
57
|
+
use:setProperties={props}
|
|
58
|
+
class={className}
|
|
59
|
+
style={style}
|
|
60
|
+
onexpand-toggle={onExpandToggle}
|
|
61
|
+
onclick={onClick} >
|
|
62
|
+
|
|
63
|
+
{#if icon}
|
|
64
|
+
<div slot="icon">
|
|
65
|
+
{@render icon()}
|
|
66
|
+
</div>
|
|
67
|
+
{/if}
|
|
68
|
+
</obc-tree-navigation-item>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
|
|
2
|
+
import type { TreeBranchType } from '@oicl/openbridge-webcomponents/dist/components/tree-navigation-item/tree-navigation-item.js';
|
|
3
|
+
import type { Snippet } from 'svelte';
|
|
4
|
+
export interface Props {
|
|
5
|
+
class?: string;
|
|
6
|
+
style?: string;
|
|
7
|
+
/** The text label displayed for the row. */
|
|
8
|
+
label?: string;
|
|
9
|
+
/** Guide line for each ancestor level, outermost first; one 32px column per
|
|
10
|
+
entry. Computed by `obc-tree-navigation` — rarely set by hand. */
|
|
11
|
+
branches?: TreeBranchType[];
|
|
12
|
+
/** Whether the row shows an expand/collapse chevron. Leave false for leaf nodes. */
|
|
13
|
+
expandable?: boolean;
|
|
14
|
+
/** Whether the node is expanded. Rotates the chevron and sets `aria-expanded`. */
|
|
15
|
+
expanded?: boolean;
|
|
16
|
+
/** Whether the row is the current selection. Applies the amplified style and
|
|
17
|
+
makes the row inert to re-selection (no hover/pressed feedback, no `click`
|
|
18
|
+
or navigation); it remains keyboard-focusable. An expandable checked row
|
|
19
|
+
still fires `expand-toggle` so a selected group can open and close. */
|
|
20
|
+
checked?: boolean;
|
|
21
|
+
/** Disables the row, removing it from the tab order and dimming its appearance. */
|
|
22
|
+
disabled?: boolean;
|
|
23
|
+
/** Whether the row is in the tab order. A tree container manages this as a
|
|
24
|
+
roving tabindex (one row focusable at a time); standalone rows stay tabbable. */
|
|
25
|
+
focusable?: boolean;
|
|
26
|
+
/** Whether the row shows a leading icon (provided via the `icon` slot). */
|
|
27
|
+
hasLeadingIcon?: boolean;
|
|
28
|
+
/** Terminal type, controlling the alert-header marker shown in the terminal.
|
|
29
|
+
One of `regular` (default), `aggregated-header`, or `group-header`. */
|
|
30
|
+
terminalType?: string;
|
|
31
|
+
/** Whether a trailing alert counter badge is shown. */
|
|
32
|
+
hasAlertBadge?: boolean;
|
|
33
|
+
/** The number shown in the alert badge when `hasAlertBadge` is true. */
|
|
34
|
+
alertCount?: number;
|
|
35
|
+
/** The severity/type of the alert badge. One of the `obc-badge` types (default `alarm`). */
|
|
36
|
+
alertType?: string;
|
|
37
|
+
/** The URL to navigate to when the row is activated. If set, the row renders as
|
|
38
|
+
a link; otherwise it acts as a button. */
|
|
39
|
+
href?: string | undefined;
|
|
40
|
+
}
|
|
41
|
+
export interface Events {
|
|
42
|
+
onExpandToggle?: (event: CustomEvent<boolean>) => void;
|
|
43
|
+
onClick?: (event: CustomEvent<void>) => void;
|
|
44
|
+
}
|
|
45
|
+
export interface Slots {
|
|
46
|
+
icon?: Snippet;
|
|
47
|
+
}
|
|
48
|
+
type $$ComponentProps = Props & Events & Slots;
|
|
49
|
+
declare const ObcTreeNavigationItem: import("svelte").Component<$$ComponentProps, {
|
|
50
|
+
TreeBranchType: typeof TreeBranchType;
|
|
51
|
+
}, "">;
|
|
52
|
+
type ObcTreeNavigationItem = ReturnType<typeof ObcTreeNavigationItem>;
|
|
53
|
+
export default ObcTreeNavigationItem;
|
package/dist/index.d.ts
CHANGED
|
@@ -186,6 +186,9 @@ export { default as ObcToggletip } from './components/toggletip/ObcToggletip.sve
|
|
|
186
186
|
export { default as ObcTooltip } from './components/tooltip/ObcTooltip.svelte';
|
|
187
187
|
export { default as ObcTopBar } from './components/top-bar/ObcTopBar.svelte';
|
|
188
188
|
export { default as ObcTopbarMessageItem } from './components/topbar-message-item/ObcTopbarMessageItem.svelte';
|
|
189
|
+
export { default as ObcTreeNavigation } from './components/tree-navigation/ObcTreeNavigation.svelte';
|
|
190
|
+
export { default as ObcTreeNavigationGroup } from './components/tree-navigation-group/ObcTreeNavigationGroup.svelte';
|
|
191
|
+
export { default as ObcTreeNavigationItem } from './components/tree-navigation-item/ObcTreeNavigationItem.svelte';
|
|
189
192
|
export { default as ObcUserButton } from './components/user-button/ObcUserButton.svelte';
|
|
190
193
|
export { default as ObcUserMenu } from './components/user-menu/ObcUserMenu.svelte';
|
|
191
194
|
export { default as ObcVendorButton } from './components/vendor-button/ObcVendorButton.svelte';
|
package/dist/index.js
CHANGED
|
@@ -186,6 +186,9 @@ export { default as ObcToggletip } from './components/toggletip/ObcToggletip.sve
|
|
|
186
186
|
export { default as ObcTooltip } from './components/tooltip/ObcTooltip.svelte';
|
|
187
187
|
export { default as ObcTopBar } from './components/top-bar/ObcTopBar.svelte';
|
|
188
188
|
export { default as ObcTopbarMessageItem } from './components/topbar-message-item/ObcTopbarMessageItem.svelte';
|
|
189
|
+
export { default as ObcTreeNavigation } from './components/tree-navigation/ObcTreeNavigation.svelte';
|
|
190
|
+
export { default as ObcTreeNavigationGroup } from './components/tree-navigation-group/ObcTreeNavigationGroup.svelte';
|
|
191
|
+
export { default as ObcTreeNavigationItem } from './components/tree-navigation-item/ObcTreeNavigationItem.svelte';
|
|
189
192
|
export { default as ObcUserButton } from './components/user-button/ObcUserButton.svelte';
|
|
190
193
|
export { default as ObcUserMenu } from './components/user-menu/ObcUserMenu.svelte';
|
|
191
194
|
export { default as ObcVendorButton } from './components/vendor-button/ObcVendorButton.svelte';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oicl/openbridge-webcomponents-svelte",
|
|
3
|
-
"version": "2.0.0-next.
|
|
3
|
+
"version": "2.0.0-next.60",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "vite build && npm run prepack",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@oicl/openbridge-webcomponents": "^2.0.0-next.
|
|
34
|
+
"@oicl/openbridge-webcomponents": "^2.0.0-next.59"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
37
|
"svelte": "^5.0.0"
|