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

Update 0.2.5

Browse Source
This commit is contained in:
MaxOvs19 2023-02-27 17:42:07 +03:00
commit 4df0bb1897
15 changed files with 182 additions and 690 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
CHANGELOG.md
View File

@ -46,3 +46,16 @@ Tested in JS and React. Errors in work in React applications are revealed.
- Fixing bugs related to the cleanup of the select. - Fixing bugs related to the cleanup of the select.
- Documentation navigation update. - Documentation navigation update.
- Added icon for example page and documentation. - Added icon for example page and documentation.
### 20.02.2023 - update 0.2.4
- Added ability to create custom themes.
- Added style builder on homepage.
- Fixed documentation.
- Added a block describing how to create your own themes.
### 27.02.2023 - update 0.2.5
- Moving an example using a select to a separate repository.
- Fixed bugs.
- Changed structure.

5
README.md
View File

@ -1,6 +1,6 @@
# CG-SELECT # CG-SELECT
## version ~ 0.2.32 ## version ~ 0.2.5
This component allows you to create a custom select. It offers more flexible customization and use of select. 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. Customization, multi-selection and live search by elements are available.
@ -13,6 +13,7 @@ Customization, multi-selection and live search by elements are available.
- In the multiselect mode, customization of chips (selected elements) is available. - In the multiselect mode, customization of chips (selected elements) is available.
- Label of the element (if it was specified). - Label of the element (if it was specified).
- Switch themes from dark to light. - Switch themes from dark to light.
- The documentation also lists all the elements for catatomization using CSS.
## Installation ## Installation
@ -79,6 +80,8 @@ All documentation on CG-SELECT is located in the folder of the same name. The do
**To view it, follow the link -** https://cg-select.itguild.info/up_/documentation/index.html **To view it, follow the link -** https://cg-select.itguild.info/up_/documentation/index.html
**Russian version README -** https://github.com/apuc/cg-select/blob/main/READMERU.md
## Contributing ## Contributing
1. Fork it! 1. Fork it!

101
READMERU.md Normal file
View File

