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

feat(search): support expandable variant

Browse source
This commit is contained in:
Eric Y Liu 2021-05-02 15:00:49 -07:00
commit 4aa11a1e98
5 changed files with 96 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

6
COMPONENT_INDEX.md
View file

@ -3011,12 +3011,14 @@ None.
| :------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the value of the search input |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
| searchClass | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
| expandable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
| type | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the `type` attribute of the search input |
| placeholder | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
| autocomplete | <code>let</code> | No | <code>"on" &#124; "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
@ -3032,7 +3034,9 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| :--------- | :--------- | :--------------- |
| expand | dispatched | <code>any</code> |
| collapse | dispatched | <code>any</code> |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |

22
docs/src/COMPONENT_API.json
View file

@ -7801,6 +7801,26 @@
"constant": false,
"reactive": false
},
{
"name": "expandable",
"kind": "let",
"description": "Set to `true` to enable the expandable variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "expanded",
"kind": "let",
"description": "Set to `true to expand the search input",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "value",
"kind": "let",
@ -7894,6 +7914,8 @@
],
"slots": [],
"events": [
{ "type": "dispatched", "name": "expand", "detail": "any" },
{ "type": "dispatched", "name": "collapse", "detail": "any" },
{ "type": "forwarded", "name": "click", "element": "SearchSkeleton" },
{
"type": "forwarded",

6
docs/src/pages/components/Search.svx
View file

@ -23,6 +23,10 @@ The "clear" event is dispatched when clicking the "X" button in the search input
<Search value="Cloud functions" on:clear={() => console.log('clear')}/>
### Expandable variant
<Search expandable on:expand on:collapse />
### Light variant
<Search light />
@ -35,7 +39,7 @@ The "clear" event is dispatched when clicking the "X" button in the search input
<Search size="sm" />
### Disabled
### Disabled state
<Search disabled />

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') {

14
types/Search/Search.d.ts vendored
View file

@ -37,6 +37,18 @@ export interface SearchProps {
*/
disabled?: boolean;
/**
* Set to `true` to enable the expandable variant
* @default false
*/
expandable?: boolean;
/**
* Set to `true to expand the search input
* @default false
*/
expanded?: boolean;
/**
* Specify the value of the search input
* @default ""
@ -95,6 +107,8 @@ export interface SearchProps {
export default class Search extends SvelteComponentTyped<
SearchProps,
{
expand: CustomEvent<any>;
collapse: CustomEvent<any>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];