mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
Merge pull request #79 from IBM/overflow-menu
feat(component): add OverflowMenu
This commit is contained in:
Eric Liu
GitHub
commit
45da25ce1b
20 changed files with 424 additions and 21 deletions
|
|
@ -55,6 +55,8 @@ Currently, the following components are supported:
|
|||
- NotificationIcon
|
||||
- NotificationTextDetails
|
||||
- OrderedList
|
||||
- OverflowMenu
|
||||
- OverflowMenuItem
|
||||
- Pagination
|
||||
- PaginationSkeleton
|
||||
- ProgressIndicator
|
||||
|
|
|
|||
|
|
@ -70,4 +70,4 @@
|
|||
}</script><style>#root[hidden],
|
||||
#docs-root[hidden] {
|
||||
display: none !important;
|
||||
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.3712b637752924c5c109.bundle.js"></script><script src="vendors~main.3712b637752924c5c109.bundle.js"></script><script src="main.3712b637752924c5c109.bundle.js"></script></body></html>
|
||||
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.ee2166195d34dba757a3.bundle.js"></script><script src="vendors~main.ee2166195d34dba757a3.bundle.js"></script><script src="main.ee2166195d34dba757a3.bundle.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"main.3712b637752924c5c109.bundle.js","sources":["webpack:///main.3712b637752924c5c109.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||
2
docs/main.ee2166195d34dba757a3.bundle.js
Normal file
2
docs/main.ee2166195d34dba757a3.bundle.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/main.ee2166195d34dba757a3.bundle.js.map
Normal file
1
docs/main.ee2166195d34dba757a3.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"main.ee2166195d34dba757a3.bundle.js","sources":["webpack:///main.ee2166195d34dba757a3.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={1:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="";var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
|
||||
//# sourceMappingURL=runtime~main.3712b637752924c5c109.bundle.js.map
|
||||
//# sourceMappingURL=runtime~main.ee2166195d34dba757a3.bundle.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"runtime~main.3712b637752924c5c109.bundle.js","sources":["webpack:///runtime~main.ce61f8335d8fdea2cda4.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||
{"version":3,"file":"runtime~main.ee2166195d34dba757a3.bundle.js","sources":["webpack:///runtime~main.ce61f8335d8fdea2cda4.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"vendors~main.3712b637752924c5c109.bundle.js","sources":["webpack:///vendors~main.3712b637752924c5c109.bundle.js"],"mappings":"AAAA;;;;;AA05eA;;;;;AAmuJA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AA8fA;;;;;;;AAfA","sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
1
docs/vendors~main.ee2166195d34dba757a3.bundle.js.map
Normal file
1
docs/vendors~main.ee2166195d34dba757a3.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"vendors~main.ee2166195d34dba757a3.bundle.js","sources":["webpack:///vendors~main.ee2166195d34dba757a3.bundle.js"],"mappings":"AAAA;;;;;AAm7eA;;;;;AAs8JA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AA6fA;;;;;;;AAfA","sourceRoot":""}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Breadcrumb default 1`] = `"<div><div class=\\"layout svelte-7rvfjm\\"><nav aria-label=\\"Breadcrumb\\"><ol class=\\"bx--breadcrumb\\"><li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"/#\\">Breadcrumb 1</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 2</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 3</a></li></ol></nav></div></div>"`;
|
||||
exports[`Breadcrumb default 1`] = `"<div><div class=\\"layout svelte-q1u82c\\"><nav aria-label=\\"Breadcrumb\\"><ol class=\\"bx--breadcrumb\\"><li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"/#\\">Breadcrumb 1</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 2</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 3</a></li></ol></nav></div></div>"`;
|
||||
|
||||
exports[`Breadcrumb default 2`] = `"<div><div class=\\"layout svelte-7rvfjm\\"><nav aria-label=\\"Breadcrumb\\"><ol class=\\"bx--breadcrumb bx--breadcrumb--no-trailing-slash\\"><li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"/#\\">Breadcrumb 1</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 2</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 3</a></li></ol></nav></div></div>"`;
|
||||
exports[`Breadcrumb default 2`] = `"<div><div class=\\"layout svelte-q1u82c\\"><nav aria-label=\\"Breadcrumb\\"><ol class=\\"bx--breadcrumb bx--breadcrumb--no-trailing-slash\\"><li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"/#\\">Breadcrumb 1</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 2</a></li> <li class=\\"bx--breadcrumb-item\\"><a class=\\"bx--link\\" href=\\"#\\">Breadcrumb 3</a></li></ol></nav></div></div>"`;
|
||||
|
||||
exports[`Breadcrumb skeleton 1`] = `"<div><div class=\\"layout svelte-7rvfjm\\"><div class=\\"bx--breadcrumb bx--skeleton\\"><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\"> </span> </div><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\"> </span> </div><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\"> </span> </div></div></div></div>"`;
|
||||
exports[`Breadcrumb skeleton 1`] = `"<div><div class=\\"layout svelte-q1u82c\\"><div class=\\"bx--breadcrumb bx--skeleton\\"><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\"> </span> </div><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\"> </span> </div><div class=\\"bx--breadcrumb-item\\"><span class=\\"bx--link\\"> </span> </div></div></div></div>"`;
|
||||
|
|
|
|||
72
src/components/OverflowMenu/OverflowMenu.Story.svelte
Normal file
72
src/components/OverflowMenu/OverflowMenu.Story.svelte
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from '../../internal/ui/Layout.svelte';
|
||||
import OverflowMenu from './OverflowMenu.svelte';
|
||||
import OverflowMenuItem from './OverflowMenuItem.svelte';
|
||||
|
||||
let primaryFocus = true;
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div style="padding-left: 6rem">
|
||||
{#if story === 'links'}
|
||||
<OverflowMenu
|
||||
{...$$props.menu}
|
||||
on:close={({ detail }) => {
|
||||
console.log('close', detail);
|
||||
}}>
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Option 1"
|
||||
bind:primaryFocus />
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Option 2 is an example of a really long string and how we recommend handling this"
|
||||
requireTitle />
|
||||
<OverflowMenuItem {...$$props.menuItem} href="https://ibm.com" text="Option 3" disabled />
|
||||
<OverflowMenuItem {...$$props.menuItem} href="https://ibm.com" text="Option 4" />
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
text="Danger option"
|
||||
danger />
|
||||
</OverflowMenu>
|
||||
{:else if story === 'trigger'}
|
||||
<OverflowMenu
|
||||
{...$$props.menu}
|
||||
on:close={({ detail }) => {
|
||||
console.log('close', detail);
|
||||
}}
|
||||
style="width: auto">
|
||||
<div slot="menu" style="padding: 0 1rem">Menu</div>
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 1" bind:primaryFocus />
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
text="Option 2 is an example of a really long string and how we recommend handling this"
|
||||
requireTitle />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
|
||||
</OverflowMenu>
|
||||
{:else}
|
||||
<OverflowMenu
|
||||
{...$$props.menu}
|
||||
on:close={({ detail }) => {
|
||||
console.log('close', detail);
|
||||
}}>
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 1" bind:primaryFocus />
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
text="Option 2 is an example of a really long string and how we recommend handling this"
|
||||
requireTitle />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
|
||||
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
|
||||
</OverflowMenu>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</Layout>
|
||||
62
src/components/OverflowMenu/OverflowMenu.stories.js
Normal file
62
src/components/OverflowMenu/OverflowMenu.stories.js
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
|
||||
import Component from './OverflowMenu.Story.svelte';
|
||||
|
||||
export default { title: 'OverflowMenu', decorators: [withKnobs] };
|
||||
|
||||
const directions = {
|
||||
'Bottom of the trigger button (bottom)': 'bottom',
|
||||
'Top of the trigger button (top)': 'top'
|
||||
};
|
||||
|
||||
export const Default = () => ({
|
||||
Component,
|
||||
props: {
|
||||
menu: {
|
||||
direction: select('Menu direction (direction)', directions, 'bottom'),
|
||||
ariaLabel: text('ARIA label (ariaLabel)', 'Menu'),
|
||||
iconDescription: text('Icon description (iconDescription)', ''),
|
||||
flipped: boolean('Flipped (flipped)', false),
|
||||
light: boolean('Light (light)', false)
|
||||
},
|
||||
menuItem: {
|
||||
disabled: boolean('Disabled (disabled)', false),
|
||||
requireTitle: boolean('Use hover over text for menu item (requireTitle)', false)
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export const WithLinks = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'links',
|
||||
menu: {
|
||||
direction: select('Menu direction (direction)', directions, 'bottom'),
|
||||
ariaLabel: text('ARIA label (ariaLabel)', 'Menu'),
|
||||
iconDescription: text('Icon description (iconDescription)', ''),
|
||||
flipped: boolean('Flipped (flipped)', false),
|
||||
light: boolean('Light (light)', false)
|
||||
},
|
||||
menuItem: {
|
||||
disabled: boolean('Disabled (disabled)', false),
|
||||
requireTitle: boolean('Use hover over text for menu item (requireTitle)', false)
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export const CustomTrigger = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'trigger',
|
||||
menu: {
|
||||
direction: select('Menu direction (direction)', directions, 'bottom'),
|
||||
ariaLabel: text('ARIA label (ariaLabel)', 'Menu'),
|
||||
iconDescription: text('Icon description (iconDescription)', ''),
|
||||
flipped: boolean('Flipped (flipped)', false),
|
||||
light: boolean('Light (light)', false)
|
||||
},
|
||||
menuItem: {
|
||||
disabled: boolean('Disabled (disabled)', false),
|
||||
requireTitle: boolean('Use hover over text for menu item (requireTitle)', false)
|
||||
}
|
||||
}
|
||||
});
|
||||
167
src/components/OverflowMenu/OverflowMenu.svelte
Normal file
167
src/components/OverflowMenu/OverflowMenu.svelte
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let open = false;
|
||||
export let direction = 'bottom';
|
||||
export let flipped = false;
|
||||
export let tabindex = '0';
|
||||
export let id = Math.random();
|
||||
export let iconDescription = 'Open and close list of options';
|
||||
export let iconClass = undefined;
|
||||
export let icon = OverflowMenuVertical16;
|
||||
export let light = false;
|
||||
export let menuOptionsClass = undefined;
|
||||
export let style = undefined;
|
||||
|
||||
import { createEventDispatcher, setContext, afterUpdate } from 'svelte';
|
||||
import { writable, derived } from 'svelte/store';
|
||||
import OverflowMenuVertical16 from 'carbon-icons-svelte/lib/OverflowMenuVertical16';
|
||||
import { cx } from '../../lib';
|
||||
import { formatStyle } from './formatStyle';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let items = writable([]);
|
||||
let currentId = writable(undefined);
|
||||
let focusedId = writable(undefined);
|
||||
let currentIndex = writable(-1);
|
||||
|
||||
let buttonRef = undefined;
|
||||
let buttonWidth = undefined;
|
||||
let menuRef = undefined;
|
||||
|
||||
setContext('OverflowMenu', {
|
||||
focusedId,
|
||||
add: ({ id, text, primaryFocus }) => {
|
||||
items.update(_ => {
|
||||
if (primaryFocus) {
|
||||
currentIndex.set(_.length);
|
||||
}
|
||||
|
||||
return [..._, { id, text, primaryFocus, index: _.length }];
|
||||
});
|
||||
},
|
||||
update: id => {
|
||||
currentId.set(id);
|
||||
},
|
||||
change: direction => {
|
||||
// TODO: skip disabled
|
||||
let index = $currentIndex + direction;
|
||||
|
||||
if (index < 0) {
|
||||
index = $items.length - 1;
|
||||
} else if (index >= $items.length) {
|
||||
index = 0;
|
||||
}
|
||||
|
||||
currentIndex.set(index);
|
||||
}
|
||||
});
|
||||
|
||||
afterUpdate(() => {
|
||||
if ($currentId) {
|
||||
const { index, text } = $items.filter(_ => _.id === $currentId)[0];
|
||||
dispatch('close', { index, text });
|
||||
open = false;
|
||||
}
|
||||
|
||||
if (open) {
|
||||
const { width, height } = buttonRef.getBoundingClientRect();
|
||||
|
||||
buttonWidth = width;
|
||||
|
||||
if ($currentIndex < 0) {
|
||||
menuRef.focus();
|
||||
}
|
||||
|
||||
if (flipped) {
|
||||
menuRef.style.left = 'auto';
|
||||
menuRef.style.right = 0;
|
||||
}
|
||||
|
||||
if (direction === 'top') {
|
||||
menuRef.style.top = 'auto';
|
||||
menuRef.style.bottom = height + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
if (!open) {
|
||||
buttonRef.focus();
|
||||
items.set([]);
|
||||
currentId.set(undefined);
|
||||
}
|
||||
});
|
||||
|
||||
$: ariaLabel = $$props['aria-label'] || 'menu';
|
||||
$: if ($items[$currentIndex]) {
|
||||
focusedId.set($items[$currentIndex].id);
|
||||
}
|
||||
$: dynamicPseudoWidth = `.bx--overflow-menu-options.bx--overflow-menu-options:after {
|
||||
width: ${buttonWidth ? buttonWidth + 'px' : '2rem'};
|
||||
}`;
|
||||
$: styles = formatStyle(dynamicPseudoWidth);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{@html styles}
|
||||
</svelte:head>
|
||||
|
||||
<!-- TODO: extract utility component -->
|
||||
<svelte:body
|
||||
on:click={({ target }) => {
|
||||
if (buttonRef && buttonRef.contains(target)) {
|
||||
return;
|
||||
}
|
||||
if (menuRef && !menuRef.contains(target)) {
|
||||
open = false;
|
||||
}
|
||||
}} />
|
||||
|
||||
<button
|
||||
bind:this={buttonRef}
|
||||
aria-haspopup
|
||||
aria-expanded={open}
|
||||
aria-label={ariaLabel}
|
||||
class={cx('--overflow-menu', open && '--overflow-menu--open', light && '--overflow-menu--light', className)}
|
||||
on:click
|
||||
on:click={({ target }) => {
|
||||
if (!(menuRef && menuRef.contains(target))) {
|
||||
open = !open;
|
||||
}
|
||||
}}
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keydown
|
||||
on:keydown={event => {
|
||||
if (open) {
|
||||
if (['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(event.key)) {
|
||||
event.preventDefault();
|
||||
} else if (event.key === 'Escape') {
|
||||
event.stopPropagation();
|
||||
open = false;
|
||||
}
|
||||
}
|
||||
}}
|
||||
{id}
|
||||
{tabindex}
|
||||
{style}>
|
||||
<slot name="menu">
|
||||
<svelte:component
|
||||
this={icon}
|
||||
class={cx('--overflow-menu__icon', iconClass)}
|
||||
aria-label={iconDescription}
|
||||
title={iconDescription} />
|
||||
</slot>
|
||||
{#if open}
|
||||
<ul
|
||||
bind:this={menuRef}
|
||||
role="menu"
|
||||
tabindex="-1"
|
||||
aria-label={ariaLabel}
|
||||
data-floating-menu-direction={direction}
|
||||
class={cx('--overflow-menu-options', flipped && '--overflow-menu--flip', open && '--overflow-menu-options--open', light && '--overflow-menu-options--light', menuOptionsClass)}>
|
||||
<slot />
|
||||
</ul>
|
||||
{/if}
|
||||
</button>
|
||||
85
src/components/OverflowMenu/OverflowMenuItem.svelte
Normal file
85
src/components/OverflowMenu/OverflowMenuItem.svelte
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let text = 'Provide text';
|
||||
export let href = '';
|
||||
export let hasDivider = false;
|
||||
export let danger = false;
|
||||
export let disabled = false;
|
||||
export let primaryFocus = false;
|
||||
export let requireTitle = true;
|
||||
export let style = undefined;
|
||||
|
||||
import { getContext, afterUpdate } from 'svelte';
|
||||
import { cx } from '../../lib';
|
||||
|
||||
const id = Math.random();
|
||||
const { focusedId, add, update, change } = getContext('OverflowMenu');
|
||||
|
||||
let buttonRef = undefined;
|
||||
|
||||
add({ id, text, primaryFocus });
|
||||
|
||||
afterUpdate(() => {
|
||||
if (primaryFocus) {
|
||||
buttonRef.focus();
|
||||
}
|
||||
});
|
||||
|
||||
$: primaryFocus = $focusedId === id;
|
||||
$: buttonProps = {
|
||||
tabindex: '-1',
|
||||
title: requireTitle ? text : undefined,
|
||||
class: cx('--overflow-menu-options__btn'),
|
||||
disabled: href ? undefined : disabled,
|
||||
href: href ? href : undefined
|
||||
};
|
||||
</script>
|
||||
|
||||
<li
|
||||
role="menuitem"
|
||||
class={cx('--overflow-menu-options__option', hasDivider && '--overflow-menu--divider', danger && '--overflow-menu-options__option--danger', disabled && '--overflow-menu-options__option--disabled', className)}
|
||||
{style}>
|
||||
{#if href}
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a
|
||||
bind:this={buttonRef}
|
||||
{...buttonProps}
|
||||
on:click
|
||||
on:click={() => {
|
||||
update(id);
|
||||
}}
|
||||
on:keydown
|
||||
on:keydown={({ key }) => {
|
||||
if (key === 'ArrowDown') {
|
||||
change(1);
|
||||
} else if (key === 'ArrowUp') {
|
||||
change(-1);
|
||||
}
|
||||
}}>
|
||||
<slot>
|
||||
<div class={cx('--overflow-menu-options__option-content')}>{text}</div>
|
||||
</slot>
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
bind:this={buttonRef}
|
||||
{...buttonProps}
|
||||
on:click
|
||||
on:click={() => {
|
||||
update(id);
|
||||
}}
|
||||
on:keydown
|
||||
on:keydown={({ key }) => {
|
||||
if (key === 'ArrowDown') {
|
||||
change(1);
|
||||
} else if (key === 'ArrowUp') {
|
||||
change(-1);
|
||||
}
|
||||
}}>
|
||||
<slot>
|
||||
<div class={cx('--overflow-menu-options__option-content')}>{text}</div>
|
||||
</slot>
|
||||
</button>
|
||||
{/if}
|
||||
</li>
|
||||
7
src/components/OverflowMenu/formatStyle.js
Normal file
7
src/components/OverflowMenu/formatStyle.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
// TODO: extract utility
|
||||
// TODO: refactor params to present nicer API
|
||||
function formatStyle(style) {
|
||||
return ['<style>', style, '</style>'].join('');
|
||||
}
|
||||
|
||||
export { formatStyle };
|
||||
4
src/components/OverflowMenu/index.js
Normal file
4
src/components/OverflowMenu/index.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import OverflowMenu from './OverflowMenu.svelte';
|
||||
|
||||
export default OverflowMenu;
|
||||
export { default as OverflowMenuItem } from './OverflowMenuItem.svelte';
|
||||
|
|
@ -33,6 +33,7 @@ import {
|
|||
NotificationTextDetails
|
||||
} from './components/Notification';
|
||||
import OrderedList from './components/OrderedList';
|
||||
import OverflowMenu, { OverflowMenuItem } from './components/OverflowMenu';
|
||||
import Pagination, { PaginationSkeleton } from './components/Pagination';
|
||||
import ProgressIndicator, {
|
||||
ProgressIndicatorSkeleton,
|
||||
|
|
@ -117,6 +118,8 @@ export {
|
|||
NotificationIcon,
|
||||
NotificationTextDetails,
|
||||
OrderedList,
|
||||
OverflowMenu,
|
||||
OverflowMenuItem,
|
||||
Pagination,
|
||||
PaginationSkeleton,
|
||||
PasswordInput,
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
padding: 3em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue