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 ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :-------------------------------------------- | | :----------- | :--------- | :-------------------------------------------- |
| change | dispatched | <code>null &#124; number &#124; string</code> | | change | dispatched | <code>null &#124; number &#124; string</code> |
| input | dispatched | <code>null &#124; number &#124; string</code> | | input | dispatched | <code>null &#124; number &#124; string</code> |
| click | forwarded | -- | | click | forwarded | -- |
| mouseover | forwarded | -- | | pointerup | forwarded | -- |
| mouseenter | forwarded | -- | | pointerover | forwarded | -- |
| mouseleave | forwarded | -- | | pointerenter | forwarded | -- |
| keydown | forwarded | -- | | pointerleave | forwarded | -- |
| keyup | forwarded | -- | | keydown | forwarded | -- |
| focus | forwarded | -- | | keyup | forwarded | -- |
| blur | forwarded | -- | | focus | forwarded | -- |
| paste | forwarded | -- | | blur | forwarded | -- |
| paste | forwarded | -- |
## `TextInputSkeleton` ## `TextInputSkeleton`
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | 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 | | 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 ### Slots
@ -4279,12 +4281,13 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :-------- | :----- | | :----------- | :-------- | :----- |
| click | forwarded | -- | | click | forwarded | -- |
| mouseover | forwarded | -- | | pointerup | forwarded | -- |
| mouseenter | forwarded | -- | | pointerover | forwarded | -- |
| mouseleave | forwarded | -- | | pointerenter | forwarded | -- |
| pointerleave | forwarded | -- |
## `Theme` ## `Theme`

29
docs/src/COMPONENT_API.json
View file

@ -12997,9 +12997,10 @@
"detail": "null | number | string" "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": "pointerup", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "pointerover", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" }, { "type": "forwarded", "name": "pointerenter", "element": "div" },
{ "type": "forwarded", "name": "pointerleave", "element": "div" },
{ "type": "forwarded", "name": "keydown", "element": "input" }, { "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" },
@ -13023,18 +13024,30 @@
"isRequired": false, "isRequired": false,
"constant": false, "constant": false,
"reactive": 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": [], "moduleExports": [],
"slots": [], "slots": [],
"events": [ "events": [
{ "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "pointerup", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "pointerover", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" } { "type": "forwarded", "name": "pointerenter", "element": "div" },
{ "type": "forwarded", "name": "pointerleave", "element": "div" }
], ],
"typedefs": [], "typedefs": []
"rest_props": { "type": "Element", "name": "div" }
}, },
{ {
"moduleName": "Theme", "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--light="{light}"
class:bx--text-input-wrapper--readonly="{readonly}" class:bx--text-input-wrapper--readonly="{readonly}"
on:click on:click
on:mouseover on:pointerup
on:mouseenter on:pointerover
on:mouseleave on:pointerenter
on:pointerleave
> >
{#if inline} {#if inline}
<div class:bx--text-input__label-helper-wrapper="{true}"> <div class:bx--text-input__label-helper-wrapper="{true}">

15
src/TextInput/TextInputSkeleton.svelte
View file

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

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

@ -1,25 +1,27 @@
import type { SvelteComponentTyped } from "svelte"; import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
type RestProps = SvelteHTMLElements["div"]; export interface TextInputSkeletonProps {
export interface TextInputSkeletonProps extends RestProps {
/** /**
* Set to `true` to hide the label text * Set to `true` to hide the label text
* @default false * @default false
*/ */
hideLabel?: boolean; 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< export default class TextInputSkeleton extends SvelteComponentTyped<
TextInputSkeletonProps, TextInputSkeletonProps,
{ {
click: WindowEventMap["click"]; click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"]; pointerup: WindowEventMap["pointerup"];
mouseenter: WindowEventMap["mouseenter"]; pointerover: WindowEventMap["pointerover"];
mouseleave: WindowEventMap["mouseleave"]; pointerenter: WindowEventMap["pointerenter"];
pointerleave: WindowEventMap["pointerleave"];
}, },
{} {}
> {} > {}