From fd8fc093d0c1db9a11dff39279c903a8ab56668d Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Tue, 14 Feb 2023 20:19:57 +0300 Subject: [PATCH 1/7] Added custom theme --- example/example.scss | 4 ++ example/index.js | 8 ++-- example/themeTest.ts | 9 ++++ src/cg-select.ts | 3 +- src/components/theme/theme.interface.ts | 12 +++++ src/components/theme/theme.ts | 59 ++++++++++++++----------- src/components/utils/utils.interface.ts | 3 +- src/interfaces/cg-select.interface.ts | 3 +- 8 files changed, 69 insertions(+), 32 deletions(-) create mode 100644 example/themeTest.ts create mode 100644 src/components/theme/theme.interface.ts diff --git a/example/example.scss b/example/example.scss index b1bd873..8255b19 100644 --- a/example/example.scss +++ b/example/example.scss @@ -5,6 +5,10 @@ font-family: Arial, Helvetica, sans-serif; } +.testClassRed { + background-color: #ff8282; +} + .body-example { background: #000000c4; } diff --git a/example/index.js b/example/index.js index c4a86d0..f178a7d 100644 --- a/example/index.js +++ b/example/index.js @@ -1,5 +1,6 @@ import { CGSelect } from '../src/cg-select'; import './example'; +import { newCustomTheme } from './themeTest'; // ------------------------------Обычный селект-------------------- const dropdown = new CGSelect({ @@ -25,11 +26,12 @@ const dropdown = new CGSelect({ width: '824px', }, }, + theme: newCustomTheme, }); -dropdown.on('clear', function (e) { - console.log(`this state: ${e}`); -}); +// dropdown.on('clear', function (e) { +// console.log(`this state: ${e}`); +// }); // ------------------------------NativeSelect----------------------- const dropdownNativeSelect = new CGSelect({ diff --git a/example/themeTest.ts b/example/themeTest.ts new file mode 100644 index 0000000..b5b0487 --- /dev/null +++ b/example/themeTest.ts @@ -0,0 +1,9 @@ +import { CustomTheme } from 'components/theme/theme.interface'; + +export const newCustomTheme: CustomTheme = { + name: 'test', + styles: { + head: 'testClassRed', + list: 'testClassRed', + }, +}; diff --git a/src/cg-select.ts b/src/cg-select.ts index d760654..02a09fc 100644 --- a/src/cg-select.ts +++ b/src/cg-select.ts @@ -25,6 +25,7 @@ import { ILanguage } from './interfaces/language.interface'; import './main.scss'; import { changeTheme } from './components/theme/theme'; +import { CustomTheme } from 'components/theme/theme.interface'; /** * @class Class Description ICgSelect @@ -36,7 +37,7 @@ export class CGSelect implements ICgSelect { selected?: string; placeholder?: string; items?: IItems[] | string[] | any; - theme?: string; + theme?: string | CustomTheme; searchMode?: boolean; closeOnSelect?: boolean; nativeSelectMode?: boolean; diff --git a/src/components/theme/theme.interface.ts b/src/components/theme/theme.interface.ts new file mode 100644 index 0000000..af4420d --- /dev/null +++ b/src/components/theme/theme.interface.ts @@ -0,0 +1,12 @@ +export interface CustomTheme { + name: string; + styles: { + head?: string; + list?: string; + placeholder?: string; + caret?: string; + search?: string; + chips?: string; + lable?: string; + }; +} diff --git a/src/components/theme/theme.ts b/src/components/theme/theme.ts index cf2e58b..571c70d 100644 --- a/src/components/theme/theme.ts +++ b/src/components/theme/theme.ts @@ -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 caret = element!.querySelector('.caret'); const list = element!.querySelector('ul.list'); @@ -13,32 +15,37 @@ export function changeTheme(element: Element, theme: string) { elem.classList.remove('pathWhite'); }); - switch (theme.toLowerCase()) { - case 'dark': - select!.classList.add('selectDark'); - list!.classList.add('listDark'); - nativeSelect?.classList.add('listDark'); - path.forEach((elem) => { - elem.classList.add('pathWhite'); - }); - break; - case 'white': - select!.classList.add('selectWhite'); - caret!.classList.add('caretWhite'); - list!.classList.add('listWhite'); - nativeSelect?.classList.add('listWhite'); - path.forEach((elem) => { - elem.classList.add('pathBlack'); - }); + if (typeof theme === 'string') { + switch (theme) { + case 'dark': + select!.classList.add('selectDark'); + list!.classList.add('listDark'); + nativeSelect?.classList.add('listDark'); + path.forEach((elem) => { + elem.classList.add('pathWhite'); + }); + break; + case 'white': + select!.classList.add('selectWhite'); + caret!.classList.add('caretWhite'); + list!.classList.add('listWhite'); + nativeSelect?.classList.add('listWhite'); + path.forEach((elem) => { + elem.classList.add('pathBlack'); + }); - if (search!) { - search!.classList.add('inputWhite'); - } - break; + if (search!) { + search!.classList.add('inputWhite'); + } + break; - default: - select!.classList.add('classicSelect'); - list!.classList.add('classicList'); - break; + default: + select!.classList.add('classicSelect'); + list!.classList.add('classicList'); + break; + } + } else { + select!.classList.add(`${theme.styles.head}`); + list!.classList.add(`${theme.styles.list}`); } } diff --git a/src/components/utils/utils.interface.ts b/src/components/utils/utils.interface.ts index 31ca536..d139979 100644 --- a/src/components/utils/utils.interface.ts +++ b/src/components/utils/utils.interface.ts @@ -1,3 +1,4 @@ +import { CustomTheme } from 'components/theme/theme.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. * @type {boolean} */ - theme?: string; + theme?: string | CustomTheme; } diff --git a/src/interfaces/cg-select.interface.ts b/src/interfaces/cg-select.interface.ts index 403b1a6..39a0f07 100644 --- a/src/interfaces/cg-select.interface.ts +++ b/src/interfaces/cg-select.interface.ts @@ -1,3 +1,4 @@ +import { CustomTheme } from 'components/theme/theme.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. * @type {string} values: dark, white */ - theme?: string; + theme?: string | CustomTheme; /** * An optional parameter that adds a live search on the select elements. * @type {boolean} From 2cd1920eb569c665faf0d09d7bf33e74ff4394a8 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Wed, 15 Feb 2023 19:49:17 +0300 Subject: [PATCH 2/7] Create block in decription themes --- example/example.js | 36 +++++++------- example/example.scss | 37 ++++++++++++++- example/index.html | 109 +++++++++++++++++++++++++++++++++++++++++++ example/index.js | 16 ++++++- example/themeTest.ts | 9 +++- 5 files changed, 183 insertions(+), 24 deletions(-) diff --git a/example/example.js b/example/example.js index f807677..2238b38 100644 --- a/example/example.js +++ b/example/example.js @@ -13,38 +13,36 @@ const codeFourth = document.getElementById('codeFourth'); const fifthBtn = document.getElementById('fifth'); const codeFifth = document.getElementById('codeFifth'); -const six = document.getElementById('six') +const six = document.getElementById('six'); const codeSix = document.getElementById('codeSix'); - -const Native = document.getElementById('Native') -const codeNative = document.getElementById('codeNative') - +const Native = document.getElementById('Native'); +const codeNative = document.getElementById('codeNative'); firstBtn.addEventListener('click', () => { - codeFirst.classList.toggle("active") -}) + codeFirst.classList.toggle('active'); +}); secondBtn.addEventListener('click', () => { - codeSecond.classList.toggle("active") -}) + codeSecond.classList.toggle('active'); +}); thirdBtn.addEventListener('click', () => { - codeThird.classList.toggle("active") -}) + codeThird.classList.toggle('active'); +}); fourthBtn.addEventListener('click', () => { - codeFourth.classList.toggle("active") -}) + codeFourth.classList.toggle('active'); +}); fifthBtn.addEventListener('click', () => { - codeFifth.classList.toggle("active") -}) + codeFifth.classList.toggle('active'); +}); six.addEventListener('click', () => { - codeSix.classList.toggle("active") -}) + codeSix.classList.toggle('active'); +}); Native.addEventListener('click', () => { - codeNative.classList.toggle("active") -}) \ No newline at end of file + codeNative.classList.toggle('active'); +}); diff --git a/example/example.scss b/example/example.scss index 8255b19..1a9c973 100644 --- a/example/example.scss +++ b/example/example.scss @@ -3,10 +3,12 @@ * { font-size: 14px; font-family: Arial, Helvetica, sans-serif; + text-align: justify; } -.testClassRed { +.testClass { background-color: #ff8282; + color: white; } .body-example { @@ -144,6 +146,39 @@ } } +.row { + display: flex; + justify-content: space-around; +} + +.description-theme { + color: white; + .col { + width: 54%; + } + + img { + border-radius: 15px; + } + + .createTheme { + display: flex; + flex-direction: column; + } + + h5 { + font-size: 18px; + margin: 0; + } + h6 { + font-size: 17px; + margin: 0; + } + p { + font-size: 16px; + } +} + code { display: none; } diff --git a/example/index.html b/example/index.html index b316ee7..b66e1ad 100644 --- a/example/index.html +++ b/example/index.html @@ -192,6 +192,115 @@ +
+

Setting up and adding a theme.

+ +
+
+
+
Default theme:
+

+ To change the theme of the select, you need to specify this parameter in the select + settings. The default theme is the classic theme, you can choose a white or dark + theme. +

+ + 
+                  const dropdown = new CGSelect({
+                    selector: '.cg-dropdown_one', 
+                    placeholder: 'Choose a car', 
+                    lable: 'EXAMPLE', 
+                    items: [
+                      ...
+                    ],
+                    theme:  'dark / white'
+                  });
+
+ +
+ +
+
Create custom theme:
+
+

+ To create your own theme, you need to create an object with the following fields. + In these fields you need to insert the previously created css class. After + creating the object, just pass it to the select settings. +

+ + 
+            interface CustomTheme {
+              name: 'string', 
+              styles: {
+                head?:  'string', 
+                list?: 'testClass', ,
+                placeholder?: 'string', ,
+                caret?: 'string', ,
+                search?: 'string', ,
+                chips?: 'string', ,
+                lable?: 'string', ,
+              },
+            });
+
+ +
+
+
+ +
Example:
+ +
+
For JS
+
For TS
+
+ +
+ + 
+        const newTheme = {
+          name: 'test', 
+          styles: {
+            head:  'testClass', 
+            list: 'testClass', ,
+            placeholder: 'testClass', ,
+            caret: 'testClass', ,
+            search: 'testClass', ,
+            chips: 'testClass', ,
+            lable: 'testClass', ,
+          },
+        });
+
+ + + + 
+        const newCustomTheme: CustomTheme  = {
+          name: 'test', 
+          styles: {
+            head:  'testClass', 
+            list: 'testClass', ,
+            placeholder: 'testClass', ,
+            caret: 'testClass', ,
+            search: 'testClass', ,
+            chips: 'testClass', ,
+            lable: 'testClass', ,
+          },
+        });
+
+ +
+
CSS
+ + 
+              .testClass {
+                background-color: #ff8282;
+                color: white;
+              }
+
+ +
+
+

