apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pull 30.12

Browse Source
This commit is contained in:
MaxOvs 2022-12-30 23:20:33 +03:00
commit 136a6bc6e5
24 changed files with 1100 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
node_modules node_modules
dist dist
.parcel-cache .parcel-cache

10
CHANGELOG.md
View File

@ -1,6 +1,6 @@
# CG-SELECT # CG-SELECT
## 16.12.2022 - релиз версии 0.1.0! ### 16.12.2022 - релиз версии 0.1.0!
### 20.12.2022 - обновление 0.1.12. ### 20.12.2022 - обновление 0.1.12.
@ -12,3 +12,11 @@
- Изменеия в расположении файлов scss. - Изменеия в расположении файлов scss.
- Исправлено влияние стилей селекта на JS приложение. - Исправлено влияние стилей селекта на JS приложение.
### 29.12.2022 - обновление 0.1.17
- Добавленна возможность менять отображения селекта на телефонах (нативный/cg-select).
- Добавленна возможность менять отображения листа с выбором (обычный/модальное окно).
- Исправленны выявленные баги.
- Исправленно отображение страницы с примером на мобильных устройствах.
- Обновленна документация!

14
README.md
View File

@ -1,6 +1,6 @@
# CG-SELECT # CG-SELECT
## version ~ 0.1.14 ## version ~ 0.1.171
Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта. Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта.
Доступна кастомизация, мультивыбор и живой поиск по елементам. Доступна кастомизация, мультивыбор и живой поиск по елементам.
@ -74,9 +74,9 @@ const dropdown = new DropDown({
![image](https://github.com/apuc/cg-select/blob/main/src/images/WhiteTheme.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/WhiteTheme.png)
![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png)
Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. Так же её можно открыть на странице с примером, или перейти по ссылке ниже.
**Чтобы ознакомиться с ней, перейдите по ссылке -** https://cg-select.itguild.info/up_/up_/documentation/index.html **Чтобы ознакомиться с ней, перейдите по ссылке -** https://cg-select.itguild.info/up_/documentation/index.html
## Contributing ## Contributing
@ -88,10 +88,10 @@ const dropdown = new DropDown({
## Compatibility ## Compatibility
Совместимость с приложениями | JS | React | Angular | Vue | | Совместимость с приложениями | JS | React | Angular | Vue |
| -------------------------- | :--: | :-----: | :-----: | :--: | | ---------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
| CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png)| | CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |
| Комментарий | Протестирован в Js приложениях и работает успешно.|Работает только с костылем в виде `setTimeout()` | тесты не проведены| тесты не проведены | | Комментарий | Протестирован в Js приложениях и работает успешно. | Работает только с костылем в виде `setTimeout()` | пока недоступно | тесты не проведены |
## History ## History

9
documentation/DropDown.html
View File

@ -110,10 +110,7 @@
<ul> <ul>
<li><a href="DropDown.html">DropDown</a></li> <li><a href="DropDown.html">DropDown</a></li>
<li> <li>
<a <a href="constructor.html">Конструктор класса DropDown</a>
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
</li> </li>
</ul> </ul>
<h3>Modules</h3> <h3>Modules</h3>
@ -134,10 +131,12 @@
<li><a href="global.html#render">#render</a></li> <li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li> <li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li> <li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html#addLenguage">addLenguage</a></li> <li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

158
documentation/cg-dropdown.js.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>JSDoc: Source: cg-dropdown.js</title> <title>JSDoc: Source: cg-select.js</title>
<script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script> <script src="scripts/prettify/lang-css.js"></script>
@ -15,7 +15,7 @@
<body> <body>
<div id="main"> <div id="main">
<h1 class="page-title">Source: cg-dropdown.js</h1> <h1 class="page-title">Source: cg-select.js</h1>
<section> <section>
<article> <article>
@ -40,7 +40,7 @@
/** /**
* @class Описание класса DropDown * @class Описание класса DropDown
* @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации. * @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
*@author Овсяников Максим * @author Овсяников Максим
*/ */
export class DropDown { export class DropDown {
/** /**
@ -116,7 +116,9 @@
darkTheme: true/false, darkTheme: true/false,
searchMode: true/false, searchMode: true/false,
closeOnSelect: true/false, closeOnSelect: true/false,
lenguage: 'ru/en', nativeSelectMode: true/false,
listDisplayMode: true/false,
language: 'ru/en',
styles: { styles: {
head: { head: {
background: '...', background: '...',
@ -238,11 +240,14 @@
} }
const select = this.#element.querySelector('.cg-select'); const select = this.#element.querySelector('.cg-select');
const nativeSelect = this.#element.querySelector('.nativeSelect');
if (value === true) { if (value === true) {
this.#element.setAttribute('disabled', true); this.#element.setAttribute('disabled', true);
nativeSelect.setAttribute('disabled', true);
select.classList.add('disabled'); select.classList.add('disabled');
} else { } else {
this.#element.removeAttribute('disabled'); this.#element.removeAttribute('disabled');
nativeSelect.removeAttribute('disabled');
select.classList.remove('disabled'); select.classList.remove('disabled');
} }
} }
@ -255,11 +260,18 @@
* @method buttonControl * @method buttonControl
*/ */
buttonControl(button, method) { buttonControl(button, method) {
const {listDisplayMode} = this.#options;
if(listDisplayMode === true){
return
}
this.btn = button; this.btn = button;
button.addEventListener('click', () => { button.addEventListener('click', () => {
if (method === 'open') { if (method.toLowerCase() === 'open') {
this.#open(true); this.#open(true);
} else if (method === 'close') { } else if (method.toLowerCase() === 'close') {
this.#close(); this.#close();
} else { } else {
return; return;
@ -269,14 +281,18 @@
/** /**
* Метод экземпляра класса DropDown * Метод экземпляра класса DropDown
* @param {object} lenguage объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch * @param {object} language объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
* @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата * @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата
* @method addLenguage * @method addLanguage
*/ */
addLenguage(lenguage) { addLanguage(language) {
const { placeholder, textInListSearch } = lenguage; const { placeholder, textInListSearch, selectPlaceholder } = language;
const { searchMode } = this.#options; const { searchMode } = this.#options;
const select = this.#element.querySelector('.selected');
const textNodeSelect = document.createTextNode(selectPlaceholder);
select.appendChild(textNodeSelect);
if (searchMode &amp;&amp; searchMode == true) { if (searchMode &amp;&amp; searchMode == true) {
const search = this.#element.querySelector('.inputSearch'); const search = this.#element.querySelector('.inputSearch');
const textNoRezult = this.#element.querySelector('.noRezult'); const textNoRezult = this.#element.querySelector('.noRezult');
@ -323,9 +339,10 @@
const elem = document.querySelector(options.selector); const elem = document.querySelector(options.selector);
if (!elem) { //TODO: для теста в реакте нужно пересмотреть необходимость этой проверки!
throw new Error(`Element with selector ${options.selector}`); // if (!elem) {
} // throw new Error(`Element with selector ${options.selector}`);
// }
this.#element = elem; this.#element = elem;
@ -368,14 +385,18 @@
* @protected * @protected
*/ */
#initSelected(select) { #initSelected(select) {
const { styles, selected, placeholder, lable } = this.#options; const { styles, selected, placeholder, lable, language } = this.#options;
if (selected) { if (selected) {
createSelected(this.#element, selected); createSelected(this.#element, selected);
} else if (placeholder) { } else if (placeholder) {
createSelected(this.#element, placeholder); createSelected(this.#element, placeholder);
} else { } else {
createSelected(this.#element, 'Select...'); if (language &amp;&amp; language === 'ru') {
createSelected(this.#element, ru.selectPlaceholder);
} else {
createSelected(this.#element, en.selectPlaceholder);
}
} }
if (select) { if (select) {
@ -405,7 +426,13 @@
* @description Рендер елементов в селекте. * @description Рендер елементов в селекте.
*/ */
#render(select) { #render(select) {
const { styles, multiselect, searchMode, multiselectTag, darkTheme, lenguage } = this.#options; const {
styles, multiselect,
searchMode, multiselectTag,
darkTheme, language,
nativeSelectMode, listDisplayMode
} = this.#options;
const random = Math.random().toString(36).substring(2, 10); const random = Math.random().toString(36).substring(2, 10);
if (select || (select &amp;&amp; styles)) { if (select || (select &amp;&amp; styles)) {
@ -422,12 +449,13 @@
this.random = random; this.random = random;
if (searchMode) { if (searchMode) {
if (lenguage === 'ru') { if (language === 'ru') {
inputSearch = createInputSearch(random, ru.placeholder); inputSearch = createInputSearch(random, ru.placeholder);
} else { } else {
inputSearch = createInputSearch(random, en.placeholder); inputSearch = createInputSearch(random, en.placeholder);
} }
const { search } = styles;
customStylesFormat(search, inputSearch);
ulList.appendChild(inputSearch); ulList.appendChild(inputSearch);
} }
@ -491,9 +519,19 @@
this.#checkTheme(); this.#checkTheme();
} }
if(nativeSelectMode === true){
this.#selectMode(nativeSelectMode);
}
this.#list = this.#element.querySelector('.list'); this.#list = this.#element.querySelector('.list');
this.#caret = this.#element.querySelector('.caret'); this.#caret = this.#element.querySelector('.caret');
if(listDisplayMode === true){
this.#displayMode(listDisplayMode)
}
this.#addOptionsBehaviour(); this.#addOptionsBehaviour();
} }
@ -751,14 +789,14 @@
* @method #searchMode * @method #searchMode
*/ */
#searchMode(random) { #searchMode(random) {
const { lenguage } = this.#options; const { language } = this.#options;
const input = this.#element.querySelector(`#searchSelect-${random}`); const input = this.#element.querySelector(`#searchSelect-${random}`);
const searchSelect = this.#element.querySelectorAll('.list__item'); const searchSelect = this.#element.querySelectorAll('.list__item');
const result = document.createElement('p'); const result = document.createElement('p');
let textNode = ''; let textNode = '';
if (lenguage === 'ru') { if (language &amp;&amp; language === 'ru') {
textNode = document.createTextNode(`${ru.textInListSearch}`); textNode = document.createTextNode(`${ru.textInListSearch}`);
} else { } else {
textNode = document.createTextNode(`${en.textInListSearch}`); textNode = document.createTextNode(`${en.textInListSearch}`);
@ -774,17 +812,22 @@
}); });
input.oninput = function () { input.oninput = function () {
let val = this.value.trim(); let valueSearch = this.value.trim().toLowerCase();
let anyMatch = false;
if (val != '') { if (valueSearch != '') {
searchSelect.forEach((elem) => { searchSelect.forEach((elem) => {
if (elem.innerText.search(val) == -1) { let isMatching = new RegExp(valueSearch, 'gi').test(elem.textContent);
anyMatch = anyMatch || isMatching;
if (elem.textContent.toLowerCase().search(valueSearch) == -1) {
elem.classList.add('displayHide'); elem.classList.add('displayHide');
result.classList.remove('displayHide');
} else { } else {
elem.classList.remove('displayHide'); elem.classList.remove('displayHide');
} }
}); });
result.classList.toggle('displayHide', anyMatch);
} else { } else {
searchSelect.forEach((elem) => { searchSelect.forEach((elem) => {
elem.classList.remove('displayHide'); elem.classList.remove('displayHide');
@ -838,6 +881,64 @@
} }
}); });
} }
/**
* Приватный метод экземпляра класса DropDown
* @protected
* @param {boolean} nativeSelectMode параметр отвечающий за добавления нативного селекта.
* @description Изменяет отображение селекта на мобильных устройствах
* @method #selectMode
*/
#selectMode(nativeSelectMode){
let win = window.outerWidth;
if(nativeSelectMode === true){
const select = this.#element.querySelector('.cg-select');
const list = this.#element.querySelector('.list');
const nativeSelect = this.#element.querySelector('.nativeSelect')
if(win &lt; 576){
select.classList.add('displayHide');
list.classList.add('displayHide');
nativeSelect.classList.add('nativeSelectActive');
} else if( win > 576){
select.classList.remove('displayHide');
list.classList.remove('displayHide');
nativeSelect.classList.remove('nativeSelectActive');
nativeSelect.classList.add('displayHide');
}
} else{
return
}
}
/**
* Приватный метод экземпляра класса DropDown
* @protected
* @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна.
* @description Изменяет отображение листа с выбором в виде модального окна.
* @method #displayMode
*/
#displayMode(listDisplayMode){
if(listDisplayMode === true){
const modal = document.createElement('div');
const body = document.querySelector('body')
const list = this.#list;
modal.appendChild(list);
this.#element.appendChild(modal);
this.#element.addEventListener('click', () => {
modal.classList.toggle('modal');
list.classList.toggle('listModal');
body.classList.toggle('overflowHide')
});
} else{
return
}
}
} }
</code></pre> </code></pre>
</article> </article>
@ -850,10 +951,7 @@
<ul> <ul>
<li><a href="DropDown.html">DropDown</a></li> <li><a href="DropDown.html">DropDown</a></li>
<li> <li>
<a <a href="constructor.html">Конструктор класса DropDown</a>
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
</li> </li>
</ul> </ul>
<h3>Modules</h3> <h3>Modules</h3>
@ -874,10 +972,12 @@
<li><a href="global.html#render">#render</a></li> <li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li> <li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li> <li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html#addLenguage">addLenguage</a></li> <li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

87
documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html → documentation/constructor.html
View File

@ -79,29 +79,31 @@
<h5>Example</h5> <h5>Example</h5>
<pre class="prettyprint"><code>options = { <pre class="prettyprint"><code>options = {
selector: 'Уникальный селектор', selector: 'Уникальный селектор',
selected: 'Выбранный элемент', selected: 'Выбранный элемент',
placeholder: '...', placeholder: '...',
items: [string|number|object], items: [string|number|object],
darkTheme: true/false, darkTheme: true/false,
searchMode: true/false, searchMode: true/false,
closeOnSelect: true/false, closeOnSelect: true/false,
lenguage: 'ru/en', nativeSelectMode: true/false,
styles: { listDisplayMode: true/false,
head: { language: 'ru/en',
background: '...', styles: {
}, head: {
list: {...}, background: '...',
chips: {...}, },
caret: {...}, list: {...},
placeholder: {...}, chips: {...},
lable: {..}, caret: {...},
}, placeholder: {...},
event: '...', lable: {..},
url: 'http/...', },
multiselect: true/false, event: '...',
multiselectTag: true/false, url: 'http/...',
}</code></pre> multiselect: true/false,
multiselectTag: true/false,
}</code></pre>
</div> </div>
</article> </article>
@ -112,28 +114,34 @@
<strong>selector</strong> - <strong>*обязательный параметр(индефикатор)</strong>, <strong>selector</strong> - <strong>*обязательный параметр(индефикатор)</strong>,
который задаеться при создании селекта. который задаеться при создании селекта.
</li> </li>
<li> <li>
<strong>selected</strong> - необязательный параметр, в который передается элемент <strong>selected</strong> - необязательный параметр, в который передается элемент
который будет выбран изначально в селекте. который будет выбран изначально в селекте.
</li> </li>
<li> <li>
<strong>placeholder</strong> - необязательный параметр, в который передается текст <strong>placeholder</strong> - необязательный параметр, в который передается текст
плейсхолдера селекта. плейсхолдера селекта.
</li> </li>
<li> <li>
<strong>items</strong> - <strong>items</strong> -
<strong <strong
>*обязательный параметр(эсли не указан другой способ получения данных (url))</strong >*обязательный параметр(эсли не указан другой способ получения данных (url))</strong
>, это массив елементов, которые будут отображаться в селекте при выборе. >, это массив елементов, которые будут отображаться в селекте при выборе.
</li> </li>
<li> <li>
<strong>darkTheme</strong> - необязательный параметр, который отвечает за включение <strong>darkTheme</strong> - необязательный параметр, который отвечает за включение
светлой/темной темы по умолчанию, стоит темная тема(darkTheme == true). светлой/темной темы по умолчанию, стоит темная тема(darkTheme == true).
</li> </li>
<li> <li>
<strong>searchMode</strong> - необязательный параметр, который добавляет живой поиск <strong>searchMode</strong> - необязательный параметр, который добавляет живой поиск
по элеметам селекта. по элеметам селекта.
</li> </li>
<li> <li>
<strong>closeOnSelect</strong> - необязательный параметр, который отвечает за <strong>closeOnSelect</strong> - необязательный параметр, который отвечает за
поведения селекта при открытии, если closeOnSelect: false, тогда при выборе елемента в поведения селекта при открытии, если closeOnSelect: false, тогда при выборе елемента в
@ -142,16 +150,33 @@
</li> </li>
<li> <li>
<strong>lenguage</strong> - необязательный параметр, отвечающий за локализацию <strong>nativeSelectMode</strong> - необязательный параметр, который отвечает за
поведения селекта при открытии на мобильных усторйствах, если nativeSelectMode: false,
тогда на мобильном устройстве будет отображаться и работать дефолтное поведение как на
десктопной версии, а если nativeSelectMode: true, то на мобильном устройстве будет
отображаться нативный селект из HTML 5;
</li>
<li>
<strong>listDisplayMode</strong> - необязательный параметр, который отвечает за
поведения селекта при открытии, если listDisplayMode: false, тогда лист с выбором
опции отображаться как обычный выпадающий список. Если listDisplayMode: true, то лист
с выбором опции будет отображаться как модальное окно.
</li>
<li>
<strong>language</strong> - необязательный параметр, отвечающий за локализацию
некоторых текстовых элементов. по умолчанию стоит 'en'. Можно добавить свою некоторых текстовых элементов. по умолчанию стоит 'en'. Можно добавить свою
локализацию, с помощью функции <a href="global.html#addLenguage">addLanguage()</a>, локализацию, с помощью функции <a href="global.html#addLanguage">addLanguage()</a>,
передав туда объект с полями для текста. передав туда объект с полями для текста.
</li> </li>
<li> <li>
<strong>event</strong> - необязательный параметр, который отвечает за поведения <strong>event</strong> - необязательный параметр, который отвечает за поведения
селекта, передавая в этот параметр, евент по типу 'mouseenter', селект будет селекта, передавая в этот параметр, евент по типу 'mouseenter', селект будет
открываться при наведении. открываться при наведении.
</li> </li>
<li> <li>
<strong>url</strong> - <strong>url</strong> -
<strong <strong
@ -160,16 +185,19 @@
> >
htylthbn данные которые приходят с бекэнда в формате {id:"", title: "", value: ""}. htylthbn данные которые приходят с бекэнда в формате {id:"", title: "", value: ""}.
</li> </li>
<li> <li>
<strong>multiselect</strong> - необязательный параметр, который отвечает за поведения <strong>multiselect</strong> - необязательный параметр, который отвечает за поведения
селекта, добавляет возможность выбирать несколько элементов. Выбранные элементы селекта, добавляет возможность выбирать несколько элементов. Выбранные элементы
отрисовываются как обычный текст, через запятую. отрисовываются как обычный текст, через запятую.
</li> </li>
<li> <li>
<strong>multiselectTag</strong> - необязательный параметр, который отвечает за <strong>multiselectTag</strong> - необязательный параметр, который отвечает за
поведения селекта, для него, поведения селекта, для него,
<strong>***работает только в месте с подключением multiselect.</strong> <strong>***работает только в месте с подключением multiselect.</strong>
</li> </li>
<li> <li>
<strong>styles</strong> - необязательный параметр, который отвечает за кастомизацию <strong>styles</strong> - необязательный параметр, который отвечает за кастомизацию
элементов селекта, в него передаются обьекты с CSS свойствами для кастомизируемых элементов селекта, в него передаются обьекты с CSS свойствами для кастомизируемых
@ -186,10 +214,7 @@
<ul> <ul>
<li><a href="DropDown.html">DropDown</a></li> <li><a href="DropDown.html">DropDown</a></li>
<li> <li>
<a <a href="constructor.html">Конструктор класса DropDown</a>
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
</li> </li>
</ul> </ul>
<h3>Modules</h3> <h3>Modules</h3>
@ -210,10 +235,12 @@
<li><a href="global.html#render">#render</a></li> <li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li> <li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li> <li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html#addLenguage">addLenguage</a></li> <li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

9
documentation/create-element.js.html
View File

@ -153,10 +153,7 @@
<ul> <ul>
<li><a href="DropDown.html">DropDown</a></li> <li><a href="DropDown.html">DropDown</a></li>
<li> <li>
<a <a href="constructor.html">Конструктор класса DropDown</a>
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
</li> </li>
</ul> </ul>
<h3>Modules</h3> <h3>Modules</h3>
@ -177,10 +174,12 @@
<li><a href="global.html#render">#render</a></li> <li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li> <li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li> <li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html#addLenguage">addLenguage</a></li> <li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

113
documentation/global.html
View File

@ -158,6 +158,104 @@
</dd> </dd>
</dl> </dl>
<h4 class="name" id="displayMode">
<span class="type-signature">(protected) </span>#displayMode<span class="signature"
>(listDisplayMode)</span
><span class="type-signature"></span>
</h4>
<div class="description">
Изменяет отображение листа с выбором в виде модального окна.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>listDisplayMode</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">
параметр отвечающий за отображение выбора в виде модального окна.
</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-select.js</a>,
<a href="cg-dropdown.js.html#line895">line 895</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="selectMode">
<span class="type-signature">(protected) </span>#selectMode<span class="signature"
>(nativeSelectMode)</span
><span class="type-signature"></span>
</h4>
<div class="description">Изменяет отображение селекта на мобильных устройствах</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>nativeSelectMode</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last">
параметр отвечающий за добавления нативного селекта.
</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source">
<ul class="dummy">
<li>
<a href="cg-dropdown.js.html">cg-select.js</a>,
<a href="cg-dropdown.js.html#line864">line 864</a>
</li>
</ul>
</dd>
</dl>
<h4 class="name" id="initEvent"> <h4 class="name" id="initEvent">
<span class="type-signature">(protected) </span>#initEvent<span class="signature" <span class="type-signature">(protected) </span>#initEvent<span class="signature"
>()</span >()</span
@ -440,7 +538,7 @@
</dl> </dl>
<h4 class="name" id="addLenguage"> <h4 class="name" id="addLenguage">
<span class="type-signature"></span>addLenguage<span class="signature">(lenguage)</span <span class="type-signature"></span>addLanguage<span class="signature">(language)</span
><span class="type-signature"></span> ><span class="type-signature"></span>
</h4> </h4>
@ -464,7 +562,7 @@
<tbody> <tbody>
<tr> <tr>
<td class="name"><code>lenguage</code></td> <td class="name"><code>language</code></td>
<td class="type"> <td class="type">
<span class="param-type">object</span> <span class="param-type">object</span>
@ -758,7 +856,7 @@
<dd class="tag-source"> <dd class="tag-source">
<ul class="dummy"> <ul class="dummy">
<li> <li>
<a href="cg-dropdown.js.html">cg-dropdown.js</a>, <a href="cg-dropdown.js.html">cg-select.js</a>,
<a href="cg-dropdown.js.html#line173">line 173</a> <a href="cg-dropdown.js.html#line173">line 173</a>
</li> </li>
</ul> </ul>
@ -774,10 +872,7 @@
<ul> <ul>
<li><a href="DropDown.html">DropDown</a></li> <li><a href="DropDown.html">DropDown</a></li>
<li> <li>
<a <a href="constructor.html">Конструктор класса DropDown</a>
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
</li> </li>
</ul> </ul>
<h3>Modules</h3> <h3>Modules</h3>
@ -798,10 +893,12 @@
<li><a href="global.html#render">#render</a></li> <li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li> <li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li> <li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html#addLenguage">addLenguage</a></li> <li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

16
documentation/index.html
View File

@ -19,7 +19,7 @@
<section> <section>
<h2>CG-SELECT</h2> <h2>CG-SELECT</h2>
<a href="/src/page/index.html">-- Вернуться к примеру --</a> <a href="/example/index.html">-- Вернуться к примеру --</a>
<p> <p>
Этот компонент предлагает более гибкую настройку и использование селекта. Так же Этот компонент предлагает более гибкую настройку и использование селекта. Так же
реализованны методы взаимодействия с селектом. реализованны методы взаимодействия с селектом.
@ -35,10 +35,7 @@
</ul> </ul>
<p> <p>
<strong>*Все настройки можно посмореть в вкладке</strong> <strong>*Все настройки можно посмореть в вкладке</strong>
<a <a href="constructor.html">Конструктор класса</a>
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса</a
>
</p> </p>
<h5>Доступна возможность кастомизации основных элементов, таких как:</h5> <h5>Доступна возможность кастомизации основных элементов, таких как:</h5>
@ -59,10 +56,7 @@
<ul> <ul>
<li><a href="DropDown.html">DropDown</a></li> <li><a href="DropDown.html">DropDown</a></li>
<li> <li>
<a <a href="constructor.html">Конструктор класса DropDown</a>
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
</li> </li>
</ul> </ul>
<h3>Modules</h3> <h3>Modules</h3>
@ -83,10 +77,12 @@
<li><a href="global.html#render">#render</a></li> <li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li> <li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li> <li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html#addLenguage">addLenguage</a></li> <li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

9
documentation/module-Utils.html
View File

@ -618,10 +618,7 @@
<ul> <ul>
<li><a href="DropDown.html">DropDown</a></li> <li><a href="DropDown.html">DropDown</a></li>
<li> <li>
<a <a href="constructor.html">Конструктор класса DropDown</a>
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
</li> </li>
</ul> </ul>
<h3>Modules</h3> <h3>Modules</h3>
@ -642,10 +639,12 @@
<li><a href="global.html#render">#render</a></li> <li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li> <li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li> <li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html#addLenguage">addLenguage</a></li> <li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

9
documentation/module-createElementChips.html
View File

@ -260,10 +260,7 @@
<ul> <ul>
<li><a href="DropDown.html">DropDown</a></li> <li><a href="DropDown.html">DropDown</a></li>
<li> <li>
<a <a href="constructor.html">Конструктор класса DropDown</a>
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
</li> </li>
</ul> </ul>
<h3>Modules</h3> <h3>Modules</h3>
@ -284,10 +281,12 @@
<li><a href="global.html#render">#render</a></li> <li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li> <li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li> <li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html#addLenguage">addLenguage</a></li> <li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

9
documentation/utils.js.html
View File

@ -257,10 +257,7 @@
<ul> <ul>
<li><a href="DropDown.html">DropDown</a></li> <li><a href="DropDown.html">DropDown</a></li>
<li> <li>
<a <a href="constructor.html">Конструктор класса DropDown</a>
href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
>Конструктор класса DropDown</a
>
</li> </li>
</ul> </ul>
<h3>Modules</h3> <h3>Modules</h3>
@ -281,10 +278,12 @@
<li><a href="global.html#render">#render</a></li> <li><a href="global.html#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li> <li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li> <li><a href="global.html#searchMode">#searchMode</a></li>
<li><a href="global.html#displayMode">#displayMode</a></li>
<li><a href="global.html#selectMode">#selectMode</a></li>
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>
<li><a href="global.html#addLenguage">addLenguage</a></li> <li><a href="global.html#addLanguage">addLanguage</a></li>
<li><a href="global.html#addItem">addItem</a></li> <li><a href="global.html#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

16
src/page/example.js → example/example.js
View File

@ -13,6 +13,14 @@ const codeFourth = document.getElementById('codeFourth');
const fifthBtn = document.getElementById('fifth'); const fifthBtn = document.getElementById('fifth');
const codeFifth = document.getElementById('codeFifth'); const codeFifth = document.getElementById('codeFifth');
const six = document.getElementById('six')
const codeSix = document.getElementById('codeSix');
const Native = document.getElementById('Native')
const codeNative = document.getElementById('codeNative')
firstBtn.addEventListener('click', () => { firstBtn.addEventListener('click', () => {
codeFirst.classList.toggle("active") codeFirst.classList.toggle("active")
}) })
@ -32,3 +40,11 @@ fourthBtn.addEventListener('click', () => {
fifthBtn.addEventListener('click', () => { fifthBtn.addEventListener('click', () => {
codeFifth.classList.toggle("active") codeFifth.classList.toggle("active")
}) })
six.addEventListener('click', () => {
codeSix.classList.toggle("active")
})
Native.addEventListener('click', () => {
codeNative.classList.toggle("active")
})

20
src/page/example.scss → example/example.scss
View File

@ -87,7 +87,6 @@
.content { .content {
margin-top: 15px; margin-top: 15px;
// background-color: #6b6d76;
border-radius: 5px; border-radius: 5px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
@ -112,7 +111,6 @@
font-size: 20px; font-size: 20px;
} }
&_submit { &_submit {
//background-color: #2a2f3b;
width: 200px; width: 200px;
height: 35px; height: 35px;
border-radius: 10px; border-radius: 10px;
@ -193,3 +191,21 @@ pre {
.active { .active {
display: block; display: block;
} }
@media (max-width: 576px) {
.container {
width: 95%;
}
.header {
margin-top: 15px;
h1 {
font-size: 32px;
}
}
.example-select_title {
font-size: 14px;
height: 40px;
}
}

100
src/page/index.html → example/index.html
View File

@ -4,8 +4,17 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
property="og:description"
content="Feature rich Select control for React/JS with multiselect, autocomplete and styling"
/>
<meta property="og:type" content="website" />
<meta property="og:site_name" content="cg-select" />
<meta property="og:url" content="https://cg-select.itguild.info" />
<meta property="og:image" content="/src/images/logoCG.jpg" />
<title>Cg-Select</title> <title>Cg-Select</title>
<link href="/src/page/example.scss" rel="stylesheet" /> <link href="example.scss" rel="stylesheet" />
</head> </head>
<body class="body-example"> <body class="body-example">
<div class="container"> <div class="container">
@ -66,6 +75,93 @@
</form> </form>
</div> </div>
<div class="example-select">
<h2 class="example-select_title">Дефолтный селект с функцией nativeSelectMode</h2>
<form method="get" class="form">
<p style="margin-left: 12px; color: white">
*При мобильном разрешении появляеться нативный селект.
</p>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_selectNative"></button>
</div>
<button type="button" class="check-code" id="Native">Посмотреть код</button>
<code id="codeNative">
<pre>
<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_one',</span>
placeholder: <span class="code__string">'Выберите авто',</span>
nativeSelectMode: <span class="code__keyword">true,</span>
items: [
<span class="code__string">'BMW',</span>
{
id: <span class="code__string">'213sade',</span>
title: <span class="code__string">'Opel',</span>
value: 1,
},
<span class="code__string">'Mersedes',</span>
<span class="code__string">'MAN',</span>
<span class="code__string">'Ferari',</span>
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
},
});
</pre>
</code>
</form>
</div>
<div class="example-select">
<h2 class="example-select_title">Дефолтный селект с функцией listDisplayMode</h2>
<form method="get" class="form">
<p style="margin-left: 12px; color: white">
*При использовании данного метода лист с выбором появляеться как модальное окно.
</p>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
</div>
<button type="button" class="check-code" id="six">Посмотреть код</button>
<code id="codeSix">
<pre>
<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_listDisplayMode',</span>
placeholder: <span class="code__string">'Выберите авто',</span>
listDisplayMode: <span class="code__keyword">true,</span>
items: [
<span class="code__string">'BMW',</span>
{
id: <span class="code__string">'213sade',</span>
title: <span class="code__string">'Opel',</span>
value: 1,
},
<span class="code__string">'Mersedes',</span>
<span class="code__string">'MAN',</span>
<span class="code__string">'Ferari',</span>
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
},
});
</pre>
</code>
</form>
</div>
<div class="example-select"> <div class="example-select">
<h1 class="example-select_title">Селект с данными с URL</h1> <h1 class="example-select_title">Селект с данными с URL</h1>
<div class="layout-select"> <div class="layout-select">
@ -218,7 +314,7 @@
<h1 class="example-select_title">Функция disabled</h1> <h1 class="example-select_title">Функция disabled</h1>
<input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" /> <input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
<label for="checkboxDisable">Вы согласны на обработку данных</label> <label for="checkboxDisable" style="color: white">Вы согласны на обработку данных</label>
<div class="layout-select"> <div class="layout-select">
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button> <button class="cg-dropdown cg-dropdown_checkboxDisable"></button>

57
src/page/index.js → example/index.js
View File

@ -27,12 +27,59 @@ const dropdown = new DropDown({
}, },
}); });
// const ger = { // ------------------------------NativeSelect-----------------------
// placeholder: 'searcH????', const dropdownNativeSelect = new DropDown({
// textInListSearch: 'None', 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',
},
},
});
// dropdown.addLenguage(ger); // ------------------------------listDisplayMode--------------------
const dropdownlistDisplayMode = new DropDown({
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-------------------- // ------------------------------URL--------------------
const dropdown3 = new DropDown({ const dropdown3 = new DropDown({

3
index.js Normal file
View File

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

438
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "cg-select", "name": "cg-select",
"version": "0.1.14", "version": "0.1.171",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "cg-select", "name": "cg-select",
"version": "0.1.14", "version": "0.1.171",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@parcel/optimizer-css": "^2.8.0", "@parcel/optimizer-css": "^2.8.0",
@ -14,6 +14,7 @@
}, },
"devDependencies": { "devDependencies": {
"@parcel/transformer-sass": "^2.7.0", "@parcel/transformer-sass": "^2.7.0",
"jsdoc": "^4.0.0",
"parcel": "^2.7.0", "parcel": "^2.7.0",
"prettier": "^2.7.1" "prettier": "^2.7.1"
} }
@ -115,6 +116,18 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/@babel/parser": {
"version": "7.20.7",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.7.tgz",
"integrity": "sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==",
"dev": true,
"bin": {
"parser": "bin/babel-parser.js"
},
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/gen-mapping": { "node_modules/@jridgewell/gen-mapping": {
"version": "0.3.2", "version": "0.3.2",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
@ -173,6 +186,18 @@
"@jridgewell/sourcemap-codec": "^1.4.10" "@jridgewell/sourcemap-codec": "^1.4.10"
} }
}, },
"node_modules/@jsdoc/salty": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/@jsdoc/salty/-/salty-0.2.2.tgz",
"integrity": "sha512-A1FrVnc7L9qI2gUGsfN0trTiJNK72Y0CL/VAyrmYEmeKI3pnHDawP64CEev31XLyAAOx2xmDo3tbadPxC0CSbw==",
"dev": true,
"dependencies": {
"lodash": "^4.17.21"
},
"engines": {
"node": ">=v12.0.0"
}
},
"node_modules/@lezer/common": { "node_modules/@lezer/common": {
"version": "0.15.12", "version": "0.15.12",
"resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.12.tgz", "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.12.tgz",
@ -1713,6 +1738,28 @@
"node": ">=10.13.0" "node": ">=10.13.0"
} }
}, },
"node_modules/@types/linkify-it": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.2.tgz",
"integrity": "sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==",
"dev": true
},
"node_modules/@types/markdown-it": {
"version": "12.2.3",
"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-12.2.3.tgz",
"integrity": "sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==",
"dev": true,
"dependencies": {
"@types/linkify-it": "*",
"@types/mdurl": "*"
}
},
"node_modules/@types/mdurl": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.2.tgz",
"integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==",
"dev": true
},
"node_modules/@types/parse-json": { "node_modules/@types/parse-json": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@ -1764,6 +1811,12 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
"dev": true
},
"node_modules/array-union": { "node_modules/array-union": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@ -1814,6 +1867,12 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/bluebird": {
"version": "3.7.2",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
"dev": true
},
"node_modules/boolbase": { "node_modules/boolbase": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@ -1898,6 +1957,18 @@
} }
] ]
}, },
"node_modules/catharsis": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/catharsis/-/catharsis-0.9.0.tgz",
"integrity": "sha512-prMTQVpcns/tzFgFVkVp6ak6RykZyWb3gu8ckUpd6YkTlacOd3DXGJjIpD4Q6zJirizvaiAjSSHlOsA+6sNh2A==",
"dev": true,
"dependencies": {
"lodash": "^4.17.15"
},
"engines": {
"node": ">= 10"
}
},
"node_modules/chalk": { "node_modules/chalk": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@ -2565,6 +2636,53 @@
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"dev": true "dev": true
}, },
"node_modules/js2xmlparser": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/js2xmlparser/-/js2xmlparser-4.0.2.tgz",
"integrity": "sha512-6n4D8gLlLf1n5mNLQPRfViYzu9RATblzPEtm1SthMX1Pjao0r9YI9nw7ZIfRxQMERS87mcswrg+r/OYrPRX6jA==",
"dev": true,
"dependencies": {
"xmlcreate": "^2.0.4"
}
},
"node_modules/jsdoc": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-4.0.0.tgz",
"integrity": "sha512-tzTgkklbWKrlaQL2+e3NNgLcZu3NaK2vsHRx7tyHQ+H5jcB9Gx0txSd2eJWlMC/xU1+7LQu4s58Ry0RkuaEQVg==",
"dev": true,
"dependencies": {
"@babel/parser": "^7.9.4",
"@jsdoc/salty": "^0.2.1",
"@types/markdown-it": "^12.2.3",
"bluebird": "^3.7.2",
"catharsis": "^0.9.0",
"escape-string-regexp": "^2.0.0",
"js2xmlparser": "^4.0.2",
"klaw": "^3.0.0",
"markdown-it": "^12.3.2",
"markdown-it-anchor": "^8.4.1",
"marked": "^4.0.10",
"mkdirp": "^1.0.4",
"requizzle": "^0.2.3",
"strip-json-comments": "^3.1.0",
"underscore": "~1.13.2"
},
"bin": {
"jsdoc": "jsdoc.js"
},
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/jsdoc/node_modules/escape-string-regexp": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
"integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/json-parse-even-better-errors": { "node_modules/json-parse-even-better-errors": {
"version": "2.3.1", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@ -2590,6 +2708,15 @@
"graceful-fs": "^4.1.6" "graceful-fs": "^4.1.6"
} }
}, },
"node_modules/klaw": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/klaw/-/klaw-3.0.0.tgz",
"integrity": "sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==",
"dev": true,
"dependencies": {
"graceful-fs": "^4.1.9"
}
},
"node_modules/lightningcss": { "node_modules/lightningcss": {
"version": "1.16.1", "version": "1.16.1",
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.16.1.tgz", "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.16.1.tgz",
@ -2773,6 +2900,15 @@
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
"dev": true "dev": true
}, },
"node_modules/linkify-it": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
"integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
"dev": true,
"dependencies": {
"uc.micro": "^1.0.1"
}
},
"node_modules/lmdb": { "node_modules/lmdb": {
"version": "2.5.2", "version": "2.5.2",
"resolved": "https://registry.npmjs.org/lmdb/-/lmdb-2.5.2.tgz", "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-2.5.2.tgz",
@ -2837,12 +2973,65 @@
"semver": "bin/semver.js" "semver": "bin/semver.js"
} }
}, },
"node_modules/markdown-it": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz",
"integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==",
"dev": true,
"dependencies": {
"argparse": "^2.0.1",
"entities": "~2.1.0",
"linkify-it": "^3.0.1",
"mdurl": "^1.0.1",
"uc.micro": "^1.0.5"
},
"bin": {
"markdown-it": "bin/markdown-it.js"
}
},
"node_modules/markdown-it-anchor": {
"version": "8.6.6",
"resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-8.6.6.tgz",
"integrity": "sha512-jRW30YGywD2ESXDc+l17AiritL0uVaSnWsb26f+68qaW9zgbIIr1f4v2Nsvc0+s0Z2N3uX6t/yAw7BwCQ1wMsA==",
"dev": true,
"peerDependencies": {
"@types/markdown-it": "*",
"markdown-it": "*"
}
},
"node_modules/markdown-it/node_modules/entities": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
"integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
"dev": true,
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/marked": {
"version": "4.2.5",
"resolved": "https://registry.npmjs.org/marked/-/marked-4.2.5.tgz",
"integrity": "sha512-jPueVhumq7idETHkb203WDD4fMA3yV9emQ5vLwop58lu8bTclMghBWcYAavlDqIEMaisADinV1TooIFCfqOsYQ==",
"dev": true,
"bin": {
"marked": "bin/marked.js"
},
"engines": {
"node": ">= 12"
}
},
"node_modules/mdn-data": { "node_modules/mdn-data": {
"version": "2.0.14", "version": "2.0.14",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
"integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
"dev": true "dev": true
}, },
"node_modules/mdurl": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
"integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
"dev": true
},
"node_modules/minimatch": { "node_modules/minimatch": {
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@ -2854,6 +3043,18 @@
"node": "*" "node": "*"
} }
}, },
"node_modules/mkdirp": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
"dev": true,
"bin": {
"mkdirp": "bin/cmd.js"
},
"engines": {
"node": ">=10"
}
},
"node_modules/msgpackr": { "node_modules/msgpackr": {
"version": "1.6.3", "version": "1.6.3",
"resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.6.3.tgz", "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.6.3.tgz",
@ -3238,6 +3439,15 @@
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
"dev": true "dev": true
}, },
"node_modules/requizzle": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/requizzle/-/requizzle-0.2.4.tgz",
"integrity": "sha512-JRrFk1D4OQ4SqovXOgdav+K8EAhSB/LJZqCz8tbX0KObcdeM15Ss59ozWMBWmmINMagCwmqn4ZNryUGpBsl6Jw==",
"dev": true,
"dependencies": {
"lodash": "^4.17.21"
}
},
"node_modules/resolve-from": { "node_modules/resolve-from": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@ -3327,6 +3537,18 @@
"deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility", "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility",
"dev": true "dev": true
}, },
"node_modules/strip-json-comments": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
"dev": true,
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/strip-outer": { "node_modules/strip-outer": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
@ -3453,6 +3675,18 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/uc.micro": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
"dev": true
},
"node_modules/underscore": {
"version": "1.13.6",
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
"integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==",
"dev": true
},
"node_modules/universalify": { "node_modules/universalify": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@ -3510,6 +3744,12 @@
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
}, },
"node_modules/xmlcreate": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/xmlcreate/-/xmlcreate-2.0.4.tgz",
"integrity": "sha512-nquOebG4sngPmGPICTS5EnxqhKbCmz5Ox5hsszI2T6U5qdrJizBc+0ilYSEjTSzU0yZcmvppztXe/5Al5fUwdg==",
"dev": true
},
"node_modules/xxhash-wasm": { "node_modules/xxhash-wasm": {
"version": "0.4.2", "version": "0.4.2",
"resolved": "https://registry.npmjs.org/xxhash-wasm/-/xxhash-wasm-0.4.2.tgz", "resolved": "https://registry.npmjs.org/xxhash-wasm/-/xxhash-wasm-0.4.2.tgz",
@ -3604,6 +3844,12 @@
} }
} }
}, },
"@babel/parser": {
"version": "7.20.7",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.7.tgz",
"integrity": "sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==",
"dev": true
},
"@jridgewell/gen-mapping": { "@jridgewell/gen-mapping": {
"version": "0.3.2", "version": "0.3.2",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
@ -3653,6 +3899,15 @@
"@jridgewell/sourcemap-codec": "^1.4.10" "@jridgewell/sourcemap-codec": "^1.4.10"
} }
}, },
"@jsdoc/salty": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/@jsdoc/salty/-/salty-0.2.2.tgz",
"integrity": "sha512-A1FrVnc7L9qI2gUGsfN0trTiJNK72Y0CL/VAyrmYEmeKI3pnHDawP64CEev31XLyAAOx2xmDo3tbadPxC0CSbw==",
"dev": true,
"requires": {
"lodash": "^4.17.21"
}
},
"@lezer/common": { "@lezer/common": {
"version": "0.15.12", "version": "0.15.12",
"resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.12.tgz", "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.12.tgz",
@ -4601,6 +4856,28 @@
"integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
"dev": true "dev": true
}, },
"@types/linkify-it": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.2.tgz",
"integrity": "sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==",
"dev": true
},
"@types/markdown-it": {
"version": "12.2.3",
"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-12.2.3.tgz",
"integrity": "sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==",
"dev": true,
"requires": {
"@types/linkify-it": "*",
"@types/mdurl": "*"
}
},
"@types/mdurl": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.2.tgz",
"integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==",
"dev": true
},
"@types/parse-json": { "@types/parse-json": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@ -4637,6 +4914,12 @@
"picomatch": "^2.0.4" "picomatch": "^2.0.4"
} }
}, },
"argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
"dev": true
},
"array-union": { "array-union": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@ -4678,6 +4961,12 @@
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"dev": true "dev": true
}, },
"bluebird": {
"version": "3.7.2",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
"dev": true
},
"boolbase": { "boolbase": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@ -4730,6 +5019,15 @@
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001400.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001400.tgz",
"integrity": "sha512-Mv659Hn65Z4LgZdJ7ge5JTVbE3rqbJaaXgW5LEI9/tOaXclfIZ8DW7D7FCWWWmWiiPS7AC48S8kf3DApSxQdgA==" "integrity": "sha512-Mv659Hn65Z4LgZdJ7ge5JTVbE3rqbJaaXgW5LEI9/tOaXclfIZ8DW7D7FCWWWmWiiPS7AC48S8kf3DApSxQdgA=="
}, },
"catharsis": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/catharsis/-/catharsis-0.9.0.tgz",
"integrity": "sha512-prMTQVpcns/tzFgFVkVp6ak6RykZyWb3gu8ckUpd6YkTlacOd3DXGJjIpD4Q6zJirizvaiAjSSHlOsA+6sNh2A==",
"dev": true,
"requires": {
"lodash": "^4.17.15"
}
},
"chalk": { "chalk": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@ -5189,6 +5487,46 @@
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"dev": true "dev": true
}, },
"js2xmlparser": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/js2xmlparser/-/js2xmlparser-4.0.2.tgz",
"integrity": "sha512-6n4D8gLlLf1n5mNLQPRfViYzu9RATblzPEtm1SthMX1Pjao0r9YI9nw7ZIfRxQMERS87mcswrg+r/OYrPRX6jA==",
"dev": true,
"requires": {
"xmlcreate": "^2.0.4"
}
},
"jsdoc": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-4.0.0.tgz",
"integrity": "sha512-tzTgkklbWKrlaQL2+e3NNgLcZu3NaK2vsHRx7tyHQ+H5jcB9Gx0txSd2eJWlMC/xU1+7LQu4s58Ry0RkuaEQVg==",
"dev": true,
"requires": {
"@babel/parser": "^7.9.4",
"@jsdoc/salty": "^0.2.1",
"@types/markdown-it": "^12.2.3",
"bluebird": "^3.7.2",
"catharsis": "^0.9.0",
"escape-string-regexp": "^2.0.0",
"js2xmlparser": "^4.0.2",
"klaw": "^3.0.0",
"markdown-it": "^12.3.2",
"markdown-it-anchor": "^8.4.1",
"marked": "^4.0.10",
"mkdirp": "^1.0.4",
"requizzle": "^0.2.3",
"strip-json-comments": "^3.1.0",
"underscore": "~1.13.2"
},
"dependencies": {
"escape-string-regexp": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
"integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
"dev": true
}
}
},
"json-parse-even-better-errors": { "json-parse-even-better-errors": {
"version": "2.3.1", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@ -5208,6 +5546,15 @@
"graceful-fs": "^4.1.6" "graceful-fs": "^4.1.6"
} }
}, },
"klaw": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/klaw/-/klaw-3.0.0.tgz",
"integrity": "sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==",
"dev": true,
"requires": {
"graceful-fs": "^4.1.9"
}
},
"lightningcss": { "lightningcss": {
"version": "1.16.1", "version": "1.16.1",
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.16.1.tgz", "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.16.1.tgz",
@ -5278,6 +5625,15 @@
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
"dev": true "dev": true
}, },
"linkify-it": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
"integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
"dev": true,
"requires": {
"uc.micro": "^1.0.1"
}
},
"lmdb": { "lmdb": {
"version": "2.5.2", "version": "2.5.2",
"resolved": "https://registry.npmjs.org/lmdb/-/lmdb-2.5.2.tgz", "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-2.5.2.tgz",
@ -5331,12 +5687,51 @@
} }
} }
}, },
"markdown-it": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz",
"integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==",
"dev": true,
"requires": {
"argparse": "^2.0.1",
"entities": "~2.1.0",
"linkify-it": "^3.0.1",
"mdurl": "^1.0.1",
"uc.micro": "^1.0.5"
},
"dependencies": {
"entities": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
"integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
"dev": true
}
}
},
"markdown-it-anchor": {
"version": "8.6.6",
"resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-8.6.6.tgz",
"integrity": "sha512-jRW30YGywD2ESXDc+l17AiritL0uVaSnWsb26f+68qaW9zgbIIr1f4v2Nsvc0+s0Z2N3uX6t/yAw7BwCQ1wMsA==",
"dev": true
},
"marked": {
"version": "4.2.5",
"resolved": "https://registry.npmjs.org/marked/-/marked-4.2.5.tgz",
"integrity": "sha512-jPueVhumq7idETHkb203WDD4fMA3yV9emQ5vLwop58lu8bTclMghBWcYAavlDqIEMaisADinV1TooIFCfqOsYQ==",
"dev": true
},
"mdn-data": { "mdn-data": {
"version": "2.0.14", "version": "2.0.14",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
"integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
"dev": true "dev": true
}, },
"mdurl": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
"integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
"dev": true
},
"minimatch": { "minimatch": {
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@ -5345,6 +5740,12 @@
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
}, },
"mkdirp": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
"dev": true
},
"msgpackr": { "msgpackr": {
"version": "1.6.3", "version": "1.6.3",
"resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.6.3.tgz", "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.6.3.tgz",
@ -5621,6 +6022,15 @@
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
"dev": true "dev": true
}, },
"requizzle": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/requizzle/-/requizzle-0.2.4.tgz",
"integrity": "sha512-JRrFk1D4OQ4SqovXOgdav+K8EAhSB/LJZqCz8tbX0KObcdeM15Ss59ozWMBWmmINMagCwmqn4ZNryUGpBsl6Jw==",
"dev": true,
"requires": {
"lodash": "^4.17.21"
}
},
"resolve-from": { "resolve-from": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@ -5677,6 +6087,12 @@
"integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==", "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
"dev": true "dev": true
}, },
"strip-json-comments": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
"dev": true
},
"strip-outer": { "strip-outer": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
@ -5769,6 +6185,18 @@
"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
"dev": true "dev": true
}, },
"uc.micro": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
"dev": true
},
"underscore": {
"version": "1.13.6",
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
"integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==",
"dev": true
},
"universalify": { "universalify": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@ -5804,6 +6232,12 @@
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
}, },
"xmlcreate": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/xmlcreate/-/xmlcreate-2.0.4.tgz",
"integrity": "sha512-nquOebG4sngPmGPICTS5EnxqhKbCmz5Ox5hsszI2T6U5qdrJizBc+0ilYSEjTSzU0yZcmvppztXe/5Al5fUwdg==",
"dev": true
},
"xxhash-wasm": { "xxhash-wasm": {
"version": "0.4.2", "version": "0.4.2",
"resolved": "https://registry.npmjs.org/xxhash-wasm/-/xxhash-wasm-0.4.2.tgz", "resolved": "https://registry.npmjs.org/xxhash-wasm/-/xxhash-wasm-0.4.2.tgz",

7
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "cg-select", "name": "cg-select",
"version": "0.1.15", "version": "0.1.171",
"description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling", "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
"author": { "author": {
"name": "CraftGroup", "name": "CraftGroup",
@ -8,8 +8,8 @@
}, },
"homepage": "https://cg-select.itguild.info", "homepage": "https://cg-select.itguild.info",
"scripts": { "scripts": {
"start": "parcel src/page/index.html -p 4500 --open ", "start": "parcel example/index.html -p 4500 --open ",
"build": "parcel build ./src/page/index.html", "build": "parcel build index.js",
"deploy": "gh-pages -d dist", "deploy": "gh-pages -d dist",
"predeploy": "npm run build" "predeploy": "npm run build"
}, },
@ -23,6 +23,7 @@
}, },
"devDependencies": { "devDependencies": {
"@parcel/transformer-sass": "^2.7.0", "@parcel/transformer-sass": "^2.7.0",
"jsdoc": "^4.0.0",
"parcel": "^2.7.0", "parcel": "^2.7.0",
"prettier": "^2.7.1" "prettier": "^2.7.1"
}, },

