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

Added slots for Standardize props and events #1621

Browse source
This commit is contained in:
Samuel Janda 2024-01-14 18:02:51 +11:00
commit 84ea2351fb
4 changed files with 60 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

38
COMPONENT_INDEX.md
View file

@ -4219,7 +4219,7 @@ None.
| :-------------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :-------------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| value | No | <code>let</code> | Yes | <code>null &#124; number &#124; string</code> | <code>""</code> | Specify the input value<br />`value` will be set to `null` if `type = "number"` and the value is empty | | value | No | <code>let</code> | Yes | <code>null &#124; number &#124; string</code> | <code>""</code> | Specify the input value<br />`value` will be set to `null` if `type = "number"` and the value is empty |
| 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 |
| counter | No | <code>let</code> | No | -- | <code>undefined</code> | Set to "char" to enable display the character counter or "word" to display the word count. | | counter | No | <code>let</code> | No | <code>"char" &#124; "word"</code> | <code>undefined</code> | Set to "char" to enable display the character counter or "word" to display the word count. |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| 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 |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text | | hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
@ -4242,26 +4242,28 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :--------- | :------ | :---- | :------------------------ | | :---------- | :------ | :---- | :------------------------- |
| helperText | No | -- | <code>{helperText}</code> | | helperText | No | -- | <code>{helperText}</code> |
| labelText | No | -- | <code>{labelText}</code> | | invalidText | No | -- | <code>{invalidText}</code> |
| labelText | No | -- | <code>{labelText}</code> |
| warnText | No | -- | <code>{warnText}</code> |
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :----- | | :--------- | :--------- | :-------------------------------------------- |
| click | forwarded | -- | | change | dispatched | <code>null &#124; number &#124; string</code> |
| mouseover | forwarded | -- | | input | dispatched | <code>null &#124; number &#124; string</code> |
| mouseenter | forwarded | -- | | click | forwarded | -- |
| mouseleave | forwarded | -- | | mouseover | forwarded | -- |
| keydown | forwarded | -- | | mouseenter | forwarded | -- |
| keyup | forwarded | -- | | mouseleave | forwarded | -- |
| focus | forwarded | -- | | keydown | forwarded | -- |
| blur | forwarded | -- | | keyup | forwarded | -- |
| paste | forwarded | -- | | focus | forwarded | -- |
| input | dispatched | -- | | blur | forwarded | -- |
| change | dispatched | -- | | paste | forwarded | -- |
## `TextInputSkeleton` ## `TextInputSkeleton`

27
docs/src/COMPONENT_API.json
View file

@ -12701,6 +12701,7 @@
"name": "counter", "name": "counter",
"kind": "let", "kind": "let",
"description": "Set to \"char\" to enable display the character counter or \"word\" to display the word count.", "description": "Set to \"char\" to enable display the character counter or \"word\" to display the word count.",
"type": "\"char\" | \"word\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -12965,14 +12966,36 @@
"fallback": "{helperText}", "fallback": "{helperText}",
"slot_props": "{}" "slot_props": "{}"
}, },
{
"name": "invalidText",
"default": false,
"fallback": "{invalidText}",
"slot_props": "{}"
},
{ {
"name": "labelText", "name": "labelText",
"default": false, "default": false,
"fallback": "{labelText}", "fallback": "{labelText}",
"slot_props": "{}" "slot_props": "{}"
},
{
"name": "warnText",
"default": false,
"fallback": "{warnText}",
"slot_props": "{}"
} }
], ],
"events": [ "events": [
{
"type": "dispatched",
"name": "change",
"detail": "null | number | string"
},
{
"type": "dispatched",
"name": "input",
"detail": "null | number | string"
},
{ "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" },
@ -12981,9 +13004,7 @@
{ "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" }, { "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "paste", "element": "input" }, { "type": "forwarded", "name": "paste", "element": "input" }
{ "type": "dispatched", "name": "input" },
{ "type": "dispatched", "name": "change" }
], ],
"typedefs": [] "typedefs": []
}, },

16
src/TextInput/TextInput.svelte
View file

@ -293,11 +293,15 @@
{/if} {/if}
{#if isFluid && !inline && invalid} {#if isFluid && !inline && invalid}
<div class:bx--form-requirement="{true}" id="{errorId}"> <div class:bx--form-requirement="{true}" id="{errorId}">
{invalidText} <slot name="invalidText">
{invalidText}
</slot>
</div> </div>
{/if} {/if}
{#if isFluid && !inline && warn} {#if isFluid && !inline && warn}
<div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div> <div class:bx--form-requirement="{true}" id="{warnId}">
<slot name="warnText">{warnText}</slot>
</div>
{/if} {/if}
</div> </div>
{#if !invalid && !warn && !isFluid && !inline && (helperText || $$slots.helperText)} {#if !invalid && !warn && !isFluid && !inline && (helperText || $$slots.helperText)}
@ -314,11 +318,15 @@
{/if} {/if}
{#if !isFluid && invalid} {#if !isFluid && invalid}
<div class:bx--form-requirement="{true}" id="{errorId}"> <div class:bx--form-requirement="{true}" id="{errorId}">
{invalidText} <slot name="invalidText">
{invalidText}
</slot>
</div> </div>
{/if} {/if}
{#if !isFluid && !invalid && warn} {#if !isFluid && !invalid && warn}
<div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div> <div class:bx--form-requirement="{true}" id="{warnId}">
<slot name="warnText">{warnText}</slot>
</div>
{/if} {/if}
</div> </div>
</div> </div>

8
types/TextInput/TextInput.svelte.d.ts vendored
View file

@ -5,7 +5,7 @@ export interface TextInputProps {
* Set to "char" to enable display the character counter or "word" to display the word count. * Set to "char" to enable display the character counter or "word" to display the word count.
* @default undefined * @default undefined
*/ */
counter?: undefined; counter?: "char" | "word";
/** /**
* Set to `true` to disable the input * Set to `true` to disable the input
@ -142,6 +142,8 @@ export interface TextInputProps {
export default class TextInput extends SvelteComponentTyped< export default class TextInput extends SvelteComponentTyped<
TextInputProps, TextInputProps,
{ {
change: CustomEvent<null | number | string>;
input: CustomEvent<null | number | string>;
click: WindowEventMap["click"]; click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"]; mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"]; mouseenter: WindowEventMap["mouseenter"];
@ -151,8 +153,6 @@ export default class TextInput extends SvelteComponentTyped<
focus: WindowEventMap["focus"]; focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"]; blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"]; paste: DocumentAndElementEventHandlersEventMap["paste"];
input: CustomEvent<any>;
change: CustomEvent<any>;
}, },
{ helperText: {}; labelText: {} } { helperText: {}; invalidText: {}; labelText: {}; warnText: {} }
> {} > {}