From 0fcb6c992635f30c2d8b069b34c70e10c6268700 Mon Sep 17 00:00:00 2001
From: MaxOvs <rock_maksimus@mail.ru>
Date: Fri, 14 Oct 2022 15:26:17 +0300
Subject: [PATCH] Decor in categories, and testing methods

---
 src/cg-dropdown.js  |  5 ++++-
 src/index.js        |  4 ++--
 src/style/main.scss | 15 +++++++++++++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js
index 75f6443..01e16e6 100644
--- a/src/cg-dropdown.js
+++ b/src/cg-dropdown.js
@@ -50,12 +50,14 @@ export class DropDown {
 
   selectIndex(index) {
     const options = this.#element.querySelectorAll('.list__item');
+    // const selected = this.#element.querySelector('.selected');
 
     if (index > options.length) {
       return;
     }
 
     const select = options[index].innerText;
+    // selected.innerText = select;
 
     this.#render(select);
   }
@@ -164,7 +166,6 @@ export class DropDown {
     } else {
       this.#initSelected();
     }
-
     const ulList = document.createElement('ul');
 
     if (styles) {
@@ -178,6 +179,7 @@ export class DropDown {
     }
 
     ulList.classList.add('list');
+
     this.#element.appendChild(ulList);
 
     this.#items.forEach((dataItem) => {
@@ -185,6 +187,7 @@ export class DropDown {
       const strongItem = document.createElement('strong');
 
       liItem.classList.add('list__item');
+      strongItem.classList.add('category');
 
       if (multiselect) {
         const checkBox = document.createElement('input');
diff --git a/src/index.js b/src/index.js
index 3e3e164..ab77509 100644
--- a/src/index.js
+++ b/src/index.js
@@ -101,10 +101,10 @@ const dropdown4 = new DropDown({
   multiselect: true,
   multiselectTag: true,
 });
-// dropdown4.selectIndex(5);
 
 // dropdown4.addItem('Харьков');
-// dropdown4.disabled(true);
+// dropdown4.deleteItemAll();
+// dropdown4.selectIndex(5);
 
 // const buttonOpen = document.querySelector('.button__open');
 // const buttonClose = document.querySelector('.button__close');
diff --git a/src/style/main.scss b/src/style/main.scss
index 1445e0a..52a12d8 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -146,6 +146,16 @@ body {
   }
 }
 
+.category {
+  height: 20px;
+  margin: 6px 5px 0 7px;
+  font-size: 17px;
+  border-bottom: 1px solid;
+
+  display: flex;
+  align-items: center;
+}
+
 input[type='checkbox'] {
   cursor: pointer;
   margin: 0 5px 0 0;
@@ -164,6 +174,7 @@ input[type='checkbox'] {
     background-color: #ffffff;
   }
 }
+
 .svg-icon path {
   color: black;
   stroke: currentcolor;
@@ -179,6 +190,10 @@ input[type='checkbox'] {
   transition: 0.5s;
   display: block;
   opacity: 1;
+
+  &_none {
+    opacity: 0 !important;
+  }
 }
 
 ::-webkit-scrollbar {