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:36:31 +03:00
commit 75eed30d19
7 changed files with 101 additions and 31 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
- Fixed import select.
##### 04.03.2023 - fix 0.3.12
- Optimized code.
- Added error messages when using public methods.

39
README.md
View File

@ -1,6 +1,6 @@
# CG-SELECT
## version ~ 0.3.11
## version ~ 0.3.12
<a href="https://git.itguild.info/apuc/cg-select/src/branch/master/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
<a href="https://cg-select.itguild.info/">View live example</a>
@ -99,8 +132,8 @@ All documentation on CG-SELECT is located in the folder of the same name. The do
| Application Compatibility | 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> <img src="src/images/no.png"></img> | </img> <img src="src/images/no.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 |
| 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/no.png"></img> |
| Comment | Tested in Js applications and it works. | The select is initiated inside the `useEffect() `hook | not yet available | not yet available |
## History

39
READMERU.md
View File

@ -1,6 +1,6 @@
# CG-SELECT
## Версия ~ 0.3.11
## Версия ~ 0.3.12
<a href="https://git.itguild.info/apuc/cg-select/src/branch/master/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>
@ -96,8 +129,8 @@ const dropdown = new CGSelect({
| Совместимость в приложениях | 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/no.png"></img> | <img src="src/images/no.png"></img> |
| Комментарий | Протестировано в Js приложениях | Работает только с костылем в виде `setTimeout()` | пока недоступно | пока недоступно |
| 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/no.png"></img> |
| Комментарий | Протестировано в Js приложениях | Инициация селекта происходит внутри хука `useEffect()` | пока недоступно | пока недоступно |
## История

2
docs/index.html
View File

@ -62,7 +62,7 @@
</a>
<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>
<p>
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",
"version": "0.3.11",
"version": "0.3.12",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "cg-select",
"version": "0.3.11",
"version": "0.3.12",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.21.4",

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "cg-select",
"version": "0.3.11",
"version": "0.3.12",
"source": "index.js",
"main": "dist/main.js",
"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) {
let win = window.outerWidth;
if (nativeSelectMode === true) {
if (nativeSelectMode) {
const select = this.element!.querySelector('.cg-select');
const list = this.element!.querySelector('.list');
const nativeSelect = this.element!.querySelector('.nativeSelect');
@ -796,11 +796,12 @@ 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!');
}
}
@ -811,20 +812,21 @@ export default class CGSelect implements ICgSelect {
* @method buttonControl
*/
public buttonControl(button: Element, method: string) {
if (this.listDisplayMode) {
return;
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!');
}
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 nativeSelect = this.element!.querySelector('.nativeSelect');
if (value === true) {
if (value) {
this.element!.setAttribute('disabled', 'true');
nativeSelect!.setAttribute('disabled', 'true');
select!.classList.add('disabled');
@ -875,10 +877,8 @@ export default class CGSelect implements ICgSelect {
*/
public deleteItem(index: number) {
if (this.category) {
console.log('can`t add item to category');
return;
throw new Error('Unable to remove item from category!');
}
const item = this.items[index];
this.items.splice(index, 1);
@ -901,8 +901,7 @@ export default class CGSelect implements ICgSelect {
*/
public selectIndex(index: number) {
if (this.category) {
console.log('can`t add item to category');
return;
throw new Error('Unable to select item from category!');
}
const options = this.element!.querySelectorAll('.list__item') as NodeListOf<HTMLElement>;