mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-20 20:33:02 +00:00
Initial commit
This commit is contained in:
davideraccagni
parent
4c0d6ea5a2
commit
db2d2ad69b
23 changed files with 6936 additions and 1158 deletions
335
src/AutoComplete/AutoComplete.svelte
Normal file
335
src/AutoComplete/AutoComplete.svelte
Normal file
|
|
@ -0,0 +1,335 @@
|
|||
<script>
|
||||
/**
|
||||
* @typedef {any} AutoCompleteItemId
|
||||
* @typedef {string} AutoCompleteItemText
|
||||
* @typedef {{ id: AutoCompleteItemId; text: AutoCompleteItemText; }} AutoCompleteItem
|
||||
* @event {{ selectedId: AutoCompleteItemId, selectedItem: AutoCompleteItem }} select
|
||||
* @slot {{ item: AutoCompleteItem; index: number; }}
|
||||
*/
|
||||
|
||||
/**
|
||||
* Set the dropdown items
|
||||
* @type {AutoCompleteItem[]}
|
||||
*/
|
||||
export let items = [];
|
||||
|
||||
export let filteredItems = [];
|
||||
|
||||
/**
|
||||
* Override the display of a dropdown item
|
||||
* @type {(item: AutoCompleteItem) => string}
|
||||
*/
|
||||
export let itemToString = (item) => item.text || item.id;
|
||||
|
||||
/**
|
||||
* Specify the selected item id
|
||||
* @type {AutoCompleteItemId}
|
||||
*/
|
||||
export let selectedId = undefined;
|
||||
|
||||
/**
|
||||
* Specify the type of dropdown
|
||||
* @type {"default" | "inline"}
|
||||
*/
|
||||
export let type = "default";
|
||||
|
||||
/**
|
||||
* Specify the direction of the dropdown menu
|
||||
* @type {"bottom" | "top"}
|
||||
*/
|
||||
export let direction = "bottom";
|
||||
|
||||
/**
|
||||
* Specify the size of the dropdown field
|
||||
* @type {"sm" | "lg" | "xl"}
|
||||
*/
|
||||
export let size = undefined;
|
||||
|
||||
/** Set to `true` to open the dropdown */
|
||||
export let open = false;
|
||||
|
||||
/** Set to `true` to use the inline variant */
|
||||
export let inline = false;
|
||||
|
||||
/** Set to `true` to enable the light variant */
|
||||
export let light = false;
|
||||
|
||||
/** Set to `true` to disable the dropdown */
|
||||
export let disabled = false;
|
||||
|
||||
/** Specify the title text */
|
||||
export let titleText = "";
|
||||
|
||||
/** Set to `true` to indicate an invalid state */
|
||||
export let invalid = false;
|
||||
|
||||
/** Specify the invalid state text */
|
||||
export let invalidText = "";
|
||||
|
||||
/** Set to `true` to indicate an warning state */
|
||||
export let warn = false;
|
||||
|
||||
/** Specify the warning state text */
|
||||
export let warnText = "";
|
||||
|
||||
/** Specify the helper text */
|
||||
export let helperText = "";
|
||||
|
||||
/** Set to `true` to visually hide the label text */
|
||||
export let hideLabel = false;
|
||||
|
||||
/** Set an id for the list box component */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Specify a name attribute for the list box
|
||||
* @type {string}
|
||||
*/
|
||||
export let name = undefined;
|
||||
|
||||
/** Obtain a reference to the button HTML element */
|
||||
export let ref = null;
|
||||
|
||||
/** ???? */
|
||||
export let placeholder = null;
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import WarningFilled from "../icons/WarningFilled.svelte";
|
||||
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
|
||||
import { ListBox, ListBoxMenu, ListBoxMenuItem } from "../ListBox";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let highlightedIndex = -1;
|
||||
|
||||
let innerValue = undefined;
|
||||
|
||||
function change(dir) {
|
||||
let index = highlightedIndex + dir;
|
||||
|
||||
if (index < 0) {
|
||||
index = filteredItems.length - 1;
|
||||
} else if (index >= filteredItems.length) {
|
||||
index = 0;
|
||||
}
|
||||
|
||||
highlightedIndex = index;
|
||||
}
|
||||
|
||||
function onKeydown(event) {
|
||||
let key = event.key;
|
||||
console.log(key);
|
||||
if (["Enter", "ArrowDown", "ArrowUp"].includes(key)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
if (key === "Enter") {
|
||||
open = !open;
|
||||
if (
|
||||
highlightedIndex > -1 &&
|
||||
filteredItems[highlightedIndex].id !== selectedId
|
||||
) {
|
||||
selectedId = filteredItems[highlightedIndex].id;
|
||||
innerValue = filteredItems[highlightedIndex].text;
|
||||
open = false;
|
||||
}
|
||||
} else if (key === "Backspace") {
|
||||
selectedId = undefined;
|
||||
open = innerValue.length > 0 && filteredItems.length > 0;
|
||||
} else if (key === "Tab") {
|
||||
open = false;
|
||||
ref.blur();
|
||||
} else if (key === "ArrowDown") {
|
||||
change(1);
|
||||
} else if (key === "ArrowUp") {
|
||||
change(-1);
|
||||
} else if (key === "Escape") {
|
||||
innerValue = "";
|
||||
dispatch("clear");
|
||||
open = false;
|
||||
} else {
|
||||
if (!open) open = filteredItems.length > 0;
|
||||
}
|
||||
}
|
||||
|
||||
$: if (selectedId !== undefined) {
|
||||
dispatch("select", { selectedId, selectedItem });
|
||||
}
|
||||
|
||||
$: filteredItems = items.filter(
|
||||
(item) => innerValue?.length > 0 && item.text.startsWith(innerValue)
|
||||
);
|
||||
$: inline = type === "inline";
|
||||
$: selectedItem = filteredItems.find((item) => item.id === selectedId);
|
||||
$: if (!open) {
|
||||
highlightedIndex = -1;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
on:click="{({ target }) => {
|
||||
if (open && ref && !ref.contains(target)) {
|
||||
open = false;
|
||||
}
|
||||
}}"
|
||||
/>
|
||||
|
||||
<div
|
||||
class:bx--auto-complete__wrapper="{true}"
|
||||
class:bx--list-box__wrapper="{true}"
|
||||
class:bx--auto-complete__wrapper--inline="{inline}"
|
||||
class:bx--list-box__wrapper--inline="{inline}"
|
||||
class:bx--auto-complete__wrapper--inline--invalid="{inline && invalid}"
|
||||
{...$$restProps}
|
||||
>
|
||||
{#if titleText}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
>
|
||||
{titleText}
|
||||
</label>
|
||||
{/if}
|
||||
<ListBox
|
||||
type="{type}"
|
||||
size="{size}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
aria-label="{$$props['aria-label']}"
|
||||
class="bx--dropdown {direction === 'top' && 'bx--list-box--up'} {invalid &&
|
||||
'bx--dropdown--invalid'} {!invalid &&
|
||||
warn &&
|
||||
'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
|
||||
{size === 'sm' && 'bx--dropdown--sm'}
|
||||
{size === 'xl' && 'bx--dropdown--xl'}
|
||||
{inline && 'bx--dropdown--inline'}
|
||||
{disabled && 'bx--dropdown--disabled'}
|
||||
{light && 'bx--dropdown--light'}"
|
||||
on:click="{({ target }) => {
|
||||
if (disabled) return;
|
||||
open = ref.contains(target) ? !open : false;
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
open="{open}"
|
||||
invalid="{invalid}"
|
||||
invalidText="{invalidText}"
|
||||
light="{light}"
|
||||
warn="{warn}"
|
||||
warnText="{warnText}"
|
||||
>
|
||||
{#if invalid}
|
||||
<WarningFilled class="bx--text-input__invalid-icon" />
|
||||
{/if}
|
||||
{#if !invalid && warn}
|
||||
<WarningAltFilled
|
||||
class="bx--text-input__invalid-icon
|
||||
bx--text-input__invalid-icon--warning"
|
||||
/>
|
||||
{/if}
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
bind:value="{innerValue}"
|
||||
type="text"
|
||||
role="searchbox"
|
||||
class="
|
||||
bx--auto-complete__input
|
||||
{light && 'bx--auto-complete__input--light'}
|
||||
{invalid && 'bx--auto-complete__input--invalid'}
|
||||
{warn && 'bx--auto-complete__input--warn'}
|
||||
{size === 'sm' && 'bx--auto-complete__input--sm'}
|
||||
{size === 'xl' && 'bx--auto-complete__input--xl'}
|
||||
"
|
||||
autocomplete="false"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
placeholder="{placeholder}"
|
||||
{...$$restProps}
|
||||
on:change
|
||||
on:focus
|
||||
on:blur
|
||||
on:input
|
||||
on:keydown="{onKeydown}"
|
||||
/>
|
||||
{#if open}
|
||||
<ListBoxMenu aria-labelledby="{id}" id="{id}">
|
||||
{#each filteredItems as item, i (item.id)}
|
||||
<ListBoxMenuItem
|
||||
id="{item.id}"
|
||||
active="{selectedId === item.id}"
|
||||
highlighted="{highlightedIndex === i || selectedId === item.id}"
|
||||
on:click="{() => {
|
||||
selectedId = item.id;
|
||||
innerValue = item.text;
|
||||
ref.focus();
|
||||
}}"
|
||||
on:mouseenter="{() => {
|
||||
highlightedIndex = i;
|
||||
}}"
|
||||
>
|
||||
<slot item="{item}" index="{i}">
|
||||
{itemToString(item)}
|
||||
</slot>
|
||||
</ListBoxMenuItem>
|
||||
{/each}
|
||||
</ListBoxMenu>
|
||||
{/if}
|
||||
</ListBox>
|
||||
{#if !inline && !invalid && !warn && helperText}
|
||||
<div
|
||||
class:bx--form__helper-text="{true}"
|
||||
class:bx--form__helper-text--disabled="{disabled}"
|
||||
>
|
||||
{helperText}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bx--auto-complete__input {
|
||||
font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
||||
font-weight: var(--cds-body-short-01-font-weight, 400);
|
||||
line-height: var(--cds-body-short-01-line-height, 1.28572);
|
||||
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: -2px;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
padding: 0 1rem;
|
||||
border: none;
|
||||
border-bottom-color: currentcolor;
|
||||
border-bottom-style: none;
|
||||
border-bottom-width: medium;
|
||||
border-bottom: 1px solid var(--cds-ui-04, #8d8d8d);
|
||||
background-color: var(--cds-field-01, #f4f4f4);
|
||||
color: var(--cds-text-01, #161616);
|
||||
transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9),
|
||||
outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
|
||||
.bx--auto-complete__input:focus {
|
||||
outline: 2px solid var(--cds-focus, #0f62fe);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.bx--auto-complete__input--sm {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.bx--auto-complete__input--xl,
|
||||
.bx--auto-complete__input--lg {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.bx--auto-complete__input:disabled {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: -2px;
|
||||
border-bottom: 1px solid transparent;
|
||||
background-color: var(--cds-field, #f4f4f4);
|
||||
color: var(--cds-text-disabled, #c6c6c6);
|
||||
cursor: not-allowed;
|
||||
-webkit-text-fill-color: var(--cds-disabled-02, #c6c6c6);
|
||||
}
|
||||
</style>
|
||||
19
src/AutoComplete/AutoCompleteSkeleton.svelte
Normal file
19
src/AutoComplete/AutoCompleteSkeleton.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script>
|
||||
/** Set to `true` to hide the label text */
|
||||
export let hideLabel = false;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class:bx--form-item="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
{#if !hideLabel}
|
||||
<span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
|
||||
{/if}
|
||||
<div class:bx--skeleton="{true}" class:bx--text-input="{true}"></div>
|
||||
</div>
|
||||
2
src/AutoComplete/index.js
Normal file
2
src/AutoComplete/index.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export { default as AutoComplete } from "./AutoComplete.svelte";
|
||||
export { default as AutoCompleteSkeleton } from "./AutoCompleteSkeleton.svelte";
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
export { Accordion, AccordionItem, AccordionSkeleton } from "./Accordion";
|
||||
export { AspectRatio } from "./AspectRatio";
|
||||
export { AutoComplete, AutoCompleteSkeleton } from "./AutoComplete";
|
||||
export { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from "./Breadcrumb";
|
||||
export { Breakpoint } from "./Breakpoint";
|
||||
export { default as breakpointObserver } from "./Breakpoint/breakpointObserver";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue