Refactoring core, and added styles in chips

src/components/create-element.js

@@ -1,28 +1,32 @@
+import { customStylesFormat } from './utils';
+
 export function createBreadcrumb(data, title, index, id) {
   const { element, option, indexes, selectedItems } = data;
-  const { placeholder } = option;
+  const { placeholder, styles } = option;
+  const { chips } = styles;
 
   const selected = element.querySelector('.selected');
-
-  const li = document.createElement('li');
-  const text = document.createTextNode(title);
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  const liChip = document.createElement('li');
+  const textNode = document.createTextNode(title);
+  const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
   const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
 
-  svg.setAttribute('viewBox', '0 0 10 10');
+  svgIcon.setAttribute('viewBox', '0 0 10 10');
   path1.setAttribute('d', 'M3,7 L7,3');
   path2.setAttribute('d', 'M3,3 L7,7');
-  li.setAttribute('id', `tag-${index}`);
+  liChip.setAttribute('id', `tag-${index}`);
 
-  svg.classList.add('svg-icon');
+  svgIcon.classList.add('svg-icon');
 
-  svg.appendChild(path1);
-  svg.appendChild(path2);
-  li.appendChild(text);
-  li.appendChild(svg);
+  svgIcon.appendChild(path1);
+  svgIcon.appendChild(path2);
+  liChip.appendChild(textNode);
+  liChip.appendChild(svgIcon);
 
-  svg.addEventListener('click', (event) => {
+  customStylesFormat(chips, liChip);
+
+  svgIcon.addEventListener('click', (event) => {
     event.stopPropagation();
 
     const deleteIcon = indexes.indexOf(index);
@@ -31,6 +35,7 @@ export function createBreadcrumb(data, title, index, id) {
     selectedItems.splice(deleteIcon, 1);
 
     let checkBox = '';
+
     if (id) {
       checkBox = document.getElementById(`chbox-${id}`);
     } else {
@@ -44,8 +49,8 @@ export function createBreadcrumb(data, title, index, id) {
       selected.innerText = placeholder;
     }
 
-    li.parentElement.removeChild(li);
+    liChip.parentElement.removeChild(liChip);
   });
 
-  return li;
+  return liChip;
 }

src/components/utils.js

@@ -2,9 +2,9 @@ export function createSelected(element, content, styles) {
   if (content) {
     element.innerHTML = `
       <div class="cg-select">
-          <p class="selected">${content}</p>
-          <div class="caret"></div>
-      </div>
+         <p class="selected">${content}</p>
+           <div class="caret"></div>
+       </div>
       `;
   }
 
@@ -26,29 +26,17 @@ export function customStyles(element, styles) {
   }
 
   const { head, caret, placeholder } = styles;
+
   const cgSelect = element.querySelector('.cg-select');
-  const crt = element.querySelector('.caret');
+  const caretSelect = element.querySelector('.caret');
+  const placeholderSelect = element.querySelector('.selected');
 
-  const placeh = element.querySelector('.selected');
+  customStylesFormat(head, cgSelect);
 
-  if (head) {
-    Object.entries(head).forEach(([key, value]) => {
-      cgSelect.style[key] = value;
-    });
-  }
+  customStylesFormat(caret, caretSelect);
 
-  if (caret) {
-    Object.entries(caret).forEach(([key, value]) => {
-      crt.style[key] = value;
-    });
-  }
-
-  if (placeh) {
-    if (placeholder) {
-      Object.entries(placeholder).forEach(([key, value]) => {
-        placeh.style[key] = value;
-      });
-    }
+  if (placeholderSelect) {
+    customStylesFormat(placeholder, placeholderSelect);
   }
 }
 
@@ -80,3 +68,11 @@ export function getFormatItem(dataItem, index) {
 
   return item;
 }
+
+export function customStylesFormat(elemOption, selector) {
+  if (elemOption) {
+    Object.entries(elemOption).forEach(([key, value]) => {
+      selector.style[key] = value;
+    });
+  }
+}