mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: forward paste event to input/textarea elements (#1332)

Browse source 
* chore(deps-dev): upgrade sveld, svelte-check

* feat: forward paste event to input/textarea elements

* Run "yarn build:docs"

* test: assert paste event
This commit is contained in:
metonym 2022-06-02 18:39:49 -07:00 • committed by GitHub
commit e230db8115
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 96 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

10
COMPONENT_INDEX.md
View file

@ -694,6 +694,7 @@ export interface ComboBoxItem {
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
| clear | forwarded | -- |
| scroll | forwarded | -- |
@ -1106,6 +1107,7 @@ None.
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
## `DatePickerSkeleton`
@ -1830,6 +1832,7 @@ export interface HeaderSearchResult {
| focus | forwarded | -- |
| blur | forwarded | -- |
| keydown | forwarded | -- |
| paste | forwarded | -- |
## `HeaderUtilities`
@ -2390,6 +2393,7 @@ export interface MultiSelectItem {
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| paste | forwarded | -- |
## `NotificationActionButton`
@ -2508,6 +2512,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
| mouseleave | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
## `NumberInputSkeleton`
@ -2769,6 +2774,7 @@ None.
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
## `Popover`
@ -3108,6 +3114,7 @@ None.
| blur | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| paste | forwarded | -- |
| clear | dispatched | <code>null</code> |
## `SearchSkeleton`
@ -4046,6 +4053,7 @@ None.
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
## `TextAreaSkeleton`
@ -4113,6 +4121,7 @@ None.
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
## `TextInputSkeleton`
@ -4255,6 +4264,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| paste | forwarded | -- |
## `TimePickerSelect`

26
docs/src/COMPONENT_API.json
View file

@ -1759,6 +1759,7 @@
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "paste", "element": "input" },
{ "type": "forwarded", "name": "clear", "element": "ListBoxSelection" },
{ "type": "forwarded", "name": "scroll", "element": "ListBoxMenu" }
],
@ -3168,7 +3169,8 @@
{ "type": "forwarded", "name": "input", "element": "input" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" }
{ "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "paste", "element": "input" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "input" }
@ -5286,7 +5288,8 @@
{ "type": "forwarded", "name": "input", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "keydown", "element": "input" }
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "paste", "element": "input" }
],
"typedefs": [
{
@ -7294,7 +7297,8 @@
},
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" }
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "paste", "element": "input" }
],
"typedefs": [
{
@ -7732,7 +7736,8 @@
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" }
{ "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "paste", "element": "input" }
],
"typedefs": [
{
@ -8745,7 +8750,8 @@
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" }
{ "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "paste", "element": "input" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "input" }
@ -9931,6 +9937,7 @@
{ "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "paste", "element": "input" },
{ "type": "dispatched", "name": "clear", "detail": "null" }
],
"typedefs": [],
@ -12379,7 +12386,8 @@
{ "type": "forwarded", "name": "keydown", "element": "textarea" },
{ "type": "forwarded", "name": "keyup", "element": "textarea" },
{ "type": "forwarded", "name": "focus", "element": "textarea" },
{ "type": "forwarded", "name": "blur", "element": "textarea" }
{ "type": "forwarded", "name": "blur", "element": "textarea" },
{ "type": "forwarded", "name": "paste", "element": "textarea" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "textarea" }
@ -12658,7 +12666,8 @@
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" }
{ "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "paste", "element": "input" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "input" }
@ -13079,7 +13088,8 @@
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" }
{ "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "paste", "element": "input" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "input" }

4
package.json
View file

@ -38,9 +38,9 @@
"rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2",
"sass": "^1.49.11",
"sveld": "^0.17.0",
"sveld": "^0.17.1",
"svelte": "^3.46.6",
"svelte-check": "^2.4.6",
"svelte-check": "^2.7.2",
"typescript": "^4.6.3"
},
"lint-staged": {

1
src/ComboBox/ComboBox.svelte
View file

@ -334,6 +334,7 @@
ref.focus();
}
}}"
on:paste
/>
{#if invalid}
<WarningFilled class="bx--list-box__invalid-icon" />

1
src/DatePicker/DatePickerInput.svelte
View file

@ -135,6 +135,7 @@
on:blur="{({ relatedTarget }) => {
blurInput(relatedTarget);
}}"
on:paste
/>
{#if !$hasCalendar}
{#if invalid}

1
src/MultiSelect/MultiSelect.svelte
View file

@ -446,6 +446,7 @@
on:keyup
on:focus
on:blur
on:paste
disabled="{disabled}"
placeholder="{placeholder}"
id="{id}"

1
src/NumberInput/NumberInput.svelte
View file

@ -206,6 +206,7 @@
on:input="{onInput}"
on:focus
on:blur
on:paste
/>
{#if invalid}
<WarningFilled class="bx--number__invalid" />

1
src/Search/Search.svelte
View file

@ -148,6 +148,7 @@
}
}}"
on:keyup
on:paste
/>
<button
type="button"

3
src/TextArea/TextArea.svelte
View file

@ -114,7 +114,8 @@
on:keydown
on:keyup
on:focus
on:blur></textarea>
on:blur
on:paste></textarea>
</div>
{#if !invalid && helperText}
<div

1
src/TextInput/PasswordInput.svelte
View file

@ -190,6 +190,7 @@
on:keyup
on:focus
on:blur
on:paste
/>
<button
type="button"

1
src/TextInput/TextInput.svelte
View file

@ -201,6 +201,7 @@
on:keyup
on:focus
on:blur
on:paste
/>
{#if isFluid}
<hr class:bx--text-input__divider="{true}" />

1
src/TimePicker/TimePicker.svelte
View file

@ -111,6 +111,7 @@
on:keyup
on:focus
on:blur
on:paste
/>
</div>
<slot />

1
src/UIShell/HeaderSearch.svelte
View file

@ -113,6 +113,7 @@
break;
}
}}"
on:paste
/>
<button
type="button"

2
tests/DatePicker.test.svelte
View file

@ -9,7 +9,7 @@
flatpickrProps="{{ static: true }}"
on:change
>
<DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
<DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" on:paste />
</DatePicker>
<DatePicker

1
tests/HeaderSearch.svelte
View file

@ -73,6 +73,7 @@
on:select="{(e) => {
console.log('on:select', e.detail);
}}"
on:paste
let:result
let:index
>

1
tests/MultiSelect.test.svelte
View file

@ -20,6 +20,7 @@
on:blur="{(e) => {
e.detail; // number | FocusEvent
}}"
on:paste
translateWithId="{(id) => {
console.log(id); // "open" | "close"
return id;

