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

fix(time-picker): use native binding for value prop (#1344)

Browse source
This commit is contained in:
metonym 2022-06-12 08:09:43 -07:00 • committed by GitHub
commit b21718ccfd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

53
COMPONENT_INDEX.md
View file

@ -652,32 +652,32 @@ export interface ComboBoxItem {
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :----------------------- | :------- | :-------------------- | :------- | ----------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | :----------------------- | :------- | :-------------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| listRef | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element | | listRef | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown | | open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value | | value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
| selectedId | No | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id | | selectedId | No | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id |
| items | No | <code>let</code> | No | <code>ReadonlyArray<ComboBoxItem></code> | <code>[]</code> | Set the combobox items | | items | No | <code>let</code> | No | <code>ReadonlyArray<ComboBoxItem></code> | <code>[]</code> | Set the combobox items |
| itemToString | No | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item | | itemToString | No | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item |
| direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu | | direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox | | size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
| titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox | | titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text | | placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text | | helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text | | invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state | | invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state | | warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text | | warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| shouldFilterItem | No | <code>let</code> | No | <code>(item: ComboBoxItem, value: string) => boolean</code> | <code>() => true</code> | Determine if an item should be filtered given the current combobox value | | shouldFilterItem | No | <code>let</code> | No | <code>(item: ComboBoxItem, value: string) => boolean</code> | <code>() => true</code> | Determine if an item should be filtered given the current combobox value |
| translateWithId | No | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string</code> | <code>undefined</code> | Override the chevron icon label based on the open state.<br />Defaults to "Open menu" when closed and "Close menu" when open | | translateWithId | No | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string</code> | <code>undefined</code> | Override the chevron icon label based on the open state.<br />Defaults to "Open menu" when closed and "Close menu" when open |
| translateWithIdSelection | No | <code>let</code> | No | <code>(id: "clearSelection") => string</code> | <code>undefined</code> | Override the label of the clear button when the input has a selection.<br />Defaults to "Clear selected item" since a combo box can only have on selection. | | translateWithIdSelection | No | <code>let</code> | No | <code>(id: "clearSelection") => string</code> | <code>undefined</code> | Override the label of the clear button when the input has a selection.<br />Defaults to "Clear selected item" since a combo box can only have on selection. |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component | | id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input | | name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
| clear | No | <code>function</code> | No | <code>(options?: { focus?: boolean; }) => void</code> | <code>() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); }</code> | Clear the combo box programmatically | | clear | No | <code>function</code> | No | <code>(options?: { focus?: boolean; }) => void</code> | <code>() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; value = ""; if (options?.focus !== false) ref?.focus(); }</code> | Clear the combo box programmatically |
### Slots ### Slots
@ -4234,7 +4234,6 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the input value | | value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the input value |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the input | | size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the input |
| type | No | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the input type |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>"hh:mm"</code> | Specify the input placeholder text | | placeholder | No | <code>let</code> | No | <code>string</code> | <code>"hh:mm"</code> | Specify the input placeholder text |
| pattern | No | <code>let</code> | No | <code>string</code> | <code>"(1[012]&#124;[1-9]):[0-5][0-9](\\s)?"</code> | Specify the `pattern` attribute for the input element | | pattern | No | <code>let</code> | No | <code>string</code> | <code>"(1[012]&#124;[1-9]):[0-5][0-9](\\s)?"</code> | Specify the `pattern` attribute for the input element |
| maxlength | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the `maxlength` input attribute | | maxlength | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the `maxlength` input attribute |

14
docs/src/COMPONENT_API.json
View file

@ -1732,7 +1732,7 @@
"kind": "function", "kind": "function",
"description": "Clear the combo box programmatically", "description": "Clear the combo box programmatically",
"type": "(options?: { focus?: boolean; }) => void", "type": "(options?: { focus?: boolean; }) => void",
"value": "() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = \"\"; if (options?.focus !== false) ref?.focus(); }", "value": "() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; value = \"\"; if (options?.focus !== false) ref?.focus(); }",
"isFunction": true, "isFunction": true,
"isFunctionDeclaration": true, "isFunctionDeclaration": true,
"isRequired": false, "isRequired": false,
@ -12984,18 +12984,6 @@
"constant": false, "constant": false,
"reactive": true "reactive": true
}, },
{
"name": "type",
"kind": "let",
"description": "Specify the input type",
"type": "string",
"value": "\"text\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{ {
"name": "placeholder", "name": "placeholder",
"kind": "let", "kind": "let",

13
src/TimePicker/TimePicker.svelte
View file

@ -11,12 +11,6 @@
*/ */
export let value = ""; export let value = "";
/**
* Specify the input type
* @type {string}
*/
export let type = "text";
/** Specify the input placeholder text */ /** Specify the input placeholder text */
export let placeholder = "hh:mm"; export let placeholder = "hh:mm";
@ -88,14 +82,14 @@
{/if} {/if}
<input <input
bind:this="{ref}" bind:this="{ref}"
bind:value
type="text"
data-invalid="{invalid || undefined}" data-invalid="{invalid || undefined}"
pattern="{pattern}" pattern="{pattern}"
placeholder="{placeholder}" placeholder="{placeholder}"
maxlength="{maxlength}" maxlength="{maxlength}"
id="{id}" id="{id}"
name="{name}" name="{name}"
type="{type}"
value="{value}"
disabled="{disabled}" disabled="{disabled}"
{...$$restProps} {...$$restProps}
class:bx--time-picker__input-field="{true}" class:bx--time-picker__input-field="{true}"
@ -104,9 +98,6 @@
class:bx--text-input--invalid="{invalid}" class:bx--text-input--invalid="{invalid}"
on:change on:change
on:input on:input
on:input="{({ target }) => {
value = target.value;
}}"
on:keydown on:keydown
on:keyup on:keyup
on:focus on:focus

6
types/TimePicker/TimePicker.svelte.d.ts vendored
View file

@ -15,12 +15,6 @@ export interface TimePickerProps
*/ */
value?: string; value?: string;
/**
* Specify the input type
* @default "text"
*/
type?: string;
/** /**
* Specify the input placeholder text * Specify the input placeholder text
* @default "hh:mm" * @default "hh:mm"