mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
Adopts Standardize props and events #1621
This commit is contained in:
Samuel Janda
parent
00338eb6df
commit
d8d16a63d1
5 changed files with 130 additions and 87 deletions
|
|
@ -4216,11 +4216,11 @@ None.
|
|||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| :-------------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| 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. |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
|
||||
| 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. |
|
||||
| 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 |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
|
|
@ -4237,19 +4237,20 @@ None.
|
|||
| size | No | <code>let</code> | No | <code>"sm" | "md" | "lg"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| 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 |
|
||||
| labelAttributes | No | <code>let</code> | No | <code>Record<string, string></code> | <code>{}</code> | Set HTML attributes on the `label` element |
|
||||
| inputAttributes | No | <code>let</code> | No | <code>Record<string, string></code> | <code>{}</code> | Set HTML attributes on the `input` element |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :----------------------- |
|
||||
| :--------- | :------ | :---- | :------------------------ |
|
||||
| helperText | No | -- | <code>{helperText}</code> |
|
||||
| labelText | No | -- | <code>{labelText}</code> |
|
||||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :--------- | :-------------------------------------------- |
|
||||
| change | dispatched | <code>null | number | string</code> |
|
||||
| input | dispatched | <code>null | number | string</code> |
|
||||
| :--------- | :--------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
|
|
@ -4259,6 +4260,8 @@ None.
|
|||
| focus | forwarded | -- |
|
||||
| blur | forwarded | -- |
|
||||
| paste | forwarded | -- |
|
||||
| input | dispatched | -- |
|
||||
| change | dispatched | -- |
|
||||
|
||||
## `TextInputSkeleton`
|
||||
|
||||
|
|
|
|||
|
|
@ -12698,11 +12698,9 @@
|
|||
"filePath": "src/TextInput/TextInput.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "disabled",
|
||||
"name": "counter",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to disable the input",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"description": "Set to \"char\" to enable display the character counter or \"word\" to display the word count.",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
|
|
@ -12710,10 +12708,11 @@
|
|||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "counter",
|
||||
"name": "disabled",
|
||||
"kind": "let",
|
||||
"description": "Set to \"char\" to enable display the character counter or \"word\" to display the word count.",
|
||||
"type": "\"char\" | \"word\"",
|
||||
"description": "Set to `true` to disable the input",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
|
|
@ -12932,10 +12931,40 @@
|
|||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "labelAttributes",
|
||||
"kind": "let",
|
||||
"description": "Set HTML attributes on the `label` element",
|
||||
"type": "Record<string, string>",
|
||||
"value": "{}",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "inputAttributes",
|
||||
"kind": "let",
|
||||
"description": "Set HTML attributes on the `input` element",
|
||||
"type": "Record<string, string>",
|
||||
"value": "{}",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "helperText",
|
||||
"default": false,
|
||||
"fallback": "{helperText}",
|
||||
"slot_props": "{}"
|
||||
},
|
||||
{
|
||||
"name": "labelText",
|
||||
"default": false,
|
||||
|
|
@ -12944,16 +12973,6 @@
|
|||
}
|
||||
],
|
||||
"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" },
|
||||
|
|
@ -12962,10 +12981,11 @@
|
|||
{ "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": "forwarded", "name": "paste", "element": "input" },
|
||||
{ "type": "dispatched", "name": "input" },
|
||||
{ "type": "dispatched", "name": "change" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "input" }
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "TextInputSkeleton",
|
||||
|
|
|
|||
|
|
@ -4,15 +4,15 @@
|
|||
* @event {null | number | string} input
|
||||
*/
|
||||
|
||||
/** Set to `true` to disable the input */
|
||||
export let disabled = false;
|
||||
|
||||
/**
|
||||
* Set to "char" to enable display the character counter or "word" to display the word count.
|
||||
* @type {"char" | "word"}
|
||||
*/
|
||||
export let counter = undefined;
|
||||
|
||||
/** Set to `true` to disable the input */
|
||||
export let disabled = false;
|
||||
|
||||
/** Specify the helper text */
|
||||
export let helperText = "";
|
||||
|
||||
|
|
@ -86,10 +86,21 @@
|
|||
/** Specify the warning state text */
|
||||
export let warnText = "";
|
||||
|
||||
/**
|
||||
* Set HTML attributes on the `label` element
|
||||
* @type {Record<string, string>}
|
||||
*/
|
||||
export let labelAttributes = {};
|
||||
|
||||
/**
|
||||
* Set HTML attributes on the `input` element
|
||||
* @type {Record<string, string>}
|
||||
*/
|
||||
export let inputAttributes = {};
|
||||
|
||||
import { createEventDispatcher, getContext } from "svelte";
|
||||
import WarningFilled from "../icons/WarningFilled.svelte";
|
||||
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
|
||||
import EditOff from "../icons/EditOff.svelte";
|
||||
|
||||
const ctx = getContext("Form");
|
||||
const dispatch = createEventDispatcher();
|
||||
|
|
@ -154,6 +165,7 @@
|
|||
class:bx--label--inline--sm="{size === 'sm'}"
|
||||
class:bx--label--inline--md="{size === 'md'}"
|
||||
class:bx--label--inline--lg="{size === 'lg' || size === 'xl'}"
|
||||
{...labelAttributes}
|
||||
>
|
||||
<slot name="labelText">
|
||||
{labelText}
|
||||
|
|
@ -193,6 +205,7 @@
|
|||
class:bx--label--inline-md="{inline && size === 'md'}"
|
||||
class:bx--label--inline-lg="{inline &&
|
||||
(size === 'lg' || size === 'xl')}"
|
||||
{...labelAttributes}
|
||||
>
|
||||
<slot name="labelText">
|
||||
{labelText}
|
||||
|
|
@ -266,7 +279,7 @@
|
|||
class:bx--layout--size-sm="{size === 'sm'}"
|
||||
class:bx--layout--size-md="{size === 'md'}"
|
||||
class:bx--layout--size-lg="{size === 'lg' || size === 'xl'}"
|
||||
{...$$restProps}
|
||||
{...inputAttributes}
|
||||
on:change="{onChange}"
|
||||
on:input="{onInput}"
|
||||
on:keydown
|
||||
|
|
|
|||
33
types/TextInput/TextInput.svelte.d.ts
vendored
33
types/TextInput/TextInput.svelte.d.ts
vendored
|
|
@ -1,21 +1,18 @@
|
|||
import type { SvelteComponentTyped } from "svelte";
|
||||
import type { SvelteHTMLElements } from "svelte/elements";
|
||||
|
||||
type RestProps = SvelteHTMLElements["input"];
|
||||
export interface TextInputProps {
|
||||
/**
|
||||
* Set to "char" to enable display the character counter or "word" to display the word count.
|
||||
* @default undefined
|
||||
*/
|
||||
counter?: undefined;
|
||||
|
||||
export interface TextInputProps extends RestProps {
|
||||
/**
|
||||
* Set to `true` to disable the input
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Set to "char" to enable display the character counter or "word" to display the word count.
|
||||
* @default undefined
|
||||
*/
|
||||
counter?: "char" | "word";
|
||||
|
||||
/**
|
||||
* Specify the helper text
|
||||
* @default ""
|
||||
|
|
@ -129,14 +126,22 @@ export interface TextInputProps extends RestProps {
|
|||
*/
|
||||
warnText?: string;
|
||||
|
||||
[key: `data-${string}`]: any;
|
||||
/**
|
||||
* Set HTML attributes on the `label` element
|
||||
* @default {}
|
||||
*/
|
||||
labelAttributes?: Record<string, string>;
|
||||
|
||||
/**
|
||||
* Set HTML attributes on the `input` element
|
||||
* @default {}
|
||||
*/
|
||||
inputAttributes?: Record<string, string>;
|
||||
}
|
||||
|
||||
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"];
|
||||
|
|
@ -146,6 +151,8 @@ export default class TextInput extends SvelteComponentTyped<
|
|||
focus: WindowEventMap["focus"];
|
||||
blur: WindowEventMap["blur"];
|
||||
paste: DocumentAndElementEventHandlersEventMap["paste"];
|
||||
input: CustomEvent<any>;
|
||||
change: CustomEvent<any>;
|
||||
},
|
||||
{ labelText: {} }
|
||||
{ helperText: {}; labelText: {} }
|
||||
> {}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue