Update in main brench

CHANGELOG.md

@@ -0,0 +1,14 @@
+# CG-SELECT
+
+## 16.12.2022 - релиз версии 0.1.0!
+
+### 20.12.2022 - обновление 0.1.12.
+
+Проведены тесты в JS и React. Выявленны ошибки в работе в Реакт приложениях.
+
+- Изменена файловая структура приложения.
+
+### 22.12.2022 - обновление 0.1.14.
+
+- Изменеия в расположении файлов scss.
+- Исправлено влияние стилей селекта на JS приложение.

README.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## version ~ 0.0.1
+## version ~ 0.1.14
 
 Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта.
 Доступна кастомизация, мультивыбор и живой поиск по елементам.
@@ -16,7 +16,9 @@
 
 ## Installation
 
-TODO: Describe the installation process
+```
+npm i cg-select
+```
 
 ## Usage
 
@@ -43,7 +45,8 @@ TODO: Describe the installation process
 ### Пример создния обычного селекта
 
 ```javascript
-import { DropDown } from './cg-dropdown';
+import { DropDown } from 'cg-select/src/cg-select';
+import 'cg-select/src/main.scss';
 
 const dropdown = new DropDown({
   selector: '.cg-dropdown_selector',
@@ -62,7 +65,7 @@ const dropdown = new DropDown({
 });
 ```
 
-## Примеры разных селектов
+## Пример разных селектов
 
 Так же рабочий пример -- https://cg-select.itguild.info/
 
