AisCopy

AisCopy creates an icon button that will copy its value prop to the clipboard. It displays a tooltip on hover or focus along with a confirmation when clicked. If no value is provided or clipboard access is not supported, the control will be disabled. AisCopy depends on VueUse's useClipboard.

Examples

Basic

Key:

a97-5ww4-xx3

Copy

<script setup>
  import { ref } from 'vue'
  import { AisCopy } from '@ais-public/ais-components'
  import { AisBox } from '@ais-public/ais-components'
  const key = ref('a97-5ww4-xx3')
</script>

<template>
  <AisBox class="flex gap-2">
    <div class="font-semibold">Key:</div>
    <div>{{key}}</div>
    <AisCopy :value="key" />
  </AisBox>
</template>

Addon

Addon Example

<script setup>
  import { ref } from 'vue'
  import { AisCopy } from '@ais-public/ais-components'
  import { AisAddon } from '@ais-public/ais-components'
  import { AisInputGroup } from '@ais-public/ais-components'
  import { AisInput } from '@ais-public/ais-components'
  import { AisField } from '@ais-public/ais-components'

  const key = ref('')
</script>

<template>
  <AisField label="Addon Example" label-mode="sr-only">
    <AisInputGroup>
      <AisInput
        ref="input"
        v-model="key"
        placeholder="Enter key..."
      />
      <AisAddon>
        <AisCopy :value="key" />
      </AisAddon>
    </AisInputGroup>
  </AisField>
</template>