refactor: no need to prefix or suffix id generated by createElementId

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

Author: susnux

src/components/NcActionButtonGroup/NcActionButtonGroup.vue

@@ -116,7 +116,7 @@ export default defineComponent({
 
 	setup() {
 		return {
-			labelId: `nc-action-button-group-${createElementId()}`,
+			labelId: createElementId(),
 		}
 	},
 

src/components/NcActionRadio/NcActionRadio.vue

@@ -67,8 +67,8 @@ 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 { createElementId } from '../../utils/createElementId.ts'
+import ActionGlobalMixin from '../../mixins/actionGlobal.js'
 
 export default {
 	name: 'NcActionRadio',
@@ -88,7 +88,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'action-' + createElementId(),
+			default: () => createElementId(),
 			validator: id => id.trim() !== '',
 		},
 

src/components/NcAppNavigationItem/NcAppNavigationItem.vue

@@ -396,10 +396,10 @@ import NcActionButton from '../NcActionButton/index.js'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
 import NcVNodes from '../NcVNodes/index.js'
 import NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'
-import { useIsMobile } from '../../composables/useIsMobile/index.js'
 import NcInputConfirmCancel from './NcInputConfirmCancel.vue'
-import { t } from '../../l10n.js'
+import { useIsMobile } from '../../composables/useIsMobile/index.js'
 import { createElementId } from '../../utils/createElementId.ts'
+import { t } from '../../l10n.js'
 
 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-' + createElementId(),
+			default: () => createElementId(),
 			validator: id => id.trim() !== '',
 		},
 

src/components/NcBreadcrumb/NcBreadcrumb.vue

@@ -60,8 +60,8 @@ Renders a button element when given no redirection props, otherwise, renders <a/
 </template>
 
 <script>
-import NcActions from '../NcActions/index.js'
 import { createElementId } from '../../utils/createElementId.ts'
+import NcActions from '../NcActions/index.js'
 import NcButton from '../NcButton/NcButton.vue'
 
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
@@ -162,19 +162,26 @@ export default {
 		'dropped',
 		'update:open',
 	],
+
+	setup() {
+		return {
+			/**
+			 * The unique id of the breadcrumb. Necessary to append the
+			 * Actions menu to the correct crumb.
+			 */
+			 crumbId: createElementId(),
+		}
+	},
+
 	data() {
 		return {
 			/**
 			 * Variable to track if we hover over the breadcrumb
 			 */
 			hovering: false,
-			/**
-			 * The unique id of the breadcrumb. Necessary to append the
-			 * Actions menu to the correct crumb.
-			 */
-			crumbId: `crumb-id-${createElementId()}`,
 		}
 	},
+
 	computed: {
 		/**
 		 * The attributes to pass to `router-link` or `a`

src/components/NcDateTimePicker/NcDateTimePicker.vue

@@ -280,7 +280,7 @@ export default ScopeComponent({
 
 	setup() {
 		return {
-			timezoneDialogHeaderId: `timezone-dialog-header-${createElementId()}`,
+			timezoneDialogHeaderId: createElementId(),
 		}
 	},
 

src/components/NcRichContenteditable/NcRichContenteditable.vue

@@ -290,11 +290,11 @@ import richEditor from '../../mixins/richEditor/index.js'
 import Tooltip from '../../directives/Tooltip/index.js'
 import { emojiSearch, emojiAddRecent } from '../../functions/emoji/index.ts'
 import { searchProvider, getLinkWithPicker } from '../NcRichText/index.js'
+import { createElementId } from '../../utils/createElementId.ts'
 
 import Tribute from 'tributejs/dist/tribute.esm.js'
 import debounce from 'debounce'
 import stringLength from 'string-length'
-import { createElementId } from '../../utils/createElementId.ts'
 
 /**
  * Populate the list of text smiles we want to offer via Tribute.
@@ -324,7 +324,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => createElementId(7),
+			default: () => createElementId(),
 		},
 
 		/**
@@ -425,11 +425,11 @@ export default {
 	],
 
 	setup() {
-		const uid = createElementId()
 		return {
 			// Constants
-			labelId: `nc-rich-contenteditable-${uid}-label`,
-			tributeId: `nc-rich-contenteditable-${uid}-tribute`,
+			labelId: createElementId(),
+			tributeId: createElementId(),
+
 			/**
 			 * Non-reactive property to store Tribute instance
 			 *
@@ -559,7 +559,7 @@ export default {
 		},
 
 		initializeTribute() {
-			const renderMenuItem = (content) => `<div id="nc-rich-contenteditable-tribute-item-${createElementId()}" class="${this.$style['tribute-item']}" role="option">${content}</div>`
+			const renderMenuItem = (content) => `<div id="${createElementId()}" class="${this.$style['tribute-item']}" role="option">${content}</div>`
 
 			const tributesCollection = []
 			tributesCollection.push({

src/components/NcSelect/NcSelect.vue

@@ -574,6 +574,7 @@ import {
 	shift,
 } from '@floating-ui/dom'
 import { h, warn } from 'vue'
+import { createElementId } from '../../utils/createElementId.ts'
 import { t } from '../../l10n.js'
 
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
@@ -583,8 +584,6 @@ import NcEllipsisedOption from '../NcEllipsisedOption/index.js'
 import NcListItemIcon from '../NcListItemIcon/index.js'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
 
-import { createElementId } from '../../utils/createElementId.ts'
-
 export default {
 	name: 'NcSelect',
 
@@ -758,7 +757,7 @@ export default {
 		 */
 		inputId: {
 			type: String,
-			default: () => `select-input-${createElementId()}`,
+			default: () => createElementId(),
 		},
 
 		/**

src/components/NcTimezonePicker/NcTimezonePicker.vue

@@ -43,10 +43,10 @@ import {
 	getReadableTimezoneName,
 	getSortedTimezoneList,
 } from './timezone.js'
-import getTimezoneManager from './timezoneDataProviderService.js'
 import { createElementId } from '../../utils/createElementId.ts'
-import NcSelect from '../NcSelect/index.js'
 import { t } from '../../l10n.js'
+import getTimezoneManager from './timezoneDataProviderService.js'
+import NcSelect from '../NcSelect/index.js'
 
 export default {
 	name: 'NcTimezonePicker',
@@ -73,7 +73,7 @@ export default {
 		 */
 		uid: {
 			type: [String, Number],
-			default: () => `tz-${createElementId()}`,
+			default: () => createElementId(),
 		},
 	},
 	emits: ['update:modelValue'],