refactor(utils): Replace GenRandomId with createElementId

- Use Typescript for correct type annotations
- Fix length problem (the old implemenation sometimes did not yield the
  expected length, e.g. if a "short" random number was generated)¹
- Add unit test for the util

¹ Did some benchmarks: Just the method is now ~10% slower. But the old
method delivered too short values for ~25% of all cases.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

src/components/NcActionButtonGroup/NcActionButtonGroup.vue

@@ -87,7 +87,7 @@ export default {
 
 <script>
 import { defineComponent } from 'vue'
-import GenRandomId from '../../utils/GenRandomId.js'
+import { createElementId } from '../../utils/createElementId.ts'
 import { t } from '../../l10n.js'
 
 /**
@@ -116,7 +116,7 @@ export default defineComponent({
 
 	setup() {
 		return {
-			labelId: `nc-action-button-group-${GenRandomId()}`,
+			labelId: `nc-action-button-group-${createElementId()}`,
 		}
 	},
 

src/components/NcActionCheckbox/NcActionCheckbox.vue

@@ -39,7 +39,7 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 
 <script>
 import ActionGlobalMixin from '../../mixins/actionGlobal.js'
-import GenRandomId from '../../utils/GenRandomId.js'
+import { createElementId } from '../../utils/createElementId.ts'
 
 export default {
 	name: 'NcActionCheckbox',
@@ -59,7 +59,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'action-' + GenRandomId(),
+			default: () => 'action-' + createElementId(),
 			validator: id => id.trim() !== '',
 		},
 

src/components/NcActionInput/NcActionInput.vue

@@ -246,7 +246,7 @@ import NcPasswordField from '../NcPasswordField/index.js'
 import NcSelect from '../NcSelect/index.js'
 import NcTextField from '../NcTextField/index.js'
 import ActionGlobalMixin from '../../mixins/actionGlobal.js'
-import GenRandomId from '../../utils/GenRandomId.js'
+import { createElementId } from '../../utils/createElementId.ts'
 import { t } from '../../l10n.js'
 
 export default {
@@ -270,15 +270,15 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'action-' + GenRandomId(),
+			default: () => 'action-' + createElementId(),
 			validator: id => id.trim() !== '',
 		},
 		/**
 		 * id attribute of the text input element
 		 */
 		inputId: {
 			type: String,
-			default: () => 'action-input-' + GenRandomId(),
+			default: () => 'action-input-' + createElementId(),
 			validator: id => id.trim() !== '',
 		},
 		/**

src/components/NcActionRadio/NcActionRadio.vue

@@ -68,7 +68,7 @@ So that only one of each name set can be selected at the same time.
 <script>
 import { useModel } from 'vue'
 import ActionGlobalMixin from '../../mixins/actionGlobal.js'
-import GenRandomId from '../../utils/GenRandomId.js'
+import { createElementId } from '../../utils/createElementId.ts'
 
 export default {
 	name: 'NcActionRadio',
@@ -88,7 +88,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'action-' + GenRandomId(),
+			default: () => 'action-' + createElementId(),
 			validator: id => id.trim() !== '',
 		},
 

src/components/NcActionTextEditable/NcActionTextEditable.vue

@@ -84,7 +84,7 @@ export default {
 
 <script>
 import ActionTextMixin from '../../mixins/actionText.js'
-import GenRandomId from '../../utils/GenRandomId.js'
+import { createElementId } from '../../utils/createElementId.ts'
 
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
@@ -107,7 +107,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'action-' + GenRandomId(),
+			default: () => 'action-' + createElementId(),
 			validator: id => id.trim() !== '',
 		},
 		/**
@@ -149,7 +149,7 @@ export default {
 		},
 
 		computedId() {
-			return GenRandomId()
+			return createElementId()
 		},
 	},
 

src/components/NcActions/NcActions.vue

@@ -925,7 +925,7 @@ import { t } from '../../l10n.js'
 
 import NcButton from '../NcButton/index.ts'
 import NcPopover from '../NcPopover/index.js'
-import GenRandomId from '../../utils/GenRandomId.js'
+import { createElementId } from '../../utils/createElementId.ts'
 import isSlotPopulated from '../../utils/isSlotPopulated.ts'
 
 import IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
@@ -1112,7 +1112,7 @@ export default {
 	],
 
 	setup(props) {
-		const randomId = `menu-${GenRandomId()}`
+		const randomId = createElementId()
 		const triggerRandomId = `trigger-${randomId}`
 
 		const triggerButton = ref()

src/components/NcAppNavigationItem/NcAppNavigationItem.vue

@@ -399,7 +399,7 @@ import NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue
 import { useIsMobile } from '../../composables/useIsMobile/index.js'
 import NcInputConfirmCancel from './NcInputConfirmCancel.vue'
 import { t } from '../../l10n.js'
-import GenRandomId from '../../utils/GenRandomId.js'
+import { createElementId } from '../../utils/createElementId.ts'
 
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Undo from 'vue-material-design-icons/Undo.vue'
@@ -449,7 +449,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'app-navigation-item-' + GenRandomId(),
+			default: () => 'app-navigation-item-' + createElementId(),
 			validator: id => id.trim() !== '',
 		},
 

src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue

@@ -7,8 +7,8 @@
 import type { Slot } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 import { computed, ref, useTemplateRef } from 'vue'
+import { createElementId } from '../../utils/createElementId.js'
 import { t } from '../../l10n.js'
-import GenRandomId from '../../utils/GenRandomId.js'
 
 import IconCog from 'vue-material-design-icons/Cog.vue'
 import NcButton from '../NcButton/NcButton.vue'
@@ -37,7 +37,7 @@ defineSlots<{
 	default: Slot
 }>()
 
-const contentId = GenRandomId()
+const contentId = createElementId()
 /**
  * Are the settings open
  */

src/components/NcAppSidebar/NcAppSidebar.vue

@@ -712,8 +712,8 @@ import NcEmptyContent from '../NcEmptyContent/index.js'
 import Focus from '../../directives/Focus/index.js'
 import Linkify from '../../directives/Linkify/index.js'
 import { useIsSmallMobile } from '../../composables/useIsMobile/index.js'
-import GenRandomId from '../../utils/GenRandomId.js'
-import { getTrapStack } from '../../utils/focusTrap.ts'
+import { getTrapStack } from '../../utils/focusTrap.js'
+import { createElementId } from '../../utils/createElementId.ts'
 import { t } from '../../l10n.js'
 import isSlotPopulated from '../../utils/isSlotPopulated.ts'
 
@@ -924,7 +924,7 @@ export default {
 
 	setup() {
 		return {
-			uid: GenRandomId(),
+			uid: createElementId(),
 			isMobile: useIsSmallMobile(),
 		}
 	},

src/components/NcBreadcrumb/NcBreadcrumb.vue

@@ -61,7 +61,7 @@ Renders a button element when given no redirection props, otherwise, renders <a/
 
 <script>
 import NcActions from '../NcActions/index.js'
-import GenRandomId from '../../utils/GenRandomId.js'
+import { createElementId } from '../../utils/createElementId.ts'
 import NcButton from '../NcButton/NcButton.vue'
 
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
@@ -172,7 +172,7 @@ export default {
 			 * The unique id of the breadcrumb. Necessary to append the
 			 * Actions menu to the correct crumb.
 			 */
-			crumbId: `crumb-id-${GenRandomId()}`,
+			crumbId: `crumb-id-${createElementId()}`,
 		}
 	},
 	computed: {