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

Merge https://github.com/apuc/cg-select

Browse Source
This commit is contained in:
MaxOvs19 2023-10-04 18:36:56 +03:00
commit 9ed0cb3124
8 changed files with 124 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@ -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.

6
README.md
View File

@ -1,6 +1,6 @@
# CG-SELECT
## version ~ 0.3.12
## version ~ 0.3.2
<a href="https://git.itguild.info/apuc/cg-select/src/branch/master/READMERU.md">ЧИТАТЬ НА РУССКОМ</a>
@ -31,6 +31,10 @@ npm i cg-select
<script src="https://cdn.itguild.info/items/cg-select/latest/main.js"></script>
```
#### PHP
Repository: <a href="https://git.itguild.info/apuc/php-cg-select-v2">PHP cg-select package integration</a>
## Usage
### To create a component, you need:

6
READMERU.md
View File

@ -1,6 +1,6 @@
# CG-SELECT
## Версия ~ 0.3.12
## Версия ~ 0.3.2
<a href="https://git.itguild.info/apuc/cg-select/src/branch/master/README.md">English README</a>
@ -31,6 +31,10 @@ npm i cg-select
<script src="https://cdn.itguild.info/items/cg-select/latest/main.js"></script>
```
#### PHP
Репозиторий: <a href="https://git.itguild.info/apuc/php-cg-select-v2">Интеграция пакета cg-select для PHP</a>
## Использование
### Для создания компонента необходимо:

82
package-lock.json generated
View File

@ -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",

4
package.json
View File

@ -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": [

49
src/cg-select.ts
View File

@ -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);

8
src/components/create-element/create-element.ts
View File

@ -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;
}

12
src/interfaces/cg-select.interface.ts
View File

@ -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: ""}.