Categories

diff --git a/example/index.js b/example/index.js index f178a7d..e5e7f59 100644 --- a/example/index.js +++ b/example/index.js @@ -1,6 +1,19 @@ import { CGSelect } from '../src/cg-select'; import './example'; -import { newCustomTheme } from './themeTest'; +// import { newCustomTheme } from './themeTest'; + +const newTheme = { + name: 'test', + styles: { + head: 'testClass', + list: 'testClass', + placeholder: 'testClass', + caret: 'testClass', + search: 'testClass', + chips: 'testClass', + lable: 'testClass', + }, +}; // ------------------------------Обычный селект-------------------- const dropdown = new CGSelect({ @@ -26,7 +39,6 @@ const dropdown = new CGSelect({ width: '824px', }, }, - theme: newCustomTheme, }); // dropdown.on('clear', function (e) { diff --git a/example/themeTest.ts b/example/themeTest.ts index b5b0487..04618e2 100644 --- a/example/themeTest.ts +++ b/example/themeTest.ts @@ -3,7 +3,12 @@ import { CustomTheme } from 'components/theme/theme.interface'; export const newCustomTheme: CustomTheme = { name: 'test', styles: { - head: 'testClassRed', - list: 'testClassRed', + head: 'testClass', + list: 'testClass', + placeholder: 'testClass', + caret: 'testClass', + search: 'testClass', + chips: 'testClass', + lable: 'testClass', }, }; From a3c433d328467d2265a77e2e1e8587b1174a419d Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 16 Feb 2023 17:32:08 +0300 Subject: [PATCH 3/7] Added constructor.js --- example/example.scss | 11 +++- example/index.html | 69 ++++++++++++++++++------ example/index.js | 41 +++++++++----- example/src/constructor/constructor.js | 68 +++++++++++++++++++++++ example/src/constructor/constructor.scss | 10 ++++ example/{ => src}/example.js | 0 example/{ => src}/themeTest.ts | 7 +-- src/cg-select.ts | 6 ++- 8 files changed, 173 insertions(+), 39 deletions(-) create mode 100644 example/src/constructor/constructor.js create mode 100644 example/src/constructor/constructor.scss rename example/{ => src}/example.js (100%) rename example/{ => src}/themeTest.ts (52%) diff --git a/example/example.scss b/example/example.scss index 1a9c973..a6ac44a 100644 --- a/example/example.scss +++ b/example/example.scss @@ -1,4 +1,5 @@ @import '/src/main.scss'; +@import './src/constructor/constructor.scss'; * { font-size: 14px; @@ -7,7 +8,13 @@ } .testClass { - background-color: #ff8282; + background-color: #8297ff; + color: white; +} + +.listTest { + background-color: #8297ff; + border: 1px solid black; color: white; } @@ -118,6 +125,7 @@ } &_submit { + text-align: center; width: 200px; height: 35px; border-radius: 10px; @@ -219,6 +227,7 @@ pre { } .check-code { + text-align: center; width: 200px; height: 35px; cursor: pointer; diff --git a/example/index.html b/example/index.html index b66e1ad..76d573d 100644 --- a/example/index.html +++ b/example/index.html @@ -260,13 +260,13 @@ const newTheme = { name: 'test', styles: { - head: 'testClass', - list: 'testClass', , - placeholder: 'testClass', , - caret: 'testClass', , - search: 'testClass', , - chips: 'testClass', , - lable: 'testClass', , + head: 'headTestClass', + list: 'listTestClass', , + placeholder: 'placeholderTestClass', , + caret: 'caretTestClass', , + search: 'searchTestClass', , + chips: 'chipsTestClass', , + lable: 'lableTestClass', , }, }); @@ -277,13 +277,13 @@ const newCustomTheme: CustomTheme = { name: 'test', styles: { - head: 'testClass', - list: 'testClass', , - placeholder: 'testClass', , - caret: 'testClass', , - search: 'testClass', , - chips: 'testClass', , - lable: 'testClass', , + head: 'headTestClass', + list: 'listTestClass', , + placeholder: 'placeholderTestClass', , + caret: 'caretTestClass', , + search: 'searchTestClass', , + chips: 'chipsTestClass', , + lable: 'lableTestClass', , }, }); @@ -292,12 +292,49 @@
CSS
-              .testClass {
-                background-color: #ff8282;
+              .headTestClass {
+                background-color: #8297ff;
+                color: white;
+              }
+
+              .listTestClass {
+                background-color: #8297ff;
+                border: 1px solid black;
                 color: white;
               }
+ +
Example custom theme in CG-Select
+

+ See an example of a select on + codesandbox.io +

+
+ +
+
+ + +
+

Select constructor

+
+ + +
+
+
diff --git a/example/index.js b/example/index.js index e5e7f59..7ace743 100644 --- a/example/index.js +++ b/example/index.js @@ -1,19 +1,8 @@ import { CGSelect } from '../src/cg-select'; -import './example'; -// import { newCustomTheme } from './themeTest'; +import { newCustomTheme } from './src/themeTest'; -const newTheme = { - name: 'test', - styles: { - head: 'testClass', - list: 'testClass', - placeholder: 'testClass', - caret: 'testClass', - search: 'testClass', - chips: 'testClass', - lable: 'testClass', - }, -}; +import './src/example'; +import './src/constructor/constructor'; // ------------------------------Обычный селект-------------------- const dropdown = new CGSelect({ @@ -45,6 +34,30 @@ const dropdown = new CGSelect({ // console.log(`this state: ${e}`); // }); +const droptheme = new CGSelect({ + selector: '.cg-dropdown_theme', + placeholder: 'Choose a car', + items: [ + 'BMW', + { + id: '213sade', + title: 'Opel', + value: 1, + }, + 'Mersedes', + 'MAN', + 'Ferari', + ], + styles: { + head: { + width: '830px', + }, + list: { + width: '824px', + }, + }, + theme: newCustomTheme, +}); // ------------------------------NativeSelect----------------------- const dropdownNativeSelect = new CGSelect({ selector: '.cg-dropdown_selectNative', diff --git a/example/src/constructor/constructor.js b/example/src/constructor/constructor.js new file mode 100644 index 0000000..28c2d61 --- /dev/null +++ b/example/src/constructor/constructor.js @@ -0,0 +1,68 @@ +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'], +}); + +const select = new CGSelect({ + selector: '.select', + placeholder: 'Choose a car', + items: [ + 'BMW', + { + id: '213sade', + title: 'Opel', + value: 1, + }, + 'Mersedes', + 'MAN', + 'Ferari', + ], + styles: { + head: {}, + placeholder: {}, + list: {}, + caret: {}, + chips: {}, + search: {}, + lable: {}, + }, +}); + +let valueSelect = ''; + +body.on('select', (e, value) => { + valueSelect = value; + getValueSelect(valueSelect); +}); + +function getValueSelect(value) { + switch (value) { + case 'head': + console.log('lol'); + break; + case 'list': + break; + case 'placeholder': + break; + case 'caret': + break; + case 'search': + break; + case 'chips': + break; + case 'lable': + break; + + default: + break; + } +} + +let textarea = document.querySelector('#styles'); + +textarea.onkeyup = function () { + console.log(textarea.value); +}; diff --git a/example/src/constructor/constructor.scss b/example/src/constructor/constructor.scss new file mode 100644 index 0000000..fa9c566 --- /dev/null +++ b/example/src/constructor/constructor.scss @@ -0,0 +1,10 @@ +.textareaStyle { + resize: none; + border-radius: 5px; + margin-left: 53px; +} + +.constructor { + display: flex; + align-items: center; +} diff --git a/example/example.js b/example/src/example.js similarity index 100% rename from example/example.js rename to example/src/example.js diff --git a/example/themeTest.ts b/example/src/themeTest.ts similarity index 52% rename from example/themeTest.ts rename to example/src/themeTest.ts index 04618e2..ae66df1 100644 --- a/example/themeTest.ts +++ b/example/src/themeTest.ts @@ -4,11 +4,6 @@ export const newCustomTheme: CustomTheme = { name: 'test', styles: { head: 'testClass', - list: 'testClass', - placeholder: 'testClass', - caret: 'testClass', - search: 'testClass', - chips: 'testClass', - lable: 'testClass', + list: 'listTest', }, }; diff --git a/src/cg-select.ts b/src/cg-select.ts index 02a09fc..40a94e0 100644 --- a/src/cg-select.ts +++ b/src/cg-select.ts @@ -917,17 +917,19 @@ export class CGSelect implements ICgSelect { * @param callback * @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'); + let value = ''; switch (state) { case 'select': options?.forEach((option: Element) => { option.addEventListener('click', () => { console.log('option:select', option.textContent); + value = option.textContent!; + callback(state, value); }); }); - callback(state); break; case 'close': this.element!.addEventListener('click', () => { From a6b6f020ddd6da5ea74f5bfd526110b8739590cc Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 16 Feb 2023 19:02:53 +0300 Subject: [PATCH 4/7] Test in textArea --- example/index.html | 2 + example/src/constructor/constructor.js | 79 ++++++++++++++++---------- 2 files changed, 51 insertions(+), 30 deletions(-) diff --git a/example/index.html b/example/index.html index 76d573d..1912f3e 100644 --- a/example/index.html +++ b/example/index.html @@ -332,6 +332,8 @@ class="textareaStyle" placeholder="Enter CSS properties" > + +
diff --git a/example/src/constructor/constructor.js b/example/src/constructor/constructor.js index 28c2d61..62d4c2d 100644 --- a/example/src/constructor/constructor.js +++ b/example/src/constructor/constructor.js @@ -6,33 +6,18 @@ const body = new CGSelect({ items: ['head', 'list', 'placeholder', 'caret', 'search', 'chips', 'lable'], }); -const select = new CGSelect({ - selector: '.select', - placeholder: 'Choose a car', - items: [ - 'BMW', - { - id: '213sade', - title: 'Opel', - value: 1, - }, - 'Mersedes', - 'MAN', - 'Ferari', - ], - styles: { - head: {}, - placeholder: {}, - list: {}, - caret: {}, - chips: {}, - search: {}, - lable: {}, - }, -}); - +let head = ''; +let list = ''; +let placeholder = ''; +let caret = ''; +let chips = ''; +let lable = ''; let valueSelect = ''; +const textarea = document.querySelector('#styles'); +const renderBtn = document.querySelector('.render'); +const saveStyleBtn = document.querySelector('.saveStyle'); + body.on('select', (e, value) => { valueSelect = value; getValueSelect(valueSelect); @@ -41,7 +26,12 @@ body.on('select', (e, value) => { function getValueSelect(value) { switch (value) { case 'head': - console.log('lol'); + // ввод стилей + // background: red; + textarea.onkeyup = function () { + console.log(textarea.value); + head = textarea.value; + }; break; case 'list': break; @@ -61,8 +51,37 @@ function getValueSelect(value) { } } -let textarea = document.querySelector('#styles'); +// Рендер селекта со стилями +renderBtn.addEventListener('click', () => { + // debugger; + // let HEAD = { + // key[0]: key[1] + // }; -textarea.onkeyup = function () { - console.log(textarea.value); -}; + const select = new CGSelect({ + selector: '.select', + placeholder: 'Choose a car', + items: [ + 'BMW', + { + id: '213sade', + title: 'Opel', + value: 1, + }, + 'Mersedes', + 'MAN', + 'Ferari', + ], + styles: { + head: { + background: head, + }, + placeholder: {}, + list: {}, + caret: {}, + chips: {}, + search: {}, + lable: {}, + }, + }); +}); From b206334a8be04270c7af681515c3d59d091425ca Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Fri, 17 Feb 2023 16:03:37 +0300 Subject: [PATCH 5/7] 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", From 93fec79c1edd00cc08a1900d7380c55aa2e859ef Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Fri, 17 Feb 2023 19:56:41 +0300 Subject: [PATCH 6/7] Constructor in working. Added description in style builder --- example/index.html | 14 +++++++++++++- example/src/constructor/constructor.js | 9 +++------ 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/example/index.html b/example/index.html index 890d4b7..a977315 100644 --- a/example/index.html +++ b/example/index.html @@ -322,6 +322,19 @@

Select constructor

+
+
Select Style Builder:
+

+ This is a constructor for styling a select online without downloading. For it to work, + you need to: +

    +
  1. Select a part of the select for customization.
    2. +
  2. Enter styles in the text field in the form "color: red;".
    3. +
  3. Click on the render button.
    4. +
+ +

+
-
diff --git a/example/src/constructor/constructor.js b/example/src/constructor/constructor.js index 7aaafe9..097a98a 100644 --- a/example/src/constructor/constructor.js +++ b/example/src/constructor/constructor.js @@ -3,19 +3,17 @@ import { CGSelect } from '../../../src/cg-select'; const body = new CGSelect({ selector: '.body', placeholder: 'Select element to style', - items: ['head', 'list', 'placeholder', 'caret', 'search', 'chips'], + items: ['head', 'list', 'placeholder', 'caret', 'search'], }); let head = ''; let list = ''; let placeholder = ''; let caret = ''; -let chips = ''; let valueSelect = ''; const textarea = document.querySelector('#styles'); const renderBtn = document.querySelector('.render'); -const saveStyleBtn = document.querySelector('.saveStyle'); body.on('select', (e, value) => { valueSelect = value; @@ -43,9 +41,6 @@ function getValueSelect(value) { case 'search': search = textarea.value; break; - case 'chips': - chips = textarea.value; - break; default: break; @@ -69,6 +64,8 @@ renderBtn.addEventListener('click', () => { 'Ferari', ], searchMode: true, + multiselect: true, + multiselectTag: true, }); const drop = document.querySelector('.select'); From 682332645e046e1feedc9015933d2154bfc3c076 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Mon, 20 Feb 2023 14:26:47 +0300 Subject: [PATCH 7/7] Finish update 0.2. --- CHANGELOG.md | 7 ++- README.md | 2 +- READMERU.md | 2 +- docs/index.html | 2 +- example/example.scss | 10 ++++ example/index.html | 60 +++++++++++++----------- example/src/constructor/constructor.js | 1 + example/src/constructor/constructor.scss | 8 +++- package-lock.json | 4 +- package.json | 2 +- 10 files changed, 63 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 92b3300..b7cb891 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -47,4 +47,9 @@ Tested in JS and React. Errors in work in React applications are revealed. - Documentation navigation update. - Added icon for example page and documentation. -##### 00.02.2023 - update 0.2.34 +### 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. diff --git a/README.md b/README.md index c7bf625..7b9e6c0 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CG-SELECT -## version ~ 0.2.34 +## version ~ 0.2.4 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 09ded38..96a7874 100644 --- a/READMERU.md +++ b/READMERU.md @@ -1,6 +1,6 @@ # CG-SELECT -## version ~ 0.2.34 +## version ~ 0.2.4 Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select. Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое. diff --git a/docs/index.html b/docs/index.html index 9335686..5a8e523 100644 --- a/docs/index.html +++ b/docs/index.html @@ -62,7 +62,7 @@ -

version ~ 0.2.34

+

version ~ 0.2.4

This component allows you to create a custom select. It offers more flexible diff --git a/example/example.scss b/example/example.scss index a6ac44a..a4e07c5 100644 --- a/example/example.scss +++ b/example/example.scss @@ -43,6 +43,7 @@ } .header { + position: relative; width: 100%; border-radius: 5px; display: flex; @@ -161,6 +162,7 @@ .description-theme { color: white; + .col { width: 54%; } @@ -258,3 +260,11 @@ pre { height: 40px; } } + +.version { + position: absolute; + color: white; + font-size: 10px; + right: 20px; + bottom: 0px; +} diff --git a/example/index.html b/example/index.html index a977315..8863a25 100644 --- a/example/index.html +++ b/example/index.html @@ -31,6 +31,7 @@

  • Documentation
    • +

    v. 0.2.4

    @@ -193,7 +194,7 @@
    -

    Setting up and adding a theme.

    +

    Setting up and adding a theme

    @@ -322,33 +323,38 @@

    Select constructor

    -
    -
    Select Style Builder:
    -

    - This is a constructor for styling a select online without downloading. For it to work, - you need to: -

      -
    1. Select a part of the select for customization.
      2. -
    2. Enter styles in the text field in the form "color: red;".
      3. -
    3. Click on the render button.
      4. -
    - -

    +
    +
    +
    Select Style Builder:
    +

    + This is a constructor for styling a select online without downloading. For it to work, + you need to: +

      +
    1. Select a part of the select for customization.
      2. +
    2. Enter styles in the text field in the form "color: red;".
      3. +
    3. Click on the render button.
      4. +
    +

    +
    +
    +
    + + + +
    + +
    +
    -
    - - - -
    -
    +
    diff --git a/example/src/constructor/constructor.js b/example/src/constructor/constructor.js index 097a98a..4df819e 100644 --- a/example/src/constructor/constructor.js +++ b/example/src/constructor/constructor.js @@ -52,6 +52,7 @@ renderBtn.addEventListener('click', () => { const select = new CGSelect({ selector: '.select', placeholder: 'Choose a car', + label: 'Exemple select', items: [ 'BMW', { diff --git a/example/src/constructor/constructor.scss b/example/src/constructor/constructor.scss index fa9c566..0739c16 100644 --- a/example/src/constructor/constructor.scss +++ b/example/src/constructor/constructor.scss @@ -1,10 +1,16 @@ .textareaStyle { resize: none; border-radius: 5px; - margin-left: 53px; + margin: 15px; } .constructor { display: flex; align-items: center; + flex-direction: column; +} + +.liList { + margin-bottom: 5px; + font-size: 17px; } diff --git a/package-lock.json b/package-lock.json index 05304cf..0807227 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "cg-select", - "version": "0.2.34", + "version": "0.2.4", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "cg-select", - "version": "0.2.34", + "version": "0.2.4", "license": "ISC", "dependencies": { "@parcel/optimizer-css": "^2.8.0", diff --git a/package.json b/package.json index a894f7c..d7e3434 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cg-select", - "version": "0.2.34", + "version": "0.2.4", "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling", "author": { "name": "CraftGroup",