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

feat: add copy prop, use navigator.clipboard API

Browse source
This commit is contained in:
Eric Y Liu 2021-07-05 10:27:02 -07:00
commit ad5a2db17e
8 changed files with 91 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

48
COMPONENT_INDEX.md
View file

@ -509,25 +509,26 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
| showMoreLess | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
| type | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
| code | <code>let</code> | No | <code>string</code> | -- | Set the code snippet text<br />Alternatively, use the default slot (e.g., &lt;CodeSnippet&gt;{`code`}&lt;/CodeSnippet&gt;)<br />You must use the `code` prop to copy the code |
| hideCopyButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant<br />Only applies to the "single", "multi" types |
| wrapText | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text<br />Note that `type` must be "multi" |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| copyButtonDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the copy button icon |
| copyLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label of the copy button |
| feedback | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
| feedbackTimeout | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
| showLessText | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" |
| showMoreText | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br />`type` must be "multi" |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
| showMoreLess | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
| type | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
| code | <code>let</code> | No | <code>string</code> | -- | Set the code snippet text<br />Alternatively, use the default slot (e.g., &lt;CodeSnippet&gt;{`code`}&lt;/CodeSnippet&gt;)<br />You must use the `code` prop to copy the code |
| copy | <code>let</code> | No | <code>(code: string) => void</code> | <code>async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }</code> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
| hideCopyButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant<br />Only applies to the "single", "multi" types |
| wrapText | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text<br />Note that `type` must be "multi" |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| copyButtonDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the copy button icon |
| copyLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label of the copy button |
| feedback | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
| feedbackTimeout | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
| showLessText | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" |
| showMoreText | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br />`type` must be "multi" |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
### Slots
@ -879,10 +880,11 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :------------------ | -------------------------------- | ------------------------------------------------ |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Copy to clipboard"</code> | Set the title and ARIA label for the copy button |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text to copy |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :---------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Copy to clipboard"</code> | Set the title and ARIA label for the copy button |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text to copy |
| copy | <code>let</code> | No | <code>(text: string) => void</code> | <code>async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }</code> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
### Slots

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": [],

13
src/CodeSnippet/CodeSnippet.svelte
View file

@ -13,6 +13,18 @@
*/
export let code = undefined;
/**
* Override the default copy behavior of using the navigator.clipboard.writeText API to copy text
* @type {(code: string) => void}
*/
export let copy = async (code) => {
try {
await navigator.clipboard.writeText(code);
} catch (e) {
console.log(e);
}
};
/** Set to `true` to expand a multi-line code snippet (type="multi") */
export let expanded = false;
@ -77,7 +89,6 @@
export let ref = null;
import { createEventDispatcher, tick } from "svelte";
import copy from "clipboard-copy";
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
import Button from "../Button/Button.svelte";
import Copy from "../Copy/Copy.svelte";

13
src/CopyButton/CopyButton.svelte
View file

@ -10,9 +10,20 @@
*/
export let text = undefined;
/**
* Override the default copy behavior of using the navigator.clipboard.writeText API to copy text
* @type {(text: string) => void}
*/
export let copy = async (text) => {
try {
await navigator.clipboard.writeText(text);
} catch (e) {
console.log(e);
}
};
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();

4
tests/CodeSnippet.test.svelte
View file

@ -35,7 +35,9 @@ export function subtract(a: number, b: number) {
hideCloseButton
/>
<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
<CodeSnippet copy="{(text) => {}}"
>yarn add -D carbon-components-svelte</CodeSnippet
>
<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>

19
tests/CopyButton.test.svelte
View file

@ -1,16 +1,11 @@
<script lang="ts">
import { CopyButton, InlineNotification } from "../types";
import { CopyButton } from "../types";
</script>
<InlineNotification
svx-ignore
lowContrast
title="Note:"
subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic."
kind="info"
hideCloseButton
<CopyButton
text="text"
on:click
on:copy
copy="{(text) => {}}"
feedback="Copied to clipboard"
/>
<CopyButton on:click />
<CopyButton on:click feedback="Copied to clipboard" />

6
types/CodeSnippet/CodeSnippet.d.ts vendored
View file

@ -15,6 +15,12 @@ export interface CodeSnippetProps {
*/
code?: string;
/**
* Override the default copy behavior of using the navigator.clipboard.writeText API to copy text
* @default async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }
*/
copy?: (code: string) => void;
/**
* Set to `true` to expand a multi-line code snippet (type="multi")
* @default false

6
types/CopyButton/CopyButton.d.ts vendored
View file

@ -13,6 +13,12 @@ export interface CopyButtonProps extends CopyProps {
* Specify the text to copy
*/
text?: string;
/**
* Override the default copy behavior of using the navigator.clipboard.writeText API to copy text
* @default async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }
*/
copy?: (text: string) => void;
}
export default class CopyButton extends SvelteComponentTyped<