+
const dropdown = new CGSelect({
selector: '.cg-dropdown_one',
placeholder: 'Choose a car',
- lable: 'EXAMPLE',
+ label: 'EXAMPLE',
items: [
'BMW',
{
@@ -78,90 +81,93 @@
- Default select with function nativeSelectMode
+
+ Default select with function nativeSelectMode
+
-
+ 'Mersedes',
+ 'MAN',
+ 'Ferari',
+ ],
+ styles: {
+ head: {
+ width: '830px',
+ },
+ list: {
+ width: '824px',
+ },
+ },
+ });
+
+
- Default select with function listDisplayMode
+
+ Default select with function listDisplayMode
+
-
+ 'Mersedes',
+ 'MAN',
+ 'Ferari',
+ ],
+ styles: {
+ head: {
+ width: '830px',
+ },
+ list: {
+ width: '824px',
+ },
+ },
+ });
+
+
@@ -173,10 +179,11 @@
+
const dropdown = new CGSelect({
selector: '.cg-dropdown_three',
placeholder: 'URL',
- url: 'https://jsonplaceholder.typicode.com/users',
+ url: 'https://jsonplaceholder.typicode.com/todos',
searchMode: true,
darkTheme: false,
language: 'ru',
@@ -201,16 +208,16 @@
Default theme:
- To change the theme of the select, you need to specify this parameter in the select
- settings. The default theme is the classic theme, you can choose a white or dark
- theme.
+ To change the theme of the select, you need to specify this
+ parameter in the select settings. The default theme is the
+ classic theme, you can choose a white or dark theme.
-
-
+
+
const dropdown = new CGSelect({
selector: '.cg-dropdown_one',
placeholder: 'Choose a car',
- lable: 'EXAMPLE',
+ label: 'EXAMPLE',
items: [
...
],
@@ -224,11 +231,14 @@
Create custom theme:
- To create your own theme, you need to create an object with the following fields.
- In these fields you need to insert the previously created css class. After
- creating the object, just pass it to the select settings.
-
The main interface for creating a theme uses a Json data view, however if you want
- to set the theme locally using classes, use the CustomTheme interface (an example with it is below)
+ To create your own theme, you need to create an object with
+ the following fields. In these fields you need to insert the
+ previously created css class. After creating the object, just
+ pass it to the select settings.
+
The main interface for creating a theme uses a Json data
+ view, however if you want to set the theme locally using
+ classes, use the CustomTheme interface (an example with it is
+ below)
@@ -240,7 +250,7 @@
placeholder?: object ,
caret?: object ,
search?: object ,
- lable?: object ,
+ label?: object ,
},
};
@@ -258,7 +268,7 @@
-
+
const newTheme: CustomTheme = {
name: 'test',
styles: {
@@ -268,7 +278,7 @@
caret: 'caretTestClass', ,
search: 'searchTestClass', ,
chips: 'chipsTestClass', ,
- lable: 'lableTestClass', ,
+ label: 'labelTestClass', ,
},
};
@@ -305,7 +315,7 @@
borderTop: '6px solid white'
},
search: {},
- lable: {},
+ label: {},
},
};
@@ -326,44 +336,6 @@
-
- Select constructor
-
-
- Select Style Builder:
-
- This is a constructor for styling a select online without downloading. For it to work,
- you need to:
-
- - Select a part of the select for customization.
- - Enter styles in the text field in the form "color: red;".
- - Click on the render button.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Categories
@@ -374,6 +346,7 @@
+
const dropdown = new CGSelect({
selector: '.cg-dropdown_categories',
placeholder: 'Выберите регион',
@@ -427,20 +400,28 @@
Use callbacks
-
+
- When using a callback, you can pass in the first parameter such values as: open, close, select, clear.
-
The second parameter is a function in which there are two parameters: state and value.
-
The output of the value can be seen in the browser console.
+
+ When using a callback, you can pass in the first parameter such
+ values as:
+ open, close, select, clear.
+
The second parameter is a function in which there are two
+ parameters: state and
+ value.
The output of the
+ value can be seen in the browser console.
-
+
+
const dropdown = new CGSelect({
selector: '.cg-dropdown_categories',
placeholder: 'Choose a car',
@@ -486,6 +467,7 @@
+
const dropdown = new CGSelect({
selector: '.cg-dropdown_usedBtn',
placeholder: 'Choose a car',
@@ -532,7 +514,12 @@
Function disabled
-
+
@@ -544,6 +531,7 @@
+
const dropdown = new CGSelect({
selector: '.cg-dropdown_checkboxDisable',
placeholder: 'Choose a car',
diff --git a/index.js b/index.js
index 92704e2..dc1a001 100644
--- a/index.js
+++ b/index.js
@@ -1,8 +1,7 @@
import CGSelect from "cg-select";
-// import { newCustomTheme } from './src/themeTest';
+import "./src/buttonControlCode";
-import "./src/example";
-import "./src/constructor/constructor";
+import "./style.scss";
// ------------------------------Обычный селект--------------------
const dropdown = new CGSelect({
diff --git a/package-lock.json b/package-lock.json
index 88800e8..051a7dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,15 @@
{
"name": "example-cg-select-page",
- "version": "0.2.5",
+ "version": "0.3.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "example-cg-select-page",
- "version": "0.2.5",
+ "version": "0.3.0",
"license": "ISC",
"dependencies": {
- "cg-select": "^0.2.5",
+ "cg-select": "^0.3.0",
"gh-pages": "^5.0.0",
"parcel": "^2.8.3"
},
@@ -1371,11 +1371,6 @@
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
},
- "node_modules/@types/prettier": {
- "version": "2.7.2",
- "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz",
- "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg=="
- },
"node_modules/abortcontroller-polyfill": {
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.5.tgz",
@@ -1392,11 +1387,6 @@
"node": ">=0.4.0"
}
},
- "node_modules/ansi-sequence-parser": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.0.tgz",
- "integrity": "sha512-lEm8mt52to2fT8GhciPCGeCXACSz2UwIN4X2e2LJSnZ5uAbn2/dsYdOmUXq0AtWS5cpAupysIneExOgH0Vd2TQ=="
- },
"node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -1551,55 +1541,9 @@
]
},
"node_modules/cg-select": {
- "version": "0.2.5",
- "resolved": "https://registry.npmjs.org/cg-select/-/cg-select-0.2.5.tgz",
- "integrity": "sha512-RziN32tl8Wdd0JTLPsIFIlD1cTDfCpmuzqtrr1dYILh8gT8HRpmhRgXC0FzcLWqIeeCPOXCxNaIfzQ/LNvPzdg==",
- "dependencies": {
- "@parcel/optimizer-css": "^2.8.0",
- "@types/prettier": "^2.7.2",
- "gh-pages": "^4.0.0",
- "typedoc": "^0.23.24",
- "typescript": "^4.9.4"
- }
- },
- "node_modules/cg-select/node_modules/async": {
- "version": "2.6.4",
- "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
- "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
- "dependencies": {
- "lodash": "^4.17.14"
- }
- },
- "node_modules/cg-select/node_modules/commander": {
- "version": "2.20.3",
- "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
- "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
- },
- "node_modules/cg-select/node_modules/email-addresses": {
- "version": "3.1.0",
- "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
- "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg=="
- },
- "node_modules/cg-select/node_modules/gh-pages": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-4.0.0.tgz",
- "integrity": "sha512-p8S0T3aGJc68MtwOcZusul5qPSNZCalap3NWbhRUZYu1YOdp+EjZ+4kPmRM8h3NNRdqw00yuevRjlkuSzCn7iQ==",
- "dependencies": {
- "async": "^2.6.1",
- "commander": "^2.18.0",
- "email-addresses": "^3.0.1",
- "filenamify": "^4.3.0",
- "find-cache-dir": "^3.3.1",
- "fs-extra": "^8.1.0",
- "globby": "^6.1.0"
- },
- "bin": {
- "gh-pages": "bin/gh-pages.js",
- "gh-pages-clean": "bin/gh-pages-clean.js"
- },
- "engines": {
- "node": ">=10"
- }
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/cg-select/-/cg-select-0.3.0.tgz",
+ "integrity": "sha512-o6bJV8vH+iwgypfYQOUZEqsJXm6F967g4s9HRf9wy8Kt04rmwlNxUIadB0DulC/eoKzR48UC5H10WJT3Zn4SFA=="
},
"node_modules/chalk": {
"version": "4.1.2",
@@ -2256,11 +2200,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": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -2488,16 +2427,6 @@
"node": ">=8"
}
},
- "node_modules/lodash": {
- "version": "4.17.21",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
- "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
- },
- "node_modules/lunr": {
- "version": "2.3.9",
- "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
- "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
- },
"node_modules/make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -2520,17 +2449,6 @@
"semver": "bin/semver.js"
}
},
- "node_modules/marked": {
- "version": "4.2.12",
- "resolved": "https://registry.npmjs.org/marked/-/marked-4.2.12.tgz",
- "integrity": "sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw==",
- "bin": {
- "marked": "bin/marked.js"
- },
- "engines": {
- "node": ">= 12"
- }
- },
"node_modules/mdn-data": {
"version": "2.0.14",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -2599,6 +2517,25 @@
"node-gyp-build-optional-packages-test": "build-test.js"
}
},
+ "node_modules/nanoid": {
+ "version": "3.3.6",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+ "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "optional": true,
+ "peer": true,
+ "bin": {
+ "nanoid": "bin/nanoid.cjs"
+ },
+ "engines": {
+ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+ }
+ },
"node_modules/node-addon-api": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
@@ -2845,6 +2782,31 @@
"node": ">=8"
}
},
+ "node_modules/postcss": {
+ "version": "8.4.21",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+ "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
+ },
+ {
+ "type": "tidelift",
+ "url": "https://tidelift.com/funding/github/npm/postcss"
+ }
+ ],
+ "optional": true,
+ "peer": true,
+ "dependencies": {
+ "nanoid": "^3.3.4",
+ "picocolors": "^1.0.0",
+ "source-map-js": "^1.0.2"
+ },
+ "engines": {
+ "node": "^10 || ^12 || >=14"
+ }
+ },
"node_modules/postcss-value-parser": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -2925,6 +2887,16 @@
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
},
+ "node_modules/relateurl": {
+ "version": "0.2.7",
+ "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+ "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
+ "optional": true,
+ "peer": true,
+ "engines": {
+ "node": ">= 0.10"
+ }
+ },
"node_modules/resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -2977,17 +2949,6 @@
"semver": "bin/semver"
}
},
- "node_modules/shiki": {
- "version": "0.14.1",
- "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.1.tgz",
- "integrity": "sha512-+Jz4nBkCBe0mEDqo1eKRcCdjRtrCjozmcbTUjbPTX7OOJfEbTZzlUWlZtGe3Gb5oV1/jnojhG//YZc3rs9zSEw==",
- "dependencies": {
- "ansi-sequence-parser": "^1.1.0",
- "jsonc-parser": "^3.2.0",
- "vscode-oniguruma": "^1.7.0",
- "vscode-textmate": "^8.0.0"
- }
- },
"node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -3000,7 +2961,7 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
- "dev": true,
+ "devOptional": true,
"engines": {
"node": ">=0.10.0"
}
@@ -3085,9 +3046,9 @@
}
},
"node_modules/terser": {
- "version": "5.16.4",
- "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.4.tgz",
- "integrity": "sha512-5yEGuZ3DZradbogeYQ1NaGz7rXVBDWujWlx1PT8efXO6Txn+eWbfKqB2bTDVmFXmePFkoLU6XI8UektMIEA0ug==",
+ "version": "5.16.8",
+ "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.8.tgz",
+ "integrity": "sha512-QI5g1E/ef7d+PsDifb+a6nnVgC4F22Bg6T0xrBrz6iloVB4PUkkunp6V8nzoOOZJIzjWVdAGqCdlKlhLq/TbIA==",
"dependencies": {
"@jridgewell/source-map": "^0.3.2",
"acorn": "^8.5.0",
@@ -3149,60 +3110,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
- "node_modules/typedoc": {
- "version": "0.23.25",
- "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.23.25.tgz",
- "integrity": "sha512-O1he153qVyoCgJYSvIyY3bPP1wAJTegZfa6tL3APinSZhJOf8CSd8F/21M6ex8pUY/fuY6n0jAsT4fIuMGA6sA==",
- "dependencies": {
- "lunr": "^2.3.9",
- "marked": "^4.2.12",
- "minimatch": "^6.1.6",
- "shiki": "^0.14.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": "6.2.0",
- "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-6.2.0.tgz",
- "integrity": "sha512-sauLxniAmvnhhRjFwPNnJKaPFYyddAgbYdeUpHULtCT/GhzdCx/MDNy+Y40lBxTQUrMzDE8e0S43Z5uqfO0REg==",
- "dependencies": {
- "brace-expansion": "^2.0.1"
- },
- "engines": {
- "node": ">=10"
- },
- "funding": {
- "url": "https://github.com/sponsors/isaacs"
- }
- },
- "node_modules/typescript": {
- "version": "4.9.5",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
- "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
- "bin": {
- "tsc": "bin/tsc",
- "tsserver": "bin/tsserver"
- },
- "engines": {
- "node": ">=4.2.0"
- }
- },
"node_modules/universalify": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -3249,16 +3156,6 @@
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA=="
},
- "node_modules/vscode-oniguruma": {
- "version": "1.7.0",
- "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
- "integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA=="
- },
- "node_modules/vscode-textmate": {
- "version": "8.0.0",
- "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz",
- "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg=="
- },
"node_modules/weak-lru-cache": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",
@@ -4132,11 +4029,6 @@
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
},
- "@types/prettier": {
- "version": "2.7.2",
- "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz",
- "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg=="
- },
"abortcontroller-polyfill": {
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.5.tgz",
@@ -4147,11 +4039,6 @@
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
"integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
},
- "ansi-sequence-parser": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.0.tgz",
- "integrity": "sha512-lEm8mt52to2fT8GhciPCGeCXACSz2UwIN4X2e2LJSnZ5uAbn2/dsYdOmUXq0AtWS5cpAupysIneExOgH0Vd2TQ=="
- },
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -4256,50 +4143,9 @@
"integrity": "sha512-SDIV6bgE1aVbK6XyxdURbUE89zY7+k1BBBaOwYwkNCglXlel/E7mELiHC64HQ+W0xSKlqWhV9Wh7iHxUjMs4fA=="
},
"cg-select": {
- "version": "0.2.5",
- "resolved": "https://registry.npmjs.org/cg-select/-/cg-select-0.2.5.tgz",
- "integrity": "sha512-RziN32tl8Wdd0JTLPsIFIlD1cTDfCpmuzqtrr1dYILh8gT8HRpmhRgXC0FzcLWqIeeCPOXCxNaIfzQ/LNvPzdg==",
- "requires": {
- "@parcel/optimizer-css": "^2.8.0",
- "@types/prettier": "^2.7.2",
- "gh-pages": "^4.0.0",
- "typedoc": "^0.23.24",
- "typescript": "^4.9.4"
- },
- "dependencies": {
- "async": {
- "version": "2.6.4",
- "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
- "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
- "requires": {
- "lodash": "^4.17.14"
- }
- },
- "commander": {
- "version": "2.20.3",
- "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
- "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
- },
- "email-addresses": {
- "version": "3.1.0",
- "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
- "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg=="
- },
- "gh-pages": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-4.0.0.tgz",
- "integrity": "sha512-p8S0T3aGJc68MtwOcZusul5qPSNZCalap3NWbhRUZYu1YOdp+EjZ+4kPmRM8h3NNRdqw00yuevRjlkuSzCn7iQ==",
- "requires": {
- "async": "^2.6.1",
- "commander": "^2.18.0",
- "email-addresses": "^3.0.1",
- "filenamify": "^4.3.0",
- "find-cache-dir": "^3.3.1",
- "fs-extra": "^8.1.0",
- "globby": "^6.1.0"
- }
- }
- }
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/cg-select/-/cg-select-0.3.0.tgz",
+ "integrity": "sha512-o6bJV8vH+iwgypfYQOUZEqsJXm6F967g4s9HRf9wy8Kt04rmwlNxUIadB0DulC/eoKzR48UC5H10WJT3Zn4SFA=="
},
"chalk": {
"version": "4.1.2",
@@ -4742,11 +4588,6 @@
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
},
- "jsonc-parser": {
- "version": "3.2.0",
- "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
- "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
- },
"jsonfile": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -4857,16 +4698,6 @@
"p-locate": "^4.1.0"
}
},
- "lodash": {
- "version": "4.17.21",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
- "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
- },
- "lunr": {
- "version": "2.3.9",
- "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
- "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
- },
"make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -4882,11 +4713,6 @@
}
}
},
- "marked": {
- "version": "4.2.12",
- "resolved": "https://registry.npmjs.org/marked/-/marked-4.2.12.tgz",
- "integrity": "sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw=="
- },
"mdn-data": {
"version": "2.0.14",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -4940,6 +4766,13 @@
}
}
},
+ "nanoid": {
+ "version": "3.3.6",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+ "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+ "optional": true,
+ "peer": true
+ },
"node-addon-api": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
@@ -5109,6 +4942,18 @@
"find-up": "^4.0.0"
}
},
+ "postcss": {
+ "version": "8.4.21",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+ "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+ "optional": true,
+ "peer": true,
+ "requires": {
+ "nanoid": "^3.3.4",
+ "picocolors": "^1.0.0",
+ "source-map-js": "^1.0.2"
+ }
+ },
"postcss-value-parser": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -5173,6 +5018,13 @@
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
},
+ "relateurl": {
+ "version": "0.2.7",
+ "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+ "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
+ "optional": true,
+ "peer": true
+ },
"resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -5199,17 +5051,6 @@
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
},
- "shiki": {
- "version": "0.14.1",
- "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.1.tgz",
- "integrity": "sha512-+Jz4nBkCBe0mEDqo1eKRcCdjRtrCjozmcbTUjbPTX7OOJfEbTZzlUWlZtGe3Gb5oV1/jnojhG//YZc3rs9zSEw==",
- "requires": {
- "ansi-sequence-parser": "^1.1.0",
- "jsonc-parser": "^3.2.0",
- "vscode-oniguruma": "^1.7.0",
- "vscode-textmate": "^8.0.0"
- }
- },
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -5219,7 +5060,7 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
- "dev": true
+ "devOptional": true
},
"source-map-support": {
"version": "0.5.21",
@@ -5276,9 +5117,9 @@
"integrity": "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg=="
},
"terser": {
- "version": "5.16.4",
- "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.4.tgz",
- "integrity": "sha512-5yEGuZ3DZradbogeYQ1NaGz7rXVBDWujWlx1PT8efXO6Txn+eWbfKqB2bTDVmFXmePFkoLU6XI8UektMIEA0ug==",
+ "version": "5.16.8",
+ "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.8.tgz",
+ "integrity": "sha512-QI5g1E/ef7d+PsDifb+a6nnVgC4F22Bg6T0xrBrz6iloVB4PUkkunp6V8nzoOOZJIzjWVdAGqCdlKlhLq/TbIA==",
"requires": {
"@jridgewell/source-map": "^0.3.2",
"acorn": "^8.5.0",
@@ -5324,40 +5165,6 @@
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
},
- "typedoc": {
- "version": "0.23.25",
- "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.23.25.tgz",
- "integrity": "sha512-O1he153qVyoCgJYSvIyY3bPP1wAJTegZfa6tL3APinSZhJOf8CSd8F/21M6ex8pUY/fuY6n0jAsT4fIuMGA6sA==",
- "requires": {
- "lunr": "^2.3.9",
- "marked": "^4.2.12",
- "minimatch": "^6.1.6",
- "shiki": "^0.14.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": "6.2.0",
- "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-6.2.0.tgz",
- "integrity": "sha512-sauLxniAmvnhhRjFwPNnJKaPFYyddAgbYdeUpHULtCT/GhzdCx/MDNy+Y40lBxTQUrMzDE8e0S43Z5uqfO0REg==",
- "requires": {
- "brace-expansion": "^2.0.1"
- }
- }
- }
- },
- "typescript": {
- "version": "4.9.5",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
- "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g=="
- },
"universalify": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -5382,16 +5189,6 @@
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA=="
},
- "vscode-oniguruma": {
- "version": "1.7.0",
- "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
- "integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA=="
- },
- "vscode-textmate": {
- "version": "8.0.0",
- "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz",
- "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg=="
- },
"weak-lru-cache": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",
diff --git a/package.json b/package.json
index 343cf4a..12e47ca 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "example-cg-select-page",
- "version": "0.2.6",
+ "version": "0.3.0",
"description": "This is a test page to demonstrate the capabilities of the select",
"scripts": {
"start": "parcel ./index.html -p 4660 --open",
@@ -30,7 +30,7 @@
},
"homepage": "https://cg-select.itguild.info",
"dependencies": {
- "cg-select": "^0.2.5",
+ "cg-select": "^0.3.0",
"gh-pages": "^5.0.0",
"parcel": "^2.8.3"
},
diff --git a/src/buttonControlCode.js b/src/buttonControlCode.js
new file mode 100644
index 0000000..164ed19
--- /dev/null
+++ b/src/buttonControlCode.js
@@ -0,0 +1,70 @@
+const copy1 = document.getElementById("cp1");
+const copy2 = document.getElementById("cp2");
+const copy3 = document.getElementById("cp3");
+const copy4 = document.getElementById("cp4");
+const copy5 = document.getElementById("cp5");
+const copy6 = document.getElementById("cp6");
+const copy7 = document.getElementById("cp7");
+const copy8 = document.getElementById("cp8");
+
+const firstBtn = document.getElementById("first");
+const codeFirst = document.getElementById("codeFirst"); // cp1
+
+copyCode(copy1, codeFirst);
+
+const secondBtn = document.getElementById("second");
+const codeSecond = document.getElementById("codeSecond"); // cp4
+
+copyCode(copy4, codeSecond);
+
+const thirdBtn = document.getElementById("third");
+const codeThird = document.getElementById("codeThird"); // cp5
+
+copyCode(copy5, codeThird);
+
+const fourthBtn = document.getElementById("fourth");
+const codeFourth = document.getElementById("codeFourth"); // cp7
+
+copyCode(copy7, codeFourth);
+
+const fifthBtn = document.getElementById("fifth");
+const codeFifth = document.getElementById("codeFifth"); // cp8
+
+copyCode(copy8, codeFifth);
+
+const six = document.getElementById("six");
+const codeSix = document.getElementById("codeSix"); // cp3
+
+copyCode(copy3, codeSix);
+
+const Native = document.getElementById("Native");
+const codeNative = document.getElementById("codeNative"); // cp2
+
+copyCode(copy2, codeNative);
+
+const callback = document.getElementById("callback");
+const codeCallback = document.getElementById("codeCallback"); // cp6
+
+copyCode(copy6, codeCallback);
+
+toggleCode(firstBtn, codeFirst);
+toggleCode(secondBtn, codeSecond);
+toggleCode(thirdBtn, codeThird);
+toggleCode(fourthBtn, codeFourth);
+toggleCode(fifthBtn, codeFifth);
+toggleCode(six, codeSix);
+toggleCode(Native, codeNative);
+toggleCode(callback, codeCallback);
+
+function copyCode(button, elementCopy) {
+ button.addEventListener("click", (e) => {
+ e.preventDefault();
+ navigator.clipboard.writeText(elementCopy.textContent);
+ });
+}
+
+function toggleCode(button, elementCopy) {
+ button.addEventListener("click", () => {
+ elementCopy.classList.toggle("active");
+ });
+}
diff --git a/src/constructor/constructor.html b/src/constructor/constructor.html
new file mode 100644
index 0000000..03a34e7
--- /dev/null
+++ b/src/constructor/constructor.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ Cg-Select
+
+
+
+
+
+
+
+
+ CG-SELECT
+ 
+
+
+
+ v. 0.3.0
+
+
+
+
+
+ Select constructor
+
+
+ Select Style Builder:
+
+ This is a constructor for styling a select online without downloading. For it to work,
+ you need to:
+
+ - Select a part of the select for customization.
+ - Enter styles in the text field in the form "color: red;".
+ - Click on the render button.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/example.js b/src/example.js
deleted file mode 100644
index 596cf99..0000000
--- a/src/example.js
+++ /dev/null
@@ -1,55 +0,0 @@
-const firstBtn = document.getElementById("first");
-const codeFirst = document.getElementById("codeFirst");
-
-const secondBtn = document.getElementById("second");
-const codeSecond = document.getElementById("codeSecond");
-
-const thirdBtn = document.getElementById("third");
-const codeThird = document.getElementById("codeThird");
-
-const fourthBtn = document.getElementById("fourth");
-const codeFourth = document.getElementById("codeFourth");
-
-const fifthBtn = document.getElementById("fifth");
-const codeFifth = document.getElementById("codeFifth");
-
-const six = document.getElementById("six");
-const codeSix = document.getElementById("codeSix");
-
-const Native = document.getElementById("Native");
-const codeNative = document.getElementById("codeNative");
-
-const callback = document.getElementById("callback");
-const codeCallback = document.getElementById("codeCallback");
-
-firstBtn.addEventListener("click", () => {
- codeFirst.classList.toggle("active");
-});
-
-secondBtn.addEventListener("click", () => {
- codeSecond.classList.toggle("active");
-});
-
-thirdBtn.addEventListener("click", () => {
- codeThird.classList.toggle("active");
-});
-
-fourthBtn.addEventListener("click", () => {
- codeFourth.classList.toggle("active");
-});
-
-fifthBtn.addEventListener("click", () => {
- codeFifth.classList.toggle("active");
-});
-
-six.addEventListener("click", () => {
- codeSix.classList.toggle("active");
-});
-
-Native.addEventListener("click", () => {
- codeNative.classList.toggle("active");
-});
-
-callback.addEventListener("click", () => {
- codeCallback.classList.toggle("active");
-});
diff --git a/src/themeTest.ts b/src/themeTest.ts
deleted file mode 100644
index e69e083..0000000
--- a/src/themeTest.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// import { CustomTheme } from 'components/theme/theme.interface';
-
-// export const newCustomTheme: CustomTheme = {
-// name: 'test',
-// styles: {
-// head: 'testClass',
-// list: 'listTest',
-// },
-// };
diff --git a/example.scss b/style.scss
similarity index 93%
rename from example.scss
rename to style.scss
index 1599a22..98c7102 100644
--- a/example.scss
+++ b/style.scss
@@ -1,6 +1,3 @@
-// @import '/src/main.scss';
-@import "./src/constructor/constructor.scss";
-
* {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
@@ -80,7 +77,7 @@
justify-content: space-around;
margin: 15px 0 30px 0;
padding: 0;
- width: 230px;
+ width: 500px;
li {
display: inline;
@@ -194,6 +191,7 @@ code {
}
pre {
+ position: relative;
background: #1e1e1e;
margin: 15px;
padding: 30px 15px 0 5px;
@@ -203,6 +201,23 @@ pre {
line-height: 20px;
}
+.copy {
+ position: absolute;
+ top: 25px;
+ right: 25px;
+ height: 29px;
+ width: 100px;
+ border-radius: 8px;
+ text-align: center;
+ border: none;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #d7d7d7;
+ transition: all 1s;
+ }
+}
+
.code {
&__class,
&__var,