mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
Updated TextInput.test; added forgotten files from previous
This commit is contained in:
Samuel Janda
parent
6d9f45b107
commit
a5c93a371d
3 changed files with 91 additions and 84 deletions
|
|
@ -5,13 +5,13 @@
|
|||
</script>
|
||||
|
||||
<TextInput
|
||||
type="number"
|
||||
labelText="User name"
|
||||
placeholder="Enter user name..."
|
||||
bind:value
|
||||
on:input="{(e) => console.log(e.detail)}"
|
||||
on:change="{(e) => (value = e.detail)}"
|
||||
bind:value="{value}"
|
||||
on:input="{(e) => console.log(e)}"
|
||||
on:change="{(e) => (value = e)}"
|
||||
on:paste="{(e) => console.log(e)}"
|
||||
inputAttributes="{{ type: 'number' }}"
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
|
|
@ -20,6 +20,13 @@
|
|||
placeholder="Enter user name..."
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
labelText="Username"
|
||||
placeholder="Enter username..."
|
||||
maxCount="{32}"
|
||||
counter
|
||||
/>
|
||||
|
||||
<TextInput hideLabel labelText="User name" placeholder="Enter user name..." />
|
||||
|
||||
<TextInput light labelText="User name" placeholder="Enter user name..." />
|
||||
|
|
|
|||
158
types/TextInput/TextInput.svelte.d.ts
vendored
158
types/TextInput/TextInput.svelte.d.ts
vendored
|
|
@ -2,10 +2,38 @@ import type { SvelteComponentTyped } from "svelte";
|
|||
|
||||
export interface TextInputProps {
|
||||
/**
|
||||
* Set to "char" to enable display the character counter or "word" to display the word count.
|
||||
* @default undefined
|
||||
* Specify the input value
|
||||
* `value` will be set to `null` if `typeof value === "number"` and `value` is empty
|
||||
* @default ""
|
||||
*/
|
||||
counter?: "char" | "word";
|
||||
value?: null | number | string;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLInputElement;
|
||||
|
||||
/**
|
||||
* Set the size of the input
|
||||
* @default "md"
|
||||
*/
|
||||
size?: "sm" | "md" | "lg";
|
||||
|
||||
/**
|
||||
* Specify the placeholder text
|
||||
* @default ""
|
||||
*/
|
||||
placeholder?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the light variant
|
||||
* For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color
|
||||
* 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
|
||||
* @deprecated
|
||||
* @default false
|
||||
*/
|
||||
light?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to disable the input
|
||||
|
|
@ -14,10 +42,10 @@ export interface TextInputProps {
|
|||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the helper text
|
||||
* Specify the label text
|
||||
* @default ""
|
||||
*/
|
||||
helperText?: string;
|
||||
labelText?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to visually hide the label text
|
||||
|
|
@ -26,16 +54,23 @@ export interface TextInputProps {
|
|||
hideLabel?: boolean;
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @default "ccs-" + Math.random().toString(36)
|
||||
* Specify the helper text
|
||||
* @default ""
|
||||
*/
|
||||
id?: string;
|
||||
helperText?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to use the inline variant
|
||||
* Set to `true` to enable display the character counter. Requires `maxCount` to be set.
|
||||
* @default false
|
||||
*/
|
||||
inline?: boolean;
|
||||
counter?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the maximum number of characters/words allowed
|
||||
* This is needed in order for `counter` to display
|
||||
* @default undefined
|
||||
*/
|
||||
maxCount?: number;
|
||||
|
||||
/**
|
||||
* Set to `true` to indicate an invalid state
|
||||
|
|
@ -49,71 +84,6 @@ export interface TextInputProps {
|
|||
*/
|
||||
invalidText?: string;
|
||||
|
||||
/**
|
||||
* Specify the label text
|
||||
* @default ""
|
||||
*/
|
||||
labelText?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the light variant
|
||||
* For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color
|
||||
* 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
|
||||
* @deprecated
|
||||
* @default false
|
||||
*/
|
||||
light?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the maximum number of characters/words allowed
|
||||
* This is needed in order for `counter` to display
|
||||
* @default undefined
|
||||
*/
|
||||
maxCount?: number;
|
||||
|
||||
/**
|
||||
* Specify a name attribute for the input
|
||||
* @default undefined
|
||||
*/
|
||||
name?: string;
|
||||
|
||||
/**
|
||||
* Specify the placeholder text
|
||||
* @default ""
|
||||
*/
|
||||
placeholder?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to use the read-only variant
|
||||
* @default false
|
||||
*/
|
||||
readonly?: boolean;
|
||||
|
||||
/**
|
||||
* Obtain a reference to the input HTML element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLInputElement;
|
||||
|
||||
/**
|
||||
* Set to `true` to mark the field as required
|
||||
* @default false
|
||||
*/
|
||||
required?: boolean;
|
||||
|
||||
/**
|
||||
* Set the size of the input
|
||||
* @default undefined
|
||||
*/
|
||||
size?: "sm" | "md" | "lg";
|
||||
|
||||
/**
|
||||
* Specify the input value
|
||||
* `value` will be set to `null` if `type = "number"` and the value is empty
|
||||
* @default ""
|
||||
*/
|
||||
value?: null | number | string;
|
||||
|
||||
/**
|
||||
* Set to `true` to indicate an warning state
|
||||
* @default false
|
||||
|
|
@ -126,29 +96,59 @@ export interface TextInputProps {
|
|||
*/
|
||||
warnText?: string;
|
||||
|
||||
/**
|
||||
* Set an id for the input element
|
||||
* @default "ccs-" + Math.random().toString(36)
|
||||
*/
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* Specify a name attribute for the input
|
||||
* @default undefined
|
||||
*/
|
||||
name?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to use the inline variant
|
||||
* @default false
|
||||
*/
|
||||
inline?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to mark the field as required
|
||||
* @default false
|
||||
*/
|
||||
required?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to use the read-only variant
|
||||
* @default false
|
||||
*/
|
||||
readonly?: boolean;
|
||||
|
||||
/**
|
||||
* Set HTML attributes on the `label` element
|
||||
* @default {}
|
||||
*/
|
||||
labelAttributes?: Record<string, string>;
|
||||
labelAttributes?: import("svelte/elements").HTMLLabelAttributes;
|
||||
|
||||
/**
|
||||
* Set HTML attributes on the `input` element
|
||||
* @default {}
|
||||
*/
|
||||
inputAttributes?: Record<string, string>;
|
||||
inputAttributes?: import("svelte/elements").HTMLInputAttributes;
|
||||
}
|
||||
|
||||
export default class TextInput extends SvelteComponentTyped<
|
||||
TextInputProps,
|
||||
{
|
||||
change: CustomEvent<null | number | string>;
|
||||
input: CustomEvent<null | number | string>;
|
||||
click: WindowEventMap["click"];
|
||||
pointerup: WindowEventMap["pointerup"];
|
||||
pointerover: WindowEventMap["pointerover"];
|
||||
pointerenter: WindowEventMap["pointerenter"];
|
||||
pointerleave: WindowEventMap["pointerleave"];
|
||||
change: WindowEventMap["change"];
|
||||
input: WindowEventMap["input"];
|
||||
keydown: WindowEventMap["keydown"];
|
||||
keyup: WindowEventMap["keyup"];
|
||||
focus: WindowEventMap["focus"];
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export interface TextInputSkeletonProps {
|
|||
* Specify the div HTML attributes for the skeleton container
|
||||
* @default {}
|
||||
*/
|
||||
divAttributes?: Record<string, string>;
|
||||
divAttributes?: import("svelte/elements").HTMLDivAttributes;
|
||||
}
|
||||
|
||||
export default class TextInputSkeleton extends SvelteComponentTyped<
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue