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

Align v10.34 (#621)

Browse source 
* feat(theme): add g80 theme

* docs(data-table): use link with icon variant

* feat(search): support expandable variant

* fix(file-uploaded): use semantic p element instead of strong

* feat(side-nav): dispatch open, close, click:overlay events

* refactor(ui-shell): remove usage of deprecated Icon component

* feat(ui-shell): allow custom hamburger menu icons

* feat(button): support xl size

* fix(code-snippet): wrap code element with pre

* refactor(button): use button specific tooltip class for icon-only variant

* feat(password-input): support warning, inline props

* feat(data-table): support medium size
This commit is contained in:
Eric Liu 2021-06-25 03:45:30 -07:00 • committed by GitHub
commit f9909827d0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 572 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/Search/Search.svelte
View file

@ -1,8 +1,12 @@
<script>
/**
* @event {any} expand
* @event {any} collapse
*/
/**
* @deprecated this prop will be removed in the next major release
* Use size="sm" instead
* @type {boolean} [small=false]
*/
export let small = false;
@ -15,40 +19,28 @@
/** Specify the class name passed to the outer div element */
export let searchClass = "";
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
*/
/** Set to `true` to display the skeleton state */
export let skeleton = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
/** Set to `true` to enable the light variant */
export let light = false;
/**
* Set to `true` to disable the search input
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the search input */
export let disabled = false;
/**
* Specify the value of the search input
* @type {string} [value=""]
*/
/** Set to `true` to enable the expandable variant */
export let expandable = false;
/** Set to `true to expand the search input */
export let expanded = false;
/** Specify the value of the search input */
export let value = "";
/**
* Specify the `type` attribute of the search input
* @type {string} [type="text"]
*/
/** Specify the `type` attribute of the search input */
export let type = "text";
/**
* Specify the `placeholder` attribute of the search input
* @type {string} [placeholder="Search..."]
*/
/** Specify the `placeholder` attribute of the search input */
export let placeholder = "Search...";
/**
@ -79,6 +71,11 @@
import SearchSkeleton from "./SearchSkeleton.svelte";
const dispatch = createEventDispatcher();
let searchRef = null;
$: if (expanded && ref) ref.focus();
$: dispatch(expanded ? "expand" : "collapse");
</script>
{#if skeleton}
@ -101,9 +98,17 @@
class:bx--search--sm="{size === 'sm' || small}"
class:bx--search--lg="{size === 'lg'}"
class:bx--search--xl="{size === 'xl'}"
class:bx--search--expandable="{expandable}"
class:bx--search--expanded="{expanded}"
class="{searchClass}"
>
<div class:bx--search-magnifier="{true}">
<div
bind:this="{searchRef}"
class:bx--search-magnifier="{true}"
on:click="{() => {
if (expandable) expanded = true;
}}"
>
<Search16 class="bx--search-magnifier-icon" />
</div>
<label id="{id}-search" for="{id}" class:bx--label="{true}"
@ -128,7 +133,15 @@
value = target.value;
}}"
on:focus
on:focus="{() => {
if (expandable) expanded = true;
}}"
on:blur
on:blur="{() => {
if (expanded && value.trim().length === 0) {
expanded = false;
}
}}"
on:keydown
on:keydown="{({ key }) => {
if (key === 'Escape') {