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