@ -0,0 +1,101 @@
# CG-SELECT
## version ~ 0.2.5
Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select.
Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое.
### Возможность настройки основных элементов, таких как:
- Кнопка самого селекта Select.
- Список с выбранными элементами.
- Placeholder.
- В режиме мультиселекта доступна кастомизация chips (выбранных элементов).
- Label элемента (если она была указана).
- Переключить тему с темной на светлую.
- Так же в документации указанны все элементы для катомизации с помощью CSS.
## Installation
```
npm i cg-select
```
## Usage
### Для создания компонента необходимо:
1. Создайте обычную кнопку.
2. Добавьте ей класс cg-dropdown.
```
<button class="cg-dropdown"></button>
```
3. Добавьте ему **уникальный класс**,
например: (cg-dropdown_categories)
```
<button class="cg-dropdown cg-dropdown_categories"></button>
```
4. Создайте новый экземпляр класса (new CGSelect)
5. Передайте все нужные настройки как объект.
#### Все варианты создания и управления селектом есть в документации, раздел "Конструктор класса CGSelect".
### Пример создания обычного CGSelect.
```javascript
import CGSelect from 'cg-select';
const dropdown = new CGSelect({
selector: '.cg-dropdown_selector',
placeholder: 'Выберите авто',
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
});
```
## Примеры различных вариантов выбора.
Рабочий пример -- https://cg-select.itguild.info/
![image](https://github.com/apuc/cg-select/blob/main/src/images/DefaultSelect.png)
![image](https://github.com/apuc/cg-select/blob/main/src/images/MultiSelect.png)
![image](https://github.com/apuc/cg-select/blob/main/src/images/WhiteTheme.png)
![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png)
Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в CGSelect. Вы также можете открыть его на странице с примером, или перейти по ссылке ниже.
**Для просмотра перейдите по ссылке -** https://cg-select.itguild.info/up_/documentation/index.html
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Compatibility
| 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) |
| Comment | Tested in Js applications and it worksуспешно. | Works only with a crutch in the form `setTimeout()` | not yet available | not yet available |
## History
16.12.2022 - release version 0.1.0!
20.01.2023 - upgrade to version 0.2.1

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.2.32</h2> <h2>version ~ 0.2.5</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

50
example/example.js
View File

@ -1,50 +0,0 @@
const firstBtn = document.getElementById('first');
const codeFirst = document.getElementById('codeFirst');
const secondBtn = document.getElementById('second');
const codeSecond = document.getElementById('codeSecond');
const thirdBtn = document.getElementById('third');
const codeThird = document.getElementById('codeThird');
const fourthBtn = document.getElementById('fourth');
const codeFourth = document.getElementById('codeFourth');
const fifthBtn = document.getElementById('fifth');
const codeFifth = document.getElementById('codeFifth');
const six = document.getElementById('six')
const codeSix = document.getElementById('codeSix');
const Native = document.getElementById('Native')
const codeNative = document.getElementById('codeNative')
firstBtn.addEventListener('click', () => {
codeFirst.classList.toggle("active")
})
secondBtn.addEventListener('click', () => {
codeSecond.classList.toggle("active")
})
thirdBtn.addEventListener('click', () => {
codeThird.classList.toggle("active")
})
fourthBtn.addEventListener('click', () => {
codeFourth.classList.toggle("active")
})
fifthBtn.addEventListener('click', () => {
codeFifth.classList.toggle("active")
})
six.addEventListener('click', () => {
codeSix.classList.toggle("active")
})
Native.addEventListener('click', () => {
codeNative.classList.toggle("active")
})

363
example/index.html
View File

@ -1,363 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
property="og:description"
content="Feature rich Select control for React/JS with multiselect, autocomplete and styling"
/>
<meta property="og:type" content="website" />
<meta property="og:site_name" content="cg-select" />
<meta property="og:url" content="https://cg-select.itguild.info" />
<meta property="og:image" content="/src/images/logoCG.jpg" />
<title>Cg-Select</title>
<link rel="shortcut icon" href="../src/images/logoCG2.ico" type="image/x-icon" />
<link href="example.scss" rel="stylesheet" />
</head>
<body class="body-example">
<div class="container">
<header class="header">
<div class="header__logoBox">
<h1>CG-SELECT</h1>
<img src="/src/images/logoCG.jpg" alt="#" class="header__logo" />
</div>
<hr style="width: 55%" />
<nav>
<ul class="navlist">
<li><a href="">Home</a></li>
<li><a href="/docs/index.html">Documentation</a></li>
</ul>
</nav>
</header>
</div>
<div class="container content">
<div class="example-select">
<h2 class="example-select_title">Default select</h2>
<form method="get" class="form">
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_one"></button>
</div>
<input type="submit" value="Отправить!" class="example-select_submit" />
<button type="button" class="check-code" id="first">View code</button>
<code id="codeFirst">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
selector: <span class="code__string">'.cg-dropdown_one',</span>
placeholder: <span class="code__string">'Choose a car',</span>
lable: <span class="code__string">'EXAMPLE',</span>
items: [
<span class="code__string">'BMW',</span>
{
id: <span class="code__string">'213sade',</span>
title: <span class="code__string">'Opel',</span>
value: 1,
},
<span class="code__string">'Mersedes',</span>
<span class="code__string">'MAN',</span>
<span class="code__string">'Ferari',</span>
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
},
});
</pre>
</code>
</form>
</div>
<div class="example-select">
<h2 class="example-select_title">Default select with function nativeSelectMode</h2>
<form method="get" class="form">
<p style="margin-left: 12px; color: white">
*Native select appears on mobile resolution.
</p>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_selectNative"></button>
</div>
<button type="button" class="check-code" id="Native">View code</button>
<code id="codeNative">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
selector: <span class="code__string">'.cg-dropdown_one',</span>
placeholder: <span class="code__string">'Choose a car',</span>
nativeSelectMode: <span class="code__keyword">true,</span>
items: [
<span class="code__string">'BMW',</span>
{
id: <span class="code__string">'213sade',</span>
title: <span class="code__string">'Opel',</span>
value: 1,
},
<span class="code__string">'Mersedes',</span>
<span class="code__string">'MAN',</span>
<span class="code__string">'Ferari',</span>
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
},
});
</pre>
</code>
</form>
</div>
<div class="example-select">
<h2 class="example-select_title">Default select with function listDisplayMode</h2>
<form method="get" class="form">
<p style="margin-left: 12px; color: white">
*When using this method, the selection sheet appears as a modal window.
</p>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
</div>
<button type="button" class="check-code" id="six">View code</button>
<code id="codeSix">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span>
placeholder: <span class="code__string">'Choose a car',</span>
listDisplayMode: <span class="code__keyword">true,</span>
items: [
<span class="code__string">'BMW',</span>
{
id: <span class="code__string">'213sade',</span>
title: <span class="code__string">'Opel',</span>
value: 1,
},
<span class="code__string">'Mersedes',</span>
<span class="code__string">'MAN',</span>
<span class="code__string">'Ferari',</span>
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
},
});
</pre>
</code>
</form>
</div>
<div class="example-select">
<h1 class="example-select_title">Select with data from URL</h1>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_three"></button>
</div>
<button type="button" class="check-code" id="second">View code</button>
<code id="codeSecond">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
selector: <span class="code__string">'.cg-dropdown_three',</span>
placeholder: <span class="code__string">'URL',</span>
url: <span class="code__string">'https://jsonplaceholder.typicode.com/users',</span>
searchMode: <span class="code__keyword">true,</span>
darkTheme: <span class="code__keyword">false,</span>
language: <span class="code__string">'ru',</span>
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
},
});
</pre>
</code>
</div>
<div class="example-select">
<h1 class="example-select_title">Categories</h1>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_categories"></button>
</div>
<button type="button" class="check-code" id="third">View code</button>
<code id="codeThird">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
selector: <span class="code__string">'.cg-dropdown_categories',</span>
placeholder: <span class="code__string">'Выберите регион',</span>
searchMode: <span class="code__keyword">true,</span>
items: [
{
category: <span class="code__string">'Russia',</span>
categoryItems: [
{
id: <span class="code__string">'28qwds',</span>
title: <span class="code__string">'Москва',</span>
value: 0,
},
<span class="code__string">'Ростов-на-дону',</span>
<span class="code__string">'Саратов',</span>
<span class="code__string">'Волгоград',</span>
<span class="code__string">'Донецк',</span>
],
},
{
category: <span class="code__string">'USA',</span>
categoryItems: <span class="code__string">[
'Alabama',
'Texas',
'Colorado',
'Klirens',
'Los-Angeles'],</span>
},
{
category: <span class="code__string">'France',</span>
categoryItems: <span class="code__string">['Paris'],</span>
},
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
placeholder: {
maxWidth: <span class="code__string">'500px ',</span>
},
},
multiselect: <span class="code__keyword">true,</span>
multiselectTag: <span class="code__keyword">true,</span>
});
</pre>
</code>
</div>
<div class="example-select">
<h1 class="example-select_title">Button control</h1>
<div style="margin-bottom: 15px">
<button class="button__open example-select_submit">Open</button>
<button class="button__close example-select_submit">Close</button>
</div>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_usedBtn"></button>
</div>
<button type="button" class="check-code" id="fourth">View code</button>
<code id="codeFourth">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
selector: <span class="code__string">'.cg-dropdown_usedBtn',</span>
placeholder: <span class="code__string">'Choose a car',</span>
searchMode: <span class="code__keyword">true,</span>
items: [
<span class="code__string">'BMW',</span>
{
id: <span class="code__string">'213sade',</span>
title: <span class="code__string">'Opel',</span>
value: 1,
},
<span class="code__string">'Mersedes',</span>
<span class="code__string">'MAN',</span>
<span class="code__string">'max',</span>
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
color: <span class="code__string">'black',</span>
backgroundColor: <span class="code__string">'rgb(176 223 167)',</span>
},
list: {
width: <span class="code__string">'824px',</span>
color: <span class="code__string">'black',</span>
backgroundColor: <span class="code__string">'rgb(176 223 167)',</span>
},
caret: {
borderTop: <span class="code__string">'6px solid black',</span>
},
search: {
backgroundColor: <span class="code__string">'#d7ffff',</span>
borderRadius: <span class="code__string">'5px',</span>
borderBottom: <span class="code__string">'none',</span>
width: <span class="code__string">'95%',</span>
color: <span class="code__string">'black',</span>
},
},
multiselect: <span class="code__keyword">true,</span>
});
</pre>
</code>
</div>
<div class="example-select">
<h1 class="example-select_title">Function disabled</h1>
<input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
<label for="checkboxDisable" style="color: white">
You agree to the processing of data</label
>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
</div>
<button type="button" class="check-code" id="fifth">View code</button>
<code id="codeFifth">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span>
placeholder: <span class="code__string">'Choose a car',</span>
searchMode: <span class="code__keyword">true,</span>
items: [
<span class="code__string">'BMW',</span>
{
id: <span class="code__string">'213sade',</span>
title: <span class="code__string">'Opel',</span>
value: 1,
},
<span class="code__string">'Mersedes',</span>
<span class="code__string">'MAN',</span>
<span class="code__string">'Ferari',</span>
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
placeholder: {
maxWidth: <span class="code__string">'500px ',</span>
},
},
multiselect: <span class="code__keyword">true,</span>
});
</pre>
</code>
</div>
</div>
</body>
<script type="module" src="index.js"></script>
</html>

