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

Fix methodts in select

Browse Source
This commit is contained in:
MaxOvs 2022-12-26 21:22:55 +03:00
parent 084c823b13
commit a166a58d5d
5 changed files with 24 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -1,6 +1,6 @@
# CG-SELECT
## version ~ 0.1.14
## version ~ 0.1.16
Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта.
Доступна кастомизация, мультивыбор и живой поиск по елементам.
@ -45,8 +45,8 @@ npm i cg-select
### Пример создния обычного селекта
```javascript
import {DropDown} from 'cg-select/src/cg-select';
import 'cg-select/src/main.scss'
import { DropDown } from 'cg-select/src/cg-select';
import 'cg-select/src/main.scss';
const dropdown = new DropDown({
selector: '.cg-dropdown_selector',
@ -88,10 +88,10 @@ const dropdown = new DropDown({
## 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)|
| Комментарий | Протестирован в Js приложениях и работает успешно.|Работает только с костылем в виде `setTimeout()` | тесты не проведены| тесты не проведены |
| Совместимость с приложениями | 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) |
| Комментарий | Протестирован в Js приложениях и работает успешно. | Работает только с костылем в виде `setTimeout()` | тесты не проведены | тесты не проведены |
## History

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "cg-select",
"version": "0.1.15",
"version": "0.1.16",
"description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
"author": {
"name": "CraftGroup",

21
src/cg-select.js
View File

@ -853,18 +853,19 @@ export class DropDown {
if(nativeSelectMode === true){
const select = this.#element.querySelector('.cg-select');
const list = this.#element.querySelector('.list');
const nativeSelect = this.#element.querySelector('.nativeSelect');
const nativeSelect = this.#element.querySelector('.nativeSelect')
// if(win < 576){
if(win < 576){
select.classList.add('displayHide');
list.classList.add('displayHide');
nativeSelect.classList.add('nativeSelectActive');
// } else if( win > 576){
// select.classList.remove('displayHide');
// list.classList.remove('displayHide');
// nativeSelect.classList.remove('nativeSelectActive');
// nativeSelect.classList.add('displayHide');
// }
} else if( win > 576){
select.classList.remove('displayHide');
list.classList.remove('displayHide');
nativeSelect.classList.remove('nativeSelectActive');
nativeSelect.classList.add('displayHide');
}
} else{
return
}

2
src/main.scss
View File

@ -292,7 +292,7 @@ input[type='checkbox'] {
}
.displayHide {
display: none !important;
display: none;
}
/*320px - 576px*/

14
src/style/nativeSelect.scss
View File

@ -20,16 +20,10 @@
.nativeSelectActive {
display: block;
}
@media (max-width: 12450px) {
.nativeSelect {
display: none;
}
// .cg-select {
// display: flex !important;
// }
min-width: 235px;
height: 50px;
border: none;
border-radius: 10px;
}
@media (max-width: 576px) {