From 4dd4b7866ffaffdc5fd48d0661493c16c394c15f Mon Sep 17 00:00:00 2001 From: MaxOvs19 <88626313+MaxOvs19@users.noreply.github.com> Date: Tue, 20 Dec 2022 15:03:44 +0300 Subject: [PATCH 01/12] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 70dcf28..c0b52a0 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,7 @@ const dropdown = new DropDown({ }); ``` ## Пример разных селектов -Так же рабочий пример -- https://maxovs19.github.io/cg-select/ +Так же рабочий пример -- https://cg-select.itguild.info/ ![image](https://github.com/apuc/cg-select/blob/main/src/images/DefaultSelect.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/MultiSelect.png) From a2a91b3b9ba79d8d126c26da2a85ddc0bd24a3d4 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Tue, 20 Dec 2022 19:54:44 +0300 Subject: [PATCH 02/12] Rebuild view mobaile select --- src/index.html | 8 +++++++- src/style/main.scss | 21 ++++++++++++++++----- src/style/nativSelect.scss | 28 ++++++++++++++-------------- 3 files changed, 37 insertions(+), 20 deletions(-) diff --git a/src/index.html b/src/index.html index bba2dec..a4f1c4b 100644 --- a/src/index.html +++ b/src/index.html @@ -126,7 +126,12 @@ }, { category: 'USA', - categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'], + categoryItems: [ + 'Alabama', + 'Texas', + 'Colorado', + 'Klirens', + 'Los-Angeles'], }, { category: 'France', @@ -226,6 +231,7 @@ selector: '.cg-dropdown_checkboxDisable', placeholder: 'Выберите авто', lable: 'EXAMPLE', + searchMode: true, items: [ 'BMW', { diff --git a/src/style/main.scss b/src/style/main.scss index b921b86..9df98f3 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -340,14 +340,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/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; +// } +// } From 2e50504397f156a33f2c68125c0618a45fe14cee Mon Sep 17 00:00:00 2001 From: MaxOvs19 <88626313+MaxOvs19@users.noreply.github.com> Date: Tue, 20 Dec 2022 20:02:48 +0300 Subject: [PATCH 03/12] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 70dcf28..c0b52a0 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,7 @@ const dropdown = new DropDown({ }); ``` ## Пример разных селектов -Так же рабочий пример -- https://maxovs19.github.io/cg-select/ +Так же рабочий пример -- https://cg-select.itguild.info/ ![image](https://github.com/apuc/cg-select/blob/main/src/images/DefaultSelect.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/MultiSelect.png) From 3cc1400a6e5de44876792fb2ef61555ca9cd0123 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Tue, 20 Dec 2022 20:04:47 +0300 Subject: [PATCH 04/12] Fixed readme --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index c0b52a0..df85eea 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CG-SELECT -## version ~ 0.0.1 +## version ~ 0.1.0 Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта. Доступна кастомизация, мультивыбор и живой поиск по елементам. @@ -61,7 +61,9 @@ const dropdown = new DropDown({ ], }); ``` -## Пример разных селектов + +## Пример разных селектов + Так же рабочий пример -- https://cg-select.itguild.info/ ![image](https://github.com/apuc/cg-select/blob/main/src/images/DefaultSelect.png) @@ -69,12 +71,10 @@ const dropdown = new DropDown({ ![image](https://github.com/apuc/cg-select/blob/main/src/images/WhiteTheme.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png) -Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. - +Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. **Чтобы ознакомиться с ней, перейдите по ссылке -** https://maxovs19.github.io/cg-select/up_/documentation/index.html - ## Contributing 1. Fork it! From b1965a3eda03e78a79fb1bd401a4f40e4c1ca528 Mon Sep 17 00:00:00 2001 From: MaxOvs19 <88626313+MaxOvs19@users.noreply.github.com> Date: Tue, 20 Dec 2022 20:08:47 +0300 Subject: [PATCH 05/12] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index df85eea..34f5648 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ ## Installation -TODO: Describe the installation process +npm i cg-select ## Usage From 85920365f787d6378cee7d2e571480387b1256a6 Mon Sep 17 00:00:00 2001 From: MaxOvs19 <88626313+MaxOvs19@users.noreply.github.com> Date: Tue, 20 Dec 2022 20:11:58 +0300 Subject: [PATCH 06/12] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 34f5648..de4cd1e 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,9 @@ ## Installation +``` npm i cg-select +``` ## Usage @@ -85,4 +87,4 @@ const dropdown = new DropDown({ ## History -TODO: Write history +16.12.2022 - релиз версии 0.1.0! From 7280ffd4c875d2ba782bc1bd129fa742f1ce90a4 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Wed, 21 Dec 2022 16:24:15 +0300 Subject: [PATCH 07/12] Fixed errors in working for to React --- README.md | 2 +- src/cg-dropdown.js | 11 ++++++----- src/index.html | 1 - 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index de4cd1e..727fc58 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CG-SELECT -## version ~ 0.1.0 +## version ~ 0.1.002 Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта. Доступна кастомизация, мультивыбор и живой поиск по елементам. diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 5a7c017..aeac1e1 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -309,9 +309,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 +397,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 +418,7 @@ export class DropDown { } else { intputSearch = createInputSearch(random, en.placeholder); } + const { search } = styles; customStylesFormat(search, intputSearch); ulList.appendChild(intputSearch); } @@ -426,6 +426,7 @@ export class DropDown { ulList.classList.add('list'); if (styles) { + const { list } = styles; customStylesFormat(list, ulList); } diff --git a/src/index.html b/src/index.html index a4f1c4b..00bbc82 100644 --- a/src/index.html +++ b/src/index.html @@ -230,7 +230,6 @@ const dropdown = new DropDown({ selector: '.cg-dropdown_checkboxDisable', placeholder: 'Выберите авто', - lable: 'EXAMPLE', searchMode: true, items: [ 'BMW', From eee3ff36f2ccb3948ce5a6ec899b621f8dcdd2ce Mon Sep 17 00:00:00 2001 From: MaxOvs19 <88626313+MaxOvs19@users.noreply.github.com> Date: Wed, 21 Dec 2022 16:30:42 +0300 Subject: [PATCH 08/12] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 727fc58..687d8a9 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CG-SELECT -## version ~ 0.1.002 +## version ~ 0.1.1 Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта. Доступна кастомизация, мультивыбор и живой поиск по елементам. From b8dbbbbcd1d1ebd26a7aa6f431787d8274f30c39 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Wed, 21 Dec 2022 17:52:54 +0300 Subject: [PATCH 09/12] Fixed folders --- README.md | 2 +- documentation/index.html | 2 +- package.json | 13 +++++++------ src/{cg-dropdown.js => cg-select.js} | 0 src/{exemple-page.js => page/example.js} | 0 src/{ => page}/index.html | 6 +++--- src/{ => page}/index.js | 4 ++-- 7 files changed, 14 insertions(+), 13 deletions(-) rename src/{cg-dropdown.js => cg-select.js} (100%) rename src/{exemple-page.js => page/example.js} (100%) rename src/{ => page}/index.html (98%) rename src/{ => page}/index.js (98%) diff --git a/README.md b/README.md index 687d8a9..9607c88 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CG-SELECT -## version ~ 0.1.1 +## version ~ 0.1.12 Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта. Доступна кастомизация, мультивыбор и живой поиск по елементам. 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..30dcffe 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.12", + "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 --public-url", "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 100% rename from src/cg-dropdown.js rename to src/cg-select.js 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 98% rename from src/index.html rename to src/page/index.html index 00bbc82..bbbe98a 100644 --- a/src/index.html +++ b/src/page/index.html @@ -5,7 +5,7 @@ Cg-Select - +

