@kong-ui-public/copy-uuid

A Kong UI component for displaying uuid and copying it to clipboard.

• Features
• Requirements
• Usage
  • Install
  • Register
  • Initialize
• TypeScript interfaces
• Props
  • uuid
  • truncated
  • useMono
  • format
  • notify
  • iconColor
  • tooltip
  • successTooltip
• Events
  • success
  • error

Features

• Configurable uuid appearances
• Ability to copy the uuid to clipboard with one click
• Customizable notify method through provide or prop

Requirements

• vue must be initialized in the host application
• @kong/kongponents must be available as a dependency in the host application, along with the package's style imports. See here for instructions on installing Kongponents. Specifically, the following Kongponents must be available:
  • KClipboardProvider
  • KIcon
• @kong-ui-public/i18n must be available as a dependency in the host application.

Usage

Install

Install the component in your host application

1yarn add @kong-ui-public/copy-uuid

Register

You can register copy-uuid globally or locally.

1// Global registration
2import { createApp } from 'vue'
3import CopyUuid, { CopyUuidNotifyParam } from '@kong-ui-public/copy-uuid'
4import '@kong-ui-public/copy-uuid/dist/style.css'
5
6const app = createApp(App)
7
8app.use(CopyUuid)

1<!-- Local registration -->
2<template>
3  <copy-uuid />
4</template>
5
6<script setup lang="ts">
7import { CopyUuid } from '@kong-ui-public/copy-uuid'
8</script>

Initialize

You can set up an optional global notify method, and every copy-uuid component instance will use this method as a default.

If you're using copy-uuid as a vue plugin:

1// app entry file
2import { createApp } from 'vue'
3import CopyUuid, { CopyUuidNotifyParam } from '@kong-ui-public/copy-uuid'
4import '@kong-ui-public/copy-uuid/dist/style.css'
5
6const app = createApp(App)
7
8app.use(CopyUuid, {
9  notify: (props: CopyUuidNotifyParam) => {
10    // Notify your end users
11  }
12})

If you prefer using copy-uuid as a component:

1// app entry file
2import { createApp } from 'vue'
3import { COPY_UUID_NOTIFY_KEY, CopyUuidNotifyParam } from '@kong-ui-public/copy-uuid'
4
5const app = createApp(App)
6
7app.provide(COPY_UUID_NOTIFY_KEY, (props: CopyUuidNotifyParam) => {
8  // Notify your end users
9})

You could also set up a notify method for each copy-uuid component instance through its prop. If the notify prop is defined, it'll take precedence over the global notify method:

1<template>
2  <copy-uuid
3    <!-- other props -->
4    :notify="notify"
5  />
6</template>
7
8<script setup lang="ts">
9  import { CopyUuidNotifyParam } from '@kong-ui-public/copy-uuid'
10
11  const notify = (param: CopyUuidNotifyParam) => {
12    // Notify your end users
13  }
14</script>

TypeScript interfaces

TypeScript interfaces are available here and can be directly imported into your host application. The following interfaces are available for import:

1import type { CopyUuidNotifyParam, CopyUuidInstallOptions } from '@kong-ui-public/copy-uuid'

Props

uuid

• type: String
• required: true

The UUID string. When the copy button is clicked, this string will be copied to clipboard.

truncated

• type: Boolean
• required: false
• default: true

An indicator of whether a long UUID is truncated. When true, the UUID will be truncated to 8 characters. When false, the UUID will be displayed in full.

useMono

• type: Boolean
• required: false
• default: true

An indicator of whether a .mono class is added to the UUID string. Make sure to import the Kongponents style file in your host application for this class to take effect.

format

• type: String as PropType<'uuid' | 'hidden' | 'redacted' | 'deleted'>
• required: false
• default: uuid

Determines the display format of the UUID string. The component can take the following format values:

• uuid: displays regular uuid
• hidden: displays just a copy button without text
• redacted: displays *****
• deleted: displays *<first-5-chars-of-uuid>

notify

• type: Function as PropType<(param: CopyUuidNotifyParam) => void>
• required: false
• default: undefined

A function that will be called when the copy button is clicked. The function will receive a CopyUuidNotifyParam object as its only argument. The CopyUuidNotifyParam object has the following properties:

• type: success | error, indicating whether the copy operation is successful
• message: string, the message to be displayed to the end user

iconColor

• type: String
• required: false
• default: 'rgba(0, 0, 0, 0.45)'

The color of the copy icon.

tooltip

• type: String
• required: false
• default: ''

Tooltip text to display on hovering over the copy icon. This field is required if successTooltip has a value.

successTooltip

• type: String
• required: false
• default: ''

Note: The tooltip prop is required to have a value in order to use this prop. When using this prop the @success and @error events will not be fired, as the tooltip text will be updated instead. Tooltip text to display on successful copy.

Events

Success and error events are only emitted if NOT using the successTooltip prop.

success

A success event is emitted when the UUID is successfully copied to clipboard. The event payload is the UUID.

error

An error event is emitted when an error occurs when trying to copy the UUID. The event payload is the UUID.