MaxOvs19/Example-CG-SELECT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed bugs

Browse Source
This commit is contained in:
MaxOvs19 2023-03-02 19:45:03 +03:00
parent 67bd0cf7f2
commit 5fc17c7c2d
4 changed files with 65 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/index.html
View File

@ -43,7 +43,7 @@
</ul> </ul>
<a href="index.html" class="title">Home</a> <a href="index.html" class="title">Home</a>
<a href="/index.html" class="title" style="margin-left: 15px" <a href="/index.html" class="title" style="margin-left: 15px"
>Go to CGSelect</a >Example</a
> >
</div> </div>
<div class="table-cell" id="tsd-widgets"> <div class="table-cell" id="tsd-widgets">

23
example.scss
View File

@ -1,5 +1,5 @@
// @import '/src/main.scss'; // @import '/src/main.scss';
@import './src/constructor/constructor.scss'; @import "./src/constructor/constructor.scss";
* { * {
font-size: 14px; font-size: 14px;
@ -55,7 +55,7 @@
h1 { h1 {
font-size: 57px; font-size: 57px;
color: white; color: white;
font-family: 'Times New Roman', Times, serif; font-family: "Times New Roman", Times, serif;
margin: 40px 0 12px 0; margin: 40px 0 12px 0;
} }
@ -255,10 +255,29 @@ pre {
} }
} }
.stylesTheme {
width: 100% !important;
}
.example-select_title { .example-select_title {
font-size: 14px; font-size: 14px;
height: 40px; height: 40px;
} }
.type {
display: none;
}
.row {
flex-direction: column;
.col {
width: 100%;
}
}
pre {
overflow-x: auto !important;
}
} }
.version { .version {

4
index.html
View File

@ -250,7 +250,7 @@
<h5 style="margin: 20px 0 5px; text-align: center">Example:</h5> <h5 style="margin: 20px 0 5px; text-align: center">Example:</h5>
<div class="row"> <div class="row type">
<h6>For JS</h6> <h6>For JS</h6>
<h6>For TS</h6> <h6>For TS</h6>
</div> </div>
@ -291,7 +291,7 @@
</code> </code>
</div> </div>
<h6>CSS</h6> <h6>CSS</h6>
<code style="display: block; width: 44%"> <code style="display: block; width: 44%" class="stylesTheme">
<pre> <pre>
.headTestClass { .headTestClass {
background-color: <span class="code__string">#8297ff</span>; background-color: <span class="code__string">#8297ff</span>;

81
src/constructor/constructor.js
View File

@ -1,44 +1,45 @@
import CGSelect from 'cg-select'; import CGSelect from "cg-select";
const body = new CGSelect({ const body = new CGSelect({
selector: '.body', selector: ".body",
placeholder: 'Select element to style', placeholder: "Select element to style",
items: ['head', 'list', 'placeholder', 'caret', 'search'], items: ["head", "list", "placeholder", "caret", "search"],
}); });
let head = ''; let head = "";
let list = ''; let list = "";
let placeholder = ''; let placeholder = "";
let caret = ''; let caret = "";
let valueSelect = ''; let valueSelect = "";
let search = "";
const textarea = document.querySelector('#styles'); const textarea = document.querySelector("#styles");
const renderBtn = document.querySelector('.render'); const renderBtn = document.querySelector(".render");
body.on('select', (e, value) => { body.on("select", (e, value) => {
valueSelect = value; valueSelect = value;
textarea.value = ''; textarea.value = "";
textarea.removeAttribute('disabled'); textarea.removeAttribute("disabled");
getValueSelect(valueSelect); getValueSelect(valueSelect);
}); });
function getValueSelect(value) { function getValueSelect(value) {
textarea.onkeyup = function () { textarea.onkeyup = function () {
switch (value) { switch (value) {
case 'head': case "head":
// ввод стилей // ввод стилей
head = textarea.value; head = textarea.value;
break; break;
case 'list': case "list":
list = textarea.value; list = textarea.value;
break; break;
case 'placeholder': case "placeholder":
placeholder = textarea.value; placeholder = textarea.value;
break; break;
case 'caret': case "caret":
caret = textarea.value; caret = textarea.value;
break; break;
case 'search': case "search":
search = textarea.value; search = textarea.value;
break; break;
@ -48,36 +49,36 @@ function getValueSelect(value) {
}; };
} }
renderBtn.addEventListener('click', () => { renderBtn.addEventListener("click", () => {
const select = new CGSelect({ const select = new CGSelect({
selector: '.select', selector: ".select",
placeholder: 'Choose a car', placeholder: "Choose a car",
label: 'Exemple select',
items: [ items: [
'BMW', "BMW",
{ {
id: '213sade', id: "213sade",
title: 'Opel', title: "Opel",
value: 1, value: 1,
}, },
'Mersedes', "Mersedes",
'MAN', "MAN",
'Ferari', "Ferari",
], ],
searchMode: true, searchMode: true,
multiselect: true, multiselect: true,
multiselectTag: true, multiselectTag: true,
}); });
const drop = document.querySelector('.select'); const drop = document.querySelector(".select");
let headSelect = drop.querySelector('.cg-select'); let headSelect = drop.querySelector(".cg-select");
let listSelect = drop.querySelector('.list'); let listSelect = drop.querySelector(".list");
let placeholderSelect = drop.querySelector('.selected'); let placeholderSelect = drop.querySelector(".selected");
let caretSelect = drop.querySelector('.caret'); let caretSelect = drop.querySelector(".caret");
let searchSelect = drop.querySelector('.inputSearch'); let searchSelect = drop.querySelector(".inputSearch");
headSelect.setAttribute('style', head);
listSelect.setAttribute('style', list); headSelect.setAttribute("style", head);
placeholderSelect.setAttribute('style', placeholder); listSelect.setAttribute("style", list);
caretSelect.setAttribute('style', caret); placeholderSelect.setAttribute("style", placeholder);
searchSelect.setAttribute('style', search); caretSelect.setAttribute("style", caret);
searchSelect.setAttribute("style", search);
}); });