fix: add getuniqueidstring utility function [KHCP-14269]

docs/guide/contributing.md

@@ -230,17 +230,17 @@ const id = useId()
 </script>
 ```
 
-Note that `useId` can only be used at the root of the setup function. If you need a random string in template or in any of your component functions (e.g. to give each `key` in a `v-for` loop a unique value), you can use `nanoid`:
+Note that `useId` can only be used at the root of the setup function. If you need a random string in template or in any of your component functions (e.g. to give each `key` in a `v-for` loop a unique value), you can use `getUniqueStringId` helper function:
 
 ```vue
 <template>
-  <div v-for="entry in array" :key="nanoid()">
+  <div v-for="entry in array" :key="getUniqueStringId()">
     <!-- some content -->
   </div>
 </template>
 
 <script setup lang="ts">
-import { nanoid } from 'nanoid'
+import { getUniqueStringId } from '@/utilities'
 </script>
 ```
 

src/components/KMultiselect/KMultiselect.vue

@@ -300,7 +300,7 @@ import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 import { ResizeObserverHelper } from '@/utilities/resizeObserverHelper'
 import { sanitizeInput } from '@/utilities/sanitizeInput'
 import { useEventListener } from '@vueuse/core'
-import { nanoid } from 'nanoid'
+import { getUniqueStringId } from '@/utilities'
 
 // functions used in prop validators
 const getValues = (items: MultiselectItem[]) => {
@@ -835,7 +835,7 @@ const handleAddItem = (): void => {
   const pos = unfilteredItems.value.length + 1
   const item: MultiselectItem = {
     label: sanitizeInput(filterString.value + ''),
-    value: nanoid(),
+    value: getUniqueStringId(),
     key: `${sanitizeInput(filterString.value).replace(/ /gi, '-')?.replace(/[^a-z0-9-_]/gi, '')}-${pos}`,
   }
   emit('item-added', item)

src/components/KSelect/KSelect.vue

@@ -221,7 +221,7 @@ import { ChevronDownIcon, CloseIcon, ProgressIcon } from '@kong/icons'
 import { ResizeObserverHelper } from '@/utilities/resizeObserverHelper'
 import { sanitizeInput } from '@/utilities/sanitizeInput'
 import { useEventListener } from '@vueuse/core'
-import { nanoid } from 'nanoid'
+import { getUniqueStringId } from '@/utilities'
 
 defineOptions({
   inheritAttrs: false,
@@ -506,7 +506,7 @@ const handleAddItem = (): void => {
   const pos = (selectItems.value?.length || 0) + 1
   const item: SelectItem = {
     label: sanitizeInput(filterQuery.value),
-    value: nanoid(),
+    value: getUniqueStringId(),
     key: `${sanitizeInput(filterQuery.value).replace(/ /gi, '-')?.replace(/[^a-z0-9-_]/gi, '')}-${pos}`,
     custom: true,
   }

src/components/KTableView/KTableView.vue

@@ -397,8 +397,7 @@ import KPagination from '@/components/KPagination/KPagination.vue'
 import KDropdown from '@/components/KDropdown/KDropdown.vue'
 import KCheckbox from '@/components/KCheckbox/KCheckbox.vue'
 import BulkActionsDropdown from './BulkActionsDropdown.vue'
-import { getInitialPageSize } from '@/utilities'
-import { nanoid } from 'nanoid'
+import { getInitialPageSize, getUniqueStringId } from '@/utilities'
 
 const props = withDefaults(defineProps<TableViewProps>(), {
   resizeColumns: false,
@@ -1114,7 +1113,7 @@ watch([() => props.data, dataSelectState], (newVals) => {
   // update the rowKeyMap
   newData.forEach((row) => {
     if (!rowKeyMap.value.get(row)) {
-      const uniqueRowKey = getRowKey(row) || nanoid()
+      const uniqueRowKey = getRowKey(row) || getUniqueStringId()
 
       rowKeyMap.value.set(row, `table-${tableId}-row-${uniqueRowKey}`)
     }

src/components/KToaster/ToastManager.ts

@@ -3,7 +3,7 @@ import type { Ref, VNode } from 'vue'
 import type { Toast, ToasterAppearance, ToasterOptions } from '@/types'
 import { ToasterAppearances } from '@/types'
 import KToaster from '@/components/KToaster/KToaster.vue'
-import { nanoid } from 'nanoid'
+import { getUniqueStringId } from '@/utilities'
 
 const toasterContainerId = 'kongponents-toaster-container'
 
@@ -51,7 +51,7 @@ export default class ToastManager {
     // @ts-ignore
     const { key, timeoutMilliseconds, appearance, message, title } = args
 
-    const toastKey: any = key || nanoid()
+    const toastKey: any = key || getUniqueStringId()
     const toastAppearance: ToasterAppearance = (appearance && Object.keys(ToasterAppearances).indexOf(appearance) !== -1) ? appearance : toasterDefaults.appearance
     const timer: number = this.setTimer(key, timeoutMilliseconds || toasterDefaults.timeoutMilliseconds)
     const toasterMessage = typeof args === 'string' ? args : message

src/utilities/getUniqueStringId.ts

@@ -0,0 +1,3 @@
+import { nanoid } from 'nanoid'
+
+export const getUniqueStringId = (): string => nanoid()

src/utilities/index.ts

@@ -3,3 +3,4 @@ export { debounce } from './debounce'
 export { isValidUrl } from './urls'
 export { sanitizeInput } from './sanitizeInput'
 export * from './tableHelpers'
+export * from './getUniqueStringId'