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

Pull in main repo

Browse Source
This commit is contained in:
MaxOvs 2022-12-27 20:09:25 +03:00
commit 03269cc99f
21 changed files with 161 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -86,6 +86,13 @@ const dropdown = new DropDown({
4. Push to the branch: `git push origin my-new-feature` 4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D 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 ## History
16.12.2022 - релиз версии 0.1.0! 16.12.2022 - релиз версии 0.1.0!

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

@ -25,14 +25,14 @@
getFormatItem, getFormatItem,
getSelectText, getSelectText,
customStylesFormat, customStylesFormat,
nativOptionMultiple, nativeOptionMultiple,
nativOptionOrdinary, nativeOptionOrdinary,
clearSelect, clearSelect,
} from './components/utils'; } from './components/utils';
import { import {
createBreadcrumb, createBreadcrumb,
createInputSearch, createInputSearch,
createNativSelectOption, createNativeSelectOption,
createNativeSelect, createNativeSelect,
} from './components/create-element'; } from './components/create-element';
import { ru, en } from './language/language'; import { ru, en } from './language/language';
@ -416,19 +416,19 @@
} }
const ulList = document.createElement('ul'); const ulList = document.createElement('ul');
const nativSelect = createNativeSelect(); const nativeSelect = createNativeSelect();
let intputSearch = ''; let inputSearch = '';
this.random = random; this.random = random;
if (searchMode) { if (searchMode) {
if (lenguage === 'ru') { if (lenguage === 'ru') {
intputSearch = createInputSearch(random, ru.placeholder); inputSearch = createInputSearch(random, ru.placeholder);
} else { } else {
intputSearch = createInputSearch(random, en.placeholder); inputSearch = createInputSearch(random, en.placeholder);
} }
ulList.appendChild(intputSearch); ulList.appendChild(inputSearch);
} }
ulList.classList.add('list'); ulList.classList.add('list');
@ -441,10 +441,10 @@
this.#element.appendChild(ulList); this.#element.appendChild(ulList);
this.#items.forEach((dataItem) => { this.#items.forEach((dataItem) => {
this.#element.appendChild(nativSelect); this.#element.appendChild(nativeSelect);
const liItem = document.createElement('li'); const liItem = document.createElement('li');
const nativOption = createNativSelectOption(); const nativeOption = createNativeSelectOption();
const strongItem = document.createElement('strong'); const strongItem = document.createElement('strong');
liItem.classList.add('list__item'); liItem.classList.add('list__item');
@ -460,17 +460,17 @@
checkBox.classList.add('displayHide'); checkBox.classList.add('displayHide');
} }
nativSelect.setAttribute('multiple', 'multiple'); nativeSelect.setAttribute('multiple', 'multiple');
} }
let textNode = ''; let textNode = '';
if (dataItem.title) { if (dataItem.title) {
nativOption.text = dataItem.title; nativeOption.text = dataItem.title;
nativOption.value = dataItem.title; nativeOption.value = dataItem.title;
textNode = document.createTextNode(dataItem.title); textNode = document.createTextNode(dataItem.title);
nativSelect.appendChild(nativOption); nativeSelect.appendChild(nativeOption);
liItem.appendChild(textNode); liItem.appendChild(textNode);
ulList.appendChild(liItem); ulList.appendChild(liItem);
} else { } else {
@ -546,7 +546,7 @@
const response = await fetch(url); const response = await fetch(url);
const dataUrl = await response.json(); const dataUrl = await response.json();
const nativSelect = createNativeSelect(); const nativeSelect = createNativeSelect();
dataUrl.forEach((dataItem, index) => { dataUrl.forEach((dataItem, index) => {
const item = { const item = {
@ -556,7 +556,7 @@
}; };
const ulUrl = this.#element.querySelector('.list'); const ulUrl = this.#element.querySelector('.list');
const nativOption = createNativSelectOption(); const nativeOption = createNativeSelectOption();
const liUrl = document.createElement('li'); const liUrl = document.createElement('li');
const textUrl = document.createTextNode(item.title); const textUrl = document.createTextNode(item.title);
@ -568,23 +568,23 @@
} }
checkBox.setAttribute('id', `chbox-${item.id}`); checkBox.setAttribute('id', `chbox-${item.id}`);
nativSelect.setAttribute('multiple', 'multiple'); nativeSelect.setAttribute('multiple', 'multiple');
liUrl.appendChild(checkBox); liUrl.appendChild(checkBox);
} }
liUrl.classList.add('list__item'); liUrl.classList.add('list__item');
nativOption.value = item.title; nativeOption.value = item.title;
nativOption.text = item.title; nativeOption.text = item.title;
nativSelect.appendChild(nativOption); nativeSelect.appendChild(nativeOption);
liUrl.appendChild(textUrl); liUrl.appendChild(textUrl);
ulUrl.appendChild(liUrl); ulUrl.appendChild(liUrl);
this.#items.push(item); this.#items.push(item);
}); });
this.#element.appendChild(nativSelect); this.#element.appendChild(nativeSelect);
this.#items.filter((item, index) => { this.#items.filter((item, index) => {
if (typeof item !== 'object') { if (typeof item !== 'object') {
@ -643,7 +643,7 @@
const options = this.#element.querySelectorAll('.list__item'); const options = this.#element.querySelectorAll('.list__item');
const select = this.#element.querySelector('.selected'); 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'); const ulMultipul = document.createElement('ul');
@ -686,7 +686,7 @@
} }
if (checkIndex === -1) { if (checkIndex === -1) {
nativOptionMultiple(nativOption, item.title, true); nativeOptionMultiple(nativeOption, item.title, true);
this.#indexes.push(index); this.#indexes.push(index);
select.innerText = ''; select.innerText = '';
@ -714,7 +714,7 @@
this.#indexes.splice(checkIndex, 1); this.#indexes.splice(checkIndex, 1);
this.#selectedItems.splice(checkIndex, 1); this.#selectedItems.splice(checkIndex, 1);
nativOptionMultiple(nativOption, item.title, false); nativeOptionMultiple(nativeOption, item.title, false);
} }
if (!this.#selectedItems.length) { if (!this.#selectedItems.length) {
@ -731,7 +731,7 @@
select.innerText = item.title; select.innerText = item.title;
this.#selectedItems = item; this.#selectedItems = item;
nativOptionOrdinary(nativOption, item.title); nativeOptionOrdinary(nativeOption, item.title);
options.forEach((option) => { options.forEach((option) => {
option.classList.remove('active'); option.classList.remove('active');

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

@ -21,7 +21,7 @@
<article> <article>
<pre <pre
class="prettyprint source linenums" class="prettyprint source linenums"
><code>import { customStylesFormat, nativOptionMultiple } from './utils'; ><code>import { customStylesFormat, nativeOptionMultiple } from './utils';
/** /**
* @module createBreadcrumb * @module createBreadcrumb
*/ */
@ -39,7 +39,7 @@
const { placeholder, styles } = option; const { placeholder, styles } = option;
const selected = element.querySelector('.selected'); const selected = element.querySelector('.selected');
const nativOption = element.querySelectorAll('.nativSelect__nativOption'); const nativeOption = element.querySelectorAll('.nativeSelect__nativeOption');
const liChip = document.createElement('li'); const liChip = document.createElement('li');
const textNode = document.createTextNode(title); const textNode = document.createTextNode(title);
@ -67,7 +67,7 @@
svgIcon.addEventListener('click', (event) => { svgIcon.addEventListener('click', (event) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
nativOptionMultiple(nativOption, title, false); nativeOptionMultiple(nativeOption, title, false);
const deleteIcon = indexes.indexOf(index); const deleteIcon = indexes.indexOf(index);
let checkBox = ''; let checkBox = '';
@ -99,22 +99,22 @@
* @returns {HTMLSelectElement} Возвращает созданный нативный селект * @returns {HTMLSelectElement} Возвращает созданный нативный селект
*/ */
export function createNativeSelect() { export function createNativeSelect() {
const nativSelect = document.createElement('select'); const nativeSelect = document.createElement('select');
nativSelect.setAttribute('name', 'dataSelect'); nativeSelect.setAttribute('name', 'dataSelect');
nativSelect.classList.add('nativSelect'); nativeSelect.classList.add('nativeSelect');
return nativSelect; return nativeSelect;
} }
/** /**
* Метод который создает Options для нативного селекта * Метод который создает Options для нативного селекта
* @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта * @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
*/ */
export function createNativSelectOption() { export function createNativeSelectOption() {
const nativOption = document.createElement('option'); const nativeOption = document.createElement('option');
nativOption.classList.add('nativSelect__nativOption'); nativeOption.classList.add('nativeSelect__nativeOption');
return nativOption; return nativeOption;
} }
/** /**
@ -124,23 +124,23 @@
* @returns {HTMLInputElement} Возвращает сформированный input елемент. * @returns {HTMLInputElement} Возвращает сформированный input елемент.
*/ */
export function createInputSearch(random, lenguage) { export function createInputSearch(random, lenguage) {
const intputSearch = document.createElement('input'); const inputSearch = document.createElement('input');
intputSearch.type = 'text'; inputSearch.type = 'text';
intputSearch.classList.add('inputSearch'); inputSearch.classList.add('inputSearch');
intputSearch.setAttribute('id', `searchSelect-${random}`); inputSearch.setAttribute('id', `searchSelect-${random}`);
if (lenguage) { if (lenguage) {
intputSearch.setAttribute('placeholder', `${lenguage}`); inputSearch.setAttribute('placeholder', `${lenguage}`);
} else { } else {
intputSearch.setAttribute('placeholder', 'Search...'); inputSearch.setAttribute('placeholder', 'Search...');
} }
intputSearch.addEventListener('click', (e) => { inputSearch.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
}); });
return intputSearch; return inputSearch;
} }
</code></pre> </code></pre>
</article> </article>

8
documentation/module-Utils.html
View File

@ -483,8 +483,8 @@
</dd> </dd>
</dl> </dl>
<h4 class="name" id=".nativOptionMultiple"> <h4 class="name" id=".nativeOptionMultiple">
<span class="type-signature">(static) </span>nativOptionMultiple<span class="signature" <span class="type-signature">(static) </span>nativeOptionMultiple<span class="signature"
>(element, item, condition)</span >(element, item, condition)</span
><span class="type-signature"></span> ><span class="type-signature"></span>
</h4> </h4>
@ -552,8 +552,8 @@
</dd> </dd>
</dl> </dl>
<h4 class="name" id=".nativOptionOrdinary"> <h4 class="name" id=".nativeOptionOrdinary">
<span class="type-signature">(static) </span>nativOptionOrdinary<span class="signature" <span class="type-signature">(static) </span>nativeOptionOrdinary<span class="signature"
>(element, item)</span >(element, item)</span
><span class="type-signature"></span> ><span class="type-signature"></span>
</h4> </h4>

4
documentation/module-createElementChips.html
View File

@ -219,8 +219,8 @@
</dd> </dd>
</dl> </dl>
<h4 class="name" id=".createNativSelectOption"> <h4 class="name" id=".createNativeSelectOption">
<span class="type-signature">(static) </span>createNativSelectOption<span <span class="type-signature">(static) </span>createNativeSelectOption<span
class="signature" class="signature"
>()</span >()</span
><span class="type-signature"> &rarr; {HTMLOptionElement}</span> ><span class="type-signature"> &rarr; {HTMLOptionElement}</span>

4
documentation/utils.js.html
View File

@ -155,7 +155,7 @@
* @param {NodeList} element NodeList нативного селекта * @param {NodeList} element NodeList нативного селекта
* @param {object} item выбранный элемент в кастомном селекте * @param {object} item выбранный элемент в кастомном селекте
*/ */
export function nativOptionOrdinary(element, item) { export function nativeOptionOrdinary(element, item) {
element.forEach((option) => { element.forEach((option) => {
option.removeAttribute('selected'); option.removeAttribute('selected');
if (option.textContent === item) { if (option.textContent === item) {
@ -170,7 +170,7 @@
* @param {object} item выбранный элемент в кастомном селекте * @param {object} item выбранный элемент в кастомном селекте
* @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта * @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
*/ */
export function nativOptionMultiple(element, item, condition) { export function nativeOptionMultiple(element, item, condition) {
element.forEach((option) => { element.forEach((option) => {
if (condition == true) { if (condition == true) {
if (option.textContent === item) { if (option.textContent === item) {

132
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "dropdown-list", "name": "cg-select",
"version": "0.0.1", "version": "0.1.14",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "dropdown-list", "name": "cg-select",
"version": "0.0.1", "version": "0.1.14",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@parcel/optimizer-css": "^2.8.0", "@parcel/optimizer-css": "^2.8.0",
@ -774,45 +774,6 @@
"url": "https://opencollective.com/parcel" "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": { "node_modules/@parcel/optimizer-css/node_modules/@parcel/diagnostic": {
"version": "2.8.0", "version": "2.8.0",
"resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.0.tgz", "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.0.tgz",
@ -878,23 +839,6 @@
"url": "https://opencollective.com/parcel" "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": { "node_modules/@parcel/optimizer-css/node_modules/@parcel/hash": {
"version": "2.8.0", "version": "2.8.0",
"resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.0.tgz", "resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.0.tgz",
@ -1778,7 +1722,8 @@
"node_modules/abortcontroller-polyfill": { "node_modules/abortcontroller-polyfill": {
"version": "1.7.3", "version": "1.7.3",
"resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz", "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": { "node_modules/acorn": {
"version": "8.8.0", "version": "8.8.0",
@ -1855,6 +1800,7 @@
"version": "3.0.9", "version": "3.0.9",
"resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz", "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
"integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==", "integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
"dev": true,
"dependencies": { "dependencies": {
"safe-buffer": "^5.0.1" "safe-buffer": "^5.0.1"
} }
@ -2006,6 +1952,7 @@
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==", "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
"dev": true,
"engines": { "engines": {
"node": ">=0.8" "node": ">=0.8"
} }
@ -2193,6 +2140,7 @@
"version": "7.0.0", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-7.0.0.tgz", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-7.0.0.tgz",
"integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==", "integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==",
"dev": true,
"engines": { "engines": {
"node": ">=6" "node": ">=6"
} }
@ -2200,7 +2148,8 @@
"node_modules/dotenv-expand": { "node_modules/dotenv-expand": {
"version": "5.1.0", "version": "5.1.0",
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", "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": { "node_modules/electron-to-chromium": {
"version": "1.4.251", "version": "1.4.251",
@ -3302,6 +3251,7 @@
"version": "5.2.1", "version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", "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,
"funding": [ "funding": [
{ {
"type": "github", "type": "github",
@ -4070,38 +4020,6 @@
"chalk": "^4.1.0" "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": { "@parcel/diagnostic": {
"version": "2.8.0", "version": "2.8.0",
"resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.0.tgz", "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.0.tgz",
@ -4136,16 +4054,6 @@
"detect-libc": "^1.0.3" "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": { "@parcel/hash": {
"version": "2.8.0", "version": "2.8.0",
"resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.0.tgz", "resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.0.tgz",
@ -4702,7 +4610,8 @@
"abortcontroller-polyfill": { "abortcontroller-polyfill": {
"version": "1.7.3", "version": "1.7.3",
"resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz", "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": { "acorn": {
"version": "8.8.0", "version": "8.8.0",
@ -4758,6 +4667,7 @@
"version": "3.0.9", "version": "3.0.9",
"resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz", "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
"integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==", "integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
"dev": true,
"requires": { "requires": {
"safe-buffer": "^5.0.1" "safe-buffer": "^5.0.1"
} }
@ -4853,7 +4763,8 @@
"clone": { "clone": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", "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": { "color-convert": {
"version": "2.0.1", "version": "2.0.1",
@ -4988,12 +4899,14 @@
"dotenv": { "dotenv": {
"version": "7.0.0", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-7.0.0.tgz", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-7.0.0.tgz",
"integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==" "integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==",
"dev": true
}, },
"dotenv-expand": { "dotenv-expand": {
"version": "5.1.0", "version": "5.1.0",
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", "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": { "electron-to-chromium": {
"version": "1.4.251", "version": "1.4.251",
@ -5717,7 +5630,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.2.1", "version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", "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": { "sass": {
"version": "1.54.9", "version": "1.54.9",

25
package.json
View File

@ -1,8 +1,12 @@
{ {
"name": "cg-select", "name": "cg-select",
"version": "0.1.14", "version": "0.1.15",
"description": "Select control created with JS for use in JS/React", "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
"author": "MaxOvs19", "author": {
"name": "CraftGroup",
"url": "https://github.com/apuc/"
},
"homepage": "https://cg-select.itguild.info",
"scripts": { "scripts": {
"start": "parcel src/page/index.html -p 4500 --open ", "start": "parcel src/page/index.html -p 4500 --open ",
"build": "parcel build ./src/page/index.html", "build": "parcel build ./src/page/index.html",
@ -11,14 +15,12 @@
}, },
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/MaxOvs19/cg-select.git" "url": "git+https://github.com/apuc/cg-select.git"
}, },
"license": "ISC", "license": "ISC",
"bugs": { "bugs": {
"url": "https://github.com/MaxOvs19/cg-select/issues" "url": "https://github.com/apuc/cg-select/issues"
}, },
"homepage": "https://cg-select.itguild.info",
"devDependencies": { "devDependencies": {
"@parcel/transformer-sass": "^2.7.0", "@parcel/transformer-sass": "^2.7.0",
"parcel": "^2.7.0", "parcel": "^2.7.0",
@ -27,5 +29,12 @@
"dependencies": { "dependencies": {
"@parcel/optimizer-css": "^2.8.0", "@parcel/optimizer-css": "^2.8.0",
"gh-pages": "^4.0.0" "gh-pages": "^4.0.0"
} },
"keywords": [
"select",
"autocomplete",
"dropdown",
"multiselect",
"tag"
]
} }

60
src/cg-select.js
View File

@ -4,20 +4,18 @@ import {
getFormatItem, getFormatItem,
getSelectText, getSelectText,
customStylesFormat, customStylesFormat,
nativOptionMultiple, nativeOptionMultiple,
nativOptionOrdinary, nativeOptionOrdinary,
clearSelect, clearSelect,
} from './components/utils'; } from './components/utils';
import { import {
createBreadcrumb, createBreadcrumb,
createInputSearch, createInputSearch,
createNativSelectOption, createNativeSelectOption,
createNativeSelect, createNativeSelect,
} from './components/create-element'; } from './components/create-element';
import { ru, en } from './language/language'; import { ru, en } from './language/language';
/** /**
* @class Описание класса DropDown * @class Описание класса DropDown
* @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации. * @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
@ -219,14 +217,14 @@ export class DropDown {
} }
const select = this.#element.querySelector('.cg-select'); const select = this.#element.querySelector('.cg-select');
const nativSelect = this.#element.querySelector('.nativSelect'); const nativeSelect = this.#element.querySelector('.nativeSelect');
if (value === true) { if (value === true) {
this.#element.setAttribute('disabled', true); this.#element.setAttribute('disabled', true);
nativSelect.setAttribute('disabled', true); nativeSelect.setAttribute('disabled', true);
select.classList.add('disabled'); select.classList.add('disabled');
} else { } else {
this.#element.removeAttribute('disabled'); this.#element.removeAttribute('disabled');
nativSelect.removeAttribute('disabled'); nativeSelect.removeAttribute('disabled');
select.classList.remove('disabled'); select.classList.remove('disabled');
} }
} }
@ -409,20 +407,20 @@ export class DropDown {
} }
const ulList = document.createElement('ul'); const ulList = document.createElement('ul');
const nativSelect = createNativeSelect(); const nativeSelect = createNativeSelect();
let intputSearch = ''; let inputSearch = '';
this.random = random; this.random = random;
if (searchMode) { if (searchMode) {
if (language === 'ru') { if (language === 'ru') {
intputSearch = createInputSearch(random, ru.placeholder); inputSearch = createInputSearch(random, ru.placeholder);
} else { } else {
intputSearch = createInputSearch(random, en.placeholder); inputSearch = createInputSearch(random, en.placeholder);
} }
const { search } = styles; const { search } = styles;
customStylesFormat(search, intputSearch); customStylesFormat(search, inputSearch);
ulList.appendChild(intputSearch); ulList.appendChild(inputSearch);
} }
ulList.classList.add('list'); ulList.classList.add('list');
@ -435,10 +433,10 @@ export class DropDown {
this.#element.appendChild(ulList); this.#element.appendChild(ulList);
this.#items.forEach((dataItem) => { this.#items.forEach((dataItem) => {
this.#element.appendChild(nativSelect); this.#element.appendChild(nativeSelect);
const liItem = document.createElement('li'); const liItem = document.createElement('li');
const nativOption = createNativSelectOption(); const nativeOption = createNativeSelectOption();
const strongItem = document.createElement('strong'); const strongItem = document.createElement('strong');
liItem.classList.add('list__item'); liItem.classList.add('list__item');
@ -454,17 +452,17 @@ export class DropDown {
checkBox.classList.add('displayHide'); checkBox.classList.add('displayHide');
} }
nativSelect.setAttribute('multiple', 'multiple'); nativeSelect.setAttribute('multiple', 'multiple');
} }
let textNode = ''; let textNode = '';
if (dataItem.title) { if (dataItem.title) {
nativOption.text = dataItem.title; nativeOption.text = dataItem.title;
nativOption.value = dataItem.title; nativeOption.value = dataItem.title;
textNode = document.createTextNode(dataItem.title); textNode = document.createTextNode(dataItem.title);
nativSelect.appendChild(nativOption); nativeSelect.appendChild(nativeOption);
liItem.appendChild(textNode); liItem.appendChild(textNode);
ulList.appendChild(liItem); ulList.appendChild(liItem);
} else { } else {
@ -540,7 +538,7 @@ export class DropDown {
const response = await fetch(url); const response = await fetch(url);
const dataUrl = await response.json(); const dataUrl = await response.json();
const nativSelect = createNativeSelect(); const nativeSelect = createNativeSelect();
dataUrl.forEach((dataItem, index) => { dataUrl.forEach((dataItem, index) => {
const item = { const item = {
@ -550,7 +548,7 @@ export class DropDown {
}; };
const ulUrl = this.#element.querySelector('.list'); const ulUrl = this.#element.querySelector('.list');
const nativOption = createNativSelectOption(); const nativeOption = createNativeSelectOption();
const liUrl = document.createElement('li'); const liUrl = document.createElement('li');
const textUrl = document.createTextNode(item.title); const textUrl = document.createTextNode(item.title);
@ -562,23 +560,23 @@ export class DropDown {
} }
checkBox.setAttribute('id', `chbox-${item.id}`); checkBox.setAttribute('id', `chbox-${item.id}`);
nativSelect.setAttribute('multiple', 'multiple'); nativeSelect.setAttribute('multiple', 'multiple');
liUrl.appendChild(checkBox); liUrl.appendChild(checkBox);
} }
liUrl.classList.add('list__item'); liUrl.classList.add('list__item');
nativOption.value = item.title; nativeOption.value = item.title;
nativOption.text = item.title; nativeOption.text = item.title;
nativSelect.appendChild(nativOption); nativeSelect.appendChild(nativeOption);
liUrl.appendChild(textUrl); liUrl.appendChild(textUrl);
ulUrl.appendChild(liUrl); ulUrl.appendChild(liUrl);
this.#items.push(item); this.#items.push(item);
}); });
this.#element.appendChild(nativSelect); this.#element.appendChild(nativeSelect);
this.#items.filter((item, index) => { this.#items.filter((item, index) => {
if (typeof item !== 'object') { if (typeof item !== 'object') {
@ -637,7 +635,7 @@ export class DropDown {
const options = this.#element.querySelectorAll('.list__item'); const options = this.#element.querySelectorAll('.list__item');
const select = this.#element.querySelector('.selected'); 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'); const ulMultipul = document.createElement('ul');
@ -680,7 +678,7 @@ export class DropDown {
} }
if (checkIndex === -1) { if (checkIndex === -1) {
nativOptionMultiple(nativOption, item.title, true); nativeOptionMultiple(nativeOption, item.title, true);
this.#indexes.push(index); this.#indexes.push(index);
select.innerText = ''; select.innerText = '';
@ -708,7 +706,7 @@ export class DropDown {
this.#indexes.splice(checkIndex, 1); this.#indexes.splice(checkIndex, 1);
this.#selectedItems.splice(checkIndex, 1); this.#selectedItems.splice(checkIndex, 1);
nativOptionMultiple(nativOption, item.title, false); nativeOptionMultiple(nativeOption, item.title, false);
} }
if (!this.#selectedItems.length) { if (!this.#selectedItems.length) {
@ -725,7 +723,7 @@ export class DropDown {
select.innerText = item.title; select.innerText = item.title;
this.#selectedItems = item; this.#selectedItems = item;
nativOptionOrdinary(nativOption, item.title); nativeOptionOrdinary(nativeOption, item.title);
options.forEach((option) => { options.forEach((option) => {
option.classList.remove('active'); option.classList.remove('active');

38
src/components/create-element.js
View File

@ -1,4 +1,4 @@
import { customStylesFormat, nativOptionMultiple } from './utils'; import { customStylesFormat, nativeOptionMultiple } from './utils';
/** /**
* @module createBreadcrumb * @module createBreadcrumb
*/ */
@ -16,7 +16,7 @@ export function createBreadcrumb(data, title, index, id) {
const { placeholder, styles } = option; const { placeholder, styles } = option;
const selected = element.querySelector('.selected'); const selected = element.querySelector('.selected');
const nativOption = element.querySelectorAll('.nativSelect__nativOption'); const nativeOption = element.querySelectorAll('.nativeSelect__nativeOption');
const liChip = document.createElement('li'); const liChip = document.createElement('li');
const textNode = document.createTextNode(title); const textNode = document.createTextNode(title);
@ -44,7 +44,7 @@ export function createBreadcrumb(data, title, index, id) {
svgIcon.addEventListener('click', (event) => { svgIcon.addEventListener('click', (event) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
nativOptionMultiple(nativOption, title, false); nativeOptionMultiple(nativeOption, title, false);
const deleteIcon = indexes.indexOf(index); const deleteIcon = indexes.indexOf(index);
let checkBox = ''; let checkBox = '';
@ -76,22 +76,22 @@ export function createBreadcrumb(data, title, index, id) {
* @returns {HTMLSelectElement} Возвращает созданный нативный селект * @returns {HTMLSelectElement} Возвращает созданный нативный селект
*/ */
export function createNativeSelect() { export function createNativeSelect() {
const nativSelect = document.createElement('select'); const nativeSelect = document.createElement('select');
nativSelect.setAttribute('name', 'dataSelect'); nativeSelect.setAttribute('name', 'dataSelect');
nativSelect.classList.add('nativSelect'); nativeSelect.classList.add('nativeSelect');
return nativSelect; return nativeSelect;
} }
/** /**
* Метод который создает Options для нативного селекта * Метод который создает Options для нативного селекта
* @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта * @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
*/ */
export function createNativSelectOption() { export function createNativeSelectOption() {
const nativOption = document.createElement('option'); const nativeOption = document.createElement('option');
nativOption.classList.add('nativSelect__nativOption'); nativeOption.classList.add('nativeSelect__nativeOption');
return nativOption; return nativeOption;
} }
/** /**
@ -101,21 +101,21 @@ export function createNativSelectOption() {
* @returns {HTMLInputElement} Возвращает сформированный input елемент. * @returns {HTMLInputElement} Возвращает сформированный input елемент.
*/ */
export function createInputSearch(random, lenguage) { export function createInputSearch(random, lenguage) {
const intputSearch = document.createElement('input'); const inputSearch = document.createElement('input');
intputSearch.type = 'text'; inputSearch.type = 'text';
intputSearch.classList.add('inputSearch'); inputSearch.classList.add('inputSearch');
intputSearch.setAttribute('id', `searchSelect-${random}`); inputSearch.setAttribute('id', `searchSelect-${random}`);
if (lenguage) { if (lenguage) {
intputSearch.setAttribute('placeholder', `${lenguage}`); inputSearch.setAttribute('placeholder', `${lenguage}`);
} else { } else {
intputSearch.setAttribute('placeholder', 'Search...'); inputSearch.setAttribute('placeholder', 'Search...');
} }
intputSearch.addEventListener('click', (e) => { inputSearch.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
}); });
return intputSearch; return inputSearch;
} }

4
src/components/utils.js
View File

@ -134,7 +134,7 @@ export function getFormatItem(dataItem, index) {
* @param {NodeList} element NodeList нативного селекта * @param {NodeList} element NodeList нативного селекта
* @param {object} item выбранный элемент в кастомном селекте * @param {object} item выбранный элемент в кастомном селекте
*/ */
export function nativOptionOrdinary(element, item) { export function nativeOptionOrdinary(element, item) {
element.forEach((option) => { element.forEach((option) => {
option.removeAttribute('selected'); option.removeAttribute('selected');
if (option.textContent === item) { if (option.textContent === item) {
@ -149,7 +149,7 @@ export function nativOptionOrdinary(element, item) {
* @param {object} item выбранный элемент в кастомном селекте * @param {object} item выбранный элемент в кастомном селекте
* @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта * @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
*/ */
export function nativOptionMultiple(element, item, condition) { export function nativeOptionMultiple(element, item, condition) {
element.forEach((option) => { element.forEach((option) => {
if (condition == true) { if (condition == true) {
if (option.textContent === item) { if (option.textContent === item) {

BIN
src/images/no.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/images/yes.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

3
src/index.js Normal file
View File

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

2
src/language/language.js
View File

@ -5,7 +5,7 @@ export const ru = {
}; };
export const en = { export const en = {
selectPlaceholder: 'Select...', selectPlaceholder: 'Select element...',
placeholder: 'Search...', placeholder: 'Search...',
textInListSearch: 'No matches...', textInListSearch: 'No matches...',
}; };

4
src/main.scss
View File

@ -1,5 +1,5 @@
@import './style/nativSelect.scss'; @import './style/nativeSelect.scss';
@import './style/scrolbar.scss'; @import './style/scrollbar.scss';
@import './style/svgStyle.scss'; @import './style/svgStyle.scss';
@import './style/whiteTheme.scss'; @import './style/whiteTheme.scss';

0
src/page/ExemplePage.scss → src/page/example.scss
View File

2
src/page/index.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cg-Select</title> <title>Cg-Select</title>
<link href="/src/page/ExemplePage.scss" rel="stylesheet" /> <link href="/src/page/example.scss" rel="stylesheet" />
</head> </head>
<body class="body-example"> <body class="body-example">
<div class="container"> <div class="container">

2
src/page/index.js
View File

@ -1,4 +1,4 @@
import { DropDown } from '../cg-select'; import DropDown from '../index';
import './example'; import './example';
// ------------------------------Обычный селект-------------------- // ------------------------------Обычный селект--------------------

6
src/style/nativSelect.scss → src/style/nativeSelect.scss
View File

@ -1,4 +1,4 @@
.nativSelect { .nativeSelect {
border: none; border: none;
cursor: pointer; cursor: pointer;
display: none; display: none;
@ -13,13 +13,13 @@
-o-border-radius: 5px; -o-border-radius: 5px;
margin: 0; margin: 0;
&__nativOption { &__nativeOption {
border: 1px #0a0b0e solid; border: 1px #0a0b0e solid;
} }
} }
// @media (max-width: 576px) { // @media (max-width: 576px) {
// .nativSelect { // .nativeSelect {
// display: block; // display: block;
// min-width: 235px; // min-width: 235px;
// height: 50px; // height: 50px;

0
src/style/scrolbar.scss → src/style/scrollbar.scss
View File