mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 19:46:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(copy-button): add copy functionality

Browse source
This commit is contained in:
Eric Y Liu 2021-04-01 14:36:52 -07:00
commit ce53706e17
8 changed files with 50 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

1
docs/package.json
View file

@ -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",

12
docs/src/COMPONENT_API.json
View file

@ -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" },

8
docs/src/pages/components/CopyButton.svx
View file

@ -4,13 +4,13 @@
</script>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
<div class="body-short-01">As of version 0.32, this component will copy the provided `code` text when clicking the button.</div>
</InlineNotification>
### Default
<CopyButton on:click />
<CopyButton text="Carbon svelte" />
### Custom feedback
### Custom feedback text
<CopyButton on:click feedback="Copied to clipboard" />
<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />

8
docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte
View file

@ -1,8 +0,0 @@
<script>
export let code = "yarn add -D carbon-component-svelte";
import { CodeSnippet } from "carbon-components-svelte";
import copy from "clipboard-copy";
</script>
<CodeSnippet on:click="{() => copy(code)}" code="{code}" />

9
docs/yarn.lock
View file

@ -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"