mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
feat(context-menu): annotate props, generate types
This commit is contained in:
Eric Y Liu
parent
3a1e561a27
commit
2ff4d43292
11 changed files with 582 additions and 19 deletions
|
|
@ -1,6 +1,6 @@
|
|||
# Component Index
|
||||
|
||||
> 161 components exported from carbon-components-svelte@0.30.0.
|
||||
> 166 components exported from carbon-components-svelte@0.30.0.
|
||||
|
||||
## Components
|
||||
|
||||
|
|
@ -24,6 +24,11 @@
|
|||
- [`ComposedModal`](#composedmodal)
|
||||
- [`Content`](#content)
|
||||
- [`ContentSwitcher`](#contentswitcher)
|
||||
- [`ContextMenu`](#contextmenu)
|
||||
- [`ContextMenuDivider`](#contextmenudivider)
|
||||
- [`ContextMenuGroup`](#contextmenugroup)
|
||||
- [`ContextMenuOption`](#contextmenuoption)
|
||||
- [`ContextMenuRadioGroup`](#contextmenuradiogroup)
|
||||
- [`Copy`](#copy)
|
||||
- [`CopyButton`](#copybutton)
|
||||
- [`DataTable`](#datatable)
|
||||
|
|
@ -723,6 +728,116 @@ None.
|
|||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
|
||||
## `ContextMenu`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------ | -------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLUListElement</code> | <code>null</code> | Obtain a reference to the unordered list HTML element |
|
||||
| y | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the vertical offset of the menu position |
|
||||
| x | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the horizontal offset of the menu position |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu<br />Either `x` and `y` must be greater than zero |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :------- |
|
||||
| -- | Yes | -- | -- |
|
||||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :--------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| keydown | forwarded | -- |
|
||||
| close | dispatched | -- |
|
||||
|
||||
## `ContextMenuDivider`
|
||||
|
||||
### Props
|
||||
|
||||
None.
|
||||
|
||||
### Slots
|
||||
|
||||
None.
|
||||
|
||||
### Events
|
||||
|
||||
None.
|
||||
|
||||
## `ContextMenuGroup`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :--------------- | :------- | :-------------------- | --------------- | ---------------------- |
|
||||
| selectedIds | <code>let</code> | Yes | <code>string[]</code> | <code>[]</code> | -- |
|
||||
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :------- |
|
||||
| -- | Yes | -- | -- |
|
||||
|
||||
### Events
|
||||
|
||||
None.
|
||||
|
||||
## `ContextMenuOption`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :----------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLLIElement</code> | <code>null</code> | Obtain a reference to the list item HTML element |
|
||||
| selectable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selectable variant<br />Automatically set to `true` if `selected` is `true` |
|
||||
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant |
|
||||
| icon | <code>let</code> | Yes | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render<br />Icon is rendered to the left of the label text |
|
||||
| indented | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state |
|
||||
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text<br />Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>) |
|
||||
| shortcutText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the shortcut text<br />Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>) |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Specify the id<br />It's highly recommended to provide an id when using in a selectable/radio menu group |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :----------- | :------ | :---- | :-------------------------- |
|
||||
| -- | Yes | -- | -- |
|
||||
| labelText | No | -- | <code>{labelText}</code> |
|
||||
| shortcutText | No | -- | <code>{shortcutText}</code> |
|
||||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :--------- | :----- |
|
||||
| keydown | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
| click | dispatched | -- |
|
||||
|
||||
## `ContextMenuRadioGroup`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------- | :--------------- | :------- | :------------------ | --------------- | ------------------------------- |
|
||||
| selectedId | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Set the selected radio group id |
|
||||
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :------- |
|
||||
| -- | Yes | -- | -- |
|
||||
|
||||
### Events
|
||||
|
||||
None.
|
||||
|
||||
## `Copy`
|
||||
|
||||
### Props
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"total": 161,
|
||||
"total": 166,
|
||||
"components": [
|
||||
{
|
||||
"moduleName": "Accordion",
|
||||
|
|
@ -1556,6 +1556,243 @@
|
|||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
},
|
||||
{
|
||||
"moduleName": "ContextMenu",
|
||||
"filePath": "src/ContextMenu/ContextMenu.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "open",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to open the menu\nEither `x` and `y` must be greater than zero",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "x",
|
||||
"kind": "let",
|
||||
"description": "Specify the horizontal offset of the menu position",
|
||||
"type": "number",
|
||||
"value": "0",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "y",
|
||||
"kind": "let",
|
||||
"description": "Specify the vertical offset of the menu position",
|
||||
"type": "number",
|
||||
"value": "0",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "ref",
|
||||
"kind": "let",
|
||||
"description": "Obtain a reference to the unordered list HTML element",
|
||||
"type": "null | HTMLUListElement",
|
||||
"value": "null",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
}
|
||||
],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "ul" },
|
||||
{ "type": "forwarded", "name": "keydown", "element": "ul" },
|
||||
{ "type": "dispatched", "name": "close" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "ul" }
|
||||
},
|
||||
{
|
||||
"moduleName": "ContextMenuDivider",
|
||||
"filePath": "src/ContextMenu/ContextMenuDivider.svelte",
|
||||
"props": [],
|
||||
"slots": [],
|
||||
"events": [],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "ContextMenuGroup",
|
||||
"filePath": "src/ContextMenu/ContextMenuGroup.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "selectedIds",
|
||||
"kind": "let",
|
||||
"type": "string[]",
|
||||
"value": "[]",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "labelText",
|
||||
"kind": "let",
|
||||
"description": "Specify the label text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "ContextMenuOption",
|
||||
"filePath": "src/ContextMenu/ContextMenuOption.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "disabled",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to enable the disabled state",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "indented",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to indent the label",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"kind": "let",
|
||||
"description": "Specify the icon from `carbon-icons-svelte` to render\nIcon is rendered to the left of the label text",
|
||||
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "labelText",
|
||||
"kind": "let",
|
||||
"description": "Specify the label text\nAlternatively, use the \"labelText\" slot (e.g., <span slot=\"labelText\">...</span>)",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "selected",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to use the selected variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "selectable",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to enable the selectable variant\nAutomatically set to `true` if `selected` is `true`",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "shortcutText",
|
||||
"kind": "let",
|
||||
"description": "Specify the shortcut text\nAlternatively, use the \"shortcutText\" slot (e.g., <span slot=\"shortcutText\">...</span>)",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "id",
|
||||
"kind": "let",
|
||||
"description": "Specify the id\nIt's highly recommended to provide an id when using in a selectable/radio menu group",
|
||||
"type": "string",
|
||||
"value": "\"ccs-\" + Math.random().toString(36)",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "ref",
|
||||
"kind": "let",
|
||||
"description": "Obtain a reference to the list item HTML element",
|
||||
"type": "null | HTMLLIElement",
|
||||
"value": "null",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
{ "name": "__default__", "default": true, "slot_props": "{}" },
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
},
|
||||
{
|
||||
"name": "shortcutText",
|
||||
"default": false,
|
||||
"fallback": "{shortcutText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "keydown", "element": "li" },
|
||||
{ "type": "forwarded", "name": "mouseenter", "element": "li" },
|
||||
{ "type": "forwarded", "name": "mouseleave", "element": "li" },
|
||||
{ "type": "dispatched", "name": "click" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "li" }
|
||||
},
|
||||
{
|
||||
"moduleName": "ContextMenuRadioGroup",
|
||||
"filePath": "src/ContextMenu/ContextMenuRadioGroup.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "selectedId",
|
||||
"kind": "let",
|
||||
"description": "Set the selected radio group id",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "labelText",
|
||||
"kind": "let",
|
||||
"description": "Specify the label text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "Copy",
|
||||
"filePath": "src/Copy/Copy.svelte",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
/** @type {string[]} */
|
||||
export let selectedIds = [];
|
||||
|
||||
export let label = "";
|
||||
/** Specify the label text */
|
||||
export let labelText = "";
|
||||
|
||||
import { setContext } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
</script>
|
||||
|
||||
<li role="none">
|
||||
<ul role="group" aria-label="{label}">
|
||||
<ul role="group" aria-label="{labelText}">
|
||||
<slot />
|
||||
</ul>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,45 @@
|
|||
<script>
|
||||
/** Set to `true` to enable the disabled state */
|
||||
export let disabled = false;
|
||||
export let icon = undefined;
|
||||
|
||||
/** Set to `true` to indent the label */
|
||||
export let indented = false;
|
||||
export let label = "";
|
||||
|
||||
/**
|
||||
* Specify the icon from `carbon-icons-svelte` to render
|
||||
* Icon is rendered to the left of the label text
|
||||
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
|
||||
*/
|
||||
export let icon = undefined;
|
||||
|
||||
/**
|
||||
* Specify the label text
|
||||
* Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>)
|
||||
*/
|
||||
export let labelText = "";
|
||||
|
||||
/** Set to `true` to use the selected variant */
|
||||
export let selected = false;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the selectable variant
|
||||
* Automatically set to `true` if `selected` is `true`
|
||||
*/
|
||||
export let selectable = false;
|
||||
export let shortcut = "";
|
||||
|
||||
/**
|
||||
* Specify the shortcut text
|
||||
* Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>)
|
||||
*/
|
||||
export let shortcutText = "";
|
||||
|
||||
/**
|
||||
* Specify the id
|
||||
* It's highly recommended to provide an id when using in a selectable/radio menu group
|
||||
*/
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/** Obtain a reference to the list item HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { onMount, getContext, createEventDispatcher } from "svelte";
|
||||
|
|
@ -21,7 +54,6 @@
|
|||
|
||||
let unsubCurrentIds = undefined;
|
||||
let unsubCurrentId = undefined;
|
||||
let initialSelected = false;
|
||||
let timeoutHover = undefined;
|
||||
let rootMenuPosition = [0, 0];
|
||||
|
||||
|
|
@ -30,7 +62,7 @@
|
|||
});
|
||||
|
||||
onMount(() => {
|
||||
initialSelected = selected;
|
||||
selectable = selected === true;
|
||||
|
||||
if (ctxGroup) {
|
||||
unsubCurrentIds = ctxGroup.currentIds.subscribe((ids) => {
|
||||
|
|
@ -52,7 +84,7 @@
|
|||
};
|
||||
});
|
||||
|
||||
$: isSelectable = !!ctxGroup || initialSelected || selectable;
|
||||
$: isSelectable = !!ctxGroup || selectable;
|
||||
$: isRadio = !!ctxRadioGroup;
|
||||
|
||||
$: if (isSelectable) {
|
||||
|
|
@ -106,9 +138,11 @@
|
|||
aria-checked="{isSelectable || isRadio ? selected : undefined}"
|
||||
{...$$restProps}
|
||||
on:keydown
|
||||
on:keydown="{(e) => {}}"
|
||||
on:keydown="{(e) => {
|
||||
// TODO: handle focus
|
||||
}}"
|
||||
on:mouseenter
|
||||
on:mouseenter="{(e) => {
|
||||
on:mouseenter="{() => {
|
||||
if (subOptions) {
|
||||
timeoutHover = setTimeout(() => {
|
||||
submenuOpen = true;
|
||||
|
|
@ -150,8 +184,8 @@
|
|||
<svelte:component this="{icon}" />
|
||||
</div>
|
||||
{/if}
|
||||
<span class:bx--context-menu-option__label="{true}" title="{label}">
|
||||
{label}
|
||||
<span class:bx--context-menu-option__label="{true}" title="{labelText}">
|
||||
<slot name="labelText">{labelText}</slot>
|
||||
</span>
|
||||
<div class:bx--context-menu-option__info="{true}"><CaretRight16 /></div>
|
||||
</div>
|
||||
|
|
@ -173,10 +207,12 @@
|
|||
<svelte:component this="{icon}" />
|
||||
</div>
|
||||
{/if}
|
||||
<span class:bx--context-menu-option__label="{true}" title="{label}">
|
||||
{label}
|
||||
<span class:bx--context-menu-option__label="{true}" title="{labelText}">
|
||||
<slot name="labelText">{labelText}</slot>
|
||||
</span>
|
||||
<div class:bx--context-menu-option__info="{true}">{shortcut}</div>
|
||||
<div class:bx--context-menu-option__info="{true}">
|
||||
<slot name="shortcutText">{shortcutText}</slot>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<script>
|
||||
/** Set the selected radio group id */
|
||||
export let selectedId = "";
|
||||
|
||||
export let label = "";
|
||||
/** Specify the label text */
|
||||
export let labelText = "";
|
||||
|
||||
import { setContext } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
|
|
@ -19,6 +21,6 @@
|
|||
$: currentId.set(selectedId);
|
||||
</script>
|
||||
|
||||
<ContextMenuGroup label="{label}">
|
||||
<ContextMenuGroup labelText="{labelText}">
|
||||
<slot />
|
||||
</ContextMenuGroup>
|
||||
|
|
|
|||
40
types/ContextMenu/ContextMenu.d.ts
vendored
Normal file
40
types/ContextMenu/ContextMenu.d.ts
vendored
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
/// <reference types="svelte" />
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
|
||||
export interface ContextMenuProps
|
||||
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
|
||||
/**
|
||||
* Set to `true` to open the menu
|
||||
* Either `x` and `y` must be greater than zero
|
||||
* @default false
|
||||
*/
|
||||
open?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the horizontal offset of the menu position
|
||||
* @default 0
|
||||
*/
|
||||
x?: number;
|
||||
|
||||
/**
|
||||
* Specify the vertical offset of the menu position
|
||||
* @default 0
|
||||
*/
|
||||
y?: number;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the unordered list HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLUListElement;
|
||||
}
|
||||
|
||||
export default class ContextMenu extends SvelteComponentTyped<
|
||||
ContextMenuProps,
|
||||
{
|
||||
click: WindowEventMap["click"];
|
||||
keydown: WindowEventMap["keydown"];
|
||||
close: CustomEvent<any>;
|
||||
},
|
||||
{ default: {} }
|
||||
> {}
|
||||
10
types/ContextMenu/ContextMenuDivider.d.ts
vendored
Normal file
10
types/ContextMenu/ContextMenuDivider.d.ts
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/// <reference types="svelte" />
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
|
||||
export interface ContextMenuDividerProps {}
|
||||
|
||||
export default class ContextMenuDivider extends SvelteComponentTyped<
|
||||
ContextMenuDividerProps,
|
||||
{},
|
||||
{}
|
||||
> {}
|
||||
21
types/ContextMenu/ContextMenuGroup.d.ts
vendored
Normal file
21
types/ContextMenu/ContextMenuGroup.d.ts
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/// <reference types="svelte" />
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
|
||||
export interface ContextMenuGroupProps {
|
||||
/**
|
||||
* @default []
|
||||
*/
|
||||
selectedIds?: string[];
|
||||
|
||||
/**
|
||||
* Specify the label text
|
||||
* @default ""
|
||||
*/
|
||||
labelText?: string;
|
||||
}
|
||||
|
||||
export default class ContextMenuGroup extends SvelteComponentTyped<
|
||||
ContextMenuGroupProps,
|
||||
{},
|
||||
{ default: {} }
|
||||
> {}
|
||||
74
types/ContextMenu/ContextMenuOption.d.ts
vendored
Normal file
74
types/ContextMenu/ContextMenuOption.d.ts
vendored
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
/// <reference types="svelte" />
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
|
||||
export interface ContextMenuOptionProps
|
||||
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
|
||||
/**
|
||||
* Set to `true` to enable the disabled state
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to indent the label
|
||||
* @default false
|
||||
*/
|
||||
indented?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the icon from `carbon-icons-svelte` to render
|
||||
* Icon is rendered to the left of the label text
|
||||
*/
|
||||
icon?: typeof import("carbon-icons-svelte").CarbonIcon;
|
||||
|
||||
/**
|
||||
* Specify the label text
|
||||
* Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>)
|
||||
* @default ""
|
||||
*/
|
||||
labelText?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to use the selected variant
|
||||
* @default false
|
||||
*/
|
||||
selected?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the selectable variant
|
||||
* Automatically set to `true` if `selected` is `true`
|
||||
* @default false
|
||||
*/
|
||||
selectable?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the shortcut text
|
||||
* Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>)
|
||||
* @default ""
|
||||
*/
|
||||
shortcutText?: string;
|
||||
|
||||
/**
|
||||
* Specify the id
|
||||
* It's highly recommended to provide an id when using in a selectable/radio menu group
|
||||
* @default "ccs-" + Math.random().toString(36)
|
||||
*/
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the list item HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLLIElement;
|
||||
}
|
||||
|
||||
export default class ContextMenuOption extends SvelteComponentTyped<
|
||||
ContextMenuOptionProps,
|
||||
{
|
||||
keydown: WindowEventMap["keydown"];
|
||||
mouseenter: WindowEventMap["mouseenter"];
|
||||
mouseleave: WindowEventMap["mouseleave"];
|
||||
click: CustomEvent<any>;
|
||||
},
|
||||
{ default: {}; labelText: {}; shortcutText: {} }
|
||||
> {}
|
||||
22
types/ContextMenu/ContextMenuRadioGroup.d.ts
vendored
Normal file
22
types/ContextMenu/ContextMenuRadioGroup.d.ts
vendored
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
/// <reference types="svelte" />
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
|
||||
export interface ContextMenuRadioGroupProps {
|
||||
/**
|
||||
* Set the selected radio group id
|
||||
* @default ""
|
||||
*/
|
||||
selectedId?: string;
|
||||
|
||||
/**
|
||||
* Specify the label text
|
||||
* @default ""
|
||||
*/
|
||||
labelText?: string;
|
||||
}
|
||||
|
||||
export default class ContextMenuRadioGroup extends SvelteComponentTyped<
|
||||
ContextMenuRadioGroupProps,
|
||||
{},
|
||||
{ default: {} }
|
||||
> {}
|
||||
5
types/index.d.ts
vendored
5
types/index.d.ts
vendored
|
|
@ -12,6 +12,11 @@ export { default as Checkbox } from "./Checkbox/Checkbox";
|
|||
export { default as CheckboxSkeleton } from "./Checkbox/CheckboxSkeleton";
|
||||
export { default as ContentSwitcher } from "./ContentSwitcher/ContentSwitcher";
|
||||
export { default as Switch } from "./ContentSwitcher/Switch";
|
||||
export { default as ContextMenu } from "./ContextMenu/ContextMenu";
|
||||
export { default as ContextMenuDivider } from "./ContextMenu/ContextMenuDivider";
|
||||
export { default as ContextMenuGroup } from "./ContextMenu/ContextMenuGroup";
|
||||
export { default as ContextMenuOption } from "./ContextMenu/ContextMenuOption";
|
||||
export { default as ContextMenuRadioGroup } from "./ContextMenu/ContextMenuRadioGroup";
|
||||
export { default as Copy } from "./Copy/Copy";
|
||||
export { default as CopyButton } from "./CopyButton/CopyButton";
|
||||
export { default as ComboBox } from "./ComboBox/ComboBox";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue