diff --git a/README.md b/README.md
index 9054e5f..567d667 100644
--- a/README.md
+++ b/README.md
@@ -86,6 +86,13 @@ const dropdown = new DropDown({
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
+## Compatibility
+
+Совместимость с приложениями | 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)|
+| Комментарий | Протестирован в Js приложениях и работает успешно.|Работает только с костылем в виде `setTimeout()` | тесты не проведены| тесты не проведены |
+
## History
16.12.2022 - релиз версии 0.1.0!
diff --git a/documentation/cg-dropdown.js.html b/documentation/cg-dropdown.js.html
index 4b7f4dc..0cdaf02 100644
--- a/documentation/cg-dropdown.js.html
+++ b/documentation/cg-dropdown.js.html
@@ -25,14 +25,14 @@
getFormatItem,
getSelectText,
customStylesFormat,
- nativOptionMultiple,
- nativOptionOrdinary,
+ nativeOptionMultiple,
+ nativeOptionOrdinary,
clearSelect,
} from './components/utils';
import {
createBreadcrumb,
createInputSearch,
- createNativSelectOption,
+ createNativeSelectOption,
createNativeSelect,
} from './components/create-element';
import { ru, en } from './language/language';
@@ -416,19 +416,19 @@
}
const ulList = document.createElement('ul');
- const nativSelect = createNativeSelect();
+ const nativeSelect = createNativeSelect();
- let intputSearch = '';
+ let inputSearch = '';
this.random = random;
if (searchMode) {
if (lenguage === 'ru') {
- intputSearch = createInputSearch(random, ru.placeholder);
+ inputSearch = createInputSearch(random, ru.placeholder);
} else {
- intputSearch = createInputSearch(random, en.placeholder);
+ inputSearch = createInputSearch(random, en.placeholder);
}
- ulList.appendChild(intputSearch);
+ ulList.appendChild(inputSearch);
}
ulList.classList.add('list');
@@ -441,10 +441,10 @@
this.#element.appendChild(ulList);
this.#items.forEach((dataItem) => {
- this.#element.appendChild(nativSelect);
+ this.#element.appendChild(nativeSelect);
const liItem = document.createElement('li');
- const nativOption = createNativSelectOption();
+ const nativeOption = createNativeSelectOption();
const strongItem = document.createElement('strong');
liItem.classList.add('list__item');
@@ -460,17 +460,17 @@
checkBox.classList.add('displayHide');
}
- nativSelect.setAttribute('multiple', 'multiple');
+ nativeSelect.setAttribute('multiple', 'multiple');
}
let textNode = '';
if (dataItem.title) {
- nativOption.text = dataItem.title;
- nativOption.value = dataItem.title;
+ nativeOption.text = dataItem.title;
+ nativeOption.value = dataItem.title;
textNode = document.createTextNode(dataItem.title);
- nativSelect.appendChild(nativOption);
+ nativeSelect.appendChild(nativeOption);
liItem.appendChild(textNode);
ulList.appendChild(liItem);
} else {
@@ -546,7 +546,7 @@
const response = await fetch(url);
const dataUrl = await response.json();
- const nativSelect = createNativeSelect();
+ const nativeSelect = createNativeSelect();
dataUrl.forEach((dataItem, index) => {
const item = {
@@ -556,7 +556,7 @@
};
const ulUrl = this.#element.querySelector('.list');
- const nativOption = createNativSelectOption();
+ const nativeOption = createNativeSelectOption();
const liUrl = document.createElement('li');
const textUrl = document.createTextNode(item.title);
@@ -568,23 +568,23 @@
}
checkBox.setAttribute('id', `chbox-${item.id}`);
- nativSelect.setAttribute('multiple', 'multiple');
+ nativeSelect.setAttribute('multiple', 'multiple');
liUrl.appendChild(checkBox);
}
liUrl.classList.add('list__item');
- nativOption.value = item.title;
- nativOption.text = item.title;
+ nativeOption.value = item.title;
+ nativeOption.text = item.title;
- nativSelect.appendChild(nativOption);
+ nativeSelect.appendChild(nativeOption);
liUrl.appendChild(textUrl);
ulUrl.appendChild(liUrl);
this.#items.push(item);
});
- this.#element.appendChild(nativSelect);
+ this.#element.appendChild(nativeSelect);
this.#items.filter((item, index) => {
if (typeof item !== 'object') {
@@ -643,7 +643,7 @@
const options = this.#element.querySelectorAll('.list__item');
const select = this.#element.querySelector('.selected');
- const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
+ const nativeOption = this.#element.querySelectorAll('.nativeSelect__nativeOption');
const ulMultipul = document.createElement('ul');
@@ -686,7 +686,7 @@
}
if (checkIndex === -1) {
- nativOptionMultiple(nativOption, item.title, true);
+ nativeOptionMultiple(nativeOption, item.title, true);
this.#indexes.push(index);
select.innerText = '';
@@ -714,7 +714,7 @@
this.#indexes.splice(checkIndex, 1);
this.#selectedItems.splice(checkIndex, 1);
- nativOptionMultiple(nativOption, item.title, false);
+ nativeOptionMultiple(nativeOption, item.title, false);
}
if (!this.#selectedItems.length) {
@@ -731,7 +731,7 @@
select.innerText = item.title;
this.#selectedItems = item;
- nativOptionOrdinary(nativOption, item.title);
+ nativeOptionOrdinary(nativeOption, item.title);
options.forEach((option) => {
option.classList.remove('active');
diff --git a/documentation/create-element.js.html b/documentation/create-element.js.html
index beb0d06..66cdeae 100644
--- a/documentation/create-element.js.html
+++ b/documentation/create-element.js.html
@@ -21,7 +21,7 @@
import { customStylesFormat, nativOptionMultiple } from './utils';
+ >import { customStylesFormat, nativeOptionMultiple } from './utils';
/**
* @module createBreadcrumb
*/
@@ -39,7 +39,7 @@
const { placeholder, styles } = option;
const selected = element.querySelector('.selected');
- const nativOption = element.querySelectorAll('.nativSelect__nativOption');
+ const nativeOption = element.querySelectorAll('.nativeSelect__nativeOption');
const liChip = document.createElement('li');
const textNode = document.createTextNode(title);
@@ -67,7 +67,7 @@
svgIcon.addEventListener('click', (event) => {
event.preventDefault();
event.stopPropagation();
- nativOptionMultiple(nativOption, title, false);
+ nativeOptionMultiple(nativeOption, title, false);
const deleteIcon = indexes.indexOf(index);
let checkBox = '';
@@ -99,22 +99,22 @@
* @returns {HTMLSelectElement} Возвращает созданный нативный селект
*/
export function createNativeSelect() {
- const nativSelect = document.createElement('select');
+ const nativeSelect = document.createElement('select');
- nativSelect.setAttribute('name', 'dataSelect');
- nativSelect.classList.add('nativSelect');
- return nativSelect;
+ nativeSelect.setAttribute('name', 'dataSelect');
+ nativeSelect.classList.add('nativeSelect');
+ return nativeSelect;
}
/**
* Метод который создает Options для нативного селекта
* @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
*/
- export function createNativSelectOption() {
- const nativOption = document.createElement('option');
+ export function createNativeSelectOption() {
+ const nativeOption = document.createElement('option');
- nativOption.classList.add('nativSelect__nativOption');
- return nativOption;
+ nativeOption.classList.add('nativeSelect__nativeOption');
+ return nativeOption;
}
/**
@@ -124,23 +124,23 @@
* @returns {HTMLInputElement} Возвращает сформированный input елемент.
*/
export function createInputSearch(random, lenguage) {
- const intputSearch = document.createElement('input');
+ const inputSearch = document.createElement('input');
- intputSearch.type = 'text';
- intputSearch.classList.add('inputSearch');
- intputSearch.setAttribute('id', `searchSelect-${random}`);
+ inputSearch.type = 'text';
+ inputSearch.classList.add('inputSearch');
+ inputSearch.setAttribute('id', `searchSelect-${random}`);
if (lenguage) {
- intputSearch.setAttribute('placeholder', `${lenguage}`);
+ inputSearch.setAttribute('placeholder', `${lenguage}`);
} else {
- intputSearch.setAttribute('placeholder', 'Search...');
+ inputSearch.setAttribute('placeholder', 'Search...');
}
- intputSearch.addEventListener('click', (e) => {
+ inputSearch.addEventListener('click', (e) => {
e.preventDefault();
});
- return intputSearch;
+ return inputSearch;
}
diff --git a/documentation/module-Utils.html b/documentation/module-Utils.html
index 8a20fc7..30caeb6 100644
--- a/documentation/module-Utils.html
+++ b/documentation/module-Utils.html
@@ -483,8 +483,8 @@
-
- (static) nativOptionMultiple
+ (static) nativeOptionMultiple(element, item, condition)
@@ -552,8 +552,8 @@
-
- (static) nativOptionOrdinary
+ (static) nativeOptionOrdinary(element, item)
diff --git a/documentation/module-createElementChips.html b/documentation/module-createElementChips.html
index f7cd35b..735abcb 100644
--- a/documentation/module-createElementChips.html
+++ b/documentation/module-createElementChips.html
@@ -219,8 +219,8 @@
-
- (static) createNativSelectOption
+ (static) createNativeSelectOption() → {HTMLOptionElement}
diff --git a/documentation/utils.js.html b/documentation/utils.js.html
index 0171eb1..e0aee0a 100644
--- a/documentation/utils.js.html
+++ b/documentation/utils.js.html
@@ -155,7 +155,7 @@
* @param {NodeList} element NodeList нативного селекта
* @param {object} item выбранный элемент в кастомном селекте
*/
- export function nativOptionOrdinary(element, item) {
+ export function nativeOptionOrdinary(element, item) {
element.forEach((option) => {
option.removeAttribute('selected');
if (option.textContent === item) {
@@ -170,7 +170,7 @@
* @param {object} item выбранный элемент в кастомном селекте
* @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
*/
- export function nativOptionMultiple(element, item, condition) {
+ export function nativeOptionMultiple(element, item, condition) {
element.forEach((option) => {
if (condition == true) {
if (option.textContent === item) {
diff --git a/package-lock.json b/package-lock.json
index 89e0b37..0b1c114 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
- "name": "dropdown-list",
- "version": "0.0.1",
+ "name": "cg-select",
+ "version": "0.1.14",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
- "name": "dropdown-list",
- "version": "0.0.1",
+ "name": "cg-select",
+ "version": "0.1.14",
"license": "ISC",
"dependencies": {
"@parcel/optimizer-css": "^2.8.0",
@@ -774,45 +774,6 @@
"url": "https://opencollective.com/parcel"
}
},
- "node_modules/@parcel/optimizer-css/node_modules/@parcel/core": {
- "version": "2.8.0",
- "resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.8.0.tgz",
- "integrity": "sha512-udzbe3jjbpfKlRE9pdlROAa+lvAjS1L/AzN6r2j1y/Fsn7ze/NfvnCFw6o2YNIrXg002aQ7M1St/x1fdGfmVKA==",
- "peer": true,
- "dependencies": {
- "@mischnic/json-sourcemap": "^0.1.0",
- "@parcel/cache": "2.8.0",
- "@parcel/diagnostic": "2.8.0",
- "@parcel/events": "2.8.0",
- "@parcel/fs": "2.8.0",
- "@parcel/graph": "2.8.0",
- "@parcel/hash": "2.8.0",
- "@parcel/logger": "2.8.0",
- "@parcel/package-manager": "2.8.0",
- "@parcel/plugin": "2.8.0",
- "@parcel/source-map": "^2.1.1",
- "@parcel/types": "2.8.0",
- "@parcel/utils": "2.8.0",
- "@parcel/workers": "2.8.0",
- "abortcontroller-polyfill": "^1.1.9",
- "base-x": "^3.0.8",
- "browserslist": "^4.6.6",
- "clone": "^2.1.1",
- "dotenv": "^7.0.0",
- "dotenv-expand": "^5.1.0",
- "json5": "^2.2.0",
- "msgpackr": "^1.5.4",
- "nullthrows": "^1.1.1",
- "semver": "^5.7.1"
- },
- "engines": {
- "node": ">= 12.0.0"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/parcel"
- }
- },
"node_modules/@parcel/optimizer-css/node_modules/@parcel/diagnostic": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.0.tgz",
@@ -878,23 +839,6 @@
"url": "https://opencollective.com/parcel"
}
},
- "node_modules/@parcel/optimizer-css/node_modules/@parcel/graph": {
- "version": "2.8.0",
- "resolved": "https://registry.npmjs.org/@parcel/graph/-/graph-2.8.0.tgz",
- "integrity": "sha512-JvAyvBpGmhZ30bi+hStQr52eu+InfJBoiN9Z/32byIWhXEl02EAOwfsPqAe+FGCsdgXnnCGg5F9ZCqwzZ9dwbw==",
- "peer": true,
- "dependencies": {
- "@parcel/utils": "2.8.0",
- "nullthrows": "^1.1.1"
- },
- "engines": {
- "node": ">= 12.0.0"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/parcel"
- }
- },
"node_modules/@parcel/optimizer-css/node_modules/@parcel/hash": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.0.tgz",
@@ -1778,7 +1722,8 @@
"node_modules/abortcontroller-polyfill": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz",
- "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q=="
+ "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==",
+ "dev": true
},
"node_modules/acorn": {
"version": "8.8.0",
@@ -1855,6 +1800,7 @@
"version": "3.0.9",
"resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
"integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
+ "dev": true,
"dependencies": {
"safe-buffer": "^5.0.1"
}
@@ -2006,6 +1952,7 @@
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+ "dev": true,
"engines": {
"node": ">=0.8"
}
@@ -2193,6 +2140,7 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-7.0.0.tgz",
"integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==",
+ "dev": true,
"engines": {
"node": ">=6"
}
@@ -2200,7 +2148,8 @@
"node_modules/dotenv-expand": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
- "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
+ "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
+ "dev": true
},
"node_modules/electron-to-chromium": {
"version": "1.4.251",
@@ -3302,6 +3251,7 @@
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+ "dev": true,
"funding": [
{
"type": "github",
@@ -4070,38 +4020,6 @@
"chalk": "^4.1.0"
}
},
- "@parcel/core": {
- "version": "2.8.0",
- "resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.8.0.tgz",
- "integrity": "sha512-udzbe3jjbpfKlRE9pdlROAa+lvAjS1L/AzN6r2j1y/Fsn7ze/NfvnCFw6o2YNIrXg002aQ7M1St/x1fdGfmVKA==",
- "peer": true,
- "requires": {
- "@mischnic/json-sourcemap": "^0.1.0",
- "@parcel/cache": "2.8.0",
- "@parcel/diagnostic": "2.8.0",
- "@parcel/events": "2.8.0",
- "@parcel/fs": "2.8.0",
- "@parcel/graph": "2.8.0",
- "@parcel/hash": "2.8.0",
- "@parcel/logger": "2.8.0",
- "@parcel/package-manager": "2.8.0",
- "@parcel/plugin": "2.8.0",
- "@parcel/source-map": "^2.1.1",
- "@parcel/types": "2.8.0",
- "@parcel/utils": "2.8.0",
- "@parcel/workers": "2.8.0",
- "abortcontroller-polyfill": "^1.1.9",
- "base-x": "^3.0.8",
- "browserslist": "^4.6.6",
- "clone": "^2.1.1",
- "dotenv": "^7.0.0",
- "dotenv-expand": "^5.1.0",
- "json5": "^2.2.0",
- "msgpackr": "^1.5.4",
- "nullthrows": "^1.1.1",
- "semver": "^5.7.1"
- }
- },
"@parcel/diagnostic": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.0.tgz",
@@ -4136,16 +4054,6 @@
"detect-libc": "^1.0.3"
}
},
- "@parcel/graph": {
- "version": "2.8.0",
- "resolved": "https://registry.npmjs.org/@parcel/graph/-/graph-2.8.0.tgz",
- "integrity": "sha512-JvAyvBpGmhZ30bi+hStQr52eu+InfJBoiN9Z/32byIWhXEl02EAOwfsPqAe+FGCsdgXnnCGg5F9ZCqwzZ9dwbw==",
- "peer": true,
- "requires": {
- "@parcel/utils": "2.8.0",
- "nullthrows": "^1.1.1"
- }
- },
"@parcel/hash": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.0.tgz",
@@ -4702,7 +4610,8 @@
"abortcontroller-polyfill": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz",
- "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q=="
+ "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==",
+ "dev": true
},
"acorn": {
"version": "8.8.0",
@@ -4758,6 +4667,7 @@
"version": "3.0.9",
"resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
"integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
+ "dev": true,
"requires": {
"safe-buffer": "^5.0.1"
}
@@ -4853,7 +4763,8 @@
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
- "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
+ "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+ "dev": true
},
"color-convert": {
"version": "2.0.1",
@@ -4988,12 +4899,14 @@
"dotenv": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-7.0.0.tgz",
- "integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g=="
+ "integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==",
+ "dev": true
},
"dotenv-expand": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
- "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
+ "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
+ "dev": true
},
"electron-to-chromium": {
"version": "1.4.251",
@@ -5717,7 +5630,8 @@
"safe-buffer": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
- "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+ "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+ "dev": true
},
"sass": {
"version": "1.54.9",
diff --git a/package.json b/package.json
index 51465f8..78e8c21 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,12 @@
{
"name": "cg-select",
- "version": "0.1.14",
- "description": "Select control created with JS for use in JS/React",
- "author": "MaxOvs19",
+ "version": "0.1.15",
+ "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
+ "author": {
+ "name": "CraftGroup",
+ "url": "https://github.com/apuc/"
+ },
+ "homepage": "https://cg-select.itguild.info",
"scripts": {
"start": "parcel src/page/index.html -p 4500 --open ",
"build": "parcel build ./src/page/index.html",
@@ -11,14 +15,12 @@
},
"repository": {
"type": "git",
- "url": "git+https://github.com/MaxOvs19/cg-select.git"
+ "url": "git+https://github.com/apuc/cg-select.git"
},
-
"license": "ISC",
"bugs": {
- "url": "https://github.com/MaxOvs19/cg-select/issues"
+ "url": "https://github.com/apuc/cg-select/issues"
},
- "homepage": "https://cg-select.itguild.info",
"devDependencies": {
"@parcel/transformer-sass": "^2.7.0",
"parcel": "^2.7.0",
@@ -27,5 +29,12 @@
"dependencies": {
"@parcel/optimizer-css": "^2.8.0",
"gh-pages": "^4.0.0"
- }
+ },
+ "keywords": [
+ "select",
+ "autocomplete",
+ "dropdown",
+ "multiselect",
+ "tag"
+ ]
}
diff --git a/src/cg-select.js b/src/cg-select.js
index 2e5d4d6..f1ffe59 100644
--- a/src/cg-select.js
+++ b/src/cg-select.js
@@ -4,24 +4,22 @@ import {
getFormatItem,
getSelectText,
customStylesFormat,
- nativOptionMultiple,
- nativOptionOrdinary,
+ nativeOptionMultiple,
+ nativeOptionOrdinary,
clearSelect,
} from './components/utils';
import {
createBreadcrumb,
createInputSearch,
- createNativSelectOption,
+ createNativeSelectOption,
createNativeSelect,
} from './components/create-element';
import { ru, en } from './language/language';
-
-
/**
* @class Описание класса DropDown
* @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
- *@author Овсяников Максим
+ * @author Овсяников Максим
*/
export class DropDown {
/**
@@ -219,14 +217,14 @@ export class DropDown {
}
const select = this.#element.querySelector('.cg-select');
- const nativSelect = this.#element.querySelector('.nativSelect');
+ const nativeSelect = this.#element.querySelector('.nativeSelect');
if (value === true) {
this.#element.setAttribute('disabled', true);
- nativSelect.setAttribute('disabled', true);
+ nativeSelect.setAttribute('disabled', true);
select.classList.add('disabled');
} else {
this.#element.removeAttribute('disabled');
- nativSelect.removeAttribute('disabled');
+ nativeSelect.removeAttribute('disabled');
select.classList.remove('disabled');
}
}
@@ -409,20 +407,20 @@ export class DropDown {
}
const ulList = document.createElement('ul');
- const nativSelect = createNativeSelect();
+ const nativeSelect = createNativeSelect();
- let intputSearch = '';
+ let inputSearch = '';
this.random = random;
if (searchMode) {
if (language === 'ru') {
- intputSearch = createInputSearch(random, ru.placeholder);
+ inputSearch = createInputSearch(random, ru.placeholder);
} else {
- intputSearch = createInputSearch(random, en.placeholder);
+ inputSearch = createInputSearch(random, en.placeholder);
}
const { search } = styles;
- customStylesFormat(search, intputSearch);
- ulList.appendChild(intputSearch);
+ customStylesFormat(search, inputSearch);
+ ulList.appendChild(inputSearch);
}
ulList.classList.add('list');
@@ -435,10 +433,10 @@ export class DropDown {
this.#element.appendChild(ulList);
this.#items.forEach((dataItem) => {
- this.#element.appendChild(nativSelect);
+ this.#element.appendChild(nativeSelect);
const liItem = document.createElement('li');
- const nativOption = createNativSelectOption();
+ const nativeOption = createNativeSelectOption();
const strongItem = document.createElement('strong');
liItem.classList.add('list__item');
@@ -454,17 +452,17 @@ export class DropDown {
checkBox.classList.add('displayHide');
}
- nativSelect.setAttribute('multiple', 'multiple');
+ nativeSelect.setAttribute('multiple', 'multiple');
}
let textNode = '';
if (dataItem.title) {
- nativOption.text = dataItem.title;
- nativOption.value = dataItem.title;
+ nativeOption.text = dataItem.title;
+ nativeOption.value = dataItem.title;
textNode = document.createTextNode(dataItem.title);
- nativSelect.appendChild(nativOption);
+ nativeSelect.appendChild(nativeOption);
liItem.appendChild(textNode);
ulList.appendChild(liItem);
} else {
@@ -540,7 +538,7 @@ export class DropDown {
const response = await fetch(url);
const dataUrl = await response.json();
- const nativSelect = createNativeSelect();
+ const nativeSelect = createNativeSelect();
dataUrl.forEach((dataItem, index) => {
const item = {
@@ -550,7 +548,7 @@ export class DropDown {
};
const ulUrl = this.#element.querySelector('.list');
- const nativOption = createNativSelectOption();
+ const nativeOption = createNativeSelectOption();
const liUrl = document.createElement('li');
const textUrl = document.createTextNode(item.title);
@@ -562,23 +560,23 @@ export class DropDown {
}
checkBox.setAttribute('id', `chbox-${item.id}`);
- nativSelect.setAttribute('multiple', 'multiple');
+ nativeSelect.setAttribute('multiple', 'multiple');
liUrl.appendChild(checkBox);
}
liUrl.classList.add('list__item');
- nativOption.value = item.title;
- nativOption.text = item.title;
+ nativeOption.value = item.title;
+ nativeOption.text = item.title;
- nativSelect.appendChild(nativOption);
+ nativeSelect.appendChild(nativeOption);
liUrl.appendChild(textUrl);
ulUrl.appendChild(liUrl);
this.#items.push(item);
});
- this.#element.appendChild(nativSelect);
+ this.#element.appendChild(nativeSelect);
this.#items.filter((item, index) => {
if (typeof item !== 'object') {
@@ -637,7 +635,7 @@ export class DropDown {
const options = this.#element.querySelectorAll('.list__item');
const select = this.#element.querySelector('.selected');
- const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
+ const nativeOption = this.#element.querySelectorAll('.nativeSelect__nativeOption');
const ulMultipul = document.createElement('ul');
@@ -680,7 +678,7 @@ export class DropDown {
}
if (checkIndex === -1) {
- nativOptionMultiple(nativOption, item.title, true);
+ nativeOptionMultiple(nativeOption, item.title, true);
this.#indexes.push(index);
select.innerText = '';
@@ -708,7 +706,7 @@ export class DropDown {
this.#indexes.splice(checkIndex, 1);
this.#selectedItems.splice(checkIndex, 1);
- nativOptionMultiple(nativOption, item.title, false);
+ nativeOptionMultiple(nativeOption, item.title, false);
}
if (!this.#selectedItems.length) {
@@ -725,7 +723,7 @@ export class DropDown {
select.innerText = item.title;
this.#selectedItems = item;
- nativOptionOrdinary(nativOption, item.title);
+ nativeOptionOrdinary(nativeOption, item.title);
options.forEach((option) => {
option.classList.remove('active');
diff --git a/src/components/create-element.js b/src/components/create-element.js
index 68c501d..bf9b5d7 100644
--- a/src/components/create-element.js
+++ b/src/components/create-element.js
@@ -1,4 +1,4 @@
-import { customStylesFormat, nativOptionMultiple } from './utils';
+import { customStylesFormat, nativeOptionMultiple } from './utils';
/**
* @module createBreadcrumb
*/
@@ -16,7 +16,7 @@ export function createBreadcrumb(data, title, index, id) {
const { placeholder, styles } = option;
const selected = element.querySelector('.selected');
- const nativOption = element.querySelectorAll('.nativSelect__nativOption');
+ const nativeOption = element.querySelectorAll('.nativeSelect__nativeOption');
const liChip = document.createElement('li');
const textNode = document.createTextNode(title);
@@ -44,7 +44,7 @@ export function createBreadcrumb(data, title, index, id) {
svgIcon.addEventListener('click', (event) => {
event.preventDefault();
event.stopPropagation();
- nativOptionMultiple(nativOption, title, false);
+ nativeOptionMultiple(nativeOption, title, false);
const deleteIcon = indexes.indexOf(index);
let checkBox = '';
@@ -76,22 +76,22 @@ export function createBreadcrumb(data, title, index, id) {
* @returns {HTMLSelectElement} Возвращает созданный нативный селект
*/
export function createNativeSelect() {
- const nativSelect = document.createElement('select');
+ const nativeSelect = document.createElement('select');
- nativSelect.setAttribute('name', 'dataSelect');
- nativSelect.classList.add('nativSelect');
- return nativSelect;
+ nativeSelect.setAttribute('name', 'dataSelect');
+ nativeSelect.classList.add('nativeSelect');
+ return nativeSelect;
}
/**
* Метод который создает Options для нативного селекта
* @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
*/
-export function createNativSelectOption() {
- const nativOption = document.createElement('option');
+export function createNativeSelectOption() {
+ const nativeOption = document.createElement('option');
- nativOption.classList.add('nativSelect__nativOption');
- return nativOption;
+ nativeOption.classList.add('nativeSelect__nativeOption');
+ return nativeOption;
}
/**
@@ -101,21 +101,21 @@ export function createNativSelectOption() {
* @returns {HTMLInputElement} Возвращает сформированный input елемент.
*/
export function createInputSearch(random, lenguage) {
- const intputSearch = document.createElement('input');
+ const inputSearch = document.createElement('input');
- intputSearch.type = 'text';
- intputSearch.classList.add('inputSearch');
- intputSearch.setAttribute('id', `searchSelect-${random}`);
+ inputSearch.type = 'text';
+ inputSearch.classList.add('inputSearch');
+ inputSearch.setAttribute('id', `searchSelect-${random}`);
if (lenguage) {
- intputSearch.setAttribute('placeholder', `${lenguage}`);
+ inputSearch.setAttribute('placeholder', `${lenguage}`);
} else {
- intputSearch.setAttribute('placeholder', 'Search...');
+ inputSearch.setAttribute('placeholder', 'Search...');
}
- intputSearch.addEventListener('click', (e) => {
+ inputSearch.addEventListener('click', (e) => {
e.preventDefault();
});
- return intputSearch;
+ return inputSearch;
}
diff --git a/src/components/utils.js b/src/components/utils.js
index 245e77e..9e3c371 100644
--- a/src/components/utils.js
+++ b/src/components/utils.js
@@ -134,7 +134,7 @@ export function getFormatItem(dataItem, index) {
* @param {NodeList} element NodeList нативного селекта
* @param {object} item выбранный элемент в кастомном селекте
*/
-export function nativOptionOrdinary(element, item) {
+export function nativeOptionOrdinary(element, item) {
element.forEach((option) => {
option.removeAttribute('selected');
if (option.textContent === item) {
@@ -149,7 +149,7 @@ export function nativOptionOrdinary(element, item) {
* @param {object} item выбранный элемент в кастомном селекте
* @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
*/
-export function nativOptionMultiple(element, item, condition) {
+export function nativeOptionMultiple(element, item, condition) {
element.forEach((option) => {
if (condition == true) {
if (option.textContent === item) {
diff --git a/src/images/no.png b/src/images/no.png
new file mode 100644
index 0000000..75b56ef
Binary files /dev/null and b/src/images/no.png differ
diff --git a/src/images/yes.png b/src/images/yes.png
new file mode 100644
index 0000000..8db7039
Binary files /dev/null and b/src/images/yes.png differ
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..e28803e
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,3 @@
+import { DropDown } from './cg-select';
+
+export default DropDown;
diff --git a/src/language/language.js b/src/language/language.js
index 2095dcb..3b6ecb0 100644
--- a/src/language/language.js
+++ b/src/language/language.js
@@ -5,7 +5,7 @@ export const ru = {
};
export const en = {
- selectPlaceholder: 'Select...',
+ selectPlaceholder: 'Select element...',
placeholder: 'Search...',
textInListSearch: 'No matches...',
};
diff --git a/src/main.scss b/src/main.scss
index 3a78f0e..5ff4e87 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -1,5 +1,5 @@
-@import './style/nativSelect.scss';
-@import './style/scrolbar.scss';
+@import './style/nativeSelect.scss';
+@import './style/scrollbar.scss';
@import './style/svgStyle.scss';
@import './style/whiteTheme.scss';
diff --git a/src/page/ExemplePage.scss b/src/page/example.scss
similarity index 100%
rename from src/page/ExemplePage.scss
rename to src/page/example.scss
diff --git a/src/page/index.html b/src/page/index.html
index eae3a66..fe5a440 100644
--- a/src/page/index.html
+++ b/src/page/index.html
@@ -5,7 +5,7 @@
Cg-Select
-
+
diff --git a/src/page/index.js b/src/page/index.js
index 764a54b..c1a5fc6 100644
--- a/src/page/index.js
+++ b/src/page/index.js
@@ -1,4 +1,4 @@
-import { DropDown } from '../cg-select';
+import DropDown from '../index';
import './example';
// ------------------------------Обычный селект--------------------
diff --git a/src/style/nativSelect.scss b/src/style/nativeSelect.scss
similarity index 92%
rename from src/style/nativSelect.scss
rename to src/style/nativeSelect.scss
index c1f5a6f..c634533 100644
--- a/src/style/nativSelect.scss
+++ b/src/style/nativeSelect.scss
@@ -1,4 +1,4 @@
-.nativSelect {
+.nativeSelect {
border: none;
cursor: pointer;
display: none;
@@ -13,13 +13,13 @@
-o-border-radius: 5px;
margin: 0;
- &__nativOption {
+ &__nativeOption {
border: 1px #0a0b0e solid;
}
}
// @media (max-width: 576px) {
-// .nativSelect {
+// .nativeSelect {
// display: block;
// min-width: 235px;
// height: 50px;
diff --git a/src/style/scrolbar.scss b/src/style/scrollbar.scss
similarity index 100%
rename from src/style/scrolbar.scss
rename to src/style/scrollbar.scss