diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index ac575641..ff32430d 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -870,6 +870,7 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :------------------ | -------------------------------- | ------------------------------------------------ | | iconDescription | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button | +| text | let | No | string | -- | Specify the text to copy | ### Slots @@ -877,10 +878,11 @@ None. ### Events -| Event name | Type | Detail | -| :----------- | :-------- | :----- | -| click | forwarded | -- | -| animationend | forwarded | -- | +| Event name | Type | Detail | +| :----------- | :--------- | :----- | +| click | forwarded | -- | +| animationend | forwarded | -- | +| copy | dispatched | -- | ## `DataTable` diff --git a/docs/package.json b/docs/package.json index 38754d06..92d5c242 100644 --- a/docs/package.json +++ b/docs/package.json @@ -13,7 +13,6 @@ "autoprefixer": "^10.2.3", "carbon-components": "10.32.0-rc.0", "carbon-components-svelte": "../", - "clipboard-copy": "^3.1.0", "mdsvex": "^0.8.8", "npm-run-all": "^4.1.5", "postcss": "^8.2.4", diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 73399002..78f67b05 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -1862,12 +1862,22 @@ "isFunction": false, "constant": false, "reactive": false + }, + { + "name": "text", + "kind": "let", + "description": "Specify the text to copy", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false } ], "slots": [], "events": [ { "type": "forwarded", "name": "click", "element": "Copy" }, - { "type": "forwarded", "name": "animationend", "element": "Copy" } + { "type": "forwarded", "name": "animationend", "element": "Copy" }, + { "type": "dispatched", "name": "copy" } ], "typedefs": [], "rest_props": { "type": "InlineComponent", "name": "Copy" }, diff --git a/docs/src/pages/components/CopyButton.svx b/docs/src/pages/components/CopyButton.svx index a04a332a..61eea74d 100644 --- a/docs/src/pages/components/CopyButton.svx +++ b/docs/src/pages/components/CopyButton.svx @@ -4,13 +4,13 @@ -
By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the CopyableCodeSnippet recipe for an example.
+
As of version 0.32, this component will copy the provided `code` text when clicking the button.
### Default - + -### Custom feedback +### Custom feedback text - \ No newline at end of file + \ No newline at end of file diff --git a/docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte b/docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte deleted file mode 100644 index a411d51c..00000000 --- a/docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte +++ /dev/null @@ -1,8 +0,0 @@ - - - diff --git a/docs/yarn.lock b/docs/yarn.lock index 54fdf82e..516bcc8e 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -840,6 +840,7 @@ carbon-components-svelte@../: version "0.31.1" dependencies: carbon-icons-svelte "^10.27.0" + clipboard-copy "3.2.0" flatpickr "4.6.9" carbon-components@10.32.0-rc.0: @@ -946,10 +947,10 @@ cli-spinners@^2.2.0: resolved "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.4.0.tgz#c6256db216b878cfba4720e719cec7cf72685d7f" integrity sha512-sJAofoarcm76ZGpuooaO0eDy8saEy+YoZBLjC4h8srt4jeBnkYeOgqxgsJQTpyt2LjI5PTfLJHSL+41Yu4fEJA== -clipboard-copy@^3.1.0: - version "3.1.0" - resolved "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-3.1.0.tgz#4c59030a43d4988990564a664baeafba99f78ca4" - integrity sha512-Xsu1NddBXB89IUauda5BIq3Zq73UWkjkaQlPQbLNvNsd5WBMnTWPNKYR6HGaySOxGYZ+BKxP2E9X4ElnI3yiPA== +clipboard-copy@3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.2.0.tgz#3c5b8651d3512dcfad295d77a9eb09e7fac8d5fb" + integrity sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ== clipboard@^2.0.0: version "2.0.6" diff --git a/src/CopyButton/CopyButton.svelte b/src/CopyButton/CopyButton.svelte index 546967b1..c269c63d 100644 --- a/src/CopyButton/CopyButton.svelte +++ b/src/CopyButton/CopyButton.svelte @@ -4,8 +4,18 @@ /** Set the title and ARIA label for the copy button */ export let iconDescription = "Copy to clipboard"; - import { Copy } from "../Copy"; - import Copy16 from "carbon-icons-svelte/lib/Copy16"; + /** + * Specify the text to copy + * @type {string} + */ + export let text = undefined; + + import Copy from "../Copy/Copy.svelte"; + import Copy16 from "carbon-icons-svelte/lib/Copy16/Copy16.svelte"; + import copy from "clipboard-copy"; + import { createEventDispatcher } from "svelte"; + + const dispatch = createEventDispatcher(); diff --git a/types/CopyButton/CopyButton.d.ts b/types/CopyButton/CopyButton.d.ts index 79154cca..fed3e37a 100644 --- a/types/CopyButton/CopyButton.d.ts +++ b/types/CopyButton/CopyButton.d.ts @@ -8,6 +8,11 @@ export interface CopyButtonProps extends CopyProps { * @default "Copy to clipboard" */ iconDescription?: string; + + /** + * Specify the text to copy + */ + text?: string; } export default class CopyButton extends SvelteComponentTyped< @@ -15,6 +20,7 @@ export default class CopyButton extends SvelteComponentTyped< { click: WindowEventMap["click"]; animationend: WindowEventMap["animationend"]; + copy: CustomEvent; }, {} > {}