Added description in interfaces and etc
This commit is contained in:
MaxOvs
parent
1830ae23ad
commit
4d10721b7b
@ -4,29 +4,15 @@ const dropdn = new CGSelect({
|
|||||||
selector: '.cg-dropdown_one',
|
selector: '.cg-dropdown_one',
|
||||||
placeholder: 'Выберите авто',
|
placeholder: 'Выберите авто',
|
||||||
items: [
|
items: [
|
||||||
|
'BMW',
|
||||||
{
|
{
|
||||||
category: 'Russia',
|
id: '213sade',
|
||||||
categoryItems: [
|
title: 'Opel',
|
||||||
{
|
value: 1,
|
||||||
id: '28qwds',
|
|
||||||
title: 'Москва',
|
|
||||||
value: 0,
|
|
||||||
},
|
|
||||||
,
|
|
||||||
'Ростов-на-дону',
|
|
||||||
'Саратов',
|
|
||||||
'Волгоград',
|
|
||||||
'Донецк',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
category: 'USA',
|
|
||||||
categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
category: 'France',
|
|
||||||
categoryItems: ['Paris'],
|
|
||||||
},
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'max',
|
||||||
],
|
],
|
||||||
styles: {
|
styles: {
|
||||||
head: {
|
head: {
|
||||||
|
|||||||
3
index.ts
Normal file
3
index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { CGSelect } from './src/cg-selectTS';
|
||||||
|
|
||||||
|
export default CGSelect;
|
||||||
133
package-lock.json
generated
133
package-lock.json
generated
@ -12,6 +12,7 @@
|
|||||||
"@parcel/optimizer-css": "^2.8.0",
|
"@parcel/optimizer-css": "^2.8.0",
|
||||||
"@types/prettier": "^2.7.2",
|
"@types/prettier": "^2.7.2",
|
||||||
"gh-pages": "^4.0.0",
|
"gh-pages": "^4.0.0",
|
||||||
|
"typedoc": "^0.23.24",
|
||||||
"typescript": "^4.9.4"
|
"typescript": "^4.9.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -3016,6 +3017,11 @@
|
|||||||
"node": ">=6"
|
"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": {
|
"node_modules/jsonfile": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
|
||||||
@ -3267,6 +3273,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
"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": {
|
"node_modules/make-dir": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
|
||||||
@ -3328,7 +3339,6 @@
|
|||||||
"version": "4.2.5",
|
"version": "4.2.5",
|
||||||
"resolved": "https://registry.npmjs.org/marked/-/marked-4.2.5.tgz",
|
"resolved": "https://registry.npmjs.org/marked/-/marked-4.2.5.tgz",
|
||||||
"integrity": "sha512-jPueVhumq7idETHkb203WDD4fMA3yV9emQ5vLwop58lu8bTclMghBWcYAavlDqIEMaisADinV1TooIFCfqOsYQ==",
|
"integrity": "sha512-jPueVhumq7idETHkb203WDD4fMA3yV9emQ5vLwop58lu8bTclMghBWcYAavlDqIEMaisADinV1TooIFCfqOsYQ==",
|
||||||
"dev": true,
|
|
||||||
"bin": {
|
"bin": {
|
||||||
"marked": "bin/marked.js"
|
"marked": "bin/marked.js"
|
||||||
},
|
},
|
||||||
@ -3817,6 +3827,16 @@
|
|||||||
"semver": "bin/semver"
|
"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": {
|
"node_modules/source-map": {
|
||||||
"version": "0.6.1",
|
"version": "0.6.1",
|
||||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||||
@ -3990,6 +4010,45 @@
|
|||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"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": {
|
"node_modules/typescript": {
|
||||||
"version": "4.9.4",
|
"version": "4.9.4",
|
||||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
|
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
|
||||||
@ -4061,6 +4120,16 @@
|
|||||||
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
|
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
|
||||||
"dev": true
|
"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": {
|
"node_modules/weak-lru-cache": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",
|
||||||
@ -6064,6 +6133,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
|
||||||
"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA=="
|
"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": {
|
"jsonfile": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
|
||||||
@ -6198,6 +6272,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
"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": {
|
"make-dir": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
|
||||||
@ -6244,8 +6323,7 @@
|
|||||||
"marked": {
|
"marked": {
|
||||||
"version": "4.2.5",
|
"version": "4.2.5",
|
||||||
"resolved": "https://registry.npmjs.org/marked/-/marked-4.2.5.tgz",
|
"resolved": "https://registry.npmjs.org/marked/-/marked-4.2.5.tgz",
|
||||||
"integrity": "sha512-jPueVhumq7idETHkb203WDD4fMA3yV9emQ5vLwop58lu8bTclMghBWcYAavlDqIEMaisADinV1TooIFCfqOsYQ==",
|
"integrity": "sha512-jPueVhumq7idETHkb203WDD4fMA3yV9emQ5vLwop58lu8bTclMghBWcYAavlDqIEMaisADinV1TooIFCfqOsYQ=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"mdn-data": {
|
"mdn-data": {
|
||||||
"version": "2.0.14",
|
"version": "2.0.14",
|
||||||
@ -6585,6 +6663,16 @@
|
|||||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
|
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
|
||||||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
|
"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": {
|
"source-map": {
|
||||||
"version": "0.6.1",
|
"version": "0.6.1",
|
||||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||||
@ -6711,6 +6799,35 @@
|
|||||||
"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
|
"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
|
||||||
"dev": true
|
"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": {
|
"typescript": {
|
||||||
"version": "4.9.4",
|
"version": "4.9.4",
|
||||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
|
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
|
||||||
@ -6753,6 +6870,16 @@
|
|||||||
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
|
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
|
||||||
"dev": true
|
"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": {
|
"weak-lru-cache": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",
|
||||||
|
|||||||
@ -9,7 +9,7 @@
|
|||||||
"homepage": "https://cg-select.itguild.info",
|
"homepage": "https://cg-select.itguild.info",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "parcel example/index.html -p 4500 --open ",
|
"start": "parcel example/index.html -p 4500 --open ",
|
||||||
"build": "parcel build index.js",
|
"build": "parcel build index.ts",
|
||||||
"deploy": "gh-pages -d dist",
|
"deploy": "gh-pages -d dist",
|
||||||
"predeploy": "npm run build"
|
"predeploy": "npm run build"
|
||||||
},
|
},
|
||||||
@ -31,6 +31,7 @@
|
|||||||
"@parcel/optimizer-css": "^2.8.0",
|
"@parcel/optimizer-css": "^2.8.0",
|
||||||
"@types/prettier": "^2.7.2",
|
"@types/prettier": "^2.7.2",
|
||||||
"gh-pages": "^4.0.0",
|
"gh-pages": "^4.0.0",
|
||||||
|
"typedoc": "^0.23.24",
|
||||||
"typescript": "^4.9.4"
|
"typescript": "^4.9.4"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
|
|||||||
839
src/cg-selectTS.js
Normal file
839
src/cg-selectTS.js
Normal file
@ -0,0 +1,839 @@
|
|||||||
|
"use strict";
|
||||||
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||||
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||||
|
return new (P || (P = Promise))(function (resolve, reject) {
|
||||||
|
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||||
|
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||||
|
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||||
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
var __generator = (this && this.__generator) || function (thisArg, body) {
|
||||||
|
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
||||||
|
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
||||||
|
function verb(n) { return function (v) { return step([n, v]); }; }
|
||||||
|
function step(op) {
|
||||||
|
if (f) throw new TypeError("Generator is already executing.");
|
||||||
|
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
||||||
|
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
||||||
|
if (y = 0, t) op = [op[0] & 2, t.value];
|
||||||
|
switch (op[0]) {
|
||||||
|
case 0: case 1: t = op; break;
|
||||||
|
case 4: _.label++; return { value: op[1], done: false };
|
||||||
|
case 5: _.label++; y = op[1]; op = [0]; continue;
|
||||||
|
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
||||||
|
default:
|
||||||
|
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
||||||
|
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
||||||
|
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
||||||
|
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
||||||
|
if (t[2]) _.ops.pop();
|
||||||
|
_.trys.pop(); continue;
|
||||||
|
}
|
||||||
|
op = body.call(thisArg, _);
|
||||||
|
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
||||||
|
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
exports.__esModule = true;
|
||||||
|
exports.CGSelect = void 0;
|
||||||
|
var create_elementTs_1 = require("./components/create-element/create-elementTs");
|
||||||
|
var utilsTs_1 = require("./components/utils/utilsTs");
|
||||||
|
var languageTS_1 = require("./language/languageTS");
|
||||||
|
require("./main.scss");
|
||||||
|
/**
|
||||||
|
* @class Описание класса ICgSelect
|
||||||
|
* @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
|
||||||
|
* @author Овсяников Максим
|
||||||
|
*/
|
||||||
|
var CGSelect = /** @class */ (function () {
|
||||||
|
/**
|
||||||
|
* @param {ICgSelect} setting Объект принимающий настройки селекта
|
||||||
|
* @constructor Конструктор класса DropDown
|
||||||
|
* @description Конструктор принимает объект и рендерит селект.
|
||||||
|
* @example
|
||||||
|
* options = {
|
||||||
|
* selector: 'Уникальный селектор',
|
||||||
|
selected: 'Выбранный элемент',
|
||||||
|
placeholder: '...',
|
||||||
|
lable: '...'
|
||||||
|
items: [string|number|object],
|
||||||
|
darkTheme: true/false,
|
||||||
|
searchMode: true/false,
|
||||||
|
closeOnSelect: true/false,
|
||||||
|
nativeSelectMode: true/false,
|
||||||
|
listDisplayMode: true/false,
|
||||||
|
language: 'ru/en',
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
background: '...',
|
||||||
|
},
|
||||||
|
list: {...},
|
||||||
|
chips: {...},
|
||||||
|
caret: {...},
|
||||||
|
placeholder: {...},
|
||||||
|
lable: {..},
|
||||||
|
},
|
||||||
|
event: '...',
|
||||||
|
url: 'http/...',
|
||||||
|
multiselect: true/false,
|
||||||
|
multiselectTag: true/false,
|
||||||
|
* }
|
||||||
|
*/
|
||||||
|
function CGSelect(setting) {
|
||||||
|
/**
|
||||||
|
* Массив индексов выбранных элементов
|
||||||
|
* @type {number[]}
|
||||||
|
*/
|
||||||
|
this.indexes = [];
|
||||||
|
this.init(setting);
|
||||||
|
this.render();
|
||||||
|
this.closeSelectClick();
|
||||||
|
this.initEvent();
|
||||||
|
}
|
||||||
|
Object.defineProperty(CGSelect.prototype, "value", {
|
||||||
|
//Getters
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @returns {string[] | string} Возвращает выбранные элемент(ы) в виде массива/элемента/null
|
||||||
|
* @description Геттер возвращающий выбранные элемент(ы) селекта
|
||||||
|
*/
|
||||||
|
get: function () {
|
||||||
|
var _a;
|
||||||
|
return (_a = this.selectedItems) !== null && _a !== void 0 ? _a : null;
|
||||||
|
},
|
||||||
|
enumerable: false,
|
||||||
|
configurable: true
|
||||||
|
});
|
||||||
|
Object.defineProperty(CGSelect.prototype, "indexesOf", {
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @returns {number | number[]}Возвращает индексы выбранных элемента(ов) в виде массива/пустой массив
|
||||||
|
* @description Геттер возвращающий индексы выбранных элемента(ов) селекта
|
||||||
|
*/
|
||||||
|
get: function () {
|
||||||
|
var _a;
|
||||||
|
return (_a = this.indexes) !== null && _a !== void 0 ? _a : [];
|
||||||
|
},
|
||||||
|
enumerable: false,
|
||||||
|
configurable: true
|
||||||
|
});
|
||||||
|
/**
|
||||||
|
* Приватный метод инициализации экземпляра класса DropDown
|
||||||
|
* @method init
|
||||||
|
* @member
|
||||||
|
* @protected
|
||||||
|
* @param {ISgSelect} setting передаваемые настройки селекта
|
||||||
|
* @description Приватный метод. Общая инициализация селекта. Получение настоек и преобразвание элементов селекта.
|
||||||
|
* @example
|
||||||
|
* {
|
||||||
|
selector: '.cg-dropdown_one',
|
||||||
|
placeholder: 'Выберите авто',
|
||||||
|
items: [
|
||||||
|
'BMW',
|
||||||
|
{
|
||||||
|
id: '213sade',
|
||||||
|
title: 'Opel',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'max',
|
||||||
|
],
|
||||||
|
darkTheme: true,
|
||||||
|
multiselect: true,
|
||||||
|
multiselectTag: true,
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.init = function (setting) {
|
||||||
|
var _this = this;
|
||||||
|
var _a;
|
||||||
|
var items = setting.items, multiselect = setting.multiselect, multiselectTag = setting.multiselectTag, url = setting.url, selector = setting.selector, listDisplayMode = setting.listDisplayMode, nativeSelectMode = setting.nativeSelectMode, searchMode = setting.searchMode, darkTheme = setting.darkTheme, language = setting.language, styles = setting.styles, lable = setting.lable, event = setting.event, selected = setting.selected, placeholder = setting.placeholder;
|
||||||
|
this.options = setting;
|
||||||
|
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;
|
||||||
|
var elem = document.querySelector(this.selector);
|
||||||
|
this.element = elem;
|
||||||
|
(_a = this.element) === null || _a === void 0 ? void 0 : _a.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
_this.open();
|
||||||
|
});
|
||||||
|
this.items = [];
|
||||||
|
if (!this.items && this.url) {
|
||||||
|
this.renderUrl();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
utilsTs_1.createSelected;
|
||||||
|
items.forEach(function (dataItem, index) {
|
||||||
|
var itemInputs = {
|
||||||
|
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(function (categoryItem, indexCategory) {
|
||||||
|
_this.items.push((0, utilsTs_1.getFormatItem)(categoryItem, indexCategory));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
_this.items.push((0, utilsTs_1.getFormatItem)(itemInputs.ItemValue, index));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Приватный метод рендера экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @method render
|
||||||
|
* @param {string} select необязательный елемент. Передаеться в метод initSelected
|
||||||
|
* @description Рендер елементов в селекте.
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.render = function (select) {
|
||||||
|
var _this = this;
|
||||||
|
var _a, _b;
|
||||||
|
var random = Math.random().toString(36).substring(2, 10);
|
||||||
|
if (select || (select && this.styles)) {
|
||||||
|
this.initSelected(select);
|
||||||
|
(0, utilsTs_1.customStyles)(this.element, this.styles);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.initSelected();
|
||||||
|
}
|
||||||
|
var ulList = document.createElement('ul');
|
||||||
|
var nativeSelect = (0, create_elementTs_1.createNativeSelect)();
|
||||||
|
var inputSearch;
|
||||||
|
var textNode;
|
||||||
|
this.randomId = random;
|
||||||
|
ulList.classList.add('list');
|
||||||
|
if (this.styles) {
|
||||||
|
(0, utilsTs_1.customStylesFormat)(this.styles.list, ulList);
|
||||||
|
}
|
||||||
|
if (this.searchMode) {
|
||||||
|
if (this.language === 'ru') {
|
||||||
|
inputSearch = (0, create_elementTs_1.createInputSearch)(random, languageTS_1.ru.placeholder);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
inputSearch = (0, create_elementTs_1.createInputSearch)(random, languageTS_1.en.placeholder);
|
||||||
|
}
|
||||||
|
(0, utilsTs_1.customStylesFormat)((_a = this.styles) === null || _a === void 0 ? void 0 : _a.search, inputSearch);
|
||||||
|
ulList.appendChild(inputSearch);
|
||||||
|
}
|
||||||
|
(_b = this.element) === null || _b === void 0 ? void 0 : _b.appendChild(ulList);
|
||||||
|
this.items.forEach(function (dataItem) {
|
||||||
|
var _a;
|
||||||
|
(_a = _this.element) === null || _a === void 0 ? void 0 : _a.appendChild(nativeSelect);
|
||||||
|
var liItem = document.createElement('li');
|
||||||
|
var nativeOption = (0, create_elementTs_1.createNativeSelectOption)();
|
||||||
|
var strongItem = document.createElement('strong');
|
||||||
|
liItem.classList.add('list__item');
|
||||||
|
strongItem.classList.add('category');
|
||||||
|
if (_this.multiselect) {
|
||||||
|
var checkBox = document.createElement('input');
|
||||||
|
checkBox.type = 'checkbox';
|
||||||
|
checkBox.setAttribute('id', "chbox-".concat(dataItem.id));
|
||||||
|
liItem.appendChild(checkBox);
|
||||||
|
if (_this.multiselectTag) {
|
||||||
|
checkBox.classList.add('displayHide');
|
||||||
|
}
|
||||||
|
nativeSelect.setAttribute('multiple', 'multiple');
|
||||||
|
}
|
||||||
|
if (dataItem.title) {
|
||||||
|
nativeOption.text = dataItem.title;
|
||||||
|
nativeOption.value = dataItem.title;
|
||||||
|
textNode = document.createTextNode(dataItem.title);
|
||||||
|
nativeSelect.appendChild(nativeOption);
|
||||||
|
liItem.appendChild(textNode);
|
||||||
|
ulList.appendChild(liItem);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Для отрисовки категорий
|
||||||
|
textNode = document.createTextNode(dataItem);
|
||||||
|
strongItem.appendChild(textNode);
|
||||||
|
ulList.appendChild(strongItem);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.items.filter(function (item, index) {
|
||||||
|
if (typeof item !== 'object') {
|
||||||
|
_this.items.splice(index, 1);
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
this.list = this.element.querySelector('.list');
|
||||||
|
this.caret = this.element.querySelector('.caret');
|
||||||
|
if (this.darkTheme == false) {
|
||||||
|
this.checkTheme();
|
||||||
|
}
|
||||||
|
if (this.nativeSelectMode === true) {
|
||||||
|
this.selectMode(this.nativeSelectMode);
|
||||||
|
}
|
||||||
|
if (this.listDisplayMode) {
|
||||||
|
this.displayMode(this.listDisplayMode);
|
||||||
|
}
|
||||||
|
this.addOptionsBehaviour();
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Приватный метод рендера экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @method renderUrl
|
||||||
|
* @description Рендер елементов в селекте переданных с URL и их настойка
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.renderUrl = function () {
|
||||||
|
return __awaiter(this, void 0, void 0, function () {
|
||||||
|
var response, dataUrl, nativeSelect;
|
||||||
|
var _this = this;
|
||||||
|
return __generator(this, function (_a) {
|
||||||
|
switch (_a.label) {
|
||||||
|
case 0:
|
||||||
|
if (this.items || !this.url) {
|
||||||
|
return [2 /*return*/];
|
||||||
|
}
|
||||||
|
return [4 /*yield*/, fetch(this.url)];
|
||||||
|
case 1:
|
||||||
|
response = _a.sent();
|
||||||
|
return [4 /*yield*/, response.json()];
|
||||||
|
case 2:
|
||||||
|
dataUrl = _a.sent();
|
||||||
|
nativeSelect = (0, create_elementTs_1.createNativeSelect)();
|
||||||
|
dataUrl.forEach(function (dataItem, index) {
|
||||||
|
var item = {
|
||||||
|
id: dataItem.id,
|
||||||
|
title: dataItem.title,
|
||||||
|
value: index
|
||||||
|
};
|
||||||
|
var ulUrl = _this.element.querySelector('.list');
|
||||||
|
var nativeOption = (0, create_elementTs_1.createNativeSelectOption)();
|
||||||
|
var liUrl = document.createElement('li');
|
||||||
|
var textUrl = document.createTextNode(item.title);
|
||||||
|
if (_this.multiselect) {
|
||||||
|
var checkBox = document.createElement('input');
|
||||||
|
checkBox.type = 'checkbox';
|
||||||
|
if (_this.multiselectTag) {
|
||||||
|
checkBox.classList.add('displayHide');
|
||||||
|
}
|
||||||
|
checkBox.setAttribute('id', "chbox-".concat(item.id));
|
||||||
|
nativeSelect.setAttribute('multiple', 'multiple');
|
||||||
|
liUrl.appendChild(checkBox);
|
||||||
|
}
|
||||||
|
liUrl.classList.add('list__item');
|
||||||
|
nativeOption.value = item.title;
|
||||||
|
nativeOption.text = item.title;
|
||||||
|
nativeSelect.appendChild(nativeOption);
|
||||||
|
liUrl.appendChild(textUrl);
|
||||||
|
ulUrl.appendChild(liUrl);
|
||||||
|
_this.items.push(item);
|
||||||
|
});
|
||||||
|
this.element.appendChild(nativeSelect);
|
||||||
|
this.items.filter(function (item, index) {
|
||||||
|
if (typeof item !== 'object') {
|
||||||
|
_this.items.splice(index, 1);
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
this.addOptionsBehaviour();
|
||||||
|
return [2 /*return*/];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Привaтный метод экземпляра класса DropDown
|
||||||
|
* @method initSelected
|
||||||
|
* @param {string} select необязательный елемент. Используется в методе selectIndex
|
||||||
|
* @description Отрисовывает и стилизует селект
|
||||||
|
* @protected
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.initSelected = function (select) {
|
||||||
|
if (this.selected) {
|
||||||
|
(0, utilsTs_1.createSelected)(this.element, this.selected);
|
||||||
|
}
|
||||||
|
else if (this.placeholder) {
|
||||||
|
(0, utilsTs_1.createSelected)(this.element, this.placeholder);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (this.language && this.language === 'ru') {
|
||||||
|
(0, utilsTs_1.createSelected)(this.element, languageTS_1.ru.selectPlaceholder);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
(0, utilsTs_1.createSelected)(this.element, languageTS_1.en.selectPlaceholder);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (select) {
|
||||||
|
(0, utilsTs_1.createSelected)(this.element, select, this.styles);
|
||||||
|
}
|
||||||
|
if (this.lable) {
|
||||||
|
var lableItem = document.createElement('h1');
|
||||||
|
var textLable = document.createTextNode(this.lable);
|
||||||
|
lableItem.appendChild(textLable);
|
||||||
|
lableItem.classList.add('label');
|
||||||
|
this.element.insertAdjacentElement('beforebegin', lableItem);
|
||||||
|
}
|
||||||
|
if (this.styles) {
|
||||||
|
(0, utilsTs_1.customStyles)(this.element, this.styles);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Приватный метод экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @description Открывает и закрывает список по переданному эвенту
|
||||||
|
* @method initEvent
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.initEvent = function () {
|
||||||
|
var _this = this;
|
||||||
|
if (!this.event) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.event) {
|
||||||
|
if (this.event === 'mouseenter') {
|
||||||
|
this.element.addEventListener(this.event, function () {
|
||||||
|
_this.open();
|
||||||
|
});
|
||||||
|
this.element.addEventListener('mouseleave', function () {
|
||||||
|
_this.close();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Приватный метод экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @param {boolean} oneClick необязательный параметр передаваемый из функции buttonControl
|
||||||
|
* @description Открывает список для выбора элемента
|
||||||
|
* @method open
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.open = function (oneClick) {
|
||||||
|
if (oneClick === true) {
|
||||||
|
this.list.classList.add('open');
|
||||||
|
this.caret.classList.add('caret_rotate');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.list.classList.toggle('open');
|
||||||
|
this.caret.classList.toggle('caret_rotate');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Приватный метод экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @description Закрывает список
|
||||||
|
* @method close
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.close = function () {
|
||||||
|
var _a, _b;
|
||||||
|
(_a = this.list) === null || _a === void 0 ? void 0 : _a.classList.remove('open');
|
||||||
|
(_b = this.caret) === null || _b === void 0 ? void 0 : _b.classList.remove('caret_rotate');
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Приватный метод экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @description Закрывает список по клику вне элемента
|
||||||
|
* @method closeSelectClick
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.closeSelectClick = function () {
|
||||||
|
var _this = this;
|
||||||
|
var dropdown = document.querySelector("".concat(this.options.selector));
|
||||||
|
document.addEventListener('click', function (e) {
|
||||||
|
var withinBoundaries = e.composedPath().includes(dropdown);
|
||||||
|
if (!withinBoundaries) {
|
||||||
|
if (_this.btnCntr) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
_this.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Приватный метод экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @description Метод реализовывающий выбор элементов в разных режимах. Обычный/Мультиселект/Мультиселект + Мультиселект Таг.
|
||||||
|
* @method addOptionsBehaviour
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.addOptionsBehaviour = function () {
|
||||||
|
var _this = this;
|
||||||
|
var _a, _b;
|
||||||
|
var options = (_a = this.element) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.list__item');
|
||||||
|
var select = (_b = this.element) === null || _b === void 0 ? void 0 : _b.querySelector('.selected');
|
||||||
|
var nativeOption = this.element.querySelectorAll('.nativeSelect__nativeOption');
|
||||||
|
var selectedItemsClear;
|
||||||
|
var ulMultipul = document.createElement('ul');
|
||||||
|
if (this.multiselect) {
|
||||||
|
this.selectedItems = [];
|
||||||
|
ulMultipul.classList.add('multiselect-tag');
|
||||||
|
select === null || select === void 0 ? void 0 : select.classList.add('overflow-hidden');
|
||||||
|
}
|
||||||
|
if (this.searchMode) {
|
||||||
|
this.searchModeSelect(this.randomId);
|
||||||
|
}
|
||||||
|
options === null || options === void 0 ? void 0 : options.forEach(function (option, index) {
|
||||||
|
option.addEventListener('click', function (event) {
|
||||||
|
if (Array.isArray(_this.selectedItems)) {
|
||||||
|
selectedItemsClear = {
|
||||||
|
placeholder: _this.placeholder,
|
||||||
|
selected: _this.selected,
|
||||||
|
selectedItems: _this.selectedItems,
|
||||||
|
indexes: _this.indexes,
|
||||||
|
darkTheme: _this.darkTheme,
|
||||||
|
multiselectTag: _this.multiselectTag
|
||||||
|
};
|
||||||
|
}
|
||||||
|
var item = _this.items[index];
|
||||||
|
var checkIndex = _this.indexes.indexOf(index);
|
||||||
|
if (_this.closeOnSelect == false || _this.multiselect) {
|
||||||
|
event.stopPropagation();
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
if (_this.multiselect) {
|
||||||
|
option.classList.toggle('active');
|
||||||
|
var checkBox = option.querySelector('input[type="checkbox"]');
|
||||||
|
if (checkBox) {
|
||||||
|
if (!(event.target instanceof HTMLInputElement)) {
|
||||||
|
checkBox.checked = !checkBox.checked;
|
||||||
|
}
|
||||||
|
if (checkIndex == -1) {
|
||||||
|
_this.indexes.push(index);
|
||||||
|
(0, utilsTs_1.nativeOptionMultiple)(nativeOption, item.title, true);
|
||||||
|
select.textContent = '';
|
||||||
|
if (_this.multiselectTag) {
|
||||||
|
if (Array.isArray(_this.selectedItems)) {
|
||||||
|
var dataBreadCrumb = {
|
||||||
|
option: _this.options,
|
||||||
|
element: _this.element,
|
||||||
|
indexes: _this.indexes,
|
||||||
|
selectedItems: _this.selectedItems
|
||||||
|
};
|
||||||
|
_this.selectedItems.push(item.title);
|
||||||
|
select.appendChild(ulMultipul);
|
||||||
|
ulMultipul.appendChild((0, create_elementTs_1.createBreadCrumb)(dataBreadCrumb, item.title, index, item.id));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (Array.isArray(_this.selectedItems)) {
|
||||||
|
_this.selectedItems.push(item.title);
|
||||||
|
select.innerText = _this.selectedItems.join(',');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (_this.multiselectTag) {
|
||||||
|
var tagItem = document.getElementById("tag-".concat(index, "-").concat(item.id));
|
||||||
|
ulMultipul.removeChild(tagItem);
|
||||||
|
}
|
||||||
|
if (Array.isArray(_this.selectedItems)) {
|
||||||
|
_this.selectedItems.splice(checkIndex, 1);
|
||||||
|
_this.indexes.splice(checkIndex, 1);
|
||||||
|
(0, utilsTs_1.nativeOptionMultiple)(nativeOption, item.title, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!_this.selectedItems.length) {
|
||||||
|
(0, utilsTs_1.getSelectText)(selectedItemsClear, select);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (_this.multiselectTag) {
|
||||||
|
select.appendChild(ulMultipul);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (Array.isArray(_this.selectedItems)) {
|
||||||
|
select.innerText = _this.selectedItems.join(',');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
select.textContent = item.title;
|
||||||
|
_this.selectedItems = item.title;
|
||||||
|
(0, utilsTs_1.nativeOptionOrdinary)(nativeOption, item.title);
|
||||||
|
options.forEach(function (option) {
|
||||||
|
option.classList.remove('active');
|
||||||
|
});
|
||||||
|
option.classList.add('active');
|
||||||
|
}
|
||||||
|
(0, utilsTs_1.clearSelect)(select, _this.element, selectedItemsClear);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Приватный метод рендера экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @method #checkTheme
|
||||||
|
* @description Изменяет цветовую схему с темной на светлую.
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.checkTheme = function () {
|
||||||
|
var select = this.element.querySelector('.cg-select');
|
||||||
|
var caret = this.element.querySelector('.caret');
|
||||||
|
var list = this.element.querySelector('ul.list');
|
||||||
|
var 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
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.selectMode = function (nativeSelectMode) {
|
||||||
|
var win = window.outerWidth;
|
||||||
|
if (nativeSelectMode === true) {
|
||||||
|
var select = this.element.querySelector('.cg-select');
|
||||||
|
var list = this.element.querySelector('.list');
|
||||||
|
var 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
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.searchModeSelect = function (random) {
|
||||||
|
var input = this.element.querySelector("#searchSelect-".concat(random));
|
||||||
|
var searchSelect = this.element.querySelectorAll('.list__item');
|
||||||
|
var result = document.createElement('p');
|
||||||
|
var textNode;
|
||||||
|
if (this.language && this.language === 'ru') {
|
||||||
|
textNode = document.createTextNode("".concat(languageTS_1.ru.textInListSearch));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
textNode = document.createTextNode("".concat(languageTS_1.en.textInListSearch));
|
||||||
|
}
|
||||||
|
result.appendChild(textNode);
|
||||||
|
result.classList.add('displayHide');
|
||||||
|
result.classList.add('noRezult');
|
||||||
|
input.parentElement.appendChild(result);
|
||||||
|
input.addEventListener('click', function (e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
if (input instanceof HTMLInputElement) {
|
||||||
|
input.oninput = function () {
|
||||||
|
var valueSearch = input.value.trim().toLowerCase();
|
||||||
|
var anyMatch = false;
|
||||||
|
if (valueSearch != '') {
|
||||||
|
searchSelect.forEach(function (elem) {
|
||||||
|
var 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');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
result.classList.toggle('displayHide', anyMatch);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
searchSelect.forEach(function (elem) {
|
||||||
|
elem.classList.remove('displayHide');
|
||||||
|
result.classList.add('displayHide');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Приватный метод экземпляра класса DropDown
|
||||||
|
* @protected
|
||||||
|
* @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна.
|
||||||
|
* @description Изменяет отображение листа с выбором в виде модального окна.
|
||||||
|
* @method displayMode
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.displayMode = function (listDisplayMode) {
|
||||||
|
if (listDisplayMode) {
|
||||||
|
var modal_1 = document.createElement('div');
|
||||||
|
var body_1 = document.querySelector('body');
|
||||||
|
var list_1 = this.list;
|
||||||
|
modal_1.appendChild(list_1);
|
||||||
|
this.element.appendChild(modal_1);
|
||||||
|
this.element.addEventListener('click', function () {
|
||||||
|
modal_1.classList.toggle('modal');
|
||||||
|
list_1.classList.toggle('listModal');
|
||||||
|
body_1.classList.toggle('overflowHide');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// Public methods
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @param {number} numberItem номер возвращаемого элемента
|
||||||
|
* @returns {HTMLElement} возвращает ссылку на выбранный HTML элемент
|
||||||
|
* @method getElement
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.getElement = function (numberItem) {
|
||||||
|
if (numberItem > this.items.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return this.items[numberItem];
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @param {object} language объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
|
||||||
|
* @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата
|
||||||
|
* @method addLanguage
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.addLanguage = function (language) {
|
||||||
|
var placeholder = language.placeholder, textInListSearch = language.textInListSearch, selectPlaceholder = language.selectPlaceholder;
|
||||||
|
var select = this.element.querySelector('.selected');
|
||||||
|
var textNodeSelect = document.createTextNode(selectPlaceholder);
|
||||||
|
select.appendChild(textNodeSelect);
|
||||||
|
if (this.searchMode) {
|
||||||
|
var search = this.element.querySelector('.inputSearch');
|
||||||
|
var textNoRezult = this.element.querySelector('.noRezult');
|
||||||
|
var 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
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.buttonControl = function (button, method) {
|
||||||
|
var _this = this;
|
||||||
|
if (this.listDisplayMode) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.btnCntr = button;
|
||||||
|
button.addEventListener('click', function () {
|
||||||
|
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
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.disabled = function (value) {
|
||||||
|
var select = this.element.querySelector('.cg-select');
|
||||||
|
var 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
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.addItem = function (item) {
|
||||||
|
if (this.category) {
|
||||||
|
console.log('can`t add item to category');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!item) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
var index = this.items.length;
|
||||||
|
this.items.push((0, utilsTs_1.getFormatItem)(item, index));
|
||||||
|
this.render();
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @param {number} index индекс удаляемого элемента
|
||||||
|
* @description удаляет елемент по индексу из списка и перерисовывает его. Не может использоваться при передачи элементов с категорями.
|
||||||
|
* @method deleteItem
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.deleteItem = function (index) {
|
||||||
|
if (this.category) {
|
||||||
|
console.log('can`t add item to category');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var item = this.items[index];
|
||||||
|
this.items.splice(index, 1);
|
||||||
|
this.render();
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @description удаляет все елементы из списка и перерисовывает его.
|
||||||
|
* @method deleteItemAll
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.deleteItemAll = function () {
|
||||||
|
this.items.splice(0, this.items.length);
|
||||||
|
this.render();
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @param {number} index индекс выбранного элемента
|
||||||
|
* @description выбирает элемент который будет изначально отрисовываться в селекте
|
||||||
|
* @method selectIndex
|
||||||
|
*/
|
||||||
|
CGSelect.prototype.selectIndex = function (index) {
|
||||||
|
if (this.category) {
|
||||||
|
console.log('can`t add item to category');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var options = this.element.querySelectorAll('.list__item');
|
||||||
|
if (index > options.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var select = options[index].innerText;
|
||||||
|
this.render(select);
|
||||||
|
};
|
||||||
|
return CGSelect;
|
||||||
|
}());
|
||||||
|
exports.CGSelect = CGSelect;
|
||||||
@ -25,8 +25,14 @@ import { ILanguage } from './interfaces/language.interface';
|
|||||||
|
|
||||||
import './main.scss';
|
import './main.scss';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @class Описание класса ICgSelect
|
||||||
|
* @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
|
||||||
|
* @author Овсяников Максим
|
||||||
|
*/
|
||||||
export class CGSelect implements ICgSelect {
|
export class CGSelect implements ICgSelect {
|
||||||
// Настройки селекта
|
// Настройки селекта
|
||||||
|
|
||||||
selector: string;
|
selector: string;
|
||||||
selected?: string;
|
selected?: string;
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
@ -45,16 +51,86 @@ export class CGSelect implements ICgSelect {
|
|||||||
multiselectTag?: boolean;
|
multiselectTag?: boolean;
|
||||||
|
|
||||||
// Переменные и комплектующие селекта
|
// Переменные и комплектующие селекта
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Созданный HTML елемент
|
||||||
|
* @type {Element | null}
|
||||||
|
*/
|
||||||
private element: Element | null;
|
private element: Element | null;
|
||||||
|
/**
|
||||||
|
* Созданный список(ul), с классом list
|
||||||
|
* @type {Element | null | undefined}
|
||||||
|
*/
|
||||||
private list: Element | null | undefined;
|
private list: Element | null | undefined;
|
||||||
|
/**
|
||||||
|
* Настройки селекта передаваемые при создании экземпляра класса
|
||||||
|
* @type {ICgSelect}
|
||||||
|
*/
|
||||||
private options: ICgSelect;
|
private options: ICgSelect;
|
||||||
|
/**
|
||||||
|
* Уникальный Id для елементов
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
private randomId: string;
|
private randomId: string;
|
||||||
|
/**
|
||||||
|
* Переменная для управления каретки
|
||||||
|
* @type {Element | null | undefined}
|
||||||
|
*/
|
||||||
private caret: Element | null | undefined;
|
private caret: Element | null | undefined;
|
||||||
|
/**
|
||||||
|
* Переданные категории
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
private category: string;
|
private category: string;
|
||||||
|
/**
|
||||||
|
* Выбранный или массив выбранных элементов из списка
|
||||||
|
* @type {string[] | string}
|
||||||
|
*/
|
||||||
private selectedItems: string[] | string;
|
private selectedItems: string[] | string;
|
||||||
|
/**
|
||||||
|
* Массив индексов выбранных элементов
|
||||||
|
* @type {number[]}
|
||||||
|
*/
|
||||||
private indexes: number[] = [];
|
private indexes: number[] = [];
|
||||||
|
/**
|
||||||
|
* Кнопка, для управления селектом
|
||||||
|
* @type {Element | null}
|
||||||
|
*/
|
||||||
private btnCntr: Element | null;
|
private btnCntr: Element | null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {ICgSelect} setting Объект принимающий настройки селекта
|
||||||
|
* @constructor Конструктор класса DropDown
|
||||||
|
* @description Конструктор принимает объект и рендерит селект.
|
||||||
|
* @example
|
||||||
|
* options = {
|
||||||
|
* selector: 'Уникальный селектор',
|
||||||
|
selected: 'Выбранный элемент',
|
||||||
|
placeholder: '...',
|
||||||
|
lable: '...'
|
||||||
|
items: [string|number|object],
|
||||||
|
darkTheme: true/false,
|
||||||
|
searchMode: true/false,
|
||||||
|
closeOnSelect: true/false,
|
||||||
|
nativeSelectMode: true/false,
|
||||||
|
listDisplayMode: true/false,
|
||||||
|
language: 'ru/en',
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
background: '...',
|
||||||
|
},
|
||||||
|
list: {...},
|
||||||
|
chips: {...},
|
||||||
|
caret: {...},
|
||||||
|
placeholder: {...},
|
||||||
|
lable: {..},
|
||||||
|
},
|
||||||
|
event: '...',
|
||||||
|
url: 'http/...',
|
||||||
|
multiselect: true/false,
|
||||||
|
multiselectTag: true/false,
|
||||||
|
* }
|
||||||
|
*/
|
||||||
constructor(setting: ICgSelect) {
|
constructor(setting: ICgSelect) {
|
||||||
this.init(setting);
|
this.init(setting);
|
||||||
this.render();
|
this.render();
|
||||||
@ -62,6 +138,25 @@ export class CGSelect implements ICgSelect {
|
|||||||
this.initEvent();
|
this.initEvent();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Getters
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @returns {string[] | string} Возвращает выбранные элемент(ы) в виде массива/элемента/null
|
||||||
|
* @description Геттер возвращающий выбранные элемент(ы) селекта
|
||||||
|
*/
|
||||||
|
get value(): string | string[] {
|
||||||
|
return this.selectedItems ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Метод экземпляра класса DropDown
|
||||||
|
* @returns {number | number[]}Возвращает индексы выбранных элемента(ов) в виде массива/пустой массив
|
||||||
|
* @description Геттер возвращающий индексы выбранных элемента(ов) селекта
|
||||||
|
*/
|
||||||
|
get indexesOf(): number | number[] {
|
||||||
|
return this.indexes ?? [];
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Приватный метод инициализации экземпляра класса DropDown
|
* Приватный метод инициализации экземпляра класса DropDown
|
||||||
* @method init
|
* @method init
|
||||||
@ -140,18 +235,19 @@ export class CGSelect implements ICgSelect {
|
|||||||
this.renderUrl();
|
this.renderUrl();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
createSelected;
|
||||||
|
|
||||||
items.forEach((dataItem: any, index: number) => {
|
items.forEach((dataItem: any, index: number) => {
|
||||||
let itemInputs: IDataItem = {
|
let itemInputs: IDataItem = {
|
||||||
ItemValue: dataItem,
|
ItemValue: dataItem,
|
||||||
// category: dataItem.category,
|
category: dataItem.category,
|
||||||
// categoryItems: dataItem.categoryItems,
|
categoryItems: dataItem.categoryItems,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (dataItem.category && dataItem.categoryItems) {
|
if (itemInputs.category && itemInputs.categoryItems) {
|
||||||
this.category = dataItem.category!;
|
this.category = itemInputs.category!;
|
||||||
this.items.push(this.category);
|
this.items.push(this.category);
|
||||||
dataItem.categoryItems.forEach((categoryItem, indexCategory: number) => {
|
itemInputs.categoryItems.forEach((categoryItem, indexCategory: number) => {
|
||||||
this.items.push(getFormatItem(categoryItem, indexCategory));
|
this.items.push(getFormatItem(categoryItem, indexCategory));
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
@ -168,13 +264,11 @@ export class CGSelect implements ICgSelect {
|
|||||||
* @description Рендер елементов в селекте.
|
* @description Рендер елементов в селекте.
|
||||||
*/
|
*/
|
||||||
private render(select?: string): void {
|
private render(select?: string): void {
|
||||||
const { styles } = this.options;
|
|
||||||
|
|
||||||
const random = Math.random().toString(36).substring(2, 10);
|
const random = Math.random().toString(36).substring(2, 10);
|
||||||
|
|
||||||
if (select || (select && styles)) {
|
if (select || (select && this.styles)) {
|
||||||
this.initSelected(select);
|
this.initSelected(select);
|
||||||
customStyles(this.element!, styles);
|
customStyles(this.element!, this.styles!);
|
||||||
} else {
|
} else {
|
||||||
this.initSelected();
|
this.initSelected();
|
||||||
}
|
}
|
||||||
@ -189,9 +283,8 @@ export class CGSelect implements ICgSelect {
|
|||||||
|
|
||||||
ulList.classList.add('list');
|
ulList.classList.add('list');
|
||||||
|
|
||||||
if (styles) {
|
if (this.styles) {
|
||||||
const { list } = styles;
|
customStylesFormat(this.styles.list!, ulList);
|
||||||
customStylesFormat(list!, ulList);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.searchMode) {
|
if (this.searchMode) {
|
||||||
@ -201,8 +294,7 @@ export class CGSelect implements ICgSelect {
|
|||||||
inputSearch = createInputSearch(random, en.placeholder);
|
inputSearch = createInputSearch(random, en.placeholder);
|
||||||
}
|
}
|
||||||
|
|
||||||
const { search } = styles!;
|
customStylesFormat(this.styles?.search!, inputSearch);
|
||||||
customStylesFormat(search!, inputSearch);
|
|
||||||
ulList.appendChild(inputSearch);
|
ulList.appendChild(inputSearch);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -247,10 +339,11 @@ export class CGSelect implements ICgSelect {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
this.items.filter((item, index) => {
|
this.items.filter((item: IItems | any, index: number) => {
|
||||||
if (typeof item !== 'object') {
|
if (typeof item !== 'object') {
|
||||||
this.items.splice(index, 1);
|
this.items.splice(index, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
return item;
|
return item;
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -340,29 +433,26 @@ export class CGSelect implements ICgSelect {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Привaтный метод экземпляра класса DropDown
|
* Привaтный метод экземпляра класса DropDown
|
||||||
*
|
|
||||||
* @method initSelected
|
* @method initSelected
|
||||||
* @param {string} select необязательный елемент. Используется в методе selectIndex
|
* @param {string} select необязательный елемент. Используется в методе selectIndex
|
||||||
* @description Отрисовывает и стилизует селект
|
* @description Отрисовывает и стилизует селект
|
||||||
* @protected
|
* @protected
|
||||||
*/
|
*/
|
||||||
private initSelected(select?: string): void {
|
private initSelected(select?: string): void {
|
||||||
const { styles } = this.options;
|
|
||||||
|
|
||||||
if (this.selected) {
|
if (this.selected) {
|
||||||
createSelected(this.element, this.selected);
|
createSelected(this.element!, this.selected);
|
||||||
} else if (this.placeholder) {
|
} else if (this.placeholder) {
|
||||||
createSelected(this.element, this.placeholder);
|
createSelected(this.element!, this.placeholder);
|
||||||
} else {
|
} else {
|
||||||
if (this.language && this.language === 'ru') {
|
if (this.language && this.language === 'ru') {
|
||||||
createSelected(this.element, ru.selectPlaceholder);
|
createSelected(this.element!, ru.selectPlaceholder);
|
||||||
} else {
|
} else {
|
||||||
createSelected(this.element, en.selectPlaceholder);
|
createSelected(this.element!, en.selectPlaceholder);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (select) {
|
if (select) {
|
||||||
createSelected(this.element, select, styles);
|
createSelected(this.element!, select, this.styles);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.lable) {
|
if (this.lable) {
|
||||||
@ -375,8 +465,8 @@ export class CGSelect implements ICgSelect {
|
|||||||
this.element!.insertAdjacentElement('beforebegin', lableItem);
|
this.element!.insertAdjacentElement('beforebegin', lableItem);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (styles) {
|
if (this.styles) {
|
||||||
customStyles(this.element!, styles);
|
customStyles(this.element!, this.styles);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -722,7 +812,7 @@ export class CGSelect implements ICgSelect {
|
|||||||
* @returns {HTMLElement} возвращает ссылку на выбранный HTML элемент
|
* @returns {HTMLElement} возвращает ссылку на выбранный HTML элемент
|
||||||
* @method getElement
|
* @method getElement
|
||||||
*/
|
*/
|
||||||
public getElement(numberItem: number) {
|
public getElement(numberItem: number): IItems[] | string[] | any {
|
||||||
if (numberItem > this.items.length) {
|
if (numberItem > this.items.length) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,2 @@
|
|||||||
|
"use strict";
|
||||||
|
exports.__esModule = true;
|
||||||
@ -1,8 +1,24 @@
|
|||||||
import { ICgSelect } from '../../interfaces/cg-select.interface';
|
import { ICgSelect } from '../../interfaces/cg-select.interface';
|
||||||
|
|
||||||
export interface ICreateBreadCrumb {
|
export interface ICreateBreadCrumb {
|
||||||
|
/**
|
||||||
|
* Определенный экземпляр класса.
|
||||||
|
* @type {Element | null}
|
||||||
|
*/
|
||||||
element: Element | null;
|
element: Element | null;
|
||||||
|
/**
|
||||||
|
* Настройки селекта.
|
||||||
|
* @type {ICgSelect}
|
||||||
|
*/
|
||||||
option: ICgSelect;
|
option: ICgSelect;
|
||||||
|
/**
|
||||||
|
* Массив индексов выбранных элементов.
|
||||||
|
* @type {number[]}
|
||||||
|
*/
|
||||||
indexes: number[];
|
indexes: number[];
|
||||||
|
/**
|
||||||
|
* Массив с выбранными элементами.
|
||||||
|
* @type {string[]}
|
||||||
|
*/
|
||||||
selectedItems: string[];
|
selectedItems: string[];
|
||||||
}
|
}
|
||||||
|
|||||||
103
src/components/create-element/create-elementTs.js
Normal file
103
src/components/create-element/create-elementTs.js
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
"use strict";
|
||||||
|
exports.__esModule = true;
|
||||||
|
exports.createInputSearch = exports.createBreadCrumb = exports.createNativeSelectOption = exports.createNativeSelect = void 0;
|
||||||
|
var utilsTs_1 = require("../utils/utilsTs");
|
||||||
|
/**
|
||||||
|
* Метод который создает нативный селект
|
||||||
|
* @returns {HTMLSelectElement} Возвращает созданный нативный селект
|
||||||
|
*/
|
||||||
|
function createNativeSelect() {
|
||||||
|
var nativeSelect = document.createElement('select');
|
||||||
|
nativeSelect.setAttribute('name', 'dataSelect');
|
||||||
|
nativeSelect.classList.add('nativeSelect');
|
||||||
|
return nativeSelect;
|
||||||
|
}
|
||||||
|
exports.createNativeSelect = createNativeSelect;
|
||||||
|
/**
|
||||||
|
* Метод который создает Options для нативного селекта
|
||||||
|
* @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
|
||||||
|
*/
|
||||||
|
function createNativeSelectOption() {
|
||||||
|
var nativeOption = document.createElement('option');
|
||||||
|
nativeOption.classList.add('nativeSelect__nativeOption');
|
||||||
|
return nativeOption;
|
||||||
|
}
|
||||||
|
exports.createNativeSelectOption = createNativeSelectOption;
|
||||||
|
/**
|
||||||
|
* Метод который создает и отвечает за поведение chips
|
||||||
|
* @param {ICreateBreadCrumb} data объект в котором содержатся настройки и элементы селекта
|
||||||
|
* @param {string} title имя выбранного элемента для отрисовки chips
|
||||||
|
* @param {number} index индекс выбранного элемента для отрисовки chips
|
||||||
|
* @param {string} id уникальное id выбранного элемента
|
||||||
|
* @returns {HTMLElement} возвращает сформированный HTMLElement chips item
|
||||||
|
*/
|
||||||
|
function createBreadCrumb(data, title, index, id) {
|
||||||
|
var element = data.element, option = data.option, indexes = data.indexes, selectedItems = data.selectedItems;
|
||||||
|
var placeholder = option.placeholder, styles = option.styles;
|
||||||
|
var selected = element === null || element === void 0 ? void 0 : element.querySelector('.selected');
|
||||||
|
var nativeOption = element.querySelectorAll('.nativeSelect__nativeOption');
|
||||||
|
var liChip = document.createElement('li');
|
||||||
|
var textNode = document.createTextNode(title);
|
||||||
|
var svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||||
|
var path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||||
|
var path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||||
|
svgIcon.setAttribute('viewBox', '0 0 10 10');
|
||||||
|
path1.setAttribute('d', 'M3,7 L7,3');
|
||||||
|
path2.setAttribute('d', 'M3,3 L7,7');
|
||||||
|
liChip.setAttribute('id', "tag-".concat(index, "-").concat(id));
|
||||||
|
svgIcon.classList.add('svg-icon');
|
||||||
|
svgIcon.appendChild(path1);
|
||||||
|
svgIcon.appendChild(path2);
|
||||||
|
liChip.appendChild(textNode);
|
||||||
|
liChip.appendChild(svgIcon);
|
||||||
|
if (styles) {
|
||||||
|
// const { chips } = styles;
|
||||||
|
// customStylesFormat(chips, liChip);
|
||||||
|
}
|
||||||
|
svgIcon.addEventListener('click', function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
(0, utilsTs_1.nativeOptionMultiple)(nativeOption, title, false);
|
||||||
|
var deleteIcon = indexes.indexOf(index);
|
||||||
|
var checkBox;
|
||||||
|
indexes.splice(deleteIcon, 1);
|
||||||
|
selectedItems.splice(deleteIcon, 1);
|
||||||
|
if (id) {
|
||||||
|
checkBox = document.getElementById("chbox-".concat(id));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
checkBox = document.getElementById("chbox-".concat(index));
|
||||||
|
}
|
||||||
|
checkBox.checked = false;
|
||||||
|
checkBox.parentElement.classList.remove('active');
|
||||||
|
if (!selectedItems.length) {
|
||||||
|
selected.innerText = placeholder;
|
||||||
|
}
|
||||||
|
liChip.parentElement.removeChild(liChip);
|
||||||
|
});
|
||||||
|
return liChip;
|
||||||
|
}
|
||||||
|
exports.createBreadCrumb = createBreadCrumb;
|
||||||
|
/**
|
||||||
|
* Метод который создает поиск элементов в селекте
|
||||||
|
* @param {string} random уникальное значение для input элемента.
|
||||||
|
* @param {string} lenguage текст на определенном языке переданный из файла language.js
|
||||||
|
* @returns {HTMLInputElement} Возвращает сформированный input елемент.
|
||||||
|
*/
|
||||||
|
function createInputSearch(random, lenguage) {
|
||||||
|
var inputSearch = document.createElement('input');
|
||||||
|
inputSearch.type = 'text';
|
||||||
|
inputSearch.classList.add('inputSearch');
|
||||||
|
inputSearch.setAttribute('id', "searchSelect-".concat(random));
|
||||||
|
if (lenguage) {
|
||||||
|
inputSearch.setAttribute('placeholder', "".concat(lenguage));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
inputSearch.setAttribute('placeholder', 'Search...');
|
||||||
|
}
|
||||||
|
inputSearch.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
return inputSearch;
|
||||||
|
}
|
||||||
|
exports.createInputSearch = createInputSearch;
|
||||||
2
src/components/utils/urils.interface.js
Normal file
2
src/components/utils/urils.interface.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
"use strict";
|
||||||
|
exports.__esModule = true;
|
||||||
@ -1,16 +1,53 @@
|
|||||||
import { IItems } from '../../interfaces/items.interface';
|
import { IItems } from '../../interfaces/items.interface';
|
||||||
|
|
||||||
export interface IDataItem {
|
export interface IDataItem {
|
||||||
|
/**
|
||||||
|
* Необязательный параметр. Категория группы элементов.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
category?: string;
|
category?: string;
|
||||||
categoryItems?: string;
|
/**
|
||||||
|
* Необязательный параметр. Массив с элементами.
|
||||||
|
* @type {IItems[] | string[] | any}
|
||||||
|
*/
|
||||||
|
categoryItems?: IItems[] | string[] | any;
|
||||||
|
/**
|
||||||
|
* Значение переданного элемента.
|
||||||
|
* @type {string | IItems | number}
|
||||||
|
*/
|
||||||
ItemValue: string | IItems | number;
|
ItemValue: string | IItems | number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ISelectedItems {
|
export interface ISelectedItems {
|
||||||
|
/**
|
||||||
|
* Placeholder необязательный параметр, в который передается текст плейсхолдера селекта.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
|
/**
|
||||||
|
* Необязательный параметр, в который передается элемент который будет выбран изначально в селекте.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
selected?: string;
|
selected?: string;
|
||||||
|
/**
|
||||||
|
* Массив выбранных элементов из списка
|
||||||
|
* @type {string[]}
|
||||||
|
*/
|
||||||
selectedItems?: string[];
|
selectedItems?: string[];
|
||||||
|
/**
|
||||||
|
* Массив индексов выбранных элементов
|
||||||
|
* @type {number[]}
|
||||||
|
*/
|
||||||
indexes?: number[];
|
indexes?: number[];
|
||||||
|
/**
|
||||||
|
* Необязательный параметр, который отвечает за поведения селекта,
|
||||||
|
* для него, ***работает только в месте с подключением multiselect.
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
multiselectTag?: boolean;
|
multiselectTag?: boolean;
|
||||||
|
/**
|
||||||
|
* Необязательный параметр, который отвечает за включение светлой/темной темы по умолчанию, стоит темная тема.
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
darkTheme?: boolean;
|
darkTheme?: boolean;
|
||||||
}
|
}
|
||||||
|
|||||||
210
src/components/utils/utilsTs.js
Normal file
210
src/components/utils/utilsTs.js
Normal file
@ -0,0 +1,210 @@
|
|||||||
|
"use strict";
|
||||||
|
/**
|
||||||
|
* Utils module
|
||||||
|
* @module Utils
|
||||||
|
*/
|
||||||
|
exports.__esModule = true;
|
||||||
|
exports.customStylesFormat = exports.customStyles = exports.nativeOptionMultiple = exports.nativeOptionOrdinary = exports.clearSelect = exports.createSelected = exports.checkItemStruct = exports.getSelectText = exports.getFormatItem = void 0;
|
||||||
|
/**
|
||||||
|
* Преобразование каждого елемента полученного из поля Items;
|
||||||
|
* @param {any} dataItem полученный елемент переданный при создании селекта может быть как object / string
|
||||||
|
* @param {number} index индекс этого элемента
|
||||||
|
* @returns {IItems} возвращает сформированный объект
|
||||||
|
*/
|
||||||
|
function getFormatItem(dataItem, index) {
|
||||||
|
var random = Math.random().toString(36).substring(2, 10);
|
||||||
|
var item;
|
||||||
|
if (checkItemStruct(dataItem)) {
|
||||||
|
return dataItem;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
item = {
|
||||||
|
id: random,
|
||||||
|
title: dataItem,
|
||||||
|
value: index
|
||||||
|
};
|
||||||
|
return item;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
exports.getFormatItem = getFormatItem;
|
||||||
|
/**
|
||||||
|
* Вставка изначального текста селекта(до выбора)
|
||||||
|
* @param {ITextSelect} data объект в котором находяться title селекта
|
||||||
|
* @param {HTMLElement | null | undefined} select елемент селекта, куда будет вставляться title
|
||||||
|
* @returns {HTMLElement} возвращает сформированный елемент селекта
|
||||||
|
*/
|
||||||
|
function getSelectText(data, select) {
|
||||||
|
var placeholder = data.placeholder, selected = data.selected;
|
||||||
|
if (placeholder) {
|
||||||
|
select.innerText = placeholder;
|
||||||
|
}
|
||||||
|
else if (selected) {
|
||||||
|
select.innerText = selected;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
select.innerText = 'Select...';
|
||||||
|
}
|
||||||
|
return select;
|
||||||
|
}
|
||||||
|
exports.getSelectText = getSelectText;
|
||||||
|
/**
|
||||||
|
* Проверка содержит ли item указанные свойства,
|
||||||
|
* @param {object} item проверяемый на определенную структуру элемент
|
||||||
|
* @returns {boolean} возвращает true/false если item содержит указанные свойства
|
||||||
|
*/
|
||||||
|
function checkItemStruct(item) {
|
||||||
|
if (item && typeof item !== 'object') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value');
|
||||||
|
}
|
||||||
|
exports.checkItemStruct = checkItemStruct;
|
||||||
|
/**
|
||||||
|
* Создание кнопки выбора элементов
|
||||||
|
* @param {HTMLElement} element созданный экземпляр класса DropDown
|
||||||
|
* @param {string} content placeholer передаваемый из настроек селекта
|
||||||
|
* @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
|
||||||
|
*/
|
||||||
|
function createSelected(element, content, styles) {
|
||||||
|
var select = document.createElement('div');
|
||||||
|
var selected = document.createElement('p');
|
||||||
|
var caret = document.createElement('div');
|
||||||
|
select.classList.add('cg-select');
|
||||||
|
selected.classList.add('selected');
|
||||||
|
caret.classList.add('caret');
|
||||||
|
select.appendChild(selected);
|
||||||
|
select.appendChild(caret);
|
||||||
|
if (content) {
|
||||||
|
var text = document.createTextNode(content);
|
||||||
|
selected.appendChild(text);
|
||||||
|
element === null || element === void 0 ? void 0 : element.appendChild(select);
|
||||||
|
}
|
||||||
|
else if (styles) {
|
||||||
|
customStyles(element, styles);
|
||||||
|
select.setAttribute('style', "".concat(styles));
|
||||||
|
selected.setAttribute('style', "".concat(styles));
|
||||||
|
caret.setAttribute('style', "".concat(styles));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
exports.createSelected = createSelected;
|
||||||
|
/**
|
||||||
|
* Создание кнопки отчиски селекта, при единичном выборе.
|
||||||
|
* @param {HTMLElement} select место в селекте которое будет переназначено на ''.
|
||||||
|
* @param {Element} element экземпляр класса DropDown.
|
||||||
|
* @param {ISelectedItems} dataSelectText текст который отрисовывается в селекте.
|
||||||
|
*/
|
||||||
|
function clearSelect(select, element, dataSelectText) {
|
||||||
|
var selectedItems = dataSelectText.selectedItems, indexes = dataSelectText.indexes, darkTheme = dataSelectText.darkTheme, multiselectTag = dataSelectText.multiselectTag;
|
||||||
|
var options = element.querySelectorAll('.list__item');
|
||||||
|
var ulMultiSelect = element.querySelector('.multiselect-tag');
|
||||||
|
var svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||||
|
var path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||||
|
var path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||||
|
var checkBox = element.querySelectorAll('li input');
|
||||||
|
svgIcon.setAttribute('viewBox', '0 0 10 10');
|
||||||
|
path1.setAttribute('d', 'M2,8 L8,2');
|
||||||
|
path2.setAttribute('d', 'M2,2 L8,8');
|
||||||
|
svgIcon.appendChild(path1);
|
||||||
|
svgIcon.appendChild(path2);
|
||||||
|
if (multiselectTag) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (darkTheme === true || !darkTheme) {
|
||||||
|
path1.classList.add('pathWhite');
|
||||||
|
path2.classList.add('pathWhite');
|
||||||
|
}
|
||||||
|
if (darkTheme === false) {
|
||||||
|
path1.classList.add('pathBlack');
|
||||||
|
path2.classList.add('pathBlack');
|
||||||
|
}
|
||||||
|
svgIcon.classList.add('svg-icon');
|
||||||
|
svgIcon.classList.add('svg-clear');
|
||||||
|
select.appendChild(svgIcon);
|
||||||
|
svgIcon.addEventListener('click', function () {
|
||||||
|
select.innerText = '';
|
||||||
|
if (Array.isArray(selectedItems)) {
|
||||||
|
selectedItems.splice(0);
|
||||||
|
indexes.splice(0);
|
||||||
|
}
|
||||||
|
checkBox.forEach(function (item) {
|
||||||
|
if (item instanceof HTMLInputElement) {
|
||||||
|
item.checked = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
getSelectText(dataSelectText, select);
|
||||||
|
options.forEach(function (option) {
|
||||||
|
option.classList.remove('active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
exports.clearSelect = clearSelect;
|
||||||
|
/**
|
||||||
|
* Поведение нативного(одинарного) селекта при выборе кастомного
|
||||||
|
* @param {NodeList} element NodeList нативного селекта
|
||||||
|
* @param {any} item выбранный элемент в кастомном селекте
|
||||||
|
*/
|
||||||
|
function nativeOptionOrdinary(element, item) {
|
||||||
|
element.forEach(function (option) {
|
||||||
|
option.removeAttribute('selected');
|
||||||
|
if (option.textContent === item) {
|
||||||
|
option.setAttribute('selected', 'selected');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
exports.nativeOptionOrdinary = nativeOptionOrdinary;
|
||||||
|
/**
|
||||||
|
* Поведение нативного(Multiple) селекта при выборе в кастомном
|
||||||
|
* @param {NodeListOf<Element> | undefined} element NodeList нативного селекта
|
||||||
|
* @param {string} item выбранный элемент в кастомном селекте
|
||||||
|
* @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
|
||||||
|
*/
|
||||||
|
function nativeOptionMultiple(element, item, condition) {
|
||||||
|
element.forEach(function (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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
exports.nativeOptionMultiple = nativeOptionMultiple;
|
||||||
|
/**
|
||||||
|
* Поиск и стилизация елементов полученных из styles экземпляра DropDown
|
||||||
|
* @param {Element} element созданный экземпляр класса DropDown
|
||||||
|
* @param {object} styles объект в котором находяться настройки кастомизации частей селекта
|
||||||
|
*/
|
||||||
|
function customStyles(element, styles) {
|
||||||
|
var cgSelect = element.querySelector('.cg-select');
|
||||||
|
var caretSelect = element.querySelector('.caret');
|
||||||
|
var placeholderSelect = element.querySelector('.selected');
|
||||||
|
var lableItem = element.parentElement.querySelector('h1.label');
|
||||||
|
customStylesFormat(styles.head, cgSelect);
|
||||||
|
customStylesFormat(styles.caret, caretSelect);
|
||||||
|
customStylesFormat(styles.lable, lableItem);
|
||||||
|
if (placeholderSelect) {
|
||||||
|
customStylesFormat(styles.placeholder, placeholderSelect);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
exports.customStyles = customStyles;
|
||||||
|
/**
|
||||||
|
* Универсальный метод для стилизации селекта
|
||||||
|
* @param {object} elemOption объект полученное из объекта styles у которого мы получаем ключ-значение стилей
|
||||||
|
* @param {HTMLElement} selector HTMLElement подвергающиеся кастомизации
|
||||||
|
*/
|
||||||
|
function customStylesFormat(elemOption, selector) {
|
||||||
|
if (elemOption) {
|
||||||
|
Object.entries(elemOption).forEach(function (_a) {
|
||||||
|
var key = _a[0], value = _a[1];
|
||||||
|
selector.style[key] = value;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
exports.customStylesFormat = customStylesFormat;
|
||||||
@ -1,14 +1,18 @@
|
|||||||
import { ICgSelect } from '../../interfaces/cg-select.interface';
|
/**
|
||||||
|
* Utils module
|
||||||
|
* @module Utils
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { IStyle } from '../../interfaces/cg-select.interface';
|
||||||
import { IItems } from '../../interfaces/items.interface';
|
import { IItems } from '../../interfaces/items.interface';
|
||||||
import { IDataItem, ISelectedItems } from './urils.interface';
|
import { IDataItem, ISelectedItems } from './urils.interface';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Преобразование каждого елемента полученного из поля Items;
|
* Преобразование каждого елемента полученного из поля Items;
|
||||||
* @param {IDataItem} dataItem полученный елемент переданный при создании селекта может быть как object / string
|
* @param {any} dataItem полученный елемент переданный при создании селекта может быть как object / string
|
||||||
* @param {number} index индекс этого элемента
|
* @param {number} index индекс этого элемента
|
||||||
* @returns {IDataItem | IItems} возвращает сформированный объект
|
* @returns {IItems} возвращает сформированный объект
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export function getFormatItem(dataItem: any, index: number): IItems {
|
export function getFormatItem(dataItem: any, index: number): IItems {
|
||||||
const random = Math.random().toString(36).substring(2, 10);
|
const random = Math.random().toString(36).substring(2, 10);
|
||||||
let item: IItems;
|
let item: IItems;
|
||||||
@ -67,7 +71,7 @@ export function checkItemStruct(item: object): boolean {
|
|||||||
* @param {string} content placeholer передаваемый из настроек селекта
|
* @param {string} content placeholer передаваемый из настроек селекта
|
||||||
* @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
|
* @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
|
||||||
*/
|
*/
|
||||||
export function createSelected(element: Element | null, content?: string, styles?: object) {
|
export function createSelected(element: Element, content?: string, styles?: IStyle) {
|
||||||
const select = document.createElement('div');
|
const select = document.createElement('div');
|
||||||
const selected = document.createElement('p');
|
const selected = document.createElement('p');
|
||||||
const caret = document.createElement('div');
|
const caret = document.createElement('div');
|
||||||
@ -89,17 +93,6 @@ export function createSelected(element: Element | null, content?: string, styles
|
|||||||
selected.setAttribute('style', `${styles}`);
|
selected.setAttribute('style', `${styles}`);
|
||||||
caret.setAttribute('style', `${styles}`);
|
caret.setAttribute('style', `${styles}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
// if (styles) {
|
|
||||||
// customStyles(element, styles);
|
|
||||||
|
|
||||||
// element.innerHTML = `
|
|
||||||
// <div class="cg-select" style = "${styles}">
|
|
||||||
// <p class="selected" style = "${styles}">${content}</p>
|
|
||||||
// <div class="caret" style = "${styles}"></div>
|
|
||||||
// </div>
|
|
||||||
// `;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -210,24 +203,18 @@ export function nativeOptionMultiple(
|
|||||||
* @param {Element} element созданный экземпляр класса DropDown
|
* @param {Element} element созданный экземпляр класса DropDown
|
||||||
* @param {object} styles объект в котором находяться настройки кастомизации частей селекта
|
* @param {object} styles объект в котором находяться настройки кастомизации частей селекта
|
||||||
*/
|
*/
|
||||||
export function customStyles(element: Element, styles: any) {
|
export function customStyles(element: Element, styles: IStyle) {
|
||||||
if (!styles) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { head, caret, placeholder, lable } = styles;
|
|
||||||
|
|
||||||
const cgSelect = element.querySelector('.cg-select');
|
const cgSelect = element.querySelector('.cg-select');
|
||||||
const caretSelect = element.querySelector('.caret');
|
const caretSelect = element.querySelector('.caret');
|
||||||
const placeholderSelect = element.querySelector('.selected');
|
const placeholderSelect = element.querySelector('.selected');
|
||||||
const lableItem = element.parentElement!.querySelector('h1.label');
|
const lableItem = element.parentElement!.querySelector('h1.label');
|
||||||
|
|
||||||
customStylesFormat(head, cgSelect!);
|
customStylesFormat(styles.head!, cgSelect!);
|
||||||
customStylesFormat(caret, caretSelect!);
|
customStylesFormat(styles.caret!, caretSelect!);
|
||||||
customStylesFormat(lable, lableItem!);
|
customStylesFormat(styles.lable!, lableItem!);
|
||||||
|
|
||||||
if (placeholderSelect) {
|
if (placeholderSelect) {
|
||||||
customStylesFormat(placeholder, placeholderSelect);
|
customStylesFormat(styles.placeholder!, placeholderSelect);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
2
src/interfaces/cg-select.interface.js
Normal file
2
src/interfaces/cg-select.interface.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
"use strict";
|
||||||
|
exports.__esModule = true;
|
||||||
@ -1,29 +1,125 @@
|
|||||||
import { IItems } from './items.interface';
|
import { IItems } from './items.interface';
|
||||||
|
|
||||||
export interface ICgSelect {
|
export interface ICgSelect {
|
||||||
|
/**
|
||||||
|
* Уникальный селектор - *обязательный параметр(индефикатор), который задаеться при создании селекта.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
selector: string;
|
selector: string;
|
||||||
|
/**
|
||||||
|
* Необязательный параметр, в который передается элемент который будет выбран изначально в селекте.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
selected?: string;
|
selected?: string;
|
||||||
|
/**
|
||||||
|
* Placeholder необязательный параметр, в который передается текст плейсхолдера селекта.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
|
/**
|
||||||
|
* *Обязательный параметр(эсли не указан другой способ получения данных (url)), это массив элементов,
|
||||||
|
* которые будут отображаться в селекте при выборе.
|
||||||
|
* @type {IItems[] | string[] | any}
|
||||||
|
*/
|
||||||
items?: IItems[] | string[] | any;
|
items?: IItems[] | string[] | any;
|
||||||
|
/**
|
||||||
|
* Необязательный параметр, который отвечает за включение светлой/темной темы по умолчанию, стоит темная тема(darkTheme == true)
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
darkTheme?: boolean;
|
darkTheme?: boolean;
|
||||||
|
/**
|
||||||
|
* Необязательный параметр, который добавляет живой поиск по элеметам селекта.
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
searchMode?: boolean;
|
searchMode?: boolean;
|
||||||
|
/**
|
||||||
|
* Необязательный параметр, который отвечает за поведения селекта при открытии, если closeOnSelect: false,
|
||||||
|
* тогда при выборе елемента в селекте закрытия не происходит,
|
||||||
|
* и можно выбрать другой элемент по умолчанию, closeOnSelect:true.
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
closeOnSelect?: boolean;
|
closeOnSelect?: boolean;
|
||||||
|
/**
|
||||||
|
* Необязательный параметр, который отвечает за поведения селекта при открытии на мобильных усторйствах.
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
nativeSelectMode?: boolean;
|
nativeSelectMode?: boolean;
|
||||||
|
/**
|
||||||
|
* Необязательный параметр, который отвечает за поведения селекта при открытии.
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
listDisplayMode?: boolean;
|
listDisplayMode?: boolean;
|
||||||
|
/**
|
||||||
|
* Необязательный параметр, отвечающий за локализацию некоторых текстовых элементов.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
language?: string;
|
language?: string;
|
||||||
|
/**
|
||||||
|
* Необязательный параметр,который добавляет lable перед селектом.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
lable?: string;
|
lable?: string;
|
||||||
|
/**
|
||||||
|
* Необязательный параметр, который отвечает за кастомизацию элементов селекта,
|
||||||
|
* в него передаются обьекты с CSS свойствами для кастомизируемых элементов.
|
||||||
|
* @type {IStyle}
|
||||||
|
*/
|
||||||
styles?: IStyle;
|
styles?: IStyle;
|
||||||
|
/**
|
||||||
|
* Необязательный параметр, который отвечает за поведения селекта, передавая в этот параметр, евент по типу 'mouseenter',
|
||||||
|
* селект будет открываться при наведении.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
event?: string;
|
event?: string;
|
||||||
|
/**
|
||||||
|
* Обязательный параметр(эсли не указан другой способ получения данных (items)),
|
||||||
|
* данные которые приходят с бекэнда в формате {id:"", title: "", value: ""}.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
url?: string;
|
url?: string;
|
||||||
|
/**
|
||||||
|
* Необязательный параметр, который отвечает за поведения селекта, добавляет возможность выбирать несколько элементов.
|
||||||
|
* Выбранные элементы отрисовываются как обычный текст, через запятую.
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
multiselect?: boolean;
|
multiselect?: boolean;
|
||||||
|
/**
|
||||||
|
* Необязательный параметр, который отвечает за поведения селекта,
|
||||||
|
* для него, ***работает только в месте с подключением multiselect.
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
multiselectTag?: boolean;
|
multiselectTag?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IStyle {
|
export interface IStyle {
|
||||||
|
/**
|
||||||
|
* Кастомизация кнопки селекта.
|
||||||
|
* @type {object}
|
||||||
|
*/
|
||||||
head?: object;
|
head?: object;
|
||||||
|
/**
|
||||||
|
* Кастомизация каретки.
|
||||||
|
* @type {object}
|
||||||
|
*/
|
||||||
caret?: object;
|
caret?: object;
|
||||||
|
/**
|
||||||
|
* Кастомизация placeholder.
|
||||||
|
* @type {object}
|
||||||
|
*/
|
||||||
placeholder?: object;
|
placeholder?: object;
|
||||||
|
/**
|
||||||
|
* Кастомизация lable селекта.
|
||||||
|
* @type {object}
|
||||||
|
*/
|
||||||
lable?: object;
|
lable?: object;
|
||||||
|
/**
|
||||||
|
* Кастомизация листа с выбором элементов.
|
||||||
|
* @type {object}
|
||||||
|
*/
|
||||||
list?: object;
|
list?: object;
|
||||||
|
/**
|
||||||
|
* Кастомизация поиска.
|
||||||
|
* @type {object}
|
||||||
|
*/
|
||||||
search?: object;
|
search?: object;
|
||||||
}
|
}
|
||||||
|
|||||||
2
src/interfaces/items.interface.js
Normal file
2
src/interfaces/items.interface.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
"use strict";
|
||||||
|
exports.__esModule = true;
|
||||||
@ -1,5 +1,17 @@
|
|||||||
export interface IItems{
|
export interface IItems {
|
||||||
id: string;
|
/**
|
||||||
title: string;
|
* Уникальное ID элемента
|
||||||
value: number | string
|
* @type {string}
|
||||||
}
|
*/
|
||||||
|
id: string;
|
||||||
|
/**
|
||||||
|
* Текстовое значение элемента
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
|
title: string;
|
||||||
|
/**
|
||||||
|
* Порядковый номер, или другая информация
|
||||||
|
* @type {number | string}
|
||||||
|
*/
|
||||||
|
value: number | string;
|
||||||
|
}
|
||||||
|
|||||||
2
src/interfaces/language.interface.js
Normal file
2
src/interfaces/language.interface.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
"use strict";
|
||||||
|
exports.__esModule = true;
|
||||||
@ -1,5 +1,17 @@
|
|||||||
export interface ILanguage {
|
export interface ILanguage {
|
||||||
|
/**
|
||||||
|
* Текст в поиске.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
placeholder: string;
|
placeholder: string;
|
||||||
|
/**
|
||||||
|
* Дефолтный Текст Селекта если не указан placeholder или выбранный элемент
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
selectPlaceholder: string;
|
selectPlaceholder: string;
|
||||||
|
/**
|
||||||
|
* Текст если совпадений нет.
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
textInListSearch: string;
|
textInListSearch: string;
|
||||||
}
|
}
|
||||||
|
|||||||
13
src/language/languageTS.js
Normal file
13
src/language/languageTS.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
"use strict";
|
||||||
|
exports.__esModule = true;
|
||||||
|
exports.en = exports.ru = void 0;
|
||||||
|
exports.ru = {
|
||||||
|
selectPlaceholder: 'Выберите элемент...',
|
||||||
|
placeholder: 'Поиск...',
|
||||||
|
textInListSearch: 'Совпадений нет...'
|
||||||
|
};
|
||||||
|
exports.en = {
|
||||||
|
selectPlaceholder: 'Select element...',
|
||||||
|
placeholder: 'Search...',
|
||||||
|
textInListSearch: 'No matches...'
|
||||||
|
};
|
||||||
102
tsconfig.json
Normal file
102
tsconfig.json
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
{
|
||||||
|
"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": "es2016", /* 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": "./", /* 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 '<reference>'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": "./", /* 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. */
|
||||||
|
|
||||||
|
/* Type Checking */
|
||||||
|
"strict": true, /* Enable all strict type-checking options. */
|
||||||
|
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
|
||||||
|
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
|
||||||
|
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
|
||||||
|
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
|
||||||
|
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
|
||||||
|
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
|
||||||
|
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
|
||||||
|
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
|
||||||
|
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
|
||||||
|
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
|
||||||
|
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
|
||||||
|
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
|
||||||
|
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
|
||||||
|
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
|
||||||
|
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
|
||||||
|
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
|
||||||
|
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
|
||||||
|
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
|
||||||
|
|
||||||
|
/* Completeness */
|
||||||
|
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
|
||||||
|
"skipLibCheck": true /* Skip type checking all .d.ts files. */
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user