238
example/index.js
View File

@ -1,238 +0,0 @@
import { CGSelect } from '../src/cg-select';
import './example';
// ------------------------------Обычный селект--------------------
const dropdown = new CGSelect({
selector: '.cg-dropdown_one',
placeholder: 'Choose a car',
label: 'EXAMPLE',
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
});
dropdown.on('clear', function (e) {
console.log(`this state: ${e}`);
});
// ------------------------------NativeSelect-----------------------
const dropdownNativeSelect = new CGSelect({
selector: '.cg-dropdown_selectNative',
placeholder: 'Choose a car',
nativeSelectMode: true,
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
'Kamaz',
'Ural',
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
theme: 'dark',
});
// ------------------------------listDisplayMode--------------------
const dropdownlistDisplayMode = new CGSelect({
selector: '.cg-dropdown_listDisplayMode',
placeholder: 'Choose a car',
listDisplayMode: true,
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
});
// --------------------------------Категории--------------------------
const dropdown4 = new CGSelect({
selector: '.cg-dropdown_categories',
placeholder: 'Choose region',
searchMode: true,
items: [
{
category: 'Russia',
categoryItems: [
{
id: '28qwds',
title: 'Москва',
value: 0,
},
,
'Ростов-на-дону',
'Саратов',
'Волгоград',
'Донецк',
],
},
{
category: 'USA',
categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
},
{
category: 'France',
categoryItems: ['Paris'],
},
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
placeholder: {
maxWidth: '500px ',
},
},
multiselect: true,
multiselectTag: true,
});
//----------------управление с помощью кнопок----------------------------------
const dropdownBtn = new CGSelect({
selector: '.cg-dropdown_usedBtn',
placeholder: 'Choose a car',
searchMode: true,
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'max',
],
styles: {
head: {
width: '830px',
color: 'black',
backgroundColor: 'rgb(176 223 167)',
},
list: {
width: '824px',
color: 'black',
backgroundColor: 'rgb(176 223 167)',
},
caret: {
borderTop: '6px solid black',
},
search: {
backgroundColor: '#d7ffff',
borderRadius: '5px',
borderBottom: 'none',
width: '95%',
color: 'black',
},
},
multiselect: true,
});
const buttonOpen = document.querySelector('.button__open');
const buttonClose = document.querySelector('.button__close');
dropdownBtn.buttonControl(buttonOpen, 'open');
dropdownBtn.buttonControl(buttonClose, 'close');
//-------------------------Функция Disabled----------------------------------
const dropdownDisabled = new CGSelect({
selector: '.cg-dropdown_checkboxDisable',
placeholder: 'Choose a car',
searchMode: true,
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'max',
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
placeholder: {
maxWidth: '500px ',
},
},
multiselect: true,
});
dropdownDisabled.disabled(true);
let chbox = document.getElementById('checkboxDisable');
chbox.addEventListener('click', () => {
if (chbox.checked == true) {
dropdownDisabled.disabled(false);
} else {
dropdownDisabled.disabled(true);
}
});
// ------------------------------URL--------------------
const dropdown3 = new CGSelect({
selector: '.cg-dropdown_three',
placeholder: 'URL',
url: 'https://jsonplaceholder.typicode.com/todos',
searchMode: true,
darkTheme: false,
language: 'ru',
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
multiselect: true,
});

