diff --git a/example/index.html b/example/index.html index 4a483c4..5582628 100644 --- a/example/index.html +++ b/example/index.html @@ -27,7 +27,7 @@ @@ -356,5 +356,5 @@ - + diff --git a/example/index.js b/example/index.js index a440293..e957dde 100644 --- a/example/index.js +++ b/example/index.js @@ -1,34 +1,34 @@ -import DropDown from '../index'; +import { CGSelect } from '../src/cg-selectTS'; import './example'; // ------------------------------Обычный селект-------------------- -// const dropdown = new DropDown({ -// selector: '.cg-dropdown_one', -// placeholder: 'Выберите авто', -// lable: 'EXAMPLE', -// items: [ -// 'BMW', -// { -// id: '213sade', -// title: 'Opel', -// value: 1, -// }, -// 'Mersedes', -// 'MAN', -// 'Ferari', -// ], -// styles: { -// head: { -// width: '830px', -// }, -// list: { -// width: '824px', -// }, -// }, -// }); +const dropdown = new CGSelect({ + selector: '.cg-dropdown_one', + placeholder: 'Выберите авто', + lable: 'EXAMPLE', + items: [ + 'BMW', + { + id: '213sade', + title: 'Opel', + value: 1, + }, + 'Mersedes', + 'MAN', + 'Ferari', + ], + styles: { + head: { + width: '830px', + }, + list: { + 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, +}); diff --git a/example/indexTs.ts b/example/indexTs.ts index dfa4a3a..fd3ad5f 100644 --- a/example/indexTs.ts +++ b/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', - placeholder: 'Выберите авто', - items: [ - 'BMW', - { - id: '213sade', - title: 'Opel', - value: 1, - }, - 'Mersedes', - 'MAN', - 'max', - ], - styles: { - head: { - width: '830px', - }, - list: { - width: '824px', - }, - placeholder: { - maxWidth: '500px ', - }, - }, - // url - // listDisplayMode: true, - // searchMode: true, - // nativeSelectMode: true - // event: 'mouseenter', - // buttonControl - multiselect: true, - multiselectTag: true, -}); +// // ------------------------------Обычный селект-------------------- +// const dropdn = new CGSelect({ +// selector: '.cg-dropdown_one', +// placeholder: 'Выберите авто', +// lable: 'EXAMPLE', +// items: [ +// 'BMW', +// { +// id: '213sade', +// title: 'Opel', +// value: 1, +// }, +// 'Mersedes', +// 'MAN', +// 'Ferari', +// ], +// styles: { +// head: { +// width: '830px', +// }, +// list: { +// width: '824px', +// }, +// }, +// }); + +// // ------------------------------NativeSelect----------------------- +// const dropdownNativeSelect = new CGSelect({ +// selector: '.cg-dropdown_selectNative', +// placeholder: 'Выберите авто', +// nativeSelectMode: true, +// items: [ +// '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); +// } +// }); diff --git a/index.ts b/index.js similarity index 100% rename from index.ts rename to index.js diff --git a/package.json b/package.json index 99a468a..bba2e97 100644 --- a/package.json +++ b/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" }, diff --git a/src/cg-selectTS.ts b/src/cg-selectTS.ts index 4277e50..cf965e7 100644 --- a/src/cg-selectTS.ts +++ b/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) { - return; - } - - const response = await fetch(this.url); + 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'); diff --git a/src/components/create-element/create-elementTs.ts b/src/components/create-element/create-elementTs.ts index 83786c2..6564e76 100644 --- a/src/components/create-element/create-elementTs.ts +++ b/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; - // customStylesFormat(chips, liChip); + const { chips } = styles; + customStylesFormat(chips!, liChip); } svgIcon.addEventListener('click', (event) => { diff --git a/src/components/utils/utilsTs.ts b/src/components/utils/utilsTs.ts index 16dbdfc..b4d0773 100644 --- a/src/components/utils/utilsTs.ts +++ b/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 | undefined, item: any) { +export function nativeOptionOrdinary(element: NodeListOf | undefined, item: string) { element!.forEach((option) => { option.removeAttribute('selected'); if (option.textContent === item) { diff --git a/src/interfaces/cg-select.interface.ts b/src/interfaces/cg-select.interface.ts index 6d0c9c1..1d7d7e6 100644 --- a/src/interfaces/cg-select.interface.ts +++ b/src/interfaces/cg-select.interface.ts @@ -128,4 +128,9 @@ export interface IStyle { * @type {object} */ search?: object; + /** + * Кастомизация чипсов с выбранными элементами + * @type {object} + */ + chips?: object; } diff --git a/tsconfig.json b/tsconfig.json index 583ac15..85dd01f 100644 --- a/tsconfig.json +++ b/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. */