@@ -18,7 +18,7 @@ @@ -259,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({ From 5d93c84edea163b48762ce5cafd88d630d8228f9 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Wed, 21 Dec 2022 21:33:39 +0300 Subject: [PATCH 10/12] Fixed package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 30dcffe..3ee51dd 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "author": "MaxOvs19", "scripts": { "start": "parcel src/page/index.html -p 4500 --open ", - "build": "parcel build ./src/page/index.html --public-url", + "build": "parcel build ./src/page/index.html", "deploy": "gh-pages -d dist", "predeploy": "npm run build" }, From e70cfec79715635dcc686872a86fbccb9622e4d0 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Thu, 22 Dec 2022 15:42:36 +0300 Subject: [PATCH 11/12] Fixed styles scss and added CHENGELOG --- CHANGELOG.md | 14 ++++++++++ README.md | 4 +-- package.json | 2 +- src/cg-select.js | 2 ++ src/{style => }/main.scss | 38 +++------------------------- src/{style => page}/ExemplePage.scss | 31 +++++++++++++++++++++++ src/page/index.html | 4 +-- 7 files changed, 56 insertions(+), 39 deletions(-) create mode 100644 CHANGELOG.md rename src/{style => }/main.scss (90%) rename src/{style => page}/ExemplePage.scss (84%) 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 9607c88..51bc4a9 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CG-SELECT -## version ~ 0.1.12 +## version ~ 0.1.14 Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта. Доступна кастомизация, мультивыбор и живой поиск по елементам. @@ -75,7 +75,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 diff --git a/package.json b/package.json index 3ee51dd..51465f8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cg-select", - "version": "0.1.12", + "version": "0.1.14", "description": "Select control created with JS for use in JS/React", "author": "MaxOvs19", "scripts": { diff --git a/src/cg-select.js b/src/cg-select.js index aeac1e1..2e5d4d6 100644 --- a/src/cg-select.js +++ b/src/cg-select.js @@ -16,6 +16,8 @@ import { } from './components/create-element'; import { ru, en } from './language/language'; + + /** * @class Описание класса DropDown * @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации. diff --git a/src/style/main.scss b/src/main.scss similarity index 90% rename from src/style/main.scss rename to src/main.scss index 9df98f3..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 { 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 f1b815f..b196547 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/page/index.html b/src/page/index.html index bbbe98a..eae3a66 100644 --- a/src/page/index.html +++ b/src/page/index.html @@ -5,9 +5,9 @@ Cg-Select - + - +
From a0cadfbf904b13ef25da1a0fa260252c2bd7cf1d Mon Sep 17 00:00:00 2001 From: MaxOvs19 <88626313+MaxOvs19@users.noreply.github.com> Date: Thu, 22 Dec 2022 15:48:05 +0300 Subject: [PATCH 12/12] Update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 51bc4a9..c825d61 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,8 @@ npm i cg-select ### Пример создния обычного селекта ```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',