fixup! refactor(utils): Replace GenRandomId with getRandomId

src/globals.d.ts

@@ -4,9 +4,11 @@
  */
 
 declare const PRODUCTION: boolean
-
 declare const SCOPE_VERSION: string
 
+declare const appName: string
+declare const appVersion: string
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare const TRANSLATIONS: { locale: string, translations: any }[]
 

src/utils/getElementId.spec.ts

@@ -0,0 +1,32 @@
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+import { getElementId } from './getElementId.ts'
+
+const vue = vi.hoisted(() => ({ useId: vi.fn() }))
+vi.mock('vue', () => vue)
+
+describe('getElementId', () => {
+
+	beforeEach(() => vue.useId.mockReset())
+
+	test('getting an id', () => {
+		vue.useId.mockImplementationOnce(() => 'vueid')
+		const id = getElementId()
+		expect(id).toEqual('nextcloud-vue-vueid')
+	})
+
+	test('getting multiple ids', () => {
+		let index = 0
+		vue.useId.mockImplementation(() => index++)
+
+		const id = getElementId()
+		const id2 = getElementId()
+		expect(id).not.toEqual(id2)
+		expect(vue.useId).toBeCalledTimes(2)
+	})
+
+})

src/utils/getElementId.ts

@@ -0,0 +1,15 @@
+/**
+ * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { useId } from 'vue'
+
+const sanitizedAppName = String(appName).replaceAll(/[^a-z0-9-_]/gi, '') || 'nc'
+
+/**
+ * Get the next element id for use with HTML / CSS.
+ * We can not be sure that the app has a prefix setup so we prefix ourself
+ */
+export function getElementId() {
+	return `${sanitizedAppName}-${useId()}`
+}