Added methods in initSelected and methods for utils

example/indexTs.ts

@@ -3,7 +3,6 @@ import { SGSelect } from "../src/cg-selectTS";
 const dropdn = new SGSelect({
     selector: '.cg-dropdown_one',
     placeholder: 'Выберите авто',
-    // lable: 'EXAMPLE',
     items: [
       'BMW',
       {

src/cg-selectTS.ts

@@ -1,3 +1,5 @@
+import { IDataItem } from './components/utils/urils.interface';
+import { createSelected, getFormatItem } from './components/utils/utilsTs';
 import { ISgSelect } from './interfaces/cg-select.interface';
 import { IItems } from './interfaces/items.interface';
 import './main.scss';
@@ -22,7 +24,7 @@ export class SGSelect implements ISgSelect {
 
   private element: Element | null;
   private list: HTMLElement;
-  private options: object;
+  private options: ISgSelect;
   private caret: HTMLElement;
   private category: string;
   private selectedItems: object[] | object;
@@ -31,17 +33,23 @@ export class SGSelect implements ISgSelect {
 
   constructor(setting: ISgSelect) {
     this.init(setting);
+    this.render();
   }
 
   private init(setting: ISgSelect): void {
     const { items, multiselect, url, selector} = setting;
+
     this.options = setting;
 
+    
+
     const elem = document.querySelector(selector);
     this.element = elem;
 
     this.element?.addEventListener('click', (e) => {
       e.preventDefault();
+      console.log('click');
+      
     });
 
     this.itemsSelect = [];
@@ -55,11 +63,45 @@ export class SGSelect implements ISgSelect {
         return;
     }
 
-    items.forEach((dataItem, index) => {
+    items.forEach((dataItem:IDataItem, index:number) => {
-        this.itemsSelect.push()
+        this.itemsSelect.push(getFormatItem(dataItem, index))
     })
   }
 
-  private render() {}
+  private render() {
-  private renderUrl() {}
+    const {
+      styles,
+      multiselect,
+      searchMode,
+      multiselectTag,
+      darkTheme,
+      language,
+      nativeSelectMode,
+      listDisplayMode,
+    } = this.options;
+
+    const random = Math.random().toString(36).substring(2, 10);
+
+    this.initSelected()
+
+  }
+
+  private renderUrl() {}
+
+
+  private initSelected(){
+    const { styles, selected, placeholder, lable, language } = this.options;
+
+    if (selected) {
+      createSelected(this.element, selected);
+    } else if (placeholder) {
+      createSelected(this.element, placeholder);
+    } else {
+      // if (language && language === 'ru') {
+      //   createSelected(this.#element, ru.selectPlaceholder);
+      // } else {
+      //   createSelected(this.#element, en.selectPlaceholder);
+      // }
+    }
+  }
 }

src/components/utils/urils.interface.ts

@@ -0,0 +1,5 @@
+export interface IDataItem{
+    category?: string;
+    categoryItems?: string;
+    ItemValue: object | string | number;
+}

src/components/utils/utilsTs.ts

@@ -0,0 +1,81 @@
+import { IItems } from '../../interfaces/items.interface';
+import { IDataItem } from './urils.interface';
+
+/**
+ * Преобразование каждого елемента полученного из поля Items;
+ * @param {IDataItem} dataItem полученный елемент переданный при создании селекта может быть как object / string
+ * @param {number} index индекс этого элемента
+ * @returns {IDataItem | IItems} возвращает сформированный объект
+ */
+
+export function getFormatItem(dataItem:IDataItem , index: number):IDataItem | IItems {
+  const random = Math.random().toString(36).substring(2, 10);
+  let item: IItems;
+
+  if(checkItemStruct(dataItem)){
+   return dataItem;
+  } else{
+    item = {
+      id: random,
+      title: dataItem,
+      value: index
+    }
+    return item;
+  }
+}
+
+/**
+ * Проверка содержит ли item  указанные свойства,
+ * @param {object} item проверяемый на определенную структуру элемент
+ * @returns {boolean} возвращает true/false если item содержит указанные свойства
+ */
+export function checkItemStruct(item: object): boolean {
+  if (item && typeof item !== 'object') {
+    return false;
+  }
+
+  return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value');
+}
+
+/**
+ * Создание кнопки выбора элементов
+ * @param {HTMLElement} element созданный экземпляр класса DropDown
+ * @param {string} content placeholer передаваемый из настроек селекта
+ * @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
+ */
+export function createSelected(element: Element|null, content?: string, styles?: object) {
+  
+  const select = document.createElement('div');
+  const selected = document.createElement('p');
+  const caret = document.createElement('div');
+
+
+  select.classList.add('cg-select');
+  selected.classList.add('selected');
+  caret.classList.add('caret');
+
+  select.appendChild(selected);
+  select.appendChild(caret);
+
+  if(content){
+    const text = document.createTextNode(content);
+    selected.appendChild(text);
+    element?.appendChild(select)
+  } else if(styles){
+    // customStyles(element, styles);
+    select.setAttribute('style', `${styles}`)
+    selected.setAttribute('style', `${styles}`)
+    caret.setAttribute('style', `${styles}`)
+  }
+
+  // if (styles) {
+  //   customStyles(element, styles);
+
+  //   element.innerHTML = `
+  //     <div class="cg-select" style = "${styles}">
+  //         <p class="selected" style = "${styles}">${content}</p>
+  //         <div class="caret" style = "${styles}"></div>
+  //     </div>
+  //   `;
+  // }
+}

src/components/utilsTs.ts

@@ -1,48 +0,0 @@
-import { IItems } from '../interfaces/items.interface';
-
-interface IDataItem{
-    category?: string;
-    categoryItems?: string;
-    ItemValue: IItems | string | number;
-}
-
-/**
- * Преобразование каждого елемента полученного из поля Items;
- * @param {object | string} dataItem полученный елемент переданный при создании селекта может быть как object/string
- * @param {number} index индекс этого элемента
- * @returns {object} возвращает сформированный объект
- */
-
-export function getFormatItem(dataItem:IDataItem, index: number) {
-  const random = Math.random().toString(36).substring(2, 10);
-  let item: IItems;
-
-//   if (checkItemStruct(dataItem)) {
-//     item = {
-//       id: dataItem.id,
-//       title: dataItem.title,
-//       value: index,
-//     };
-//   } else {
-//     item = {
-//       id: random,
-//       title: dataItem,
-//       value: index,
-//     };
-//   }
-
-//   return item;
-}
-
-/**
- * Проверка содержит ли item  указанные свойства,
- * @param {object} item проверяемый на определенную структуру элемент
- * @returns {boolean} возвращает true/false если item содержит указанные свойства
- */
-export function checkItemStruct(item: object): boolean {
-  if (item && typeof item !== 'object') {
-    return false;
-  }
-
-  return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value');
-}

src/interfaces/items.interface.ts

@@ -1,5 +1,5 @@
 export interface IItems{
     id: string;
-    title: string;
+    title: string | number | object;
     value: number | string
 }