- const dropdown = new DropDown({
+ const dropdown = new CGSelect({
selector: '.cg-dropdown_one',
placeholder: 'Выберите авто',
lable: 'EXAMPLE',
@@ -89,7 +89,7 @@
- const dropdown = new DropDown({
+ const dropdown = new CGSelect({
selector: '.cg-dropdown_one',
placeholder: 'Выберите авто',
nativeSelectMode: true,
@@ -133,7 +133,7 @@
- const dropdown = new DropDown({
+ const dropdown = new CGSelect({
selector: '.cg-dropdown_listDisplayMode',
placeholder: 'Выберите авто',
listDisplayMode: true,
@@ -171,7 +171,7 @@
- const dropdown = new DropDown({
+ const dropdown = new CGSelect({
selector: '.cg-dropdown_three',
placeholder: 'URL',
url: 'https://jsonplaceholder.typicode.com/users',
@@ -201,7 +201,7 @@
- const dropdown = new DropDown({
+ const dropdown = new CGSelect({
selector: '.cg-dropdown_categories',
placeholder: 'Выберите регион',
searchMode: true,
@@ -267,7 +267,7 @@
- const dropdown = new DropDown({
+ const dropdown = new CGSelect({
selector: '.cg-dropdown_usedBtn',
placeholder: 'Выберите авто',
searchMode: true,
@@ -323,7 +323,7 @@
- const dropdown = new DropDown({
+ const dropdown = new CGSelect({
selector: '.cg-dropdown_checkboxDisable',
placeholder: 'Выберите авто',
searchMode: true,
diff --git a/example/index.js b/example/index.js
index 97649f8..55d9aaa 100644
--- a/example/index.js
+++ b/example/index.js
@@ -1,8 +1,8 @@
-import DropDown from '../index';
+import { CGSelect } from '../src/cg-select';
import './example';
// ------------------------------Обычный селект--------------------
-const dropdown = new DropDown({
+const dropdown = new CGSelect({
selector: '.cg-dropdown_one',
placeholder: 'Выберите авто',
lable: 'EXAMPLE',
@@ -28,7 +28,7 @@ const dropdown = new DropDown({
});
// ------------------------------NativeSelect-----------------------
-const dropdownNativeSelect = new DropDown({
+const dropdownNativeSelect = new CGSelect({
selector: '.cg-dropdown_selectNative',
placeholder: 'Выберите авто',
nativeSelectMode: true,
@@ -43,7 +43,7 @@ const dropdownNativeSelect = new DropDown({
'MAN',
'Ferari',
'Kamaz',
- 'Ural'
+ 'Ural',
],
styles: {
head: {
@@ -56,7 +56,7 @@ const dropdownNativeSelect = new DropDown({
});
// ------------------------------listDisplayMode--------------------
-const dropdownlistDisplayMode = new DropDown({
+const dropdownlistDisplayMode = new CGSelect({
selector: '.cg-dropdown_listDisplayMode',
placeholder: 'Выберите авто',
listDisplayMode: true,
@@ -81,26 +81,8 @@ const dropdownlistDisplayMode = new DropDown({
},
});
-// ------------------------------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({
+const dropdown4 = new CGSelect({
selector: '.cg-dropdown_categories',
placeholder: 'Выберите регион',
searchMode: true,
@@ -145,7 +127,7 @@ const dropdown4 = new DropDown({
});
//----------------управление с помощью кнопок----------------------------------
-const dropdownBtn = new DropDown({
+const dropdownBtn = new CGSelect({
selector: '.cg-dropdown_usedBtn',
placeholder: 'Выберите авто',
searchMode: true,
@@ -192,7 +174,7 @@ dropdownBtn.buttonControl(buttonOpen, 'open');
dropdownBtn.buttonControl(buttonClose, 'close');
//-------------------------Функция Disabled----------------------------------
-const dropdownDisabled = new DropDown({
+const dropdownDisabled = new CGSelect({
selector: '.cg-dropdown_checkboxDisable',
placeholder: 'Выберите авто',
searchMode: true,
@@ -230,3 +212,22 @@ chbox.addEventListener('click', () => {
dropdownDisabled.disabled(true);
}
});
+
+// ------------------------------URL--------------------
+const dropdown3 = new CGSelect({
+ selector: '.cg-dropdown_three',
+ placeholder: 'URL',
+ url: 'https://jsonplaceholder.typicode.com/todos',
+ searchMode: true,
+ darkTheme: false,
+ language: 'ru',
+ styles: {
+ head: {
+ width: '830px',
+ },
+ list: {
+ width: '824px',
+ },
+ },
+ multiselect: true,
+});
diff --git a/index.js b/index.js
index f7f8241..d3c8b2f 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,3 @@
-import { DropDown } from './src/cg-select';
+import { CGSelect } from './src/cg-select';
-export default DropDown;
+export default CGSelect;
diff --git a/package-lock.json b/package-lock.json
index 75f0f49..e532c4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,19 @@
{
"name": "cg-select",
- "version": "0.1.171",
+ "version": "0.2.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "cg-select",
- "version": "0.1.171",
+ "version": "0.2.1",
"license": "ISC",
"dependencies": {
"@parcel/optimizer-css": "^2.8.0",
- "gh-pages": "^4.0.0"
+ "@types/prettier": "^2.7.2",
+ "gh-pages": "^4.0.0",
+ "typedoc": "^0.23.24",
+ "typescript": "^4.9.4"
},
"devDependencies": {
"@parcel/transformer-sass": "^2.7.0",
@@ -799,6 +802,304 @@
"url": "https://opencollective.com/parcel"
}
},
+ "node_modules/@parcel/optimizer-css/node_modules/@parcel/core": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.8.2.tgz",
+ "integrity": "sha512-ZGuq6p+Lzx6fgufaVsuOBwgpU3hgskTvIDIMdIDi9gOZyhGPK7U2srXdX+VYUL5ZSGbX04/P6QlB9FMAXK+nEg==",
+ "peer": true,
+ "dependencies": {
+ "@mischnic/json-sourcemap": "^0.1.0",
+ "@parcel/cache": "2.8.2",
+ "@parcel/diagnostic": "2.8.2",
+ "@parcel/events": "2.8.2",
+ "@parcel/fs": "2.8.2",
+ "@parcel/graph": "2.8.2",
+ "@parcel/hash": "2.8.2",
+ "@parcel/logger": "2.8.2",
+ "@parcel/package-manager": "2.8.2",
+ "@parcel/plugin": "2.8.2",
+ "@parcel/source-map": "^2.1.1",
+ "@parcel/types": "2.8.2",
+ "@parcel/utils": "2.8.2",
+ "@parcel/workers": "2.8.2",
+ "abortcontroller-polyfill": "^1.1.9",
+ "base-x": "^3.0.8",
+ "browserslist": "^4.6.6",
+ "clone": "^2.1.1",
+ "dotenv": "^7.0.0",
+ "dotenv-expand": "^5.1.0",
+ "json5": "^2.2.0",
+ "msgpackr": "^1.5.4",
+ "nullthrows": "^1.1.1",
+ "semver": "^5.7.1"
+ },
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/cache": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/cache/-/cache-2.8.2.tgz",
+ "integrity": "sha512-kiyoOgh1RXp5qp+wlb8Pi/Z7o9D82Oj5RlHnKSAauyR7jgnI8Vq8JTeBmlLqrf+kHxcDcp2p86hidSeANhlQNg==",
+ "peer": true,
+ "dependencies": {
+ "@parcel/fs": "2.8.2",
+ "@parcel/logger": "2.8.2",
+ "@parcel/utils": "2.8.2",
+ "lmdb": "2.5.2"
+ },
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ },
+ "peerDependencies": {
+ "@parcel/core": "^2.8.2"
+ }
+ },
+ "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/codeframe": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/codeframe/-/codeframe-2.8.2.tgz",
+ "integrity": "sha512-U2GT9gq1Zs3Gr83j8JIs10bLbGOHFl57Y8D57nrdR05F4iilV/UR6K7jkhdoiFc9WiHh3ewvrko5+pSdAVFPgQ==",
+ "peer": true,
+ "dependencies": {
+ "chalk": "^4.1.0"
+ },
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/diagnostic": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.2.tgz",
+ "integrity": "sha512-tGSMwM2rSYLjJW0fCd9gb3tNjfCX/83PZ10/5u2E33UZVkk8OIHsQmsrtq2H2g4oQL3rFxkfEx6nGPDGHwlx7A==",
+ "peer": true,
+ "dependencies": {
+ "@mischnic/json-sourcemap": "^0.1.0",
+ "nullthrows": "^1.1.1"
+ },
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/events": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/events/-/events-2.8.2.tgz",
+ "integrity": "sha512-o5etrsKm16y8iRPnjtEBNy4lD0WAigD66yt/RZl9Rx0vPVDly/63Rr9+BrXWVW7bJ7x0S0VVpWW4j3f/qZOsXg==",
+ "peer": true,
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/fs": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/fs/-/fs-2.8.2.tgz",
+ "integrity": "sha512-aN8znbMndSqn1xwZEmMblzqmJsxcExv2jKLl/a9RUHAP7LaPYcPZIykDL3YwGCiKTCzjmRpXnNoyosjFFeBaHA==",
+ "peer": true,
+ "dependencies": {
+ "@parcel/fs-search": "2.8.2",
+ "@parcel/types": "2.8.2",
+ "@parcel/utils": "2.8.2",
+ "@parcel/watcher": "^2.0.7",
+ "@parcel/workers": "2.8.2"
+ },
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ },
+ "peerDependencies": {
+ "@parcel/core": "^2.8.2"
+ }
+ },
+ "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/fs-search": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/fs-search/-/fs-search-2.8.2.tgz",
+ "integrity": "sha512-ovQnupRm/MoE/tbgH0Ivknk0QYenXAewjcog+T5umDmUlTmnIRZjURrgDf5Xtw8T/CD5Xv+HmIXpJ9Ez/LzJpw==",
+ "peer": true,
+ "dependencies": {
+ "detect-libc": "^1.0.3"
+ },
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/hash": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.2.tgz",
+ "integrity": "sha512-NBnP8Hu0xvAqAfZXRaMM66i8nJyxpKS86BbhwkbgTGbwO1OY87GERliHeREJfcER0E0ZzwNow7MNR8ZDm6IvJQ==",
+ "peer": true,
+ "dependencies": {
+ "detect-libc": "^1.0.3",
+ "xxhash-wasm": "^0.4.2"
+ },
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/logger": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-2.8.2.tgz",
+ "integrity": "sha512-zlhK6QHxfFJMlVJxxcCw0xxBDrYPFPOhMxSD6p6b0z9Yct1l3NdpmfabgjKX8wnZmHokFsil6daleM+M80n2Ew==",
+ "peer": true,
+ "dependencies": {
+ "@parcel/diagnostic": "2.8.2",
+ "@parcel/events": "2.8.2"
+ },
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/markdown-ansi": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/markdown-ansi/-/markdown-ansi-2.8.2.tgz",
+ "integrity": "sha512-5y29TXgRgG0ybuXaDsDk4Aofg/nDUeAAyVl9/toYCDDhxpQV4yZt8WNPu4PaNYKGLuNgXwsmz+ryZQHGmfbAIQ==",
+ "peer": true,
+ "dependencies": {
+ "chalk": "^4.1.0"
+ },
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/package-manager": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/package-manager/-/package-manager-2.8.2.tgz",
+ "integrity": "sha512-hx4Imi0yhsSS0aNZkEANPYNNKqBuR63EUNWSxMyHh4ZOvbHoOXnMn1ySGdx6v0oi9HvKymNsLMQ1T5CuI4l4Bw==",
+ "peer": true,
+ "dependencies": {
+ "@parcel/diagnostic": "2.8.2",
+ "@parcel/fs": "2.8.2",
+ "@parcel/logger": "2.8.2",
+ "@parcel/types": "2.8.2",
+ "@parcel/utils": "2.8.2",
+ "@parcel/workers": "2.8.2",
+ "semver": "^5.7.1"
+ },
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ },
+ "peerDependencies": {
+ "@parcel/core": "^2.8.2"
+ }
+ },
+ "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/plugin": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/plugin/-/plugin-2.8.2.tgz",
+ "integrity": "sha512-YG7TWfKsoNm72jbz3b3TLec0qJHVkuAWSzGzowdIhX37cP1kRfp6BU2VcH+qYPP/KYJLzhcZa9n3by147mGcxw==",
+ "peer": true,
+ "dependencies": {
+ "@parcel/types": "2.8.2"
+ },
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/types": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/types/-/types-2.8.2.tgz",
+ "integrity": "sha512-HAYhokWxM10raIhqaYj9VR9eAvJ+xP2sNfQ1IcQybHpq3qblcBe/4jDeuUpwIyKeQ4gorp7xY+q8KDoR20j43w==",
+ "peer": true,
+ "dependencies": {
+ "@parcel/cache": "2.8.2",
+ "@parcel/diagnostic": "2.8.2",
+ "@parcel/fs": "2.8.2",
+ "@parcel/package-manager": "2.8.2",
+ "@parcel/source-map": "^2.1.1",
+ "@parcel/workers": "2.8.2",
+ "utility-types": "^3.10.0"
+ }
+ },
+ "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/utils": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-2.8.2.tgz",
+ "integrity": "sha512-Ufax7wZxC9FNsUpR0EU7Z22LEY/q9jjsDTwswctCdfpWb7TE/NudOfM9myycfRvwBVEYN50lPbkt1QltEVnXQQ==",
+ "peer": true,
+ "dependencies": {
+ "@parcel/codeframe": "2.8.2",
+ "@parcel/diagnostic": "2.8.2",
+ "@parcel/hash": "2.8.2",
+ "@parcel/logger": "2.8.2",
+ "@parcel/markdown-ansi": "2.8.2",
+ "@parcel/source-map": "^2.1.1",
+ "chalk": "^4.1.0"
+ },
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/workers": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/workers/-/workers-2.8.2.tgz",
+ "integrity": "sha512-Eg6CofIrJSNBa2fjXwvnzVLPKwR/6fkfQTFAm3Jl+4JYLVknBtTSFzQNp/Fa+HUEG889H9ucTk2CBi/fVPBAFw==",
+ "peer": true,
+ "dependencies": {
+ "@parcel/diagnostic": "2.8.2",
+ "@parcel/logger": "2.8.2",
+ "@parcel/types": "2.8.2",
+ "@parcel/utils": "2.8.2",
+ "chrome-trace-event": "^1.0.2",
+ "nullthrows": "^1.1.1"
+ },
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ },
+ "peerDependencies": {
+ "@parcel/core": "^2.8.2"
+ }
+ },
"node_modules/@parcel/optimizer-css/node_modules/@parcel/diagnostic": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.0.tgz",
@@ -864,6 +1165,22 @@
"url": "https://opencollective.com/parcel"
}
},
+ "node_modules/@parcel/optimizer-css/node_modules/@parcel/graph": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/graph/-/graph-2.8.2.tgz",
+ "integrity": "sha512-SLEvBQBgfkXgU4EBu30+CNanpuKjcNuEv/x8SwobCF0i3Rk+QKbe7T36bNR7727mao++2Ha69q93Dd9dTPw0kQ==",
+ "peer": true,
+ "dependencies": {
+ "nullthrows": "^1.1.1"
+ },
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
"node_modules/@parcel/optimizer-css/node_modules/@parcel/hash": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.0.tgz",
@@ -1766,11 +2083,15 @@
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
"dev": true
},
+ "node_modules/@types/prettier": {
+ "version": "2.7.2",
+ "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz",
+ "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg=="
+ },
"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",
@@ -1853,7 +2174,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"
}
@@ -2023,7 +2343,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"
}
@@ -2211,7 +2530,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"
}
@@ -2219,8 +2537,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",
@@ -2700,6 +3017,11 @@
"node": ">=6"
}
},
+ "node_modules/jsonc-parser": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+ "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
+ },
"node_modules/jsonfile": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -2951,6 +3273,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
+ "node_modules/lunr": {
+ "version": "2.3.9",
+ "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+ "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
+ },
"node_modules/make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -3012,7 +3339,6 @@
"version": "4.2.5",
"resolved": "https://registry.npmjs.org/marked/-/marked-4.2.5.tgz",
"integrity": "sha512-jPueVhumq7idETHkb203WDD4fMA3yV9emQ5vLwop58lu8bTclMghBWcYAavlDqIEMaisADinV1TooIFCfqOsYQ==",
- "dev": true,
"bin": {
"marked": "bin/marked.js"
},
@@ -3461,7 +3787,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",
@@ -3502,6 +3827,16 @@
"semver": "bin/semver"
}
},
+ "node_modules/shiki": {
+ "version": "0.12.1",
+ "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.12.1.tgz",
+ "integrity": "sha512-aieaV1m349rZINEBkjxh2QbBvFFQOlgqYTNtCal82hHj4dDZ76oMlQIX+C7ryerBTDiga3e5NfH6smjdJ02BbQ==",
+ "dependencies": {
+ "jsonc-parser": "^3.2.0",
+ "vscode-oniguruma": "^1.7.0",
+ "vscode-textmate": "^8.0.0"
+ }
+ },
"node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -3675,6 +4010,57 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/typedoc": {
+ "version": "0.23.24",
+ "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.23.24.tgz",
+ "integrity": "sha512-bfmy8lNQh+WrPYcJbtjQ6JEEsVl/ce1ZIXyXhyW+a1vFrjO39t6J8sL/d6FfAGrJTc7McCXgk9AanYBSNvLdIA==",
+ "dependencies": {
+ "lunr": "^2.3.9",
+ "marked": "^4.2.5",
+ "minimatch": "^5.1.2",
+ "shiki": "^0.12.1"
+ },
+ "bin": {
+ "typedoc": "bin/typedoc"
+ },
+ "engines": {
+ "node": ">= 14.14"
+ },
+ "peerDependencies": {
+ "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x"
+ }
+ },
+ "node_modules/typedoc/node_modules/brace-expansion": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+ "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+ "dependencies": {
+ "balanced-match": "^1.0.0"
+ }
+ },
+ "node_modules/typedoc/node_modules/minimatch": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.2.tgz",
+ "integrity": "sha512-bNH9mmM9qsJ2X4r2Nat1B//1dJVcn3+iBLa3IgqJ7EbGaDNepL9QSHOxN4ng33s52VMMhhIfgCYDk3C4ZmlDAg==",
+ "dependencies": {
+ "brace-expansion": "^2.0.1"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/typescript": {
+ "version": "4.9.4",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+ "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
+ "bin": {
+ "tsc": "bin/tsc",
+ "tsserver": "bin/tsserver"
+ },
+ "engines": {
+ "node": ">=4.2.0"
+ }
+ },
"node_modules/uc.micro": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
@@ -3734,6 +4120,16 @@
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
"dev": true
},
+ "node_modules/vscode-oniguruma": {
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
+ "integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA=="
+ },
+ "node_modules/vscode-textmate": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz",
+ "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg=="
+ },
"node_modules/weak-lru-cache": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",
@@ -4275,6 +4671,196 @@
"chalk": "^4.1.0"
}
},
+ "@parcel/core": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.8.2.tgz",
+ "integrity": "sha512-ZGuq6p+Lzx6fgufaVsuOBwgpU3hgskTvIDIMdIDi9gOZyhGPK7U2srXdX+VYUL5ZSGbX04/P6QlB9FMAXK+nEg==",
+ "peer": true,
+ "requires": {
+ "@mischnic/json-sourcemap": "^0.1.0",
+ "@parcel/cache": "2.8.2",
+ "@parcel/diagnostic": "2.8.2",
+ "@parcel/events": "2.8.2",
+ "@parcel/fs": "2.8.2",
+ "@parcel/graph": "2.8.2",
+ "@parcel/hash": "2.8.2",
+ "@parcel/logger": "2.8.2",
+ "@parcel/package-manager": "2.8.2",
+ "@parcel/plugin": "2.8.2",
+ "@parcel/source-map": "^2.1.1",
+ "@parcel/types": "2.8.2",
+ "@parcel/utils": "2.8.2",
+ "@parcel/workers": "2.8.2",
+ "abortcontroller-polyfill": "^1.1.9",
+ "base-x": "^3.0.8",
+ "browserslist": "^4.6.6",
+ "clone": "^2.1.1",
+ "dotenv": "^7.0.0",
+ "dotenv-expand": "^5.1.0",
+ "json5": "^2.2.0",
+ "msgpackr": "^1.5.4",
+ "nullthrows": "^1.1.1",
+ "semver": "^5.7.1"
+ },
+ "dependencies": {
+ "@parcel/cache": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/cache/-/cache-2.8.2.tgz",
+ "integrity": "sha512-kiyoOgh1RXp5qp+wlb8Pi/Z7o9D82Oj5RlHnKSAauyR7jgnI8Vq8JTeBmlLqrf+kHxcDcp2p86hidSeANhlQNg==",
+ "peer": true,
+ "requires": {
+ "@parcel/fs": "2.8.2",
+ "@parcel/logger": "2.8.2",
+ "@parcel/utils": "2.8.2",
+ "lmdb": "2.5.2"
+ }
+ },
+ "@parcel/codeframe": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/codeframe/-/codeframe-2.8.2.tgz",
+ "integrity": "sha512-U2GT9gq1Zs3Gr83j8JIs10bLbGOHFl57Y8D57nrdR05F4iilV/UR6K7jkhdoiFc9WiHh3ewvrko5+pSdAVFPgQ==",
+ "peer": true,
+ "requires": {
+ "chalk": "^4.1.0"
+ }
+ },
+ "@parcel/diagnostic": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.2.tgz",
+ "integrity": "sha512-tGSMwM2rSYLjJW0fCd9gb3tNjfCX/83PZ10/5u2E33UZVkk8OIHsQmsrtq2H2g4oQL3rFxkfEx6nGPDGHwlx7A==",
+ "peer": true,
+ "requires": {
+ "@mischnic/json-sourcemap": "^0.1.0",
+ "nullthrows": "^1.1.1"
+ }
+ },
+ "@parcel/events": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/events/-/events-2.8.2.tgz",
+ "integrity": "sha512-o5etrsKm16y8iRPnjtEBNy4lD0WAigD66yt/RZl9Rx0vPVDly/63Rr9+BrXWVW7bJ7x0S0VVpWW4j3f/qZOsXg==",
+ "peer": true
+ },
+ "@parcel/fs": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/fs/-/fs-2.8.2.tgz",
+ "integrity": "sha512-aN8znbMndSqn1xwZEmMblzqmJsxcExv2jKLl/a9RUHAP7LaPYcPZIykDL3YwGCiKTCzjmRpXnNoyosjFFeBaHA==",
+ "peer": true,
+ "requires": {
+ "@parcel/fs-search": "2.8.2",
+ "@parcel/types": "2.8.2",
+ "@parcel/utils": "2.8.2",
+ "@parcel/watcher": "^2.0.7",
+ "@parcel/workers": "2.8.2"
+ }
+ },
+ "@parcel/fs-search": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/fs-search/-/fs-search-2.8.2.tgz",
+ "integrity": "sha512-ovQnupRm/MoE/tbgH0Ivknk0QYenXAewjcog+T5umDmUlTmnIRZjURrgDf5Xtw8T/CD5Xv+HmIXpJ9Ez/LzJpw==",
+ "peer": true,
+ "requires": {
+ "detect-libc": "^1.0.3"
+ }
+ },
+ "@parcel/hash": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.2.tgz",
+ "integrity": "sha512-NBnP8Hu0xvAqAfZXRaMM66i8nJyxpKS86BbhwkbgTGbwO1OY87GERliHeREJfcER0E0ZzwNow7MNR8ZDm6IvJQ==",
+ "peer": true,
+ "requires": {
+ "detect-libc": "^1.0.3",
+ "xxhash-wasm": "^0.4.2"
+ }
+ },
+ "@parcel/logger": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-2.8.2.tgz",
+ "integrity": "sha512-zlhK6QHxfFJMlVJxxcCw0xxBDrYPFPOhMxSD6p6b0z9Yct1l3NdpmfabgjKX8wnZmHokFsil6daleM+M80n2Ew==",
+ "peer": true,
+ "requires": {
+ "@parcel/diagnostic": "2.8.2",
+ "@parcel/events": "2.8.2"
+ }
+ },
+ "@parcel/markdown-ansi": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/markdown-ansi/-/markdown-ansi-2.8.2.tgz",
+ "integrity": "sha512-5y29TXgRgG0ybuXaDsDk4Aofg/nDUeAAyVl9/toYCDDhxpQV4yZt8WNPu4PaNYKGLuNgXwsmz+ryZQHGmfbAIQ==",
+ "peer": true,
+ "requires": {
+ "chalk": "^4.1.0"
+ }
+ },
+ "@parcel/package-manager": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/package-manager/-/package-manager-2.8.2.tgz",
+ "integrity": "sha512-hx4Imi0yhsSS0aNZkEANPYNNKqBuR63EUNWSxMyHh4ZOvbHoOXnMn1ySGdx6v0oi9HvKymNsLMQ1T5CuI4l4Bw==",
+ "peer": true,
+ "requires": {
+ "@parcel/diagnostic": "2.8.2",
+ "@parcel/fs": "2.8.2",
+ "@parcel/logger": "2.8.2",
+ "@parcel/types": "2.8.2",
+ "@parcel/utils": "2.8.2",
+ "@parcel/workers": "2.8.2",
+ "semver": "^5.7.1"
+ }
+ },
+ "@parcel/plugin": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/plugin/-/plugin-2.8.2.tgz",
+ "integrity": "sha512-YG7TWfKsoNm72jbz3b3TLec0qJHVkuAWSzGzowdIhX37cP1kRfp6BU2VcH+qYPP/KYJLzhcZa9n3by147mGcxw==",
+ "peer": true,
+ "requires": {
+ "@parcel/types": "2.8.2"
+ }
+ },
+ "@parcel/types": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/types/-/types-2.8.2.tgz",
+ "integrity": "sha512-HAYhokWxM10raIhqaYj9VR9eAvJ+xP2sNfQ1IcQybHpq3qblcBe/4jDeuUpwIyKeQ4gorp7xY+q8KDoR20j43w==",
+ "peer": true,
+ "requires": {
+ "@parcel/cache": "2.8.2",
+ "@parcel/diagnostic": "2.8.2",
+ "@parcel/fs": "2.8.2",
+ "@parcel/package-manager": "2.8.2",
+ "@parcel/source-map": "^2.1.1",
+ "@parcel/workers": "2.8.2",
+ "utility-types": "^3.10.0"
+ }
+ },
+ "@parcel/utils": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-2.8.2.tgz",
+ "integrity": "sha512-Ufax7wZxC9FNsUpR0EU7Z22LEY/q9jjsDTwswctCdfpWb7TE/NudOfM9myycfRvwBVEYN50lPbkt1QltEVnXQQ==",
+ "peer": true,
+ "requires": {
+ "@parcel/codeframe": "2.8.2",
+ "@parcel/diagnostic": "2.8.2",
+ "@parcel/hash": "2.8.2",
+ "@parcel/logger": "2.8.2",
+ "@parcel/markdown-ansi": "2.8.2",
+ "@parcel/source-map": "^2.1.1",
+ "chalk": "^4.1.0"
+ }
+ },
+ "@parcel/workers": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/workers/-/workers-2.8.2.tgz",
+ "integrity": "sha512-Eg6CofIrJSNBa2fjXwvnzVLPKwR/6fkfQTFAm3Jl+4JYLVknBtTSFzQNp/Fa+HUEG889H9ucTk2CBi/fVPBAFw==",
+ "peer": true,
+ "requires": {
+ "@parcel/diagnostic": "2.8.2",
+ "@parcel/logger": "2.8.2",
+ "@parcel/types": "2.8.2",
+ "@parcel/utils": "2.8.2",
+ "chrome-trace-event": "^1.0.2",
+ "nullthrows": "^1.1.1"
+ }
+ }
+ }
+ },
"@parcel/diagnostic": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.0.tgz",
@@ -4309,6 +4895,15 @@
"detect-libc": "^1.0.3"
}
},
+ "@parcel/graph": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/@parcel/graph/-/graph-2.8.2.tgz",
+ "integrity": "sha512-SLEvBQBgfkXgU4EBu30+CNanpuKjcNuEv/x8SwobCF0i3Rk+QKbe7T36bNR7727mao++2Ha69q93Dd9dTPw0kQ==",
+ "peer": true,
+ "requires": {
+ "nullthrows": "^1.1.1"
+ }
+ },
"@parcel/hash": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.0.tgz",
@@ -4884,11 +5479,15 @@
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
"dev": true
},
+ "@types/prettier": {
+ "version": "2.7.2",
+ "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz",
+ "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg=="
+ },
"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",
@@ -4950,7 +5549,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"
}
@@ -5061,8 +5659,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",
@@ -5197,14 +5794,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",
@@ -5538,6 +6133,11 @@
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA=="
},
+ "jsonc-parser": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+ "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
+ },
"jsonfile": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -5672,6 +6272,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
+ "lunr": {
+ "version": "2.3.9",
+ "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+ "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
+ },
"make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -5712,13 +6317,13 @@
"version": "8.6.6",
"resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-8.6.6.tgz",
"integrity": "sha512-jRW30YGywD2ESXDc+l17AiritL0uVaSnWsb26f+68qaW9zgbIIr1f4v2Nsvc0+s0Z2N3uX6t/yAw7BwCQ1wMsA==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"marked": {
"version": "4.2.5",
"resolved": "https://registry.npmjs.org/marked/-/marked-4.2.5.tgz",
- "integrity": "sha512-jPueVhumq7idETHkb203WDD4fMA3yV9emQ5vLwop58lu8bTclMghBWcYAavlDqIEMaisADinV1TooIFCfqOsYQ==",
- "dev": true
+ "integrity": "sha512-jPueVhumq7idETHkb203WDD4fMA3yV9emQ5vLwop58lu8bTclMghBWcYAavlDqIEMaisADinV1TooIFCfqOsYQ=="
},
"mdn-data": {
"version": "2.0.14",
@@ -6040,8 +6645,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",
@@ -6059,6 +6663,16 @@
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
},
+ "shiki": {
+ "version": "0.12.1",
+ "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.12.1.tgz",
+ "integrity": "sha512-aieaV1m349rZINEBkjxh2QbBvFFQOlgqYTNtCal82hHj4dDZ76oMlQIX+C7ryerBTDiga3e5NfH6smjdJ02BbQ==",
+ "requires": {
+ "jsonc-parser": "^3.2.0",
+ "vscode-oniguruma": "^1.7.0",
+ "vscode-textmate": "^8.0.0"
+ }
+ },
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -6185,6 +6799,40 @@
"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
"dev": true
},
+ "typedoc": {
+ "version": "0.23.24",
+ "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.23.24.tgz",
+ "integrity": "sha512-bfmy8lNQh+WrPYcJbtjQ6JEEsVl/ce1ZIXyXhyW+a1vFrjO39t6J8sL/d6FfAGrJTc7McCXgk9AanYBSNvLdIA==",
+ "requires": {
+ "lunr": "^2.3.9",
+ "marked": "^4.2.5",
+ "minimatch": "^5.1.2",
+ "shiki": "^0.12.1"
+ },
+ "dependencies": {
+ "brace-expansion": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+ "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+ "requires": {
+ "balanced-match": "^1.0.0"
+ }
+ },
+ "minimatch": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.2.tgz",
+ "integrity": "sha512-bNH9mmM9qsJ2X4r2Nat1B//1dJVcn3+iBLa3IgqJ7EbGaDNepL9QSHOxN4ng33s52VMMhhIfgCYDk3C4ZmlDAg==",
+ "requires": {
+ "brace-expansion": "^2.0.1"
+ }
+ }
+ }
+ },
+ "typescript": {
+ "version": "4.9.4",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+ "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg=="
+ },
"uc.micro": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
@@ -6222,6 +6870,16 @@
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
"dev": true
},
+ "vscode-oniguruma": {
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
+ "integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA=="
+ },
+ "vscode-textmate": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz",
+ "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg=="
+ },
"weak-lru-cache": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",
diff --git a/package.json b/package.json
index 407c559..125c31c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "cg-select",
- "version": "0.1.171",
+ "version": "0.2.1",
"description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
"author": {
"name": "CraftGroup",
@@ -9,7 +9,7 @@
"homepage": "https://cg-select.itguild.info",
"scripts": {
"start": "parcel example/index.html -p 4500 --open ",
- "build": "parcel build index.js",
+ "build": "parcel build example/index.js --no-cache",
"deploy": "gh-pages -d dist",
"predeploy": "npm run build"
},
@@ -29,7 +29,10 @@
},
"dependencies": {
"@parcel/optimizer-css": "^2.8.0",
- "gh-pages": "^4.0.0"
+ "@types/prettier": "^2.7.2",
+ "gh-pages": "^4.0.0",
+ "typedoc": "^0.23.24",
+ "typescript": "^4.9.4"
},
"keywords": [
"select",
diff --git a/src/cg-select.js b/src/cg-select.ts
similarity index 51%
rename from src/cg-select.js
rename to src/cg-select.ts
index 5a41e7c..ae78cc7 100644
--- a/src/cg-select.js
+++ b/src/cg-select.ts
@@ -1,90 +1,104 @@
import {
+ createBreadCrumb,
+ createInputSearch,
+ createNativeSelect,
+ createNativeSelectOption,
+} from './components/create-element/create-element';
+import { ICreateBreadCrumb } from './components/create-element/create-element.interface';
+
+import {
+ clearSelect,
createSelected,
customStyles,
+ customStylesFormat,
getFormatItem,
getSelectText,
- customStylesFormat,
nativeOptionMultiple,
nativeOptionOrdinary,
- clearSelect,
-} from './components/utils';
-import {
- createBreadcrumb,
- createInputSearch,
- createNativeSelectOption,
- createNativeSelect,
-} from './components/create-element';
+} from './components/utils/utils';
+import { IDataItem, ISelectedItems } from './components/utils/urils.interface';
+
+import { ICgSelect, IStyle } from './interfaces/cg-select.interface';
+import { IItems } from './interfaces/items.interface';
import { ru, en } from './language/language';
-import './main.scss'
+import { ILanguage } from './interfaces/language.interface';
+
+import './main.scss';
/**
- * @class Описание класса DropDown
+ * @class Описание класса ICgSelect
* @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
* @author Овсяников Максим
*/
-export class DropDown {
+export class CGSelect implements ICgSelect {
+ // Настройки селекта
+ selector?: string;
+ selected?: string;
+ placeholder?: string;
+ items?: IItems[] | string[] | any;
+ darkTheme?: boolean;
+ searchMode?: boolean;
+ closeOnSelect?: boolean;
+ nativeSelectMode?: boolean;
+ listDisplayMode?: boolean;
+ language?: string;
+ lable?: string;
+ styles?: IStyle;
+ event?: string;
+ url?: string;
+ multiselect?: boolean;
+ multiselectTag?: boolean;
+
+ // Переменные и комплектующие селекта
+
/**
* Созданный HTML елемент
- * @type {HTMLElement}
+ * @type {Element | null}
*/
- #element;
+ private element!: Element | null;
/**
* Созданный список(ul), с классом list
- * @type {HTMLElement}
+ * @type {Element | null | undefined}
*/
- #list;
+ private list!: Element | null;
/**
* Настройки селекта передаваемые при создании экземпляра класса
- * @type {object}
+ * @type {ICgSelect}
*/
- #options;
+ private options!: ICgSelect;
+ /**
+ * Уникальный Id для елементов
+ * @type {string}
+ */
+ private randomId!: string;
/**
* Переменная для управления каретки
- * @type {HTMLElement}
+ * @type {Element | null | undefined}
*/
- #caret;
- /**
- * Массив переданных элементов
- * @type {object[]}
- */
- #items;
+ private caret: Element | null | undefined;
/**
* Переданные категории
* @type {string}
*/
- #category;
+ private category?: string;
/**
* Выбранный или массив выбранных элементов из списка
- * @type {object[] | object}
+ * @type {string[] | string}
*/
- #selectedItems;
+ private selectedItems!: string[] | string;
/**
* Массив индексов выбранных элементов
* @type {number[]}
*/
- #indexes = [];
-
+ private indexes: number[] = [];
/**
- * Метод экземпляра класса DropDown
- * @returns {string[] | string | null} Возвращает выбранные элемент(ы) в виде массива/элемента/null
- * @description Геттер возвращающий выбранные элемент(ы) селекта
+ * Кнопка, для управления селектом
+ * @type {Element | null}
*/
- get value() {
- return this.#selectedItems ?? null;
- }
+ private btnCntr?: Element | null;
/**
- * Метод экземпляра класса DropDown
- * @returns {number | number[]}Возвращает индексы выбранных элемента(ов) в виде массива/пустой массив
- * @description Геттер возвращающий индексы выбранных элемента(ов) селекта
- */
- get indexes() {
- return this.#indexes ?? [];
- }
-
- /**
- *
- * @param {object} options Объект принимающий настройки селекта
+ * @param {ICgSelect} setting Объект принимающий настройки селекта
* @constructor Конструктор класса DropDown
* @description Конструктор принимает объект и рендерит селект.
* @example
@@ -92,6 +106,7 @@ export class DropDown {
* selector: 'Уникальный селектор',
selected: 'Выбранный элемент',
placeholder: '...',
+ lable: '...'
items: [string|number|object],
darkTheme: true/false,
searchMode: true/false,
@@ -113,184 +128,40 @@ export class DropDown {
url: 'http/...',
multiselect: true/false,
multiselectTag: true/false,
- * }
-
+ * }
*/
- constructor(options = {}) {
- this.#init(options);
- this.#render();
- this.#initEvent();
- this.#closeSelectClick();
+ constructor(setting: ICgSelect) {
+ this.init(setting);
+ this.render();
+ this.closeSelectClick();
+ this.initEvent();
+ }
+
+ //Getters
+ /**
+ * Метод экземпляра класса DropDown
+ * @returns {string[] | string} Возвращает выбранные элемент(ы) в виде массива/элемента/null
+ * @description Геттер возвращающий выбранные элемент(ы) селекта
+ */
+ get value(): string | string[] {
+ return this.selectedItems ?? null;
}
/**
* Метод экземпляра класса DropDown
- * @param {string | object} item добавляемый елемент
- * @description добавляет переданный элемент в конец списка и перерисовывает список. Не может использоваться при передачи элементов с категорями
- * @method addItem
+ * @returns {number | number[]}Возвращает индексы выбранных элемента(ов) в виде массива/пустой массив
+ * @description Геттер возвращающий индексы выбранных элемента(ов) селекта
*/
- addItem(item) {
- if (this.#category) {
- console.log('can`t add item to category');
- return;
- }
-
- if (!item) {
- return false;
- }
-
- const index = this.#items.length;
-
- this.#items.push(getFormatItem(item, index));
- this.#render();
- }
-
- /**
- * Метод экземпляра класса DropDown
- * @param {number} index индекс удаляемого элемента
- * @description удаляет елемент по индексу из списка и перерисовывает его. Не может использоваться при передачи элементов с категорями.
- * @method deleteItem
- */
- deleteItem(index) {
- if (this.#category) {
- console.log('can`t add item to category');
- return;
- }
-
- const item = this.#items[index];
-
- this.#items.splice(index, 1);
- this.#render();
- }
-
- /**
- * Метод экземпляра класса DropDown
- * @description удаляет все елементы из списка и перерисовывает его.
- * @method deleteItemAll
- */
- deleteItemAll() {
- this.#items.splice(0, this.#items.length);
- this.#render();
- }
-
- /**
- * Метод экземпляра класса DropDown
- * @param {number} index индекс выбранного элемента
- * @description выбирает элемент который будет изначально отрисовываться в селекте
- * @method selectIndex
- */
- selectIndex(index) {
- if (this.#category) {
- console.log('can`t add item to category');
- return;
- }
-
- const options = this.#element.querySelectorAll('.list__item');
-
- if (index > options.length) {
- return;
- }
-
- const select = options[index].innerText;
- this.#render(select);
- }
-
- /**
- * Метод экземпляра класса DropDown
- * @param {number} numberItem номер возвращаемого элемента
- * @returns {HTMLElement} возвращает ссылку на выбранный HTML элемент
- * @method getElement
- */
- getElement(numberItem) {
- if (numberItem > this.#items.length) {
- return;
- }
- return this.#items[numberItem];
- }
-
- /**
- * Метод экземпляра класса DropDown
- * @param {boolean} value - Передаваемый параметр для добавления атрибута disabled;
- * @description Метод позволяющий переключать состояние селекта disabled,
- * @method disabled
- */
- disabled(value) {
- if (typeof value !== 'boolean') {
- return;
- }
-
- const select = this.#element.querySelector('.cg-select');
- const nativeSelect = this.#element.querySelector('.nativeSelect');
- if (value === true) {
- this.#element.setAttribute('disabled', true);
- nativeSelect.setAttribute('disabled', true);
- select.classList.add('disabled');
- } else {
- this.#element.removeAttribute('disabled');
- nativeSelect.removeAttribute('disabled');
- select.classList.remove('disabled');
- }
- }
-
- /**
- * Метод экземпляра класса DropDown
- * @param {HTMLInputElement} button - HTML кнопка
- * @param {string} method - метод открытия open/close
- * @description Метод позволяющий открывать/закрывать селект с помощью кнопок
- * @method buttonControl
- */
- buttonControl(button, method) {
- const { listDisplayMode } = this.#options;
-
- if (listDisplayMode === true) {
- return;
- }
-
- this.btn = button;
- button.addEventListener('click', () => {
- if (method.toLowerCase() === 'open') {
- this.#open(true);
- } else if (method.toLowerCase() === 'close') {
- this.#close();
- } else {
- return;
- }
- });
- }
-
- /**
- * Метод экземпляра класса DropDown
- * @param {object} language объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
- * @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата
- * @method addLanguage
- */
- addLanguage(language) {
- const { placeholder, textInListSearch, selectPlaceholder } = language;
- const { searchMode } = this.#options;
-
- const select = this.#element.querySelector('.selected');
- const textNodeSelect = document.createTextNode(selectPlaceholder);
- select.appendChild(textNodeSelect);
-
- if (searchMode && searchMode == true) {
- const search = this.#element.querySelector('.inputSearch');
- const textNoRezult = this.#element.querySelector('.noRezult');
- const textNode = document.createTextNode(textInListSearch);
-
- search.setAttribute('placeholder', placeholder);
- search.setAttribute('placeholder', placeholder);
-
- textNoRezult.innerText = '';
- textNoRezult.appendChild(textNode);
- }
+ get indexesOf(): number | number[] {
+ return this.indexes ?? [];
}
/**
* Приватный метод инициализации экземпляра класса DropDown
- * @method #init
+ * @method init
* @member
* @protected
- * @param {object} options передаваемые настройки селекта
+ * @param {ISgSelect} setting передаваемые настройки селекта
* @description Приватный метод. Общая инициализация селекта. Получение настоек и преобразвание элементов селекта.
* @example
* {
@@ -312,147 +183,135 @@ export class DropDown {
multiselectTag: true,
}
*/
- #init(options) {
- this.#options = options;
- const { items, multiselect, url } = this.#options;
+ private init(setting: ICgSelect): void {
+ const {
+ items,
+ multiselect,
+ multiselectTag,
+ url,
+ selector,
+ listDisplayMode,
+ nativeSelectMode,
+ searchMode,
+ darkTheme,
+ language,
+ styles,
+ lable,
+ event,
+ selected,
+ placeholder,
+ } = setting;
- const elem = document.querySelector(options.selector);
+ this.options = setting;
- //TODO: для теста в реакте нужно пересмотреть необходимость этой проверки!
- // if (!elem) {
- // throw new Error(`Element with selector ${options.selector}`);
- // }
+ this.multiselect = multiselect;
+ this.multiselectTag = multiselectTag;
+ this.url = url;
+ this.selector = selector;
+ this.items = items;
+ this.searchMode = searchMode;
+ this.darkTheme = darkTheme;
+ this.language = language;
+ this.nativeSelectMode = nativeSelectMode;
+ this.listDisplayMode = listDisplayMode;
+ this.styles = styles;
+ this.lable = lable;
+ this.event = event;
+ this.selected = selected;
+ this.placeholder = placeholder;
- this.#element = elem;
+ const elem = document.querySelector(this.selector!);
+ this.element = elem;
- this.#element.addEventListener('click', (e) => {
+ this.element?.addEventListener('click', (e) => {
e.preventDefault();
- this.#open();
+ this.open();
});
- this.#items = [];
+ this.items = [];
- if (multiselect && multiselect == true) {
- this.#selectedItems = [];
- }
-
- if (!items && url) {
- this.#renderUrl();
+ if (this.url && !items) {
+ this.renderUrl();
return;
}
- items.forEach((dataItem, index) => {
- if (dataItem.category && dataItem.categoryItems) {
- this.#category = dataItem.category;
-
- this.#items.push(this.#category);
- dataItem.categoryItems.forEach((categoryItem, indexCategory) => {
- this.#items.push(getFormatItem(categoryItem, indexCategory));
- });
- } else {
- this.#items.push(getFormatItem(dataItem, index));
- }
- });
- }
-
- /**
- * Привaтный метод экземпляра класса DropDown
- *
- * @method #initSelected
- * @param {string} select необязательный елемент. Используется в методе selectIndex
- * @description Отрисовывает и стилизует селект
- * @protected
- */
- #initSelected(select) {
- const { styles, selected, placeholder, lable, language } = this.#options;
-
- if (selected) {
- createSelected(this.#element, selected);
- } else if (placeholder) {
- createSelected(this.#element, placeholder);
- } else {
- if (language && language === 'ru') {
- createSelected(this.#element, ru.selectPlaceholder);
- } else {
- createSelected(this.#element, en.selectPlaceholder);
- }
- }
-
- if (select) {
- createSelected(this.#element, select, styles);
- }
-
- if (lable) {
+ if (this.lable) {
const lableItem = document.createElement('h1');
- const textLable = document.createTextNode(lable);
+ const textLable = document.createTextNode(this.lable);
lableItem.appendChild(textLable);
lableItem.classList.add('label');
- this.#element.insertAdjacentElement('beforebegin', lableItem);
+ this.element!.insertAdjacentElement('beforebegin', lableItem);
}
- if (styles) {
- customStyles(this.#element, styles);
- }
+ items.forEach((dataItem: any, index: number) => {
+ let itemInputs: IDataItem = {
+ ItemValue: dataItem,
+ category: dataItem.category,
+ categoryItems: dataItem.categoryItems,
+ };
+
+ if (itemInputs.category && itemInputs.categoryItems) {
+ this.category = itemInputs.category!;
+ this.items.push(this.category);
+ itemInputs.categoryItems.forEach(
+ (categoryItem: string | IItems | any, indexCategory: number) => {
+ this.items.push(getFormatItem(categoryItem, indexCategory));
+ },
+ );
+ } else {
+ this.items.push(getFormatItem(itemInputs.ItemValue, index));
+ }
+ });
}
/**
* Приватный метод рендера экземпляра класса DropDown
- *@protected
- * @method #render
+ * @protected
+ * @method render
* @param {string} select необязательный елемент. Передаеться в метод initSelected
* @description Рендер елементов в селекте.
*/
- #render(select) {
- const {
- styles,
- multiselect,
- searchMode,
- multiselectTag,
- darkTheme,
- language,
- nativeSelectMode,
- listDisplayMode,
- } = this.#options;
-
+ private render(select?: string): void {
const random = Math.random().toString(36).substring(2, 10);
- if (select || (select && styles)) {
- this.#initSelected(select);
- customStyles(this.#element, styles);
+ if (select || (select && this.styles)) {
+ this.initSelected(select);
+ customStyles(this.element!, this.styles!);
} else {
- this.#initSelected();
+ this.initSelected();
}
const ulList = document.createElement('ul');
const nativeSelect = createNativeSelect();
- let inputSearch = '';
- this.random = random;
+ let inputSearch: HTMLInputElement;
+ let textNode: Text;
- if (searchMode) {
- if (language === 'ru') {
+ this.randomId = random;
+
+ ulList.classList.add('list');
+
+ if (this.styles) {
+ customStylesFormat(this.styles.list!, ulList);
+ }
+
+ if (this.searchMode) {
+ if (this.language === 'ru') {
inputSearch = createInputSearch(random, ru.placeholder);
} else {
inputSearch = createInputSearch(random, en.placeholder);
}
- const { search } = styles;
- customStylesFormat(search, inputSearch);
+
+ customStylesFormat(this.styles?.search!, inputSearch);
ulList.appendChild(inputSearch);
}
- ulList.classList.add('list');
+ this.element?.appendChild(ulList);
- if (styles) {
- const { list } = styles;
- customStylesFormat(list, ulList);
- }
-
- this.#element.appendChild(ulList);
-
- this.#items.forEach((dataItem) => {
- this.#element.appendChild(nativeSelect);
+ this.items.forEach((dataItem: IItems | any) => {
+ this.element?.appendChild(nativeSelect);
const liItem = document.createElement('li');
const nativeOption = createNativeSelectOption();
@@ -461,21 +320,19 @@ export class DropDown {
liItem.classList.add('list__item');
strongItem.classList.add('category');
- if (multiselect && multiselect == true) {
+ if (this.multiselect) {
const checkBox = document.createElement('input');
checkBox.type = 'checkbox';
checkBox.setAttribute('id', `chbox-${dataItem.id}`);
liItem.appendChild(checkBox);
- if (multiselectTag && multiselectTag == true) {
+ if (this.multiselectTag) {
checkBox.classList.add('displayHide');
}
nativeSelect.setAttribute('multiple', 'multiple');
}
- let textNode = '';
-
if (dataItem.title) {
nativeOption.text = dataItem.title;
nativeOption.value = dataItem.title;
@@ -485,104 +342,70 @@ export class DropDown {
liItem.appendChild(textNode);
ulList.appendChild(liItem);
} else {
+ // Для отрисовки категорий
textNode = document.createTextNode(dataItem);
strongItem.appendChild(textNode);
ulList.appendChild(strongItem);
}
});
- this.#items.filter((item, index) => {
+ this.items.filter((item: IItems | any, index: number) => {
if (typeof item !== 'object') {
- this.#items.splice(index, 1);
+ this.items.splice(index, 1);
}
+
return item;
});
- if (darkTheme == false) {
- this.#checkTheme();
+ this.list = this.element!.querySelector('.list');
+ this.caret = this.element!.querySelector('.caret');
+
+ if (this.darkTheme == false) {
+ this.checkTheme();
}
- if (nativeSelectMode === true) {
- this.#selectMode(nativeSelectMode);
+ if (this.nativeSelectMode === true) {
+ this.selectMode(this.nativeSelectMode);
}
- this.#list = this.#element.querySelector('.list');
- this.#caret = this.#element.querySelector('.caret');
-
- if (listDisplayMode === true) {
- this.#displayMode(listDisplayMode);
+ if (this.listDisplayMode) {
+ this.displayMode(this.listDisplayMode);
}
- this.#addOptionsBehaviour();
+ this.addOptionsBehaviour();
}
/**
* Приватный метод рендера экземпляра класса DropDown
* @protected
- * @method #checkTheme
- * @description Изменяет цветовую схему с темной на светлую.
- */
- #checkTheme() {
- const { darkTheme, searchMode } = this.#options;
-
- const select = this.#element.querySelector('.cg-select');
- const caret = this.#element.querySelector('.caret');
- const list = this.#element.querySelector('ul.list');
- const search = this.#element.querySelector('.inputSearch');
-
- if (darkTheme == false) {
- select.classList.add('selectWhite');
- caret.classList.add('caretWhite');
- list.classList.add('listWhite');
-
- if (searchMode == true) {
- search.classList.add('inputWhite');
- }
- } else if (darkTheme == true || !darkTheme) {
- return;
- } else {
- throw new Error('Styles error or invalid value entered!');
- }
- }
-
- /**
- * Приватный метод рендера экземпляра класса DropDown
- *@protected
- * @method #renderUrl
+ * @method renderUrl
* @description Рендер елементов в селекте переданных с URL и их настойка
*/
- async #renderUrl() {
- const { url, items, multiselect, multiselectTag } = this.#options;
-
- if (items) {
- return;
- }
-
- if (!url) {
- return;
- }
-
- const response = await fetch(url);
+ private async renderUrl() {
+ const response = await fetch(this.url!);
const dataUrl = await response.json();
+ console.log(dataUrl);
const nativeSelect = createNativeSelect();
- dataUrl.forEach((dataItem, index) => {
+ dataUrl.forEach((dataItem: IItems, index: number) => {
const item = {
id: dataItem.id,
- title: dataItem.name,
+ title: dataItem.title,
value: index,
};
- const ulUrl = this.#element.querySelector('.list');
+
+ const ulUrl = this.element!.querySelector('.list');
const nativeOption = createNativeSelectOption();
const liUrl = document.createElement('li');
const textUrl = document.createTextNode(item.title);
- if (multiselect && multiselect == true) {
+ if (this.multiselect) {
const checkBox = document.createElement('input');
checkBox.type = 'checkbox';
- if (multiselectTag && multiselectTag == true) {
+
+ if (this.multiselectTag) {
checkBox.classList.add('displayHide');
}
@@ -598,21 +421,73 @@ export class DropDown {
nativeSelect.appendChild(nativeOption);
liUrl.appendChild(textUrl);
- ulUrl.appendChild(liUrl);
+ ulUrl!.appendChild(liUrl);
- this.#items.push(item);
+ this.items.push(item);
});
- this.#element.appendChild(nativeSelect);
+ this.element!.appendChild(nativeSelect);
- this.#items.filter((item, index) => {
+ this.items.filter((item: IItems | string | any, index: number) => {
if (typeof item !== 'object') {
- this.#items.splice(index, 1);
+ this.items.splice(index, 1);
}
return item;
});
- this.#addOptionsBehaviour();
+ this.addOptionsBehaviour();
+ }
+
+ /**
+ * Привaтный метод экземпляра класса DropDown
+ * @method initSelected
+ * @param {string} select необязательный елемент. Используется в методе selectIndex
+ * @description Отрисовывает и стилизует селект
+ * @protected
+ */
+ private initSelected(select?: string): void {
+ if (this.selected) {
+ createSelected(this.element!, this.selected);
+ } else if (this.placeholder) {
+ createSelected(this.element!, this.placeholder);
+ } else {
+ if (this.language && this.language === 'ru') {
+ createSelected(this.element!, ru.selectPlaceholder);
+ } else {
+ createSelected(this.element!, en.selectPlaceholder);
+ }
+ }
+
+ if (select) {
+ createSelected(this.element!, select, this.styles);
+ }
+
+ if (this.styles) {
+ customStyles(this.element!, this.styles);
+ }
+ }
+
+ /**
+ * Приватный метод экземпляра класса DropDown
+ * @protected
+ * @description Открывает и закрывает список по переданному эвенту
+ * @method initEvent
+ */
+ private initEvent() {
+ if (!this.event) {
+ return;
+ }
+
+ if (this.event) {
+ if (this.event === 'mouseenter') {
+ this.element!.addEventListener(this.event, () => {
+ this.open();
+ });
+ this.element!.addEventListener('mouseleave', () => {
+ this.close();
+ });
+ }
+ }
}
/**
@@ -620,15 +495,15 @@ export class DropDown {
* @protected
* @param {boolean} oneClick необязательный параметр передаваемый из функции buttonControl
* @description Открывает список для выбора элемента
- * @method #open
+ * @method open
*/
- #open(oneClick) {
+ private open(oneClick?: boolean): void {
if (oneClick === true) {
- this.#list.classList.add('open');
- this.#caret.classList.add('caret_rotate');
+ this.list!.classList.add('open');
+ this.caret!.classList.add('caret_rotate');
} else {
- this.#list.classList.toggle('open');
- this.#caret.classList.toggle('caret_rotate');
+ this.list!.classList.toggle('open');
+ this.caret!.classList.toggle('caret_rotate');
}
}
@@ -636,119 +511,148 @@ export class DropDown {
* Приватный метод экземпляра класса DropDown
* @protected
* @description Закрывает список
- * @method #close
+ * @method close
*/
- #close() {
- this.#list.classList.remove('open');
- this.#caret.classList.remove('caret_rotate');
+ private close(): void {
+ this.list?.classList.remove('open');
+ this.caret?.classList.remove('caret_rotate');
+ }
+
+ /**
+ * Приватный метод экземпляра класса DropDown
+ * @protected
+ * @description Закрывает список по клику вне элемента
+ * @method closeSelectClick
+ */
+ private closeSelectClick(): void {
+ const dropdown = document.querySelector(`${this.options.selector}`);
+
+ document.addEventListener('click', (e) => {
+ const withinBoundaries = e.composedPath().includes(dropdown!);
+ if (!withinBoundaries) {
+ if (this.btnCntr) {
+ return;
+ } else {
+ this.close();
+ }
+ }
+ });
}
/**
* Приватный метод экземпляра класса DropDown
* @protected
* @description Метод реализовывающий выбор элементов в разных режимах. Обычный/Мультиселект/Мультиселект + Мультиселект Таг.
- * @method #addOptionsBehaviour
+ * @method addOptionsBehaviour
*/
- #addOptionsBehaviour() {
- const {
- multiselect,
- placeholder,
- selected,
- multiselectTag,
- searchMode,
- closeOnSelect,
- darkTheme,
- } = this.#options;
+ private addOptionsBehaviour() {
+ const options = this.element?.querySelectorAll('.list__item');
+ const select: HTMLElement | null | undefined = this.element?.querySelector('.selected');
+ const nativeOption = this.element!.querySelectorAll('.nativeSelect__nativeOption');
- const options = this.#element.querySelectorAll('.list__item');
- const select = this.#element.querySelector('.selected');
- const nativeOption = this.#element.querySelectorAll('.nativeSelect__nativeOption');
+ let selectedItemsClear: ISelectedItems = {
+ placeholder: this.placeholder!,
+ selected: this.selected!,
+ };
const ulMultipul = document.createElement('ul');
- if (multiselect && multiselect == true) {
+ if (this.multiselect) {
+ this.selectedItems = [];
ulMultipul.classList.add('multiselect-tag');
- select.classList.add('overflow-hidden');
+ select?.classList.add('overflow-hidden');
}
- if (searchMode && searchMode === true) {
- this.#searchMode(this.random);
+ if (this.searchMode) {
+ this.searchModeSelect(this.randomId);
}
- options.forEach((option, index) => {
+ options?.forEach((option: Element, index: number) => {
option.addEventListener('click', (event) => {
- const dataSelectText = {
- placeholder,
- selected,
- selectedItems: this.#selectedItems,
- indexes: this.#indexes,
- darkTheme,
- multiselectTag,
- };
+ if (Array.isArray(this.selectedItems)) {
+ selectedItemsClear = {
+ placeholder: this.placeholder!,
+ selected: this.selected!,
+ selectedItems: this.selectedItems,
+ indexes: this.indexes,
+ darkTheme: this.darkTheme,
+ multiselectTag: this.multiselectTag,
+ };
+ }
- const item = this.#items[index];
+ const item: IItems = this.items[index];
- if (closeOnSelect == false || (multiselect && multiselect == true)) {
+ const checkIndex = this.indexes.indexOf(index);
+
+ if (this.closeOnSelect == false || this.multiselect) {
event.stopPropagation();
event.preventDefault();
}
- const checkIndex = this.#indexes.indexOf(index);
-
- if (multiselect && multiselect == true) {
+ if (this.multiselect) {
option.classList.toggle('active');
- const checkBox = option.querySelector('input[type="checkbox"]');
+
+ const checkBox: HTMLInputElement | null = option.querySelector('input[type="checkbox"]');
if (checkBox) {
if (!(event.target instanceof HTMLInputElement)) {
checkBox.checked = !checkBox.checked;
}
- if (checkIndex === -1) {
+ if (checkIndex == -1) {
+ this.indexes.push(index);
nativeOptionMultiple(nativeOption, item.title, true);
- this.#indexes.push(index);
- select.innerText = '';
+ select!.textContent = '';
- if (multiselectTag && multiselectTag == true) {
- this.#selectedItems.push(item);
- select.appendChild(ulMultipul);
+ if (this.multiselectTag) {
+ if (Array.isArray(this.selectedItems)) {
+ const dataBreadCrumb: ICreateBreadCrumb = {
+ option: this.options,
+ element: this.element,
+ indexes: this.indexes,
+ selectedItems: this.selectedItems,
+ };
- const data = {
- option: this.#options,
- element: this.#element,
- indexes: this.#indexes,
- selectedItems: this.#selectedItems,
- };
-
- ulMultipul.appendChild(createBreadcrumb(data, item.title, index, item.id));
+ this.selectedItems.push(item.title);
+ select!.appendChild(ulMultipul);
+ ulMultipul.appendChild(
+ createBreadCrumb(dataBreadCrumb, item.title, index, item.id),
+ );
+ }
} else {
- this.#selectedItems.push(item.title);
- select.innerText = this.#selectedItems;
+ if (Array.isArray(this.selectedItems)) {
+ this.selectedItems.push(item.title);
+ select!.innerText = this.selectedItems.join(',');
+ }
}
} else {
- if (multiselectTag && multiselectTag == true) {
+ if (this.multiselectTag) {
const tagItem = document.getElementById(`tag-${index}-${item.id}`);
- ulMultipul.removeChild(tagItem);
+ ulMultipul.removeChild(tagItem!);
}
- this.#indexes.splice(checkIndex, 1);
- this.#selectedItems.splice(checkIndex, 1);
- nativeOptionMultiple(nativeOption, item.title, false);
+ if (Array.isArray(this.selectedItems)) {
+ this.selectedItems.splice(checkIndex, 1);
+ this.indexes.splice(checkIndex, 1);
+ nativeOptionMultiple(nativeOption, item.title, false);
+ }
}
- if (!this.#selectedItems.length) {
- getSelectText(dataSelectText, select);
+ if (!this.selectedItems.length) {
+ getSelectText(selectedItemsClear, select);
} else {
- if (multiselectTag && multiselectTag == true) {
- select.appendChild(ulMultipul);
+ if (this.multiselectTag) {
+ select!.appendChild(ulMultipul);
} else {
- select.innerText = this.#selectedItems;
+ if (Array.isArray(this.selectedItems)) {
+ select!.innerText = this.selectedItems.join(',');
+ }
}
}
}
} else {
- select.innerText = item.title;
- this.#selectedItems = item;
+ select!.textContent = item.title;
+ this.selectedItems = item.title;
nativeOptionOrdinary(nativeOption, item.title);
@@ -758,26 +662,81 @@ export class DropDown {
option.classList.add('active');
}
- clearSelect(select, this.#element, dataSelectText);
+ clearSelect(select!, this.element!, selectedItemsClear);
});
});
}
+ /**
+ * Приватный метод рендера экземпляра класса DropDown
+ * @protected
+ * @method #checkTheme
+ * @description Изменяет цветовую схему с темной на светлую.
+ */
+ private checkTheme(): void {
+ const select = this.element!.querySelector('.cg-select');
+ const caret = this.element!.querySelector('.caret');
+ const list = this.element!.querySelector('ul.list');
+ const search = this.element!.querySelector('.inputSearch');
+
+ if (this.darkTheme == false) {
+ select!.classList.add('selectWhite');
+ caret!.classList.add('caretWhite');
+ list!.classList.add('listWhite');
+
+ if (this.searchMode == true) {
+ search!.classList.add('inputWhite');
+ }
+ } else if (this.darkTheme == true) {
+ return;
+ } else {
+ throw new Error('Styles error or invalid value entered!');
+ }
+ }
+
+ /**
+ * Приватный метод экземпляра класса DropDown
+ * @protected
+ * @param {boolean} nativeSelectMode параметр отвечающий за добавления нативного селекта.
+ * @description Изменяет отображение селекта на мобильных устройствах
+ * @method selectMode
+ */
+ private selectMode(nativeSelectMode: boolean) {
+ let win = window.outerWidth;
+
+ if (nativeSelectMode === true) {
+ const select = this.element!.querySelector('.cg-select');
+ const list = this.element!.querySelector('.list');
+ const nativeSelect = this.element!.querySelector('.nativeSelect');
+
+ if (win < 576) {
+ select!.classList.add('displayHide');
+ list!.classList.add('displayHide');
+ nativeSelect!.classList.add('nativeSelectActive');
+ } else if (win > 576) {
+ select!.classList.remove('displayHide');
+ list!.classList.remove('displayHide');
+ nativeSelect!.classList.remove('nativeSelectActive');
+ nativeSelect!.classList.add('displayHide');
+ }
+ } else {
+ return;
+ }
+ }
+
/**
* Метод который реализует поиск элементов в селекте
* @protected
* @param {string} random уникальное значение для input элемента.
- * @method #searchMode
+ * @method searchMode
*/
- #searchMode(random) {
- const { language } = this.#options;
-
- const input = this.#element.querySelector(`#searchSelect-${random}`);
- const searchSelect = this.#element.querySelectorAll('.list__item');
+ private searchModeSelect(random: string) {
+ const input = this.element!.querySelector(`#searchSelect-${random}`) as HTMLInputElement;
+ const searchSelect = this.element!.querySelectorAll('.list__item');
const result = document.createElement('p');
- let textNode = '';
- if (language && language === 'ru') {
+ let textNode: Text;
+ if (this.language && this.language === 'ru') {
textNode = document.createTextNode(`${ru.textInListSearch}`);
} else {
textNode = document.createTextNode(`${en.textInListSearch}`);
@@ -786,110 +745,37 @@ export class DropDown {
result.appendChild(textNode);
result.classList.add('displayHide');
result.classList.add('noRezult');
- input.parentElement.appendChild(result);
+ input!.parentElement!.appendChild(result);
- input.addEventListener('click', (e) => {
+ input!.addEventListener('click', (e) => {
e.stopPropagation();
});
- input.oninput = function () {
- let valueSearch = this.value.trim().toLowerCase();
- let anyMatch = false;
+ if (input instanceof HTMLInputElement) {
+ input!.oninput = function () {
+ let valueSearch: string = input.value.trim().toLowerCase();
+ let anyMatch = false;
- if (valueSearch != '') {
- searchSelect.forEach((elem) => {
- let isMatching = new RegExp(valueSearch, 'gi').test(elem.textContent);
- anyMatch = anyMatch || isMatching;
+ if (valueSearch != '') {
+ searchSelect.forEach((elem) => {
+ let isMatching = new RegExp(valueSearch, 'gi').test(elem.textContent!);
+ anyMatch = anyMatch || isMatching;
- if (elem.textContent.toLowerCase().search(valueSearch) == -1) {
- elem.classList.add('displayHide');
- } else {
- elem.classList.remove('displayHide');
- }
- });
+ if (elem.textContent!.toLowerCase().search(valueSearch) == -1) {
+ elem.classList.add('displayHide');
+ } else {
+ elem.classList.remove('displayHide');
+ }
+ });
- result.classList.toggle('displayHide', anyMatch);
- } else {
- searchSelect.forEach((elem) => {
- elem.classList.remove('displayHide');
- result.classList.add('displayHide');
- });
- }
- };
- }
-
- /**
- * Приватный метод экземпляра класса DropDown
- * @protected
- * @description Открывает и закрывает список по переданному эвенту
- * @method #initEvent
- */
- #initEvent() {
- const { event } = this.#options;
- if (!event) {
- return;
- }
-
- if (event) {
- if (event === 'mouseenter') {
- this.#element.addEventListener(event, () => {
- this.#open();
- });
- this.#element.addEventListener('mouseleave', () => {
- this.#close();
- });
- }
- }
- }
-
- /**
- * Приватный метод экземпляра класса DropDown
- * @protected
- * @description Закрывает список по клику вне элемента
- * @method #closeSelectClick
- */
- #closeSelectClick() {
- const dropdown = document.querySelector(`${this.#options.selector}`);
-
- document.addEventListener('click', (e) => {
- const withinBoundaries = e.composedPath().includes(dropdown);
- if (!withinBoundaries) {
- if (this.btn) {
- return;
+ result.classList.toggle('displayHide', anyMatch);
} else {
- this.#close();
+ searchSelect.forEach((elem) => {
+ elem.classList.remove('displayHide');
+ result.classList.add('displayHide');
+ });
}
- }
- });
- }
-
- /**
- * Приватный метод экземпляра класса DropDown
- * @protected
- * @param {boolean} nativeSelectMode параметр отвечающий за добавления нативного селекта.
- * @description Изменяет отображение селекта на мобильных устройствах
- * @method #selectMode
- */
- #selectMode(nativeSelectMode) {
- let win = window.outerWidth;
-
- if (nativeSelectMode === true) {
- const select = this.#element.querySelector('.cg-select');
- const list = this.#element.querySelector('.list');
- const nativeSelect = this.#element.querySelector('.nativeSelect');
-
- if (win < 576) {
- select.classList.add('displayHide');
- list.classList.add('displayHide');
- nativeSelect.classList.add('nativeSelectActive');
- } else if (win > 576) {
- select.classList.remove('displayHide');
- list.classList.remove('displayHide');
- nativeSelect.classList.remove('nativeSelectActive');
- nativeSelect.classList.add('displayHide');
- }
- } else {
- return;
+ };
}
}
@@ -898,24 +784,182 @@ export class DropDown {
* @protected
* @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна.
* @description Изменяет отображение листа с выбором в виде модального окна.
- * @method #displayMode
+ * @method displayMode
*/
- #displayMode(listDisplayMode) {
- if (listDisplayMode === true) {
+ private displayMode(listDisplayMode: boolean): void {
+ if (listDisplayMode) {
const modal = document.createElement('div');
const body = document.querySelector('body');
- const list = this.#list;
+ const list = this.list!;
modal.appendChild(list);
- this.#element.appendChild(modal);
+ this.element!.appendChild(modal);
- this.#element.addEventListener('click', () => {
+ this.element!.addEventListener('click', () => {
modal.classList.toggle('modal');
list.classList.toggle('listModal');
- body.classList.toggle('overflowHide');
+ body!.classList.toggle('overflowHide');
});
} else {
return;
}
}
+
+ // Public methods
+ /**
+ * Метод экземпляра класса DropDown
+ * @param {number} numberItem номер возвращаемого элемента
+ * @returns {HTMLElement} возвращает ссылку на выбранный HTML элемент
+ * @method getElement
+ */
+ public getElement(numberItem: number): IItems[] | string[] | any {
+ if (numberItem > this.items.length) {
+ return;
+ }
+
+ return this.items[numberItem];
+ }
+
+ /**
+ * Метод экземпляра класса DropDown
+ * @param {object} language объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
+ * @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата
+ * @method addLanguage
+ */
+ public addLanguage(language: ILanguage) {
+ const { placeholder, textInListSearch, selectPlaceholder } = language;
+
+ const select = this.element!.querySelector('.selected');
+ const textNodeSelect = document.createTextNode(selectPlaceholder);
+ select!.appendChild(textNodeSelect);
+
+ if (this.searchMode) {
+ const search = this.element!.querySelector('.inputSearch');
+ const textNoRezult = this.element!.querySelector('.noRezult');
+ const textNode = document.createTextNode(textInListSearch);
+
+ search!.setAttribute('placeholder', placeholder);
+ search!.setAttribute('placeholder', placeholder);
+
+ textNoRezult!.textContent = '';
+ textNoRezult!.appendChild(textNode);
+ }
+ }
+
+ /**
+ * Метод экземпляра класса DropDown
+ * @param {HTMLInputElement} button - HTML кнопка
+ * @param {string} method - метод открытия open/close
+ * @description Метод позволяющий открывать/закрывать селект с помощью кнопок
+ * @method buttonControl
+ */
+ public buttonControl(button: Element, method: string) {
+ if (this.listDisplayMode) {
+ return;
+ }
+
+ this.btnCntr = button!;
+ button.addEventListener('click', () => {
+ if (method.toLowerCase() === 'open') {
+ this.open(true);
+ } else if (method.toLowerCase() === 'close') {
+ this.close();
+ } else {
+ return;
+ }
+ });
+ }
+
+ /**
+ * Метод экземпляра класса DropDown
+ * @param {boolean} value - Передаваемый параметр для добавления атрибута disabled;
+ * @description Метод позволяющий переключать состояние селекта disabled,
+ * @method disabled
+ */
+ public disabled(value: boolean) {
+ const select = this.element!.querySelector('.cg-select');
+ const nativeSelect = this.element!.querySelector('.nativeSelect');
+
+ if (value === true) {
+ this.element!.setAttribute('disabled', 'true');
+ nativeSelect!.setAttribute('disabled', 'true');
+ select!.classList.add('disabled');
+ } else {
+ this.element!.removeAttribute('disabled');
+ nativeSelect!.removeAttribute('disabled');
+ select!.classList.remove('disabled');
+ }
+ }
+
+ /**
+ * Метод экземпляра класса DropDown
+ * @param {string | object} item добавляемый елемент
+ * @description добавляет переданный элемент в конец списка и перерисовывает список. Не может использоваться при передачи элементов с категорями
+ * @method addItem
+ */
+ public addItem(item: IItems | string | number) {
+ if (this.category) {
+ console.log('can`t add item to category');
+ return;
+ }
+
+ if (!item) {
+ return false;
+ }
+
+ const index = this.items.length;
+
+ this.items.push(getFormatItem(item, index));
+ this.render();
+ }
+
+ /**
+ * Метод экземпляра класса DropDown
+ * @param {number} index индекс удаляемого элемента
+ * @description удаляет елемент по индексу из списка и перерисовывает его. Не может использоваться при передачи элементов с категорями.
+ * @method deleteItem
+ */
+ public deleteItem(index: number) {
+ if (this.category) {
+ console.log('can`t add item to category');
+ return;
+ }
+
+ const item = this.items[index];
+
+ this.items.splice(index, 1);
+ this.render();
+ }
+
+ /**
+ * Метод экземпляра класса DropDown
+ * @description удаляет все елементы из списка и перерисовывает его.
+ * @method deleteItemAll
+ */
+ public deleteItemAll() {
+ this.items.splice(0, this.items.length);
+ this.render();
+ }
+
+ /**
+ * Метод экземпляра класса DropDown
+ * @param {number} index индекс выбранного элемента
+ * @description выбирает элемент который будет изначально отрисовываться в селекте
+ * @method selectIndex
+ */
+ public selectIndex(index: number) {
+ if (this.category) {
+ console.log('can`t add item to category');
+ return;
+ }
+
+ const options = this.element!.querySelectorAll('.list__item') as NodeListOf;
+
+ if (index > options!.length) {
+ return;
+ }
+
+ const select: string = options[index].innerText;
+ this.render(select);
+ }
}
diff --git a/src/components/create-element/create-element.interface.ts b/src/components/create-element/create-element.interface.ts
new file mode 100644
index 0000000..88e9320
--- /dev/null
+++ b/src/components/create-element/create-element.interface.ts
@@ -0,0 +1,27 @@
+import { ICgSelect } from 'interfaces/cg-select.interface';
+
+/**
+ * @description Настройки для создания чипсов.
+ */
+export interface ICreateBreadCrumb {
+ /**
+ * Определенный экземпляр класса.
+ * @type {Element | null}
+ */
+ element: Element | null;
+ /**
+ * Настройки селекта.
+ * @type {ICgSelect}
+ */
+ option: ICgSelect;
+ /**
+ * Массив индексов выбранных элементов.
+ * @type {number[]}
+ */
+ indexes: number[];
+ /**
+ * Массив с выбранными элементами.
+ * @type {string[]}
+ */
+ selectedItems: string[];
+}
diff --git a/src/components/create-element.js b/src/components/create-element/create-element.ts
similarity index 78%
rename from src/components/create-element.js
rename to src/components/create-element/create-element.ts
index bf9b5d7..62c021d 100644
--- a/src/components/create-element.js
+++ b/src/components/create-element/create-element.ts
@@ -1,22 +1,48 @@
-import { customStylesFormat, nativeOptionMultiple } from './utils';
+import { customStylesFormat, nativeOptionMultiple } from '../utils/utils';
+import { ICreateBreadCrumb } from './create-element.interface';
+
/**
- * @module createBreadcrumb
+ * Метод который создает нативный селект
+ * @returns {HTMLSelectElement} Возвращает созданный нативный селект
*/
+export function createNativeSelect(): HTMLSelectElement {
+ const nativeSelect = document.createElement('select');
+
+ nativeSelect.setAttribute('name', 'dataSelect');
+ nativeSelect.classList.add('nativeSelect');
+ return nativeSelect;
+}
+
+/**
+ * Метод который создает Options для нативного селекта
+ * @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
+ */
+export function createNativeSelectOption(): HTMLOptionElement {
+ const nativeOption = document.createElement('option');
+
+ nativeOption.classList.add('nativeSelect__nativeOption');
+ return nativeOption;
+}
/**
* Метод который создает и отвечает за поведение chips
- * @param {object} data объект в котором содержатся настройки и элементы селекта
+ * @param {ICreateBreadCrumb} data объект в котором содержатся настройки и элементы селекта
* @param {string} title имя выбранного элемента для отрисовки chips
* @param {number} index индекс выбранного элемента для отрисовки chips
* @param {string} id уникальное id выбранного элемента
* @returns {HTMLElement} возвращает сформированный HTMLElement chips item
*/
-export function createBreadcrumb(data, title, index, id) {
+export function createBreadCrumb(
+ data: ICreateBreadCrumb,
+ title: string,
+ index: number,
+ id: string,
+): HTMLLIElement {
const { element, option, indexes, selectedItems } = data;
const { placeholder, styles } = option;
- const selected = element.querySelector('.selected');
- const nativeOption = element.querySelectorAll('.nativeSelect__nativeOption');
+ const selected: HTMLElement | null | undefined = element?.querySelector('.selected');
+ const nativeOption = element!.querySelectorAll('.nativeSelect__nativeOption');
const liChip = document.createElement('li');
const textNode = document.createTextNode(title);
@@ -38,7 +64,7 @@ export function createBreadcrumb(data, title, index, id) {
if (styles) {
const { chips } = styles;
- customStylesFormat(chips, liChip);
+ customStylesFormat(chips!, liChip);
}
svgIcon.addEventListener('click', (event) => {
@@ -47,7 +73,7 @@ export function createBreadcrumb(data, title, index, id) {
nativeOptionMultiple(nativeOption, title, false);
const deleteIcon = indexes.indexOf(index);
- let checkBox = '';
+ let checkBox: any;
indexes.splice(deleteIcon, 1);
selectedItems.splice(deleteIcon, 1);
@@ -62,45 +88,22 @@ export function createBreadcrumb(data, title, index, id) {
checkBox.parentElement.classList.remove('active');
if (!selectedItems.length) {
- selected.innerText = placeholder;
+ selected!.innerText = placeholder!;
}
- liChip.parentElement.removeChild(liChip);
+ liChip.parentElement!.removeChild(liChip);
});
return liChip;
}
-/**
- * Метод который создает нативный селект
- * @returns {HTMLSelectElement} Возвращает созданный нативный селект
- */
-export function createNativeSelect() {
- const nativeSelect = document.createElement('select');
-
- nativeSelect.setAttribute('name', 'dataSelect');
- nativeSelect.classList.add('nativeSelect');
- return nativeSelect;
-}
-
-/**
- * Метод который создает Options для нативного селекта
- * @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
- */
-export function createNativeSelectOption() {
- const nativeOption = document.createElement('option');
-
- nativeOption.classList.add('nativeSelect__nativeOption');
- return nativeOption;
-}
-
/**
* Метод который создает поиск элементов в селекте
* @param {string} random уникальное значение для input элемента.
* @param {string} lenguage текст на определенном языке переданный из файла language.js
* @returns {HTMLInputElement} Возвращает сформированный input елемент.
*/
-export function createInputSearch(random, lenguage) {
+export function createInputSearch(random: string, lenguage: string): HTMLInputElement {
const inputSearch = document.createElement('input');
inputSearch.type = 'text';
diff --git a/src/components/utils/urils.interface.ts b/src/components/utils/urils.interface.ts
new file mode 100644
index 0000000..a4df672
--- /dev/null
+++ b/src/components/utils/urils.interface.ts
@@ -0,0 +1,59 @@
+import { IItems } from 'interfaces/items.interface';
+
+/**
+ * @description Настройки получаемых элементов.
+ */
+export interface IDataItem {
+ /**
+ * Необязательный параметр. Категория группы элементов.
+ * @type {string}
+ */
+ category?: string;
+ /**
+ * Необязательный параметр. Массив с элементами.
+ * @type {IItems[] | string[] | any}
+ */
+ categoryItems?: IItems[] | string[];
+ /**
+ * Значение переданного элемента.
+ * @type {string | IItems | number}
+ */
+ ItemValue: string | IItems | number;
+}
+
+/**
+ * @description Настройки для текста селекта и тд.
+ */
+export interface ISelectedItems {
+ /**
+ * Placeholder необязательный параметр, в который передается текст плейсхолдера селекта.
+ * @type {string}
+ */
+ placeholder?: string;
+ /**
+ * Необязательный параметр, в который передается элемент который будет выбран изначально в селекте.
+ * @type {string}
+ */
+ selected?: string;
+ /**
+ * Массив выбранных элементов из списка
+ * @type {string[]}
+ */
+ selectedItems?: string[];
+ /**
+ * Массив индексов выбранных элементов
+ * @type {number[]}
+ */
+ indexes?: number[];
+ /**
+ * Необязательный параметр, который отвечает за поведения селекта,
+ * для него, ***работает только в месте с подключением multiselect.
+ * @type {boolean}
+ */
+ multiselectTag?: boolean;
+ /**
+ * Необязательный параметр, который отвечает за включение светлой/темной темы по умолчанию, стоит темная тема.
+ * @type {boolean}
+ */
+ darkTheme?: boolean;
+}
diff --git a/src/components/utils.js b/src/components/utils/utils.ts
similarity index 59%
rename from src/components/utils.js
rename to src/components/utils/utils.ts
index 9e3c371..c424ea4 100644
--- a/src/components/utils.js
+++ b/src/components/utils/utils.ts
@@ -2,72 +2,54 @@
* Utils module
* @module Utils
*/
+import { IStyle } from 'interfaces/cg-select.interface';
+import { IItems } from 'interfaces/items.interface';
+import { ISelectedItems } from './urils.interface';
/**
- * Создание кнопки выбора элементов
- * @param {HTMLElement} element созданный экземпляр класса DropDown
- * @param {string} content placeholer передаваемый из настроек селекта
- * @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
+ * Преобразование каждого елемента полученного из поля Items;
+ * @param {any} dataItem полученный елемент переданный при создании селекта может быть как object / string
+ * @param {number} index индекс этого элемента
+ * @returns {IItems} возвращает сформированный объект
*/
-export function createSelected(element, content, styles) {
- if (content) {
- element.innerHTML = `
-
- ${content}
-
-
- `;
- }
+export function getFormatItem(dataItem: any, index: number): IItems {
+ const random = Math.random().toString(36).substring(2, 10);
+ let item: IItems;
- if (styles) {
- customStyles(element, styles);
+ if (checkItemStruct(dataItem)) {
+ return dataItem;
+ } else {
+ item = {
+ id: random,
+ title: dataItem,
+ value: index,
+ };
- element.innerHTML = `
-
- ${content}
-
-
- `;
+ return item;
}
}
/**
- * Поиск и стилизация елементов полученных из styles экземпляра DropDown
- * @param {HTMLElement} element созданный экземпляр класса DropDown
- * @param {object} styles объект в котором находяться настройки кастомизации частей селекта
+ * Вставка изначального текста селекта(до выбора)
+ * @param {ITextSelect} data объект в котором находяться title селекта
+ * @param {HTMLElement | null | undefined} select елемент селекта, куда будет вставляться title
+ * @returns {HTMLElement} возвращает сформированный елемент селекта
*/
-export function customStyles(element, styles) {
- if (!styles) {
- return;
+export function getSelectText(
+ data: ISelectedItems,
+ select: HTMLElement | null | undefined,
+): HTMLElement {
+ const { placeholder, selected } = data;
+
+ if (placeholder) {
+ select!.innerText = placeholder;
+ } else if (selected) {
+ select!.innerText = selected;
+ } else {
+ select!.innerText = 'Select...';
}
- const { head, caret, placeholder, lable } = styles;
-
- const cgSelect = element.querySelector('.cg-select');
- const caretSelect = element.querySelector('.caret');
- const placeholderSelect = element.querySelector('.selected');
- const lableItem = element.parentElement.querySelector('h1.label');
-
- customStylesFormat(head, cgSelect);
- customStylesFormat(caret, caretSelect);
- customStylesFormat(lable, lableItem);
-
- if (placeholderSelect) {
- customStylesFormat(placeholder, placeholderSelect);
- }
-}
-
-/**
- * Универсальный метод для стилизации селекта
- * @param {object} elemOption объект полученное из объекта styles у которого мы получаем ключ-значение стилей
- * @param {HTMLElement} selector HTMLElement подвергающиеся кастомизации
- */
-export function customStylesFormat(elemOption, selector) {
- if (elemOption) {
- Object.entries(elemOption).forEach(([key, value]) => {
- selector.style[key] = value;
- });
- }
+ return select!;
}
/**
@@ -75,7 +57,7 @@ export function customStylesFormat(elemOption, selector) {
* @param {object} item проверяемый на определенную структуру элемент
* @returns {boolean} возвращает true/false если item содержит указанные свойства
*/
-export function checkItemStruct(item) {
+export function checkItemStruct(item: object): boolean {
if (item && typeof item !== 'object') {
return false;
}
@@ -84,98 +66,47 @@ export function checkItemStruct(item) {
}
/**
- * Вставка изначального текста селекта(до выбора)
- * @param {object} data объект в котором находяться title селекта
- * @param {HTMLElement} select елемент селекта, куда будет вставляться title
- * @returns {HTMLElement} возвращает сформированный елемент селекта
+ * Создание кнопки выбора элементов
+ * @param {HTMLElement} element созданный экземпляр класса DropDown
+ * @param {string} content placeholer передаваемый из настроек селекта
+ * @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
*/
-export function getSelectText(data, select) {
- const { placeholder, selected } = data;
+export function createSelected(element: Element, content?: string, styles?: IStyle) {
+ const select = document.createElement('div');
+ const selected = document.createElement('p');
+ const caret = document.createElement('div');
- if (placeholder) {
- select.innerText = placeholder;
- } else if (selected) {
- select.innerText = selected;
- } else {
- select.innerText = 'Select...';
+ select.classList.add('cg-select');
+ selected.classList.add('selected');
+ caret.classList.add('caret');
+
+ select.appendChild(selected);
+ select.appendChild(caret);
+
+ if (content) {
+ const text = document.createTextNode(content);
+ selected.appendChild(text);
+ element.innerHTML = '';
+ element?.insertAdjacentElement('afterbegin', select);
+ } else if (styles) {
+ customStyles(element!, styles);
+ select.setAttribute('style', `${styles}`);
+ selected.setAttribute('style', `${styles}`);
+ caret.setAttribute('style', `${styles}`);
}
- return select;
-}
-
-/**
- * Преобразование каждого елемента полученного из поля Items;
- * @param {object | string} dataItem полученный елемент переданный при создании селекта может быть как object/string
- * @param {number} index индекс этого элемента
- * @returns {object} возвращает сформированный объект
- */
-export function getFormatItem(dataItem, index) {
- const random = Math.random().toString(36).substring(2, 10);
- let item = {};
-
- if (checkItemStruct(dataItem)) {
- item = {
- id: dataItem.id,
- title: dataItem.title,
- value: index,
- };
- } else {
- item = {
- id: random,
- title: dataItem,
- value: index,
- };
- }
-
- return item;
-}
-
-/**
- * Поведение нативного(одинарного) селекта при выборе кастомного
- * @param {NodeList} element NodeList нативного селекта
- * @param {object} item выбранный элемент в кастомном селекте
- */
-export function nativeOptionOrdinary(element, item) {
- element.forEach((option) => {
- option.removeAttribute('selected');
- if (option.textContent === item) {
- option.setAttribute('selected', 'selected');
- }
- });
-}
-
-/**
- * Поведение нативного(Multiple) селекта при выборе в кастомном
- * @param {NodeList} element NodeList нативного селекта
- * @param {object} item выбранный элемент в кастомном селекте
- * @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
- */
-export function nativeOptionMultiple(element, item, condition) {
- element.forEach((option) => {
- if (condition == true) {
- if (option.textContent === item) {
- option.setAttribute('selected', 'selected');
- }
- } else if (condition == false) {
- if (option.textContent === item) {
- option.removeAttribute('selected');
- }
- } else {
- return;
- }
- });
}
/**
* Создание кнопки отчиски селекта, при единичном выборе.
* @param {HTMLElement} select место в селекте которое будет переназначено на ''.
- * @param {HTMLElement} element экземпляр класса DropDown.
- * @param {object} dataSelectText текст который отрисовывается в селекте.
+ * @param {Element} element экземпляр класса DropDown.
+ * @param {ISelectedItems} dataSelectText текст который отрисовывается в селекте.
*/
-export function clearSelect(select, element, dataSelectText) {
+export function clearSelect(select: HTMLElement, element: Element, dataSelectText: ISelectedItems) {
const { selectedItems, indexes, darkTheme, multiselectTag } = dataSelectText;
const options = element.querySelectorAll('.list__item');
- const ulMultiSelect = element.querySelector('.multiselect-tag');
+ const nativeOption = element!.querySelectorAll('.nativeSelect__nativeOption');
const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
@@ -204,18 +135,24 @@ export function clearSelect(select, element, dataSelectText) {
svgIcon.classList.add('svg-icon');
svgIcon.classList.add('svg-clear');
- select.appendChild(svgIcon);
+ select!.appendChild(svgIcon);
svgIcon.addEventListener('click', () => {
- select.innerText = '';
+ select!.innerText = '';
+
+ nativeOption.forEach((option) => {
+ option.removeAttribute('selected');
+ });
if (Array.isArray(selectedItems)) {
- selectedItems.splice(0);
- indexes.splice(0);
+ selectedItems!.splice(0);
+ indexes!.splice(0);
}
checkBox.forEach((item) => {
- item.checked = false;
+ if (item instanceof HTMLInputElement) {
+ item.checked = false;
+ }
});
getSelectText(dataSelectText, select);
@@ -225,3 +162,76 @@ export function clearSelect(select, element, dataSelectText) {
});
});
}
+
+/**
+ * Поведение нативного(одинарного) селекта при выборе кастомного
+ * @param {NodeList} element NodeList нативного селекта
+ * @param {any} item выбранный элемент в кастомном селекте
+ */
+export function nativeOptionOrdinary(element: NodeListOf | undefined, item: string) {
+ element!.forEach((option) => {
+ option.removeAttribute('selected');
+ if (option.textContent === item) {
+ option.setAttribute('selected', 'selected');
+ }
+ });
+}
+
+/**
+ * Поведение нативного(Multiple) селекта при выборе в кастомном
+ * @param {NodeListOf | undefined} element NodeList нативного селекта
+ * @param {string} item выбранный элемент в кастомном селекте
+ * @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
+ */
+export function nativeOptionMultiple(
+ element: NodeListOf | undefined,
+ item: string,
+ condition: boolean,
+) {
+ element!.forEach((option) => {
+ if (condition == true) {
+ if (option.textContent === item) {
+ option.setAttribute('selected', 'selected');
+ }
+ } else if (condition == false) {
+ if (option.textContent === item) {
+ option.removeAttribute('selected');
+ }
+ } else {
+ return;
+ }
+ });
+}
+
+/**
+ * Поиск и стилизация елементов полученных из styles экземпляра DropDown
+ * @param {Element} element созданный экземпляр класса DropDown
+ * @param {object} styles объект в котором находяться настройки кастомизации частей селекта
+ */
+export function customStyles(element: Element, styles: IStyle) {
+ const cgSelect = element.querySelector('.cg-select');
+ const caretSelect = element.querySelector('.caret');
+ const placeholderSelect = element.querySelector('.selected');
+ const lableItem = element.parentElement!.querySelector('h1.label');
+
+ customStylesFormat(styles.head!, cgSelect!);
+ customStylesFormat(styles.caret!, caretSelect!);
+ customStylesFormat(styles.lable!, lableItem!);
+
+ if (placeholderSelect) {
+ customStylesFormat(styles.placeholder!, placeholderSelect);
+ }
+}
+
+/**
+ * Универсальный метод для стилизации селекта
+ * @param {object} elemOption объект полученное из объекта styles у которого мы получаем ключ-значение стилей
+ * @param {HTMLElement} selector HTMLElement подвергающиеся кастомизации
+ */
+export function customStylesFormat(elemOption: object, selector: any) {
+ if (elemOption) {
+ Object.entries(elemOption).forEach(([key, value]) => {
+ selector.style[key] = value;
+ });
+ }
+}
diff --git a/src/interfaces/cg-select.interface.ts b/src/interfaces/cg-select.interface.ts
new file mode 100644
index 0000000..1d7d7e6
--- /dev/null
+++ b/src/interfaces/cg-select.interface.ts
@@ -0,0 +1,136 @@
+import { IItems } from './items.interface';
+
+/**
+ * @description Настройки селекта.
+ */
+export interface ICgSelect {
+ /**
+ * Уникальный селектор - *обязательный параметр(индефикатор), который задаеться при создании селекта.
+ * @type {string}
+ */
+ selector?: string;
+ /**
+ * Необязательный параметр, в который передается элемент который будет выбран изначально в селекте.
+ * @type {string}
+ */
+ selected?: string;
+ /**
+ * Placeholder необязательный параметр, в который передается текст плейсхолдера селекта.
+ * @type {string}
+ */
+ placeholder?: string;
+ /**
+ * *Обязательный параметр(эсли не указан другой способ получения данных (url)), это массив элементов,
+ * которые будут отображаться в селекте при выборе.
+ * @type {IItems[] | string[] | any}
+ */
+ items?: IItems[] | string[] | any;
+ /**
+ * Необязательный параметр, который отвечает за включение светлой/темной темы по умолчанию, стоит темная тема(darkTheme == true)
+ * @type {boolean}
+ */
+ darkTheme?: boolean;
+ /**
+ * Необязательный параметр, который добавляет живой поиск по элеметам селекта.
+ * @type {boolean}
+ */
+ searchMode?: boolean;
+ /**
+ * Необязательный параметр, который отвечает за поведения селекта при открытии, если closeOnSelect: false,
+ * тогда при выборе елемента в селекте закрытия не происходит,
+ * и можно выбрать другой элемент по умолчанию, closeOnSelect:true.
+ * @type {boolean}
+ */
+ closeOnSelect?: boolean;
+ /**
+ * Необязательный параметр, который отвечает за поведения селекта при открытии на мобильных усторйствах.
+ * @type {boolean}
+ */
+ nativeSelectMode?: boolean;
+ /**
+ * Необязательный параметр, который отвечает за поведения селекта при открытии.
+ * @type {boolean}
+ */
+ listDisplayMode?: boolean;
+ /**
+ * Необязательный параметр, отвечающий за локализацию некоторых текстовых элементов.
+ * @type {string}
+ */
+ language?: string;
+ /**
+ * Необязательный параметр,который добавляет lable перед селектом.
+ * @type {string}
+ */
+ lable?: string;
+ /**
+ * Необязательный параметр, который отвечает за кастомизацию элементов селекта,
+ * в него передаются обьекты с CSS свойствами для кастомизируемых элементов.
+ * @type {IStyle}
+ */
+ styles?: IStyle;
+ /**
+ * Необязательный параметр, который отвечает за поведения селекта, передавая в этот параметр, евент по типу 'mouseenter',
+ * селект будет открываться при наведении.
+ * @type {string}
+ */
+ event?: string;
+ /**
+ * Обязательный параметр(эсли не указан другой способ получения данных (items)),
+ * данные которые приходят с бекэнда в формате {id:"", title: "", value: ""}.
+ * @type {string}
+ */
+ url?: string;
+ /**
+ * Необязательный параметр, который отвечает за поведения селекта, добавляет возможность выбирать несколько элементов.
+ * Выбранные элементы отрисовываются как обычный текст, через запятую.
+ * @type {boolean}
+ */
+ multiselect?: boolean;
+ /**
+ * Необязательный параметр, который отвечает за поведения селекта,
+ * для него, ***работает только в месте с подключением multiselect.
+ * @type {boolean}
+ */
+ multiselectTag?: boolean;
+}
+
+/**
+ * @description Настройки стилей.
+ */
+export interface IStyle {
+ /**
+ * Кастомизация кнопки селекта.
+ * @type {object}
+ */
+ head?: object;
+ /**
+ * Кастомизация каретки.
+ * @type {object}
+ */
+ caret?: object;
+ /**
+ * Кастомизация placeholder.
+ * @type {object}
+ */
+ placeholder?: object;
+ /**
+ * Кастомизация lable селекта.
+ * @type {object}
+ */
+ lable?: object;
+ /**
+ * Кастомизация листа с выбором элементов.
+ * @type {object}
+ */
+ list?: object;
+ /**
+ * Кастомизация поиска.
+ * @type {object}
+ */
+ search?: object;
+ /**
+ * Кастомизация чипсов с выбранными элементами
+ * @type {object}
+ */
+ chips?: object;
+}
diff --git a/src/interfaces/items.interface.ts b/src/interfaces/items.interface.ts
new file mode 100644
index 0000000..a6c1616
--- /dev/null
+++ b/src/interfaces/items.interface.ts
@@ -0,0 +1,20 @@
+/**
+ * @description Строение элемента.
+ */
+export interface IItems {
+ /**
+ * Уникальное ID элемента
+ * @type {string}
+ */
+ id: string;
+ /**
+ * Текстовое значение элемента
+ * @type {string}
+ */
+ title: string;
+ /**
+ * Порядковый номер, или другая информация
+ * @type {number | string}
+ */
+ value: number | string;
+}
diff --git a/src/interfaces/language.interface.ts b/src/interfaces/language.interface.ts
new file mode 100644
index 0000000..c9a63e5
--- /dev/null
+++ b/src/interfaces/language.interface.ts
@@ -0,0 +1,20 @@
+/**
+ * @description Настройки для добавления языков.
+ */
+export interface ILanguage {
+ /**
+ * Текст в поиске.
+ * @type {string}
+ */
+ placeholder: string;
+ /**
+ * Дефолтный Текст Селекта если не указан placeholder или выбранный элемент
+ * @type {string}
+ */
+ selectPlaceholder: string;
+ /**
+ * Текст если совпадений нет.
+ * @type {string}
+ */
+ textInListSearch: string;
+}
diff --git a/src/language/language.js b/src/language/language.ts
similarity index 67%
rename from src/language/language.js
rename to src/language/language.ts
index 3b6ecb0..de90939 100644
--- a/src/language/language.js
+++ b/src/language/language.ts
@@ -1,10 +1,12 @@
-export const ru = {
+import { ILanguage } from 'interfaces/language.interface';
+
+export const ru: ILanguage = {
selectPlaceholder: 'Выберите элемент...',
placeholder: 'Поиск...',
textInListSearch: 'Совпадений нет...',
};
-export const en = {
+export const en: ILanguage = {
selectPlaceholder: 'Select element...',
placeholder: 'Search...',
textInListSearch: 'No matches...',
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..85dd01f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,83 @@
+{
+ // "include": ["src/**/*", "index.ts"],
+ "compilerOptions": {
+ /* Projects */
+ // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+ // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
+ // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
+ // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
+ // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
+ // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
+
+ /* Language and Environment */
+ "target": "es2017" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+ // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+ // "jsx": "preserve", /* Specify what JSX code is generated. */
+ // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
+ // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
+ // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+ // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+ // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+ // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+ // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
+ // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
+ // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
+
+ /* Modules */
+ "module": "commonjs" /* Specify what module code is generated. */,
+ "rootDir": "./" /* Specify the root folder within your source files. */,
+ // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
+ "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,
+ // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
+ // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
+ // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
+ // "types": [], /* Specify type package names to be included without being referenced in a source file. */
+ // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
+ // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
+ // "resolveJsonModule": true, /* Enable importing .json files. */
+ // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */
+
+ /* JavaScript Support */
+ // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+ // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
+ // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+ /* Emit */
+ // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+ // "declarationMap": true, /* Create sourcemaps for d.ts files. */
+ // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
+ // "sourceMap": true, /* Create source map files for emitted JavaScript files. */
+ // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+ "outDir": "./dist" /* Specify an output folder for all emitted files. */,
+ // "removeComments": true, /* Disable emitting comments. */
+ // "noEmit": true, /* Disable emitting files from a compilation. */
+ // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+ // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */
+ // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+ // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
+ // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
+ // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
+ // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
+ // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+ // "newLine": "crlf", /* Set the newline character for emitting files. */
+ // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+ // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
+ // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
+ // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
+ // "declarationDir": "./", /* Specify the output directory for generated declaration files. */
+ // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+ /* Interop Constraints */
+ // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
+ "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
+ "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+ // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+ "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+ "strict": true,
+
+ /* Completeness */
+ // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
+ "skipLibCheck": true /* Skip type checking all .d.ts files. */
+ }
+}