1
tests/NumberInput.test.svelte
View file

@ -19,6 +19,7 @@
on:change="{(e) => {
console.log(e.detail); // null | number
}}"
on:paste
/>
<NumberInputSkeleton hideLabel />

1
tests/PasswordInput.test.svelte
View file

@ -9,6 +9,7 @@
type="text"
placeholder="Enter password..."
value="as_lta0890sdfpo__!9901"
on:paste
/>
<PasswordInput hideLabel labelText="Password" placeholder="Enter password..." />

2
tests/Search.test.svelte
View file

@ -2,7 +2,7 @@
import { Search } from "../types";
</script>
<Search />
<Search on:paste />
<Search placeholder="Search catalog..." value="Cloud functions" />

37
tests/TextArea.test.svelte
View file

@ -2,45 +2,18 @@
import { TextArea, TextAreaSkeleton } from "../types";
</script>
<TextArea labelText="App description" placeholder="Enter a description..." />
<TextArea
value=""
hideLabel
light
rows="{10}"
labelText="App description"
helperText="A rich description helps us better recommend related products and services"
placeholder="Enter a description..."
/>
<TextArea
hideLabel
labelText="App description"
placeholder="Enter a description..."
/>
<TextArea
light
labelText="App description"
placeholder="Enter a description..."
/>
<TextArea
rows="{10}"
labelText="App description"
placeholder="Enter a description..."
/>
<TextArea
invalid
invalidText="Only plain text characters are allowed"
labelText="App description"
placeholder="Enter a description..."
/>
<TextArea
disabled
labelText="App description"
placeholder="Enter a description..."
on:paste
/>
<TextAreaSkeleton />
<TextAreaSkeleton hideLabel />

