feat(copy-uuid): add option to completely hide uuid [MA-1908]

packages/core/copy-uuid/README.md

@@ -18,6 +18,7 @@ A Kong UI component for displaying uuid and copying it to clipboard.
   - [`iconColor`](#iconcolor)
   - [`tooltip`](#tooltip)
   - [`successTooltip`](#successtooltip)
+  - [`showUuid`](#showuuid)
 - [Events](#events)
   - [`success`](#success)
   - [`error`](#error)
@@ -205,6 +206,14 @@ Tooltip text to display on hovering over the copy icon. This field is required i
 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.
 
+### `showUuid`
+
+- type: `Boolean`
+- required: `false`
+- default: `true`
+
+If false the UUID will not be shown at all. Useful for the case the host app wants to display something that the uuid resolves to, but still be able to copy the uuid behind the scenes.
+
 ## Events
 
 Success and error events are only emitted if NOT using the `successTooltip` prop.

packages/core/copy-uuid/sandbox/App.vue

@@ -49,6 +49,13 @@
           :uuid="uuid"
         />
       </div>
+      <div>
+        <h3>Don't show uuid</h3>
+        <CopyUuid
+          :show-uuid="false"
+          :uuid="uuid"
+        />
+      </div>
     </main>
   </div>
 </template>

packages/core/copy-uuid/src/components/CopyUuid.vue

@@ -11,7 +11,9 @@
           useMono ? 'mono' : null
         ]"
       >
-        {{ isHidden ? '**********' : uuid }}
+        <span v-if="showUuid">
+          {{ isHidden ? '**********' : uuid }}
+        </span>
       </div>
     </div>
     <component
@@ -82,6 +84,11 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  showUuid: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
 })
 
 const emit = defineEmits<{