Debuging and repare code

example/index.html

@@ -27,7 +27,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>
@@ -356,5 +356,5 @@
     </div>
   </body>
   <script type="module" src="index.js"></script>
-  <script type="module" src="indexTs.ts"></script>
+  <!-- <script type="module" src="indexTs.ts"></script> -->
 </html>

example/index.js

@@ -1,34 +1,34 @@
-import DropDown from '../index';
+import { CGSelect } from '../src/cg-selectTS';
 import './example';
 
 // ------------------------------Обычный селект--------------------
-// const dropdown = new DropDown({
+const dropdown = new CGSelect({
-//   selector: '.cg-dropdown_one',
+  selector: '.cg-dropdown_one',
-//   placeholder: 'Выберите авто',
+  placeholder: 'Выберите авто',
-//   lable: 'EXAMPLE',
+  lable: 'EXAMPLE',
-//   items: [
+  items: [
-//     'BMW',
+    'BMW',
-//     {
+    {
-//       id: '213sade',
+      id: '213sade',
-//       title: 'Opel',
+      title: 'Opel',
-//       value: 1,
+      value: 1,
-//     },
+    },
-//     'Mersedes',
+    'Mersedes',
-//     'MAN',
+    'MAN',
-//     'Ferari',
+    'Ferari',
-//   ],
+  ],
-//   styles: {
+  styles: {
-//     head: {
+    head: {
-//       width: '830px',
+      width: '830px',
-//     },
+    },
-//     list: {
+    list: {
-//       width: '824px',
+      width: '824px',
-//     },
+    },
-//   },
+  },
-// });
+});
 
 // ------------------------------NativeSelect-----------------------
