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

Adopted suggested changes

Browse source
This commit is contained in:
Samuel Janda 2024-01-16 19:25:13 +11:00
commit 6d9f45b107
6 changed files with 236 additions and 279 deletions
Download patch file Download diff file Expand all files Collapse all files

42
COMPONENT_INDEX.md
View file

@ -4216,29 +4216,29 @@ None.
### Props
| 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 |
| :-------------- | :------- | :--------------- | :------- | ---------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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>"char" &#124; "word"</code> | <code>undefined</code> | Set to "char" to enable display the character counter or "word" to display the word count. |
| 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 `typeof value === "number"` and `value` is empty |
| size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg"</code> | <code>"md"</code> | Set the size of the input |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder 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 |
| 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 |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify 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 |
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| counter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable display the character counter. Requires `maxCount` to be set. |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required |
| readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the read-only variant |
| labelAttributes | No | <code>let</code> | No | <code>import('svelte/elements').HTMLLabelAttributes</code> | <code>{}</code> | Set HTML attributes on the `label` element |
| inputAttributes | No | <code>let</code> | No | <code>import('svelte/elements').HTMLInputAttributes</code> | <code>{}</code> | Set HTML attributes on the `input` element |
### Slots
@ -4252,14 +4252,14 @@ None.
### Events
| Event name | Type | Detail |
| :----------- | :--------- | :-------------------------------------------- |
| change | dispatched | <code>null &#124; number &#124; string</code> |
| input | dispatched | <code>null &#124; number &#124; string</code> |
| :----------- | :-------- | :----- |
| click | forwarded | -- |
| pointerup | forwarded | -- |
| pointerover | forwarded | -- |
| pointerenter | forwarded | -- |
| pointerleave | forwarded | -- |
| change | forwarded | -- |
| input | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
@ -4271,9 +4271,9 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | ----------------------------------- | ------------------ | ---------------------------------------------------------- |
| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------ | ---------------------------------------------------------- |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the label text |
| divAttributes | No | <code>let</code> | No | <code>Record<string, string></code> | <code>{}</code> | Specify the div HTML attributes for the skeleton container |
| divAttributes | No | <code>let</code> | No | <code>import('svelte/elements').HTMLDivAttributes</code> | <code>{}</code> | Specify the div HTML attributes for the skeleton container |
### Slots

274
docs/src/COMPONENT_API.json
View file

