Update 0.2.5
This commit is contained in:
MaxOvs19
commit
4df0bb1897
13
CHANGELOG.md
13
CHANGELOG.md
@ -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.
|
||||||
|
|||||||
@ -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
101
READMERU.md
Normal 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/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Вся документация по 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 |  |   |  |  |
|
||||||
|
| 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
|
||||||
@ -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
|
||||||
|
|||||||
@ -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")
|
|
||||||
})
|
|
||||||
@ -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
238
example/index.js
@ -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
2
index.js
@ -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
4
package-lock.json
generated
@ -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",
|
||||||
|
|||||||
@ -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"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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
12
src/components/theme/theme.interface.ts
Normal 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;
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -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,7 +15,8 @@ export function changeTheme(element: Element, theme: string) {
|
|||||||
elem.classList.remove('pathWhite');
|
elem.classList.remove('pathWhite');
|
||||||
});
|
});
|
||||||
|
|
||||||
switch (theme.toLowerCase()) {
|
if (typeof theme === 'string') {
|
||||||
|
switch (theme) {
|
||||||
case 'dark':
|
case 'dark':
|
||||||
select!.classList.add('selectDark');
|
select!.classList.add('selectDark');
|
||||||
list!.classList.add('listDark');
|
list!.classList.add('listDark');
|
||||||
@ -41,4 +44,8 @@ export function changeTheme(element: Element, theme: string) {
|
|||||||
list!.classList.add('classicList');
|
list!.classList.add('classicList');
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
select!.classList.add(`${theme.styles.head}`);
|
||||||
|
list!.classList.add(`${theme.styles.list}`);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user