diff --git a/docs/guide/contributing.md b/docs/guide/contributing.md index 711e67c238..4fdcfab16a 100644 --- a/docs/guide/contributing.md +++ b/docs/guide/contributing.md @@ -230,17 +230,17 @@ const id = useId() ``` -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 ``` diff --git a/src/components/KMultiselect/KMultiselect.vue b/src/components/KMultiselect/KMultiselect.vue index 2ad311aa58..46d8c109e2 100644 --- a/src/components/KMultiselect/KMultiselect.vue +++ b/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) diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue index eb8440f394..fe8e9759d8 100644 --- a/src/components/KSelect/KSelect.vue +++ b/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, } diff --git a/src/components/KTableView/KTableView.vue b/src/components/KTableView/KTableView.vue index bf1b4718bf..93a80d4791 100644 --- a/src/components/KTableView/KTableView.vue +++ b/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(), { 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}`) } diff --git a/src/components/KToaster/ToastManager.ts b/src/components/KToaster/ToastManager.ts index ce2d647254..e54a1ab90b 100644 --- a/src/components/KToaster/ToastManager.ts +++ b/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 diff --git a/src/utilities/getUniqueStringId.ts b/src/utilities/getUniqueStringId.ts new file mode 100644 index 0000000000..5303fde40e --- /dev/null +++ b/src/utilities/getUniqueStringId.ts @@ -0,0 +1,3 @@ +import { nanoid } from 'nanoid' + +export const getUniqueStringId = (): string => nanoid() diff --git a/src/utilities/index.ts b/src/utilities/index.ts index 208293db99..c6785eda29 100644 --- a/src/utilities/index.ts +++ b/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'