1
tests/TextInput.test.svelte
View file

@ -11,6 +11,7 @@
bind:value
on:input="{(e) => console.log(e.detail)}"
on:change="{(e) => (value = e.detail)}"
on:paste="{(e) => console.log(e)}"
/>
<TextInput

7
tests/TimePicker.test.svelte
View file

@ -2,7 +2,12 @@
import { TimePicker, TimePickerSelect, SelectItem } from "../types";
</script>
<TimePicker spellcheck="{false}" labelText="Cron job" placeholder="hh:mm">
<TimePicker
spellcheck="{false}"
labelText="Cron job"
placeholder="hh:mm"
on:paste
>
<TimePickerSelect value="PM">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />

1
types/ComboBox/ComboBox.svelte.d.ts vendored
View file

@ -165,6 +165,7 @@ export default class ComboBox extends SvelteComponentTyped<
keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"];
clear: WindowEventMap["clear"];
scroll: WindowEventMap["scroll"];
},

1
types/DatePicker/DatePickerInput.svelte.d.ts vendored
View file

@ -107,6 +107,7 @@ export default class DatePickerInput extends SvelteComponentTyped<
keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"];
blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"];
},
{ labelText: {} }
> {}

1
types/MultiSelect/MultiSelect.svelte.d.ts vendored
View file

@ -251,6 +251,7 @@ export default class MultiSelect extends SvelteComponentTyped<
keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"];
paste: DocumentAndElementEventHandlersEventMap["paste"];
},
{ default: { item: MultiSelectItem; index: number } }
> {}

1
types/NumberInput/NumberInput.svelte.d.ts vendored
View file

@ -150,6 +150,7 @@ export default class NumberInput extends SvelteComponentTyped<
mouseleave: WindowEventMap["mouseleave"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"];
},
{ label: {} }
> {

1
types/Search/Search.svelte.d.ts vendored
View file

@ -115,6 +115,7 @@ export default class Search extends SvelteComponentTyped<
blur: WindowEventMap["blur"];
keydown: WindowEventMap["keydown"];
keyup: WindowEventMap["keyup"];
paste: DocumentAndElementEventHandlersEventMap["paste"];
clear: CustomEvent<null>;
},
{ labelText: {} }

1
types/TextArea/TextArea.svelte.d.ts vendored
View file

@ -113,6 +113,7 @@ export default class TextArea extends SvelteComponentTyped<
keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"];
},
{ labelText: {} }
> {}

1
types/TextInput/PasswordInput.svelte.d.ts vendored
View file

@ -143,6 +143,7 @@ export default class PasswordInput extends SvelteComponentTyped<
keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"];
},
{ labelText: {} }
> {}

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

@ -128,6 +128,7 @@ export default class TextInput extends SvelteComponentTyped<
keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"];
},
{ labelText: {} }
> {}

1
types/TimePicker/TimePicker.svelte.d.ts vendored
View file

@ -107,6 +107,7 @@ export default class TimePicker extends SvelteComponentTyped<
keyup: WindowEventMap["keyup"];
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"];
},
{ default: {}; labelText: {} }
> {}

1
types/UIShell/HeaderSearch.svelte.d.ts vendored
View file

@ -56,6 +56,7 @@ export default class HeaderSearch extends SvelteComponentTyped<
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
keydown: WindowEventMap["keydown"];
paste: DocumentAndElementEventHandlersEventMap["paste"];
},
{ default: { result: HeaderSearchResult; index: number } }
> {}

42
yarn.lock
View file