@ -12698,10 +12698,59 @@
"filePath": "src/TextInput/TextInput.svelte",
"props": [
{
"name": "counter",
"name": "value",
"kind": "let",
"description": "Set to \"char\" to enable display the character counter or \"word\" to display the word count.",
"type": "\"char\" | \"word\"",
"description": "Specify the input value\n`value` will be set to `null` if `typeof value === \"number\"` and `value` is empty",
"type": "null | number | string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": true
},
{
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the input HTML element",
"type": "null | HTMLInputElement",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": true
},
{
"name": "size",
"kind": "let",
"description": "Set the size of the input",
"type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"md\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "placeholder",
"kind": "let",
"description": "Specify the placeholder text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "light",
"kind": "let",
"description": "Set to `true` to enable the light variant\nFor use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color\nThe light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release\n@deprecated ",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -12721,9 +12770,9 @@
"reactive": false
},
{
"name": "helperText",
"name": "labelText",
"kind": "let",
"description": "Specify the helper text",
"description": "Specify the label text",
"type": "string",
"value": "\"\"",
"isFunction": false,
@ -12745,11 +12794,11 @@
"reactive": false
},
{
"name": "id",
"name": "helperText",
"kind": "let",
"description": "Set an id for the input element",
"description": "Specify the helper text",
"type": "string",
"value": "\"ccs-\" + Math.random().toString(36)",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -12757,9 +12806,9 @@
"reactive": false
},
{
"name": "inline",
"name": "counter",
"kind": "let",
"description": "Set to `true` to use the inline variant",
"description": "Set to `true` to enable display the character counter. Requires `maxCount` to be set.",
"type": "boolean",
"value": "false",
"isFunction": false,
@ -12768,6 +12817,17 @@
"constant": false,
"reactive": false
},
{
"name": "maxCount",
"kind": "let",
"description": "Specify the maximum number of characters/words allowed\nThis is needed in order for `counter` to display",
"type": "number",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "invalid",
"kind": "let",
@ -12792,123 +12852,6 @@
"constant": false,
"reactive": false
},
{
"name": "labelText",
"kind": "let",
"description": "Specify the label text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "light",
"kind": "let",
"description": "Set to `true` to enable the light variant\nFor use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color\nThe light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release\n@deprecated ",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "maxCount",
"kind": "let",
"description": "Specify the maximum number of characters/words allowed\nThis is needed in order for `counter` to display",
"type": "number",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "name",
"kind": "let",
"description": "Specify a name attribute for the input",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "placeholder",
"kind": "let",
"description": "Specify the placeholder text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "readonly",
"kind": "let",
"description": "Set to `true` to use the read-only variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the input HTML element",
"type": "null | HTMLInputElement",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": true
},
{
"name": "required",
"kind": "let",
"description": "Set to `true` to mark the field as required",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "size",
"kind": "let",
"description": "Set the size of the input",
"type": "\"sm\" | \"md\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "value",
"kind": "let",
"description": "Specify the input value\n`value` will be set to `null` if `type = \"number\"` and the value is empty",
"type": "null | number | string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": true
},
{
"name": "warn",
"kind": "let",
@ -12933,11 +12876,70 @@
"constant": false,
"reactive": false
},
{
"name": "id",
"kind": "let",
"description": "Set an id for the input element",
"type": "string",
"value": "\"ccs-\" + Math.random().toString(36)",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "name",
"kind": "let",
"description": "Specify a name attribute for the input",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "inline",
"kind": "let",
"description": "Set to `true` to use the inline variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "required",
"kind": "let",
"description": "Set to `true` to mark the field as required",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "readonly",
"kind": "let",
"description": "Set to `true` to use the read-only variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "labelAttributes",
"kind": "let",
"description": "Set HTML attributes on the `label` element",
"type": "Record<string, string>",
"type": "import('svelte/elements').HTMLLabelAttributes",
"value": "{}",
"isFunction": false,
"isFunctionDeclaration": false,
@ -12949,7 +12951,7 @@
"name": "inputAttributes",
"kind": "let",
"description": "Set HTML attributes on the `input` element",
"type": "Record<string, string>",
"type": "import('svelte/elements').HTMLInputAttributes",
"value": "{}",
"isFunction": false,
"isFunctionDeclaration": false,
@ -12986,21 +12988,13 @@
}
],
"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": "pointerup", "element": "div" },
{ "type": "forwarded", "name": "pointerover", "element": "div" },
{ "type": "forwarded", "name": "pointerenter", "element": "div" },
{ "type": "forwarded", "name": "pointerleave", "element": "div" },
{ "type": "forwarded", "name": "change", "element": "input" },
{ "type": "forwarded", "name": "input", "element": "input" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
@ -13029,7 +13023,7 @@
"name": "divAttributes",
"kind": "let",
"description": "Specify the div HTML attributes for the skeleton container",
"type": "Record<string, string>",
"type": "import('svelte/elements').HTMLDivAttributes",
"value": "{}",
"isFunction": false,
"isFunctionDeclaration": false,

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

@ -41,7 +41,7 @@ components: ["TextInput", "TextInputSkeleton"]
## Character Counter
<TextInput labelText="Username" placeholder="Enter username..." maxCount={32} counter="char" />
<TextInput labelText="Username" placeholder="Enter username..." maxCount={32} counter />
## Invalid state

3
package.json
View file

@ -88,7 +88,6 @@
"contributors": [
"Josef Aidt (https://github.com/josefaidt)",
"Eric Liu (https://github.com/metonym)",
"Enrico Sacchetti (https://github.com/theetrain)",
"Samuel Janda (https://github.com/SimpleProgrammingAU)"
"Enrico Sacchetti (https://github.com/theetrain)"
]
}

150
src/TextInput/TextInput.svelte
View file

