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

chore: lift components folder

Browse source
This commit is contained in:
Eric Liu 2020-07-19 09:06:08 -07:00
commit 2200b29b92
301 changed files with 57 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

196
src/components/ComboBox/ComboBox.svelte
View file

@ -1,196 +0,0 @@
<script>
export let disabled = false;
export let helperText = "";
export let id = "ccs-" + Math.random().toString(36);
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 titleText = "";
export let translateWithId = undefined;
export let value = "";
export let name = undefined;
export let ref = null;
import { afterUpdate } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
import {
ListBox,
ListBoxField,
ListBoxMenu,
ListBoxMenuIcon,
ListBoxMenuItem,
ListBoxSelection
} from "../ListBox";
let selectedId = 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) {
ref.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 && ref && !ref.contains(target)) {
open = false;
}
}} />
<div class:bx--list-box__wrapper={true} {...$$restProps}>
{#if titleText}
<label for={id} class:bx--label={true} class:bx--label--disabled={disabled}>
{titleText}
</label>
{/if}
{#if helperText}
<div
class:bx--form__helper-text={true}
class:bx--form__helper-text--disabled={disabled}>
{helperText}
</div>
{/if}
<ListBox
class="bx--combo-box"
id={comboId}
aria-label={ariaLabel}
{disabled}
{invalid}
{invalidText}
{open}
{light}
{size}>
<ListBoxField
role="button"
aria-expanded={open}
on:click={() => {
open = true;
}}
{id}
{name}
{disabled}
{translateWithId}>
<input
bind:this={ref}
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:bx--text-input={true}
class:bx--text-input--empty={inputValue === ''}
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') {
ref.focus();
}
}}
{disabled}
{placeholder}
{id}
value={inputValue} />
{#if invalid}
<WarningFilled16 class="bx--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>