@ -28,6 +28,24 @@
resolved "https://registry.yarnpkg.com/@carbon/telemetry/-/telemetry-0.1.0.tgz#57b331cd5a855b4abbf55457456da8211624d879"
integrity sha512-kNWt0bkgPwGW0i5h7HFuljbKRXPvIhsKbB+1tEURAYLXoJg9iJLF1eGvWN5iVoFCS2zje4GR3OGOsvvKVe7Hlg==
"@jridgewell/resolve-uri@^3.0.3":
version "3.0.7"
resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz#30cd49820a962aff48c8fffc5cd760151fca61fe"
integrity sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==
"@jridgewell/sourcemap-codec@^1.4.10":
version "1.4.13"
resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz#b6461fb0c2964356c469e115f504c95ad97ab88c"
integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
"@jridgewell/trace-mapping@^0.3.9":
version "0.3.13"
resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz#dcfe3e95f224c8fe97a87a5235defec999aa92ea"
integrity sha512-o1xbKhp9qnIAoHJSWd6KlCZfqslL4valSF81H8ImioOAxluWYWOpWkpyktY2vnt4tbrX9XYaxovq6cgowaJp2w==
dependencies:
"@jridgewell/resolve-uri" "^3.0.3"
"@jridgewell/sourcemap-codec" "^1.4.10"
"@nodelib/fs.scandir@2.1.4":
version "2.1.4"
resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69"
@ -1252,11 +1270,6 @@ source-map@^0.6.0, source-map@~0.6.1:
resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
source-map@^0.7.3:
version "0.7.3"
resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
sourcemap-codec@^1.3.0, sourcemap-codec@^1.4.4:
version "1.4.8"
resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
@ -1330,10 +1343,10 @@ supports-color@^9.2.1:
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.2.2.tgz#502acaf82f2b7ee78eb7c83dcac0f89694e5a7bb"
integrity sha512-XC6g/Kgux+rJXmwokjm9ECpD6k/smUoS5LKlUCcsYr4IY3rW0XyAympon2RmxGrlnZURMpg5T18gWDP9CsHXFA==
sveld@^0.17.0:
version "0.17.0"
resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.17.0.tgz#af1f3d24a507d7bc84a356bf7f5c4b599ea444c2"
integrity sha512-OB15S0KyT033fXsZL9hnyuQDaSvpuRQs4CwIRVVnwbLy6IbBQyvNl9LG7Cu7z982qoYY3AMkZ0GzjpTtiMI4OQ==
sveld@^0.17.1:
version "0.17.1"
resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.17.1.tgz#553470075308fb39b89ea2aa62330fde40017fe8"
integrity sha512-zSdqZc+/G+x04fSdZJ40bdnuf/r88Dz9m2BJLI7x1n140Wn6i/GTIB24YiNvoP+t2bXY4VrTfw4TLozcB0Q1jA==
dependencies:
"@rollup/plugin-node-resolve" "^13.2.1"
acorn "^8.7.0"
@ -1346,18 +1359,17 @@ sveld@^0.17.0:
svelte-preprocess "^4.10.6"
typescript "^4.6.3"
svelte-check@^2.4.6:
version "2.4.6"
resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-2.4.6.tgz#dfdb6b4a68d9b2cececdedd4e17d895eb82314b3"
integrity sha512-luzdly7RJhyXucQe8ID/7CqDgXdMrPYXmyZBjCbp+cixzTopZotuWevrB5hWDOnOU19m2cyetigIIa7WDHnCmQ==
svelte-check@^2.7.2:
version "2.7.2"
resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-2.7.2.tgz#0e31e4d3d766ca41f38812cfb1c3257654c93e34"
integrity sha512-TuVX4YtXHbRM8sVuK5Jk+mKWdm3f0d6hvAC6qCTp8yUszGZewpEBCo2V5fRWZCiz+0J4OCiDHOS+DFMxv39rJA==
dependencies:
"@jridgewell/trace-mapping" "^0.3.9"
chokidar "^3.4.1"
fast-glob "^3.2.7"
import-fresh "^3.2.1"
minimist "^1.2.5"
picocolors "^1.0.0"
sade "^1.7.4"
source-map "^0.7.3"
svelte-preprocess "^4.0.0"
typescript "*"