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

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "cg-select", "name": "cg-select",
"version": "0.1.15", "version": "0.1.16",
"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",
"author": { "author": {
"name": "CraftGroup", "name": "CraftGroup",

21
src/cg-select.js
View File

@ -853,18 +853,19 @@ export class DropDown {
if(nativeSelectMode === true){ if(nativeSelectMode === true){
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')
if(win < 576){
select.classList.add('displayHide');
list.classList.add('displayHide');
nativeSelect.classList.add('nativeSelectActive');
// if(win < 576){ } else if( win > 576){
select.classList.remove('displayHide');
list.classList.remove('displayHide');
// } else if( win > 576){ nativeSelect.classList.remove('nativeSelectActive');
// select.classList.remove('displayHide'); nativeSelect.classList.add('displayHide');
// list.classList.remove('displayHide'); }
// nativeSelect.classList.remove('nativeSelectActive');
// nativeSelect.classList.add('displayHide');
// }
} else{ } else{
return return
} }

2
src/main.scss
View File

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

14
src/style/nativeSelect.scss
View File

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