From 682332645e046e1feedc9015933d2154bfc3c076 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Mon, 20 Feb 2023 14:26:47 +0300 Subject: [PATCH] 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",