-const dropdownNativeSelect = new DropDown({
+const dropdownNativeSelect = new CGSelect({
   selector: '.cg-dropdown_selectNative',
   placeholder: 'Выберите авто',
   nativeSelectMode: true,
@@ -43,7 +43,7 @@ const dropdownNativeSelect = new DropDown({
     'MAN',
     'Ferari',
     'Kamaz',
-    'Ural'
+    'Ural',
   ],
   styles: {
     head: {
@@ -56,7 +56,7 @@ const dropdownNativeSelect = new DropDown({
 });
 
 // ------------------------------listDisplayMode--------------------
-const dropdownlistDisplayMode = new DropDown({
+const dropdownlistDisplayMode = new CGSelect({
   selector: '.cg-dropdown_listDisplayMode',
   placeholder: 'Выберите авто',
   listDisplayMode: true,
@@ -81,26 +81,8 @@ const dropdownlistDisplayMode = new DropDown({
   },
 });
 
-// ------------------------------URL--------------------
-const dropdown3 = new DropDown({
-  selector: '.cg-dropdown_three',
-  placeholder: 'URL',
-  url: 'https://jsonplaceholder.typicode.com/users',
-  searchMode: true,
-  darkTheme: false,
-  language: 'ru',
-  styles: {
-    head: {
-      width: '830px',
-    },
-    list: {
-      width: '824px',
-    },
-  },
-});
-
 // --------------------------------Категории--------------------------
-const dropdown4 = new DropDown({
+const dropdown4 = new CGSelect({
   selector: '.cg-dropdown_categories',
   placeholder: 'Выберите регион',
   searchMode: true,
@@ -145,7 +127,7 @@ const dropdown4 = new DropDown({
 });
 
 //----------------управление с помощью кнопок----------------------------------
-const dropdownBtn = new DropDown({
+const dropdownBtn = new CGSelect({
   selector: '.cg-dropdown_usedBtn',
   placeholder: 'Выберите авто',
   searchMode: true,
@@ -192,7 +174,7 @@ dropdownBtn.buttonControl(buttonOpen, 'open');
 dropdownBtn.buttonControl(buttonClose, 'close');
 
 //-------------------------Функция Disabled----------------------------------
-const dropdownDisabled = new DropDown({
+const dropdownDisabled = new CGSelect({
   selector: '.cg-dropdown_checkboxDisable',
   placeholder: 'Выберите авто',
   searchMode: true,
@@ -230,3 +212,22 @@ chbox.addEventListener('click', () => {
     dropdownDisabled.disabled(true);
   }
 });
+
+// ------------------------------URL--------------------
+const dropdown3 = new CGSelect({
+  selector: '.cg-dropdown_three',
+  placeholder: 'URL',
+  url: 'https://jsonplaceholder.typicode.com/todos',
+  searchMode: true,
+  darkTheme: false,
+  language: 'ru',
+  styles: {
+    head: {
+      width: '830px',
+    },
+    list: {
+      width: '824px',
+    },
+  },
+  multiselect: true,
+});

example/indexTs.ts

@@ -1,36 +1,234 @@
-import { CGSelect } from '../src/cg-selectTS';
+// import { CGSelect } from '../src/cg-selectTS';
+// import './example';
 
-const dropdn = new CGSelect({
+// // ------------------------------Обычный селект--------------------
-  selector: '.cg-dropdown_one',
+// const dropdn = new CGSelect({
-  placeholder: 'Выберите авто',
+//   selector: '.cg-dropdown_one',
-  items: [
+//   placeholder: 'Выберите авто',
-    'BMW',
+//   lable: 'EXAMPLE',
-    {
+//   items: [
-      id: '213sade',
+//     'BMW',
-      title: 'Opel',
+//     {
-      value: 1,
+//       id: '213sade',
-    },
+//       title: 'Opel',
-    'Mersedes',
+//       value: 1,
-    'MAN',
+//     },
-    'max',
+//     'Mersedes',
-  ],
+//     'MAN',
-  styles: {
+//     'Ferari',
-    head: {
+//   ],
-      width: '830px',
+//   styles: {
-    },
+//     head: {
-    list: {
+//       width: '830px',
-      width: '824px',
+//     },
-    },
+//     list: {
-    placeholder: {
+//       width: '824px',
-      maxWidth: '500px ',
+//     },
-    },
+//   },
-  },
+// });
-  // url
+
-  // listDisplayMode: true,
+// // ------------------------------NativeSelect-----------------------
-  // searchMode: true,
+// const dropdownNativeSelect = new CGSelect({
-  // nativeSelectMode: true
+//   selector: '.cg-dropdown_selectNative',
-  // event: 'mouseenter',
+//   placeholder: 'Выберите авто',
-  // buttonControl
+//   nativeSelectMode: true,
-  multiselect: true,
+//   items: [
-  multiselectTag: true,
+//     'BMW',
-});
+//     {
+//       id: '213sade',
+//       title: 'Opel',
+//       value: 1,
+//     },
+//     'Mersedes',
+//     'MAN',
+//     'Ferari',
+//     'Kamaz',
+//     'Ural',
+//   ],
+//   styles: {
+//     head: {
+//       width: '830px',
+//     },
+//     list: {
+//       width: '824px',
+//     },
+//   },
+// });
+
+// // console.log();
+
+// // ------------------------------listDisplayMode--------------------
+// const dropdownlistDisplayMode = new CGSelect({
+//   selector: '.cg-dropdown_listDisplayMode',
+//   placeholder: 'Выберите авто',
+//   listDisplayMode: true,
+//   items: [
+//     'BMW',
+//     {
+//       id: '213sade',
+//       title: 'Opel',
+//       value: 1,
+//     },
+//     'Mersedes',
+//     'MAN',
+//     'Ferari',
+//   ],
+//   styles: {
+//     head: {
+//       width: '830px',
+//     },
+//     list: {
+//       width: '824px',
+//     },
+//   },
+// });
+
+// // ------------------------------URL--------------------
+// const dropdown3 = new CGSelect({
+//   selector: '.cg-dropdown_three',
+//   placeholder: 'URL',
+//   url: 'https://jsonplaceholder.typicode.com/users',
+//   searchMode: true,
+//   darkTheme: false,
+//   language: 'ru',
+//   styles: {
+//     head: {
+//       width: '830px',
+//     },
+//     list: {
+//       width: '824px',
+//     },
+//   },
+// });
+
+// // --------------------------------Категории--------------------------
+// const dropdown4 = new CGSelect({
+//   selector: '.cg-dropdown_categories',
+//   placeholder: 'Выберите регион',
+//   searchMode: true,
+//   items: [
+//     {
+//       category: 'Russia',
+//       categoryItems: [
+//         {
+//           id: '28qwds',
+//           title: 'Москва',
+//           value: 0,
+//         },
+//         ,
+//         'Ростов-на-дону',
+//         'Саратов',
+//         'Волгоград',
+//         'Донецк',
+//       ],
+//     },
+//     {
+//       category: 'USA',
+//       categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
+//     },
+//     {
+//       category: 'France',
+//       categoryItems: ['Paris'],
+//     },
+//   ],
+//   styles: {
+//     head: {
+//       width: '830px',
+//     },
+//     list: {
+//       width: '824px',
+//     },
+//     placeholder: {
+//       maxWidth: '500px ',
+//     },
+//   },
+//   multiselect: true,
+//   multiselectTag: true,
+// });
+
+// //----------------управление с помощью кнопок----------------------------------
+// const dropdownBtn = new CGSelect({
+//   selector: '.cg-dropdown_usedBtn',
+//   placeholder: 'Выберите авто',
+//   searchMode: true,
+//   items: [
+//     'BMW',
+//     {
+//       id: '213sade',
+//       title: 'Opel',
+//       value: 1,
+//     },
+//     'Mersedes',
+//     'MAN',
+//     'max',
+//   ],
+//   styles: {
+//     head: {
+//       width: '830px',
+//       color: 'black',
+//       backgroundColor: 'rgb(176 223 167)',
+//     },
+//     list: {
+//       width: '824px',
+//       color: 'black',
+//       backgroundColor: 'rgb(176 223 167)',
+//     },
+//     caret: {
+//       borderTop: '6px solid black',
+//     },
+//     search: {
+//       backgroundColor: '#d7ffff',
+//       borderRadius: '5px',
+//       borderBottom: 'none',
+//       width: '95%',
+//       color: 'black',
+//     },
+//   },
+//   multiselect: true,
+// });
+
+// const buttonOpen = document.querySelector('.button__open');
+// const buttonClose = document.querySelector('.button__close');
+
+// dropdownBtn.buttonControl(buttonOpen!, 'open');
+// dropdownBtn.buttonControl(buttonClose!, 'close');
+
+// //-------------------------Функция Disabled----------------------------------
+// const dropdownDisabled = new CGSelect({
+//   selector: '.cg-dropdown_checkboxDisable',
+//   placeholder: 'Выберите авто',
+//   searchMode: true,
+//   items: [
+//     'BMW',
+//     {
+//       id: '213sade',
+//       title: 'Opel',
+//       value: 1,
+//     },
+//     'Mersedes',
+//     'MAN',
+//     'max',
+//   ],
+//   styles: {
+//     head: {
+//       width: '830px',
+//     },
+//     list: {
+//       width: '824px',
+//     },
+//     placeholder: {
+//       maxWidth: '500px ',
+//     },
+//   },
+//   multiselect: true,
+// });
+// dropdownDisabled.disabled(true);
+// let chbox = document.getElementById('checkboxDisable') as HTMLInputElement;
+
+// chbox!.addEventListener('click', () => {
+//   if (chbox!.checked == true) {
+//     dropdownDisabled.disabled(false);
+//   } else {
+//     dropdownDisabled.disabled(true);
+//   }
+// });

package.json

@@ -9,7 +9,7 @@
   "homepage": "https://cg-select.itguild.info",
   "scripts": {
     "start": "parcel example/index.html -p 4500 --open ",
-    "build": "parcel build ./src/cg-selectTS.ts --no-cache",
+    "build": "parcel build example/index.html --no-cache",
     "deploy": "gh-pages -d dist",
     "predeploy": "npm run build"
   },

src/cg-selectTS.ts

@@ -230,10 +230,11 @@ export class CGSelect implements ICgSelect {
 
     this.items = [];
 
-    if (!this.items && this.url) {
+    if (this.url && !items) {
       this.renderUrl();
       return;
     }
+
     createSelected;
 
     items.forEach((dataItem: any, index: number) => {
@@ -373,12 +374,9 @@ export class CGSelect implements ICgSelect {
    * @description Рендер елементов в селекте переданных с URL и их настойка
    */
   private async renderUrl() {
-    if (this.items || !this.url) {
+    const response = await fetch(this.url!);
-      return;
-    }
-
-    const response = await fetch(this.url);
     const dataUrl = await response.json();
+    console.log(dataUrl);
 
     const nativeSelect = createNativeSelect();
 
@@ -554,7 +552,10 @@ export class CGSelect implements ICgSelect {
     const select: HTMLElement | null | undefined = this.element?.querySelector('.selected');
     const nativeOption = this.element!.querySelectorAll('.nativeSelect__nativeOption');
 
-    let selectedItemsClear: ISelectedItems;
+    let selectedItemsClear: ISelectedItems = {
+      placeholder: this.placeholder!,
+      selected: this.selected!,
+    };
 
     const ulMultipul = document.createElement('ul');
 

src/components/create-element/create-elementTs.ts

@@ -1,4 +1,4 @@
-import { nativeOptionMultiple } from '../utils/utilsTs';
+import { customStylesFormat, nativeOptionMultiple } from '../utils/utilsTs';
 import { ICreateBreadCrumb } from './create-element.interface';
 
 /**
@@ -63,8 +63,8 @@ export function createBreadCrumb(
   liChip.appendChild(svgIcon);
 
   if (styles) {
-    // const { chips } = styles;
+    const { chips } = styles;
-    //   customStylesFormat(chips, liChip);
+    customStylesFormat(chips!, liChip);
   }
 
   svgIcon.addEventListener('click', (event) => {

src/components/utils/utilsTs.ts

@@ -48,6 +48,7 @@ export function getSelectText(
   } else {
     select!.innerText = 'Select...';
   }
+
   return select!;
 }
 
@@ -116,7 +117,7 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex
   svgIcon.appendChild(path1);
   svgIcon.appendChild(path2);
 
-  if (multiselectTag) {
+  if (multiselectTag && multiselectTag == true) {
     return;
   }
 
@@ -162,7 +163,7 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex
  * @param {NodeList} element NodeList нативного селекта
  * @param {any} item выбранный элемент в кастомном селекте
  */
-export function nativeOptionOrdinary(element: NodeListOf<Element> | undefined, item: any) {
+export function nativeOptionOrdinary(element: NodeListOf<Element> | undefined, item: string) {
   element!.forEach((option) => {
     option.removeAttribute('selected');
     if (option.textContent === item) {

src/interfaces/cg-select.interface.ts

@@ -128,4 +128,9 @@ export interface IStyle {
    * @type {object}
    */
   search?: object;
+  /**
+   * Кастомизация чипсов с выбранными элементами
+   * @type {object}
+   */
+  chips?: object;
 }

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["src/**/*", "index.ts"],
+  // "include": ["src/**/*", "index.ts"],
   "compilerOptions": {
     /* Projects */
     // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */