@oicl/openbridge-webcomponents-svelte 2.0.0-next.144 → 2.0.0-next.145
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/checkbox-item/ObcCheckboxItem.svelte +27 -13
- package/dist/components/checkbox-item/ObcCheckboxItem.svelte.d.ts +21 -6
- package/dist/components/checkbox-list/ObcCheckboxList.svelte +33 -0
- package/dist/components/checkbox-list/ObcCheckboxList.svelte.d.ts +20 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +2 -2
|
@@ -1,44 +1,58 @@
|
|
|
1
1
|
|
|
2
2
|
<script lang="ts">
|
|
3
3
|
export type {ObcCheckboxChangeEvent, CheckboxStatus} from '@oicl/openbridge-webcomponents/dist/components/checkbox/checkbox.js';
|
|
4
|
-
export type {ObcCheckboxItemState, ObcCheckboxItemHoverStyle} from '@oicl/openbridge-webcomponents/dist/components/checkbox-item/checkbox-item.js';
|
|
4
|
+
export type {ObcCheckboxItemExpandToggleEvent, ObcCheckboxItemState, ObcCheckboxItemHoverStyle} from '@oicl/openbridge-webcomponents/dist/components/checkbox-item/checkbox-item.js';
|
|
5
5
|
import '@oicl/openbridge-webcomponents/dist/components/checkbox-item/checkbox-item.js';
|
|
6
6
|
import { setProperties, forwardEvents } from "../../util.js";
|
|
7
7
|
import type {ObcCheckboxChangeEvent, CheckboxStatus} from '@oicl/openbridge-webcomponents/dist/components/checkbox/checkbox.js';
|
|
8
|
-
import type {ObcCheckboxItemState, ObcCheckboxItemHoverStyle} from '@oicl/openbridge-webcomponents/dist/components/checkbox-item/checkbox-item.js';
|
|
8
|
+
import type {ObcCheckboxItemExpandToggleEvent, ObcCheckboxItemState, ObcCheckboxItemHoverStyle} from '@oicl/openbridge-webcomponents/dist/components/checkbox-item/checkbox-item.js';
|
|
9
9
|
import type { Snippet } from 'svelte';
|
|
10
10
|
|
|
11
11
|
export interface Props {
|
|
12
12
|
class?: string;
|
|
13
13
|
style?: string;
|
|
14
|
+
/** Checkbox status: `unchecked`, `checked` or `mixed`. */
|
|
14
15
|
status?: CheckboxStatus;
|
|
16
|
+
/** Item state: `enabled` or `disabled`. */
|
|
15
17
|
state?: ObcCheckboxItemState;
|
|
18
|
+
/** Disables the row and the inner checkbox. */
|
|
16
19
|
disabled?: boolean;
|
|
20
|
+
/** Text label; also the checkbox's accessible name. */
|
|
17
21
|
label?: string;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
/** Secondary line under the label; hidden when empty. */
|
|
23
|
+
description?: string;
|
|
24
|
+
/** Depth in a nested list. 0 is a plain row; 1 reserves the chevron slot; each level above 1 adds a spacer. */
|
|
25
|
+
level?: number;
|
|
26
|
+
/** Shows the chevron button that fires `expand-toggle`. */
|
|
27
|
+
expandable?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Whether the row's children are shown; drives the chevron direction and `aria-expanded`.
|
|
30
|
+
*
|
|
31
|
+
* Available when `expandable==true`.
|
|
32
|
+
*/
|
|
33
|
+
expanded?: boolean;
|
|
34
|
+
/** Which box shows hover and focus: the whole row (`touch-target`) or the checkbox (`visual-target`). */
|
|
23
35
|
hoverStyle?: ObcCheckboxItemHoverStyle;
|
|
36
|
+
/** Forwarded to the inner checkbox as `aria-describedby`. */
|
|
24
37
|
ariaDescribedBy?: string
|
|
25
38
|
}
|
|
26
39
|
export interface Events {
|
|
27
|
-
onChange?: (event: ObcCheckboxChangeEvent) => void
|
|
40
|
+
onChange?: (event: ObcCheckboxChangeEvent) => void;
|
|
41
|
+
onExpandToggle?: (event: ObcCheckboxItemExpandToggleEvent) => void
|
|
28
42
|
}
|
|
29
43
|
export interface Slots {
|
|
30
44
|
children?: Snippet
|
|
31
45
|
}
|
|
32
|
-
const {onChange, class: className, style, children, ...props} = $props<Props & Events & Slots>();
|
|
46
|
+
const {onChange, onExpandToggle, class: className, style, children, ...props} = $props<Props & Events & Slots>();
|
|
33
47
|
|
|
34
48
|
</script>
|
|
35
49
|
<obc-checkbox-item
|
|
36
50
|
use:setProperties={props}
|
|
37
51
|
class={className}
|
|
38
52
|
style={style}
|
|
39
|
-
use:forwardEvents={{'change': onChange}} >
|
|
53
|
+
use:forwardEvents={{'change': onChange, 'expand-toggle': onExpandToggle}} >
|
|
40
54
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
55
|
+
{#if children}
|
|
56
|
+
{@render children()}
|
|
57
|
+
{/if}
|
|
44
58
|
</obc-checkbox-item>
|
|
@@ -1,24 +1,38 @@
|
|
|
1
1
|
import '@oicl/openbridge-webcomponents/dist/components/checkbox-item/checkbox-item.js';
|
|
2
2
|
import type { ObcCheckboxChangeEvent, CheckboxStatus } from '@oicl/openbridge-webcomponents/dist/components/checkbox/checkbox.js';
|
|
3
|
-
import type { ObcCheckboxItemState, ObcCheckboxItemHoverStyle } from '@oicl/openbridge-webcomponents/dist/components/checkbox-item/checkbox-item.js';
|
|
3
|
+
import type { ObcCheckboxItemExpandToggleEvent, ObcCheckboxItemState, ObcCheckboxItemHoverStyle } from '@oicl/openbridge-webcomponents/dist/components/checkbox-item/checkbox-item.js';
|
|
4
4
|
import type { Snippet } from 'svelte';
|
|
5
5
|
export interface Props {
|
|
6
6
|
class?: string;
|
|
7
7
|
style?: string;
|
|
8
|
+
/** Checkbox status: `unchecked`, `checked` or `mixed`. */
|
|
8
9
|
status?: CheckboxStatus;
|
|
10
|
+
/** Item state: `enabled` or `disabled`. */
|
|
9
11
|
state?: ObcCheckboxItemState;
|
|
12
|
+
/** Disables the row and the inner checkbox. */
|
|
10
13
|
disabled?: boolean;
|
|
14
|
+
/** Text label; also the checkbox's accessible name. */
|
|
11
15
|
label?: string;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
/** Secondary line under the label; hidden when empty. */
|
|
17
|
+
description?: string;
|
|
18
|
+
/** Depth in a nested list. 0 is a plain row; 1 reserves the chevron slot; each level above 1 adds a spacer. */
|
|
19
|
+
level?: number;
|
|
20
|
+
/** Shows the chevron button that fires `expand-toggle`. */
|
|
21
|
+
expandable?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Whether the row's children are shown; drives the chevron direction and `aria-expanded`.
|
|
24
|
+
*
|
|
25
|
+
* Available when `expandable==true`.
|
|
26
|
+
*/
|
|
27
|
+
expanded?: boolean;
|
|
28
|
+
/** Which box shows hover and focus: the whole row (`touch-target`) or the checkbox (`visual-target`). */
|
|
17
29
|
hoverStyle?: ObcCheckboxItemHoverStyle;
|
|
30
|
+
/** Forwarded to the inner checkbox as `aria-describedby`. */
|
|
18
31
|
ariaDescribedBy?: string;
|
|
19
32
|
}
|
|
20
33
|
export interface Events {
|
|
21
34
|
onChange?: (event: ObcCheckboxChangeEvent) => void;
|
|
35
|
+
onExpandToggle?: (event: ObcCheckboxItemExpandToggleEvent) => void;
|
|
22
36
|
}
|
|
23
37
|
export interface Slots {
|
|
24
38
|
children?: Snippet;
|
|
@@ -27,6 +41,7 @@ type $$ComponentProps = Props & Events & Slots;
|
|
|
27
41
|
declare const ObcCheckboxItem: import("svelte").Component<$$ComponentProps, {
|
|
28
42
|
ObcCheckboxChangeEvent: typeof ObcCheckboxChangeEvent;
|
|
29
43
|
CheckboxStatus: typeof CheckboxStatus;
|
|
44
|
+
ObcCheckboxItemExpandToggleEvent: typeof ObcCheckboxItemExpandToggleEvent;
|
|
30
45
|
ObcCheckboxItemState: typeof ObcCheckboxItemState;
|
|
31
46
|
ObcCheckboxItemHoverStyle: typeof ObcCheckboxItemHoverStyle;
|
|
32
47
|
}, "">;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
|
|
2
|
+
<script lang="ts">
|
|
3
|
+
export type {ObcCheckboxItemHoverStyle} from '@oicl/openbridge-webcomponents/dist/components/checkbox-item/checkbox-item.js';
|
|
4
|
+
import '@oicl/openbridge-webcomponents/dist/components/checkbox-list/checkbox-list.js';
|
|
5
|
+
import { setProperties } from "../../util.js";
|
|
6
|
+
import type {ObcCheckboxItemHoverStyle} from '@oicl/openbridge-webcomponents/dist/components/checkbox-item/checkbox-item.js';
|
|
7
|
+
import type { Snippet } from 'svelte';
|
|
8
|
+
|
|
9
|
+
export interface Props {
|
|
10
|
+
class?: string;
|
|
11
|
+
style?: string;
|
|
12
|
+
/** Hover treatment applied to every slotted row: `touch-target` or `visual-target`. */
|
|
13
|
+
hoverStyle?: ObcCheckboxItemHoverStyle
|
|
14
|
+
}
|
|
15
|
+
export interface Events {
|
|
16
|
+
|
|
17
|
+
}
|
|
18
|
+
export interface Slots {
|
|
19
|
+
children?: Snippet
|
|
20
|
+
}
|
|
21
|
+
const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
|
|
22
|
+
|
|
23
|
+
</script>
|
|
24
|
+
<obc-checkbox-list
|
|
25
|
+
use:setProperties={props}
|
|
26
|
+
class={className}
|
|
27
|
+
style={style}
|
|
28
|
+
>
|
|
29
|
+
|
|
30
|
+
{#if children}
|
|
31
|
+
{@render children()}
|
|
32
|
+
{/if}
|
|
33
|
+
</obc-checkbox-list>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import '@oicl/openbridge-webcomponents/dist/components/checkbox-list/checkbox-list.js';
|
|
2
|
+
import type { ObcCheckboxItemHoverStyle } from '@oicl/openbridge-webcomponents/dist/components/checkbox-item/checkbox-item.js';
|
|
3
|
+
import type { Snippet } from 'svelte';
|
|
4
|
+
export interface Props {
|
|
5
|
+
class?: string;
|
|
6
|
+
style?: string;
|
|
7
|
+
/** Hover treatment applied to every slotted row: `touch-target` or `visual-target`. */
|
|
8
|
+
hoverStyle?: ObcCheckboxItemHoverStyle;
|
|
9
|
+
}
|
|
10
|
+
export interface Events {
|
|
11
|
+
}
|
|
12
|
+
export interface Slots {
|
|
13
|
+
children?: Snippet;
|
|
14
|
+
}
|
|
15
|
+
type $$ComponentProps = Props & Events & Slots;
|
|
16
|
+
declare const ObcCheckboxList: import("svelte").Component<$$ComponentProps, {
|
|
17
|
+
ObcCheckboxItemHoverStyle: typeof ObcCheckboxItemHoverStyle;
|
|
18
|
+
}, "">;
|
|
19
|
+
type ObcCheckboxList = ReturnType<typeof ObcCheckboxList>;
|
|
20
|
+
export default ObcCheckboxList;
|
package/dist/index.d.ts
CHANGED
|
@@ -126,6 +126,7 @@ export { default as ObcChatMessage } from './components/chat-message/ObcChatMess
|
|
|
126
126
|
export { default as ObcCheckButton } from './components/check-button/ObcCheckButton.svelte';
|
|
127
127
|
export { default as ObcCheckbox } from './components/checkbox/ObcCheckbox.svelte';
|
|
128
128
|
export { default as ObcCheckboxItem } from './components/checkbox-item/ObcCheckboxItem.svelte';
|
|
129
|
+
export { default as ObcCheckboxList } from './components/checkbox-list/ObcCheckboxList.svelte';
|
|
129
130
|
export { default as ObcClock } from './components/clock/ObcClock.svelte';
|
|
130
131
|
export { default as ObcCommandButton } from './components/command-button/ObcCommandButton.svelte';
|
|
131
132
|
export { default as ObcCommandMenu } from './components/command-menu/ObcCommandMenu.svelte';
|
package/dist/index.js
CHANGED
|
@@ -126,6 +126,7 @@ export { default as ObcChatMessage } from './components/chat-message/ObcChatMess
|
|
|
126
126
|
export { default as ObcCheckButton } from './components/check-button/ObcCheckButton.svelte';
|
|
127
127
|
export { default as ObcCheckbox } from './components/checkbox/ObcCheckbox.svelte';
|
|
128
128
|
export { default as ObcCheckboxItem } from './components/checkbox-item/ObcCheckboxItem.svelte';
|
|
129
|
+
export { default as ObcCheckboxList } from './components/checkbox-list/ObcCheckboxList.svelte';
|
|
129
130
|
export { default as ObcClock } from './components/clock/ObcClock.svelte';
|
|
130
131
|
export { default as ObcCommandButton } from './components/command-button/ObcCommandButton.svelte';
|
|
131
132
|
export { default as ObcCommandMenu } from './components/command-menu/ObcCommandMenu.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.145",
|
|
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.145"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
37
|
"svelte": "^5.0.0"
|