Merge pull request #37 from apuc/custom-themes

Update 0.2.4
2023-02-20 14:28:10 +03:00 · 2023-02-20 14:28:10 +03:00 · 3bd587b846
commit 3bd587b846
parent 4a2e8c9b17 682332645e
18 changed files with 449 additions and 60 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -46,3 +46,10 @@ 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.
+
+### 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.
--- a/README.md
+++ b/README.md
@ -1,6 +1,6 @@
 # CG-SELECT

-## version ~ 0.2.33
+## 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.
--- a/READMERU.md
+++ b/READMERU.md
@ -1,6 +1,6 @@
 # CG-SELECT

-## version ~ 0.2.33
+## version ~ 0.2.4

 Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select.
 Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое.
--- a/docs/index.html
+++ b/docs/index.html
@ -62,7 +62,7 @@
          </a>

          <a href="#version--0231" id="version--0231" style="color: inherit; text-decoration: none">
-            <h2>version ~ 0.2.33</h2>
+            <h2>version ~ 0.2.4</h2>
          </a>
          <p>
            This component allows you to create a custom select. It offers more flexible
--- a/example/example.scss
+++ b/example/example.scss
@ -1,8 +1,21 @@
@import '/src/main.scss';
+@import './src/constructor/constructor.scss';

 * {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
+  text-align: justify;
+}
+
+.testClass {
+  background-color: #8297ff;
+  color: white;
+}
+
+.listTest {
+  background-color: #8297ff;
+  border: 1px solid black;
+  color: white;
 }

 .body-example {
@ -30,6 +43,7 @@
 }

 .header {
+  position: relative;
  width: 100%;
  border-radius: 5px;
  display: flex;
@ -112,6 +126,7 @@
  }

  &_submit {
+    text-align: center;
    width: 200px;
    height: 35px;
    border-radius: 10px;
@ -140,6 +155,40 @@
  }
 }

+.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;
 }
@ -180,6 +229,7 @@ pre {
 }

 .check-code {
+  text-align: center;
  width: 200px;
  height: 35px;
  cursor: pointer;
@ -210,3 +260,11 @@ pre {
    height: 40px;
  }
 }
+
+.version {
+  position: absolute;
+  color: white;
+  font-size: 10px;
+  right: 20px;
+  bottom: 0px;
+}
--- a/example/index.html
+++ b/example/index.html
@ -31,6 +31,7 @@
            <li><a href="/docs/index.html">Documentation</a></li>
          </ul>
        </nav>
+        <p class="version">v. 0.2.4</p>
      </header>
    </div>

@ -192,6 +193,172 @@
        </code>
      </div>

