diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..c7e782f --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,14 @@ +# CG-SELECT + +## 16.12.2022 - релиз версии 0.1.0! + +### 20.12.2022 - обновление 0.1.12. + +Проведены тесты в JS и React. Выявленны ошибки в работе в Реакт приложениях. + +- Изменена файловая структура приложения. + +### 22.12.2022 - обновление 0.1.14. + +- Изменеия в расположении файлов scss. +- Исправлено влияние стилей селекта на JS приложение. diff --git a/README.md b/README.md index 34b009a..9054e5f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CG-SELECT -## version ~ 0.0.1 +## version ~ 0.1.14 Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта. Доступна кастомизация, мультивыбор и живой поиск по елементам. @@ -16,7 +16,9 @@ ## Installation -TODO: Describe the installation process +``` +npm i cg-select +``` ## Usage @@ -43,7 +45,8 @@ TODO: Describe the installation process ### Пример создния обычного селекта ```javascript -import { DropDown } from './cg-dropdown'; +import { DropDown } from 'cg-select/src/cg-select'; +import 'cg-select/src/main.scss'; const dropdown = new DropDown({ selector: '.cg-dropdown_selector', @@ -62,7 +65,7 @@ const dropdown = new DropDown({ }); ``` -## Примеры разных селектов +## Пример разных селектов Так же рабочий пример -- https://cg-select.itguild.info/ @@ -73,7 +76,7 @@ const dropdown = new DropDown({ Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. -**Чтобы ознакомиться с ней, перейдите по ссылке -** https://maxovs19.github.io/cg-select/up_/documentation/index.html +**Чтобы ознакомиться с ней, перейдите по ссылке -** https://cg-select.itguild.info/up_/up_/documentation/index.html ## Contributing @@ -85,4 +88,4 @@ const dropdown = new DropDown({ ## History -TODO: Write history +16.12.2022 - релиз версии 0.1.0! diff --git a/documentation/index.html b/documentation/index.html index e9d92a7..6294523 100644 --- a/documentation/index.html +++ b/documentation/index.html @@ -19,7 +19,7 @@

CG-SELECT

- -- Вернуться к примеру -- + -- Вернуться к примеру --

