mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 02:41:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(search): export skeleton prop

Browse source
This commit is contained in:
Eric Liu 2020-01-04 09:10:40 -08:00
commit 37e2855c83
1 changed files with 48 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

81
src/components/Search/Search.svelte
View file

@ -6,9 +6,10 @@
export let id = Math.random(); export let id = Math.random();
export let labelText = ''; export let labelText = '';
export let light = false; export let light = false;
export let placeholder = ''; export let placeholder = 'Search...';
export let size = small ? 'sm' : 'xl';
export let small = false; export let small = false;
export let size = small ? 'sm' : 'xl';
export let skeleton = false;
export let style = undefined; export let style = undefined;
export let type = 'text'; export let type = 'text';
export let value = ''; export let value = '';
@ -17,39 +18,53 @@
import Close20 from 'carbon-icons-svelte/lib/Close20'; import Close20 from 'carbon-icons-svelte/lib/Close20';
import Search16 from 'carbon-icons-svelte/lib/Search16'; import Search16 from 'carbon-icons-svelte/lib/Search16';
import { cx } from '../../lib'; import { cx } from '../../lib';
import SearchSkeleton from './Search.Skeleton.svelte';
let inputRef = undefined; let inputRef = undefined;
</script> </script>
<div {#if skeleton}
class={cx('--search', size && `--search--${size}`, light && '--search--light', className)} <SearchSkeleton
{style}>
<Search16 class={cx('--search-magnifier')} />
<label class={cx('--label')} for={id}>{labelText}</label>
<!-- svelte-ignore a11y-autofocus -->
<input
bind:this={inputRef}
role="searchbox"
class={cx('--search-input')}
on:change
on:input
on:input={({ target }) => {
value = target.value;
}}
{autofocus}
{type}
{id}
{value}
{placeholder} />
<button
type="button"
aria-label={closeButtonLabelText}
class={cx('--search-close', value === '' && '--search-close--hidden')}
on:click on:click
on:click={() => { on:mouseover
value = ''; on:mouseenter
inputRef.focus(); on:mouseleave
}}> class={className}
<svelte:component this={size === 'xl' ? Close20 : Close16} /> {style}
</button> {small} />
</div> {/if}
{#if !skeleton}
<div
class={cx('--search', size && `--search--${size}`, light && '--search--light', className)}
{style}>
<Search16 class={cx('--search-magnifier')} />
<label class={cx('--label')} for={id}>{labelText}</label>
<!-- svelte-ignore a11y-autofocus -->
<input
bind:this={inputRef}
role="searchbox"
class={cx('--search-input')}
on:change
on:input
on:input={({ target }) => {
value = target.value;
}}
{autofocus}
{type}
{id}
{value}
{placeholder} />
<button
type="button"
aria-label={closeButtonLabelText}
class={cx('--search-close', value === '' && '--search-close--hidden')}
on:click
on:click={() => {
value = '';
inputRef.focus();
}}>
<svelte:component this={size === 'xl' ? Close20 : Close16} />
</button>
</div>
{/if}