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

Remove clipboard-copy dependency from CodeSnippet, CopyButton (#726)

Browse source 
* chore(deps): remove clipboard-copy

* feat: add copy prop, use navigator.clipboard API

* docs: add clipboard-copy back to docsite for more browser support

* docs(component-api): use outbound link

* docs: add override/prevent copy examples
This commit is contained in:
Eric Liu 2021-07-05 12:12:28 -07:00 • committed by GitHub
commit 921c3e121a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 163 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

1
docs/package.json
View file

@ -13,6 +13,7 @@
"autoprefixer": "^10.2.3",
"carbon-components": "10.38.0",
"carbon-components-svelte": "../",
"clipboard-copy": "^4.0.1",
"mdsvex": "^0.8.8",
"npm-run-all": "^4.1.5",
"postcss": "^8.2.4",

20
docs/src/COMPONENT_API.json
View file

@ -839,6 +839,16 @@
"constant": false,
"reactive": false
},
{
"name": "copy",
"kind": "let",
"description": "Override the default copy behavior of using the navigator.clipboard.writeText API to copy text",
"type": "(code: string) => void",
"value": "async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }",
"isFunction": true,
"constant": false,
"reactive": false
},
{
"name": "expanded",
"kind": "let",
@ -1911,6 +1921,16 @@
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "copy",
"kind": "let",
"description": "Override the default copy behavior of using the navigator.clipboard.writeText API to copy text",
"type": "(text: string) => void",
"value": "async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }",
"isFunction": true,
"constant": false,
"reactive": false
}
],
"slots": [],

12
docs/src/components/ComponentApi.svelte
View file

@ -9,6 +9,7 @@
import {
Link,
OutboundLink,
StructuredList,
StructuredListHead,
StructuredListRow,
@ -43,10 +44,9 @@
<p style="margin-bottom: var(--cds-layout-02)">
Source code:
<Link inline size="lg" href="{source}" target="_blank">
<OutboundLink inline href="{source}">
{component.filePath}
<Launch16 />
</Link>
</OutboundLink>
</p>
<h3 id="props">Props</h3>
@ -94,14 +94,12 @@
Carbon Svelte icon
</TooltipDefinition>
{:else if type.startsWith("HTML")}
<Link
<OutboundLink
href="{mdn_api}{type}"
target="_blank"
style="white-space: nowrap"
>
{type}
<Launch16 />
</Link>
</OutboundLink>
{:else if type in typeMap}
<code>{typeMap[type]}</code>
{:else if type.startsWith("(")}

3
docs/src/components/InlineSnippet.svelte
View file

@ -1,11 +1,12 @@
<script>
export let code = "";
import copy from "clipboard-copy";
import { CodeSnippet } from "carbon-components-svelte";
</script>
<div>
<CodeSnippet code="{code}" type="inline" />
<CodeSnippet code="{code}" type="inline" copy="{(text) => copy(text)}" />
</div>
<style>

3
docs/src/components/Preview.svelte
View file

@ -4,6 +4,7 @@
export let src = "";
export let framed = false;
import copy from "clipboard-copy";
import { CodeSnippet, Button } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
import { url } from "@sveltech/routify";
@ -40,7 +41,7 @@
{/if}
</div>
<div class="code-override">
<CodeSnippet type="multi" code="{codeRaw}">
<CodeSnippet type="multi" code="{codeRaw}" copy="{(text) => copy(text)}">
{@html code}
</CodeSnippet>
</div>

25
docs/src/pages/components/CodeSnippet.svx
View file

@ -1,5 +1,5 @@
<script>
import { CodeSnippet, InlineNotification, Link } from "carbon-components-svelte";
import { CodeSnippet } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
let code = `// helpers.js
@ -27,14 +27,31 @@ let comment = `
`
</script>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">As of version 0.32, the CodeSnippet will copy the provided `code` text when clicking the copy button.</div>
</InlineNotification>
This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.
Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Safari iOS version 13.3 or lower](https://caniuse.com/mdn-api_clipboard_writetext).
You can override the default copy functionality with your own copy text implementation. See [Overriding copy functionality](#overriding-copy-functionality).
### Default (single-line)
<CodeSnippet code="yarn add -D carbon-components-svelte" />
### Overriding copy functionality
To override the default copy behavior, pass a custom function to the `copy` prop.
In this example, we use the open source module [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
<FileSource src="/framed/CodeSnippet/CodeSnippetOverride" />
### Preventing copy functionality
To prevent text from being copied entirely, pass a "noop" function to the `copy` prop.
<CodeSnippet code="yarn add -D carbon-components-svelte" copy={() => {}} />
### Inline
<CodeSnippet type="inline" code="rm -rf node_modules/" />

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

@ -1,11 +1,13 @@
<script>
import { CopyButton, InlineNotification, Link } from "carbon-components-svelte";
import { CopyButton } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">As of version 0.32, this component will copy the provided `code` text when clicking the button.</div>
</InlineNotification>
This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.
Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Safari iOS version 13.3 or lower](https://caniuse.com/mdn-api_clipboard_writetext).
You can override the default copy functionality with your own copy text implementation. See [Overriding copy functionality](#overriding-copy-functionality).
### Default
@ -13,4 +15,18 @@
### Custom feedback text
<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />
<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />
### Overriding copy functionality
To override the default copy behavior, pass a custom function to the `copy` prop.
In this example, we use the open source module [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
<FileSource src="/framed/CopyButton/CopyButtonOverride" />
### Preventing copy functionality
To prevent text from being copied entirely, pass a "noop" function to the `copy` prop.
<CopyButton text="This text should not be copied" copy={() => {}} />

9
docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte Normal file
View file

@ -0,0 +1,9 @@
<script>
import copy from "clipboard-copy";
import { CodeSnippet } from "carbon-components-svelte";
</script>
<CodeSnippet
code="yarn add -D carbon-components-svelte"
copy="{(text) => copy(text)}"
/>

6
docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte Normal file
View file

@ -0,0 +1,6 @@
<script>
import copy from "clipboard-copy";
import { CopyButton } from "carbon-components-svelte";
</script>
<CopyButton text="Carbon svelte" copy="{(text) => copy(text)}" />

11
docs/yarn.lock
View file

@ -837,10 +837,9 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
carbon-components-svelte@../:
version "0.37.0"
version "0.38.2"
dependencies:
carbon-icons-svelte "^10.27.0"
clipboard-copy "3.2.0"
flatpickr "4.6.9"
carbon-components@10.38.0:
@ -947,10 +946,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.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-copy@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-4.0.1.tgz#326ef9726d4ffe72d9a82a7bbe19379de692017d"
integrity sha512-wOlqdqziE/NNTUJsfSgXmBMIrYmfd5V0HCGsR8uAKHcg+h9NENWINcfRjtWGU77wDHC8B8ijV4hMTGYbrKovng==
clipboard@^2.0.0:
version "2.0.6"