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

Compare commits

merge into: apuc:cdn-main
Branches Tags
apuc:master
apuc:cdn-main
...
pull from: apuc:master
Branches Tags
apuc:master
apuc:cdn-main

15 Commits
cdn-main ... master

Author SHA1 Message Date
MaxOvs19
9ed0cb3124 Merge https://github.com/apuc/cg-select 2023-10-04 18:36:56 +03:00
MaxOvs19
5abd09f9d5
Merge pull request #41 from apuc/fix-request-data 
Fix request data
 2023-10-04 18:28:06 +03:00
MaxOvs19
d5bbec2b7f added new options in select 2023-10-04 18:26:51 +03:00
MaxOvs19
49478b316c Create new branch 2023-10-04 14:18:35 +03:00
MaxOvs19
5c17582f43
Update READMERU.md 2023-06-13 07:01:26 +03:00
MaxOvs19
92e1cfbe93
Update README.md 2023-06-13 06:59:49 +03:00
MaxOvs19
8fe132d7d1 Fix readme 2023-04-25 12:40:13 +03:00
MaxOvs19
6f4a7d23db Fixed Readme 2023-04-25 12:33:26 +03:00
MaxOvs19
75eed30d19 Update 0.3.12 2023-04-24 20:36:31 +03:00
MaxOvs19
2f69e4fbbf Update 0.3.12 2023-04-24 20:24:32 +03:00
Макс Овсяников
913f9b1879 Изменил(а) на 'READMERU.md' 2023-04-20 12:26:46 +03:00
Макс Овсяников
9b056cd0df Изменил(а) на 'README.md' 2023-04-20 12:26:06 +03:00
Макс Овсяников
a92ec260ac Изменил(а) на 'READMERU.md' 2023-04-20 12:17:14 +03:00
Макс Овсяников
3c5be8445f Изменил(а) на 'README.md' 2023-04-20 12:15:51 +03:00
MaxOvs19
da1a41daaa Update Readme 2023-04-17 17:09:57 +03:00
9 changed files with 311 additions and 78 deletions
Show Stats Expand all files Collapse all files

11
CHANGELOG.md
View File

@ -80,3 +80,14 @@ Tested in JS and React. Errors in work in React applications are revealed.
##### 04.03.2023 - fix 0.3.1 ##### 04.03.2023 - fix 0.3.1
- Fixed import select. - Fixed import select.
##### 04.03.2023 - fix 0.3.12
- 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.

90
README.md
View File

