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

Update 0.3.12

Browse Source
This commit is contained in:
MaxOvs19 2023-04-24 20:24:32 +03:00
parent da1a41daaa
commit 2f69e4fbbf
7 changed files with 105 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -80,3 +80,8 @@ 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.

43
README.md
View File

@ -1,6 +1,6 @@
# CG-SELECT # CG-SELECT
## version ~ 0.3.11 ## version ~ 0.3.12
<a href="https://github.com/apuc/cg-select/blob/main/READMERU.md">ЧИТАТЬ НА РУССКОМ</a> <a href="https://github.com/apuc/cg-select/blob/main/READMERU.md">ЧИТАТЬ НА РУССКОМ</a>
@ -75,6 +75,39 @@ 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>
);
};
```
## 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>
@ -95,10 +128,10 @@ 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 | ![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) |
| 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 | not yet available |
## History ## History

43
READMERU.md
View File

@ -1,6 +1,6 @@
# CG-SELECT # CG-SELECT
## Версия ~ 0.3.11 ## Версия ~ 0.3.12
<a href="https://github.com/apuc/cg-select/blob/main/README.md">English README</a> <a href="https://github.com/apuc/cg-select/blob/main/README.md">English README</a>
@ -76,6 +76,39 @@ 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>
);
};
```
## Примеры различных вариантов выбора. ## Примеры различных вариантов выбора.
<a href="https://cg-select.itguild.info/">Рабочий пример</a> <a href="https://cg-select.itguild.info/">Рабочий пример</a>
@ -94,10 +127,10 @@ 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 | ![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) |
| Комментарий | Протестировано в Js приложениях | Работает только с костылем в виде `setTimeout()` | пока недоступно | пока недоступно | | Комментарий | Протестировано в Js приложениях | Инициация селекта происходит внутри хука `useEffect()` | пока недоступно | пока недоступно |
## История ## История

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

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "cg-select", "name": "cg-select",
"version": "0.3.11", "version": "0.3.12",
"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",

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "cg-select", "name": "cg-select",
"version": "0.3.11", "version": "0.3.12",
"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",

41
src/cg-select.ts
View File

@ -664,7 +664,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 +796,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 +812,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 +838,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 +877,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 +901,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>;