diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6675a8f..92b3300 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -46,3 +46,5 @@ Tested in JS and React. Errors in work in React applications are revealed.
- Fixing bugs related to the cleanup of the select.
- Documentation navigation update.
- Added icon for example page and documentation.
+
+##### 00.02.2023 - update 0.2.34
diff --git a/README.md b/README.md
index 0886619..c7bf625 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# CG-SELECT
-## version ~ 0.2.33
+## version ~ 0.2.34
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.
diff --git a/READMERU.md b/READMERU.md
index a361de9..09ded38 100644
--- a/READMERU.md
+++ b/READMERU.md
@@ -1,6 +1,6 @@
# CG-SELECT
-## version ~ 0.2.33
+## version ~ 0.2.34
Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select.
Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое.
diff --git a/docs/index.html b/docs/index.html
index 99b1f79..9335686 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -62,7 +62,7 @@
- version ~ 0.2.33
+ version ~ 0.2.34
This component allows you to create a custom select. It offers more flexible diff --git a/example/index.html b/example/index.html index 1912f3e..890d4b7 100644 --- a/example/index.html +++ b/example/index.html @@ -331,6 +331,7 @@ rows="5" class="textareaStyle" placeholder="Enter CSS properties" + disabled="disabled" > diff --git a/example/src/constructor/constructor.js b/example/src/constructor/constructor.js index 62d4c2d..7aaafe9 100644 --- a/example/src/constructor/constructor.js +++ b/example/src/constructor/constructor.js @@ -3,7 +3,7 @@ import { CGSelect } from '../../../src/cg-select'; const body = new CGSelect({ selector: '.body', placeholder: 'Select element to style', - items: ['head', 'list', 'placeholder', 'caret', 'search', 'chips', 'lable'], + items: ['head', 'list', 'placeholder', 'caret', 'search', 'chips'], }); let head = ''; @@ -11,7 +11,6 @@ let list = ''; let placeholder = ''; let caret = ''; let chips = ''; -let lable = ''; let valueSelect = ''; const textarea = document.querySelector('#styles'); @@ -20,44 +19,41 @@ const saveStyleBtn = document.querySelector('.saveStyle'); body.on('select', (e, value) => { valueSelect = value; + textarea.value = ''; + textarea.removeAttribute('disabled'); getValueSelect(valueSelect); }); function getValueSelect(value) { - switch (value) { - case 'head': - // ввод стилей - // background: red; - textarea.onkeyup = function () { - console.log(textarea.value); + textarea.onkeyup = function () { + switch (value) { + case 'head': + // ввод стилей head = textarea.value; - }; - break; - case 'list': - break; - case 'placeholder': - break; - case 'caret': - break; - case 'search': - break; - case 'chips': - break; - case 'lable': - break; + break; + case 'list': + list = textarea.value; + break; + case 'placeholder': + placeholder = textarea.value; + break; + case 'caret': + caret = textarea.value; + break; + case 'search': + search = textarea.value; + break; + case 'chips': + chips = textarea.value; + break; - default: - break; - } + default: + break; + } + }; } -// Рендер селекта со стилями renderBtn.addEventListener('click', () => { - // debugger; - // let HEAD = { - // key[0]: key[1] - // }; - const select = new CGSelect({ selector: '.select', placeholder: 'Choose a car', @@ -72,16 +68,18 @@ renderBtn.addEventListener('click', () => { 'MAN', 'Ferari', ], - styles: { - head: { - background: head, - }, - placeholder: {}, - list: {}, - caret: {}, - chips: {}, - search: {}, - lable: {}, - }, + searchMode: true, }); + + const drop = document.querySelector('.select'); + let headSelect = drop.querySelector('.cg-select'); + let listSelect = drop.querySelector('.list'); + let placeholderSelect = drop.querySelector('.selected'); + let caretSelect = drop.querySelector('.caret'); + let searchSelect = drop.querySelector('.inputSearch'); + headSelect.setAttribute('style', head); + listSelect.setAttribute('style', list); + placeholderSelect.setAttribute('style', placeholder); + caretSelect.setAttribute('style', caret); + searchSelect.setAttribute('style', search); }); diff --git a/package-lock.json b/package-lock.json index 0399bd1..05304cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "cg-select", - "version": "0.2.33", + "version": "0.2.34", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "cg-select", - "version": "0.2.33", + "version": "0.2.34", "license": "ISC", "dependencies": { "@parcel/optimizer-css": "^2.8.0", diff --git a/package.json b/package.json index 09cdfdd..a894f7c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cg-select", - "version": "0.2.33", + "version": "0.2.34", "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling", "author": { "name": "CraftGroup",