From b206334a8be04270c7af681515c3d59d091425ca Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Fri, 17 Feb 2023 16:03:37 +0300 Subject: [PATCH] Added constructor select(css) and tested his --- CHANGELOG.md | 2 + README.md | 2 +- READMERU.md | 2 +- docs/index.html | 2 +- example/index.html | 1 + example/src/constructor/constructor.js | 82 +++++++++++++------------- package-lock.json | 4 +- package.json | 2 +- 8 files changed, 49 insertions(+), 48 deletions(-) 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",