Skip to content

Commit 9f4a107

Browse files
susnuxsusnux
committed
refactor(utils): Replace GenRandomId with getElementId
- 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 <[email protected]>
1 parent e6b95e7 commit 9f4a107

File tree

29 files changed

+130
-81
lines changed

29 files changed

+130
-81
lines changed

‎src/components/NcActionButtonGroup/NcActionButtonGroup.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export default {
8787

8888
<script>
8989
import { defineComponent } from 'vue'
90-
import GenRandomId from '../../utils/GenRandomId.js'
90+
import { getElementId } from '../../utils/getElementId.ts'
9191
import { t } from '../../l10n.js'
9292

9393
/**
@@ -116,7 +116,7 @@ export default defineComponent({
116116

117117
setup() {
118118
return {
119-
labelId: `nc-action-button-group-${GenRandomId()}`,
119+
labelId: `nc-action-button-group-${getElementId()}`,
120120
}
121121
},
122122

‎src/components/NcActionCheckbox/NcActionCheckbox.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
3939

4040
<script>
4141
import ActionGlobalMixin from '../../mixins/actionGlobal.js'
42-
import GenRandomId from '../../utils/GenRandomId.js'
42+
import { getElementId } from '../../utils/getElementId.ts'
4343

4444
export default {
4545
name: 'NcActionCheckbox',
@@ -59,7 +59,7 @@ export default {
5959
*/
6060
id: {
6161
type: String,
62-
default: () => 'action-' + GenRandomId(),
62+
default: () => 'action-' + getElementId(),
6363
validator: id => id.trim() !== '',
6464
},
6565

‎src/components/NcActionInput/NcActionInput.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ import NcPasswordField from '../NcPasswordField/index.js'
246246
import NcSelect from '../NcSelect/index.js'
247247
import NcTextField from '../NcTextField/index.js'
248248
import ActionGlobalMixin from '../../mixins/actionGlobal.js'
249-
import GenRandomId from '../../utils/GenRandomId.js'
249+
import { getElementId } from '../../utils/getElementId.ts'
250250
import { t } from '../../l10n.js'
251251

252252
export default {
@@ -270,15 +270,15 @@ export default {
270270
*/
271271
id: {
272272
type: String,
273-
default: () => 'action-' + GenRandomId(),
273+
default: () => 'action-' + getElementId(),
274274
validator: id => id.trim() !== '',
275275
},
276276
/**
277277
* id attribute of the text input element
278278
*/
279279
inputId: {
280280
type: String,
281-
default: () => 'action-input-' + GenRandomId(),
281+
default: () => 'action-input-' + getElementId(),
282282
validator: id => id.trim() !== '',
283283
},
284284
/**

‎src/components/NcActionRadio/NcActionRadio.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ So that only one of each name set can be selected at the same time.
4242

4343
<script>
4444
import ActionGlobalMixin from '../../mixins/actionGlobal.js'
45-
import GenRandomId from '../../utils/GenRandomId.js'
45+
import { getElementId } from '../../utils/getElementId.ts'
4646

4747
export default {
4848
name: 'NcActionRadio',
@@ -62,7 +62,7 @@ export default {
6262
*/
6363
id: {
6464
type: String,
65-
default: () => 'action-' + GenRandomId(),
65+
default: () => 'action-' + getElementId(),
6666
validator: id => id.trim() !== '',
6767
},
6868

‎src/components/NcActionTextEditable/NcActionTextEditable.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export default {
8484

8585
<script>
8686
import ActionTextMixin from '../../mixins/actionText.js'
87-
import GenRandomId from '../../utils/GenRandomId.js'
87+
import { getElementId } from '../../utils/getElementId.ts'
8888

8989
import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
9090
import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
@@ -107,7 +107,7 @@ export default {
107107
*/
108108
id: {
109109
type: String,
110-
default: () => 'action-' + GenRandomId(),
110+
default: () => 'action-' + getElementId(),
111111
validator: id => id.trim() !== '',
112112
},
113113
/**
@@ -149,7 +149,7 @@ export default {
149149
},
150150

151151
computedId() {
152-
return GenRandomId()
152+
return getElementId()
153153
},
154154
},
155155

‎src/components/NcActions/NcActions.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -925,7 +925,7 @@ import { t } from '../../l10n.js'
925925

926926
import NcButton from '../NcButton/index.ts'
927927
import NcPopover from '../NcPopover/index.js'
928-
import GenRandomId from '../../utils/GenRandomId.js'
928+
import { getElementId } from '../../utils/getElementId.ts'
929929
import isSlotPopulated from '../../utils/isSlotPopulated.ts'
930930

931931
import IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
@@ -1112,7 +1112,7 @@ export default {
11121112
],
11131113

11141114
setup(props) {
1115-
const randomId = `menu-${GenRandomId()}`
1115+
const randomId = `menu-${getElementId()}`
11161116
const triggerRandomId = `trigger-${randomId}`
11171117

11181118
const triggerButton = ref()

‎src/components/NcAppNavigationItem/NcAppNavigationItem.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -399,7 +399,7 @@ import NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue
399399
import { useIsMobile } from '../../composables/useIsMobile/index.js'
400400
import NcInputConfirmCancel from './NcInputConfirmCancel.vue'
401401
import { t } from '../../l10n.js'
402-
import GenRandomId from '../../utils/GenRandomId.js'
402+
import { getElementId } from '../../utils/getElementId.ts'
403403

404404
import Pencil from 'vue-material-design-icons/Pencil.vue'
405405
import Undo from 'vue-material-design-icons/Undo.vue'
@@ -449,7 +449,7 @@ export default {
449449
*/
450450
id: {
451451
type: String,
452-
default: () => 'app-navigation-item-' + GenRandomId(),
452+
default: () => 'app-navigation-item-' + getElementId(),
453453
validator: id => id.trim() !== '',
454454
},
455455

‎src/components/NcAppSidebar/NcAppSidebar.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -712,7 +712,7 @@ import NcEmptyContent from '../NcEmptyContent/index.js'
712712
import Focus from '../../directives/Focus/index.js'
713713
import Linkify from '../../directives/Linkify/index.js'
714714
import { useIsSmallMobile } from '../../composables/useIsMobile/index.js'
715-
import GenRandomId from '../../utils/GenRandomId.js'
715+
import { getElementId } from '../../utils/getElementId.ts'
716716
import { getTrapStack } from '../../utils/focusTrap.js'
717717
import { t } from '../../l10n.js'
718718
import isSlotPopulated from '../../utils/isSlotPopulated.ts'
@@ -924,7 +924,7 @@ export default {
924924

925925
setup() {
926926
return {
927-
uid: GenRandomId(),
927+
uid: getElementId(),
928928
isMobile: useIsSmallMobile(),
929929
}
930930
},

‎src/components/NcBreadcrumb/NcBreadcrumb.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ Renders a button element when given no redirection props, otherwise, renders <a/
6161

6262
<script>
6363
import NcActions from '../NcActions/index.js'
64-
import GenRandomId from '../../utils/GenRandomId.js'
64+
import { getElementId } from '../../utils/getElementId.ts'
6565
import NcButton from '../NcButton/NcButton.vue'
6666

6767
import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
@@ -172,7 +172,7 @@ export default {
172172
* The unique id of the breadcrumb. Necessary to append the
173173
* Actions menu to the correct crumb.
174174
*/
175-
crumbId: `crumb-id-${GenRandomId()}`,
175+
crumbId: `crumb-id-${getElementId()}`,
176176
}
177177
},
178178
computed: {

‎src/components/NcButton/NcButton.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -478,7 +478,7 @@ export default defineComponent({
478478
* @type {'primary' | 'secondary' | 'tertiary' | 'tertiary-no-background' | 'tertiary-on-primary' | 'error' | 'warning' | 'success'}
479479
*/
480480
type: {
481-
type: String as PropType<ButtonType>,
481+
type: String as PropType<ButtonType | `${ButtonType}`>,
482482
default: ButtonType.Secondary,
483483
validator(value: string) {
484484
return Object.values(ButtonType).includes(value as ButtonType)

‎src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -303,7 +303,7 @@ export default {
303303

304304
<script>
305305
import NcCheckboxContent, { TYPE_BUTTON, TYPE_CHECKBOX, TYPE_RADIO, TYPE_SWITCH } from './NcCheckboxContent.vue'
306-
import GenRandomId from '../../utils/GenRandomId.js'
306+
import { getElementId } from '../../utils/getElementId.ts'
307307
import { t, n } from '../../l10n.js'
308308

309309
export default {
@@ -322,7 +322,7 @@ export default {
322322
*/
323323
id: {
324324
type: String,
325-
default: () => 'checkbox-radio-switch-' + GenRandomId(),
325+
default: () => 'checkbox-radio-switch-' + getElementId(),
326326
validator: id => id.trim() !== '',
327327
},
328328

‎src/components/NcColorPicker/NcColorPicker.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ import NcPopover from '../NcPopover/index.js'
205205
import { t } from '../../l10n.js'
206206
import { defaultPalette } from '../../utils/GenColors.js'
207207

208-
import GenRandomId from '../../utils/GenRandomId.js'
208+
import { getElementId } from '../../utils/getElementId.ts'
209209

210210
import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
211211
import Check from 'vue-material-design-icons/Check.vue'
@@ -306,7 +306,7 @@ export default defineComponent({
306306
},
307307

308308
uid() {
309-
return GenRandomId()
309+
return getElementId()
310310
},
311311
contrastColor() {
312312
const black = '#000000'

‎src/components/NcDateTimePicker/NcDateTimePicker.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export default {
157157

158158
<script>
159159
import { t } from '../../l10n.js'
160-
import GenRandomId from '../../utils/GenRandomId.js'
160+
import { getElementId } from '../../utils/getElementId.ts'
161161

162162
import NcTimezonePicker from '../NcTimezonePicker/index.js'
163163
import NcPopover from '../NcPopover/index.js'
@@ -280,7 +280,7 @@ export default ScopeComponent({
280280

281281
setup() {
282282
return {
283-
timezoneDialogHeaderId: `timezone-dialog-header-${GenRandomId()}`,
283+
timezoneDialogHeaderId: `timezone-dialog-header-${getElementId()}`,
284284
}
285285
},
286286

‎src/components/NcDialog/NcDialog.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@ import { computed, defineComponent, ref } from 'vue'
261261
import NcModal from '../NcModal/index.js'
262262
import NcDialogButton from '../NcDialogButton/index.js'
263263

264-
import GenRandomId from '../../utils/GenRandomId.js'
264+
import { getElementId } from '../../utils/getElementId.ts'
265265

266266
type NcDialogButtonProps = ComponentProps<typeof NcDialogButton>
267267

@@ -475,7 +475,7 @@ export default defineComponent({
475475
/**
476476
* The unique id of the nav element
477477
*/
478-
const navigationId = GenRandomId()
478+
const navigationId = getElementId()
479479

480480
/**
481481
* aria-label attribute for the nav element

‎src/components/NcHeaderButton/NcHeaderButton.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export default {
8686
</template>
8787

8888
<script setup lang="ts">
89-
import GenRandomId from '../../utils/GenRandomId.js'
89+
import { getElementId } from '../../utils/getElementId.ts'
9090
import NcButton, { ButtonType } from '../NcButton/index.js'
9191

9292
defineProps<{
@@ -102,7 +102,7 @@ defineEmits<{
102102
click: [event: MouseEvent]
103103
}>()
104104

105-
const descriptionId = GenRandomId()
105+
const descriptionId = getElementId()
106106
</script>
107107

108108
<style lang="scss" scoped>

‎src/components/NcHeaderMenu/NcHeaderMenu.vue

+6-4
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,10 @@ import type { FocusTrap } from 'focus-trap'
106106
import { onClickOutside } from '@vueuse/core'
107107
import { createFocusTrap } from 'focus-trap'
108108
import { computed, nextTick, ref, useTemplateRef, watch, type Slot } from 'vue'
109-
import { getTrapStack } from '../../utils/focusTrap.js'
110109
import { useHotKey } from '../../composables/index.js'
110+
import { getTrapStack } from '../../utils/focusTrap.js'
111+
import { getElementId } from '../../utils/getElementId.ts'
111112

112-
import GenRandomId from '../../utils/GenRandomId.js'
113113
import NcButton from '../NcButton/index.ts'
114114

115115
const {
@@ -172,9 +172,9 @@ defineSlots<{
172172
}>()
173173

174174
/** Id of the menu description */
175-
const descriptionId = GenRandomId()
175+
const descriptionId = getElementId()
176176
/** Id of the trigger button */
177-
const triggerId = GenRandomId()
177+
const triggerId = getElementId()
178178
/** The active focus trap (if any) */
179179
const focusTrap = ref<FocusTrap>()
180180
/** Is the menu currently opened */
@@ -234,6 +234,8 @@ async function setMenuState(state: boolean) {
234234
/**
235235
* When this is role navigation, then we cannot apply a focus trap.
236236
* In this case we close the menu on focus-out.
237+
*
238+
* @param event the focus event
237239
*/
238240
function onFocusOut(event: FocusEvent) {
239241
// Is not a navigation

‎src/components/NcInputField/NcInputField.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ For a list of all available props and attributes, please check the [HTMLInputEle
9292

9393
<script>
9494
import NcButton from '../NcButton/index.ts'
95-
import GenRandomId from '../../utils/GenRandomId.js'
95+
import { getElementId } from '../../utils/getElementId.ts'
9696

9797
import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'
9898
import Check from 'vue-material-design-icons/Check.vue'
@@ -259,7 +259,7 @@ export default {
259259
},
260260

261261
inputName() {
262-
return 'input' + GenRandomId()
262+
return 'input' + getElementId()
263263
},
264264

265265
hasTrailingIcon() {

‎src/components/NcModal/NcModal.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -330,7 +330,7 @@ import { warn as VueWarn } from 'vue'
330330

331331
import { getTrapStack } from '../../utils/focusTrap.js'
332332
import { t } from '../../l10n.js'
333-
import GenRandomId from '../../utils/GenRandomId.js'
333+
import { getElementId } from '../../utils/getElementId.ts'
334334
import NcActions from '../NcActions/index.js'
335335
import NcButton from '../NcButton/index.ts'
336336
import Timer from '../../utils/Timer.js'
@@ -543,7 +543,7 @@ export default {
543543
iconSize: 24,
544544
focusTrap: null,
545545
externalFocusTrapStack: [],
546-
randId: GenRandomId(),
546+
randId: getElementId(),
547547
internalShow: true,
548548
}
549549
},

‎src/components/NcRichContenteditable/NcRichContenteditable.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ import { searchProvider, getLinkWithPicker } from '../NcRichText/index.js'
294294
import Tribute from 'tributejs/dist/tribute.esm.js'
295295
import debounce from 'debounce'
296296
import stringLength from 'string-length'
297-
import GenRandomId from '../../utils/GenRandomId.js'
297+
import { getElementId } from '../../utils/getElementId.ts'
298298

299299
/**
300300
* Populate the list of text smiles we want to offer via Tribute.
@@ -324,7 +324,7 @@ export default {
324324
*/
325325
id: {
326326
type: String,
327-
default: () => GenRandomId(7),
327+
default: () => getElementId(7),
328328
},
329329

330330
/**
@@ -425,7 +425,7 @@ export default {
425425
],
426426

427427
setup() {
428-
const uid = GenRandomId(5)
428+
const uid = getElementId()
429429
return {
430430
// Constants
431431
labelId: `nc-rich-contenteditable-${uid}-label`,
@@ -559,7 +559,7 @@ export default {
559559
},
560560

561561
initializeTribute() {
562-
const renderMenuItem = (content) => `<div id="nc-rich-contenteditable-tribute-item-${GenRandomId(5)}" class="${this.$style['tribute-item']}" role="option">${content}</div>`
562+
const renderMenuItem = (content) => `<div id="nc-rich-contenteditable-tribute-item-${getElementId()}" class="${this.$style['tribute-item']}" role="option">${content}</div>`
563563

564564
const tributesCollection = []
565565
tributesCollection.push({

0 commit comments

Comments
 (0)