Inishial example page

src/constructor/constructor.js

@@ -0,0 +1,83 @@
+import  CGSelect  from 'cg-select';
+
+const body = new CGSelect({
+  selector: '.body',
+  placeholder: 'Select element to style',
+  items: ['head', 'list', 'placeholder', 'caret', 'search'],
+});
+
+let head = '';
+let list = '';
+let placeholder = '';
+let caret = '';
+let valueSelect = '';
+
+const textarea = document.querySelector('#styles');
+const renderBtn = document.querySelector('.render');
+
+body.on('select', (e, value) => {
+  valueSelect = value;
+  textarea.value = '';
+  textarea.removeAttribute('disabled');
+  getValueSelect(valueSelect);
+});
+
+function getValueSelect(value) {
+  textarea.onkeyup = function () {
+    switch (value) {
+      case 'head':
+        // ввод стилей
+        head = textarea.value;
+        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;
+
+      default:
+        break;
+    }
+  };
+}
+
+renderBtn.addEventListener('click', () => {
+  const select = new CGSelect({
+    selector: '.select',
+    placeholder: 'Choose a car',
+    label: 'Exemple select',
+    items: [
+      'BMW',
+      {
+        id: '213sade',
+        title: 'Opel',
+        value: 1,
+      },
+      'Mersedes',
+      'MAN',
+      'Ferari',
+    ],
+    searchMode: true,
+    multiselect: true,
+    multiselectTag: 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);
+});

src/constructor/constructor.scss

@@ -0,0 +1,16 @@
+.textareaStyle {
+  resize: none;
+  border-radius: 5px;
+  margin: 15px;
+}
+
+.constructor {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.liList {
+  margin-bottom: 5px;
+  font-size: 17px;
+}

src/example.js

@@ -0,0 +1,48 @@
+const firstBtn = document.getElementById('first');
+const codeFirst = document.getElementById('codeFirst');
+
+const secondBtn = document.getElementById('second');
+const codeSecond = document.getElementById('codeSecond');
+
+const thirdBtn = document.getElementById('third');
+const codeThird = document.getElementById('codeThird');
+
+const fourthBtn = document.getElementById('fourth');
+const codeFourth = document.getElementById('codeFourth');
+
+const fifthBtn = document.getElementById('fifth');
+const codeFifth = document.getElementById('codeFifth');
+
+const six = document.getElementById('six');
+const codeSix = document.getElementById('codeSix');
+
+const Native = document.getElementById('Native');
+const codeNative = document.getElementById('codeNative');
+
+firstBtn.addEventListener('click', () => {
+  codeFirst.classList.toggle('active');
+});
+
+secondBtn.addEventListener('click', () => {
+  codeSecond.classList.toggle('active');
+});
+
+thirdBtn.addEventListener('click', () => {
+  codeThird.classList.toggle('active');
+});
+
+fourthBtn.addEventListener('click', () => {
+  codeFourth.classList.toggle('active');
+});
+
+fifthBtn.addEventListener('click', () => {
+  codeFifth.classList.toggle('active');
+});
+
+six.addEventListener('click', () => {
+  codeSix.classList.toggle('active');
+});
+
+Native.addEventListener('click', () => {
+  codeNative.classList.toggle('active');
+});

src/themeTest.ts

@@ -0,0 +1,9 @@
+// import { CustomTheme } from 'components/theme/theme.interface';
+
+// export const newCustomTheme: CustomTheme = {
+//   name: 'test',
+//   styles: {
+//     head: 'testClass',
+//     list: 'listTest',
+//   },
+// };