mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 10:51:06 +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

19
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,10 +18,23 @@
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>
{#if skeleton}
<SearchSkeleton
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={className}
{style}
{small} />
{/if}
{#if !skeleton}
<div <div
class={cx('--search', size && `--search--${size}`, light && '--search--light', className)} class={cx('--search', size && `--search--${size}`, light && '--search--light', className)}
{style}> {style}>
@ -53,3 +67,4 @@
<svelte:component this={size === 'xl' ? Close20 : Close16} /> <svelte:component this={size === 'xl' ? Close20 : Close16} />
</button> </button>
</div> </div>
{/if}