		{
		"name": "@soerenmartius/vue3-clipboard",
		"version": "0.0.6",
		"version": "0.0.7",
		"description": "A Vue 3 binding for clipboard.js",
		@@ -5,0 +5,0 @@ "main": "dist/vue3-clipboard.cjs.js",

README.md

		@@ -16,5 +16,22 @@ # vue3-clipboard

		Copy the value of an input.
		### Import the `v-clipboard` directive globally

		`src/main.ts`

		```typescript
		import { createApp } from 'vue'
		import App from './App.vue'
		import VueClipboard from '@soerenmartius/vue3-clipboard'

		createApp(App).use(VueClipboard).mount('#app')

		```

		### Import the `v-clipboard` directive for a specific component

		## Examples

		### Apply the v-clipboard directive to an element

		```typescript
		<template>
		@@ -38,3 +55,3 @@ <input v-model="value" />

		Copy value of an input, and handle events separately.
		### Copy value of an input, and handle events separately.

		@@ -74,2 +91,25 @@ ```typescript

		### Standalone usage of the toClipboard function

		```typescript
		<template>
		<input v-model="value" />
		<button @click="toClipboard(value)">Copy</button>
		</template>

		<script lang="ts">
		import { defineComponent, ref } from 'vue'

		import { toClipboard } from '@soerenmartius/vue3-clipboard'

		export default defineComponent({
		setup() {
		const value = ref('lorem')

		return { value, toClipboard }
		},
		})
		</script>
		```

		## Contributing
		@@ -76,0 +116,0 @@

110

src/index.ts

		@@ -1,108 +0,2 @@
		import { App } from 'vue'
		import ClipboardJS from 'clipboard'

		enum Events {
		SUCCESS = 'success',
		ERROR = 'error',
		}

		export enum ClipboardActions {
		COPY = 'copy',
		CUT = 'cut', // CUT only works on inputs and textareas
		}

		const Config = {
		autoSetContainer: false,
		appendToBody: true,
		}

		export const toClipboard = (
		text: string,
		action = ClipboardActions.COPY,
		): Promise<unknown> => {
		return new Promise((resolve, reject) => {
		const fakeElement = document.createElement('button')
		const clipboard = new ClipboardJS(fakeElement, {
		text: () => text,
		action: () => action,
		})

		clipboard.on(Events.SUCCESS, (e) => {
		clipboard.destroy()
		resolve(e)
		})

		clipboard.on(Events.ERROR, (e) => {
		clipboard.destroy()
		reject(e)
		})

		if (Config.appendToBody) {
		document.body.appendChild(fakeElement)
		}

		fakeElement.click()
		if (Config.appendToBody) {
		document.body.removeChild(fakeElement)
		}
		})
		}

		export const install = (app: App): void => {
		app.directive('clipboard', {
		beforeMount(el, binding) {
		if (binding.arg === Events.SUCCESS) {
		el._vClipboard_success = binding.value
		} else if (binding.arg === Events.ERROR) {
		el._vClipboard_error = binding.value
		} else {
		const clipboard = new ClipboardJS(el, {
		text: () => binding.value,
		action: () => {
		return binding.arg === ClipboardActions.CUT
		? ClipboardActions.CUT
		: ClipboardActions.COPY
		},
		container: Config.autoSetContainer ? el : undefined,
		})
		clipboard.on(Events.SUCCESS, (e) => {
		const callback = el._vClipboard_success
		callback && callback(e)
		})
		clipboard.on(Events.ERROR, (e) => {
		const callback = el._vClipboard_error
		callback && callback(e)
		})
		el._vClipboard = clipboard
		}
		},
		updated(el, binding) {
		if (binding.arg === Events.SUCCESS) {
		el._vClipboard_success = binding.value
		} else if (binding.arg === Events.ERROR) {
		el._vClipboard_error = binding.value
		} else {
		el._vClipboard.text = () => {
		return binding.value
		}
		el._vClipboard.action = () => {
		return binding.arg === ClipboardActions.CUT
		? ClipboardActions.CUT
		: ClipboardActions.COPY
		}
		}
		},
		unmounted(el, binding) {
		if (binding.arg === Events.SUCCESS) {
		delete el._vClipboard_success
		} else if (binding.arg === Events.ERROR) {
		delete el._vClipboard_error
		} else {
		el._vClipboard.destroy()
		delete el._vClipboard
		}
		},
		})
		}

		export default install
		export * from './clipboard'
		export { install as VueClipboard, Config } from './module'

@soerenmartius/vue3-clipboard - npm Package Compare versions

Fixed alerts

Improved metrics

Worsened metrics