@ -1,38 +1,21 @@
<script>
/**
* @event {null | number | string} change
* @event {null | number | string} input
* Specify the input value
* `value` will be set to `null` if `typeof value === "number"` and `value` is empty
* @type {null | number | string}
*/
export let value = "";
/** Obtain a reference to the input HTML element */
export let ref = null;
/**
* Set to "char" to enable display the character counter or "word" to display the word count.
* @type {"char" | "word"}
* Set the size of the input
* @type {"sm" | "md" | "lg"}
*/
export let counter = undefined;
export let size = "md";
/** Set to `true` to disable the input */
export let disabled = false;
/** Specify the helper text */
export let helperText = "";
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/** Set to `true` to use the inline variant */
export let inline = false;
/** Set to `true` to indicate an invalid state */
export let invalid = false;
/** Specify the invalid state text */
export let invalidText = "";
/** Specify the label text */
export let labelText = "";
/** Specify the placeholder text */
export let placeholder = "";
/**
* Set to `true` to enable the light variant
@ -42,6 +25,21 @@
*/
export let light = false;
/** Set to `true` to disable the input */
export let disabled = false;
/** Specify the label text */
export let labelText = "";
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/** Specify the helper text */
export let helperText = "";
/** Set to `true` to enable display the character counter. Requires `maxCount` to be set. */
export let counter = false;
/**
* Specify the maximum number of characters/words allowed
* This is needed in order for `counter` to display
@ -49,36 +47,11 @@
*/
export let maxCount = undefined;
/**
* Specify a name attribute for the input
* @type {string}
*/
export let name = undefined;
/** Set to `true` to indicate an invalid state */
export let invalid = false;
/** Specify the placeholder text */
export let placeholder = "";
/** Set to `true` to use the read-only variant */
export let readonly = false;
/** Obtain a reference to the input HTML element */
export let ref = null;
/** Set to `true` to mark the field as required */
export let required = false;
/**
* Set the size of the input
* @type {"sm" | "md" | "lg"}
*/
export let size = 'md';
/**
* Specify the input value
* `value` will be set to `null` if `type = "number"` and the value is empty
* @type {null | number | string}
*/
export let value = "";
/** Specify the invalid state text */
export let invalidText = "";
/** Set to `true` to indicate an warning state */
export let warn = false;
@ -86,6 +59,24 @@
/** Specify the warning state text */
export let warnText = "";
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/**
* Specify a name attribute for the input
* @type {string}
*/
export let name = undefined;
/** Set to `true` to use the inline variant */
export let inline = false;
/** Set to `true` to mark the field as required */
export let required = false;
/** Set to `true` to use the read-only variant */
export let readonly = false;
/**
* Set HTML attributes on the `label` element
* @type {import('svelte/elements').HTMLLabelAttributes}
@ -98,40 +89,14 @@
*/
export let inputAttributes = {};
import { createEventDispatcher, getContext } from "svelte";
import { getContext } from "svelte";
import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
const ctx = getContext("Form");
const dispatch = createEventDispatcher();
let count = 0;
function parse(raw) {
if ($$restProps.type !== "number") return raw;
return raw != "" ? Number(raw) : null;
}
/** @type {(e: Event) => void} */
const onInput = (e) => {
value = parse(e.target.value);
if (maxCount && value.length > maxCount) value = value.slice(0, maxCount);
if (counter && maxCount) updateCount();
dispatch("input", value);
};
/** @type {(e: Event) => void} */
const onChange = (e) => {
dispatch("change", parse(e.target.value));
};
const updateCount = () => {
if (counter === "char") {
count = value.length;
} else if (counter === "word") {
count = value.split(/\b\w+\b/).length - 1;
}
};
$: if (maxCount && value.length > maxCount) value = value.slice(0, maxCount);
$: count = value.length;
$: isFluid = !!ctx && ctx.isFluid;
$: error = invalid && !readonly;
$: helperId = `helper-${id}`;
@ -165,7 +130,7 @@
class:bx--label--inline="{inline}"
class:bx--label--inline--sm="{size === 'sm'}"
class:bx--label--inline--md="{size === 'md'}"
class:bx--label--inline--lg="{size === 'lg' || size === 'xl'}"
class:bx--label--inline--lg="{size === 'lg'}"
{...labelAttributes}
>
<slot name="labelText">
@ -204,8 +169,7 @@
class:bx--label--inline="{inline}"
class:bx--label--inline-sm="{inline && size === 'sm'}"
class:bx--label--inline-md="{inline && size === 'md'}"
class:bx--label--inline-lg="{inline &&
(size === 'lg' || size === 'xl')}"
class:bx--label--inline-lg="{inline && size === 'lg'}"
{...labelAttributes}
>
<slot name="labelText">
@ -276,13 +240,13 @@
class:bx--text-input--warning="{warn}"
class:bx--text-input--sm="{size === 'sm'}"
class:bx--text-input--md="{size === 'md'}"
class:bx--text-input--lg="{size === 'lg' || size === 'xl'}"
class:bx--text-input--lg="{size === 'lg'}"
class:bx--layout--size-sm="{size === 'sm'}"
class:bx--layout--size-md="{size === 'md'}"
class:bx--layout--size-lg="{size === 'lg' || size === 'xl'}"
class:bx--layout--size-lg="{size === 'lg'}"
{...inputAttributes}
on:change="{onChange}"
on:input="{onInput}"
on:change
on:input
on:keydown
on:keyup
on:focus

2
src/TextInput/TextInputSkeleton.svelte
View file

@ -4,7 +4,7 @@
/**
* Specify the div HTML attributes for the skeleton container
* @type {Record<string, string>}
* @type {import('svelte/elements').HTMLDivAttributes}
*/
export let divAttributes = {};
</script>