Added constructor select(css) and tested his

CHANGELOG.md

@@ -46,3 +46,5 @@ Tested in JS and React. Errors in work in React applications are revealed.
 - Fixing bugs related to the cleanup of the select.
 - Documentation navigation update.
 - Added icon for example page and documentation.
+
+##### 00.02.2023 - update 0.2.34

README.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## version ~ 0.2.33
+## version ~ 0.2.34
 
 This component allows you to create a custom select. It offers more flexible customization and use of select.
 Customization, multi-selection and live search by elements are available.

READMERU.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## version ~ 0.2.33
+## version ~ 0.2.34
 
 Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select.
 Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое.

docs/index.html

@@ -62,7 +62,7 @@
           </a>
 
           <a href="#version--0231" id="version--0231" style="color: inherit; text-decoration: none">
-            <h2>version ~ 0.2.33</h2>
+            <h2>version ~ 0.2.34</h2>
           </a>
           <p>
             This component allows you to create a custom select. It offers more flexible

example/index.html

@@ -331,6 +331,7 @@
             rows="5"
             class="textareaStyle"
             placeholder="Enter CSS properties"
+            disabled="disabled"
           ></textarea>
           <button type="button" class="check-code render">Render</button>
           <button type="button" class="check-code saveStyle">Save style</button>

example/src/constructor/constructor.js

@@ -3,7 +3,7 @@ import { CGSelect } from '../../../src/cg-select';
 const body = new CGSelect({
   selector: '.body',
   placeholder: 'Select element to style',
-  items: ['head', 'list', 'placeholder', 'caret', 'search', 'chips', 'lable'],
+  items: ['head', 'list', 'placeholder', 'caret', 'search', 'chips'],
 });
 
 let head = '';
@@ -11,7 +11,6 @@ let list = '';
 let placeholder = '';
 let caret = '';
 let chips = '';
-let lable = '';
 let valueSelect = '';
 
 const textarea = document.querySelector('#styles');
@@ -20,44 +19,41 @@ const saveStyleBtn = document.querySelector('.saveStyle');
 
 body.on('select', (e, value) => {
   valueSelect = value;
+  textarea.value = '';
+  textarea.removeAttribute('disabled');
   getValueSelect(valueSelect);
 });
 
 function getValueSelect(value) {
-  switch (value) {
-    case 'head':
-      // ввод стилей
-      // background: red;
-      textarea.onkeyup = function () {
-        console.log(textarea.value);
+  textarea.onkeyup = function () {
+    switch (value) {
+      case 'head':
+        // ввод стилей
         head = textarea.value;
-      };
-      break;
-    case 'list':
-      break;
-    case 'placeholder':
-      break;
-    case 'caret':
-      break;
-    case 'search':
-      break;
-    case 'chips':
-      break;
-    case 'lable':
-      break;
+        break;
+      case 'list':
+        list = textarea.value;
+        break;
+      case 'placeholder':
+        placeholder = textarea.value;
+        break;
+      case 'caret':
+        caret = textarea.value;
+        break;
+      case 'search':
+        search = textarea.value;
+        break;
+      case 'chips':
+        chips = textarea.value;
+        break;
 
-    default:
-      break;
-  }
+      default:
+        break;
+    }
+  };
 }
 
-// Рендер селекта со стилями
 renderBtn.addEventListener('click', () => {
-  // debugger;
-  // let HEAD = {
-  //   key[0]: key[1]
-  // };
-
   const select = new CGSelect({
     selector: '.select',
     placeholder: 'Choose a car',
@@ -72,16 +68,18 @@ renderBtn.addEventListener('click', () => {
       'MAN',
       'Ferari',
     ],
-    styles: {
-      head: {
-        background: head,
-      },
-      placeholder: {},
-      list: {},
-      caret: {},
-      chips: {},
-      search: {},
-      lable: {},
-    },
+    searchMode: 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);
 });

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cg-select",
-  "version": "0.2.33",
+  "version": "0.2.34",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cg-select",
-      "version": "0.2.33",
+      "version": "0.2.34",
       "license": "ISC",
       "dependencies": {
         "@parcel/optimizer-css": "^2.8.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cg-select",
-  "version": "0.2.33",
+  "version": "0.2.34",
   "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
   "author": {
     "name": "CraftGroup",