mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
Added slots for Standardize props and events #1621
This commit is contained in:
Samuel Janda
parent
d8d16a63d1
commit
84ea2351fb
4 changed files with 60 additions and 29 deletions
|
|
@ -4219,7 +4219,7 @@ None.
|
|||
| :-------------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| value | No | <code>let</code> | Yes | <code>null | number | 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 | 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" | "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 |
|
||||
| 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 |
|
||||
|
|
@ -4242,26 +4242,28 @@ None.
|
|||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :--------- | :------ | :---- | :------------------------ |
|
||||
| helperText | No | -- | <code>{helperText}</code> |
|
||||
| labelText | No | -- | <code>{labelText}</code> |
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :---------- | :------ | :---- | :------------------------- |
|
||||
| helperText | No | -- | <code>{helperText}</code> |
|
||||
| invalidText | No | -- | <code>{invalidText}</code> |
|
||||
| labelText | No | -- | <code>{labelText}</code> |
|
||||
| warnText | No | -- | <code>{warnText}</code> |
|
||||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :--------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
| keydown | forwarded | -- |
|
||||
| keyup | forwarded | -- |
|
||||
| focus | forwarded | -- |
|
||||
| blur | forwarded | -- |
|
||||
| paste | forwarded | -- |
|
||||
| input | dispatched | -- |
|
||||
| change | dispatched | -- |
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :--------- | :-------------------------------------------- |
|
||||
| change | dispatched | <code>null | number | string</code> |
|
||||
| input | dispatched | <code>null | number | string</code> |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
| keydown | forwarded | -- |
|
||||
| keyup | forwarded | -- |
|
||||
| focus | forwarded | -- |
|
||||
| blur | forwarded | -- |
|
||||
| paste | forwarded | -- |
|
||||
|
||||
## `TextInputSkeleton`
|
||||
|
||||
|
|
|
|||
|
|
@ -12701,6 +12701,7 @@
|
|||
"name": "counter",
|
||||
"kind": "let",
|
||||
"description": "Set to \"char\" to enable display the character counter or \"word\" to display the word count.",
|
||||
"type": "\"char\" | \"word\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
|
|
@ -12965,14 +12966,36 @@
|
|||
"fallback": "{helperText}",
|
||||
"slot_props": "{}"
|
||||
},
|
||||
{
|
||||
"name": "invalidText",
|
||||
"default": false,
|
||||
"fallback": "{invalidText}",
|
||||
"slot_props": "{}"
|
||||
},
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
"fallback": "{labelText}",
|
||||
"slot_props": "{}"
|
||||
},
|
||||
{
|
||||
"name": "warnText",
|
||||
"default": false,
|
||||
"fallback": "{warnText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"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": "mouseover", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
|
||||
|
|
@ -12981,9 +13004,7 @@
|
|||
{ "type": "forwarded", "name": "keyup", "element": "input" },
|
||||
{ "type": "forwarded", "name": "focus", "element": "input" },
|
||||
{ "type": "forwarded", "name": "blur", "element": "input" },
|
||||
{ "type": "forwarded", "name": "paste", "element": "input" },
|
||||
{ "type": "dispatched", "name": "input" },
|
||||
{ "type": "dispatched", "name": "change" }
|
||||
{ "type": "forwarded", "name": "paste", "element": "input" }
|
||||
],
|
||||
"typedefs": []
|
||||
},
|
||||
|
|
|
|||
|
|
@ -293,11 +293,15 @@
|
|||
{/if}
|
||||
{#if isFluid && !inline && invalid}
|
||||
<div class:bx--form-requirement="{true}" id="{errorId}">
|
||||
{invalidText}
|
||||
<slot name="invalidText">
|
||||
{invalidText}
|
||||
</slot>
|
||||
</div>
|
||||
{/if}
|
||||
{#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}
|
||||
</div>
|
||||
{#if !invalid && !warn && !isFluid && !inline && (helperText || $$slots.helperText)}
|
||||
|
|
@ -314,11 +318,15 @@
|
|||
{/if}
|
||||
{#if !isFluid && invalid}
|
||||
<div class:bx--form-requirement="{true}" id="{errorId}">
|
||||
{invalidText}
|
||||
<slot name="invalidText">
|
||||
{invalidText}
|
||||
</slot>
|
||||
</div>
|
||||
{/if}
|
||||
{#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}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
8
types/TextInput/TextInput.svelte.d.ts
vendored
8
types/TextInput/TextInput.svelte.d.ts
vendored
|
|
@ -5,7 +5,7 @@ export interface TextInputProps {
|
|||
* Set to "char" to enable display the character counter or "word" to display the word count.
|
||||
* @default undefined
|
||||
*/
|
||||
counter?: undefined;
|
||||
counter?: "char" | "word";
|
||||
|
||||
/**
|
||||
* Set to `true` to disable the input
|
||||
|
|
@ -142,6 +142,8 @@ export interface TextInputProps {
|
|||
export default class TextInput extends SvelteComponentTyped<
|
||||
TextInputProps,
|
||||
{
|
||||
change: CustomEvent<null | number | string>;
|
||||
input: CustomEvent<null | number | string>;
|
||||
click: WindowEventMap["click"];
|
||||
mouseover: WindowEventMap["mouseover"];
|
||||
mouseenter: WindowEventMap["mouseenter"];
|
||||
|
|
@ -151,8 +153,6 @@ export default class TextInput extends SvelteComponentTyped<
|
|||
focus: WindowEventMap["focus"];
|
||||
blur: WindowEventMap["blur"];
|
||||
paste: DocumentAndElementEventHandlersEventMap["paste"];
|
||||
input: CustomEvent<any>;
|
||||
change: CustomEvent<any>;
|
||||
},
|
||||
{ helperText: {}; labelText: {} }
|
||||
{ helperText: {}; invalidText: {}; labelText: {}; warnText: {} }
|
||||
> {}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue