mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
Merge pull request #106 from IBM/dropdown
feat(components): add Dropdown
This commit is contained in:
Eric Liu
GitHub
commit
798327da4f
22 changed files with 279 additions and 19 deletions
|
|
@ -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.28a3b49ddfb7322290f8.bundle.js"></script><script src="vendors~main.28a3b49ddfb7322290f8.bundle.js"></script><script src="main.28a3b49ddfb7322290f8.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.627d5f000ff75700853f.bundle.js"></script><script src="vendors~main.627d5f000ff75700853f.bundle.js"></script><script src="main.627d5f000ff75700853f.bundle.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"main.28a3b49ddfb7322290f8.bundle.js","sources":["webpack:///main.28a3b49ddfb7322290f8.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||
2
docs/main.627d5f000ff75700853f.bundle.js
Normal file
2
docs/main.627d5f000ff75700853f.bundle.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/main.627d5f000ff75700853f.bundle.js.map
Normal file
1
docs/main.627d5f000ff75700853f.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"main.627d5f000ff75700853f.bundle.js","sources":["webpack:///main.627d5f000ff75700853f.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"runtime~main.28a3b49ddfb7322290f8.bundle.js","sources":["webpack:///runtime~main.28a3b49ddfb7322290f8.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.28a3b49ddfb7322290f8.bundle.js.map
|
||||
//# sourceMappingURL=runtime~main.627d5f000ff75700853f.bundle.js.map
|
||||
1
docs/runtime~main.627d5f000ff75700853f.bundle.js.map
Normal file
1
docs/runtime~main.627d5f000ff75700853f.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"runtime~main.627d5f000ff75700853f.bundle.js","sources":["webpack:///runtime~main.627d5f000ff75700853f.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"vendors~main.28a3b49ddfb7322290f8.bundle.js","sources":["webpack:///vendors~main.28a3b49ddfb7322290f8.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAu4PA;;;;;AAq/XA;;AA48BA;;;;;;;;;;;;;;AAmBA;;;;;AA0iQA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAqdA;;;;;;;AAfA","sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
1
docs/vendors~main.627d5f000ff75700853f.bundle.js.map
Normal file
1
docs/vendors~main.627d5f000ff75700853f.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"vendors~main.627d5f000ff75700853f.bundle.js","sources":["webpack:///vendors~main.627d5f000ff75700853f.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAiqNA;;;;;AA2taA;;AA48BA;;;;;;;;;;;;;;AAmBA;;;;;AA0iQA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAsdA;;;;;;;AAfA","sourceRoot":""}
|
||||
|
|
@ -168,6 +168,7 @@
|
|||
<ListBoxMenu aria-label={ariaLabel} {id}>
|
||||
{#each filteredItems as item, i (item.id || i)}
|
||||
<ListBoxMenuItem
|
||||
id={item.id}
|
||||
active={selectedIndex === i || selectedId === item.id}
|
||||
highlighted={highlightedIndex === i || selectedIndex === i}
|
||||
on:click={() => {
|
||||
|
|
|
|||
20
src/components/Dropdown/Dropdown.Skeleton.svelte
Normal file
20
src/components/Dropdown/Dropdown.Skeleton.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let inline = false;
|
||||
export let style = undefined;
|
||||
|
||||
import { cx } from '../../lib';
|
||||
</script>
|
||||
|
||||
<div
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
class={cx('--skeleton', '--dropdown-v2', '--list-box', '--form-item', inline && '--list-box--inline', className)}
|
||||
{style}>
|
||||
<div role="button" class={cx('--list-box__field')}>
|
||||
<span class={cx('--list-box__label')} />
|
||||
</div>
|
||||
</div>
|
||||
49
src/components/Dropdown/Dropdown.Story.svelte
Normal file
49
src/components/Dropdown/Dropdown.Story.svelte
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from '../../internal/ui/Layout.svelte';
|
||||
import Button from '../Button';
|
||||
import Dropdown from './Dropdown.svelte';
|
||||
import DropdownSkeleton from './Dropdown.Skeleton.svelte';
|
||||
|
||||
let items = [
|
||||
{ id: 'option-0', text: 'Option 1' },
|
||||
{ id: 'option-1', text: 'Option 2' },
|
||||
{ id: 'option-2', text: 'Option 3' },
|
||||
{ id: 'option-3', text: 'Option 4' }
|
||||
];
|
||||
|
||||
let selectedIndex = -1;
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
|
||||
{#if story === 'skeleton'}
|
||||
<div style="width: 300px">
|
||||
<DropdownSkeleton />
|
||||
|
||||
<DropdownSkeleton inline />
|
||||
</div>
|
||||
{:else}
|
||||
<p>Currently, this component does not support items as slots.</p>
|
||||
<p>
|
||||
<code>items</code>
|
||||
must be an array of objects; mandatory fields are `id` and `text`.
|
||||
</p>
|
||||
<pre style="margin-top: 1rem;">
|
||||
<code>{'items = Array<{ id: string; text: string; }>'}</code>
|
||||
</pre>
|
||||
<div style="margin-top: 2rem; margin-bottom: 2rem;">
|
||||
<Button
|
||||
size="small"
|
||||
on:click={() => {
|
||||
selectedIndex = selectedIndex > -1 ? -1 : 1;
|
||||
}}>
|
||||
{selectedIndex > -1 ? 'Clear selected item' : "Set item to 'Option 2'"}
|
||||
</Button>
|
||||
</div>
|
||||
<div style="width: 300px">
|
||||
<Dropdown {...$$props} bind:selectedIndex {items} />
|
||||
</div>
|
||||
{/if}
|
||||
</Layout>
|
||||
34
src/components/Dropdown/Dropdown.stories.js
Normal file
34
src/components/Dropdown/Dropdown.stories.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
|
||||
import Component from './Dropdown.Story.svelte';
|
||||
|
||||
export default { title: 'Dropdown', decorators: [withKnobs] };
|
||||
|
||||
const types = {
|
||||
'Default (default)': 'default',
|
||||
'Inline (inline)': 'inline'
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
'Extra large size (xl)': 'xl',
|
||||
'Regular size (lg)': '',
|
||||
'Small size (sm)': 'sm'
|
||||
};
|
||||
|
||||
export const Default = () => ({
|
||||
Component,
|
||||
props: {
|
||||
id: text('Dropdown ID (id)', 'carbon-dropdown-example'),
|
||||
type: select('Dropdown type (type)', types, 'default'),
|
||||
size: select('Field size (size)', sizes, '') || undefined,
|
||||
label: text('Label (label)', 'Dropdown menu options'),
|
||||
'aria-label': text('Aria Label (aria-label)', 'Dropdown'),
|
||||
disabled: boolean('Disabled (disabled)', false),
|
||||
light: boolean('Light variant (light)', false),
|
||||
titleText: text('Title (titleText)', 'This is not a dropdown title.'),
|
||||
helperText: text('Helper text (helperText)', 'This is not some helper text.'),
|
||||
invalid: boolean('Show form validation UI (invalid)', false),
|
||||
invalidText: text('Form validation UI content (invalidText)', 'A valid value is required')
|
||||
}
|
||||
});
|
||||
|
||||
export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
|
||||
144
src/components/Dropdown/Dropdown.svelte
Normal file
144
src/components/Dropdown/Dropdown.svelte
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let disabled = false;
|
||||
export let helperText = '';
|
||||
export let id = Math.random();
|
||||
export let inline = false;
|
||||
export let invalid = false;
|
||||
export let invalidText = '';
|
||||
export let items = [];
|
||||
export let itemToString = item => item.text || item.id;
|
||||
export let label = undefined;
|
||||
export let light = false;
|
||||
export let open = false;
|
||||
export let selectedIndex = -1;
|
||||
export let size = undefined;
|
||||
export let style = undefined;
|
||||
export let titleText = '';
|
||||
export let translateWithId = undefined;
|
||||
export let type = 'default';
|
||||
|
||||
import { setContext } from 'svelte';
|
||||
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
||||
import { cx } from '../../lib';
|
||||
import ListBox, { ListBoxField, ListBoxMenu, ListBoxMenuIcon, ListBoxMenuItem } from '../ListBox';
|
||||
|
||||
let selectedId = undefined;
|
||||
let fieldRef = undefined;
|
||||
let highlightedIndex = -1;
|
||||
|
||||
setContext('Dropdown', {
|
||||
declareRef: ({ ref }) => {
|
||||
fieldRef = ref;
|
||||
}
|
||||
});
|
||||
|
||||
function change(direction) {
|
||||
let index = highlightedIndex + direction;
|
||||
|
||||
if (index < 0) {
|
||||
index = items.length - 1;
|
||||
} else if (index >= items.length) {
|
||||
index = 0;
|
||||
}
|
||||
|
||||
highlightedIndex = index;
|
||||
}
|
||||
|
||||
$: inline = type === 'inline';
|
||||
$: selectedItem = items[selectedIndex];
|
||||
$: if (!open) {
|
||||
highlightedIndex = -1;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:body
|
||||
on:click={({ target }) => {
|
||||
if (open && fieldRef && !fieldRef.contains(target)) {
|
||||
open = false;
|
||||
}
|
||||
}} />
|
||||
|
||||
<div
|
||||
class={cx('--dropdown__wrapper', '--list-box__wrapper', inline && '--dropdown__wrapper--inline', inline && '--list-box__wrapper--inline', inline && invalid && '--dropdown__wrapper--inline--invalid', inline && invalid && '--list-box__wrapper--inline--invalid', className)}
|
||||
{style}>
|
||||
{#if titleText}
|
||||
<label for={id} class={cx('--label', disabled && '--label--disabled')}>{titleText}</label>
|
||||
{/if}
|
||||
{#if !inline && helperText}
|
||||
<div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
|
||||
{helperText}
|
||||
</div>
|
||||
{/if}
|
||||
<ListBox
|
||||
{type}
|
||||
{size}
|
||||
{id}
|
||||
aria-label={$$props['aria-label']}
|
||||
class={cx('--dropdown', invalid && '--dropdown--invalid', open && '--dropdown--open', inline && '--dropdown--inline', disabled && '--dropdown--disabled', light && '--dropdown--light')}
|
||||
on:click={({ target }) => {
|
||||
open = fieldRef.contains(target) ? !open : false;
|
||||
}}
|
||||
{disabled}
|
||||
{open}
|
||||
{invalid}
|
||||
{invalidText}
|
||||
{light}>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class={cx('--list-box__invalid-icon')} />
|
||||
{/if}
|
||||
<ListBoxField
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-expanded={open}
|
||||
on:keydown={({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
open = !open;
|
||||
if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
|
||||
selectedIndex = highlightedIndex;
|
||||
open = false;
|
||||
}
|
||||
} else if (key === 'Tab') {
|
||||
open = false;
|
||||
fieldRef.blur();
|
||||
} else if (key === 'ArrowDown') {
|
||||
change(1);
|
||||
} else if (key === 'ArrowUp') {
|
||||
change(-1);
|
||||
}
|
||||
}}
|
||||
on:blur={({ relatedTarget }) => {
|
||||
if (relatedTarget) {
|
||||
fieldRef.focus();
|
||||
}
|
||||
}}
|
||||
{disabled}
|
||||
{translateWithId}
|
||||
{id}>
|
||||
<span class={cx('--list-box__label')}>
|
||||
{#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
|
||||
</span>
|
||||
<ListBoxMenuIcon {open} {translateWithId} />
|
||||
</ListBoxField>
|
||||
{#if open}
|
||||
<ListBoxMenu aria-labelledby={id} {id}>
|
||||
{#each items as item, i (item.id || i)}
|
||||
<ListBoxMenuItem
|
||||
id={item.id}
|
||||
active={selectedIndex === i || selectedId === item.id}
|
||||
highlighted={highlightedIndex === i || selectedIndex === i}
|
||||
on:click={() => {
|
||||
selectedId = item.id;
|
||||
selectedIndex = i;
|
||||
}}
|
||||
on:mouseenter={() => {
|
||||
highlightedIndex = i;
|
||||
}}>
|
||||
{itemToString(item)}
|
||||
</ListBoxMenuItem>
|
||||
{/each}
|
||||
</ListBoxMenu>
|
||||
{/if}
|
||||
</ListBox>
|
||||
</div>
|
||||
4
src/components/Dropdown/index.js
Normal file
4
src/components/Dropdown/index.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import Dropdown from './Dropdown.svelte';
|
||||
|
||||
export default Dropdown;
|
||||
export { default as DropdownSkeleton } from './Dropdown.Skeleton.svelte';
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
[translationIds.close]: 'Close menu',
|
||||
[translationIds.open]: 'Open menu'
|
||||
};
|
||||
const ctx = getContext('MultiSelect');
|
||||
const ctx = getContext('MultiSelect') || getContext('Dropdown');
|
||||
|
||||
let fieldRef = undefined;
|
||||
|
||||
|
|
@ -34,6 +34,7 @@
|
|||
aria-expanded={ariaExpanded}
|
||||
aria-owns={(ariaExpanded && menuId) || undefined}
|
||||
aria-controls={(ariaExpanded && menuId) || undefined}
|
||||
aria-disabled={disabled}
|
||||
aria-label={ariaExpanded ? translateWithId('close') : translateWithId('open')}
|
||||
tabindex={disabled ? '-1' : tabindex}
|
||||
class={cx('--list-box__field', className)}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
<div
|
||||
role="listbox"
|
||||
id={menuId}
|
||||
aria-labelledby={$$props['aria-labelledby']}
|
||||
aria-label={$$props['aria-label']}
|
||||
class={cx('--list-box__menu', className)}
|
||||
{style}>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
export let id = undefined;
|
||||
export let active = false;
|
||||
export let highlighted = false;
|
||||
|
||||
|
|
@ -9,7 +10,8 @@
|
|||
on:click
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
class={cx('--list-box__menu-item', active && '--list-box__menu-item--active', highlighted && '--list-box__menu-item--highlighted')}>
|
||||
class={cx('--list-box__menu-item', active && '--list-box__menu-item--active', highlighted && '--list-box__menu-item--highlighted')}
|
||||
{id}>
|
||||
<div class={cx('--list-box__menu-item__option')}>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -266,6 +266,7 @@
|
|||
<ListBoxMenu aria-label={ariaLabel} {id}>
|
||||
{#each filterable ? filteredItems : sortedItems as item, i (item.id || i)}
|
||||
<ListBoxMenuItem
|
||||
id={item.id}
|
||||
active={item.checked}
|
||||
highlighted={highlightedIndex === i}
|
||||
on:click={() => {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import CodeSnippet, { CodeSnippetSkeleton } from './components/CodeSnippet';
|
|||
import DataTable from './components/DataTable';
|
||||
import DataTableSkeleton from './components/DataTableSkeleton';
|
||||
import DatePicker, { DatePickerInput } from './components/DatePicker';
|
||||
import Dropdown, { DropdownSkeleton } from './components/Dropdown';
|
||||
import FileUploader, {
|
||||
FileUploaderButton,
|
||||
FileUploaderItem,
|
||||
|
|
@ -105,6 +106,8 @@ export {
|
|||
DataTableSkeleton,
|
||||
DatePicker,
|
||||
DatePickerInput,
|
||||
Dropdown,
|
||||
DropdownSkeleton,
|
||||
FileUploader,
|
||||
FileUploaderButton,
|
||||
FileUploaderItem,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue