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', () => {