89
src/cg-select.js
View File

@ -15,6 +15,7 @@ import {
createNativeSelect, createNativeSelect,
} from './components/create-element'; } from './components/create-element';
import { ru, en } from './language/language'; import { ru, en } from './language/language';
import './main.scss'
/** /**
* @class Описание класса DropDown * @class Описание класса DropDown
@ -95,6 +96,8 @@ export class DropDown {
darkTheme: true/false, darkTheme: true/false,
searchMode: true/false, searchMode: true/false,
closeOnSelect: true/false, closeOnSelect: true/false,
nativeSelectMode: true/false,
listDisplayMode: true/false,
language: 'ru/en', language: 'ru/en',
styles: { styles: {
head: { head: {
@ -237,11 +240,17 @@ export class DropDown {
* @method buttonControl * @method buttonControl
*/ */
buttonControl(button, method) { buttonControl(button, method) {
const { listDisplayMode } = this.#options;
if (listDisplayMode === true) {
return;
}
this.btn = button; this.btn = button;
button.addEventListener('click', () => { button.addEventListener('click', () => {
if (method === 'open') { if (method.toLowerCase() === 'open') {
this.#open(true); this.#open(true);
} else if (method === 'close') { } else if (method.toLowerCase() === 'close') {
this.#close(); this.#close();
} else { } else {
return; return;
@ -396,7 +405,17 @@ export class DropDown {
* @description Рендер елементов в селекте. * @description Рендер елементов в селекте.
*/ */
#render(select) { #render(select) {
const { styles, multiselect, searchMode, multiselectTag, darkTheme, language } = this.#options; const {
styles,
multiselect,
searchMode,
multiselectTag,
darkTheme,
language,
nativeSelectMode,
listDisplayMode,
} = this.#options;
const random = Math.random().toString(36).substring(2, 10); const random = Math.random().toString(36).substring(2, 10);
if (select || (select && styles)) { if (select || (select && styles)) {
@ -483,9 +502,17 @@ export class DropDown {
this.#checkTheme(); this.#checkTheme();
} }
if (nativeSelectMode === true) {
this.#selectMode(nativeSelectMode);
}
this.#list = this.#element.querySelector('.list'); this.#list = this.#element.querySelector('.list');
this.#caret = this.#element.querySelector('.caret'); this.#caret = this.#element.querySelector('.caret');
if (listDisplayMode === true) {
this.#displayMode(listDisplayMode);
}
this.#addOptionsBehaviour(); this.#addOptionsBehaviour();
} }
@ -835,4 +862,60 @@ export class DropDown {
} }
}); });
} }
/**
* Приватный метод экземпляра класса DropDown
* @protected
* @param {boolean} nativeSelectMode параметр отвечающий за добавления нативного селекта.
* @description Изменяет отображение селекта на мобильных устройствах
* @method #selectMode
*/
#selectMode(nativeSelectMode) {
let win = window.outerWidth;
if (nativeSelectMode === true) {
const select = this.#element.querySelector('.cg-select');
const list = this.#element.querySelector('.list');
const nativeSelect = this.#element.querySelector('.nativeSelect');
if (win < 576) {
select.classList.add('displayHide');
list.classList.add('displayHide');
nativeSelect.classList.add('nativeSelectActive');
} else if (win > 576) {
select.classList.remove('displayHide');
list.classList.remove('displayHide');
nativeSelect.classList.remove('nativeSelectActive');
nativeSelect.classList.add('displayHide');
}
} else {
return;
}
}
/**
* Приватный метод экземпляра класса DropDown
* @protected
* @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна.
* @description Изменяет отображение листа с выбором в виде модального окна.
* @method #displayMode
*/
#displayMode(listDisplayMode) {
if (listDisplayMode === true) {
const modal = document.createElement('div');
const body = document.querySelector('body');
const list = this.#list;
modal.appendChild(list);
this.#element.appendChild(modal);
this.#element.addEventListener('click', () => {
modal.classList.toggle('modal');
list.classList.toggle('listModal');
body.classList.toggle('overflowHide');
});
} else {
return;
}
}
} }

