apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed package.json

Browse Source
This commit is contained in:
MaxOvs 2022-12-28 20:33:21 +03:00
parent 2d1f482a7e
commit 43a9256258
12 changed files with 22 additions and 916 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
node_modules
dist
.parcel-cache
example

2
CHANGELOG.md
View File

@ -13,7 +13,7 @@
- Изменеия в расположении файлов scss.
- Исправлено влияние стилей селекта на JS приложение.
### ..... - обновление 0.1.16
### ..... - обновление 0.1.17
- Добавленна возможность менять отображения селекта на телефонах (нативный/cg-select).
- Добавленна возможность менять отображения листа с выбором (обычный/модальное окно)

2
README.md
View File

@ -91,7 +91,7 @@ const dropdown = new DropDown({
| Совместимость с приложениями | JS | React | Angular | Vue |
| ---------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
| CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |
| Комментарий | Протестирован в Js приложениях и работает успешно. | Работает только с костылем в виде `setTimeout()` | тесты не проведены | тесты не проведены |
| Комментарий | Протестирован в Js приложениях и работает успешно. | Работает только с костылем в виде `setTimeout()` | пока недоступно | тесты не проведены |
## History

2
documentation/index.html
View File

@ -19,7 +19,7 @@
<section>
<h2>CG-SELECT</h2>
<a href="/src/page/index.html">-- Вернуться к примеру --</a>
<a href="/example/index.html">-- Вернуться к примеру --</a>
<p>
Этот компонент предлагает более гибкую настройку и использование селекта. Так же
реализованны методы взаимодействия с селектом.

4
index.js Normal file
View File

@ -0,0 +1,4 @@
import { DropDown } from './src/cg-select';
export default DropDown;

64
package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "cg-select",
"version": "0.1.14",
"version": "0.1.16",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "cg-select",
"version": "0.1.14",
"version": "0.1.16",
"license": "ISC",
"dependencies": {
"@parcel/optimizer-css": "^2.8.0",
@ -368,7 +368,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/cache/-/cache-2.7.0.tgz",
"integrity": "sha512-JlXNoZXcWzLKdDlfeF3dIj5Vtel5T9vtdBN72PJ+cjC4qNHk4Uwvc5sfOBELuibGN0bVu2bwY9nUgSwCiB1iIA==",
"dev": true,
"dependencies": {
"@parcel/fs": "2.7.0",
"@parcel/logger": "2.7.0",
@ -390,7 +389,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/codeframe/-/codeframe-2.7.0.tgz",
"integrity": "sha512-UTKx0jejJmmO1dwTHSJuRgrO8N6PMlkxRT6sew8N6NC3Bgv6pu0EbO+RtlWt/jCvzcdLOPdIoTzj4MMZvgcMYg==",
"dev": true,
"dependencies": {
"chalk": "^4.1.0"
},
@ -491,7 +489,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.7.0.tgz",
"integrity": "sha512-7yKZUdh314Q/kU/9+27ZYTfcnXS6VYHuG+iiUlIohnvUUybxLqVJhdMU9Q+z2QcPka1IdJWz4K4Xx0y6/4goyg==",
"dev": true,
"dependencies": {
"@mischnic/json-sourcemap": "^0.1.0",
"@parcel/cache": "2.7.0",
@ -546,7 +543,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.7.0.tgz",
"integrity": "sha512-pdq/cTwVoL0n8yuDCRXFRSQHVWdmmIXPt3R3iT4KtYDYvOrMT2dLPT79IMqQkhYPANW8GuL15n/WxRngfRdkug==",
"dev": true,
"dependencies": {
"@mischnic/json-sourcemap": "^0.1.0",
"nullthrows": "^1.1.1"
@ -563,7 +559,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/events/-/events-2.7.0.tgz",
"integrity": "sha512-kQDwMKgZ1U4M/G17qeDYF6bW5kybluN6ajYPc7mZcrWg+trEI/oXi81GMFaMX0BSUhwhbiN5+/Vb2wiG/Sn6ig==",
"dev": true,
"engines": {
"node": ">= 12.0.0"
},
@ -576,7 +571,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/fs/-/fs-2.7.0.tgz",
"integrity": "sha512-PU5fo4Hh8y03LZgemgVREttc0wyHQUNmsJCybxTB7EjJie2CqJRumo+DFppArlvdchLwJdc9em03yQV/GNWrEg==",
"dev": true,
"dependencies": {
"@parcel/fs-search": "2.7.0",
"@parcel/types": "2.7.0",
@ -599,7 +593,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/fs-search/-/fs-search-2.7.0.tgz",
"integrity": "sha512-K1Hv25bnRpwQVA15RvcRuB8ZhfclnCHA8N8L6w7Ul1ncSJDxCIkIAc5hAubYNNYW3kWjCC2SOaEgFKnbvMllEQ==",
"dev": true,
"dependencies": {
"detect-libc": "^1.0.3"
},
@ -615,7 +608,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/graph/-/graph-2.7.0.tgz",
"integrity": "sha512-Q6E94GS6q45PtsZh+m+gvFRp/N1Qopxhu2sxjcWsGs5iBd6IWn2oYLWOH5iVzEjWuYpW2HkB08lH6J50O63uOA==",
"dev": true,
"dependencies": {
"@parcel/utils": "2.7.0",
"nullthrows": "^1.1.1"
@ -632,7 +624,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.7.0.tgz",
"integrity": "sha512-k6bSKnIlPJMPU3yjQzfgfvF9zuJZGOAlJgzpL4BbWvdbE8BTdjzLcFn0Ujrtud94EgIkiXd22sC2HpCUWoHGdA==",
"dev": true,
"dependencies": {
"detect-libc": "^1.0.3",
"xxhash-wasm": "^0.4.2"
@ -649,7 +640,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-2.7.0.tgz",
"integrity": "sha512-qjMY/bYo38+o+OiIrTRldU9CwL1E7J72t+xkTP8QIcUxLWz5LYR0YbynZUVulmBSfqsykjjxCy4a+8siVr+lPw==",
"dev": true,
"dependencies": {
"@parcel/diagnostic": "2.7.0",
"@parcel/events": "2.7.0"
@ -666,7 +656,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/markdown-ansi/-/markdown-ansi-2.7.0.tgz",
"integrity": "sha512-ipOX0D6FVZFEXeb/z8MnTMq2RQEIuaILY90olVIuHEFLHHfOPEn+RK3u13HA1ChF5/9E3cMD79tu6x9JL9Kqag==",
"dev": true,
"dependencies": {
"chalk": "^4.1.0"
},
@ -1071,7 +1060,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/package-manager/-/package-manager-2.7.0.tgz",
"integrity": "sha512-wmfSX1mRrTi8MeA4KrnPk/x7zGUsILCQmTo6lA4gygzAxDbM1pGuyFN8/Kt0y0SFO2lbljARtD/4an5qdotH+Q==",
"dev": true,
"dependencies": {
"@parcel/diagnostic": "2.7.0",
"@parcel/fs": "2.7.0",
@ -1197,7 +1185,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/plugin/-/plugin-2.7.0.tgz",
"integrity": "sha512-qqgx+nnMn6/0lRc4lKbLGmhNtBiT93S2gFNB4Eb4Pfz/SxVYoW+fmml+KdfOSiZffWOAH5L6NwhyD7N8aSikzw==",
"dev": true,
"dependencies": {
"@parcel/types": "2.7.0"
},
@ -1621,7 +1608,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/types/-/types-2.7.0.tgz",
"integrity": "sha512-+dhXVUnseTCpJvBTGMp0V6X13z6O/A/+CUtwEpMGZ8XSmZ4Gk44GvaTiBOp0bJpWG4fvCKp+UmC8PYbrDiiziw==",
"dev": true,
"dependencies": {
"@parcel/cache": "2.7.0",
"@parcel/diagnostic": "2.7.0",
@ -1636,7 +1622,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-2.7.0.tgz",
"integrity": "sha512-jNZ5bIGg1r1RDRKi562o4kuVwnz+XJ2Ie3b0Zwrqwvgfj6AbRFIKzDd+h85dWWmcDYzKUbHp11u6VJl1u8Vapg==",
"dev": true,
"dependencies": {
"@parcel/codeframe": "2.7.0",
"@parcel/diagnostic": "2.7.0",
@ -1675,7 +1660,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/workers/-/workers-2.7.0.tgz",
"integrity": "sha512-99VfaOX+89+RaoTSyH9ZQtkMBFZBFMvJmVJ/GeJT6QCd2wtKBStTHlaSnQOkLD/iRjJCNwV2xpZmm8YkTwV+hg==",
"dev": true,
"dependencies": {
"@parcel/diagnostic": "2.7.0",
"@parcel/logger": "2.7.0",
@ -1722,8 +1706,7 @@
"node_modules/abortcontroller-polyfill": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz",
"integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==",
"dev": true
"integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q=="
},
"node_modules/acorn": {
"version": "8.8.0",
@ -1800,7 +1783,6 @@
"version": "3.0.9",
"resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
"integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
"dev": true,
"dependencies": {
"safe-buffer": "^5.0.1"
}
@ -1952,7 +1934,6 @@
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
"dev": true,
"engines": {
"node": ">=0.8"
}
@ -2140,7 +2121,6 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-7.0.0.tgz",
"integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==",
"dev": true,
"engines": {
"node": ">=6"
}
@ -2148,8 +2128,7 @@
"node_modules/dotenv-expand": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
"dev": true
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
},
"node_modules/electron-to-chromium": {
"version": "1.4.251",
@ -3251,7 +3230,6 @@
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
"dev": true,
"funding": [
{
"type": "github",
@ -3765,7 +3743,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/cache/-/cache-2.7.0.tgz",
"integrity": "sha512-JlXNoZXcWzLKdDlfeF3dIj5Vtel5T9vtdBN72PJ+cjC4qNHk4Uwvc5sfOBELuibGN0bVu2bwY9nUgSwCiB1iIA==",
"dev": true,
"requires": {
"@parcel/fs": "2.7.0",
"@parcel/logger": "2.7.0",
@ -3777,7 +3754,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/codeframe/-/codeframe-2.7.0.tgz",
"integrity": "sha512-UTKx0jejJmmO1dwTHSJuRgrO8N6PMlkxRT6sew8N6NC3Bgv6pu0EbO+RtlWt/jCvzcdLOPdIoTzj4MMZvgcMYg==",
"dev": true,
"requires": {
"chalk": "^4.1.0"
}
@ -3850,7 +3826,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.7.0.tgz",
"integrity": "sha512-7yKZUdh314Q/kU/9+27ZYTfcnXS6VYHuG+iiUlIohnvUUybxLqVJhdMU9Q+z2QcPka1IdJWz4K4Xx0y6/4goyg==",
"dev": true,
"requires": {
"@mischnic/json-sourcemap": "^0.1.0",
"@parcel/cache": "2.7.0",
@ -3891,7 +3866,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.7.0.tgz",
"integrity": "sha512-pdq/cTwVoL0n8yuDCRXFRSQHVWdmmIXPt3R3iT4KtYDYvOrMT2dLPT79IMqQkhYPANW8GuL15n/WxRngfRdkug==",
"dev": true,
"requires": {
"@mischnic/json-sourcemap": "^0.1.0",
"nullthrows": "^1.1.1"
@ -3900,14 +3874,12 @@
"@parcel/events": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/events/-/events-2.7.0.tgz",
"integrity": "sha512-kQDwMKgZ1U4M/G17qeDYF6bW5kybluN6ajYPc7mZcrWg+trEI/oXi81GMFaMX0BSUhwhbiN5+/Vb2wiG/Sn6ig==",
"dev": true
"integrity": "sha512-kQDwMKgZ1U4M/G17qeDYF6bW5kybluN6ajYPc7mZcrWg+trEI/oXi81GMFaMX0BSUhwhbiN5+/Vb2wiG/Sn6ig=="
},
"@parcel/fs": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/fs/-/fs-2.7.0.tgz",
"integrity": "sha512-PU5fo4Hh8y03LZgemgVREttc0wyHQUNmsJCybxTB7EjJie2CqJRumo+DFppArlvdchLwJdc9em03yQV/GNWrEg==",
"dev": true,
"requires": {
"@parcel/fs-search": "2.7.0",
"@parcel/types": "2.7.0",
@ -3920,7 +3892,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/fs-search/-/fs-search-2.7.0.tgz",
"integrity": "sha512-K1Hv25bnRpwQVA15RvcRuB8ZhfclnCHA8N8L6w7Ul1ncSJDxCIkIAc5hAubYNNYW3kWjCC2SOaEgFKnbvMllEQ==",
"dev": true,
"requires": {
"detect-libc": "^1.0.3"
}
@ -3929,7 +3900,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/graph/-/graph-2.7.0.tgz",
"integrity": "sha512-Q6E94GS6q45PtsZh+m+gvFRp/N1Qopxhu2sxjcWsGs5iBd6IWn2oYLWOH5iVzEjWuYpW2HkB08lH6J50O63uOA==",
"dev": true,
"requires": {
"@parcel/utils": "2.7.0",
"nullthrows": "^1.1.1"
@ -3939,7 +3909,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.7.0.tgz",
"integrity": "sha512-k6bSKnIlPJMPU3yjQzfgfvF9zuJZGOAlJgzpL4BbWvdbE8BTdjzLcFn0Ujrtud94EgIkiXd22sC2HpCUWoHGdA==",
"dev": true,
"requires": {
"detect-libc": "^1.0.3",
"xxhash-wasm": "^0.4.2"
@ -3949,7 +3918,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-2.7.0.tgz",
"integrity": "sha512-qjMY/bYo38+o+OiIrTRldU9CwL1E7J72t+xkTP8QIcUxLWz5LYR0YbynZUVulmBSfqsykjjxCy4a+8siVr+lPw==",
"dev": true,
"requires": {
"@parcel/diagnostic": "2.7.0",
"@parcel/events": "2.7.0"
@ -3959,7 +3927,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/markdown-ansi/-/markdown-ansi-2.7.0.tgz",
"integrity": "sha512-ipOX0D6FVZFEXeb/z8MnTMq2RQEIuaILY90olVIuHEFLHHfOPEn+RK3u13HA1ChF5/9E3cMD79tu6x9JL9Kqag==",
"dev": true,
"requires": {
"chalk": "^4.1.0"
}
@ -4201,7 +4168,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/package-manager/-/package-manager-2.7.0.tgz",
"integrity": "sha512-wmfSX1mRrTi8MeA4KrnPk/x7zGUsILCQmTo6lA4gygzAxDbM1pGuyFN8/Kt0y0SFO2lbljARtD/4an5qdotH+Q==",
"dev": true,
"requires": {
"@parcel/diagnostic": "2.7.0",
"@parcel/fs": "2.7.0",
@ -4277,7 +4243,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/plugin/-/plugin-2.7.0.tgz",
"integrity": "sha512-qqgx+nnMn6/0lRc4lKbLGmhNtBiT93S2gFNB4Eb4Pfz/SxVYoW+fmml+KdfOSiZffWOAH5L6NwhyD7N8aSikzw==",
"dev": true,
"requires": {
"@parcel/types": "2.7.0"
}
@ -4537,7 +4502,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/types/-/types-2.7.0.tgz",
"integrity": "sha512-+dhXVUnseTCpJvBTGMp0V6X13z6O/A/+CUtwEpMGZ8XSmZ4Gk44GvaTiBOp0bJpWG4fvCKp+UmC8PYbrDiiziw==",
"dev": true,
"requires": {
"@parcel/cache": "2.7.0",
"@parcel/diagnostic": "2.7.0",
@ -4552,7 +4516,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-2.7.0.tgz",
"integrity": "sha512-jNZ5bIGg1r1RDRKi562o4kuVwnz+XJ2Ie3b0Zwrqwvgfj6AbRFIKzDd+h85dWWmcDYzKUbHp11u6VJl1u8Vapg==",
"dev": true,
"requires": {
"@parcel/codeframe": "2.7.0",
"@parcel/diagnostic": "2.7.0",
@ -4576,7 +4539,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@parcel/workers/-/workers-2.7.0.tgz",
"integrity": "sha512-99VfaOX+89+RaoTSyH9ZQtkMBFZBFMvJmVJ/GeJT6QCd2wtKBStTHlaSnQOkLD/iRjJCNwV2xpZmm8YkTwV+hg==",
"dev": true,
"requires": {
"@parcel/diagnostic": "2.7.0",
"@parcel/logger": "2.7.0",
@ -4610,8 +4572,7 @@
"abortcontroller-polyfill": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz",
"integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==",
"dev": true
"integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q=="
},
"acorn": {
"version": "8.8.0",
@ -4667,7 +4628,6 @@
"version": "3.0.9",
"resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
"integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
"dev": true,
"requires": {
"safe-buffer": "^5.0.1"
}
@ -4763,8 +4723,7 @@
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
"dev": true
"integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
},
"color-convert": {
"version": "2.0.1",
@ -4899,14 +4858,12 @@
"dotenv": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-7.0.0.tgz",
"integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==",
"dev": true
"integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g=="
},
"dotenv-expand": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
"dev": true
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
},
"electron-to-chromium": {
"version": "1.4.251",
@ -5630,8 +5587,7 @@
"safe-buffer": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
"dev": true
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
},
"sass": {
"version": "1.54.9",

7
package.json
View File

@ -1,15 +1,16 @@
{
"name": "cg-select",
"version": "0.1.16",
"version": "0.1.17",
"description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
"author": {
"name": "CraftGroup",
"url": "https://github.com/apuc/"
},
"homepage": "https://cg-select.itguild.info",
"main": "dist/index.js",
"scripts": {
"start": "parcel src/page/index.html -p 4500 --open ",
"build": "parcel build ./src/page/index.html",
"start": "parcel example/index.html -p 4500 --open ",
"build": "parcel build index.js",
"deploy": "gh-pages -d dist",
"predeploy": "npm run build"
},

3
src/index.js
View File

@ -1,3 +0,0 @@
import { DropDown } from './cg-select';
export default DropDown;

50
src/page/example.js
View File

@ -1,50 +0,0 @@
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")
})

212
src/page/example.scss
View File

@ -1,212 +0,0 @@
@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;
display: flex;
align-items: center;
flex-direction: column;
background-color: #2a2f3b;
margin-bottom: 8px;
h1 {
font-size: 57px;
color: white;
font-family: 'Times New Roman', Times, serif;
margin: 40px 0 12px 0;
}
&__logoBox {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
&__logo {
width: 13%;
height: 16%;
border: 1px solid #525252;
border-radius: 50%;
margin: 22px 0 0 29px;
}
.navlist {
display: flex;
justify-content: space-around;
margin: 15px 0 30px 0;
padding: 0;
width: 230px;
li {
display: inline;
list-style: none;
text-decoration: none;
a {
color: white;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
}
.content {
margin-top: 15px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.example-select {
width: 100%;
background-color: #5c5c5c;
border-radius: 5px;
margin: 15px 0 0 0;
&_title {
height: 45px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: white;
padding: 20px 0 0 40px;
margin: 0 0 30px 0;
background-color: #2a2f3b;
font-size: 20px;
}
&_submit {
width: 200px;
height: 35px;
border-radius: 10px;
border: none;
margin-top: 20px;
margin: 20px 15px;
cursor: pointer;
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
&:hover {
background-color: #d7d7d7;
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
}
}
.layout-select {
margin: 15px;
}
}
code {
display: none;
}
pre {
background: #1e1e1e;
margin: 15px;
padding: 15px;
color: #88d0f7;
border-radius: 15px;
font-size: 16px;
line-height: 20px;
}
.code {
&__class,
&__var,
&__string,
&__keyword {
font-size: 16px;
line-height: 20px;
}
&__class {
color: #4ec9b0;
}
&__var {
color: #34a7ff;
}
&__string {
color: #ce9178;
}
&__keyword {
color: #5090ca;
}
}
.check-code {
width: 200px;
height: 35px;
cursor: pointer;
border: none;
border-radius: 10px;
margin: 20px 15px;
transition: all 1s;
}
.active {
display: block;
}
@media (max-width: 576px) {
.container {
width: 95%;
}
.header {
margin-top: 15px;
h1 {
font-size: 32px;
}
}
.example-select_title {
font-size: 14px;
height: 40px;
}
}

359
src/page/index.html
View File

@ -1,359 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
property="og:description"
content="Feature rich Select control for React/JS with multiselect, autocomplete and styling"
/>
<meta property="og:type" content="website" />
<meta property="og:site_name" content="cg-select" />
<meta property="og:url" content="https://cg-select.itguild.info" />
<meta property="og:image" content="/src/images/logoCG.jpg" />
<title>Cg-Select</title>
<link href="/src/page/example.scss" rel="stylesheet" />
</head>
<body class="body-example">
<div class="container">
<header class="header">
<div class="header__logoBox">
<h1>CG-SELECT</h1>
<img src="/src/images/logoCG.jpg" alt="#" class="header__logo" />
</div>
<hr style="width: 55%" />
<nav>
<ul class="navlist">
<li><a href="">Home</a></li>
<li><a href="/documentation/index.html">Documentation</a></li>
</ul>
</nav>
</header>
</div>
<div class="container content">
<div class="example-select">
<h2 class="example-select_title">Дефолтный селект</h2>
<form method="get" class="form">
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_one"></button>
</div>
<input type="submit" value="Отправить!" class="example-select_submit" />
<button type="button" class="check-code" id="first">Посмотреть код</button>
<code id="codeFirst">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_one',</span>
placeholder: <span class="code__string">'Выберите авто',</span>
lable: <span class="code__string">'EXAMPLE',</span>
items: [
<span class="code__string">'BMW',</span>
{
id: <span class="code__string">'213sade',</span>
title: <span class="code__string">'Opel',</span>
value: 1,
},
<span class="code__string">'Mersedes',</span>
<span class="code__string">'MAN',</span>
<span class="code__string">'Ferari',</span>
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
},
});
</pre>
</code>
</form>
</div>
<div class="example-select">
<h2 class="example-select_title">Дефолтный селект с функцией nativeSelectMode</h2>
<form method="get" class="form">
<p style="margin-left: 12px; color: white">
*При мобильном разрешении появляеться нативный селект.
</p>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_selectNative"></button>
</div>
<button type="button" class="check-code" id="Native">Посмотреть код</button>
<code id="codeNative">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_one',</span>
placeholder: <span class="code__string">'Выберите авто',</span>
nativeSelectMode: <span class="code__keyword">true,</span>
items: [
<span class="code__string">'BMW',</span>
{
id: <span class="code__string">'213sade',</span>
title: <span class="code__string">'Opel',</span>
value: 1,
},
<span class="code__string">'Mersedes',</span>
<span class="code__string">'MAN',</span>
<span class="code__string">'Ferari',</span>
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
},
});
</pre>
</code>
</form>
</div>
<div class="example-select">
<h2 class="example-select_title">Дефолтный селект с функцией listDisplayMode</h2>
<form method="get" class="form">
<p style="margin-left: 12px; color: white">
*При использовании данного метода лист с выбором появляеться как модальное окно.
</p>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
</div>
<button type="button" class="check-code" id="six">Посмотреть код</button>
<code id="codeSix">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span>
placeholder: <span class="code__string">'Выберите авто',</span>
listDisplayMode: <span class="code__keyword">true,</span>
items: [
<span class="code__string">'BMW',</span>
{
id: <span class="code__string">'213sade',</span>
title: <span class="code__string">'Opel',</span>
value: 1,
},
<span class="code__string">'Mersedes',</span>
<span class="code__string">'MAN',</span>
<span class="code__string">'Ferari',</span>
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
},
});
</pre>
</code>
</form>
</div>
<div class="example-select">
<h1 class="example-select_title">Селект с данными с URL</h1>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_three"></button>
</div>
<button type="button" class="check-code" id="second">Посмотреть код</button>
<code id="codeSecond">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_three',</span>
placeholder: <span class="code__string">'URL',</span>
url: <span class="code__string">'https://jsonplaceholder.typicode.com/users',</span>
searchMode: <span class="code__keyword">true,</span>
darkTheme: <span class="code__keyword">false,</span>
language: <span class="code__string">'ru',</span>
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
},
});
</pre>
</code>
</div>
<div class="example-select">
<h1 class="example-select_title">Категории</h1>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_categories"></button>
</div>
<button type="button" class="check-code" id="third">Посмотреть код</button>
<code id="codeThird">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_categories',</span>
placeholder: <span class="code__string">'Выберите регион',</span>
searchMode: <span class="code__keyword">true,</span>
items: [
{
category: <span class="code__string">'Russia',</span>
categoryItems: [
{
id: <span class="code__string">'28qwds',</span>
title: <span class="code__string">'Москва',</span>
value: 0,
},
<span class="code__string">'Ростов-на-дону',</span>
<span class="code__string">'Саратов',</span>
<span class="code__string">'Волгоград',</span>
<span class="code__string">'Донецк',</span>
],
},
{
category: <span class="code__string">'USA',</span>
categoryItems: <span class="code__string">[
'Alabama',
'Texas',
'Colorado',
'Klirens',
'Los-Angeles'],</span>
},
{
category: <span class="code__string">'France',</span>
categoryItems: <span class="code__string">['Paris'],</span>
},
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
placeholder: {
maxWidth: <span class="code__string">'500px ',</span>
},
},
multiselect: <span class="code__keyword">true,</span>
multiselectTag: <span class="code__keyword">true,</span>
});
</pre>
</code>
</div>
<div class="example-select">
<h1 class="example-select_title">Управление с помошью кнопок</h1>
<div style="margin-bottom: 15px">
<button class="button__open example-select_submit">Open</button>
<button class="button__close example-select_submit">Close</button>
</div>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_usedBtn"></button>
</div>
<button type="button" class="check-code" id="fourth">Посмотреть код</button>
<code id="codeFourth">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_usedBtn',</span>
placeholder: <span class="code__string">'Выберите авто',</span>
searchMode: <span class="code__keyword">true,</span>
items: [
<span class="code__string">'BMW',</span>
{
id: <span class="code__string">'213sade',</span>
title: <span class="code__string">'Opel',</span>
value: 1,
},
<span class="code__string">'Mersedes',</span>
<span class="code__string">'MAN',</span>
<span class="code__string">'max',</span>
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
color: <span class="code__string">'black',</span>
backgroundColor: <span class="code__string">'rgb(176 223 167)',</span>
},
list: {
width: <span class="code__string">'824px',</span>
color: <span class="code__string">'black',</span>
backgroundColor: <span class="code__string">'rgb(176 223 167)',</span>
},
caret: {
borderTop: <span class="code__string">'6px solid black',</span>
},
search: {
backgroundColor: <span class="code__string">'#d7ffff',</span>
borderRadius: <span class="code__string">'5px',</span>
borderBottom: <span class="code__string">'none',</span>
width: <span class="code__string">'95%',</span>
color: <span class="code__string">'black',</span>
},
},
multiselect: <span class="code__keyword">true,</span>
});
</pre>
</code>
</div>
<div class="example-select">
<h1 class="example-select_title">Функция disabled</h1>
<input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
<label for="checkboxDisable" style="color: white">Вы согласны на обработку данных</label>
<div class="layout-select">
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
</div>
<button type="button" class="check-code" id="fifth">Посмотреть код</button>
<code id="codeFifth">
<pre>
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span>
placeholder: <span class="code__string">'Выберите авто',</span>
searchMode: <span class="code__keyword">true,</span>
items: [
<span class="code__string">'BMW',</span>
{
id: <span class="code__string">'213sade',</span>
title: <span class="code__string">'Opel',</span>
value: 1,
},
<span class="code__string">'Mersedes',</span>
<span class="code__string">'MAN',</span>
<span class="code__string">'Ferari',</span>
],
styles: {
head: {
width: <span class="code__string">'830px',</span>
},
list: {
width: <span class="code__string">'824px',</span>
},
placeholder: {
maxWidth: <span class="code__string">'500px ',</span>
},
},
});
</pre>
</code>
</div>
</div>
</body>
<script type="module" src="index.js"></script>
</html>

232
src/page/index.js
View File

@ -1,232 +0,0 @@
import DropDown from '../index';
import './example';
// ------------------------------Обычный селект--------------------
const dropdown = new DropDown({
selector: '.cg-dropdown_one',
placeholder: 'Выберите авто',
lable: 'EXAMPLE',
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
});
// ------------------------------NativeSelect-----------------------
const dropdownNativeSelect = new DropDown({
selector: '.cg-dropdown_selectNative',
placeholder: 'Выберите авто',
nativeSelectMode: true,
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
'Kamaz',
'Ural'
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
});
// ------------------------------listDisplayMode--------------------
const dropdownlistDisplayMode = new DropDown({
selector: '.cg-dropdown_listDisplayMode',
placeholder: 'Выберите авто',
listDisplayMode: true,
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
});
// ------------------------------URL--------------------
const dropdown3 = new DropDown({
selector: '.cg-dropdown_three',
placeholder: 'URL',
url: 'https://jsonplaceholder.typicode.com/users',
searchMode: true,
darkTheme: false,
language: 'ru',
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
},
});
// --------------------------------Категории--------------------------
const dropdown4 = new DropDown({
selector: '.cg-dropdown_categories',
placeholder: 'Выберите регион',
searchMode: true,
items: [
{
category: 'Russia',
categoryItems: [
{
id: '28qwds',
title: 'Москва',
value: 0,
},
,
'Ростов-на-дону',
'Саратов',
'Волгоград',
'Донецк',
],
},
{
category: 'USA',
categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
},
{
category: 'France',
categoryItems: ['Paris'],
},
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
placeholder: {
maxWidth: '500px ',
},
},
multiselect: true,
multiselectTag: true,
});
//----------------управление с помощью кнопок----------------------------------
const dropdownBtn = new DropDown({
selector: '.cg-dropdown_usedBtn',
placeholder: 'Выберите авто',
searchMode: true,
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'max',
],
styles: {
head: {
width: '830px',
color: 'black',
backgroundColor: 'rgb(176 223 167)',
},
list: {
width: '824px',
color: 'black',
backgroundColor: 'rgb(176 223 167)',
},
caret: {
borderTop: '6px solid black',
},
search: {
backgroundColor: '#d7ffff',
borderRadius: '5px',
borderBottom: 'none',
width: '95%',
color: 'black',
},
},
multiselect: true,
});
const buttonOpen = document.querySelector('.button__open');
const buttonClose = document.querySelector('.button__close');
dropdownBtn.buttonControl(buttonOpen, 'open');
dropdownBtn.buttonControl(buttonClose, 'close');
//-------------------------Функция Disabled----------------------------------
const dropdownDisabled = new DropDown({
selector: '.cg-dropdown_checkboxDisable',
placeholder: 'Выберите авто',
searchMode: true,
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'max',
],
styles: {
head: {
width: '830px',
},
list: {
width: '824px',
},
placeholder: {
maxWidth: '500px ',
},
},
multiselect: true,
});
dropdownDisabled.disabled(true);
let chbox = document.getElementById('checkboxDisable');
chbox.addEventListener('click', () => {
if (chbox.checked == true) {
dropdownDisabled.disabled(false);
} else {
dropdownDisabled.disabled(true);
}
});