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

Added pointer events, updated skeleton TextInput v11 #1888

Browse source
This commit is contained in:
Samuel Janda 2024-01-14 18:12:22 +11:00
commit 630451c161
6 changed files with 75 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

47
COMPONENT_INDEX.md
View file

@ -4251,27 +4251,29 @@ 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 | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
| 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 | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
## `TextInputSkeleton`
### 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 |
| 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 |
### Slots
@ -4279,12 +4281,13 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| Event name | Type | Detail |
| :----------- | :-------- | :----- |
| click | forwarded | -- |
| pointerup | forwarded | -- |
| pointerover | forwarded | -- |
| pointerenter | forwarded | -- |
| pointerleave | forwarded | -- |
## `Theme`

29
docs/src/COMPONENT_API.json
View file

@ -12997,9 +12997,10 @@
"detail": "null | number | string"
},
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "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": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
@ -13023,18 +13024,30 @@
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "divAttributes",
"kind": "let",
"description": "Specify the div HTML attributes for the skeleton container",
"type": "Record<string, string>",
"value": "{}",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "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" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
"typedefs": []
},
{
"moduleName": "Theme",

7
src/TextInput/TextInput.svelte
View file

@ -149,9 +149,10 @@
class:bx--text-input-wrapper--light="{light}"
class:bx--text-input-wrapper--readonly="{readonly}"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:pointerup
on:pointerover
on:pointerenter
on:pointerleave
>
{#if inline}
<div class:bx--text-input__label-helper-wrapper="{true}">

15
src/TextInput/TextInputSkeleton.svelte
View file

@ -1,17 +1,24 @@
<script>
/** Set to `true` to hide the label text */
export let hideLabel = false;
/**
* Specify the div HTML attributes for the skeleton container
* @type {Record<string, string>}
*/
export let divAttributes = {};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class:bx--form-item="{true}"
{...$$restProps}
{...divAttributes}
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:pointerup
on:pointerover
on:pointerenter
on:pointerleave
>
{#if !hideLabel}
<span class:bx--label="{true}" class:bx--skeleton="{true}"></span>

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

@ -145,9 +145,10 @@ export default class TextInput extends SvelteComponentTyped<
change: CustomEvent<null | number | string>;
input: CustomEvent<null | number | string>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
pointerup: WindowEventMap["pointerup"];
pointerover: WindowEventMap["pointerover"];
pointerenter: WindowEventMap["pointerenter"];
pointerleave: WindowEventMap["pointerleave"];
keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"];

18
types/TextInput/TextInputSkeleton.svelte.d.ts vendored
View file

@ -1,25 +1,27 @@
import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
type RestProps = SvelteHTMLElements["div"];
export interface TextInputSkeletonProps extends RestProps {
export interface TextInputSkeletonProps {
/**
* Set to `true` to hide the label text
* @default false
*/
hideLabel?: boolean;
[key: `data-${string}`]: any;
/**
* Specify the div HTML attributes for the skeleton container
* @default {}
*/
divAttributes?: Record<string, string>;
}
export default class TextInputSkeleton extends SvelteComponentTyped<
TextInputSkeletonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
pointerup: WindowEventMap["pointerup"];
pointerover: WindowEventMap["pointerover"];
pointerenter: WindowEventMap["pointerenter"];
pointerleave: WindowEventMap["pointerleave"];
},
{}
> {}