3
src/index.js
View File

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

24
src/main.scss
View File

@ -2,6 +2,7 @@
@import './style/scrollbar.scss'; @import './style/scrollbar.scss';
@import './style/svgStyle.scss'; @import './style/svgStyle.scss';
@import './style/whiteTheme.scss'; @import './style/whiteTheme.scss';
@import './style/displayMode.scss';
// ----Layout---- // ----Layout----
.cg-dropdown { .cg-dropdown {
@ -258,8 +259,11 @@ input[type='checkbox'] {
.label { .label {
color: white; color: white;
} }
//-------Behavior-------- //-------Behavior--------
.active { .active {
text-align: start;
background: #8282822c; background: #8282822c;
} }
@ -270,7 +274,7 @@ input[type='checkbox'] {
-ms-transition: 0.5s; -ms-transition: 0.5s;
-o-transition: 0.5s; -o-transition: 0.5s;
display: block; display: block !important;
opacity: 1; opacity: 1;
&_none { &_none {
@ -289,7 +293,7 @@ input[type='checkbox'] {
} }
.displayHide { .displayHide {
display: none; display: none !important;
} }
/*320px - 576px*/ /*320px - 576px*/
@ -299,23 +303,13 @@ input[type='checkbox'] {
padding: 0; padding: 0;
} }
.container {
width: 90%;
.header {
h1 {
font-size: 32px;
}
}
}
.list { .list {
width: 98% !important; width: 98% !important;
} }
// .open { .listModal {
// display: none !important; width: 88% !important;
// } }
.cg-select { .cg-select {
width: 100% !important; width: 100% !important;

24
src/style/displayMode.scss Normal file
View File

@ -0,0 +1,24 @@
.modal {
display: flex;
justify-content: center;
background-color: rgba(0, 0, 0, 0.45);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 9999;
&_active {
display: flex;
}
}
.listModal {
position: fixed !important;
top: 150px;
}
.overflowHide {
overflow: hidden;
}

34
src/style/nativeSelect.scss
View File

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