Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
5527157568 |
11
CHANGELOG.md
11
CHANGELOG.md
@ -80,14 +80,3 @@ Tested in JS and React. Errors in work in React applications are revealed.
|
||||
##### 04.03.2023 - fix 0.3.1
|
||||
|
||||
- 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
90
README.md
@ -1,8 +1,8 @@
|
||||
# CG-SELECT
|
||||
|
||||
## version ~ 0.3.2
|
||||
## version ~ 0.3.11
|
||||
|
||||
<a href="https://git.itguild.info/apuc/cg-select/src/branch/master/READMERU.md">ЧИТАТЬ НА РУССКОМ</a>
|
||||
<a href="https://github.com/apuc/cg-select/blob/main/READMERU.md">ЧИТАТЬ НА РУССКОМ</a>
|
||||
|
||||
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.
|
||||
@ -19,22 +19,10 @@ Customization, multi-selection and live search by elements are available.
|
||||
|
||||
## Installation
|
||||
|
||||
#### NPM
|
||||
|
||||
```
|
||||
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
|
||||
|
||||
### To create a component, you need:
|
||||
@ -79,74 +67,6 @@ 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
|
||||
|
||||
<a href="https://cg-select.itguild.info/">View live example</a>
|
||||
@ -167,12 +87,10 @@ All documentation on CG-SELECT is located in the folder of the same name. The do
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
| Application Compatibility | JS | React | Angular | Vue |
|
||||
| ------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
|
||||
| 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. | The select is initiated inside the `useEffect() `hook | not yet available | The select is initiated inside the `mounted() `hook |
|
||||
| CG-SELECT |  |   |  |  |
|
||||
| Comment | Tested in Js applications and it works. | Works only with a crutch in the form `setTimeout()` | not yet available | not yet available |
|
||||
|
||||
## History
|
||||
|
||||
|
||||
88
READMERU.md
88
READMERU.md
@ -1,8 +1,8 @@
|
||||
# CG-SELECT
|
||||
|
||||
## Версия ~ 0.3.2
|
||||
## Версия ~ 0.3.11
|
||||
|
||||
<a href="https://git.itguild.info/apuc/cg-select/src/branch/master/README.md">English README</a>
|
||||
<a href="https://github.com/apuc/cg-select/blob/main/README.md">English README</a>
|
||||
|
||||
Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select.
|
||||
Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое.
|
||||
@ -19,22 +19,10 @@
|
||||
|
||||
## Установка
|
||||
|
||||
#### NPM
|
||||
|
||||
```
|
||||
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>
|
||||
|
||||
## Использование
|
||||
|
||||
### Для создания компонента необходимо:
|
||||
@ -80,74 +68,6 @@ 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>
|
||||
@ -168,8 +88,8 @@ export default {
|
||||
|
||||
| Совместимость в приложениях | JS | React | Angular | Vue |
|
||||
| --------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
|
||||
| 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 приложениях | Инициация селекта происходит внутри хука `useEffect()` | пока недоступно | Инициация селекта происходит внутри хука `mounted()` |
|
||||
| CG-SELECT |  |   |  |  |
|
||||
| Комментарий | Протестировано в Js приложениях | Работает только с костылем в виде `setTimeout()` | пока недоступно | пока недоступно |
|
||||
|
||||
## История
|
||||
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
</a>
|
||||
|
||||
<a href="#version--0231" id="version--0231" style="color: inherit; text-decoration: none">
|
||||
<h2>version ~ 0.3.12</h2>
|
||||
<h2>version ~ 0.3.1</h2>
|
||||
</a>
|
||||
<p>
|
||||
This component allows you to create a custom select. It offers more flexible
|
||||
|
||||
84
package-lock.json
generated
84
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "cg-select",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.11",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "cg-select",
|
||||
"version": "0.3.12",
|
||||
"version": "0.3.11",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.21.4",
|
||||
@ -26,7 +26,7 @@
|
||||
"typedoc": "^0.23.28",
|
||||
"typescript": "^5.0.2",
|
||||
"webpack": "^5.77.0",
|
||||
"webpack-cli": "^5.1.4",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "^4.13.2"
|
||||
}
|
||||
},
|
||||
@ -2320,9 +2320,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@webpack-cli/configtest": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
|
||||
"integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.0.1.tgz",
|
||||
"integrity": "sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=14.15.0"
|
||||
@ -2333,9 +2333,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@webpack-cli/info": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz",
|
||||
"integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.1.tgz",
|
||||
"integrity": "sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=14.15.0"
|
||||
@ -2346,9 +2346,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@webpack-cli/serve": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz",
|
||||
"integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.1.tgz",
|
||||
"integrity": "sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=14.15.0"
|
||||
@ -2959,12 +2959,12 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/commander": {
|
||||
"version": "10.0.1",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
|
||||
"integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
|
||||
"version": "9.5.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
|
||||
"integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
"node": "^12.20.0 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/commondir": {
|
||||
@ -6416,17 +6416,17 @@
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-cli": {
|
||||
"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==",
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.0.1.tgz",
|
||||
"integrity": "sha512-S3KVAyfwUqr0Mo/ur3NzIp6jnerNpo7GUO6so51mxLi1spqsA17YcMXy0WOIJtBSnj748lthxC6XLbNKh/ZC+A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@discoveryjs/json-ext": "^0.5.0",
|
||||
"@webpack-cli/configtest": "^2.1.1",
|
||||
"@webpack-cli/info": "^2.0.2",
|
||||
"@webpack-cli/serve": "^2.0.5",
|
||||
"@webpack-cli/configtest": "^2.0.1",
|
||||
"@webpack-cli/info": "^2.0.1",
|
||||
"@webpack-cli/serve": "^2.0.1",
|
||||
"colorette": "^2.0.14",
|
||||
"commander": "^10.0.1",
|
||||
"commander": "^9.4.1",
|
||||
"cross-spawn": "^7.0.3",
|
||||
"envinfo": "^7.7.3",
|
||||
"fastest-levenshtein": "^1.0.12",
|
||||
@ -8482,23 +8482,23 @@
|
||||
}
|
||||
},
|
||||
"@webpack-cli/configtest": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
|
||||
"integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.0.1.tgz",
|
||||
"integrity": "sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@webpack-cli/info": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz",
|
||||
"integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.1.tgz",
|
||||
"integrity": "sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@webpack-cli/serve": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz",
|
||||
"integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.1.tgz",
|
||||
"integrity": "sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
@ -8945,9 +8945,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"commander": {
|
||||
"version": "10.0.1",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
|
||||
"integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
|
||||
"version": "9.5.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
|
||||
"integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
|
||||
"dev": true
|
||||
},
|
||||
"commondir": {
|
||||
@ -11503,17 +11503,17 @@
|
||||
}
|
||||
},
|
||||
"webpack-cli": {
|
||||
"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==",
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.0.1.tgz",
|
||||
"integrity": "sha512-S3KVAyfwUqr0Mo/ur3NzIp6jnerNpo7GUO6so51mxLi1spqsA17YcMXy0WOIJtBSnj748lthxC6XLbNKh/ZC+A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@discoveryjs/json-ext": "^0.5.0",
|
||||
"@webpack-cli/configtest": "^2.1.1",
|
||||
"@webpack-cli/info": "^2.0.2",
|
||||
"@webpack-cli/serve": "^2.0.5",
|
||||
"@webpack-cli/configtest": "^2.0.1",
|
||||
"@webpack-cli/info": "^2.0.1",
|
||||
"@webpack-cli/serve": "^2.0.1",
|
||||
"colorette": "^2.0.14",
|
||||
"commander": "^10.0.1",
|
||||
"commander": "^9.4.1",
|
||||
"cross-spawn": "^7.0.3",
|
||||
"envinfo": "^7.7.3",
|
||||
"fastest-levenshtein": "^1.0.12",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "cg-select",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.11",
|
||||
"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.1.4",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"webpack-dev-server": "^4.13.2"
|
||||
},
|
||||
"keywords": [
|
||||
|
||||
@ -46,8 +46,6 @@ export default class CGSelect implements ICgSelect {
|
||||
label?: string;
|
||||
styles?: IStyle;
|
||||
event?: string;
|
||||
nameSelect?: string;
|
||||
getRequestUrl?: string;
|
||||
url?: string;
|
||||
multiselect?: boolean;
|
||||
multiselectTag?: boolean;
|
||||
@ -97,11 +95,6 @@ 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.
|
||||
@ -120,8 +113,6 @@ export default class CGSelect implements ICgSelect {
|
||||
nativeSelectMode: true/false,
|
||||
listDisplayMode: true/false,
|
||||
language: 'ru/en',
|
||||
nameSelect: "titleYouSelect";
|
||||
getRequestUrl: "/endpoint/123";
|
||||
styles: {
|
||||
head: {
|
||||
background: '...',
|
||||
@ -206,8 +197,6 @@ export default class CGSelect implements ICgSelect {
|
||||
styles,
|
||||
label,
|
||||
event,
|
||||
nameSelect,
|
||||
getRequestUrl,
|
||||
selected,
|
||||
placeholder,
|
||||
theme,
|
||||
@ -227,8 +216,6 @@ 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;
|
||||
@ -296,7 +283,7 @@ export default class CGSelect implements ICgSelect {
|
||||
}
|
||||
|
||||
const ulList = document.createElement('ul');
|
||||
const nativeSelect = createNativeSelect(this.nameSelect);
|
||||
const nativeSelect = createNativeSelect();
|
||||
|
||||
let inputSearch: HTMLInputElement;
|
||||
let textNode: Text;
|
||||
@ -397,7 +384,7 @@ export default class CGSelect implements ICgSelect {
|
||||
const response = await fetch(this.url!);
|
||||
const dataUrl = await response.json();
|
||||
|
||||
const nativeSelect = createNativeSelect(this.nameSelect!);
|
||||
const nativeSelect = createNativeSelect();
|
||||
|
||||
dataUrl.forEach((dataItem: IItems, index: number) => {
|
||||
const item = {
|
||||
@ -626,17 +613,6 @@ 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}`);
|
||||
@ -646,17 +622,6 @@ 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);
|
||||
}
|
||||
}
|
||||
@ -683,16 +648,6 @@ 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);
|
||||
@ -709,7 +664,7 @@ export default class CGSelect implements ICgSelect {
|
||||
private selectMode(nativeSelectMode: boolean) {
|
||||
let win = window.outerWidth;
|
||||
|
||||
if (nativeSelectMode) {
|
||||
if (nativeSelectMode === true) {
|
||||
const select = this.element!.querySelector('.cg-select');
|
||||
const list = this.element!.querySelector('.list');
|
||||
const nativeSelect = this.element!.querySelector('.nativeSelect');
|
||||
@ -841,12 +796,11 @@ export default class CGSelect implements ICgSelect {
|
||||
const textNoRezult = this.element!.querySelector('.noRezult');
|
||||
const textNode = document.createTextNode(textInListSearch);
|
||||
|
||||
search!.setAttribute('placeholder', placeholder);
|
||||
search!.setAttribute('placeholder', placeholder);
|
||||
|
||||
textNoRezult!.textContent = '';
|
||||
textNoRezult!.appendChild(textNode);
|
||||
} else {
|
||||
throw new Error('You cannot change the language if it is not enabled searchMode!');
|
||||
}
|
||||
}
|
||||
|
||||
@ -857,21 +811,20 @@ export default class CGSelect implements ICgSelect {
|
||||
* @method buttonControl
|
||||
*/
|
||||
public buttonControl(button: Element, method: string) {
|
||||
if (!this.listDisplayMode) {
|
||||
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!');
|
||||
if (this.listDisplayMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.buttonAction = button!;
|
||||
button.addEventListener('click', () => {
|
||||
if (method.toLowerCase() === 'open') {
|
||||
this.open(true);
|
||||
} else if (method.toLowerCase() === 'close') {
|
||||
this.close();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -883,7 +836,7 @@ export default class CGSelect implements ICgSelect {
|
||||
const select = this.element!.querySelector('.cg-select');
|
||||
const nativeSelect = this.element!.querySelector('.nativeSelect');
|
||||
|
||||
if (value) {
|
||||
if (value === true) {
|
||||
this.element!.setAttribute('disabled', 'true');
|
||||
nativeSelect!.setAttribute('disabled', 'true');
|
||||
select!.classList.add('disabled');
|
||||
@ -922,8 +875,10 @@ export default class CGSelect implements ICgSelect {
|
||||
*/
|
||||
public deleteItem(index: number) {
|
||||
if (this.category) {
|
||||
throw new Error('Unable to remove item from category!');
|
||||
console.log('can`t add item to category');
|
||||
return;
|
||||
}
|
||||
|
||||
const item = this.items[index];
|
||||
|
||||
this.items.splice(index, 1);
|
||||
@ -946,7 +901,8 @@ export default class CGSelect implements ICgSelect {
|
||||
*/
|
||||
public selectIndex(index: number) {
|
||||
if (this.category) {
|
||||
throw new Error('Unable to select item from category!');
|
||||
console.log('can`t add item to category');
|
||||
return;
|
||||
}
|
||||
|
||||
const options = this.element!.querySelectorAll('.list__item') as NodeListOf<HTMLElement>;
|
||||
|
||||
@ -5,14 +5,10 @@ import { ICreateBreadCrumb } from './create-element.interface';
|
||||
* The method that creates the native select.
|
||||
* @returns {HTMLSelectElement} Returns the created native select.
|
||||
*/
|
||||
export function createNativeSelect(nameSelect: string | undefined): HTMLSelectElement {
|
||||
export function createNativeSelect(): HTMLSelectElement {
|
||||
const nativeSelect = document.createElement('select');
|
||||
|
||||
if (nameSelect == undefined) {
|
||||
nativeSelect.setAttribute('name', 'CgSelect');
|
||||
} else {
|
||||
nativeSelect.setAttribute('name', nameSelect!);
|
||||
}
|
||||
nativeSelect.setAttribute('name', 'dataSelect');
|
||||
nativeSelect.classList.add('nativeSelect');
|
||||
return nativeSelect;
|
||||
}
|
||||
|
||||
@ -75,18 +75,6 @@ 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: ""}.
|
||||
|
||||
@ -7,8 +7,11 @@ module.exports = {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: 'main.js',
|
||||
clean: true,
|
||||
library: 'CGSelect',
|
||||
libraryTarget: 'umd',
|
||||
library: {
|
||||
name: 'CGSelect',
|
||||
type: 'window',
|
||||
export: 'default',
|
||||
},
|
||||
},
|
||||
// devServer: {
|
||||
// open: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user