pull 30.12
This commit is contained in:
MaxOvs
commit
136a6bc6e5
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,3 +1,4 @@
|
||||
node_modules
|
||||
dist
|
||||
.parcel-cache
|
||||
|
||||
|
||||
10
CHANGELOG.md
10
CHANGELOG.md
@ -1,6 +1,6 @@
|
||||
# CG-SELECT
|
||||
|
||||
## 16.12.2022 - релиз версии 0.1.0!
|
||||
### 16.12.2022 - релиз версии 0.1.0!
|
||||
|
||||
### 20.12.2022 - обновление 0.1.12.
|
||||
|
||||
@ -12,3 +12,11 @@
|
||||
|
||||
- Изменеия в расположении файлов scss.
|
||||
- Исправлено влияние стилей селекта на JS приложение.
|
||||
|
||||
### 29.12.2022 - обновление 0.1.17
|
||||
|
||||
- Добавленна возможность менять отображения селекта на телефонах (нативный/cg-select).
|
||||
- Добавленна возможность менять отображения листа с выбором (обычный/модальное окно).
|
||||
- Исправленны выявленные баги.
|
||||
- Исправленно отображение страницы с примером на мобильных устройствах.
|
||||
- Обновленна документация!
|
||||
|
||||
14
README.md
14
README.md
@ -1,6 +1,6 @@
|
||||
# CG-SELECT
|
||||
|
||||
## version ~ 0.1.14
|
||||
## version ~ 0.1.171
|
||||
|
||||
Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта.
|
||||
Доступна кастомизация, мультивыбор и живой поиск по елементам.
|
||||
@ -74,9 +74,9 @@ const dropdown = new DropDown({
|
||||
|
||||
|
||||
|
||||
Вся документация по 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
|
||||
|
||||
@ -88,10 +88,10 @@ const dropdown = new DropDown({
|
||||
|
||||
## Compatibility
|
||||
|
||||
Совместимость с приложениями | JS | React | Angular | Vue |
|
||||
| -------------------------- | :--: | :-----: | :-----: | :--: |
|
||||
| CG-SELECT |  |   |  | |
|
||||
| Комментарий | Протестирован в Js приложениях и работает успешно.|Работает только с костылем в виде `setTimeout()` | тесты не проведены| тесты не проведены |
|
||||
| Совместимость с приложениями | JS | React | Angular | Vue |
|
||||
| ---------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
|
||||
| CG-SELECT |  |   |  |  |
|
||||
| Комментарий | Протестирован в Js приложениях и работает успешно. | Работает только с костылем в виде `setTimeout()` | пока недоступно | тесты не проведены |
|
||||
|
||||
## History
|
||||
|
||||
|
||||
@ -110,10 +110,7 @@
|
||||
<ul>
|
||||
<li><a href="DropDown.html">DropDown</a></li>
|
||||
<li>
|
||||
<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
|
||||
>
|
||||
<a href="constructor.html">Конструктор класса DropDown</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Modules</h3>
|
||||
@ -134,10 +131,12 @@
|
||||
<li><a href="global.html#render">#render</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#displayMode">#displayMode</a></li>
|
||||
<li><a href="global.html#selectMode">#selectMode</a></li>
|
||||
</ul>
|
||||
<h3>Public methods</h3>
|
||||
<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#buttonControl">buttonControl</a></li>
|
||||
<li><a href="global.html#deleteItem">deleteItem</a></li>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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/lang-css.js"></script>
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1 class="page-title">Source: cg-dropdown.js</h1>
|
||||
<h1 class="page-title">Source: cg-select.js</h1>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
@ -40,7 +40,7 @@
|
||||
/**
|
||||
* @class Описание класса DropDown
|
||||
* @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
|
||||
*@author Овсяников Максим
|
||||
* @author Овсяников Максим
|
||||
*/
|
||||
export class DropDown {
|
||||
/**
|
||||
@ -116,7 +116,9 @@
|
||||
darkTheme: true/false,
|
||||
searchMode: true/false,
|
||||
closeOnSelect: true/false,
|
||||
lenguage: 'ru/en',
|
||||
nativeSelectMode: true/false,
|
||||
listDisplayMode: true/false,
|
||||
language: 'ru/en',
|
||||
styles: {
|
||||
head: {
|
||||
background: '...',
|
||||
@ -238,11 +240,14 @@
|
||||
}
|
||||
|
||||
const select = this.#element.querySelector('.cg-select');
|
||||
const nativeSelect = this.#element.querySelector('.nativeSelect');
|
||||
if (value === true) {
|
||||
this.#element.setAttribute('disabled', true);
|
||||
nativeSelect.setAttribute('disabled', true);
|
||||
select.classList.add('disabled');
|
||||
} else {
|
||||
this.#element.removeAttribute('disabled');
|
||||
nativeSelect.removeAttribute('disabled');
|
||||
select.classList.remove('disabled');
|
||||
}
|
||||
}
|
||||
@ -255,11 +260,18 @@
|
||||
* @method buttonControl
|
||||
*/
|
||||
buttonControl(button, method) {
|
||||
const {listDisplayMode} = this.#options;
|
||||
|
||||
|
||||
if(listDisplayMode === true){
|
||||
return
|
||||
}
|
||||
|
||||
this.btn = button;
|
||||
button.addEventListener('click', () => {
|
||||
if (method === 'open') {
|
||||
if (method.toLowerCase() === 'open') {
|
||||
this.#open(true);
|
||||
} else if (method === 'close') {
|
||||
} else if (method.toLowerCase() === 'close') {
|
||||
this.#close();
|
||||
} else {
|
||||
return;
|
||||
@ -269,14 +281,18 @@
|
||||
|
||||
/**
|
||||
* Метод экземпляра класса DropDown
|
||||
* @param {object} lenguage объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
|
||||
* @param {object} language объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
|
||||
* @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата
|
||||
* @method addLenguage
|
||||
* @method addLanguage
|
||||
*/
|
||||
addLenguage(lenguage) {
|
||||
const { placeholder, textInListSearch } = lenguage;
|
||||
addLanguage(language) {
|
||||
const { placeholder, textInListSearch, selectPlaceholder } = language;
|
||||
const { searchMode } = this.#options;
|
||||
|
||||
const select = this.#element.querySelector('.selected');
|
||||
const textNodeSelect = document.createTextNode(selectPlaceholder);
|
||||
select.appendChild(textNodeSelect);
|
||||
|
||||
if (searchMode && searchMode == true) {
|
||||
const search = this.#element.querySelector('.inputSearch');
|
||||
const textNoRezult = this.#element.querySelector('.noRezult');
|
||||
@ -323,9 +339,10 @@
|
||||
|
||||
const elem = document.querySelector(options.selector);
|
||||
|
||||
if (!elem) {
|
||||
throw new Error(`Element with selector ${options.selector}`);
|
||||
}
|
||||
//TODO: для теста в реакте нужно пересмотреть необходимость этой проверки!
|
||||
// if (!elem) {
|
||||
// throw new Error(`Element with selector ${options.selector}`);
|
||||
// }
|
||||
|
||||
this.#element = elem;
|
||||
|
||||
@ -368,14 +385,18 @@
|
||||
* @protected
|
||||
*/
|
||||
#initSelected(select) {
|
||||
const { styles, selected, placeholder, lable } = this.#options;
|
||||
const { styles, selected, placeholder, lable, language } = this.#options;
|
||||
|
||||
if (selected) {
|
||||
createSelected(this.#element, selected);
|
||||
} else if (placeholder) {
|
||||
createSelected(this.#element, placeholder);
|
||||
} else {
|
||||
createSelected(this.#element, 'Select...');
|
||||
if (language && language === 'ru') {
|
||||
createSelected(this.#element, ru.selectPlaceholder);
|
||||
} else {
|
||||
createSelected(this.#element, en.selectPlaceholder);
|
||||
}
|
||||
}
|
||||
|
||||
if (select) {
|
||||
@ -405,7 +426,13 @@
|
||||
* @description Рендер елементов в селекте.
|
||||
*/
|
||||
#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);
|
||||
|
||||
if (select || (select && styles)) {
|
||||
@ -422,12 +449,13 @@
|
||||
this.random = random;
|
||||
|
||||
if (searchMode) {
|
||||
if (lenguage === 'ru') {
|
||||
if (language === 'ru') {
|
||||
inputSearch = createInputSearch(random, ru.placeholder);
|
||||
} else {
|
||||
inputSearch = createInputSearch(random, en.placeholder);
|
||||
}
|
||||
|
||||
const { search } = styles;
|
||||
customStylesFormat(search, inputSearch);
|
||||
ulList.appendChild(inputSearch);
|
||||
}
|
||||
|
||||
@ -491,9 +519,19 @@
|
||||
this.#checkTheme();
|
||||
}
|
||||
|
||||
if(nativeSelectMode === true){
|
||||
this.#selectMode(nativeSelectMode);
|
||||
}
|
||||
|
||||
|
||||
|
||||
this.#list = this.#element.querySelector('.list');
|
||||
this.#caret = this.#element.querySelector('.caret');
|
||||
|
||||
if(listDisplayMode === true){
|
||||
this.#displayMode(listDisplayMode)
|
||||
}
|
||||
|
||||
this.#addOptionsBehaviour();
|
||||
}
|
||||
|
||||
@ -751,14 +789,14 @@
|
||||
* @method #searchMode
|
||||
*/
|
||||
#searchMode(random) {
|
||||
const { lenguage } = this.#options;
|
||||
const { language } = this.#options;
|
||||
|
||||
const input = this.#element.querySelector(`#searchSelect-${random}`);
|
||||
const searchSelect = this.#element.querySelectorAll('.list__item');
|
||||
const result = document.createElement('p');
|
||||
|
||||
let textNode = '';
|
||||
if (lenguage === 'ru') {
|
||||
if (language && language === 'ru') {
|
||||
textNode = document.createTextNode(`${ru.textInListSearch}`);
|
||||
} else {
|
||||
textNode = document.createTextNode(`${en.textInListSearch}`);
|
||||
@ -774,17 +812,22 @@
|
||||
});
|
||||
|
||||
input.oninput = function () {
|
||||
let val = this.value.trim();
|
||||
let valueSearch = this.value.trim().toLowerCase();
|
||||
let anyMatch = false;
|
||||
|
||||
if (val != '') {
|
||||
if (valueSearch != '') {
|
||||
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');
|
||||
result.classList.remove('displayHide');
|
||||
} else {
|
||||
elem.classList.remove('displayHide');
|
||||
}
|
||||
});
|
||||
|
||||
result.classList.toggle('displayHide', anyMatch);
|
||||
} else {
|
||||
searchSelect.forEach((elem) => {
|
||||
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 < 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>
|
||||
</article>
|
||||
@ -850,10 +951,7 @@
|
||||
<ul>
|
||||
<li><a href="DropDown.html">DropDown</a></li>
|
||||
<li>
|
||||
<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
|
||||
>
|
||||
<a href="constructor.html">Конструктор класса DropDown</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Modules</h3>
|
||||
@ -874,10 +972,12 @@
|
||||
<li><a href="global.html#render">#render</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#displayMode">#displayMode</a></li>
|
||||
<li><a href="global.html#selectMode">#selectMode</a></li>
|
||||
</ul>
|
||||
<h3>Public methods</h3>
|
||||
<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#buttonControl">buttonControl</a></li>
|
||||
<li><a href="global.html#deleteItem">deleteItem</a></li>
|
||||
|
||||
@ -86,7 +86,9 @@
|
||||
darkTheme: true/false,
|
||||
searchMode: true/false,
|
||||
closeOnSelect: true/false,
|
||||
lenguage: 'ru/en',
|
||||
nativeSelectMode: true/false,
|
||||
listDisplayMode: true/false,
|
||||
language: 'ru/en',
|
||||
styles: {
|
||||
head: {
|
||||
background: '...',
|
||||
@ -101,7 +103,7 @@
|
||||
url: 'http/...',
|
||||
multiselect: true/false,
|
||||
multiselectTag: true/false,
|
||||
}</code></pre>
|
||||
}</code></pre>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@ -112,28 +114,34 @@
|
||||
<strong>selector</strong> - <strong>*обязательный параметр(индефикатор)</strong>,
|
||||
который задаеться при создании селекта.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong>selected</strong> - необязательный параметр, в который передается элемент
|
||||
который будет выбран изначально в селекте.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong>placeholder</strong> - необязательный параметр, в который передается текст
|
||||
плейсхолдера селекта.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong>items</strong> -
|
||||
<strong
|
||||
>*обязательный параметр(эсли не указан другой способ получения данных (url))</strong
|
||||
>, это массив елементов, которые будут отображаться в селекте при выборе.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong>darkTheme</strong> - необязательный параметр, который отвечает за включение
|
||||
светлой/темной темы по умолчанию, стоит темная тема(darkTheme == true).
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong>searchMode</strong> - необязательный параметр, который добавляет живой поиск
|
||||
по элеметам селекта.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong>closeOnSelect</strong> - необязательный параметр, который отвечает за
|
||||
поведения селекта при открытии, если closeOnSelect: false, тогда при выборе елемента в
|
||||
@ -142,16 +150,33 @@
|
||||
</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'. Можно добавить свою
|
||||
локализацию, с помощью функции <a href="global.html#addLenguage">addLanguage()</a>,
|
||||
локализацию, с помощью функции <a href="global.html#addLanguage">addLanguage()</a>,
|
||||
передав туда объект с полями для текста.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong>event</strong> - необязательный параметр, который отвечает за поведения
|
||||
селекта, передавая в этот параметр, евент по типу 'mouseenter', селект будет
|
||||
открываться при наведении.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong>url</strong> -
|
||||
<strong
|
||||
@ -160,16 +185,19 @@
|
||||
>
|
||||
htylthbn данные которые приходят с бекэнда в формате {id:"", title: "", value: ""}.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong>multiselect</strong> - необязательный параметр, который отвечает за поведения
|
||||
селекта, добавляет возможность выбирать несколько элементов. Выбранные элементы
|
||||
отрисовываются как обычный текст, через запятую.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong>multiselectTag</strong> - необязательный параметр, который отвечает за
|
||||
поведения селекта, для него,
|
||||
<strong>***работает только в месте с подключением multiselect.</strong>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong>styles</strong> - необязательный параметр, который отвечает за кастомизацию
|
||||
элементов селекта, в него передаются обьекты с CSS свойствами для кастомизируемых
|
||||
@ -186,10 +214,7 @@
|
||||
<ul>
|
||||
<li><a href="DropDown.html">DropDown</a></li>
|
||||
<li>
|
||||
<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
|
||||
>
|
||||
<a href="constructor.html">Конструктор класса DropDown</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Modules</h3>
|
||||
@ -210,10 +235,12 @@
|
||||
<li><a href="global.html#render">#render</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#displayMode">#displayMode</a></li>
|
||||
<li><a href="global.html#selectMode">#selectMode</a></li>
|
||||
</ul>
|
||||
<h3>Public methods</h3>
|
||||
<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#buttonControl">buttonControl</a></li>
|
||||
<li><a href="global.html#deleteItem">deleteItem</a></li>
|
||||
@ -153,10 +153,7 @@
|
||||
<ul>
|
||||
<li><a href="DropDown.html">DropDown</a></li>
|
||||
<li>
|
||||
<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
|
||||
>
|
||||
<a href="constructor.html">Конструктор класса DropDown</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Modules</h3>
|
||||
@ -177,10 +174,12 @@
|
||||
<li><a href="global.html#render">#render</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#displayMode">#displayMode</a></li>
|
||||
<li><a href="global.html#selectMode">#selectMode</a></li>
|
||||
</ul>
|
||||
<h3>Public methods</h3>
|
||||
<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#buttonControl">buttonControl</a></li>
|
||||
<li><a href="global.html#deleteItem">deleteItem</a></li>
|
||||
|
||||
@ -158,6 +158,104 @@
|
||||
</dd>
|
||||
</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">
|
||||
<span class="type-signature">(protected) </span>#initEvent<span class="signature"
|
||||
>()</span
|
||||
@ -440,7 +538,7 @@
|
||||
</dl>
|
||||
|
||||
<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>
|
||||
</h4>
|
||||
|
||||
@ -464,7 +562,7 @@
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="name"><code>lenguage</code></td>
|
||||
<td class="name"><code>language</code></td>
|
||||
|
||||
<td class="type">
|
||||
<span class="param-type">object</span>
|
||||
@ -758,7 +856,7 @@
|
||||
<dd class="tag-source">
|
||||
<ul class="dummy">
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
@ -774,10 +872,7 @@
|
||||
<ul>
|
||||
<li><a href="DropDown.html">DropDown</a></li>
|
||||
<li>
|
||||
<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
|
||||
>
|
||||
<a href="constructor.html">Конструктор класса DropDown</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Modules</h3>
|
||||
@ -798,10 +893,12 @@
|
||||
<li><a href="global.html#render">#render</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#displayMode">#displayMode</a></li>
|
||||
<li><a href="global.html#selectMode">#selectMode</a></li>
|
||||
</ul>
|
||||
<h3>Public methods</h3>
|
||||
<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#buttonControl">buttonControl</a></li>
|
||||
<li><a href="global.html#deleteItem">deleteItem</a></li>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
<section>
|
||||
<h2>CG-SELECT</h2>
|
||||
<a href="/src/page/index.html">-- Вернуться к примеру --</a>
|
||||
<a href="/example/index.html">-- Вернуться к примеру --</a>
|
||||
<p>
|
||||
Этот компонент предлагает более гибкую настройку и использование селекта. Так же
|
||||
реализованны методы взаимодействия с селектом.
|
||||
@ -35,10 +35,7 @@
|
||||
</ul>
|
||||
<p>
|
||||
<strong>*Все настройки можно посмореть в вкладке</strong>
|
||||
<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
|
||||
>
|
||||
<a href="constructor.html">Конструктор класса</a>
|
||||
</p>
|
||||
|
||||
<h5>Доступна возможность кастомизации основных элементов, таких как:</h5>
|
||||
@ -59,10 +56,7 @@
|
||||
<ul>
|
||||
<li><a href="DropDown.html">DropDown</a></li>
|
||||
<li>
|
||||
<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
|
||||
>
|
||||
<a href="constructor.html">Конструктор класса DropDown</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Modules</h3>
|
||||
@ -83,10 +77,12 @@
|
||||
<li><a href="global.html#render">#render</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#displayMode">#displayMode</a></li>
|
||||
<li><a href="global.html#selectMode">#selectMode</a></li>
|
||||
</ul>
|
||||
<h3>Public methods</h3>
|
||||
<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#buttonControl">buttonControl</a></li>
|
||||
<li><a href="global.html#deleteItem">deleteItem</a></li>
|
||||
|
||||
@ -618,10 +618,7 @@
|
||||
<ul>
|
||||
<li><a href="DropDown.html">DropDown</a></li>
|
||||
<li>
|
||||
<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
|
||||
>
|
||||
<a href="constructor.html">Конструктор класса DropDown</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Modules</h3>
|
||||
@ -642,10 +639,12 @@
|
||||
<li><a href="global.html#render">#render</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#displayMode">#displayMode</a></li>
|
||||
<li><a href="global.html#selectMode">#selectMode</a></li>
|
||||
</ul>
|
||||
<h3>Public methods</h3>
|
||||
<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#buttonControl">buttonControl</a></li>
|
||||
<li><a href="global.html#deleteItem">deleteItem</a></li>
|
||||
|
||||
@ -260,10 +260,7 @@
|
||||
<ul>
|
||||
<li><a href="DropDown.html">DropDown</a></li>
|
||||
<li>
|
||||
<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
|
||||
>
|
||||
<a href="constructor.html">Конструктор класса DropDown</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Modules</h3>
|
||||
@ -284,10 +281,12 @@
|
||||
<li><a href="global.html#render">#render</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#displayMode">#displayMode</a></li>
|
||||
<li><a href="global.html#selectMode">#selectMode</a></li>
|
||||
</ul>
|
||||
<h3>Public methods</h3>
|
||||
<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#buttonControl">buttonControl</a></li>
|
||||
<li><a href="global.html#deleteItem">deleteItem</a></li>
|
||||
|
||||
@ -257,10 +257,7 @@
|
||||
<ul>
|
||||
<li><a href="DropDown.html">DropDown</a></li>
|
||||
<li>
|
||||
<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
|
||||
>
|
||||
<a href="constructor.html">Конструктор класса DropDown</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Modules</h3>
|
||||
@ -281,10 +278,12 @@
|
||||
<li><a href="global.html#render">#render</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#displayMode">#displayMode</a></li>
|
||||
<li><a href="global.html#selectMode">#selectMode</a></li>
|
||||
</ul>
|
||||
<h3>Public methods</h3>
|
||||
<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#buttonControl">buttonControl</a></li>
|
||||
<li><a href="global.html#deleteItem">deleteItem</a></li>
|
||||
|
||||
@ -13,6 +13,14 @@ const codeFourth = document.getElementById('codeFourth');
|
||||
const fifthBtn = document.getElementById('fifth');
|
||||
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', () => {
|
||||
codeFirst.classList.toggle("active")
|
||||
})
|
||||
@ -32,3 +40,11 @@ fourthBtn.addEventListener('click', () => {
|
||||
fifthBtn.addEventListener('click', () => {
|
||||
codeFifth.classList.toggle("active")
|
||||
})
|
||||
|
||||
six.addEventListener('click', () => {
|
||||
codeSix.classList.toggle("active")
|
||||
})
|
||||
|
||||
Native.addEventListener('click', () => {
|
||||
codeNative.classList.toggle("active")
|
||||
})
|
||||
@ -87,7 +87,6 @@
|
||||
|
||||
.content {
|
||||
margin-top: 15px;
|
||||
// background-color: #6b6d76;
|
||||
border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
@ -112,7 +111,6 @@
|
||||
font-size: 20px;
|
||||
}
|
||||
&_submit {
|
||||
//background-color: #2a2f3b;
|
||||
width: 200px;
|
||||
height: 35px;
|
||||
border-radius: 10px;
|
||||
@ -193,3 +191,21 @@ pre {
|
||||
.active {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -4,8 +4,17 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<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>
|
||||
<link href="/src/page/example.scss" rel="stylesheet" />
|
||||
<link href="example.scss" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="body-example">
|
||||
<div class="container">
|
||||
@ -66,6 +75,93 @@
|
||||
</form>
|
||||
</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">
|
||||
<h1 class="example-select_title">Селект с данными с URL</h1>
|
||||
<div class="layout-select">
|
||||
@ -218,7 +314,7 @@
|
||||
<h1 class="example-select_title">Функция disabled</h1>
|
||||
|
||||
<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">
|
||||
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
|
||||
@ -27,12 +27,59 @@ const dropdown = new DropDown({
|
||||
},
|
||||
});
|
||||
|
||||
// const ger = {
|
||||
// placeholder: 'searcH????',
|
||||
// textInListSearch: 'None',
|
||||
// };
|
||||
// ------------------------------NativeSelect-----------------------
|
||||
const dropdownNativeSelect = new DropDown({
|
||||
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--------------------
|
||||
const dropdown3 = new DropDown({
|
||||
3
index.js
Normal file
3
index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import { DropDown } from './src/cg-select';
|
||||
|
||||
export default DropDown;
|
||||
438
package-lock.json
generated
438
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "cg-select",
|
||||
"version": "0.1.14",
|
||||
"version": "0.1.171",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "cg-select",
|
||||
"version": "0.1.14",
|
||||
"version": "0.1.171",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@parcel/optimizer-css": "^2.8.0",
|
||||
@ -14,6 +14,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@parcel/transformer-sass": "^2.7.0",
|
||||
"jsdoc": "^4.0.0",
|
||||
"parcel": "^2.7.0",
|
||||
"prettier": "^2.7.1"
|
||||
}
|
||||
@ -115,6 +116,18 @@
|
||||
"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": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
|
||||
@ -173,6 +186,18 @@
|
||||
"@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": {
|
||||
"version": "0.15.12",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.12.tgz",
|
||||
@ -1713,6 +1738,28 @@
|
||||
"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": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
|
||||
@ -1764,6 +1811,12 @@
|
||||
"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": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
|
||||
@ -1814,6 +1867,12 @@
|
||||
"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": {
|
||||
"version": "1.0.0",
|
||||
"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": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
@ -2565,6 +2636,53 @@
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"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": {
|
||||
"version": "2.3.1",
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"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": {
|
||||
"version": "1.16.1",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.16.1.tgz",
|
||||
@ -2773,6 +2900,15 @@
|
||||
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
|
||||
"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": {
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/lmdb/-/lmdb-2.5.2.tgz",
|
||||
@ -2837,12 +2973,65 @@
|
||||
"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": {
|
||||
"version": "2.0.14",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
|
||||
"integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
|
||||
"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": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
@ -2854,6 +3043,18 @@
|
||||
"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": {
|
||||
"version": "1.6.3",
|
||||
"resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.6.3.tgz",
|
||||
@ -3238,6 +3439,15 @@
|
||||
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
|
||||
"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": {
|
||||
"version": "4.0.0",
|
||||
"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",
|
||||
"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": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
|
||||
@ -3453,6 +3675,18 @@
|
||||
"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": {
|
||||
"version": "0.1.2",
|
||||
"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",
|
||||
"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": {
|
||||
"version": "0.4.2",
|
||||
"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": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
|
||||
@ -3653,6 +3899,15 @@
|
||||
"@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": {
|
||||
"version": "0.15.12",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.12.tgz",
|
||||
@ -4601,6 +4856,28 @@
|
||||
"integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
|
||||
"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": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
|
||||
@ -4637,6 +4914,12 @@
|
||||
"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": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
|
||||
@ -4678,6 +4961,12 @@
|
||||
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
|
||||
"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": {
|
||||
"version": "1.0.0",
|
||||
"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",
|
||||
"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": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
@ -5189,6 +5487,46 @@
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"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": {
|
||||
"version": "2.3.1",
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"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": {
|
||||
"version": "1.16.1",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.16.1.tgz",
|
||||
@ -5278,6 +5625,15 @@
|
||||
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
|
||||
"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": {
|
||||
"version": "2.5.2",
|
||||
"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": {
|
||||
"version": "2.0.14",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
|
||||
"integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
|
||||
"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": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
@ -5345,6 +5740,12 @@
|
||||
"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": {
|
||||
"version": "1.6.3",
|
||||
"resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.6.3.tgz",
|
||||
@ -5621,6 +6022,15 @@
|
||||
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
|
||||
"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": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
|
||||
@ -5677,6 +6087,12 @@
|
||||
"integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
|
||||
"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": {
|
||||
"version": "1.0.1",
|
||||
"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==",
|
||||
"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": {
|
||||
"version": "0.1.2",
|
||||
"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",
|
||||
"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": {
|
||||
"version": "0.4.2",
|
||||
"resolved": "https://registry.npmjs.org/xxhash-wasm/-/xxhash-wasm-0.4.2.tgz",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cg-select",
|
||||
"version": "0.1.15",
|
||||
"version": "0.1.171",
|
||||
"description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
|
||||
"author": {
|
||||
"name": "CraftGroup",
|
||||
@ -8,8 +8,8 @@
|
||||
},
|
||||
"homepage": "https://cg-select.itguild.info",
|
||||
"scripts": {
|
||||
"start": "parcel src/page/index.html -p 4500 --open ",
|
||||
"build": "parcel build ./src/page/index.html",
|
||||
"start": "parcel example/index.html -p 4500 --open ",
|
||||
"build": "parcel build index.js",
|
||||
"deploy": "gh-pages -d dist",
|
||||
"predeploy": "npm run build"
|
||||
},
|
||||
@ -23,6 +23,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@parcel/transformer-sass": "^2.7.0",
|
||||
"jsdoc": "^4.0.0",
|
||||
"parcel": "^2.7.0",
|
||||
"prettier": "^2.7.1"
|
||||
},
|
||||
|
||||
@ -15,6 +15,7 @@ import {
|
||||
createNativeSelect,
|
||||
} from './components/create-element';
|
||||
import { ru, en } from './language/language';
|
||||
import './main.scss'
|
||||
|
||||
/**
|
||||
* @class Описание класса DropDown
|
||||
@ -95,6 +96,8 @@ export class DropDown {
|
||||
darkTheme: true/false,
|
||||
searchMode: true/false,
|
||||
closeOnSelect: true/false,
|
||||
nativeSelectMode: true/false,
|
||||
listDisplayMode: true/false,
|
||||
language: 'ru/en',
|
||||
styles: {
|
||||
head: {
|
||||
@ -237,11 +240,17 @@ export class DropDown {
|
||||
* @method buttonControl
|
||||
*/
|
||||
buttonControl(button, method) {
|
||||
const { listDisplayMode } = this.#options;
|
||||
|
||||
if (listDisplayMode === true) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.btn = button;
|
||||
button.addEventListener('click', () => {
|
||||
if (method === 'open') {
|
||||
if (method.toLowerCase() === 'open') {
|
||||
this.#open(true);
|
||||
} else if (method === 'close') {
|
||||
} else if (method.toLowerCase() === 'close') {
|
||||
this.#close();
|
||||
} else {
|
||||
return;
|
||||
@ -396,7 +405,17 @@ export class DropDown {
|
||||
* @description Рендер елементов в селекте.
|
||||
*/
|
||||
#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);
|
||||
|
||||
if (select || (select && styles)) {
|
||||
@ -483,9 +502,17 @@ export class DropDown {
|
||||
this.#checkTheme();
|
||||
}
|
||||
|
||||
if (nativeSelectMode === true) {
|
||||
this.#selectMode(nativeSelectMode);
|
||||
}
|
||||
|
||||
this.#list = this.#element.querySelector('.list');
|
||||
this.#caret = this.#element.querySelector('.caret');
|
||||
|
||||
if (listDisplayMode === true) {
|
||||
this.#displayMode(listDisplayMode);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
import { DropDown } from './cg-select';
|
||||
|
||||
export default DropDown;
|
||||
@ -2,6 +2,7 @@
|
||||
@import './style/scrollbar.scss';
|
||||
@import './style/svgStyle.scss';
|
||||
@import './style/whiteTheme.scss';
|
||||
@import './style/displayMode.scss';
|
||||
|
||||
// ----Layout----
|
||||
.cg-dropdown {
|
||||
@ -258,8 +259,11 @@ input[type='checkbox'] {
|
||||
.label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
//-------Behavior--------
|
||||
|
||||
.active {
|
||||
text-align: start;
|
||||
background: #8282822c;
|
||||
}
|
||||
|
||||
@ -270,7 +274,7 @@ input[type='checkbox'] {
|
||||
-ms-transition: 0.5s;
|
||||
-o-transition: 0.5s;
|
||||
|
||||
display: block;
|
||||
display: block !important;
|
||||
opacity: 1;
|
||||
|
||||
&_none {
|
||||
@ -289,7 +293,7 @@ input[type='checkbox'] {
|
||||
}
|
||||
|
||||
.displayHide {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*320px - 576px*/
|
||||
@ -299,23 +303,13 @@ input[type='checkbox'] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 90%;
|
||||
|
||||
.header {
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 98% !important;
|
||||
}
|
||||
|
||||
// .open {
|
||||
// display: none !important;
|
||||
// }
|
||||
.listModal {
|
||||
width: 88% !important;
|
||||
}
|
||||
|
||||
.cg-select {
|
||||
width: 100% !important;
|
||||
|
||||
24
src/style/displayMode.scss
Normal file
24
src/style/displayMode.scss
Normal 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;
|
||||
}
|
||||
@ -18,19 +18,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
// @media (max-width: 576px) {
|
||||
// .nativeSelect {
|
||||
// display: block;
|
||||
// min-width: 235px;
|
||||
// height: 50px;
|
||||
.nativeSelectActive {
|
||||
display: block;
|
||||
min-width: 235px;
|
||||
height: 50px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
// border: none;
|
||||
// border-radius: 10px;
|
||||
// }
|
||||
@media (max-width: 576px) {
|
||||
.nativeSelect {
|
||||
min-width: 235px;
|
||||
height: 50px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
// select[multiple='multiple'] {
|
||||
// color: black;
|
||||
// background-color: white;
|
||||
// border-radius: 0;
|
||||
// }
|
||||
// }
|
||||
select[multiple='multiple'] {
|
||||
color: black;
|
||||
background-color: white;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user