mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(data-table): add ToolbarMenu

Browse source 
Requires menuRef from OverflowMenu to be exported.
This commit is contained in:
Eric Liu 2020-10-26 07:43:54 -07:00
commit c39427670a
10 changed files with 305 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

62
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index
> 152 components exported from carbon-components-svelte 0.20.0
> 154 components exported from carbon-components-svelte 0.20.0
- Accordion
- [Accordion](#accordion)
@ -44,6 +44,8 @@
- [Toolbar](#toolbar)
- [ToolbarBatchActions](#toolbarbatchactions)
- [ToolbarContent](#toolbarcontent)
- [ToolbarMenu](#toolbarmenu)
- [ToolbarMenuItem](#toolbarmenuitem)
- [ToolbarSearch](#toolbarsearch)
- [DataTableSkeleton](#datatableskeleton)
- DatePicker
@ -796,6 +798,7 @@ interface ComboBoxItem {
| id | <code>string</code> | -- | Set an id for the list box component. |
| name | <code>string</code> | -- | Specify a name attribute for the input. |
| ref | <code>null &#124; HTMLInputElement</code> | `null` | Obtain a reference to the input HTML element. |
| listRef | <code>null &#124; HTMLDivElement</code> | `null` | Obtain a reference to the list HTML element. |
### Slots
@ -807,6 +810,7 @@ No slots.
- `on:focus`
- `on:blur`
- `on:clear`
- `on:scroll`
### Dispatched events
@ -2363,7 +2367,7 @@ import { ListBoxMenu } from "carbon-components-svelte";
### Forwarded events
No forwarded events.
- `on:scroll`
### Dispatched events
@ -3019,6 +3023,8 @@ import { OverflowMenu } from "carbon-components-svelte";
| iconClass | <code>string</code> | -- | Specify the icon class. |
| iconDescription | <code>string</code> | `"Open and close list of options"` | Specify the ARIA label for the icon. |
| id | <code>string</code> | -- | Set an id for the button element. |
| buttonRef | <code>null &#124; HTMLButtonElement</code> | `null` | Obtain a reference to the trigger button element. |
| menuRef | <code>null &#124; HTMLUListElement</code> | `null` | Obtain a reference to the overflow menu element. |
### Slots
@ -5322,6 +5328,58 @@ No dispatched events.
---
## ToolbarMenu
### Import path
```js
import { ToolbarMenu } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
- **default**: `<div>...</div>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## ToolbarMenuItem
### Import path
```js
import { ToolbarMenuItem } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
- **default**: `<div>...</div>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## ToolbarSearch
### Import path

202
docs/src/PUBLIC_API.json
View file

@ -1950,6 +1950,15 @@
"type": "null | HTMLInputElement",
"description": "Obtain a reference to the input HTML element"
}
],
[
"listRef",
{
"kind": "let",
"value": "null",
"type": "null | HTMLDivElement",
"description": "Obtain a reference to the list HTML element"
}
]
],
"slots": [],
@ -1957,8 +1966,8 @@
[
"keydown",
{
"start": 5481,
"end": 5491,
"start": 5616,
"end": 5626,
"type": "EventHandler",
"name": "keydown",
"modifiers": [],
@ -1968,8 +1977,8 @@
[
"focus",
{
"start": 6068,
"end": 6076,
"start": 6203,
"end": 6211,
"type": "EventHandler",
"name": "focus",
"modifiers": [],
@ -1979,8 +1988,8 @@
[
"blur",
{
"start": 6085,
"end": 6092,
"start": 6220,
"end": 6227,
"type": "EventHandler",
"name": "blur",
"modifiers": [],
@ -1990,13 +1999,24 @@
[
"clear",
{
"start": 6543,
"end": 6551,
"start": 6678,
"end": 6686,
"type": "EventHandler",
"name": "clear",
"modifiers": [],
"expression": null
}
],
[
"scroll",
{
"start": 7220,
"end": 7229,
"type": "EventHandler",
"name": "scroll",
"modifiers": [],
"expression": null
}
]
],
"dispatched_events": [
@ -6967,7 +6987,19 @@
}
]
],
"forwarded_events": [],
"forwarded_events": [
[
"scroll",
{
"start": 403,
"end": 412,
"type": "EventHandler",
"name": "scroll",
"modifiers": [],
"expression": null
}
]
],
"dispatched_events": []
},
"ListBoxMenuIcon": {
@ -8800,6 +8832,24 @@
"type": "string",
"description": "Set an id for the button element"
}
],
[
"buttonRef",
{
"kind": "let",
"value": "null",
"type": "null | HTMLButtonElement",
"description": "Obtain a reference to the trigger button element"
}
],
[
"menuRef",
{
"kind": "let",
"value": "null",
"type": "null | HTMLUListElement",
"description": "Obtain a reference to the overflow menu element"
}
]
],
"slots": [
@ -8808,14 +8858,14 @@
{
"attributes": [
{
"start": 4567,
"end": 4578,
"start": 4805,
"end": 4816,
"type": "Attribute",
"name": "name",
"value": [
{
"start": 4573,
"end": 4577,
"start": 4811,
"end": 4815,
"type": "Text",
"raw": "menu",
"data": "menu"
@ -8825,39 +8875,39 @@
],
"children": [
{
"start": 4579,
"end": 4584,
"start": 4817,
"end": 4822,
"type": "Text",
"raw": "\n ",
"data": "\n "
},
{
"start": 4584,
"end": 4747,
"start": 4822,
"end": 4985,
"type": "InlineComponent",
"name": "svelte:component",
"attributes": [
{
"start": 4628,
"end": 4658,
"start": 4866,
"end": 4896,
"type": "Attribute",
"name": "aria-label",
"value": [
{
"start": 4640,
"end": 4657,
"start": 4878,
"end": 4895,
"type": "MustacheTag",
"expression": {
"type": "Identifier",
"start": 4641,
"end": 4656,
"start": 4879,
"end": 4894,
"loc": {
"start": {
"line": 196,
"line": 206,
"column": 19
},
"end": {
"line": 196,
"line": 206,
"column": 34
}
},
@ -8867,26 +8917,26 @@
]
},
{
"start": 4665,
"end": 4690,
"start": 4903,
"end": 4928,
"type": "Attribute",
"name": "title",
"value": [
{
"start": 4672,
"end": 4689,
"start": 4910,
"end": 4927,
"type": "MustacheTag",
"expression": {
"type": "Identifier",
"start": 4673,
"end": 4688,
"start": 4911,
"end": 4926,
"loc": {
"start": {
"line": 197,
"line": 207,
"column": 14
},
"end": {
"line": 197,
"line": 207,
"column": 29
}
},
@ -8896,33 +8946,33 @@
]
},
{
"start": 4697,
"end": 4740,
"start": 4935,
"end": 4978,
"type": "Attribute",
"name": "class",
"value": [
{
"start": 4704,
"end": 4729,
"start": 4942,
"end": 4967,
"type": "Text",
"raw": "bx--overflow-menu__icon ",
"data": "bx--overflow-menu__icon "
},
{
"start": 4728,
"end": 4739,
"start": 4966,
"end": 4977,
"type": "MustacheTag",
"expression": {
"type": "Identifier",
"start": 4729,
"end": 4738,
"start": 4967,
"end": 4976,
"loc": {
"start": {
"line": 198,
"line": 208,
"column": 38
},
"end": {
"line": 198,
"line": 208,
"column": 47
}
},
@ -8935,15 +8985,15 @@
"children": [],
"expression": {
"type": "Identifier",
"start": 4615,
"end": 4619,
"start": 4853,
"end": 4857,
"loc": {
"start": {
"line": 195,
"line": 205,
"column": 13
},
"end": {
"line": 195,
"line": 205,
"column": 17
}
},
@ -8951,8 +9001,8 @@
}
},
{
"start": 4747,
"end": 4750,
"start": 4985,
"end": 4988,
"type": "Text",
"raw": "\n ",
"data": "\n "
@ -8976,8 +9026,8 @@
[
"click",
{
"start": 4089,
"end": 4097,
"start": 4327,
"end": 4335,
"type": "EventHandler",
"name": "click",
"modifiers": [],
@ -8987,8 +9037,8 @@
[
"mouseover",
{
"start": 4213,
"end": 4225,
"start": 4451,
"end": 4463,
"type": "EventHandler",
"name": "mouseover",
"modifiers": [],
@ -8998,8 +9048,8 @@
[
"mouseenter",
{
"start": 4228,
"end": 4241,
"start": 4466,
"end": 4479,
"type": "EventHandler",
"name": "mouseenter",
"modifiers": [],
@ -9009,8 +9059,8 @@
[
"mouseleave",
{
"start": 4244,
"end": 4257,
"start": 4482,
"end": 4495,
"type": "EventHandler",
"name": "mouseleave",
"modifiers": [],
@ -9020,8 +9070,8 @@
[
"keydown",
{
"start": 4260,
"end": 4270,
"start": 4498,
"end": 4508,
"type": "EventHandler",
"name": "keydown",
"modifiers": [],
@ -15563,6 +15613,40 @@
"forwarded_events": [],
"dispatched_events": []
},
"ToolbarMenu": {
"moduleName": "ToolbarMenu",
"props": [],
"slots": [
[
"default",
{
"attributes": [],
"children": [],
"default": true,
"default_value": ""
}
]
],
"forwarded_events": [],
"dispatched_events": []
},
"ToolbarMenuItem": {
"moduleName": "ToolbarMenuItem",
"props": [],
"slots": [
[
"default",
{
"attributes": [],
"children": [],
"default": true,
"default_value": ""
}
]
],
"forwarded_events": [],
"dispatched_events": []
},
"ToolbarSearch": {
"moduleName": "ToolbarSearch",
"props": [

9
src/ComboBox/ComboBox.svelte
View file

@ -111,7 +111,7 @@
* Obtain a reference to the list HTML element
* @type {null | HTMLDivElement} [ref=null]
*/
export let listRef = null
export let listRef = null;
/**
* @typedef {{ id: string; text: string; }} ComboBoxItem
@ -290,7 +290,12 @@
/>
</ListBoxField>
{#if open}
<ListBoxMenu aria-label="{ariaLabel}" id="{id}" on:scroll bind:ref={listRef}>
<ListBoxMenu
aria-label="{ariaLabel}"
id="{id}"
on:scroll
bind:ref="{listRef}"
>
{#each filteredItems as item, i (item.id)}
<ListBoxMenuItem
id="{item.id}"

17
src/DataTable/Toolbar.svelte
View file

@ -4,9 +4,26 @@
* @type {"sm" | "default"} [size="default"]
*/
export let size = "default";
import { setContext } from "svelte";
let ref = null;
setContext("Toolbar", {
setOverflow: (toggled) => {
if (ref) {
if (toggled) {
ref.style.overflow = "visible";
} else {
ref.removeAttribute("style");
}
}
},
});
</script>
<section
bind:this="{ref}"
aria-label="data table toolbar"
class:bx--table-toolbar="{true}"
class:bx--table-toolbar--small="{size === 'sm'}"

22
src/DataTable/ToolbarMenu.svelte Normal file
View file

@ -0,0 +1,22 @@
<script>
import { getContext } from "svelte";
import Settings16 from "carbon-icons-svelte/lib/Settings16";
import { OverflowMenu } from "../OverflowMenu";
const ctx = getContext("Toolbar");
let menuRef = null;
$: ctx.setOverflow(menuRef != null);
$: if (menuRef) menuRef.style.top = "100%";
</script>
<OverflowMenu
bind:menuRef
icon="{Settings16}"
{...$$restProps}
class="bx--toolbar-action bx--overflow-menu {$$restProps.class}"
flipped
>
<slot />
</OverflowMenu>

7
src/DataTable/ToolbarMenuItem.svelte Normal file
View file

@ -0,0 +1,7 @@
<script>
import { OverflowMenuItem } from "../OverflowMenu";
</script>
<OverflowMenuItem {...$$restProps}>
<slot />
</OverflowMenuItem>

2
src/DataTable/index.js
View file

@ -10,3 +10,5 @@ export { default as Toolbar } from "./Toolbar.svelte";
export { default as ToolbarContent } from "./ToolbarContent.svelte";
export { default as ToolbarSearch } from "./ToolbarSearch.svelte";
export { default as ToolbarBatchActions } from "./ToolbarBatchActions.svelte";
export { default as ToolbarMenu } from "./ToolbarMenu.svelte";
export { default as ToolbarMenuItem } from "./ToolbarMenuItem.svelte";

18
src/OverflowMenu/OverflowMenu.svelte
View file

@ -53,6 +53,18 @@
*/
export let id = "ccs-" + Math.random().toString(36);
/**
* Obtain a reference to the trigger button element
* @type {null | HTMLButtonElement} [ref=null]
*/
export let buttonRef = null;
/**
* Obtain a reference to the overflow menu element
* @type {null | HTMLUListElement} [ref=null]
*/
export let menuRef = null;
import { createEventDispatcher, setContext, afterUpdate } from "svelte";
import { writable } from "svelte/store";
import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16";
@ -64,10 +76,8 @@
const focusedId = writable(undefined);
const currentIndex = writable(-1);
$: buttonRef = undefined;
$: buttonWidth = undefined;
$: menuRef = undefined;
$: didOpen = false;
let buttonWidth = undefined;
let didOpen = false;
setContext("OverflowMenu", {
focusedId,

2
src/index.js
View file

@ -27,6 +27,8 @@ export {
ToolbarContent,
ToolbarSearch,
ToolbarBatchActions,
ToolbarMenu,
ToolbarMenuItem,
} from "./DataTable";
export { DataTableSkeleton } from "./DataTableSkeleton";
export { DatePicker, DatePickerInput, DatePickerSkeleton } from "./DatePicker";

26
types/index.d.ts vendored
View file

@ -662,6 +662,12 @@ export class ComboBox extends CarbonSvelteComponent {
* @default null
*/
ref?: null | HTMLInputElement;
/**
* Obtain a reference to the list HTML element
* @default null
*/
listRef?: null | HTMLDivElement;
};
}
@ -2929,6 +2935,18 @@ export class OverflowMenu extends CarbonSvelteComponent {
* Set an id for the button element
*/
id?: string;
/**
* Obtain a reference to the trigger button element
* @default null
*/
buttonRef?: null | HTMLButtonElement;
/**
* Obtain a reference to the overflow menu element
* @default null
*/
menuRef?: null | HTMLUListElement;
};
$$slot_def: { menu: {}; default: {} };
@ -5124,6 +5142,14 @@ export class ToolbarContent extends CarbonSvelteComponent {
$$slot_def: { default: {} };
}
export class ToolbarMenu extends CarbonSvelteComponent {
$$slot_def: { default: {} };
}
export class ToolbarMenuItem extends CarbonSvelteComponent {
$$slot_def: { default: {} };
}
export class ToolbarSearch extends CarbonSvelteComponent {
$$prop_def: {
/**