From 630451c1617a5969943f1076c9842e382e014175 Mon Sep 17 00:00:00 2001 From: Samuel Janda Date: Sun, 14 Jan 2024 18:12:22 +1100 Subject: [PATCH] Added pointer events, updated skeleton TextInput v11 #1888 --- COMPONENT_INDEX.md | 47 ++++++++++--------- docs/src/COMPONENT_API.json | 29 ++++++++---- src/TextInput/TextInput.svelte | 7 +-- src/TextInput/TextInputSkeleton.svelte | 15 ++++-- types/TextInput/TextInput.svelte.d.ts | 7 +-- types/TextInput/TextInputSkeleton.svelte.d.ts | 18 +++---- 6 files changed, 75 insertions(+), 48 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index dc4af73d..820b060d 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -4251,27 +4251,29 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :-------------------------------------------- | -| change | dispatched | null | number | string | -| input | dispatched | null | number | string | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| keydown | forwarded | -- | -| keyup | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | -| paste | forwarded | -- | +| Event name | Type | Detail | +| :----------- | :--------- | :-------------------------------------------- | +| change | dispatched | null | number | string | +| input | dispatched | null | number | string | +| 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 | let | No | boolean | false | Set to `true` to hide the label text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :--------------- | :------- | ----------------------------------- | ------------------ | ---------------------------------------------------------- | +| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text | +| divAttributes | No | let | No | Record | {} | 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` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index d06ad877..5d34b7d5 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -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", + "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", diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte index 2912dfce..411aaa33 100644 --- a/src/TextInput/TextInput.svelte +++ b/src/TextInput/TextInput.svelte @@ -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}
diff --git a/src/TextInput/TextInputSkeleton.svelte b/src/TextInput/TextInputSkeleton.svelte index 690ea42d..06ec847c 100644 --- a/src/TextInput/TextInputSkeleton.svelte +++ b/src/TextInput/TextInputSkeleton.svelte @@ -1,17 +1,24 @@
{#if !hideLabel} diff --git a/types/TextInput/TextInput.svelte.d.ts b/types/TextInput/TextInput.svelte.d.ts index ea98cb88..ef72dae0 100644 --- a/types/TextInput/TextInput.svelte.d.ts +++ b/types/TextInput/TextInput.svelte.d.ts @@ -145,9 +145,10 @@ export default class TextInput extends SvelteComponentTyped< change: CustomEvent; input: CustomEvent; 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"]; diff --git a/types/TextInput/TextInputSkeleton.svelte.d.ts b/types/TextInput/TextInputSkeleton.svelte.d.ts index c7291482..23e827a9 100644 --- a/types/TextInput/TextInputSkeleton.svelte.d.ts +++ b/types/TextInput/TextInputSkeleton.svelte.d.ts @@ -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; } 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"]; }, {} > {}