fix typo

documentation/cg-dropdown.js.html

@@ -25,14 +25,14 @@
             getFormatItem,
             getSelectText,
             customStylesFormat,
-            nativOptionMultiple,
+            nativeOptionMultiple,
-            nativOptionOrdinary,
+            nativeOptionOrdinary,
             clearSelect,
           } from './components/utils';
           import {
             createBreadcrumb,
             createInputSearch,
-            createNativSelectOption,
+            createNativeSelectOption,
             createNativeSelect,
           } from './components/create-element';
           import { ru, en } from './language/language';
@@ -416,19 +416,19 @@
               }
           
               const ulList = document.createElement('ul');
-              const nativSelect = createNativeSelect();
+              const nativeSelect = createNativeSelect();
           
-              let intputSearch = '';
+              let inputSearch = '';
               this.random = random;
           
               if (searchMode) {
                 if (lenguage === 'ru') {
-                  intputSearch = createInputSearch(random, ru.placeholder);
+                  inputSearch = createInputSearch(random, ru.placeholder);
                 } else {
-                  intputSearch = createInputSearch(random, en.placeholder);
+                  inputSearch = createInputSearch(random, en.placeholder);
                 }
           
-                ulList.appendChild(intputSearch);
+                ulList.appendChild(inputSearch);
               }
           
               ulList.classList.add('list');
@@ -441,10 +441,10 @@
               this.#element.appendChild(ulList);
           
               this.#items.forEach((dataItem) => {
-                this.#element.appendChild(nativSelect);
+                this.#element.appendChild(nativeSelect);
           
                 const liItem = document.createElement('li');
-                const nativOption = createNativSelectOption();
+                const nativeOption = createNativeSelectOption();
                 const strongItem = document.createElement('strong');
           
                 liItem.classList.add('list__item');
@@ -460,17 +460,17 @@
                     checkBox.classList.add('displayHide');
                   }
           
-                  nativSelect.setAttribute('multiple', 'multiple');
+                  nativeSelect.setAttribute('multiple', 'multiple');
                 }
           
                 let textNode = '';
           
                 if (dataItem.title) {
-                  nativOption.text = dataItem.title;
+                  nativeOption.text = dataItem.title;
-                  nativOption.value = dataItem.title;
+                  nativeOption.value = dataItem.title;
                   textNode = document.createTextNode(dataItem.title);
           
-                  nativSelect.appendChild(nativOption);
+                  nativeSelect.appendChild(nativeOption);
                   liItem.appendChild(textNode);
                   ulList.appendChild(liItem);
                 } else {
@@ -546,7 +546,7 @@
               const response = await fetch(url);
               const dataUrl = await response.json();
           
-              const nativSelect = createNativeSelect();
+              const nativeSelect = createNativeSelect();
           
               dataUrl.forEach((dataItem, index) => {
                 const item = {
@@ -556,7 +556,7 @@
                 };
                 const ulUrl = this.#element.querySelector('.list');
           
-                const nativOption = createNativSelectOption();
+                const nativeOption = createNativeSelectOption();
                 const liUrl = document.createElement('li');
                 const textUrl = document.createTextNode(item.title);
           
@@ -568,23 +568,23 @@
                   }
           
                   checkBox.setAttribute('id', `chbox-${item.id}`);
-                  nativSelect.setAttribute('multiple', 'multiple');
+                  nativeSelect.setAttribute('multiple', 'multiple');
           
                   liUrl.appendChild(checkBox);
                 }
           
                 liUrl.classList.add('list__item');
-                nativOption.value = item.title;
+                nativeOption.value = item.title;
-                nativOption.text = item.title;
+                nativeOption.text = item.title;
           
-                nativSelect.appendChild(nativOption);
+                nativeSelect.appendChild(nativeOption);
                 liUrl.appendChild(textUrl);
                 ulUrl.appendChild(liUrl);
           
                 this.#items.push(item);
               });
           
