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

Adopts Standardize props and events #1621

Browse source
This commit is contained in:
Samuel Janda 2024-01-14 17:58:26 +11:00
commit d8d16a63d1
5 changed files with 130 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

79
COMPONENT_INDEX.md
View file

@ -4215,50 +4215,53 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :-------------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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 |
| 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>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 |
| 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 |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element | | id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant | | inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| 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 |
| 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 |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant<br />For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color<br />The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release<br />@deprecated | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant<br />For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color<br />The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release<br />@deprecated |
| maxCount | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum number of characters/words allowed<br />This is needed in order for `counter` to display | | maxCount | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum number of characters/words allowed<br />This is needed in order for `counter` to display |
| 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 |
| 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 |
| readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the read-only variant | | readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the read-only variant |
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required | | required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required |
| size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg"</code> | <code>undefined</code> | Set the size of the input | | size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "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 | | 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 |
| 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 ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- | | :--------- | :------ | :---- | :------------------------ |
| labelText | No | -- | <code>{labelText}</code> | | helperText | No | -- | <code>{helperText}</code> |
| labelText | No | -- | <code>{labelText}</code> |
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :-------------------------------------------- | | :--------- | :--------- | :----- |
| change | dispatched | <code>null &#124; number &#124; string</code> | | click | forwarded | -- |
| input | dispatched | <code>null &#124; number &#124; string</code> | | mouseover | forwarded | -- |
| click | forwarded | -- | | mouseenter | forwarded | -- |
| mouseover | forwarded | -- | | mouseleave | forwarded | -- |
| mouseenter | forwarded | -- | | keydown | forwarded | -- |
| mouseleave | forwarded | -- | | keyup | forwarded | -- |
| keydown | forwarded | -- | | focus | forwarded | -- |
| keyup | forwarded | -- | | blur | forwarded | -- |
| focus | forwarded | -- | | paste | forwarded | -- |
| blur | forwarded | -- | | input | dispatched | -- |
| paste | forwarded | -- | | change | dispatched | -- |
## `TextInputSkeleton` ## `TextInputSkeleton`

60
docs/src/COMPONENT_API.json
View file

