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

refactor(search): use native binding for value prop (#1173)

Browse source 
* refactor(search): use native binding for value prop

* feat(search): type the value prop as any
This commit is contained in:
metonym 2022-03-13 19:02:46 -07:00 • committed by GitHub
commit ba0abe8e34
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

3
COMPONENT_INDEX.md
View file

@ -3163,8 +3163,8 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | | :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | 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 | | expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
| value | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- | | 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 | | 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 | | searchClass | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
@ -3172,7 +3172,6 @@ None.
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | 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 | | 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 | | 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 | | 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 | | autocomplete | <code>let</code> | No | <code>"on" &#124; "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
| autofocus | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element | | autofocus | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |

33
docs/src/COMPONENT_API.json
View file

@ -9115,6 +9115,17 @@
"moduleName": "Search", "moduleName": "Search",
"filePath": "src/Search/Search.svelte", "filePath": "src/Search/Search.svelte",
"props": [ "props": [
{
"name": "value",
"kind": "let",
"description": "Specify the value of the search input",
"type": "any",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": true
},
{ {
"name": "small", "name": "small",
"kind": "let", "kind": "let",
@ -9202,28 +9213,6 @@
"constant": false, "constant": false,
"reactive": true "reactive": true
}, },
{
"name": "value",
"kind": "let",
"description": "Specify the value of the search input",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": true
},
{
"name": "type",
"kind": "let",
"description": "Specify the `type` attribute of the search input",
"type": "string",
"value": "\"text\"",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{ {
"name": "placeholder", "name": "placeholder",
"kind": "let", "kind": "let",

19
src/Search/Search.svelte
View file

@ -4,6 +4,12 @@
* @event {null} collapse * @event {null} collapse
*/ */
/**
* Specify the value of the search input
* @type {any}
*/
export let value = "";
/** /**
* @deprecated this prop will be removed in the next major release * @deprecated this prop will be removed in the next major release
* Use size="sm" instead * Use size="sm" instead
@ -34,12 +40,6 @@
/** Set to `true to expand the search input */ /** Set to `true to expand the search input */
export let expanded = false; export let expanded = false;
/** Specify the value of the search input */
export let value = "";
/** Specify the `type` attribute of the search input */
export let type = "text";
/** Specify the `placeholder` attribute of the search input */ /** Specify the `placeholder` attribute of the search input */
export let placeholder = "Search..."; export let placeholder = "Search...";
@ -125,6 +125,8 @@
<!-- svelte-ignore a11y-autofocus --> <!-- svelte-ignore a11y-autofocus -->
<input <input
bind:this="{ref}" bind:this="{ref}"
bind:value
type="text"
role="searchbox" role="searchbox"
class:bx--search-input="{true}" class:bx--search-input="{true}"
autofocus="{autofocus === true ? true : undefined}" autofocus="{autofocus === true ? true : undefined}"
@ -132,14 +134,9 @@
disabled="{disabled}" disabled="{disabled}"
id="{id}" id="{id}"
placeholder="{placeholder}" placeholder="{placeholder}"
type="{type}"
value="{value}"
{...$$restProps} {...$$restProps}
on:change on:change
on:input on:input
on:input="{({ target }) => {
value = target.value;
}}"
on:focus on:focus
on:focus="{() => { on:focus="{() => {
if (expandable) expanded = true; if (expandable) expanded = true;

18
types/Search/Search.svelte.d.ts vendored
View file

@ -2,6 +2,12 @@
import { SvelteComponentTyped } from "svelte"; import { SvelteComponentTyped } from "svelte";
export interface SearchProps { export interface SearchProps {
/**
* Specify the value of the search input
* @default ""
*/
value?: any;
/** /**
* @default false * @default false
*/ */
@ -49,18 +55,6 @@ export interface SearchProps {
*/ */
expanded?: boolean; expanded?: boolean;
/**
* Specify the value of the search input
* @default ""
*/
value?: string;
/**
* Specify the `type` attribute of the search input
* @default "text"
*/
type?: string;
/** /**
* Specify the `placeholder` attribute of the search input * Specify the `placeholder` attribute of the search input
* @default "Search..." * @default "Search..."