2
index.js
View File

@ -1,3 +1,3 @@
import { CGSelect } from './src/cg-select.ts'; import { CGSelect } from './src/cg-select';
export default CGSelect; export default CGSelect;

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "cg-select", "name": "cg-select",
"version": "0.2.32", "version": "0.2.5",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "cg-select", "name": "cg-select",
"version": "0.2.32", "version": "0.2.5",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@parcel/optimizer-css": "^2.8.0", "@parcel/optimizer-css": "^2.8.0",

8
package.json
View File

@ -1,6 +1,8 @@
{ {
"name": "cg-select", "name": "cg-select",
"version": "0.2.32", "version": "0.2.5",
"source": "index.js",
"main": "dist/index.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",
"author": { "author": {
"name": "CraftGroup", "name": "CraftGroup",
@ -8,8 +10,8 @@
}, },
"homepage": "https://cg-select.itguild.info", "homepage": "https://cg-select.itguild.info",
"scripts": { "scripts": {
"start": "parcel example/index.html -p 4500 --open ", "watch": "parcel watch",
"build": "parcel build example/index.js --no-cache", "build": "parcel build",
"deploy": "gh-pages -d dist", "deploy": "gh-pages -d dist",
"predeploy": "npm run build" "predeploy": "npm run build"
}, },

9
src/cg-select.ts
View File

@ -25,6 +25,7 @@ import { ILanguage } from './interfaces/language.interface';
import './main.scss'; import './main.scss';
import { changeTheme } from './components/theme/theme'; import { changeTheme } from './components/theme/theme';
import { CustomTheme } from 'components/theme/theme.interface';
/** /**
* @class Class Description ICgSelect * @class Class Description ICgSelect
@ -36,7 +37,7 @@ export class CGSelect implements ICgSelect {
selected?: string; selected?: string;
placeholder?: string; placeholder?: string;
items?: IItems[] | string[] | any; items?: IItems[] | string[] | any;
theme?: string; theme?: string | CustomTheme;
searchMode?: boolean; searchMode?: boolean;
closeOnSelect?: boolean; closeOnSelect?: boolean;
nativeSelectMode?: boolean; nativeSelectMode?: boolean;
@ -916,17 +917,19 @@ export class CGSelect implements ICgSelect {
* @param callback * @param callback
* @method on * @method on
*/ */
public on(state: string, callback: (state: any) => any) { public on(state: string, callback: (state: any, value?: string) => any) {
const options = this.element?.querySelectorAll('.list__item'); const options = this.element?.querySelectorAll('.list__item');
let value = '';
switch (state) { switch (state) {
case 'select': case 'select':
options?.forEach((option: Element) => { options?.forEach((option: Element) => {
option.addEventListener('click', () => { option.addEventListener('click', () => {
console.log('option:select', option.textContent); console.log('option:select', option.textContent);
value = option.textContent!;
callback(state, value);
}); });
}); });
callback(state);
break; break;
case 'close': case 'close':
this.element!.addEventListener('click', () => { this.element!.addEventListener('click', () => {

12
src/components/theme/theme.interface.ts Normal file
View File

@ -0,0 +1,12 @@
export interface CustomTheme {
name: string;
styles: {
head?: string;
list?: string;
placeholder?: string;
caret?: string;
search?: string;
chips?: string;
lable?: string;
};
}

59
src/components/theme/theme.ts
View File

@ -1,4 +1,6 @@
export function changeTheme(element: Element, theme: string) { import { CustomTheme } from './theme.interface';
export function changeTheme(element: Element, theme: string | CustomTheme) {
const select = element!.querySelector('.cg-select'); const select = element!.querySelector('.cg-select');
const caret = element!.querySelector('.caret'); const caret = element!.querySelector('.caret');
const list = element!.querySelector('ul.list'); const list = element!.querySelector('ul.list');
@ -13,32 +15,37 @@ export function changeTheme(element: Element, theme: string) {
elem.classList.remove('pathWhite'); elem.classList.remove('pathWhite');
}); });
switch (theme.toLowerCase()) { if (typeof theme === 'string') {
case 'dark': switch (theme) {
select!.classList.add('selectDark'); case 'dark':
list!.classList.add('listDark'); select!.classList.add('selectDark');
nativeSelect?.classList.add('listDark'); list!.classList.add('listDark');
path.forEach((elem) => { nativeSelect?.classList.add('listDark');
elem.classList.add('pathWhite'); path.forEach((elem) => {
}); elem.classList.add('pathWhite');
break; });
case 'white': break;
select!.classList.add('selectWhite'); case 'white':
caret!.classList.add('caretWhite'); select!.classList.add('selectWhite');
list!.classList.add('listWhite'); caret!.classList.add('caretWhite');
nativeSelect?.classList.add('listWhite'); list!.classList.add('listWhite');
path.forEach((elem) => { nativeSelect?.classList.add('listWhite');
elem.classList.add('pathBlack'); path.forEach((elem) => {
}); elem.classList.add('pathBlack');
});
if (search!) { if (search!) {
search!.classList.add('inputWhite'); search!.classList.add('inputWhite');
} }
break; break;
default: default:
select!.classList.add('classicSelect'); select!.classList.add('classicSelect');
list!.classList.add('classicList'); list!.classList.add('classicList');
break; break;
}
} else {
select!.classList.add(`${theme.styles.head}`);
list!.classList.add(`${theme.styles.list}`);
} }
} }

3
src/components/utils/utils.interface.ts
View File

@ -1,3 +1,4 @@
import { CustomTheme } from 'components/theme/theme.interface';
import { IItems } from 'interfaces/items.interface'; import { IItems } from 'interfaces/items.interface';
/** /**
@ -55,5 +56,5 @@ export interface ISelectedItems {
* An optional parameter that is responsible for enabling a light/dark theme by default, the dark theme is set. * An optional parameter that is responsible for enabling a light/dark theme by default, the dark theme is set.
* @type {boolean} * @type {boolean}
*/ */
theme?: string; theme?: string | CustomTheme;
} }

3
src/interfaces/cg-select.interface.ts
View File

@ -1,3 +1,4 @@
import { CustomTheme } from 'components/theme/theme.interface';
import { IItems } from './items.interface'; import { IItems } from './items.interface';
/** /**
@ -29,7 +30,7 @@ export interface ICgSelect {
* An optional parameter responsible for switching between different themes, the classic theme is set by default. * An optional parameter responsible for switching between different themes, the classic theme is set by default.
* @type {string} values: dark, white * @type {string} values: dark, white
*/ */
theme?: string; theme?: string | CustomTheme;
/** /**
* An optional parameter that adds a live search on the select elements. * An optional parameter that adds a live search on the select elements.
* @type {boolean} * @type {boolean}