@ -12698,11 +12698,9 @@
"filePath": "src/TextInput/TextInput.svelte", "filePath": "src/TextInput/TextInput.svelte",
"props": [ "props": [
{ {
"name": "disabled", "name": "counter",
"kind": "let", "kind": "let",
"description": "Set to `true` to disable the input", "description": "Set to \"char\" to enable display the character counter or \"word\" to display the word count.",
"type": "boolean",
"value": "false",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -12710,10 +12708,11 @@
"reactive": false "reactive": false
}, },
{ {
"name": "counter", "name": "disabled",
"kind": "let", "kind": "let",
"description": "Set to \"char\" to enable display the character counter or \"word\" to display the word count.", "description": "Set to `true` to disable the input",
"type": "\"char\" | \"word\"", "type": "boolean",
"value": "false",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -12932,10 +12931,40 @@
"isRequired": false, "isRequired": false,
"constant": false, "constant": false,
"reactive": 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": [], "moduleExports": [],
"slots": [ "slots": [
{
"name": "helperText",
"default": false,
"fallback": "{helperText}",
"slot_props": "{}"
},
{ {
"name": "labelText", "name": "labelText",
"default": false, "default": false,
@ -12944,16 +12973,6 @@
} }
], ],
"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" },
@ -12962,10 +12981,11 @@
{ "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": []
"rest_props": { "type": "Element", "name": "input" }
}, },
{ {
"moduleName": "TextInputSkeleton", "moduleName": "TextInputSkeleton",

22
docs/src/pages/components/TextInput.svx
View file

@ -9,35 +9,35 @@ components: ["TextInput", "TextInputSkeleton"]
## Default ## Default
<TextInput labelText="User name" placeholder="Enter user name..." /> <TextInput labelText="Username" placeholder="Enter username..." />
## With helper text ## With helper text
<TextInput labelText="User name" helperText="Your user name is associated with your email" placeholder="Enter user name..." /> <TextInput labelText="Username" helperText="Your username is associated with your email" placeholder="Enter username..." />
## Hidden label ## Hidden label
<TextInput hideLabel labelText="User name" placeholder="Enter user name..." /> <TextInput hideLabel labelText="Username" placeholder="Enter username..." />
## Light variant ## Light variant
<TextInput light labelText="User name" placeholder="Enter user name..." /> <TextInput light labelText="Username" placeholder="Enter username..." />
## Inline variant ## Inline variant
<TextInput inline labelText="User name" placeholder="Enter user name..." /> <TextInput inline labelText="Username" placeholder="Enter username..." />
## Read-only variant ## Read-only variant
<TextInput readonly labelText="User name" value="IBM" /> <TextInput readonly labelText="Username" value="IBM" />
## Large size ## Large size
<TextInput size="lg" labelText="User name" placeholder="Enter user name..." /> <TextInput size="lg" labelText="Username" placeholder="Enter username..." />
## Small size ## Small size
<TextInput size="sm" labelText="User name" placeholder="Enter user name..." /> <TextInput size="sm" labelText="Username" placeholder="Enter username..." />
## Character Counter ## Character Counter
@ -45,15 +45,15 @@ components: ["TextInput", "TextInputSkeleton"]
## Invalid state ## Invalid state
<TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." /> <TextInput invalid invalidText="Username is already taken. Please try another." labelText="Username" placeholder="Enter username..." />
## Warning state ## Warning state
<TextInput warn warnText="Your user name is different from your log in ID." labelText="User name" placeholder="Enter user name..." /> <TextInput warn warnText="Your username is different from your log in ID." labelText="Username" placeholder="Enter username..." />
## Disabled state ## Disabled state
<TextInput disabled labelText="User name" placeholder="Enter user name..." /> <TextInput disabled labelText="Username" placeholder="Enter username..." />
## Skeleton ## Skeleton

23
src/TextInput/TextInput.svelte
View file

@ -4,15 +4,15 @@
* @event {null | number | string} input * @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. * Set to "char" to enable display the character counter or "word" to display the word count.
* @type {"char" | "word"} * @type {"char" | "word"}
*/ */
export let counter = undefined; export let counter = undefined;
/** Set to `true` to disable the input */
export let disabled = false;
/** Specify the helper text */ /** Specify the helper text */
export let helperText = ""; export let helperText = "";
@ -86,10 +86,21 @@
/** Specify the warning state text */ /** Specify the warning state text */
export let warnText = ""; 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 { createEventDispatcher, getContext } from "svelte";
import WarningFilled from "../icons/WarningFilled.svelte"; import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import EditOff from "../icons/EditOff.svelte";
const ctx = getContext("Form"); const ctx = getContext("Form");
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -154,6 +165,7 @@
class:bx--label--inline--sm="{size === 'sm'}" class:bx--label--inline--sm="{size === 'sm'}"
class:bx--label--inline--md="{size === 'md'}" class:bx--label--inline--md="{size === 'md'}"
class:bx--label--inline--lg="{size === 'lg' || size === 'xl'}" class:bx--label--inline--lg="{size === 'lg' || size === 'xl'}"
{...labelAttributes}
> >
<slot name="labelText"> <slot name="labelText">
{labelText} {labelText}
@ -193,6 +205,7 @@
class:bx--label--inline-md="{inline && size === 'md'}" class:bx--label--inline-md="{inline && size === 'md'}"
class:bx--label--inline-lg="{inline && class:bx--label--inline-lg="{inline &&
(size === 'lg' || size === 'xl')}" (size === 'lg' || size === 'xl')}"
{...labelAttributes}
> >
<slot name="labelText"> <slot name="labelText">
{labelText} {labelText}
@ -266,7 +279,7 @@
class:bx--layout--size-sm="{size === 'sm'}" class:bx--layout--size-sm="{size === 'sm'}"
class:bx--layout--size-md="{size === 'md'}" class:bx--layout--size-md="{size === 'md'}"
class:bx--layout--size-lg="{size === 'lg' || size === 'xl'}" class:bx--layout--size-lg="{size === 'lg' || size === 'xl'}"
{...$$restProps} {...inputAttributes}
on:change="{onChange}" on:change="{onChange}"
on:input="{onInput}" on:input="{onInput}"
on:keydown on:keydown

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

@ -1,21 +1,18 @@
import type { SvelteComponentTyped } from "svelte"; 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 * Set to `true` to disable the input
* @default false * @default false
*/ */
disabled?: boolean; 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 * Specify the helper text
* @default "" * @default ""
@ -129,14 +126,22 @@ export interface TextInputProps extends RestProps {
*/ */
warnText?: string; 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< 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"];
@ -146,6 +151,8 @@ 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>;
}, },
{ labelText: {} } { helperText: {}; labelText: {} }
> {} > {}