Finish update 0.2.

CHANGELOG.md

@@ -47,4 +47,9 @@ Tested in JS and React. Errors in work in React applications are revealed.
 - Documentation navigation update.
 - Added icon for example page and documentation.
 
-##### 00.02.2023 - update 0.2.34
+### 20.02.2023 - update 0.2.4
+
+- Added ability to create custom themes.
+- Added style builder on homepage.
+- Fixed documentation.
+- Added a block describing how to create your own themes.

README.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## version ~ 0.2.34
+## version ~ 0.2.4
 
 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.34
+## version ~ 0.2.4
 
 Этот компонент позволяет вам создать пользовательский 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.34</h2>
+            <h2>version ~ 0.2.4</h2>
           </a>
           <p>
             This component allows you to create a custom select. It offers more flexible

example/example.scss

@@ -43,6 +43,7 @@
 }
 
 .header {
+  position: relative;
   width: 100%;
   border-radius: 5px;
   display: flex;
@@ -161,6 +162,7 @@
 
 .description-theme {
   color: white;
+
   .col {
     width: 54%;
   }
@@ -258,3 +260,11 @@ pre {
     height: 40px;
   }
 }
+
+.version {
+  position: absolute;
+  color: white;
+  font-size: 10px;
+  right: 20px;
+  bottom: 0px;
+}

example/index.html

@@ -31,6 +31,7 @@
             <li><a href="/docs/index.html">Documentation</a></li>
           </ul>
         </nav>
+        <p class="version">v. 0.2.4</p>
       </header>
     </div>
 
@@ -193,7 +194,7 @@
       </div>
 
       <div class="example-select description-theme">
-        <h1 class="example-select_title">Setting up and adding a theme.</h1>
+        <h1 class="example-select_title">Setting up and adding a theme</h1>
 
         <div class="layout-select">
           <div class="row">
@@ -322,33 +323,38 @@
 
       <div class="example-select">
         <h1 class="example-select_title">Select constructor</h1>
-        <div class="col" style="margin: 20px; color: white">
+        <div class="row" style="margin: 20px; color: white">
-          <h5 style="font-size: 18px">Select Style Builder:</h5>
+          <div class="col">
-          <p style="margin-right: 50px; font-size: 17px">
+            <h5 style="font-size: 18px; margin: 0;">Select Style Builder:</h5>
-            This is a constructor for styling a select online without downloading. For it to work,
+            <p style="margin-right: 50px; font-size: 17px">
-            you need to: 
+              This is a constructor for styling a select online without downloading. For it to work,
-            <ol style="font-size: 15px;">
+              you need to: 
-              <li>Select a part of the select for customization. </li>
+              <ol style="font-size: 15px;">
-              <li>Enter styles in the text field in the form "color: red;".</li>
+                <li class="liList">Select a part of the select for customization. </li>
-              <li>Click on the render button.</li>
+                <li  class="liList">Enter styles in the text field in the form "color: red;".</li>
-            </ol>
+                <li  class="liList">Click on the render button.</li>
-             
+              </ol>
-          </p>
+            </p>
+          </div>
+          <div class="col">
+            <div class="layout-select constructor">
+              <button class="cg-dropdown body"></button>
+              <textarea
+                name="styles"
+                id="styles"
+                cols="30"
+                rows="5"
+                class="textareaStyle"
+                placeholder="Enter CSS properties"
+                disabled="disabled"
+              ></textarea>
+              <button type="button" class="check-code render">Render</button>
+            </div>
+           
+          </div>
+          
         </div>
-        <div class="layout-select constructor">
+        <div class="layout-select constructor" style="margin-bottom: 60px;">
-          <button class="cg-dropdown body"></button>
-          <textarea
-            name="styles"
-            id="styles"
-            cols="30"
-            rows="5"
-            class="textareaStyle"
-            placeholder="Enter CSS properties"
-            disabled="disabled"
-          ></textarea>
-          <button type="button" class="check-code render">Render</button>
-        </div>
-        <div class="layout-select constructor">
           <button class="cg-dropdown select"></button>
         </div>
       </div>

example/src/constructor/constructor.js

@@ -52,6 +52,7 @@ renderBtn.addEventListener('click', () => {
   const select = new CGSelect({
     selector: '.select',
     placeholder: 'Choose a car',
+    label: 'Exemple select',
     items: [
       'BMW',
       {

example/src/constructor/constructor.scss

@@ -1,10 +1,16 @@
 .textareaStyle {
   resize: none;
   border-radius: 5px;
-  margin-left: 53px;
+  margin: 15px;
 }
 
 .constructor {
   display: flex;
   align-items: center;
+  flex-direction: column;
+}
+
+.liList {
+  margin-bottom: 5px;
+  font-size: 17px;
 }

package-lock.json

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

package.json

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