Skip to content

Commit

Permalink
Rename from uui-copy to more explicit uui-text-copy-button
Browse files Browse the repository at this point in the history
  • Loading branch information
warrenbuckley committed Jan 10, 2025
1 parent bf86ac4 commit 8e2bb32
Show file tree
Hide file tree
Showing 14 changed files with 134 additions and 118 deletions.
24 changes: 12 additions & 12 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

31 changes: 0 additions & 31 deletions packages/uui-copy/README.md

This file was deleted.

18 changes: 0 additions & 18 deletions packages/uui-copy/lib/UUICopyEvent.ts

This file was deleted.

1 change: 0 additions & 1 deletion packages/uui-copy/lib/index.ts

This file was deleted.

32 changes: 32 additions & 0 deletions packages/uui-text-copy-button/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
# uuui-text-copy-button

![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-text-copy-button?logoColor=%231B264F)

Umbraco style copy component.

## Installation

### ES imports

```zsh
npm i @umbraco-ui/uui-text-copy-button
```

Import the registration of `<uui-text-copy-button>` via:

```javascript
import '@umbraco-ui/uui-text-copy-button';
```

When looking to leverage the `UUITextCopyButtonElement` base class as a type and/or for extension purposes, do so via:

```javascript
import { UUITextCopyButtonElement } from '@umbraco-ui/uui-text-copy-button';
```

## Usage

```html
<uui-text-copy-button
value="I am copied to the clipboard"></uui-text-copy-button>
```
21 changes: 21 additions & 0 deletions packages/uui-text-copy-button/lib/UUITextCopyButtonEvent.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
import { UUITextCopyButtonElement } from './uui-text-copy-button.element';

interface UUITextCopyButtonEventInit extends EventInit {
detail?: { text: string };
}

export class UUITextCopyButtonEvent extends UUIEvent<
{ text: string },
UUITextCopyButtonElement
> {
public static readonly COPIED: string = 'copied';
public static readonly COPYING: string = 'copying';

constructor(evName: string, eventInit: UUITextCopyButtonEventInit = {}) {
super(evName, {
...{ bubbles: true },
...eventInit,
});
}
}
2 changes: 2 additions & 0 deletions packages/uui-text-copy-button/lib/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './uui-text-copy-button.element';
export * from './UUITextCopyButtonEvent';
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { UUIButtonElement } from '@umbraco-ui/uui-button/lib';
import { UUICopyEvent } from './UUICopyEvent';
import { UUITextCopyButtonEvent } from './UUITextCopyButtonEvent';
import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';

/**
* @summary A button to trigger text content to be copied to the clipboard
* @element uui-copy
* @element uui-text-copy-button
* @dependency uui-button
* @dependency uui-icon
* @fires {UUICopyEvent} copying - Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard
* @fires {UUICopyEvent} copied - Fires when the content is copied to the clipboard
* @slot - Use to replace the default content of 'Copy' and the copy icon
*/
@defineElement('uui-copy')
export class UUICopyElement extends LabelMixin('', LitElement) {
@defineElement('uui-text-copy-button')
export class UUITextCopyButtonElement extends LabelMixin('', LitElement) {
/**
* Set a string you wish to copy to the clipboard
* @type {string}
Expand Down Expand Up @@ -120,9 +120,12 @@ export class UUICopyElement extends LabelMixin('', LitElement) {
}
}

const beforeCopyEv = new UUICopyEvent(UUICopyEvent.COPYING, {
detail: { text: this.#valueToCopy },
});
const beforeCopyEv = new UUITextCopyButtonEvent(
UUITextCopyButtonEvent.COPYING,
{
detail: { text: this.#valueToCopy },
},
);
this.dispatchEvent(beforeCopyEv);

if (beforeCopyEv.detail.text != null) {
Expand All @@ -133,7 +136,7 @@ export class UUICopyElement extends LabelMixin('', LitElement) {
.writeText(this.#valueToCopy)
.then(() => {
this.dispatchEvent(
new UUICopyEvent(UUICopyEvent.COPIED, {
new UUITextCopyButtonEvent(UUITextCopyButtonEvent.COPIED, {
detail: { text: this.#valueToCopy },
}),
);
Expand Down Expand Up @@ -170,6 +173,6 @@ export class UUICopyElement extends LabelMixin('', LitElement) {

declare global {
interface HTMLElementTagNameMap {
'uui-copy': UUICopyElement;
'uui-text-copy-button': UUITextCopyButtonElement;
}
}
Loading

0 comments on commit 8e2bb32

Please sign in to comment.