diff --git a/CHANGELOG.md b/CHANGELOG.md index 3fa8776..288aac9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -85,3 +85,9 @@ Tested in JS and React. Errors in work in React applications are revealed. - Optimized code. - Added error messages when using public methods. + +### 04.10.2023 - update 0.3.2 + +- Added the ability to set the name attribute for further sending data to the server. (\*nameSelect: string) +- Added a function to POST a request to the server when selecting an item. (\*getRequestUrl: string) +- Optimized code. diff --git a/README.md b/README.md index 5bc489c..c4378fd 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CG-SELECT -## version ~ 0.3.12 +## version ~ 0.3.2 ЧИТАТЬ НА РУССКОМ @@ -30,6 +30,7 @@ npm i cg-select ``` ``` + #### PHP Repository: PHP cg-select package integration @@ -156,8 +157,6 @@ All documentation on CG-SELECT is located in the folder of the same name. The do Documentation - - ## Contributing 1. Fork it! diff --git a/READMERU.md b/READMERU.md index 3eb83bb..bb90924 100644 --- a/READMERU.md +++ b/READMERU.md @@ -1,6 +1,6 @@ # CG-SELECT -## Версия ~ 0.3.12 +## Версия ~ 0.3.2 English README diff --git a/package-lock.json b/package-lock.json index c3eab51..38bd0fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "cg-select", - "version": "0.3.12", + "version": "0.3.2", "lockfileVersion": 2, "requires": true, "packages": { @@ -26,7 +26,7 @@ "typedoc": "^0.23.28", "typescript": "^5.0.2", "webpack": "^5.77.0", - "webpack-cli": "^5.0.1", + "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.13.2" } }, @@ -2320,9 +2320,9 @@ } }, "node_modules/@webpack-cli/configtest": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.0.1.tgz", - "integrity": "sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz", + "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==", "dev": true, "engines": { "node": ">=14.15.0" @@ -2333,9 +2333,9 @@ } }, "node_modules/@webpack-cli/info": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.1.tgz", - "integrity": "sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz", + "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==", "dev": true, "engines": { "node": ">=14.15.0" @@ -2346,9 +2346,9 @@ } }, "node_modules/@webpack-cli/serve": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.1.tgz", - "integrity": "sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz", + "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==", "dev": true, "engines": { "node": ">=14.15.0" @@ -2959,12 +2959,12 @@ "dev": true }, "node_modules/commander": { - "version": "9.5.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", - "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz", + "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==", "dev": true, "engines": { - "node": "^12.20.0 || >=14" + "node": ">=14" } }, "node_modules/commondir": { @@ -6416,17 +6416,17 @@ } }, "node_modules/webpack-cli": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.0.1.tgz", - "integrity": "sha512-S3KVAyfwUqr0Mo/ur3NzIp6jnerNpo7GUO6so51mxLi1spqsA17YcMXy0WOIJtBSnj748lthxC6XLbNKh/ZC+A==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz", + "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==", "dev": true, "dependencies": { "@discoveryjs/json-ext": "^0.5.0", - "@webpack-cli/configtest": "^2.0.1", - "@webpack-cli/info": "^2.0.1", - "@webpack-cli/serve": "^2.0.1", + "@webpack-cli/configtest": "^2.1.1", + "@webpack-cli/info": "^2.0.2", + "@webpack-cli/serve": "^2.0.5", "colorette": "^2.0.14", - "commander": "^9.4.1", + "commander": "^10.0.1", "cross-spawn": "^7.0.3", "envinfo": "^7.7.3", "fastest-levenshtein": "^1.0.12", @@ -8482,23 +8482,23 @@ } }, "@webpack-cli/configtest": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.0.1.tgz", - "integrity": "sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz", + "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==", "dev": true, "requires": {} }, "@webpack-cli/info": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.1.tgz", - "integrity": "sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz", + "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==", "dev": true, "requires": {} }, "@webpack-cli/serve": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.1.tgz", - "integrity": "sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz", + "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==", "dev": true, "requires": {} }, @@ -8945,9 +8945,9 @@ "dev": true }, "commander": { - "version": "9.5.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", - "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz", + "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==", "dev": true }, "commondir": { @@ -11503,17 +11503,17 @@ } }, "webpack-cli": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.0.1.tgz", - "integrity": "sha512-S3KVAyfwUqr0Mo/ur3NzIp6jnerNpo7GUO6so51mxLi1spqsA17YcMXy0WOIJtBSnj748lthxC6XLbNKh/ZC+A==", + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz", + "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==", "dev": true, "requires": { "@discoveryjs/json-ext": "^0.5.0", - "@webpack-cli/configtest": "^2.0.1", - "@webpack-cli/info": "^2.0.1", - "@webpack-cli/serve": "^2.0.1", + "@webpack-cli/configtest": "^2.1.1", + "@webpack-cli/info": "^2.0.2", + "@webpack-cli/serve": "^2.0.5", "colorette": "^2.0.14", - "commander": "^9.4.1", + "commander": "^10.0.1", "cross-spawn": "^7.0.3", "envinfo": "^7.7.3", "fastest-levenshtein": "^1.0.12", diff --git a/package.json b/package.json index 9ae5d9e..502fe1f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cg-select", - "version": "0.3.12", + "version": "0.3.2", "source": "index.js", "main": "dist/main.js", "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling", @@ -40,7 +40,7 @@ "typedoc": "^0.23.28", "typescript": "^5.0.2", "webpack": "^5.77.0", - "webpack-cli": "^5.0.1", + "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.13.2" }, "keywords": [ diff --git a/src/cg-select.ts b/src/cg-select.ts index eec9fb0..f3c2562 100644 --- a/src/cg-select.ts +++ b/src/cg-select.ts @@ -46,6 +46,8 @@ export default class CGSelect implements ICgSelect { label?: string; styles?: IStyle; event?: string; + nameSelect?: string; + getRequestUrl?: string; url?: string; multiselect?: boolean; multiselectTag?: boolean; @@ -95,6 +97,11 @@ export default class CGSelect implements ICgSelect { * @type {Element | null} */ private buttonAction?: Element | null; + /** + * Array for request + * @type {IItems} + */ + private forUrlSelectedItems: IItems[] = []; /** * @param {ICgSelect} setting Object accepting select settings. @@ -113,6 +120,8 @@ export default class CGSelect implements ICgSelect { nativeSelectMode: true/false, listDisplayMode: true/false, language: 'ru/en', + nameSelect: "titleYouSelect"; + getRequestUrl: "/endpoint/123"; styles: { head: { background: '...', @@ -197,6 +206,8 @@ export default class CGSelect implements ICgSelect { styles, label, event, + nameSelect, + getRequestUrl, selected, placeholder, theme, @@ -216,6 +227,8 @@ export default class CGSelect implements ICgSelect { this.styles = styles; this.label = label; this.event = event; + this.nameSelect = nameSelect; + this.getRequestUrl = getRequestUrl; this.selected = selected; this.placeholder = placeholder; this.theme = theme; @@ -283,7 +296,7 @@ export default class CGSelect implements ICgSelect { } const ulList = document.createElement('ul'); - const nativeSelect = createNativeSelect(); + const nativeSelect = createNativeSelect(this.nameSelect); let inputSearch: HTMLInputElement; let textNode: Text; @@ -384,7 +397,7 @@ export default class CGSelect implements ICgSelect { const response = await fetch(this.url!); const dataUrl = await response.json(); - const nativeSelect = createNativeSelect(); + const nativeSelect = createNativeSelect(this.nameSelect!); dataUrl.forEach((dataItem: IItems, index: number) => { const item = { @@ -613,6 +626,17 @@ export default class CGSelect implements ICgSelect { select!.innerText = this.selectedItems.join(','); } } + + if (this.getRequestUrl!) { + this.forUrlSelectedItems.push(item); + fetch(this.getRequestUrl, { + method: 'POST', + headers: { + 'Content-Type': 'application/json;charset=utf-8', + }, + body: JSON.stringify(this.forUrlSelectedItems), + }); + } } else { if (this.multiselectTag) { const tagItem = document.getElementById(`tag-${index}-${item.id}`); @@ -622,6 +646,17 @@ export default class CGSelect implements ICgSelect { if (Array.isArray(this.selectedItems)) { this.selectedItems.splice(checkIndex, 1); this.indexes.splice(checkIndex, 1); + + if (this.getRequestUrl! && this.forUrlSelectedItems.length > 0) { + this.forUrlSelectedItems.splice(checkIndex, 1); + fetch(this.getRequestUrl, { + method: 'POST', + headers: { + 'Content-Type': 'application/json;charset=utf-8', + }, + body: JSON.stringify(this.forUrlSelectedItems), + }); + } nativeOptionMultiple(nativeOption, item.title, false); } } @@ -648,6 +683,16 @@ export default class CGSelect implements ICgSelect { option.classList.remove('active'); }); option.classList.add('active'); + + if (this.getRequestUrl!) { + fetch(this.getRequestUrl, { + method: 'POST', + headers: { + 'Content-Type': 'application/json;charset=utf-8', + }, + body: JSON.stringify(item), + }); + } } clearSelect(select!, this.element!, selectedItemsClear); diff --git a/src/components/create-element/create-element.ts b/src/components/create-element/create-element.ts index ca37746..02893dd 100644 --- a/src/components/create-element/create-element.ts +++ b/src/components/create-element/create-element.ts @@ -5,10 +5,14 @@ import { ICreateBreadCrumb } from './create-element.interface'; * The method that creates the native select. * @returns {HTMLSelectElement} Returns the created native select. */ -export function createNativeSelect(): HTMLSelectElement { +export function createNativeSelect(nameSelect: string | undefined): HTMLSelectElement { const nativeSelect = document.createElement('select'); - nativeSelect.setAttribute('name', 'dataSelect'); + if (nameSelect == undefined) { + nativeSelect.setAttribute('name', 'CgSelect'); + } else { + nativeSelect.setAttribute('name', nameSelect!); + } nativeSelect.classList.add('nativeSelect'); return nativeSelect; } diff --git a/src/interfaces/cg-select.interface.ts b/src/interfaces/cg-select.interface.ts index cb3b24f..e1b98a2 100644 --- a/src/interfaces/cg-select.interface.ts +++ b/src/interfaces/cg-select.interface.ts @@ -75,6 +75,18 @@ export interface ICgSelect { * @type {string} */ event?: string; + + /** + * Optional parameter responsible for the native select attribute. + * @type {string} + */ + nameSelect?: string; + + /** + * Optional parameter responsible for the sending address when selected in the select. + * @type {string} + */ + getRequestUrl?: string; /** * Required parameter (if no other way to get data (items) is specified), * data that comes from the backend in the format { id: "", title: "", value: ""}.