@madgex/design-system 1.47.2 → 1.47.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "1.47.2",
+  "version": "1.47.3",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/components/inputs/combobox/combobox.js

@@ -0,0 +1,14 @@
+import Combobox from './vue-components/Combobox.vue';
+
+export default {
+  name: 'mds-combobox',
+  component: Combobox,
+  hooks: {
+    connectedCallback() {
+      // If the custom element has loaded, clear up any fallback elements that could cause ID clashes or weirdness in form submission
+      const fallbackInput = this.parentElement.querySelector('input');
+
+      if (fallbackInput) fallbackInput.remove();
+    },
+  },
+};

package/src/components/inputs/multi-select/multi-select.js

@@ -0,0 +1,32 @@
+import MultiSelect from './vue-components/MultiSelect.vue';
+
+const optionsGroupSelector = '.mds-multiselect__checkbox-group';
+const optionSelector = ':scope > .mds-multiselect__checkbox';
+
+function constructOptionsList(rootGroup) {
+  const parentOptions = Array.from(rootGroup.querySelectorAll(optionSelector));
+  return parentOptions.reduce((optionsList, option) => {
+    const childGroup = option.querySelector(optionsGroupSelector);
+    const input = option.querySelector('input');
+    const label = option.querySelector('label');
+    optionsList.push({
+      id: input.id,
+      name: input.name,
+      value: input.value,
+      label: label.innerText,
+      checked: input.checked,
+      children: childGroup ? constructOptionsList(childGroup) : null,
+    });
+    return optionsList;
+  }, []);
+}
+
+export default {
+  name: 'mds-multiselect',
+  component: MultiSelect,
+  hooks: {
+    connectedCallback() {
+      this.options = constructOptionsList(this.parentElement.querySelector(optionsGroupSelector));
+    },
+  },
+};

package/src/js/index-fractal.js

@@ -1,11 +1,9 @@
 import switchStateScript from './fractal-scripts/switch-state';
 import notificationScript from './fractal-scripts/notification';
 import comboboxScript from './fractal-scripts/combobox';
-import multiselectScript from './fractal-scripts/multiselect';
 
 document.addEventListener('DOMContentLoaded', () => {
   switchStateScript.init();
   notificationScript.init();
   comboboxScript.init();
-  multiselectScript.init();
 });

package/src/js/index-vue.js

@@ -1,9 +1,8 @@
 import 'document-register-element/build/document-register-element';
 import Vue from 'vue';
 import vueCustomElement from 'vue-custom-element';
-
-import Combobox from '../components/inputs/combobox/vue-components/Combobox.vue';
-import MultiSelect from '../components/inputs/multi-select/vue-components/MultiSelect.vue';
+import MdsCombobox from '../components/inputs/combobox/combobox';
+import MdsMultiSelect from '../components/inputs/multi-select/multi-select';
 
 Vue.use(vueCustomElement);
 Vue.config.devtools = process.env.NODE_ENV === 'development';
@@ -11,13 +10,6 @@ Vue.config.devtools = process.env.NODE_ENV === 'development';
 Vue.config.keyCodes.end = 35;
 Vue.config.keyCodes.home = 36;
 
-Vue.customElement('mds-combobox', Combobox, {
-  connectedCallback() {
-    // If the custom element has loaded, clear up any fallback elements that could cause ID clashes or weirdness in form submission
-    const fallbackInput = this.parentElement.querySelector('input');
-
-    if (fallbackInput) fallbackInput.remove();
-  },
+[MdsCombobox, MdsMultiSelect].forEach(({ name, component, hooks }) => {
+  Vue.customElement(name, component, hooks);
 });
-
-Vue.customElement('mds-multiselect', MultiSelect);

package/src/js/fractal-scripts/multiselect.js

@@ -1,37 +0,0 @@
-function constructNode(rootNode) {
-  const localObj = [];
-  const parentNodes = rootNode.querySelectorAll(':scope > .mds-multiselect__checkbox');
-  parentNodes.forEach((node, index) => {
-    let childGroup = 'null';
-    if (node.childElementCount === 3) {
-      childGroup = node.querySelector('.mds-multiselect__checkbox-group');
-    }
-    const input = node.querySelector('input');
-    const label = node.querySelector('label');
-    localObj[`${index}`] = {
-      id: input.id,
-      name: input.name,
-      value: input.value,
-      label: label.innerText,
-      checked: input.checked,
-      children: childGroup !== 'null' ? constructNode(childGroup) : null,
-    };
-  });
-  return localObj;
-}
-
-function bindData() {
-  const elements = Array.from(document.querySelectorAll('.js-mds-multiselect'));
-  elements.forEach((element) => {
-    const vueMultiselect = element.querySelector('mds-multiselect');
-    vueMultiselect.options = constructNode(element.querySelector('.mds-multiselect__checkbox-group'));
-  });
-}
-
-const multiselect = {
-  init: () => {
-    bindData();
-  },
-};
-
-export default multiselect;