Fixed bugs

docs/index.html

@@ -43,7 +43,7 @@
           </ul>
           <a href="index.html" class="title">Home</a>
           <a href="/index.html" class="title" style="margin-left: 15px"
-            >Go to CGSelect</a
+            >Example</a
           >
         </div>
         <div class="table-cell" id="tsd-widgets">

example.scss

@@ -1,5 +1,5 @@
 // @import '/src/main.scss';
-@import './src/constructor/constructor.scss';
+@import "./src/constructor/constructor.scss";
 
 * {
   font-size: 14px;
@@ -55,7 +55,7 @@
   h1 {
     font-size: 57px;
     color: white;
-    font-family: 'Times New Roman', Times, serif;
+    font-family: "Times New Roman", Times, serif;
     margin: 40px 0 12px 0;
   }
 
@@ -255,10 +255,29 @@ pre {
     }
   }
 
+  .stylesTheme {
+    width: 100% !important;
+  }
+
   .example-select_title {
     font-size: 14px;
     height: 40px;
   }
+
+  .type {
+    display: none;
+  }
+
+  .row {
+    flex-direction: column;
+
+    .col {
+      width: 100%;
+    }
+  }
+  pre {
+    overflow-x: auto !important;
+  }
 }
 
 .version {

index.html

@@ -250,7 +250,7 @@
 
           <h5 style="margin: 20px 0 5px; text-align: center">Example:</h5>
 
-          <div class="row">
+          <div class="row type">
             <h6>For JS</h6>
             <h6>For TS</h6>
           </div>
@@ -291,7 +291,7 @@
             </code>
           </div>
           <h6>CSS</h6>
-          <code style="display: block; width: 44%">
+          <code style="display: block; width: 44%" class="stylesTheme">
             <pre>
               .headTestClass {
                 background-color: <span class="code__string">#8297ff</span>;

src/constructor/constructor.js

@@ -1,44 +1,45 @@
-import  CGSelect  from 'cg-select';
+import CGSelect from "cg-select";
 
 const body = new CGSelect({
-  selector: '.body',
-  placeholder: 'Select element to style',
-  items: ['head', 'list', 'placeholder', 'caret', 'search'],
+  selector: ".body",
+  placeholder: "Select element to style",
+  items: ["head", "list", "placeholder", "caret", "search"],
 });
 
-let head = '';
-let list = '';
-let placeholder = '';
-let caret = '';
-let valueSelect = '';
+let head = "";
+let list = "";
+let placeholder = "";
+let caret = "";
+let valueSelect = "";
+let search = "";
 
-const textarea = document.querySelector('#styles');
-const renderBtn = document.querySelector('.render');
+const textarea = document.querySelector("#styles");
+const renderBtn = document.querySelector(".render");
 
-body.on('select', (e, value) => {
+body.on("select", (e, value) => {
   valueSelect = value;
-  textarea.value = '';
-  textarea.removeAttribute('disabled');
+  textarea.value = "";
+  textarea.removeAttribute("disabled");
   getValueSelect(valueSelect);
 });
 
 function getValueSelect(value) {
   textarea.onkeyup = function () {
     switch (value) {
-      case 'head':
+      case "head":
         // ввод стилей
         head = textarea.value;
         break;
-      case 'list':
+      case "list":
         list = textarea.value;
         break;
-      case 'placeholder':
+      case "placeholder":
         placeholder = textarea.value;
         break;
-      case 'caret':
+      case "caret":
         caret = textarea.value;
         break;
-      case 'search':
+      case "search":
         search = textarea.value;
         break;
 
@@ -48,36 +49,36 @@ function getValueSelect(value) {
   };
 }
 
-renderBtn.addEventListener('click', () => {
+renderBtn.addEventListener("click", () => {
   const select = new CGSelect({
-    selector: '.select',
-    placeholder: 'Choose a car',
-    label: 'Exemple select',
+    selector: ".select",
+    placeholder: "Choose a car",
     items: [
-      'BMW',
+      "BMW",
       {
-        id: '213sade',
-        title: 'Opel',
+        id: "213sade",
+        title: "Opel",
         value: 1,
       },
-      'Mersedes',
-      'MAN',
-      'Ferari',
+      "Mersedes",
+      "MAN",
+      "Ferari",
     ],
     searchMode: true,
     multiselect: true,
     multiselectTag: true,
   });
 
-  const drop = document.querySelector('.select');
-  let headSelect = drop.querySelector('.cg-select');
-  let listSelect = drop.querySelector('.list');
-  let placeholderSelect = drop.querySelector('.selected');
-  let caretSelect = drop.querySelector('.caret');
-  let searchSelect = drop.querySelector('.inputSearch');
-  headSelect.setAttribute('style', head);
-  listSelect.setAttribute('style', list);
-  placeholderSelect.setAttribute('style', placeholder);
-  caretSelect.setAttribute('style', caret);
-  searchSelect.setAttribute('style', search);
+  const drop = document.querySelector(".select");
+  let headSelect = drop.querySelector(".cg-select");
+  let listSelect = drop.querySelector(".list");
+  let placeholderSelect = drop.querySelector(".selected");
+  let caretSelect = drop.querySelector(".caret");
+  let searchSelect = drop.querySelector(".inputSearch");
+
+  headSelect.setAttribute("style", head);
+  listSelect.setAttribute("style", list);
+  placeholderSelect.setAttribute("style", placeholder);
+  caretSelect.setAttribute("style", caret);
+  searchSelect.setAttribute("style", search);
 });