fixup! fixup! refactor(utils): Replace GenRandomId with getRandomId

susnux · susnux · commit 9d885b8f95a9 · 2025-01-23T19:11:51.000+01:00
diff --git a/src/components/NcActionButtonGroup/NcActionButtonGroup.vue b/src/components/NcActionButtonGroup/NcActionButtonGroup.vue
@@ -87,7 +87,7 @@ export default {
 
 <script>
 import { defineComponent } from 'vue'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import { t } from '../../l10n.js'
 
 /**
@@ -116,7 +116,7 @@ export default defineComponent({
 
 	setup() {
 		return {
-			labelId: `nc-action-button-group-${getRandomId()}`,
+			labelId: `nc-action-button-group-${getElementId()}`,
 		}
 	},
 
diff --git a/src/components/NcActionCheckbox/NcActionCheckbox.vue b/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 { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 export default {
 	name: 'NcActionCheckbox',
@@ -59,7 +59,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'action-' + getRandomId(),
+			default: () => 'action-' + getElementId(),
 			validator: id => id.trim() !== '',
 		},
 
diff --git a/src/components/NcActionInput/NcActionInput.vue b/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 { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import { t } from '../../l10n.js'
 
 export default {
@@ -270,15 +270,15 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'action-' + getRandomId(),
+			default: () => 'action-' + getElementId(),
 			validator: id => id.trim() !== '',
 		},
 		/**
 		 * id attribute of the text input element
 		 */
 		inputId: {
 			type: String,
-			default: () => 'action-input-' + getRandomId(),
+			default: () => 'action-input-' + getElementId(),
 			validator: id => id.trim() !== '',
 		},
 		/**
diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue
@@ -42,7 +42,7 @@ So that only one of each name set can be selected at the same time.
 
 <script>
 import ActionGlobalMixin from '../../mixins/actionGlobal.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 export default {
 	name: 'NcActionRadio',
@@ -62,7 +62,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'action-' + getRandomId(),
+			default: () => 'action-' + getElementId(),
 			validator: id => id.trim() !== '',
 		},
 
diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
@@ -83,7 +83,7 @@ export default {
 
 <script>
 import ActionTextMixin from '../../mixins/actionText.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 
@@ -102,7 +102,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'action-' + getRandomId(),
+			default: () => 'action-' + getElementId(),
 			validator: id => id.trim() !== '',
 		},
 		/**
@@ -138,7 +138,7 @@ export default {
 		},
 
 		computedId() {
-			return getRandomId()
+			return getElementId()
 		},
 	},
 
diff --git a/src/components/NcActions/NcActions.vue b/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 { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.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-${getRandomId()}`
+		const randomId = `menu-${getElementId()}`
 		const triggerRandomId = `trigger-${randomId}`
 
 		const triggerButton = ref()
diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/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 { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.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-' + getRandomId(),
+			default: () => 'app-navigation-item-' + getElementId(),
 			validator: id => id.trim() !== '',
 		},
 
diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -712,7 +712,7 @@ 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 { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import { getTrapStack } from '../../utils/focusTrap.js'
 import { t } from '../../l10n.js'
 import isSlotPopulated from '../../utils/isSlotPopulated.ts'
@@ -924,7 +924,7 @@ export default {
 
 	setup() {
 		return {
-			uid: getRandomId(),
+			uid: getElementId(),
 			isMobile: useIsSmallMobile(),
 		}
 	},
diff --git a/src/components/NcBreadcrumb/NcBreadcrumb.vue b/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 { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.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-${getRandomId()}`,
+			crumbId: `crumb-id-${getElementId()}`,
 		}
 	},
 	computed: {
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -303,7 +303,7 @@ export default {
 
 <script>
 import NcCheckboxContent, { TYPE_BUTTON, TYPE_CHECKBOX, TYPE_RADIO, TYPE_SWITCH } from './NcCheckboxContent.vue'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import { t, n } from '../../l10n.js'
 
 export default {
@@ -322,7 +322,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => 'checkbox-radio-switch-' + getRandomId(),
+			default: () => 'checkbox-radio-switch-' + getElementId(),
 			validator: id => id.trim() !== '',
 		},
 
diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue
@@ -205,7 +205,7 @@ import NcPopover from '../NcPopover/index.js'
 import { t } from '../../l10n.js'
 import { defaultPalette } from '../../utils/GenColors.js'
 
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import Check from 'vue-material-design-icons/Check.vue'
@@ -306,7 +306,7 @@ export default defineComponent({
 		},
 
 		uid() {
-			return getRandomId()
+			return getElementId()
 		},
 		contrastColor() {
 			const black = '#000000'
diff --git a/src/components/NcDateTimePicker/NcDateTimePicker.vue b/src/components/NcDateTimePicker/NcDateTimePicker.vue
@@ -157,7 +157,7 @@ export default {
 
 <script>
 import { t } from '../../l10n.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 import NcTimezonePicker from '../NcTimezonePicker/index.js'
 import NcPopover from '../NcPopover/index.js'
@@ -280,7 +280,7 @@ export default ScopeComponent({
 
 	setup() {
 		return {
-			timezoneDialogHeaderId: `timezone-dialog-header-${getRandomId()}`,
+			timezoneDialogHeaderId: `timezone-dialog-header-${getElementId()}`,
 		}
 	},
 
diff --git a/src/components/NcDialog/NcDialog.vue b/src/components/NcDialog/NcDialog.vue
@@ -261,7 +261,7 @@ import { computed, defineComponent, ref } from 'vue'
 import NcModal from '../NcModal/index.js'
 import NcDialogButton from '../NcDialogButton/index.js'
 
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 type NcDialogButtonProps = ComponentProps<typeof NcDialogButton>
 
@@ -475,7 +475,7 @@ export default defineComponent({
 		/**
 		 * The unique id of the nav element
 		 */
-		const navigationId = getRandomId()
+		const navigationId = getElementId()
 
 		/**
 		 * aria-label attribute for the nav element
diff --git a/src/components/NcHeaderButton/NcHeaderButton.vue b/src/components/NcHeaderButton/NcHeaderButton.vue
@@ -86,7 +86,7 @@ export default {
 </template>
 
 <script setup lang="ts">
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import NcButton, { ButtonType } from '../NcButton/index.js'
 
 defineProps<{
@@ -102,7 +102,7 @@ defineEmits<{
 	click: [event: MouseEvent]
 }>()
 
-const descriptionId = getRandomId()
+const descriptionId = getElementId()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue
@@ -109,7 +109,7 @@ import { vOnClickOutside as ClickOutside } from '@vueuse/components'
 import { createFocusTrap } from 'focus-trap'
 
 import { clickOutsideOptions } from '../../mixins/index.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import { getTrapStack } from '../../utils/focusTrap.js'
 
 import NcButton from '../NcButton/index.ts'
@@ -189,8 +189,8 @@ export default {
 			focusTrap: null,
 			opened: this.open,
 			shortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),
-			triggerId: getRandomId(),
-			descriptionId: getRandomId(),
+			triggerId: getElementId(),
+			descriptionId: getElementId(),
 		}
 	},
 
diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
@@ -92,7 +92,7 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 
 <script>
 import NcButton from '../NcButton/index.ts'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Check from 'vue-material-design-icons/Check.vue'
@@ -259,7 +259,7 @@ export default {
 		},
 
 		inputName() {
-			return 'input' + getRandomId()
+			return 'input' + getElementId()
 		},
 
 		hasTrailingIcon() {
diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue
@@ -330,7 +330,7 @@ import { warn as VueWarn } from 'vue'
 
 import { getTrapStack } from '../../utils/focusTrap.js'
 import { t } from '../../l10n.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 import NcActions from '../NcActions/index.js'
 import NcButton from '../NcButton/index.ts'
 import Timer from '../../utils/Timer.js'
@@ -543,7 +543,7 @@ export default {
 			iconSize: 24,
 			focusTrap: null,
 			externalFocusTrapStack: [],
-			randId: getRandomId(),
+			randId: getElementId(),
 			internalShow: true,
 		}
 	},
diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
@@ -294,7 +294,7 @@ import { searchProvider, getLinkWithPicker } from '../NcRichText/index.js'
 import Tribute from 'tributejs/dist/tribute.esm.js'
 import debounce from 'debounce'
 import stringLength from 'string-length'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 /**
  * Populate the list of text smiles we want to offer via Tribute.
@@ -324,7 +324,7 @@ export default {
 		 */
 		id: {
 			type: String,
-			default: () => getRandomId(7),
+			default: () => getElementId(7),
 		},
 
 		/**
@@ -425,7 +425,7 @@ export default {
 	],
 
 	setup() {
-		const uid = getRandomId(5)
+		const uid = getElementId(5)
 		return {
 			// Constants
 			labelId: `nc-rich-contenteditable-${uid}-label`,
@@ -559,7 +559,7 @@ export default {
 		},
 
 		initializeTribute() {
-			const renderMenuItem = (content) => `<div id="nc-rich-contenteditable-tribute-item-${getRandomId(5)}" class="${this.$style['tribute-item']}" role="option">${content}</div>`
+			const renderMenuItem = (content) => `<div id="nc-rich-contenteditable-tribute-item-${getElementId(5)}" class="${this.$style['tribute-item']}" role="option">${content}</div>`
 
 			const tributesCollection = []
 			tributesCollection.push({
diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue
@@ -98,7 +98,7 @@ Table row | value A | value B
 ---
 
 \`\`\`js
-const getRandomId = (length) => {
+const getElementId = (length) => {
 \treturn Math.random()
 \t\t.toString(36)
 \t\t.replace(/[^a-z]+/g, '')
@@ -307,7 +307,7 @@ import NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/NcCheckboxRadioSwitc
 import NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'
 import { getRoute, remarkAutolink } from './autolink.ts'
 import { remarkPlaceholder, prepareTextNode } from './placeholder.js'
-import { getRandomId } from '../../utils/getRandomId.ts'
+import { getElementId } from '../../utils/getElementId.ts'
 
 import { unified } from 'unified'
 import remarkParse from 'remark-parse'
@@ -419,7 +419,7 @@ export default {
 
 	data() {
 		return {
-			parentId: getRandomId(5),
+			parentId: getElementId(5),
 		}
 	},
 
@@ -556,7 +556,7 @@ export default {
 							labelParts.splice(nestedNodeIndex)
 						}
 
-						const id = this.parentId + '-markdown-input-' + getRandomId(5)
+						const id = this.parentId + '-markdown-input-' + getElementId(5)
 						const propsToForward = { ...inputNode.props }
 						// The checked prop is name modelValue for NcCheckboxRadioSwitch
 						delete propsToForward.checked
diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
diff --git a/src/components/NcSettingsInputText/NcSettingsInputText.vue b/src/components/NcSettingsInputText/NcSettingsInputText.vue
diff --git a/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue b/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue
diff --git a/src/components/NcTextArea/NcTextArea.vue b/src/components/NcTextArea/NcTextArea.vue
diff --git a/src/components/NcTimezonePicker/NcTimezonePicker.vue b/src/components/NcTimezonePicker/NcTimezonePicker.vue
