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

Debuging and repare code

Browse Source
This commit is contained in:
Макс Овсяников
2023-01-17 20:21:43 +03:00
parent bf9dc01ad5
commit 8897e12464
10 changed files with 306 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
example/index.html
View File

@ -27,7 +27,7 @@
<nav>
<ul class="navlist">
<li><a href="">Home</a></li>
<li><a href="/documentation/index.html">Documentation</a></li>
<!-- <li><a href="/documentation/index.html">Documentation</a></li> -->
</ul>
</nav>
</header>
@ -356,5 +356,5 @@
</div>
</body>
<script type="module" src="index.js"></script>
<script type="module" src="indexTs.ts"></script>
<!-- <script type="module" src="indexTs.ts"></script> -->
</html>

99
example/index.js
View File

@ -1,34 +1,34 @@
import DropDown from '../index';
import { CGSelect } from '../src/cg-selectTS';
import './example';
// ------------------------------Обычный селект--------------------
// const dropdown = new DropDown({
// selector: '.cg-dropdown_one',
// placeholder: 'Выберите авто',
// lable: 'EXAMPLE',
// items: [
// 'BMW',
// {
// id: '213sade',
// title: 'Opel',
// value: 1,
// },
// 'Mersedes',
// 'MAN',
// 'Ferari',
// ],
// styles: {
// head: {
// width: '830px',
// },
// list: {
// width: '824px',
// },
// },
// });
const dropdown = new CGSelect({
selector: '.cg-dropdown_one',
placeholder: 'Выберите авто',
lable: 'EXAMPLE',
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
});
// ------------------------------NativeSelect-----------------------
const dropdownNativeSelect = new DropDown({
const dropdownNativeSelect = new CGSelect({
selector: '.cg-dropdown_selectNative',
placeholder: 'Выберите авто',
nativeSelectMode: true,
@ -43,7 +43,7 @@ const dropdownNativeSelect = new DropDown({
'MAN',
'Ferari',
'Kamaz',
'Ural'
'Ural',
],
styles: {
head: {
@ -56,7 +56,7 @@ const dropdownNativeSelect = new DropDown({
});
// ------------------------------listDisplayMode--------------------
const dropdownlistDisplayMode = new DropDown({
const dropdownlistDisplayMode = new CGSelect({
selector: '.cg-dropdown_listDisplayMode',
placeholder: 'Выберите авто',
listDisplayMode: true,
@ -81,26 +81,8 @@ const dropdownlistDisplayMode = new DropDown({
},
});
// ------------------------------URL--------------------
const dropdown3 = new DropDown({
selector: '.cg-dropdown_three',
placeholder: 'URL',
url: 'https://jsonplaceholder.typicode.com/users',
searchMode: true,
darkTheme: false,
language: 'ru',
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
});
// --------------------------------Категории--------------------------
const dropdown4 = new DropDown({
const dropdown4 = new CGSelect({
selector: '.cg-dropdown_categories',
placeholder: 'Выберите регион',
searchMode: true,
@ -145,7 +127,7 @@ const dropdown4 = new DropDown({
});
//----------------управление с помощью кнопок----------------------------------
const dropdownBtn = new DropDown({
const dropdownBtn = new CGSelect({
selector: '.cg-dropdown_usedBtn',
placeholder: 'Выберите авто',
searchMode: true,
@ -192,7 +174,7 @@ dropdownBtn.buttonControl(buttonOpen, 'open');
dropdownBtn.buttonControl(buttonClose, 'close');
//-------------------------Функция Disabled----------------------------------
const dropdownDisabled = new DropDown({
const dropdownDisabled = new CGSelect({
selector: '.cg-dropdown_checkboxDisable',
placeholder: 'Выберите авто',
searchMode: true,
@ -230,3 +212,22 @@ chbox.addEventListener('click', () => {
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,
});

268
example/indexTs.ts
View File

@ -1,36 +1,234 @@
import { CGSelect } from '../src/cg-selectTS';
// import { CGSelect } from '../src/cg-selectTS';
// import './example';
const dropdn = new CGSelect({
selector: '.cg-dropdown_one',
placeholder: 'Выберите авто',
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'max',
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
placeholder: {
maxWidth: '500px ',
},
},
// url
// listDisplayMode: true,
// searchMode: true,
// nativeSelectMode: true
// event: 'mouseenter',
// buttonControl
multiselect: true,
multiselectTag: true,
});
// // ------------------------------Обычный селект--------------------
// const dropdn = new CGSelect({
// selector: '.cg-dropdown_one',
// placeholder: 'Выберите авто',
// lable: 'EXAMPLE',
// items: [
// 'BMW',
// {
// id: '213sade',
// title: 'Opel',
// value: 1,
// },
// 'Mersedes',
// 'MAN',
// 'Ferari',
// ],
// styles: {
// head: {
// width: '830px',
// },
// list: {
// width: '824px',
// },
// },
// });
// // ------------------------------NativeSelect-----------------------
// const dropdownNativeSelect = new CGSelect({
// selector: '.cg-dropdown_selectNative',
// placeholder: 'Выберите авто',
// nativeSelectMode: true,
// items: [
// 'BMW',
// {
// id: '213sade',
// title: 'Opel',
// value: 1,
// },
// 'Mersedes',
// 'MAN',
// 'Ferari',
// 'Kamaz',
// 'Ural',
// ],
// styles: {
// head: {
// width: '830px',
// },
// list: {
// width: '824px',
// },
// },
// });
// // console.log();
// // ------------------------------listDisplayMode--------------------
// const dropdownlistDisplayMode = new CGSelect({
// selector: '.cg-dropdown_listDisplayMode',
// placeholder: 'Выберите авто',
// listDisplayMode: true,
// items: [
// 'BMW',
// {
// id: '213sade',
// title: 'Opel',
// value: 1,
// },
// 'Mersedes',
// 'MAN',
// 'Ferari',
// ],
// styles: {
// head: {
// width: '830px',
// },
// list: {
// width: '824px',
// },
// },
// });
// // ------------------------------URL--------------------
// const dropdown3 = new CGSelect({
// selector: '.cg-dropdown_three',
// placeholder: 'URL',
// url: 'https://jsonplaceholder.typicode.com/users',
// searchMode: true,
// darkTheme: false,
// language: 'ru',
// styles: {
// head: {
// width: '830px',
// },
// list: {
// width: '824px',
// },
// },
// });
// // --------------------------------Категории--------------------------
// const dropdown4 = new CGSelect({
// selector: '.cg-dropdown_categories',
// placeholder: 'Выберите регион',
// 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: 'Выберите авто',
// 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: 'Выберите авто',
// 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') as HTMLInputElement;
// chbox!.addEventListener('click', () => {
// if (chbox!.checked == true) {
// dropdownDisabled.disabled(false);
// } else {
// dropdownDisabled.disabled(true);
// }
// });