mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
Merge remote-tracking branch 'upstream/master'
This commit is contained in:
Adan Ulloa
commit
397c53b48e
25 changed files with 16 additions and 1330 deletions
|
|
@ -1,53 +0,0 @@
|
|||
<script>
|
||||
import Layout from '../../internal/ui/Layout.svelte';
|
||||
import ToggleSmall from '../ToggleSmall';
|
||||
import Button from '../Button';
|
||||
import ComboBox from './ComboBox.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' },
|
||||
{
|
||||
id: 'option-4',
|
||||
text: 'An example option that is really long to show what should be done to handle long text'
|
||||
}
|
||||
];
|
||||
|
||||
let toggled = false;
|
||||
let value = undefined;
|
||||
let selectedIndex = -1;
|
||||
|
||||
function shouldFilterItem(item, value) {
|
||||
if (!toggled || !value) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return item.text.toLowerCase().includes(value.toLowerCase());
|
||||
}
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<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;">
|
||||
<ToggleSmall labelText="Enable filtering" bind:toggled />
|
||||
<Button
|
||||
size="small"
|
||||
on:click={() => {
|
||||
selectedIndex = 1;
|
||||
}}>
|
||||
Set item to 'Option 2'
|
||||
</Button>
|
||||
</div>
|
||||
<div style="width: 300px; margin-top: 2rem;">
|
||||
<ComboBox {...$$props} id="combobox" bind:value bind:selectedIndex {items} {shouldFilterItem} />
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
|
||||
import Component from './ComboBox.Story.svelte';
|
||||
|
||||
export default { title: 'ComboBox', decorators: [withKnobs] };
|
||||
|
||||
const sizes = {
|
||||
'Extra large size (xl)': 'xl',
|
||||
'Regular size (lg)': '',
|
||||
'Small size (sm)': 'sm'
|
||||
};
|
||||
|
||||
export const Default = () => ({
|
||||
Component,
|
||||
props: {
|
||||
size: select('Field size (size)', sizes, ''),
|
||||
placeholder: text('Placeholder text (placeholder)', 'Filter...'),
|
||||
titleText: text('Title (titleText)', 'Combobox title'),
|
||||
helperText: text('Helper text (helperText)', 'Optional helper text here'),
|
||||
light: boolean('Light (light)', false),
|
||||
disabled: boolean('Disabled (disabled)', false),
|
||||
invalid: boolean('Invalid (invalid)', false),
|
||||
invalidText: text('Invalid text (invalidText)', 'A valid value is required')
|
||||
}
|
||||
});
|
||||
|
|
@ -1,188 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let disabled = false;
|
||||
export let helperText = '';
|
||||
export let id = Math.random();
|
||||
export let invalid = false;
|
||||
export let invalidText = '';
|
||||
export let items = [];
|
||||
export let itemToString = item => item.text || item.id;
|
||||
export let light = false;
|
||||
export let open = false;
|
||||
export let placeholder = '';
|
||||
export let selectedIndex = -1;
|
||||
export let shouldFilterItem = () => true;
|
||||
export let size = undefined;
|
||||
export let style = undefined;
|
||||
export let titleText = '';
|
||||
export let translateWithId = undefined;
|
||||
export let value = '';
|
||||
|
||||
import { afterUpdate } from 'svelte';
|
||||
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
||||
import { cx } from '../../lib';
|
||||
import ListBox, {
|
||||
ListBoxField,
|
||||
ListBoxMenu,
|
||||
ListBoxMenuIcon,
|
||||
ListBoxMenuItem,
|
||||
ListBoxSelection
|
||||
} from '../ListBox';
|
||||
|
||||
let selectedId = undefined;
|
||||
let inputRef = undefined;
|
||||
let inputValue = '';
|
||||
let highlightedIndex = -1;
|
||||
|
||||
function change(direction) {
|
||||
let index = highlightedIndex + direction;
|
||||
|
||||
if (index < 0) {
|
||||
index = items.length - 1;
|
||||
} else if (index >= items.length) {
|
||||
index = 0;
|
||||
}
|
||||
|
||||
highlightedIndex = index;
|
||||
}
|
||||
|
||||
afterUpdate(() => {
|
||||
if (open) {
|
||||
inputRef.focus();
|
||||
filteredItems = items.filter(item => shouldFilterItem(item, value));
|
||||
} else {
|
||||
highlightedIndex = -1;
|
||||
inputValue = selectedItem ? selectedItem.text : '';
|
||||
}
|
||||
});
|
||||
|
||||
$: ariaLabel = $$props['aria-label'] || 'Choose an item';
|
||||
$: menuId = `menu-${id}`;
|
||||
$: comboId = `combo-${id}`;
|
||||
$: highlightedId = items[highlightedIndex] ? items[highlightedIndex].id : undefined;
|
||||
$: filteredItems = items.filter(item => shouldFilterItem(item, value));
|
||||
$: selectedItem = items[selectedIndex];
|
||||
$: inputValue = selectedItem ? selectedItem.text : undefined;
|
||||
$: value = inputValue;
|
||||
</script>
|
||||
|
||||
<svelte:body
|
||||
on:click={({ target }) => {
|
||||
if (open && inputRef && !inputRef.contains(target)) {
|
||||
open = false;
|
||||
}
|
||||
}} />
|
||||
|
||||
<div class={cx('--list-box__wrapper', className)} {style}>
|
||||
{#if titleText}
|
||||
<label class={cx('--label', disabled && '--label--disabled')} for={id}>{titleText}</label>
|
||||
{/if}
|
||||
{#if helperText}
|
||||
<div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
|
||||
{helperText}
|
||||
</div>
|
||||
{/if}
|
||||
<ListBox
|
||||
class={cx('--combo-box')}
|
||||
id={comboId}
|
||||
aria-label={ariaLabel}
|
||||
{disabled}
|
||||
{invalid}
|
||||
{invalidText}
|
||||
{open}
|
||||
{light}
|
||||
{size}>
|
||||
<ListBoxField
|
||||
role="button"
|
||||
aria-expanded={open}
|
||||
on:click={() => {
|
||||
open = true;
|
||||
}}
|
||||
{id}
|
||||
{disabled}
|
||||
{translateWithId}>
|
||||
<input
|
||||
bind:this={inputRef}
|
||||
tabindex="0"
|
||||
autocomplete="off"
|
||||
aria-autocomplete="list"
|
||||
aria-expanded={open}
|
||||
aria-activedescendant={highlightedId}
|
||||
aria-labelledby={comboId}
|
||||
aria-disabled={disabled}
|
||||
aria-controls={open ? menuId : undefined}
|
||||
aria-owns={open ? menuId : undefined}
|
||||
class={cx('--text-input', inputValue === '' && '--text-input--empty')}
|
||||
on:input={({ target }) => {
|
||||
inputValue = target.value;
|
||||
}}
|
||||
on:keydown
|
||||
on:keydown|stopPropagation={({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
open = !open;
|
||||
if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
|
||||
selectedIndex = highlightedIndex;
|
||||
open = false;
|
||||
}
|
||||
} else if (key === 'Tab') {
|
||||
open = false;
|
||||
} else if (key === 'ArrowDown') {
|
||||
change(1);
|
||||
} else if (key === 'ArrowUp') {
|
||||
change(-1);
|
||||
}
|
||||
}}
|
||||
on:focus
|
||||
on:blur
|
||||
on:blur={({ relatedTarget }) => {
|
||||
if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
|
||||
inputRef.focus();
|
||||
}
|
||||
}}
|
||||
{disabled}
|
||||
{placeholder}
|
||||
{id}
|
||||
value={inputValue} />
|
||||
{#if invalid}
|
||||
<WarningFilled16 class={cx('--list-box__invalid-icon')} />
|
||||
{/if}
|
||||
{#if inputValue}
|
||||
<ListBoxSelection
|
||||
on:clear={() => {
|
||||
selectedIndex = -1;
|
||||
open = false;
|
||||
}}
|
||||
{translateWithId}
|
||||
{disabled}
|
||||
{open} />
|
||||
{/if}
|
||||
<ListBoxMenuIcon
|
||||
on:click={() => {
|
||||
open = !open;
|
||||
}}
|
||||
{translateWithId}
|
||||
{open} />
|
||||
</ListBoxField>
|
||||
{#if open}
|
||||
<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={() => {
|
||||
selectedId = item.id;
|
||||
selectedIndex = items.map(({ id }) => id).indexOf(filteredItems[i].id);
|
||||
open = false;
|
||||
}}
|
||||
on:mouseenter={() => {
|
||||
highlightedIndex = i;
|
||||
}}>
|
||||
{itemToString(item)}
|
||||
</ListBoxMenuItem>
|
||||
{/each}
|
||||
</ListBoxMenu>
|
||||
{/if}
|
||||
</ListBox>
|
||||
</div>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import ComboBox from './ComboBox.svelte';
|
||||
|
||||
export default ComboBox;
|
||||
|
|
@ -1,152 +0,0 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Layout from '../../internal/ui/Layout.svelte';
|
||||
import DataTable from './DataTable.svelte';
|
||||
import Table from './Table.svelte';
|
||||
import TableBody from './TableBody.svelte';
|
||||
import TableCell from './TableCell.svelte';
|
||||
import TableContainer from './TableContainer.svelte';
|
||||
import TableHead from './TableHead.svelte';
|
||||
import TableHeader from './TableHeader.svelte';
|
||||
import TableRow from './TableRow.svelte';
|
||||
|
||||
let rows = [
|
||||
{
|
||||
id: 'a',
|
||||
name: 'Load Balancer 3',
|
||||
protocol: 'HTTP',
|
||||
port: 3000,
|
||||
rule: 'Round robin',
|
||||
attached_groups: 'Kevins VM Groups',
|
||||
status: 'Disabled'
|
||||
},
|
||||
{
|
||||
id: 'b',
|
||||
name: 'Load Balancer 1',
|
||||
protocol: 'HTTP',
|
||||
port: 443,
|
||||
rule: 'Round robin',
|
||||
attached_groups: 'Maureens VM Groups',
|
||||
status: 'Starting'
|
||||
},
|
||||
{
|
||||
id: 'c',
|
||||
name: 'Load Balancer 2',
|
||||
protocol: 'HTTP',
|
||||
port: 80,
|
||||
rule: 'DNS delegation',
|
||||
attached_groups: 'Andrews VM Groups',
|
||||
status: 'Active'
|
||||
},
|
||||
{
|
||||
id: 'd',
|
||||
name: 'Load Balancer 6',
|
||||
protocol: 'HTTP',
|
||||
port: 3000,
|
||||
rule: 'Round robin',
|
||||
attached_groups: 'Marcs VM Groups',
|
||||
status: 'Disabled'
|
||||
},
|
||||
{
|
||||
id: 'e',
|
||||
name: 'Load Balancer 4',
|
||||
protocol: 'HTTP',
|
||||
port: 443,
|
||||
rule: 'Round robin',
|
||||
attached_groups: 'Mels VM Groups',
|
||||
status: 'Starting'
|
||||
},
|
||||
{
|
||||
id: 'f',
|
||||
name: 'Load Balancer 5',
|
||||
protocol: 'HTTP',
|
||||
port: 80,
|
||||
rule: 'DNS delegation',
|
||||
attached_groups: 'Ronjas VM Groups',
|
||||
status: 'Active'
|
||||
}
|
||||
];
|
||||
let headers = [
|
||||
{ key: 'name', value: 'Name' },
|
||||
{ key: 'protocol', value: 'Protocol' },
|
||||
{ key: 'port', value: 'Port' },
|
||||
{ key: 'rule', value: 'Rule' },
|
||||
{ key: 'attached_groups', value: 'Attached Groups' },
|
||||
{ key: 'status', value: 'Status' }
|
||||
];
|
||||
let sortable = true;
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
{#if story === 'composed'}
|
||||
<DataTable {...$$props} {rows} {headers} let:props>
|
||||
<TableContainer
|
||||
title="DataTable"
|
||||
description="With default options"
|
||||
{...props.getTableContainerProps()}>
|
||||
<Table {...props.getTableProps()}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{#each props.headers as header, i (header.key)}
|
||||
<TableHeader {...props.getHeaderProps({ header })}>{header.header}</TableHeader>
|
||||
{/each}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{#each props.rows as row, i}
|
||||
<TableRow {...props.getRowProps({ row })}>
|
||||
{#each row.cells as cell, j}
|
||||
<TableCell>{cell.value}</TableCell>
|
||||
{/each}
|
||||
</TableRow>
|
||||
{/each}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</DataTable>
|
||||
{:else if story === 'sortable'}
|
||||
<DataTable
|
||||
bind:sortable
|
||||
title={$$props.title}
|
||||
description={$$props.description}
|
||||
zebra={$$props.zebra}
|
||||
size={$$props.size}
|
||||
stickyHeader={$$props.stickyHeader}
|
||||
on:click={({ detail }) => {
|
||||
console.log('on:click', detail);
|
||||
}}
|
||||
on:click:header={({ detail }) => {
|
||||
console.log('on:click:header', detail);
|
||||
}}
|
||||
on:click:row={({ detail }) => {
|
||||
console.log('on:click:row', detail);
|
||||
}}
|
||||
on:click:cell={({ detail }) => {
|
||||
console.log('on:click:cell', detail);
|
||||
}}
|
||||
{rows}
|
||||
{headers} />
|
||||
{:else}
|
||||
<DataTable
|
||||
title={$$props.title}
|
||||
description={$$props.description}
|
||||
zebra={$$props.zebra}
|
||||
size={$$props.size}
|
||||
stickyHeader={$$props.stickyHeader}
|
||||
on:click={({ detail }) => {
|
||||
console.log('on:click', detail);
|
||||
}}
|
||||
on:click:header={({ detail }) => {
|
||||
console.log('on:click:header', detail);
|
||||
}}
|
||||
on:click:row={({ detail }) => {
|
||||
console.log('on:click:row', detail);
|
||||
}}
|
||||
on:click:cell={({ detail }) => {
|
||||
console.log('on:click:cell', detail);
|
||||
}}
|
||||
{rows}
|
||||
{headers} />
|
||||
{/if}
|
||||
</Layout>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
|
||||
import Component from './DataTable.Story.svelte';
|
||||
|
||||
export default { title: 'DataTable', decorators: [withKnobs] };
|
||||
|
||||
export const Default = () => ({
|
||||
Component,
|
||||
props: {
|
||||
title: text('Optional DataTable title (title)', ''),
|
||||
description: text('Optional DataTable description (description)', ''),
|
||||
zebra: boolean('Zebra row styles (zebra)', false),
|
||||
size: select(
|
||||
'Row height (size)',
|
||||
{ compact: 'compact', short: 'short', tall: 'tall', none: null },
|
||||
null
|
||||
),
|
||||
stickyHeader: boolean('Sticky header (experimental)', false)
|
||||
}
|
||||
});
|
||||
|
||||
export const Sortable = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'sortable',
|
||||
title: text('Optional DataTable title (title)', ''),
|
||||
description: text('Optional DataTable description (description)', ''),
|
||||
zebra: boolean('Zebra row styles (zebra)', false),
|
||||
size: select(
|
||||
'Row height (size)',
|
||||
{ compact: 'compact', short: 'short', tall: 'tall', none: null },
|
||||
null
|
||||
),
|
||||
stickyHeader: boolean('Sticky header (experimental)', false)
|
||||
}
|
||||
});
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let title = '';
|
||||
export let description = '';
|
||||
export let zebra = false;
|
||||
export let rows = [];
|
||||
export let headers = [];
|
||||
export let stickyHeader = false;
|
||||
export let size = undefined;
|
||||
export let sortable = false;
|
||||
export let style = undefined;
|
||||
|
||||
import { createEventDispatcher, setContext } from 'svelte';
|
||||
import { writable, derived } from 'svelte/store';
|
||||
import Table from './Table.svelte';
|
||||
import TableBody from './TableBody.svelte';
|
||||
import TableCell from './TableCell.svelte';
|
||||
import TableContainer from './TableContainer.svelte';
|
||||
import TableHead from './TableHead.svelte';
|
||||
import TableHeader from './TableHeader.svelte';
|
||||
import TableRow from './TableRow.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const sortDirectionMap = { none: 'ascending', ascending: 'descending', descending: 'none' };
|
||||
|
||||
let tableSortable = writable(sortable);
|
||||
let sortHeader = writable({ id: null, key: null, sortDirection: 'none' });
|
||||
let headerItems = writable([]);
|
||||
let thKeys = derived(headerItems, () =>
|
||||
headers
|
||||
.map(({ key }, i) => ({ key, id: $headerItems[i] }))
|
||||
.reduce((a, c) => ({ ...a, [c.key]: c.id }), {})
|
||||
);
|
||||
|
||||
setContext('DataTable', {
|
||||
sortHeader,
|
||||
tableSortable,
|
||||
add: id => {
|
||||
headerItems.update(_ => [..._, id]);
|
||||
}
|
||||
});
|
||||
|
||||
$: tableSortable.set(sortable);
|
||||
$: headerKeys = headers.map(({ key }) => key);
|
||||
$: rows = rows.map(row => ({ ...row, cells: headerKeys.map(key => ({ key, value: row[key] })) }));
|
||||
$: sortedRows = rows;
|
||||
$: ascending = $sortHeader.sortDirection === 'ascending';
|
||||
$: sortKey = $sortHeader.key;
|
||||
$: sorting = sortable && sortKey != null;
|
||||
$: if (sorting) {
|
||||
if ($sortHeader.sortDirection === 'none') {
|
||||
sortedRows = rows;
|
||||
} else {
|
||||
sortedRows = [...rows].sort((a, b) => {
|
||||
const itemA = ascending ? a[sortKey] : b[sortKey];
|
||||
const itemB = ascending ? b[sortKey] : a[sortKey];
|
||||
|
||||
if (typeof itemA === 'number' && typeof itemB === 'number') {
|
||||
return itemA - itemB;
|
||||
}
|
||||
|
||||
return itemA.toString().localeCompare(itemB.toString(), 'en', { numeric: true });
|
||||
});
|
||||
}
|
||||
}
|
||||
$: props = {
|
||||
headers,
|
||||
rows
|
||||
};
|
||||
</script>
|
||||
|
||||
<slot {props}>
|
||||
<TableContainer class={className} {title} {description} {style}>
|
||||
<Table {zebra} {size} {stickyHeader} {sortable}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{#each headers as header, i (header.key)}
|
||||
<TableHeader
|
||||
on:click={() => {
|
||||
dispatch('click', { header });
|
||||
dispatch('click:header', header);
|
||||
let active = header.key === $sortHeader.key;
|
||||
let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
|
||||
let sortDirection = sortDirectionMap[currentSortDirection];
|
||||
sortHeader.set({
|
||||
id: sortDirection === 'none' ? null : $thKeys[header.key],
|
||||
key: header.key,
|
||||
sortDirection
|
||||
});
|
||||
}}>
|
||||
{header.value}
|
||||
</TableHeader>
|
||||
{/each}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{#each sorting ? sortedRows : rows as row, i (row.id)}
|
||||
<TableRow
|
||||
on:click={() => {
|
||||
dispatch('click', { row });
|
||||
dispatch('click:row', row);
|
||||
}}>
|
||||
{#each row.cells as cell, j (cell.key)}
|
||||
<TableCell
|
||||
on:click={() => {
|
||||
dispatch('click', { row, cell });
|
||||
dispatch('click:cell', cell);
|
||||
}}>
|
||||
{cell.value}
|
||||
</TableCell>
|
||||
{/each}
|
||||
</TableRow>
|
||||
{/each}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</slot>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let zebra = false;
|
||||
export let size = undefined;
|
||||
export let useStaticWidth = false;
|
||||
export let shouldShowBorder = false;
|
||||
export let sortable = false;
|
||||
export let stickyHeader = false;
|
||||
export let style = undefined;
|
||||
|
||||
import { cx } from '../../lib';
|
||||
</script>
|
||||
|
||||
{#if stickyHeader}
|
||||
<section class={cx('--data-table_inner-container', className)} {style}>
|
||||
<table
|
||||
class={cx('--data-table', size === 'compact' && '--data-table--compact', size === 'short' && '--data-table--short', size === 'tall' && '--data-table--tall', sortable && '--data-table--sort', zebra && '--data-table--zebra', useStaticWidth && '--data-table--static', !shouldShowBorder && '--data-table--no-border', stickyHeader && '--data-table--sticky-header')}>
|
||||
<slot />
|
||||
</table>
|
||||
</section>
|
||||
{:else}
|
||||
<table
|
||||
class={cx('--data-table', size === 'compact' && '--data-table--compact', size === 'short' && '--data-table--short', size === 'tall' && '--data-table--tall', sortable && '--data-table--sort', zebra && '--data-table--zebra', useStaticWidth && '--data-table--static', !shouldShowBorder && '--data-table--no-border', stickyHeader && '--data-table--sticky-header', className)}
|
||||
{style}>
|
||||
<slot />
|
||||
</table>
|
||||
{/if}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let style = undefined;
|
||||
</script>
|
||||
|
||||
<tbody aria-live={$$props['aria-live'] || 'polite'} class={className} {style}>
|
||||
<slot />
|
||||
</tbody>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let style = undefined;
|
||||
</script>
|
||||
|
||||
<td on:click on:mouseover on:mouseenter on:mouseleave class={className} {style}>
|
||||
<slot />
|
||||
</td>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let stickyHeader = false;
|
||||
export let title = '';
|
||||
export let description = '';
|
||||
export let style = undefined;
|
||||
|
||||
import { cx } from '../../lib';
|
||||
</script>
|
||||
|
||||
<div
|
||||
class={cx('--data-table-container', stickyHeader && '--data-table--max-width', className)}
|
||||
{style}>
|
||||
{#if title}
|
||||
<div class={cx('--data-table-header')}>
|
||||
<h4 class={cx('--data-table-header__title')}>{title}</h4>
|
||||
<p class={cx('--data-table-header__description')}>{description}</p>
|
||||
</div>
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let style = undefined;
|
||||
</script>
|
||||
|
||||
<thead on:click on:mouseover on:mouseenter on:mouseleave class={className} {style}>
|
||||
<slot />
|
||||
</thead>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let scope = 'col';
|
||||
export let translateWithId = () => '';
|
||||
export let style = undefined;
|
||||
|
||||
import { getContext } from 'svelte';
|
||||
import ArrowUp20 from 'carbon-icons-svelte/lib/ArrowUp20';
|
||||
import ArrowsVertical20 from 'carbon-icons-svelte/lib/ArrowsVertical20';
|
||||
import { cx } from '../../lib';
|
||||
|
||||
const id = Math.random();
|
||||
const { sortHeader, tableSortable, add } = getContext('DataTable');
|
||||
|
||||
add(id);
|
||||
|
||||
$: active = $sortHeader.id === id;
|
||||
// TODO: translate with id
|
||||
$: ariaLabel = translateWithId();
|
||||
</script>
|
||||
|
||||
{#if $tableSortable}
|
||||
<th
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
class={className}
|
||||
aria-sort={active ? $sortHeader.sortDirection : 'none'}
|
||||
{scope}>
|
||||
<button
|
||||
class={cx('--table-sort', active && '--table-sort--active', active && $sortHeader.sortDirection === 'descending' && '--table-sort--ascending')}
|
||||
on:click>
|
||||
<span class={cx('--table-header-label')}>
|
||||
<slot />
|
||||
</span>
|
||||
<ArrowUp20 class={cx('--table-sort__icon')} aria-label={ariaLabel} />
|
||||
<ArrowsVertical20 class={cx('--table-sort__icon-unsorted')} aria-label={ariaLabel} />
|
||||
</button>
|
||||
</th>
|
||||
{:else}
|
||||
<th on:click on:mouseover on:mouseenter on:mouseleave class={className} {style} {scope}>
|
||||
<span class={cx('--table-header-label')}>
|
||||
<slot />
|
||||
</span>
|
||||
</th>
|
||||
{/if}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import DataTable from './DataTable.svelte';
|
||||
|
||||
export default DataTable;
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
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' } });
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
import Dropdown from './Dropdown.svelte';
|
||||
|
||||
export default Dropdown;
|
||||
export { default as DropdownSkeleton } from './Dropdown.Skeleton.svelte';
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<script>
|
||||
import Layout from '../../internal/ui/Layout.svelte';
|
||||
import Button from '../Button';
|
||||
import MultiSelect from './MultiSelect.svelte';
|
||||
|
||||
let value = '';
|
||||
|
||||
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' },
|
||||
{
|
||||
id: 'option-4',
|
||||
text: 'An example option that is really long to show what should be done to handle long text'
|
||||
}
|
||||
];
|
||||
|
||||
let selectedIds = [];
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
on:click={() => {
|
||||
selectedIds = selectedIds.length > 0 ? [] : [items[1].id, items[2].id];
|
||||
}}>
|
||||
{selectedIds.length > 0 ? 'Clear' : 'Set initial'} selected items
|
||||
</Button>
|
||||
</div>
|
||||
<div style="width: 300px; margin-top: 2rem;">
|
||||
<MultiSelect
|
||||
{...$$props}
|
||||
id="multiselect"
|
||||
placeholder="Filter..."
|
||||
bind:selectedIds
|
||||
bind:items
|
||||
bind:value />
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
|
||||
import Component from './MultiSelect.Story.svelte';
|
||||
|
||||
export default { title: 'MultiSelect', 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: 'multiselect',
|
||||
titleText: text('Title (titleText)', 'Multiselect Title'),
|
||||
helperText: text('Helper text (helperText)', 'This is not helper text'),
|
||||
filterable: boolean('Filterable (filterable)', false),
|
||||
selectionFeedback: select(
|
||||
'Selection feedback (selectionFeedback)',
|
||||
['top', 'fixed', 'top-after-reopen'],
|
||||
'top-after-reopen'
|
||||
),
|
||||
disabled: boolean('Disabled (disabled)', false),
|
||||
light: boolean('Light variant (light)', false),
|
||||
useTitleInItem: boolean('Show tooltip on hover', false),
|
||||
type: select('UI type (Only for `<MultiSelect>`) (type)', types, 'default'),
|
||||
size: select('Field size (size)', sizes, '') || undefined,
|
||||
label: text('Label (label)', 'MultiSelect Label'),
|
||||
invalid: boolean('Show form validation UI (invalid)', false),
|
||||
invalidText: text('Form validation UI content (invalidText)', 'Invalid Selection')
|
||||
}
|
||||
});
|
||||
|
|
@ -1,295 +0,0 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let disabled = false;
|
||||
export let filterable = false;
|
||||
export let filterItem = (item, value) => item.text.toLowerCase().includes(value.toLowerCase());
|
||||
export let helperText = '';
|
||||
export let id = Math.random();
|
||||
export let invalid = false;
|
||||
export let invalidText = '';
|
||||
export let items = [];
|
||||
export let itemToString = item => item.text || item.id;
|
||||
export let label = '';
|
||||
export let light = false;
|
||||
export let locale = 'en';
|
||||
export let open = false;
|
||||
export let placeholder = '';
|
||||
export let selectedIds = [];
|
||||
export let selectionFeedback = 'top-after-reopen';
|
||||
export let size = undefined;
|
||||
export let sortItem = (a, b) => a.text.localeCompare(b.text, locale, { numeric: true });
|
||||
export let style = undefined;
|
||||
export let titleText = '';
|
||||
export let translateWithId = undefined;
|
||||
export let type = 'default';
|
||||
export let useTitleInItem = false;
|
||||
export let value = '';
|
||||
|
||||
import { afterUpdate, setContext } from 'svelte';
|
||||
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
|
||||
import { cx } from '../../lib';
|
||||
import Checkbox from '../Checkbox';
|
||||
import ListBox, {
|
||||
ListBoxField,
|
||||
ListBoxMenu,
|
||||
ListBoxMenuIcon,
|
||||
ListBoxMenuItem,
|
||||
ListBoxSelection
|
||||
} from '../ListBox';
|
||||
|
||||
let multiSelectRef = undefined;
|
||||
let fieldRef = undefined;
|
||||
let selectionRef = undefined;
|
||||
let inputRef = undefined;
|
||||
let inputValue = '';
|
||||
let initialSorted = false;
|
||||
let highlightedIndex = -1;
|
||||
let prevChecked = [];
|
||||
|
||||
setContext('MultiSelect', {
|
||||
declareRef: ({ key, ref }) => {
|
||||
switch (key) {
|
||||
case 'field':
|
||||
fieldRef = ref;
|
||||
break;
|
||||
case 'selection':
|
||||
selectionRef = ref;
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function change(direction) {
|
||||
let index = highlightedIndex + direction;
|
||||
|
||||
if (index < 0) {
|
||||
index = items.length - 1;
|
||||
} else if (index >= items.length) {
|
||||
index = 0;
|
||||
}
|
||||
|
||||
highlightedIndex = index;
|
||||
}
|
||||
|
||||
function sort() {
|
||||
return [
|
||||
...(checked.length > 1 ? checked.sort(sortItem) : checked),
|
||||
...unchecked.sort(sortItem)
|
||||
];
|
||||
}
|
||||
|
||||
afterUpdate(() => {
|
||||
if (checked.length !== prevChecked.length) {
|
||||
if (selectionFeedback === 'top') {
|
||||
sortedItems = sort();
|
||||
}
|
||||
prevChecked = checked;
|
||||
selectedIds = checked.map(({ id }) => id);
|
||||
}
|
||||
|
||||
if (!open) {
|
||||
if (!initialSorted || selectionFeedback !== 'fixed') {
|
||||
sortedItems = sort();
|
||||
initialSorted = true;
|
||||
}
|
||||
|
||||
highlightedIndex = -1;
|
||||
inputValue = '';
|
||||
}
|
||||
|
||||
items = sortedItems;
|
||||
});
|
||||
|
||||
$: menuId = `menu-${id}`;
|
||||
$: inline = type === 'inline';
|
||||
$: ariaLabel = $$props['aria-label'] || 'Choose an item';
|
||||
$: sortedItems = items.map(item => ({ ...item, checked: selectedIds.includes(item.id) }));
|
||||
$: checked = sortedItems.filter(({ checked }) => checked);
|
||||
$: unchecked = sortedItems.filter(({ checked }) => !checked);
|
||||
$: filteredItems = sortedItems.filter(item => filterItem(item, value));
|
||||
$: highlightedId = sortedItems[highlightedIndex] ? sortedItems[highlightedIndex].id : undefined;
|
||||
$: value = inputValue;
|
||||
</script>
|
||||
|
||||
<svelte:body
|
||||
on:click={({ target }) => {
|
||||
if (open && multiSelectRef && !multiSelectRef.contains(target)) {
|
||||
open = false;
|
||||
}
|
||||
}} />
|
||||
|
||||
<div
|
||||
bind:this={multiSelectRef}
|
||||
class={cx('--multi-select__wrapper', '--list-box__wrapper', inline && '--multi-select__wrapper--inline', inline && '--list-box__wrapper--inline', inline && invalid && '--multi-select__wrapper--inline--invalid', inline && invalid && '--list-box__wrapper--inline--invalid', className)}
|
||||
{style}>
|
||||
{#if titleText}
|
||||
<label class={cx('--label', disabled && '--label--disabled')} for={id}>{titleText}</label>
|
||||
{/if}
|
||||
{#if !inline && helperText}
|
||||
<div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
|
||||
{helperText}
|
||||
</div>
|
||||
{/if}
|
||||
<ListBox
|
||||
aria-label={ariaLabel}
|
||||
class={cx('--multi-select', filterable && '--combo-box', filterable && '--multi-select--filterable', invalid && '--multi-select--invalid', inline && '--multi-select--inline', checked.length > 0 && '--multi-select--selected')}
|
||||
{id}
|
||||
{disabled}
|
||||
{invalid}
|
||||
{invalidText}
|
||||
{open}
|
||||
{light}
|
||||
{size}>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class={cx('--list-box__invalid-icon')} />
|
||||
{/if}
|
||||
<ListBoxField
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-expanded={open}
|
||||
on:click={() => {
|
||||
if (filterable) {
|
||||
open = true;
|
||||
inputRef.focus();
|
||||
} else {
|
||||
open = !open;
|
||||
}
|
||||
}}
|
||||
on:keydown={({ key }) => {
|
||||
if (filterable) {
|
||||
return;
|
||||
}
|
||||
if (key === ' ') {
|
||||
open = !open;
|
||||
} else if (key === 'Tab') {
|
||||
if (selectionRef && checked.length > 0) {
|
||||
selectionRef.focus();
|
||||
} else {
|
||||
open = false;
|
||||
fieldRef.blur();
|
||||
}
|
||||
} else if (key === 'ArrowDown') {
|
||||
change(1);
|
||||
} else if (key === 'ArrowUp') {
|
||||
change(-1);
|
||||
} else if (key === 'Enter') {
|
||||
if (highlightedIndex > -1) {
|
||||
sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked;
|
||||
}
|
||||
}
|
||||
}}
|
||||
on:blur={({ relatedTarget }) => {
|
||||
if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
|
||||
fieldRef.focus();
|
||||
}
|
||||
}}
|
||||
{id}
|
||||
{disabled}
|
||||
{translateWithId}>
|
||||
{#if checked.length > 0}
|
||||
<ListBoxSelection
|
||||
selectionCount={checked.length}
|
||||
on:clear={() => {
|
||||
sortedItems = sortedItems.map(item => ({ ...item, checked: false }));
|
||||
fieldRef.blur();
|
||||
}}
|
||||
{translateWithId}
|
||||
{disabled} />
|
||||
{/if}
|
||||
{#if filterable}
|
||||
<input
|
||||
bind:this={inputRef}
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
autocomplete="off"
|
||||
aria-autocomplete="list"
|
||||
aria-expanded={open}
|
||||
aria-activedescendant={highlightedId}
|
||||
aria-disabled={disabled}
|
||||
aria-controls={menuId}
|
||||
class={cx('--text-input', inputValue === '' && '--text-input--empty')}
|
||||
on:input={({ target }) => {
|
||||
inputValue = target.value;
|
||||
}}
|
||||
on:keydown
|
||||
on:keydown|stopPropagation={({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
if (highlightedIndex > -1) {
|
||||
sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked;
|
||||
}
|
||||
} else if (key === 'Tab') {
|
||||
open = false;
|
||||
} else if (key === 'ArrowDown') {
|
||||
change(1);
|
||||
} else if (key === 'ArrowUp') {
|
||||
change(-1);
|
||||
}
|
||||
}}
|
||||
on:focus
|
||||
on:blur
|
||||
on:blur={({ relatedTarget }) => {
|
||||
if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
|
||||
inputRef.focus();
|
||||
}
|
||||
}}
|
||||
{disabled}
|
||||
{placeholder}
|
||||
{id}
|
||||
value={inputValue} />
|
||||
{#if invalid}
|
||||
<WarningFilled16 class={cx('--list-box__invalid-icon')} />
|
||||
{/if}
|
||||
{#if inputValue}
|
||||
<ListBoxSelection
|
||||
on:clear={() => {
|
||||
inputValue = '';
|
||||
open = false;
|
||||
}}
|
||||
{translateWithId}
|
||||
{disabled}
|
||||
{open} />
|
||||
{/if}
|
||||
<ListBoxMenuIcon
|
||||
on:click={() => {
|
||||
open = !open;
|
||||
}}
|
||||
{translateWithId}
|
||||
{open} />
|
||||
{/if}
|
||||
{#if !filterable}
|
||||
<span class={cx('--list-box__label')}>{label}</span>
|
||||
<ListBoxMenuIcon {open} {translateWithId} />
|
||||
{/if}
|
||||
</ListBoxField>
|
||||
{#if open}
|
||||
<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={() => {
|
||||
sortedItems = sortedItems.map(_ =>
|
||||
_.id === item.id ? { ..._, checked: !_.checked } : _
|
||||
);
|
||||
fieldRef.focus();
|
||||
}}
|
||||
on:mouseenter={() => {
|
||||
highlightedIndex = i;
|
||||
}}>
|
||||
<Checkbox
|
||||
readonly
|
||||
tabindex="-1"
|
||||
id={`checkbox-${item.id}`}
|
||||
title={useTitleInItem ? itemToString(item) : undefined}
|
||||
name={itemToString(item)}
|
||||
labelText={itemToString(item)}
|
||||
checked={item.checked}
|
||||
{disabled} />
|
||||
</ListBoxMenuItem>
|
||||
{/each}
|
||||
</ListBoxMenu>
|
||||
{/if}
|
||||
</ListBox>
|
||||
</div>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import MultiSelect from './MultiSelect.svelte';
|
||||
|
||||
export default MultiSelect;
|
||||
Loading…
Add table
Add a link
Reference in a new issue