-              this.#element.appendChild(nativSelect);
+              this.#element.appendChild(nativeSelect);
           
               this.#items.filter((item, index) => {
                 if (typeof item !== 'object') {
@@ -643,7 +643,7 @@
           
               const options = this.#element.querySelectorAll('.list__item');
               const select = this.#element.querySelector('.selected');
-              const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
+              const nativeOption = this.#element.querySelectorAll('.nativeSelect__nativeOption');
           
               const ulMultipul = document.createElement('ul');
           
@@ -686,7 +686,7 @@
                       }
           
                       if (checkIndex === -1) {
-                        nativOptionMultiple(nativOption, item.title, true);
+                        nativeOptionMultiple(nativeOption, item.title, true);
                         this.#indexes.push(index);
                         select.innerText = '';
           
@@ -714,7 +714,7 @@
           
                         this.#indexes.splice(checkIndex, 1);
                         this.#selectedItems.splice(checkIndex, 1);
-                        nativOptionMultiple(nativOption, item.title, false);
+                        nativeOptionMultiple(nativeOption, item.title, false);
                       }
           
                       if (!this.#selectedItems.length) {
@@ -731,7 +731,7 @@
                     select.innerText = item.title;
                     this.#selectedItems = item;
           
-                    nativOptionOrdinary(nativOption, item.title);
+                    nativeOptionOrdinary(nativeOption, item.title);
           
                     options.forEach((option) => {
                       option.classList.remove('active');

documentation/create-element.js.html

@@ -21,7 +21,7 @@
         <article>
           <pre
             class="prettyprint source linenums"
-          ><code>import { customStylesFormat, nativOptionMultiple } from './utils';
+          ><code>import { customStylesFormat, nativeOptionMultiple } from './utils';
             /**
              * @module createBreadcrumb
              */
@@ -39,7 +39,7 @@
               const { placeholder, styles } = option;
             
               const selected = element.querySelector('.selected');
-              const nativOption = element.querySelectorAll('.nativSelect__nativOption');
+              const nativeOption = element.querySelectorAll('.nativeSelect__nativeOption');
             
               const liChip = document.createElement('li');
               const textNode = document.createTextNode(title);
@@ -67,7 +67,7 @@
               svgIcon.addEventListener('click', (event) => {
                 event.preventDefault();
                 event.stopPropagation();
-                nativOptionMultiple(nativOption, title, false);
+                nativeOptionMultiple(nativeOption, title, false);
             
                 const deleteIcon = indexes.indexOf(index);
                 let checkBox = '';
@@ -99,22 +99,22 @@
              * @returns {HTMLSelectElement} Возвращает созданный нативный селект
              */
             export function createNativeSelect() {
-              const nativSelect = document.createElement('select');
+              const nativeSelect = document.createElement('select');
             
-              nativSelect.setAttribute('name', 'dataSelect');
+              nativeSelect.setAttribute('name', 'dataSelect');
-              nativSelect.classList.add('nativSelect');
+              nativeSelect.classList.add('nativeSelect');
-              return nativSelect;
+              return nativeSelect;
             }
             
             /**
              * Метод который создает Options для нативного селекта
              * @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
              */
-            export function createNativSelectOption() {
+            export function createNativeSelectOption() {
-              const nativOption = document.createElement('option');
+              const nativeOption = document.createElement('option');
             
-              nativOption.classList.add('nativSelect__nativOption');
+              nativeOption.classList.add('nativeSelect__nativeOption');
-              return nativOption;
+              return nativeOption;
             }
             
             /**
@@ -124,23 +124,23 @@
              * @returns {HTMLInputElement} Возвращает сформированный input елемент.
              */
             export function createInputSearch(random, lenguage) {
-              const intputSearch = document.createElement('input');
+              const inputSearch = document.createElement('input');
             
-              intputSearch.type = 'text';
+              inputSearch.type = 'text';
-              intputSearch.classList.add('inputSearch');
+              inputSearch.classList.add('inputSearch');
-              intputSearch.setAttribute('id', `searchSelect-${random}`);
+              inputSearch.setAttribute('id', `searchSelect-${random}`);
             
               if (lenguage) {
-                intputSearch.setAttribute('placeholder', `${lenguage}`);
+                inputSearch.setAttribute('placeholder', `${lenguage}`);
               } else {
-                intputSearch.setAttribute('placeholder', 'Search...');
+                inputSearch.setAttribute('placeholder', 'Search...');
               }
             
-              intputSearch.addEventListener('click', (e) => {
+              inputSearch.addEventListener('click', (e) => {
                 e.preventDefault();
               });
             
-              return intputSearch;
+              return inputSearch;
             }
 </code></pre>
         </article>

documentation/module-Utils.html

@@ -483,8 +483,8 @@
             </dd>
           </dl>
 
-          <h4 class="name" id=".nativOptionMultiple">
+          <h4 class="name" id=".nativeOptionMultiple">
-            <span class="type-signature">(static) </span>nativOptionMultiple<span class="signature"
+            <span class="type-signature">(static) </span>nativeOptionMultiple<span class="signature"
               >(element, item, condition)</span
             ><span class="type-signature"></span>
           </h4>
@@ -552,8 +552,8 @@
             </dd>
           </dl>
 
-          <h4 class="name" id=".nativOptionOrdinary">
+          <h4 class="name" id=".nativeOptionOrdinary">
-            <span class="type-signature">(static) </span>nativOptionOrdinary<span class="signature"
+            <span class="type-signature">(static) </span>nativeOptionOrdinary<span class="signature"
               >(element, item)</span
             ><span class="type-signature"></span>
           </h4>

documentation/module-createElementChips.html

@@ -219,8 +219,8 @@
             </dd>
           </dl>
 
-          <h4 class="name" id=".createNativSelectOption">
+          <h4 class="name" id=".createNativeSelectOption">
-            <span class="type-signature">(static) </span>createNativSelectOption<span
+            <span class="type-signature">(static) </span>createNativeSelectOption<span
               class="signature"
               >()</span
             ><span class="type-signature"> &rarr; {HTMLOptionElement}</span>

documentation/utils.js.html

@@ -155,7 +155,7 @@
             * @param {NodeList} element NodeList нативного селекта
             * @param {object} item выбранный элемент в кастомном селекте
             */
-           export function nativOptionOrdinary(element, item) {
+           export function nativeOptionOrdinary(element, item) {
              element.forEach((option) => {
                option.removeAttribute('selected');
                if (option.textContent === item) {
@@ -170,7 +170,7 @@
             * @param {object} item выбранный элемент в кастомном селекте
             * @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
             */
-           export function nativOptionMultiple(element, item, condition) {
+           export function nativeOptionMultiple(element, item, condition) {
              element.forEach((option) => {
                if (condition == true) {
                  if (option.textContent === item) {

src/cg-select.js

@@ -4,14 +4,14 @@ import {
   getFormatItem,
   getSelectText,
   customStylesFormat,
-  nativOptionMultiple,
+  nativeOptionMultiple,
-  nativOptionOrdinary,
+  nativeOptionOrdinary,
   clearSelect,
 } from './components/utils';
 import {
   createBreadcrumb,
   createInputSearch,
-  createNativSelectOption,
+  createNativeSelectOption,
   createNativeSelect,
 } from './components/create-element';
 import { ru, en } from './language/language';
@@ -217,14 +217,14 @@ export class DropDown {
     }
 
     const select = this.#element.querySelector('.cg-select');
-    const nativSelect = this.#element.querySelector('.nativSelect');
+    const nativeSelect = this.#element.querySelector('.nativeSelect');
     if (value === true) {
       this.#element.setAttribute('disabled', true);
-      nativSelect.setAttribute('disabled', true);
+      nativeSelect.setAttribute('disabled', true);
       select.classList.add('disabled');
     } else {
       this.#element.removeAttribute('disabled');
-      nativSelect.removeAttribute('disabled');
+      nativeSelect.removeAttribute('disabled');
       select.classList.remove('disabled');
     }
   }
@@ -407,20 +407,20 @@ export class DropDown {
     }
 
     const ulList = document.createElement('ul');
-    const nativSelect = createNativeSelect();
+    const nativeSelect = createNativeSelect();
 
-    let intputSearch = '';
+    let inputSearch = '';
     this.random = random;
 
     if (searchMode) {
       if (language === 'ru') {
-        intputSearch = createInputSearch(random, ru.placeholder);
+        inputSearch = createInputSearch(random, ru.placeholder);
       } else {
-        intputSearch = createInputSearch(random, en.placeholder);
+        inputSearch = createInputSearch(random, en.placeholder);
       }
       const { search } = styles;
-      customStylesFormat(search, intputSearch);
+      customStylesFormat(search, inputSearch);
-      ulList.appendChild(intputSearch);
+      ulList.appendChild(inputSearch);
     }
 
     ulList.classList.add('list');
@@ -433,10 +433,10 @@ export class DropDown {
     this.#element.appendChild(ulList);
 
     this.#items.forEach((dataItem) => {
-      this.#element.appendChild(nativSelect);
+      this.#element.appendChild(nativeSelect);
 
       const liItem = document.createElement('li');
-      const nativOption = createNativSelectOption();
+      const nativeOption = createNativeSelectOption();
       const strongItem = document.createElement('strong');
 
       liItem.classList.add('list__item');
@@ -452,17 +452,17 @@ export class DropDown {
           checkBox.classList.add('displayHide');
         }
 
-        nativSelect.setAttribute('multiple', 'multiple');
+        nativeSelect.setAttribute('multiple', 'multiple');
       }
 
       let textNode = '';
 
       if (dataItem.title) {
-        nativOption.text = dataItem.title;
+        nativeOption.text = dataItem.title;
-        nativOption.value = dataItem.title;
+        nativeOption.value = dataItem.title;
         textNode = document.createTextNode(dataItem.title);
 
-        nativSelect.appendChild(nativOption);
+        nativeSelect.appendChild(nativeOption);
         liItem.appendChild(textNode);
         ulList.appendChild(liItem);
       } else {
@@ -538,7 +538,7 @@ export class DropDown {
     const response = await fetch(url);
     const dataUrl = await response.json();
 
-    const nativSelect = createNativeSelect();
+    const nativeSelect = createNativeSelect();
 
     dataUrl.forEach((dataItem, index) => {
       const item = {
@@ -548,7 +548,7 @@ export class DropDown {
       };
       const ulUrl = this.#element.querySelector('.list');
 
-      const nativOption = createNativSelectOption();
+      const nativeOption = createNativeSelectOption();
       const liUrl = document.createElement('li');
       const textUrl = document.createTextNode(item.title);
 
@@ -560,23 +560,23 @@ export class DropDown {
         }
 
         checkBox.setAttribute('id', `chbox-${item.id}`);
-        nativSelect.setAttribute('multiple', 'multiple');
+        nativeSelect.setAttribute('multiple', 'multiple');
 
         liUrl.appendChild(checkBox);
       }
 
       liUrl.classList.add('list__item');
-      nativOption.value = item.title;
+      nativeOption.value = item.title;
-      nativOption.text = item.title;
+      nativeOption.text = item.title;
 
-      nativSelect.appendChild(nativOption);
+      nativeSelect.appendChild(nativeOption);
       liUrl.appendChild(textUrl);
       ulUrl.appendChild(liUrl);
 
       this.#items.push(item);
     });
 
-    this.#element.appendChild(nativSelect);
+    this.#element.appendChild(nativeSelect);
 
     this.#items.filter((item, index) => {
       if (typeof item !== 'object') {
@@ -635,7 +635,7 @@ export class DropDown {
 
     const options = this.#element.querySelectorAll('.list__item');
     const select = this.#element.querySelector('.selected');
-    const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
+    const nativeOption = this.#element.querySelectorAll('.nativeSelect__nativeOption');
 
     const ulMultipul = document.createElement('ul');
 
@@ -678,7 +678,7 @@ export class DropDown {
             }
 
             if (checkIndex === -1) {
-              nativOptionMultiple(nativOption, item.title, true);
+              nativeOptionMultiple(nativeOption, item.title, true);
               this.#indexes.push(index);
               select.innerText = '';
 
@@ -706,7 +706,7 @@ export class DropDown {
 
               this.#indexes.splice(checkIndex, 1);
               this.#selectedItems.splice(checkIndex, 1);
-              nativOptionMultiple(nativOption, item.title, false);
+              nativeOptionMultiple(nativeOption, item.title, false);
             }
 
             if (!this.#selectedItems.length) {
@@ -723,7 +723,7 @@ export class DropDown {
           select.innerText = item.title;
           this.#selectedItems = item;
 
-          nativOptionOrdinary(nativOption, item.title);
+          nativeOptionOrdinary(nativeOption, item.title);
 
           options.forEach((option) => {
             option.classList.remove('active');

src/components/create-element.js

@@ -1,4 +1,4 @@
-import { customStylesFormat, nativOptionMultiple } from './utils';
+import { customStylesFormat, nativeOptionMultiple } from './utils';
 /**
  * @module createBreadcrumb
  */
@@ -16,7 +16,7 @@ export function createBreadcrumb(data, title, index, id) {
   const { placeholder, styles } = option;
 
   const selected = element.querySelector('.selected');
-  const nativOption = element.querySelectorAll('.nativSelect__nativOption');
+  const nativeOption = element.querySelectorAll('.nativeSelect__nativeOption');
 
   const liChip = document.createElement('li');
   const textNode = document.createTextNode(title);
@@ -44,7 +44,7 @@ export function createBreadcrumb(data, title, index, id) {
   svgIcon.addEventListener('click', (event) => {
     event.preventDefault();
     event.stopPropagation();
-    nativOptionMultiple(nativOption, title, false);
+    nativeOptionMultiple(nativeOption, title, false);
 
     const deleteIcon = indexes.indexOf(index);
     let checkBox = '';
@@ -76,22 +76,22 @@ export function createBreadcrumb(data, title, index, id) {
  * @returns {HTMLSelectElement} Возвращает созданный нативный селект
  */
 export function createNativeSelect() {
-  const nativSelect = document.createElement('select');
+  const nativeSelect = document.createElement('select');
 
-  nativSelect.setAttribute('name', 'dataSelect');
+  nativeSelect.setAttribute('name', 'dataSelect');
-  nativSelect.classList.add('nativSelect');
+  nativeSelect.classList.add('nativeSelect');
-  return nativSelect;
+  return nativeSelect;
 }
 
 /**
  * Метод который создает Options для нативного селекта
  * @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
  */
-export function createNativSelectOption() {
+export function createNativeSelectOption() {
-  const nativOption = document.createElement('option');
+  const nativeOption = document.createElement('option');
 
-  nativOption.classList.add('nativSelect__nativOption');
+  nativeOption.classList.add('nativeSelect__nativeOption');
-  return nativOption;
+  return nativeOption;
 }
 
 /**
@@ -101,21 +101,21 @@ export function createNativSelectOption() {
  * @returns {HTMLInputElement} Возвращает сформированный input елемент.
  */
 export function createInputSearch(random, lenguage) {
-  const intputSearch = document.createElement('input');
+  const inputSearch = document.createElement('input');
 
-  intputSearch.type = 'text';
+  inputSearch.type = 'text';
-  intputSearch.classList.add('inputSearch');
+  inputSearch.classList.add('inputSearch');
-  intputSearch.setAttribute('id', `searchSelect-${random}`);
+  inputSearch.setAttribute('id', `searchSelect-${random}`);
 
   if (lenguage) {
-    intputSearch.setAttribute('placeholder', `${lenguage}`);
+    inputSearch.setAttribute('placeholder', `${lenguage}`);
   } else {
-    intputSearch.setAttribute('placeholder', 'Search...');
+    inputSearch.setAttribute('placeholder', 'Search...');
   }
 
-  intputSearch.addEventListener('click', (e) => {
+  inputSearch.addEventListener('click', (e) => {
     e.preventDefault();
   });
 
-  return intputSearch;
+  return inputSearch;
 }

src/components/utils.js

@@ -134,7 +134,7 @@ export function getFormatItem(dataItem, index) {
  * @param {NodeList} element NodeList нативного селекта
  * @param {object} item выбранный элемент в кастомном селекте
  */
-export function nativOptionOrdinary(element, item) {
+export function nativeOptionOrdinary(element, item) {
   element.forEach((option) => {
     option.removeAttribute('selected');
     if (option.textContent === item) {
@@ -149,7 +149,7 @@ export function nativOptionOrdinary(element, item) {
  * @param {object} item выбранный элемент в кастомном селекте
  * @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
  */
-export function nativOptionMultiple(element, item, condition) {
+export function nativeOptionMultiple(element, item, condition) {
   element.forEach((option) => {
     if (condition == true) {
       if (option.textContent === item) {

src/index.js

@@ -0,0 +1,3 @@
+import { DropDown } from './cg-select';
+
+export default DropDown;

src/language/language.js

@@ -5,7 +5,7 @@ export const ru = {
 };
 
 export const en = {
-  selectPlaceholder: 'Select...',
+  selectPlaceholder: 'Select element...',
   placeholder: 'Search...',
   textInListSearch: 'No matches...',
 };

src/main.scss

@@ -1,5 +1,5 @@
-@import './style/nativSelect.scss';
+@import './style/nativeSelect.scss';
-@import './style/scrolbar.scss';
+@import './style/scrollbar.scss';
 @import './style/svgStyle.scss';
 @import './style/whiteTheme.scss';
 

src/page/index.js

@@ -1,4 +1,4 @@
-import { DropDown } from '../cg-select';
+import DropDown from '../index';
 import './example';
 
 // ------------------------------Обычный селект--------------------

src/style/nativeSelect.scss

@@ -1,4 +1,4 @@
-.nativSelect {
+.nativeSelect {
   border: none;
   cursor: pointer;
   display: none;
@@ -13,13 +13,13 @@
   -o-border-radius: 5px;
   margin: 0;
 
-  &__nativOption {
+  &__nativeOption {
     border: 1px #0a0b0e solid;
   }
 }
 
 // @media (max-width: 576px) {
-//   .nativSelect {
+//   .nativeSelect {
 //     display: block;
 //     min-width: 235px;
 //     height: 50px;