feat(helpers): add uuid method

packages/accordion/package.json

@@ -36,7 +36,8 @@
     "lion-accordion.js"
   ],
   "dependencies": {
-    "@lion/core": "^0.22.0"
+    "@lion/core": "^0.22.0",
+    "@lion/helpers": "^0.11.0"
   },
   "keywords": [
     "accordion",

packages/accordion/src/LionAccordion.js

@@ -1,6 +1,6 @@
 /* eslint-disable class-methods-use-this */
 import { LitElement, css, html } from '@lion/core';
-
+import { uuid } from '@lion/helpers';
 /**
  * @typedef {Object} StoreEntry
  * @property {string} uid Unique ID for the entry
@@ -11,8 +11,6 @@ import { LitElement, css, html } from '@lion/core';
  * @property {(event: Event) => unknown} keydownHandler executed on keydown event
  */
 
-const uuid = () => Math.random().toString(36).substr(2, 10);
-
 /**
  * # <lion-accordion> webcomponent
  *

packages/collapsible/package.json

@@ -38,7 +38,8 @@
     "demo/custom-collapsible.js"
   ],
   "dependencies": {
-    "@lion/core": "^0.22.0"
+    "@lion/core": "^0.22.0",
+    "@lion/helpers": "^0.11.0"
   },
   "keywords": [
     "collapsible",

packages/collapsible/src/LionCollapsible.js

@@ -1,8 +1,5 @@
 import { LitElement, html, css } from '@lion/core';
-/**
- * Generate random UUID
- */
-const uuid = () => Math.random().toString(36).substr(2, 10);
+import { uuid } from '@lion/helpers';
 /**
  * `LionCollapsible` is a class for custom collapsible element (`<lion-collapsible>` web component).
  *

packages/form-core/package.json

@@ -40,6 +40,7 @@
   ],
   "dependencies": {
     "@lion/core": "^0.22.0",
+    "@lion/helpers": "^0.11.0",
     "@lion/localize": "^0.24.0"
   },
   "keywords": [

packages/form-core/src/FormControlMixin.js

@@ -1,4 +1,5 @@
 import { css, dedupeMixin, html, nothing, SlotMixin, DisabledMixin } from '@lion/core';
+import { uuid } from '@lion/helpers';
 import { getAriaElementsInRightDomOrder } from './utils/getAriaElementsInRightDomOrder.js';
 import { Unparseable } from './validate/Unparseable.js';
 import { FormRegisteringMixin } from './registration/FormRegisteringMixin.js';
@@ -16,14 +17,6 @@ import { FormRegisteringMixin } from './registration/FormRegisteringMixin.js';
  * @typedef {import('../types/FormControlMixinTypes.js').ModelValueEventDetails} ModelValueEventDetails
  */
 
-/**
- * Generates random unique identifier (for dom elements)
- * @param {string} prefix
- */
-function uuid(prefix) {
-  return `${prefix}-${Math.random().toString(36).substr(2, 10)}`;
-}
-
 /**
  * #FormControlMixin :
  *

packages/helpers/index.js

@@ -1,6 +1,7 @@
 // Utilities
 export { renderLitAsNode } from './renderLitAsNode/src/renderLitAsNode.js';
 export { sortEachDepth } from './sortEachDepth/src/sortEachDepth.js';
+export { uuid } from './uuid/uuid.js';
 
 // Components
 export { SbActionLogger } from './sb-action-logger/src/SbActionLogger.js';

packages/helpers/uuid/uuid.js

@@ -0,0 +1,9 @@
+/**
+ * Generates random unique identifier (for dom elements)
+ * @param {string} prefix
+ * @return {string} unique id
+ */
+export function uuid(prefix = '') {
+  const elementName = prefix.length > 1 ? `${prefix}-` : '';
+  return `${elementName}${Math.random().toString(36).substr(2, 10)}`;
+}

packages/listbox/package.json

@@ -40,7 +40,8 @@
   ],
   "dependencies": {
     "@lion/core": "^0.22.0",
-    "@lion/form-core": "^0.17.1"
+    "@lion/form-core": "^0.17.1",
+    "@lion/helpers": "^0.11.0"
   },
   "keywords": [
     "form",

packages/listbox/src/ListboxMixin.js

@@ -1,5 +1,6 @@
 import { css, dedupeMixin, html, ScopedElementsMixin, SlotMixin } from '@lion/core';
 import { ChoiceGroupMixin, FormControlMixin, FormRegistrarMixin } from '@lion/form-core';
+import { uuid } from '@lion/helpers';
 import { LionOptions } from './LionOptions.js';
 
 // TODO: extract ListNavigationWithActiveDescendantMixin that can be reused in [role="menu"]
@@ -51,10 +52,6 @@ function moveDefaultSlottablesToTarget(source, target) {
   });
 }
 
-function uuid() {
-  return Math.random().toString(36).substr(2, 10);
-}
-
 /**
  * @type {ListboxMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('@lion/core').LitElement>} superclass

packages/tabs/package.json

@@ -36,7 +36,8 @@
     "lion-tabs.js"
   ],
   "dependencies": {
-    "@lion/core": "^0.22.0"
+    "@lion/core": "^0.22.0",
+    "@lion/helpers": "^0.11.0"
   },
   "keywords": [
     "lion",

packages/tabs/src/LionTabs.js

@@ -1,4 +1,5 @@
 import { css, html, LitElement } from '@lion/core';
+import { uuid } from '@lion/helpers';
 
 /**
  * @typedef {Object} StoreEntry
@@ -11,10 +12,6 @@ import { css, html, LitElement } from '@lion/core';
  * @property {(event: Event) => unknown} keyupHandler executed on keyup event
  */
 
-function uuid() {
-  return Math.random().toString(36).substr(2, 10);
-}
-
 /**
  * @param {StoreEntry} options
  */