Этот компонент предлагает более гибкую настройку и использование селекта. Так же реализованны методы взаимодействия с селектом. diff --git a/package.json b/package.json index 034e89f..51465f8 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,11 @@ { - "name": "dropdown-list", - "version": "0.0.1", - "description": "", + "name": "cg-select", + "version": "0.1.14", + "description": "Select control created with JS for use in JS/React", + "author": "MaxOvs19", "scripts": { - "start": "parcel src/index.html -p 4500 --open ", - "build": "parcel build ./src/index.html --public-url /", + "start": "parcel src/page/index.html -p 4500 --open ", + "build": "parcel build ./src/page/index.html", "deploy": "gh-pages -d dist", "predeploy": "npm run build" }, @@ -12,7 +13,7 @@ "type": "git", "url": "git+https://github.com/MaxOvs19/cg-select.git" }, - "author": "MaxOvs19", + "license": "ISC", "bugs": { "url": "https://github.com/MaxOvs19/cg-select/issues" diff --git a/src/cg-dropdown.js b/src/cg-select.js similarity index 98% rename from src/cg-dropdown.js rename to src/cg-select.js index 5a7c017..2e5d4d6 100644 --- a/src/cg-dropdown.js +++ b/src/cg-select.js @@ -16,6 +16,8 @@ import { } from './components/create-element'; import { ru, en } from './language/language'; + + /** * @class Описание класса DropDown * @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации. @@ -309,9 +311,10 @@ export class DropDown { const elem = document.querySelector(options.selector); - if (!elem) { - throw new Error(`Element with selector ${options.selector}`); - } + //TODO: для теста в реакте нужно пересмотреть необходимость этой проверки! + // if (!elem) { + // throw new Error(`Element with selector ${options.selector}`); + // } this.#element = elem; @@ -396,8 +399,6 @@ export class DropDown { */ #render(select) { const { styles, multiselect, searchMode, multiselectTag, darkTheme, language } = this.#options; - const { list, search } = styles; - const random = Math.random().toString(36).substring(2, 10); if (select || (select && styles)) { @@ -419,6 +420,7 @@ export class DropDown { } else { intputSearch = createInputSearch(random, en.placeholder); } + const { search } = styles; customStylesFormat(search, intputSearch); ulList.appendChild(intputSearch); } @@ -426,6 +428,7 @@ export class DropDown { ulList.classList.add('list'); if (styles) { + const { list } = styles; customStylesFormat(list, ulList); } diff --git a/src/style/main.scss b/src/main.scss similarity index 88% rename from src/style/main.scss rename to src/main.scss index b921b86..3a78f0e 100644 --- a/src/style/main.scss +++ b/src/main.scss @@ -1,37 +1,7 @@ -@import './nativSelect.scss'; -@import './scrolbar.scss'; -@import './whiteTheme.scss'; -@import './svgStyle.scss'; -@import './ExemplePage.scss'; - -* { - font-size: 14px; - font-family: Arial, Helvetica, sans-serif; -} - -body { - background: #000000c4; -} - -.container { - margin: 0 auto; - width: 900px; - - display: -webkit-box; - display: -ms-flexbox; - display: flex; - - -webkit-box-align: baseline; - -ms-flex-align: baseline; - align-items: baseline; - - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} +@import './style/nativSelect.scss'; +@import './style/scrolbar.scss'; +@import './style/svgStyle.scss'; +@import './style/whiteTheme.scss'; // ----Layout---- .cg-dropdown { @@ -340,14 +310,25 @@ input[type='checkbox'] { } .list { - display: none !important; + width: 98% !important; } - .open { - display: none !important; - } + // .open { + // display: none !important; + // } .cg-select { - display: none !important; + width: 100% !important; + } + + .example-select { + &_title { + padding: 24px 0 0px 15px; + font-size: 16px; + } + } + + pre { + overflow-x: scroll; } } diff --git a/src/style/ExemplePage.scss b/src/page/ExemplePage.scss similarity index 84% rename from src/style/ExemplePage.scss rename to src/page/ExemplePage.scss index 9d15380..3b4b5c1 100644 --- a/src/style/ExemplePage.scss +++ b/src/page/ExemplePage.scss @@ -1,3 +1,34 @@ +@import '/src/main.scss'; + +* { + font-size: 14px; + font-family: Arial, Helvetica, sans-serif; +} + +.body-example { + background: #000000c4; +} + +.container { + margin: 0 auto; + width: 900px; + + display: -webkit-box; + display: -ms-flexbox; + display: flex; + + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + .header { width: 100%; border-radius: 5px; diff --git a/src/exemple-page.js b/src/page/example.js similarity index 100% rename from src/exemple-page.js rename to src/page/example.js diff --git a/src/index.html b/src/page/index.html similarity index 95% rename from src/index.html rename to src/page/index.html index bba2dec..eae3a66 100644 --- a/src/index.html +++ b/src/page/index.html @@ -5,9 +5,9 @@ Cg-Select - + - +

@@ -18,7 +18,7 @@
@@ -126,7 +126,12 @@ }, { category: 'USA', - categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'], + categoryItems: [ + 'Alabama', + 'Texas', + 'Colorado', + 'Klirens', + 'Los-Angeles'], }, { category: 'France', @@ -225,7 +230,7 @@ const dropdown = new DropDown({ selector: '.cg-dropdown_checkboxDisable', placeholder: 'Выберите авто', - lable: 'EXAMPLE', + searchMode: true, items: [ 'BMW', { @@ -254,5 +259,5 @@
- + diff --git a/src/index.js b/src/page/index.js similarity index 98% rename from src/index.js rename to src/page/index.js index e956073..764a54b 100644 --- a/src/index.js +++ b/src/page/index.js @@ -1,5 +1,5 @@ -import { DropDown } from './cg-dropdown'; -import './exemple-page'; +import { DropDown } from '../cg-select'; +import './example'; // ------------------------------Обычный селект-------------------- const dropdown = new DropDown({ diff --git a/src/style/nativSelect.scss b/src/style/nativSelect.scss index c8d4b8b..c1f5a6f 100644 --- a/src/style/nativSelect.scss +++ b/src/style/nativSelect.scss @@ -18,19 +18,19 @@ } } -@media (max-width: 576px) { - .nativSelect { - display: block; - min-width: 235px; - height: 50px; +// @media (max-width: 576px) { +// .nativSelect { +// display: block; +// min-width: 235px; +// height: 50px; - border: none; - border-radius: 10px; - } +// border: none; +// border-radius: 10px; +// } - select[multiple='multiple'] { - color: black; - background-color: white; - border-radius: 0; - } -} +// select[multiple='multiple'] { +// color: black; +// background-color: white; +// border-radius: 0; +// } +// }