@@ -73,7 +76,7 @@ const dropdown = new DropDown({
 
 Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select.
 
-**Чтобы ознакомиться с ней, перейдите по ссылке -** https://maxovs19.github.io/cg-select/up_/documentation/index.html
+**Чтобы ознакомиться с ней, перейдите по ссылке -** https://cg-select.itguild.info/up_/up_/documentation/index.html
 
 ## Contributing
 
@@ -85,4 +88,4 @@ const dropdown = new DropDown({
 
 ## History
 
-TODO: Write history
+16.12.2022 - релиз версии 0.1.0!

documentation/index.html

@@ -19,7 +19,7 @@
 
       <section>
         <h2>CG-SELECT</h2>
-        <a href="../src/index.html">-- Вернуться к примеру --</a>
+        <a href="/src/page/index.html">-- Вернуться к примеру --</a>
         <p>
           Этот компонент предлагает более гибкую настройку и использование селекта. Так же
           реализованны методы взаимодействия с селектом.

package.json

@@ -1,10 +1,11 @@
 {
-  "name": "dropdown-list",
-  "version": "0.0.1",
-  "description": "",
+  "name": "cg-select",
+  "version": "0.1.14",
+  "description": "Select control created with JS for use in JS/React",
+  "author": "MaxOvs19",
   "scripts": {
-    "start": "parcel src/index.html -p 4500 --open ",
-    "build": "parcel build ./src/index.html  --public-url /",
+    "start": "parcel src/page/index.html -p 4500 --open ",
+    "build": "parcel build ./src/page/index.html",
     "deploy": "gh-pages -d dist",
     "predeploy": "npm run build"
   },
@@ -12,7 +13,7 @@
     "type": "git",
     "url": "git+https://github.com/MaxOvs19/cg-select.git"
   },
-  "author": "MaxOvs19",
+
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/MaxOvs19/cg-select/issues"

src/cg-select.js

@@ -16,6 +16,8 @@ import {
 } from './components/create-element';
 import { ru, en } from './language/language';
 
+
+
 /**
  * @class Описание класса DropDown
  * @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
@@ -309,9 +311,10 @@ export class DropDown {
 
     const elem = document.querySelector(options.selector);
 
-    if (!elem) {
-      throw new Error(`Element with selector ${options.selector}`);
-    }
+    //TODO: для теста в реакте нужно пересмотреть необходимость этой проверки!
+    // if (!elem) {
+    //   throw new Error(`Element with selector ${options.selector}`);
+    // }
 
     this.#element = elem;
 
@@ -396,8 +399,6 @@ export class DropDown {
    */
   #render(select) {
     const { styles, multiselect, searchMode, multiselectTag, darkTheme, language } = this.#options;
-    const { list, search } = styles;
-
     const random = Math.random().toString(36).substring(2, 10);
 
     if (select || (select && styles)) {
@@ -419,6 +420,7 @@ export class DropDown {
       } else {
         intputSearch = createInputSearch(random, en.placeholder);
       }
+      const { search } = styles;
       customStylesFormat(search, intputSearch);
       ulList.appendChild(intputSearch);
     }
@@ -426,6 +428,7 @@ export class DropDown {
     ulList.classList.add('list');
 
     if (styles) {
+      const { list } = styles;
       customStylesFormat(list, ulList);
     }
 

src/main.scss

@@ -1,37 +1,7 @@
-@import './nativSelect.scss';
-@import './scrolbar.scss';
-@import './whiteTheme.scss';
-@import './svgStyle.scss';
-@import './ExemplePage.scss';
-
-* {
-  font-size: 14px;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-body {
-  background: #000000c4;
-}
-
-.container {
-  margin: 0 auto;
-  width: 900px;
-
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
+@import './style/nativSelect.scss';
+@import './style/scrolbar.scss';
+@import './style/svgStyle.scss';
+@import './style/whiteTheme.scss';
 
 // ----Layout----
 .cg-dropdown {
@@ -340,14 +310,25 @@ input[type='checkbox'] {
   }
 
   .list {
-    display: none !important;
+    width: 98% !important;
   }
 
-  .open {
-    display: none !important;
-  }
+  // .open {
+  //   display: none !important;
+  // }
 
   .cg-select {
-    display: none !important;
+    width: 100% !important;
+  }
+
+  .example-select {
+    &_title {
+      padding: 24px 0 0px 15px;
+      font-size: 16px;
+    }
+  }
+
+  pre {
+    overflow-x: scroll;
   }
 }

src/page/ExemplePage.scss

@@ -1,3 +1,34 @@
+@import '/src/main.scss';
+
+* {
+  font-size: 14px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.body-example {
+  background: #000000c4;
+}
+
+.container {
+  margin: 0 auto;
+  width: 900px;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
 .header {
   width: 100%;
   border-radius: 5px;

src/page/index.html

@@ -5,9 +5,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cg-Select</title>
-    <link href="style/main.scss" rel="stylesheet" />
+    <link href="/src/page/ExemplePage.scss" rel="stylesheet" />
   </head>
-  <body>
+  <body class="body-example">
     <div class="container">
       <header class="header">
         <div class="header__logoBox">
@@ -18,7 +18,7 @@
         <nav>
           <ul class="navlist">
             <li><a href="">Home</a></li>
-            <li><a href="../documentation/index.html">Documentation</a></li>
+            <li><a href="/documentation/index.html">Documentation</a></li>
           </ul>
         </nav>
       </header>
@@ -126,7 +126,12 @@
                 },
                 {
                   category: <span class="code__string">'USA',</span>
-                  categoryItems: <span class="code__string">['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],</span>
+                  categoryItems: <span class="code__string">[
+                    'Alabama', 
+                    'Texas', 
+                    'Colorado', 
+                    'Klirens', 
+                    'Los-Angeles'],</span>
                 },
                 {
                   category: <span class="code__string">'France',</span>
@@ -225,7 +230,7 @@
             <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
               selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span> 
               placeholder: <span class="code__string">'Выберите авто',</span> 
-              lable: <span class="code__string">'EXAMPLE',</span> 
+              searchMode: <span class="code__keyword">true,</span>
               items: [
                 <span class="code__string">'BMW',</span>
                 {
@@ -254,5 +259,5 @@
       </div>
     </div>
   </body>
-  <script type="module" src="/src/index.js"></script>
+  <script type="module" src="index.js"></script>
 </html>

src/page/index.js

@@ -1,5 +1,5 @@
-import { DropDown } from './cg-dropdown';
-import './exemple-page';
+import { DropDown } from '../cg-select';
+import './example';
 
 // ------------------------------Обычный селект--------------------
 const dropdown = new DropDown({

src/style/nativSelect.scss

@@ -18,19 +18,19 @@
   }
 }
 
-@media (max-width: 576px) {
-  .nativSelect {
-    display: block;
-    min-width: 235px;
-    height: 50px;
+// @media (max-width: 576px) {
+//   .nativSelect {
+//     display: block;
+//     min-width: 235px;
+//     height: 50px;
 
-    border: none;
-    border-radius: 10px;
-  }
+//     border: none;
+//     border-radius: 10px;
+//   }
 
-  select[multiple='multiple'] {
-    color: black;
-    background-color: white;
-    border-radius: 0;
-  }
-}
+//   select[multiple='multiple'] {
+//     color: black;
+//     background-color: white;
+//     border-radius: 0;
+//   }
+// }