+      <div class="example-select description-theme">
+        <h1 class="example-select_title">Setting up and adding a theme</h1>
+
+        <div class="layout-select">
+          <div class="row">
+            <div class="col">
+              <h5>Default theme:</h5>
+              <p style="margin-right: 50px">
+                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.
+              </p>
+              <code style="display: block; margin-top: 32px">
+                <pre>
+                  <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">CGSelect</span>({
+                    selector: <span class="code__string">'.cg-dropdown_one',</span> 
+                    placeholder: <span class="code__string">'Choose a car',</span> 
+                    lable: <span class="code__string">'EXAMPLE',</span> 
+                    items: [
+                      ...
+                    ],
+                    <span class="code__keyword">theme</span>:  <span class="code__string">'dark / white'</span>
+                  });
+                </pre>
+              </code>
+            </div>
+
+            <div class="col">
+              <h5>Create custom theme:</h5>
+              <div class="createTheme">
+                <p style="margin-right: 25px">
+                  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.
+                </p>
+                <code style="display: block">
+                  <pre>
+            <span class="code__keyword">interface</span> <span class="code__var">CustomTheme</span> {
+              name: <span class="code__class">'string',</span> 
+              styles: {
+                head?:  <span class="code__class">'string',</span> 
+                list?: <span class="code__class">'testClass',</span> ,
+                placeholder?: <span class="code__class">'string',</span> ,
+                caret?: <span class="code__class">'string',</span> ,
+                search?: <span class="code__class">'string',</span> ,
+                chips?: <span class="code__class">'string',</span> ,
+                lable?: <span class="code__class">'string',</span> ,
+              },
+            });
+                  </pre>
+                </code>
+              </div>
+            </div>
+          </div>
+
+          <h5 style="margin: 20px 0 5px; text-align: center">Example:</h5>
+
+          <div class="row">
+            <h6>For JS</h6>
+            <h6>For TS</h6>
+          </div>
+
+          <div class="row">
+            <code style="display: block">
+              <pre>
+        <span class="code__keyword">const</span> <span class="code__var">newTheme</span> = {
+          name: <span class="code__string">'test',</span> 
+          styles: {
+            head:  <span class="code__string">'headTestClass',</span> 
+            list: <span class="code__string">'listTestClass',</span> ,
+            placeholder: <span class="code__string">'placeholderTestClass',</span> ,
+            caret: <span class="code__string">'caretTestClass',</span> ,
+            search: <span class="code__string">'searchTestClass',</span> ,
+            chips: <span class="code__string">'chipsTestClass',</span> ,
+            lable: <span class="code__string">'lableTestClass',</span> ,
+          },
+        });
+              </pre>
+            </code>
+
+            <code style="display: block">
+              <pre>
+        <span class="code__keyword">const</span> <span class="code__var">newCustomTheme</span>:<span class="code__class"> CustomTheme</span>  = {
+          name: <span class="code__string">'test',</span> 
+          styles: {
+            head:  <span class="code__string">'headTestClass',</span> 
+            list: <span class="code__string">'listTestClass',</span> ,
+            placeholder: <span class="code__string">'placeholderTestClass',</span> ,
+            caret: <span class="code__string">'caretTestClass',</span> ,
+            search: <span class="code__string">'searchTestClass',</span> ,
+            chips: <span class="code__string">'chipsTestClass',</span> ,
+            lable: <span class="code__string">'lableTestClass',</span> ,
+          },
+        });
+              </pre>
+            </code>
+          </div>
+          <h6>CSS</h6>
+          <code style="display: block; width: 44%">
+            <pre>
+              .headTestClass {
+                background-color: #8297ff;
+                color: white;
+              }
+
+              .listTestClass {
+                background-color: #8297ff;
+                border: 1px solid black;
+                color: white;
+              }
+            </pre>
+          </code>
+
+          <h6>Example custom theme in CG-Select</h6>
+          <p>
+            See an example of a select on
+            <a
+              href="https://codesandbox.io/p/sandbox/cg-select-example-eq9rle?file=%2Fsrc%2Findex.js"
+              style="font-size: 16px; color: #88d0f7"
+              >codesandbox.io</a
+            >
+          </p>
+          <div class="layout-select" style="margin-bottom: 60px">
+            <button class="cg-dropdown cg-dropdown_theme"></button>
+          </div>
+        </div>
+      </div>
+
+      <div class="example-select">
+        <h1 class="example-select_title">Select constructor</h1>
+        <div class="row" style="margin: 20px; color: white">
+          <div class="col">
+            <h5 style="font-size: 18px; margin: 0;">Select Style Builder:</h5>
+            <p style="margin-right: 50px; font-size: 17px">
+              This is a constructor for styling a select online without downloading. For it to work,
+              you need to: 
+              <ol style="font-size: 15px;">
+                <li class="liList">Select a part of the select for customization. </li>
+                <li  class="liList">Enter styles in the text field in the form "color: red;".</li>
+                <li  class="liList">Click on the render button.</li>
+              </ol>
+            </p>
+          </div>
+          <div class="col">
+            <div class="layout-select constructor">
+              <button class="cg-dropdown body"></button>
+              <textarea
+                name="styles"
+                id="styles"
+                cols="30"
+                rows="5"
+                class="textareaStyle"
+                placeholder="Enter CSS properties"
+                disabled="disabled"
+              ></textarea>
+              <button type="button" class="check-code render">Render</button>
+            </div>
+           
+          </div>
+          
+        </div>
+        <div class="layout-select constructor" style="margin-bottom: 60px;">
+          <button class="cg-dropdown select"></button>
+        </div>
+      </div>
+
      <div class="example-select">
        <h1 class="example-select_title">Categories</h1>

--- a/example/index.js
+++ b/example/index.js
@ -1,5 +1,8 @@
 import { CGSelect } from '../src/cg-select';
-import './example';
+import { newCustomTheme } from './src/themeTest';
+
+import './src/example';
+import './src/constructor/constructor';

 // ------------------------------Обычный селект--------------------
 const dropdown = new CGSelect({
@ -27,10 +30,34 @@ const dropdown = new CGSelect({
  },
 });

-dropdown.on('clear', function (e) {
-  console.log(`this state: ${e}`);
-});
+// dropdown.on('clear', function (e) {
+//   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',
--- a/example/src/constructor/constructor.js
+++ b/example/src/constructor/constructor.js
@ -0,0 +1,83 @@
+import { CGSelect } from '../../../src/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);
+});
--- a/example/src/constructor/constructor.scss
+++ b/example/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;
+}
--- a/example/src/example.js
+++ b/example/src/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")
-})
+  codeNative.classList.toggle('active');
+});
--- a/example/src/themeTest.ts
+++ b/example/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',
+  },
+};
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "cg-select",
-  "version": "0.2.33",
+  "version": "0.2.4",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "cg-select",
-      "version": "0.2.33",
+      "version": "0.2.4",
      "license": "ISC",
      "dependencies": {
        "@parcel/optimizer-css": "^2.8.0",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "cg-select",
-  "version": "0.2.33",
+  "version": "0.2.4",
  "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
  "author": {
    "name": "CraftGroup",
--- 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;
@ -916,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', () => {
--- a/src/components/theme/theme.interface.ts
+++ 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;
+  };
+}
--- 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}`);
  }
 }
--- 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;
 }
--- 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}