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

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

@ -6,9 +6,10 @@
export let id = Math.random();
export let labelText = '';
export let light = false;
export let placeholder = '';
export let size = small ? 'sm' : 'xl';
export let placeholder = 'Search...';
export let small = false;
export let size = small ? 'sm' : 'xl';
export let skeleton = false;
export let style = undefined;
export let type = 'text';
export let value = '';
@ -17,11 +18,24 @@
import Close20 from 'carbon-icons-svelte/lib/Close20';
import Search16 from 'carbon-icons-svelte/lib/Search16';
import { cx } from '../../lib';
import SearchSkeleton from './Search.Skeleton.svelte';
let inputRef = undefined;
</script>
<div
{#if skeleton}
<SearchSkeleton
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={className}
{style}
{small} />
{/if}
{#if !skeleton}
<div
class={cx('--search', size && `--search--${size}`, light && '--search--light', className)}
{style}>
<Search16 class={cx('--search-magnifier')} />
@ -52,4 +66,5 @@
}}>
<svelte:component this={size === 'xl' ? Close20 : Close16} />
</button>
</div>
</div>
{/if}