@ -1,8 +1,8 @@
# CG-SELECT # CG-SELECT
## version ~ 0.3.11 ## version ~ 0.3.2
<a href="https://github.com/apuc/cg-select/blob/main/READMERU.md">ЧИТАТЬ НА РУССКОМ</a> <a href="https://git.itguild.info/apuc/cg-select/src/branch/master/READMERU.md">ЧИТАТЬ НА РУССКОМ</a>
This component allows you to create a custom select. It offers more flexible customization and use of select. This component allows you to create a custom select. It offers more flexible customization and use of select.
Customization, multi-selection and live search by elements are available. Customization, multi-selection and live search by elements are available.
@ -19,10 +19,22 @@ Customization, multi-selection and live search by elements are available.
## Installation ## Installation
#### NPM
``` ```
npm i cg-select npm i cg-select
``` ```
#### CDN
```
<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 ## Usage
### To create a component, you need: ### To create a component, you need:
@ -67,6 +79,74 @@ const dropdown = new CGSelect({
}); });
``` ```
### An example of initialization a CGSelect in React.
```javascript
import { useEffect } from 'react';
import CGSelect from 'cg-select';
const App = () => {
useEffect(() => {
const drop = new CGSelect({
selector: '.cg-dropdown_selector',
placeholder: 'Выберите авто',
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
});
}, []);
return (
<div className="App">
<button className="cg-dropdown cg-dropdown_selector"></button>
</div>
);
};
```
### An example of initialization a CGSelect in Vue.
```javascript
<template>
<div>
<button class="cg-dropdown cg-dropdown_selector"></button>
</div>
</template>
<script>
import CGSelect from "cg-select";
export default {
mounted() {
const drop = new CGSelect({
selector: ".cg-dropdown_selector",
placeholder: "Выберите авто",
items: [
"BMW",
{
id: "213sade",
title: "Opel",
value: 1,
},
"Mersedes",
"MAN",
"Ferari",
],
});
console.log(drop);
},
};
</script>
```
## Example of different selects ## Example of different selects
<a href="https://cg-select.itguild.info/">View live example</a> <a href="https://cg-select.itguild.info/">View live example</a>
@ -87,10 +167,12 @@ All documentation on CG-SELECT is located in the folder of the same name. The do
## Compatibility ## Compatibility
| Application Compatibility | JS | React | Angular | Vue | | Application 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) | | CG-SELECT | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> | </img> <img src="src/images/no.png"></img> | </img> <img src="src/images/yes.png"></img> |
| Comment | Tested in Js applications and it works. | Works only with a crutch in the form `setTimeout()` | not yet available | not yet available | | Comment | Tested in Js applications and it works. | The select is initiated inside the `useEffect() `hook | not yet available | The select is initiated inside the `mounted() `hook |
## History ## History

88
READMERU.md
View File

@ -1,8 +1,8 @@
# CG-SELECT # CG-SELECT
## Версия ~ 0.3.11 ## Версия ~ 0.3.2
<a href="https://github.com/apuc/cg-select/blob/main/README.md">English README</a> <a href="https://git.itguild.info/apuc/cg-select/src/branch/master/README.md">English README</a>
Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select. Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select.
Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое. Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое.
@ -19,10 +19,22 @@
## Установка ## Установка
#### NPM
``` ```
npm i cg-select npm i cg-select
``` ```
#### CDN
```
<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>
## Использование ## Использование
### Для создания компонента необходимо: ### Для создания компонента необходимо:
@ -68,6 +80,74 @@ const dropdown = new CGSelect({
}); });
``` ```
### Пример инициализации CGSelect в React.
```javascript
import { useEffect } from 'react';
import CGSelect from 'cg-select';
const App = () => {
useEffect(() => {
const drop = new CGSelect({
selector: '.cg-dropdown_selector',
placeholder: 'Выберите авто',
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
});
}, []);
return (
<div className="App">
<button className="cg-dropdown cg-dropdown_selector"></button>
</div>
);
};
```
### Пример инициализации CGSelect в Vue.
```javascript
<template>
<div>
<button class="cg-dropdown cg-dropdown_selector"></button>
</div>
</template>
<script>
import CGSelect from "cg-select";
export default {
mounted() {
const drop = new CGSelect({
selector: ".cg-dropdown_selector",
placeholder: "Выберите авто",
items: [
"BMW",
{
id: "213sade",
title: "Opel",
value: 1,
},
"Mersedes",
"MAN",
"Ferari",
],
});
console.log(drop);
},
};
</script>
```
## Примеры различных вариантов выбора. ## Примеры различных вариантов выбора.
<a href="https://cg-select.itguild.info/">Рабочий пример</a> <a href="https://cg-select.itguild.info/">Рабочий пример</a>
@ -88,8 +168,8 @@ const dropdown = new CGSelect({
| Совместимость в приложениях | JS | React | Angular | Vue | | Совместимость в приложениях | 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) | | CG-SELECT | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> | <img src="src/images/no.png"></img> | <img src="src/images/yes.png"></img> |
| Комментарий | Протестировано в Js приложениях | Работает только с костылем в виде `setTimeout()` | пока недоступно | пока недоступно | | Комментарий | Протестировано в Js приложениях | Инициация селекта происходит внутри хука `useEffect()` | пока недоступно | Инициация селекта происходит внутри хука `mounted()` |
## История ## История

2
docs/index.html
View File

@ -62,7 +62,7 @@
</a> </a>
<a href="#version--0231" id="version--0231" style="color: inherit; text-decoration: none"> <a href="#version--0231" id="version--0231" style="color: inherit; text-decoration: none">
<h2>version ~ 0.3.1</h2> <h2>version ~ 0.3.12</h2>
</a> </a>
<p> <p>
This component allows you to create a custom select. It offers more flexible This component allows you to create a custom select. It offers more flexible

84
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "cg-select", "name": "cg-select",
"version": "0.3.11", "version": "0.3.2",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "cg-select", "name": "cg-select",
"version": "0.3.11", "version": "0.3.12",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@babel/core": "^7.21.4", "@babel/core": "^7.21.4",
@ -26,7 +26,7 @@
"typedoc": "^0.23.28", "typedoc": "^0.23.28",
"typescript": "^5.0.2", "typescript": "^5.0.2",
"webpack": "^5.77.0", "webpack": "^5.77.0",
"webpack-cli": "^5.0.1", "webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.13.2" "webpack-dev-server": "^4.13.2"
} }
}, },
@ -2320,9 +2320,9 @@
} }
}, },
"node_modules/@webpack-cli/configtest": { "node_modules/@webpack-cli/configtest": {
"version": "2.0.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.0.1.tgz", "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
"integrity": "sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==", "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=14.15.0" "node": ">=14.15.0"
@ -2333,9 +2333,9 @@
} }
}, },
"node_modules/@webpack-cli/info": { "node_modules/@webpack-cli/info": {
"version": "2.0.1", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.1.tgz", "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz",
"integrity": "sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==", "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=14.15.0" "node": ">=14.15.0"
@ -2346,9 +2346,9 @@
} }
}, },
"node_modules/@webpack-cli/serve": { "node_modules/@webpack-cli/serve": {
"version": "2.0.1", "version": "2.0.5",
"resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.1.tgz", "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz",
"integrity": "sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==", "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=14.15.0" "node": ">=14.15.0"
@ -2959,12 +2959,12 @@
"dev": true "dev": true
}, },
"node_modules/commander": { "node_modules/commander": {
"version": "9.5.0", "version": "10.0.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
"integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": "^12.20.0 || >=14" "node": ">=14"
} }
}, },
"node_modules/commondir": { "node_modules/commondir": {
@ -6416,17 +6416,17 @@
} }
}, },
"node_modules/webpack-cli": { "node_modules/webpack-cli": {
"version": "5.0.1", "version": "5.1.4",
"resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.0.1.tgz", "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
"integrity": "sha512-S3KVAyfwUqr0Mo/ur3NzIp6jnerNpo7GUO6so51mxLi1spqsA17YcMXy0WOIJtBSnj748lthxC6XLbNKh/ZC+A==", "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@discoveryjs/json-ext": "^0.5.0", "@discoveryjs/json-ext": "^0.5.0",
"@webpack-cli/configtest": "^2.0.1", "@webpack-cli/configtest": "^2.1.1",
"@webpack-cli/info": "^2.0.1", "@webpack-cli/info": "^2.0.2",
"@webpack-cli/serve": "^2.0.1", "@webpack-cli/serve": "^2.0.5",
"colorette": "^2.0.14", "colorette": "^2.0.14",
"commander": "^9.4.1", "commander": "^10.0.1",
"cross-spawn": "^7.0.3", "cross-spawn": "^7.0.3",
"envinfo": "^7.7.3", "envinfo": "^7.7.3",
"fastest-levenshtein": "^1.0.12", "fastest-levenshtein": "^1.0.12",
@ -8482,23 +8482,23 @@
} }
}, },
"@webpack-cli/configtest": { "@webpack-cli/configtest": {
"version": "2.0.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.0.1.tgz", "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
"integrity": "sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==", "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
"dev": true, "dev": true,
"requires": {} "requires": {}
}, },
"@webpack-cli/info": { "@webpack-cli/info": {
"version": "2.0.1", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.1.tgz", "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz",
"integrity": "sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==", "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
"dev": true, "dev": true,
"requires": {} "requires": {}
}, },
"@webpack-cli/serve": { "@webpack-cli/serve": {
"version": "2.0.1", "version": "2.0.5",
"resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.1.tgz", "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz",
"integrity": "sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==", "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
"dev": true, "dev": true,
"requires": {} "requires": {}
}, },
@ -8945,9 +8945,9 @@
"dev": true "dev": true
}, },
"commander": { "commander": {
"version": "9.5.0", "version": "10.0.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
"integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
"dev": true "dev": true
}, },
"commondir": { "commondir": {
@ -11503,17 +11503,17 @@
} }
}, },
"webpack-cli": { "webpack-cli": {
"version": "5.0.1", "version": "5.1.4",
"resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.0.1.tgz", "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
"integrity": "sha512-S3KVAyfwUqr0Mo/ur3NzIp6jnerNpo7GUO6so51mxLi1spqsA17YcMXy0WOIJtBSnj748lthxC6XLbNKh/ZC+A==", "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@discoveryjs/json-ext": "^0.5.0", "@discoveryjs/json-ext": "^0.5.0",
"@webpack-cli/configtest": "^2.0.1", "@webpack-cli/configtest": "^2.1.1",
"@webpack-cli/info": "^2.0.1", "@webpack-cli/info": "^2.0.2",
"@webpack-cli/serve": "^2.0.1", "@webpack-cli/serve": "^2.0.5",
"colorette": "^2.0.14", "colorette": "^2.0.14",
"commander": "^9.4.1", "commander": "^10.0.1",
"cross-spawn": "^7.0.3", "cross-spawn": "^7.0.3",
"envinfo": "^7.7.3", "envinfo": "^7.7.3",
"fastest-levenshtein": "^1.0.12", "fastest-levenshtein": "^1.0.12",

4
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "cg-select", "name": "cg-select",
"version": "0.3.11", "version": "0.3.2",
"source": "index.js", "source": "index.js",
"main": "dist/main.js", "main": "dist/main.js",
"description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling", "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
@ -40,7 +40,7 @@
"typedoc": "^0.23.28", "typedoc": "^0.23.28",
"typescript": "^5.0.2", "typescript": "^5.0.2",
"webpack": "^5.77.0", "webpack": "^5.77.0",
"webpack-cli": "^5.0.1", "webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.13.2" "webpack-dev-server": "^4.13.2"
}, },
"keywords": [ "keywords": [

90
src/cg-select.ts
View File

@ -46,6 +46,8 @@ export default class CGSelect implements ICgSelect {
label?: string; label?: string;
styles?: IStyle; styles?: IStyle;
event?: string; event?: string;
nameSelect?: string;
getRequestUrl?: string;
url?: string; url?: string;
multiselect?: boolean; multiselect?: boolean;
multiselectTag?: boolean; multiselectTag?: boolean;
@ -95,6 +97,11 @@ export default class CGSelect implements ICgSelect {
* @type {Element | null} * @type {Element | null}
*/ */
private buttonAction?: Element | null; private buttonAction?: Element | null;
/**
* Array for request
* @type {IItems}
*/
private forUrlSelectedItems: IItems[] = [];
/** /**
* @param {ICgSelect} setting Object accepting select settings. * @param {ICgSelect} setting Object accepting select settings.
@ -113,6 +120,8 @@ export default class CGSelect implements ICgSelect {
nativeSelectMode: true/false, nativeSelectMode: true/false,
listDisplayMode: true/false, listDisplayMode: true/false,
language: 'ru/en', language: 'ru/en',
nameSelect: "titleYouSelect";
getRequestUrl: "/endpoint/123";
styles: { styles: {
head: { head: {
background: '...', background: '...',
@ -197,6 +206,8 @@ export default class CGSelect implements ICgSelect {
styles, styles,
label, label,
event, event,
nameSelect,
getRequestUrl,
selected, selected,
placeholder, placeholder,
theme, theme,
@ -216,6 +227,8 @@ export default class CGSelect implements ICgSelect {
this.styles = styles; this.styles = styles;
this.label = label; this.label = label;
this.event = event; this.event = event;
this.nameSelect = nameSelect;
this.getRequestUrl = getRequestUrl;
this.selected = selected; this.selected = selected;
this.placeholder = placeholder; this.placeholder = placeholder;
this.theme = theme; this.theme = theme;
@ -283,7 +296,7 @@ export default class CGSelect implements ICgSelect {
} }
const ulList = document.createElement('ul'); const ulList = document.createElement('ul');
const nativeSelect = createNativeSelect(); const nativeSelect = createNativeSelect(this.nameSelect);
let inputSearch: HTMLInputElement; let inputSearch: HTMLInputElement;
let textNode: Text; let textNode: Text;
@ -384,7 +397,7 @@ export default class CGSelect implements ICgSelect {
const response = await fetch(this.url!); const response = await fetch(this.url!);
const dataUrl = await response.json(); const dataUrl = await response.json();
const nativeSelect = createNativeSelect(); const nativeSelect = createNativeSelect(this.nameSelect!);
dataUrl.forEach((dataItem: IItems, index: number) => { dataUrl.forEach((dataItem: IItems, index: number) => {
const item = { const item = {
@ -613,6 +626,17 @@ export default class CGSelect implements ICgSelect {
select!.innerText = this.selectedItems.join(','); 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 { } else {
if (this.multiselectTag) { if (this.multiselectTag) {
const tagItem = document.getElementById(`tag-${index}-${item.id}`); const tagItem = document.getElementById(`tag-${index}-${item.id}`);
@ -622,6 +646,17 @@ export default class CGSelect implements ICgSelect {
if (Array.isArray(this.selectedItems)) { if (Array.isArray(this.selectedItems)) {
this.selectedItems.splice(checkIndex, 1); this.selectedItems.splice(checkIndex, 1);
this.indexes.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); nativeOptionMultiple(nativeOption, item.title, false);
} }
} }
@ -648,6 +683,16 @@ export default class CGSelect implements ICgSelect {
option.classList.remove('active'); option.classList.remove('active');
}); });
option.classList.add('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); clearSelect(select!, this.element!, selectedItemsClear);
@ -664,7 +709,7 @@ export default class CGSelect implements ICgSelect {
private selectMode(nativeSelectMode: boolean) { private selectMode(nativeSelectMode: boolean) {
let win = window.outerWidth; let win = window.outerWidth;
if (nativeSelectMode === true) { if (nativeSelectMode) {
const select = this.element!.querySelector('.cg-select'); const select = this.element!.querySelector('.cg-select');
const list = this.element!.querySelector('.list'); const list = this.element!.querySelector('.list');
const nativeSelect = this.element!.querySelector('.nativeSelect'); const nativeSelect = this.element!.querySelector('.nativeSelect');
@ -796,11 +841,12 @@ export default class CGSelect implements ICgSelect {
const textNoRezult = this.element!.querySelector('.noRezult'); const textNoRezult = this.element!.querySelector('.noRezult');
const textNode = document.createTextNode(textInListSearch); const textNode = document.createTextNode(textInListSearch);
search!.setAttribute('placeholder', placeholder);
search!.setAttribute('placeholder', placeholder); search!.setAttribute('placeholder', placeholder);
textNoRezult!.textContent = ''; textNoRezult!.textContent = '';
textNoRezult!.appendChild(textNode); textNoRezult!.appendChild(textNode);
} else {
throw new Error('You cannot change the language if it is not enabled searchMode!');
} }
} }
@ -811,20 +857,21 @@ export default class CGSelect implements ICgSelect {
* @method buttonControl * @method buttonControl
*/ */
public buttonControl(button: Element, method: string) { public buttonControl(button: Element, method: string) {
if (this.listDisplayMode) { if (!this.listDisplayMode) {
return; this.buttonAction = button!;
button.addEventListener('click', () => {
switch (method.toLowerCase()) {
case 'open':
this.open(true);
break;
case 'close':
this.close();
break;
}
});
} else {
throw new Error('Sheet display enabled in listDisplayMode!');
} }
this.buttonAction = button!;
button.addEventListener('click', () => {
if (method.toLowerCase() === 'open') {
this.open(true);
} else if (method.toLowerCase() === 'close') {
this.close();
} else {
return;
}
});
} }
/** /**
@ -836,7 +883,7 @@ export default class CGSelect implements ICgSelect {
const select = this.element!.querySelector('.cg-select'); const select = this.element!.querySelector('.cg-select');
const nativeSelect = this.element!.querySelector('.nativeSelect'); const nativeSelect = this.element!.querySelector('.nativeSelect');
if (value === true) { if (value) {
this.element!.setAttribute('disabled', 'true'); this.element!.setAttribute('disabled', 'true');
nativeSelect!.setAttribute('disabled', 'true'); nativeSelect!.setAttribute('disabled', 'true');
select!.classList.add('disabled'); select!.classList.add('disabled');
@ -875,10 +922,8 @@ export default class CGSelect implements ICgSelect {
*/ */
public deleteItem(index: number) { public deleteItem(index: number) {
if (this.category) { if (this.category) {
console.log('can`t add item to category'); throw new Error('Unable to remove item from category!');
return;
} }
const item = this.items[index]; const item = this.items[index];
this.items.splice(index, 1); this.items.splice(index, 1);
@ -901,8 +946,7 @@ export default class CGSelect implements ICgSelect {
*/ */
public selectIndex(index: number) { public selectIndex(index: number) {
if (this.category) { if (this.category) {
console.log('can`t add item to category'); throw new Error('Unable to select item from category!');
return;
} }
const options = this.element!.querySelectorAll('.list__item') as NodeListOf<HTMLElement>; const options = this.element!.querySelectorAll('.list__item') as NodeListOf<HTMLElement>;

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. * The method that creates the native select.
* @returns {HTMLSelectElement} Returns the created 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'); 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'); nativeSelect.classList.add('nativeSelect');
return nativeSelect; return nativeSelect;
} }

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

@ -75,6 +75,18 @@ export interface ICgSelect {
* @type {string} * @type {string}
*/ */
event?: 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), * Required parameter (if no other way to get data (items) is specified),
* data that comes from the backend in the format { id: "", title: "", value: ""}. * data that comes from the backend in the format { id: "", title: "", value: ""}.