@thednp/color-picker 2.0.0-alpha8 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.cjs +0 -0
- package/.lgtm.yml +0 -0
- package/.prettierrc.json +0 -0
- package/.stylelintrc.json +0 -0
- package/LICENSE +0 -0
- package/README.md +5 -5
- package/compile.js +6 -3
- package/cypress/e2e/color-palette.cy.ts +0 -0
- package/cypress/e2e/color-picker.cy.ts +58 -69
- package/cypress/fixtures/colorNamesFrench.js +0 -0
- package/cypress/fixtures/componentLabelsFrench.js +0 -0
- package/cypress/fixtures/format.js +0 -0
- package/cypress/fixtures/getMarkup.js +8 -1
- package/cypress/fixtures/getRandomInt.js +0 -0
- package/cypress/fixtures/sampleWebcolors.js +0 -0
- package/cypress/fixtures/testSample.js +0 -0
- package/cypress/plugins/esbuild-istanbul.ts +0 -0
- package/cypress/plugins/tsCompile.ts +0 -0
- package/cypress/support/commands.ts +0 -0
- package/cypress/support/e2e.ts +0 -0
- package/cypress/test.html +0 -0
- package/cypress.config.ts +0 -0
- package/dist/css/color-picker.css +7 -15
- package/dist/css/color-picker.min.css +2 -2
- package/dist/css/color-picker.rtl.css +7 -15
- package/dist/css/color-picker.rtl.min.css +2 -2
- package/dist/js/color-picker.cjs +2 -2
- package/dist/js/color-picker.cjs.map +1 -1
- package/dist/js/color-picker.d.ts +34 -14
- package/dist/js/color-picker.js +2 -2
- package/dist/js/color-picker.js.map +1 -1
- package/dist/js/color-picker.mjs +278 -314
- package/dist/js/color-picker.mjs.map +1 -1
- package/dts.config.ts +0 -0
- package/package.json +117 -114
- package/src/scss/_variables.scss +0 -0
- package/src/scss/color-picker.rtl.scss +0 -0
- package/src/scss/color-picker.scss +10 -12
- package/src/ts/colorPalette.ts +0 -0
- package/src/ts/index.ts +15 -15
- package/src/ts/interface/ColorNames.ts +20 -0
- package/src/ts/interface/colorPickerLabels.ts +0 -0
- package/src/ts/interface/colorPickerOptions.ts +0 -0
- package/src/ts/interface/paletteOptions.ts +0 -0
- package/src/ts/util/colorNames.ts +0 -0
- package/src/ts/util/colorPickerLabels.ts +0 -0
- package/src/ts/util/getColorControls.ts +0 -0
- package/src/ts/util/getColorForm.ts +0 -0
- package/src/ts/util/getColorMenu.ts +0 -0
- package/src/ts/util/isValidJSON.ts +0 -0
- package/src/ts/util/setMarkup.ts +6 -4
- package/src/ts/util/vHidden.ts +0 -0
- package/tsconfig.json +1 -1
- package/vite.config.ts +0 -0
- package/cypress/fixtures/getCEMarkup.js +0 -29
package/dts.config.ts
CHANGED
File without changes
|
package/package.json
CHANGED
@@ -1,114 +1,117 @@
|
|
1
|
-
{
|
2
|
-
"name": "@thednp/color-picker",
|
3
|
-
"version": "2.0.0
|
4
|
-
"author": "thednp",
|
5
|
-
"license": "MIT",
|
6
|
-
"description": "🎨 Modern Color Picker Component",
|
7
|
-
"homepage": "http://thednp.github.io/color-picker",
|
8
|
-
"source": "./src/ts/index.ts",
|
9
|
-
"main": "./dist/js/color-picker.js",
|
10
|
-
"module": "./dist/js/color-picker.mjs",
|
11
|
-
"style": "./dist/css/color-picker.css",
|
12
|
-
"sass": "./src/scss/color-picker.scss",
|
13
|
-
"exports": {
|
14
|
-
".": {
|
15
|
-
"require": "./dist/js/color-picker.cjs",
|
16
|
-
"import": "./dist/js/color-picker.mjs",
|
17
|
-
"types": "./dist/js/color-picker.d.ts"
|
18
|
-
},
|
19
|
-
"./dist/css/color-picker.css": {
|
20
|
-
"import": "./dist/css/color-picker.css",
|
21
|
-
"require": "./dist/css/color-picker.css"
|
22
|
-
},
|
23
|
-
"./dist/css/color-picker.rtl.css": {
|
24
|
-
"import": "./dist/css/color-picker.rtl.css",
|
25
|
-
"require": "./dist/css/color-picker.rtl.css"
|
26
|
-
},
|
27
|
-
"./src/scss/color-picker.scss": {
|
28
|
-
"import": "./src/scss/color-picker.scss",
|
29
|
-
"require": "./src/scss/color-picker.scss"
|
30
|
-
},
|
31
|
-
"./src/scss/color-picker.rtl.scss": {
|
32
|
-
"import": "./src/scss/color-picker.rtl.scss",
|
33
|
-
"require": "./src/scss/color-picker.rtl.scss"
|
34
|
-
}
|
35
|
-
},
|
36
|
-
"
|
37
|
-
"
|
38
|
-
|
39
|
-
|
40
|
-
"
|
41
|
-
"
|
42
|
-
|
43
|
-
|
44
|
-
"
|
45
|
-
"
|
46
|
-
|
47
|
-
|
48
|
-
"
|
49
|
-
"
|
50
|
-
"
|
51
|
-
"
|
52
|
-
"
|
53
|
-
"
|
54
|
-
"
|
55
|
-
|
56
|
-
|
57
|
-
"
|
58
|
-
"
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
"
|
63
|
-
|
64
|
-
|
65
|
-
"
|
66
|
-
"
|
67
|
-
|
68
|
-
|
69
|
-
"
|
70
|
-
"
|
71
|
-
|
72
|
-
|
73
|
-
"
|
74
|
-
"
|
75
|
-
"
|
76
|
-
"
|
77
|
-
"
|
78
|
-
"
|
79
|
-
"
|
80
|
-
|
81
|
-
|
82
|
-
"
|
83
|
-
"
|
84
|
-
"
|
85
|
-
|
86
|
-
|
87
|
-
"
|
88
|
-
|
89
|
-
|
90
|
-
"
|
91
|
-
"
|
92
|
-
"cypress": "
|
93
|
-
"
|
94
|
-
"
|
95
|
-
"
|
96
|
-
"
|
97
|
-
"
|
98
|
-
"
|
99
|
-
"
|
100
|
-
"
|
101
|
-
"
|
102
|
-
"
|
103
|
-
"
|
104
|
-
"
|
105
|
-
"
|
106
|
-
"
|
107
|
-
"
|
108
|
-
"
|
109
|
-
"
|
110
|
-
"
|
111
|
-
"
|
112
|
-
"
|
113
|
-
|
114
|
-
|
1
|
+
{
|
2
|
+
"name": "@thednp/color-picker",
|
3
|
+
"version": "2.0.0",
|
4
|
+
"author": "thednp",
|
5
|
+
"license": "MIT",
|
6
|
+
"description": "🎨 Modern Color Picker Component",
|
7
|
+
"homepage": "http://thednp.github.io/color-picker",
|
8
|
+
"source": "./src/ts/index.ts",
|
9
|
+
"main": "./dist/js/color-picker.js",
|
10
|
+
"module": "./dist/js/color-picker.mjs",
|
11
|
+
"style": "./dist/css/color-picker.css",
|
12
|
+
"sass": "./src/scss/color-picker.scss",
|
13
|
+
"exports": {
|
14
|
+
".": {
|
15
|
+
"require": "./dist/js/color-picker.cjs",
|
16
|
+
"import": "./dist/js/color-picker.mjs",
|
17
|
+
"types": "./dist/js/color-picker.d.ts"
|
18
|
+
},
|
19
|
+
"./dist/css/color-picker.css": {
|
20
|
+
"import": "./dist/css/color-picker.css",
|
21
|
+
"require": "./dist/css/color-picker.css"
|
22
|
+
},
|
23
|
+
"./dist/css/color-picker.rtl.css": {
|
24
|
+
"import": "./dist/css/color-picker.rtl.css",
|
25
|
+
"require": "./dist/css/color-picker.rtl.css"
|
26
|
+
},
|
27
|
+
"./src/scss/color-picker.scss": {
|
28
|
+
"import": "./src/scss/color-picker.scss",
|
29
|
+
"require": "./src/scss/color-picker.scss"
|
30
|
+
},
|
31
|
+
"./src/scss/color-picker.rtl.scss": {
|
32
|
+
"import": "./src/scss/color-picker.rtl.scss",
|
33
|
+
"require": "./src/scss/color-picker.rtl.scss"
|
34
|
+
}
|
35
|
+
},
|
36
|
+
"bugs": {
|
37
|
+
"url": "https://github.com/thednp/color-picker/issues"
|
38
|
+
},
|
39
|
+
"publishConfig": {
|
40
|
+
"access": "public",
|
41
|
+
"registry": "https://registry.npmjs.org/"
|
42
|
+
},
|
43
|
+
"repository": {
|
44
|
+
"type": "git",
|
45
|
+
"url": "git+https://github.com/thednp/color-picker.git"
|
46
|
+
},
|
47
|
+
"keywords": [
|
48
|
+
"color",
|
49
|
+
"picker",
|
50
|
+
"color-picker",
|
51
|
+
"colorpicker",
|
52
|
+
"palette",
|
53
|
+
"color-palette",
|
54
|
+
"typescript"
|
55
|
+
],
|
56
|
+
"dependencies": {
|
57
|
+
"@thednp/color": "^1.0.9",
|
58
|
+
"@thednp/shorty": "2.0.3"
|
59
|
+
},
|
60
|
+
"devDependencies": {
|
61
|
+
"@bahmutov/cypress-esbuild-preprocessor": "^2.2.2",
|
62
|
+
"@cypress/code-coverage": "^3.12.44",
|
63
|
+
"@types/istanbul-lib-instrument": "^1.7.7",
|
64
|
+
"@types/node": "^22.2.0",
|
65
|
+
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
66
|
+
"@typescript-eslint/parser": "^6.21.0",
|
67
|
+
"cypress": "^13.13.2",
|
68
|
+
"dts-bundle-generator": "^9.5.1",
|
69
|
+
"eslint": "^8.57.0",
|
70
|
+
"eslint-plugin-jsdoc": "^46.10.1",
|
71
|
+
"eslint-plugin-prefer-arrow": "^1.2.3",
|
72
|
+
"eslint-plugin-prettier": "^5.2.1",
|
73
|
+
"istanbul-lib-coverage": "^3.2.2",
|
74
|
+
"istanbul-lib-instrument": "^6.0.3",
|
75
|
+
"ncp": "^2.0.0",
|
76
|
+
"npm-run-all": "^4.1.5",
|
77
|
+
"nyc": "^15.1.0",
|
78
|
+
"prettier": "^3.3.3",
|
79
|
+
"rimraf": "^5.0.10",
|
80
|
+
"sass": "^1.77.8",
|
81
|
+
"stylelint": "^15.11.0",
|
82
|
+
"stylelint-config-standard": "^34.0.0",
|
83
|
+
"stylelint-config-standard-scss": "^11.1.0",
|
84
|
+
"stylelint-order": "^6.0.4",
|
85
|
+
"stylelint-scss": "^5.3.2",
|
86
|
+
"typescript": "^5.5.4",
|
87
|
+
"vite": "^5.4.0"
|
88
|
+
},
|
89
|
+
"scripts": {
|
90
|
+
"pre-test": "pnpm clean-coverage",
|
91
|
+
"test": "pnpm pre-test && cypress run",
|
92
|
+
"cypress": "pnpm pre-test && npx cypress open",
|
93
|
+
"badges": "npx -p dependency-version-badge update-badge typescript cypress eslint prettier vite",
|
94
|
+
"clean-coverage": "rimraf coverage .nyc_output",
|
95
|
+
"coverage:report": "nyc report --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",
|
96
|
+
"format": "prettier --write \"src/**/*.ts\"",
|
97
|
+
"lint": "pnpm lint:ts && pnpm check:ts && pnpm lint:css",
|
98
|
+
"fix:ts": "eslint src --config .eslintrc.cjs --fix",
|
99
|
+
"lint:ts": "eslint src --config .eslintrc.cjs",
|
100
|
+
"check:ts": "tsc --noEmit",
|
101
|
+
"fix:css": "stylelint --config .stylelintrc.json --fix scss \"src/scss/*.scss\"",
|
102
|
+
"lint:css": "stylelint --config .stylelintrc.json scss \"src/scss/*.scss\"",
|
103
|
+
"build": "pnpm lint && pnpm build-vite && pnpm dts",
|
104
|
+
"build-vite": "vite build && pnpm docs",
|
105
|
+
"dev": "vite --open ./docs/dev.html --port 8577",
|
106
|
+
"dts": "dts-bundle-generator --config ./dts.config.ts",
|
107
|
+
"docs": "ncp dist/js/color-picker.js docs/js/color-picker.js && ncp dist/js/color-picker.js.map docs/js/color-picker.js.map",
|
108
|
+
"copy": "npm-run-all --parallel copy-*",
|
109
|
+
"copy-css-cp": "ncp dist/css/color-picker.css docs/css/color-picker.css",
|
110
|
+
"copy-css-rtl": "ncp dist/css/color-picker.rtl.css docs/css/color-picker.rtl.css",
|
111
|
+
"compile": "pnpm lint:css && npm-run-all --parallel compile-* && pnpm copy",
|
112
|
+
"compile-scss": "node compile.js",
|
113
|
+
"compile-scss-min": "node compile.js MIN:true",
|
114
|
+
"compile-scss-rtl": "node compile.js MIN:false,DIR:rtl",
|
115
|
+
"compile-scss-rtl-min": "node compile.js MIN:true,DIR:rtl"
|
116
|
+
}
|
117
|
+
}
|
package/src/scss/_variables.scss
CHANGED
File without changes
|
File without changes
|
@@ -205,8 +205,10 @@
|
|
205
205
|
|
206
206
|
/* scrollable */
|
207
207
|
.scrollable {
|
208
|
-
overflow
|
209
|
-
|
208
|
+
overflow: hidden auto;
|
209
|
+
|
210
|
+
// overflow-x: hidden;
|
211
|
+
// overflow-y: auto;
|
210
212
|
scrollbar-width: thin;
|
211
213
|
}
|
212
214
|
|
@@ -299,7 +301,8 @@
|
|
299
301
|
transition: var(--options-transition);
|
300
302
|
}
|
301
303
|
|
302
|
-
.color-options.scrollable:hover {
|
304
|
+
// .color-options.scrollable:hover {
|
305
|
+
.color-dropdown.menu:hover .scrollable {
|
303
306
|
height: var(--grid-hover-height);
|
304
307
|
}
|
305
308
|
|
@@ -321,7 +324,7 @@
|
|
321
324
|
width: var(--grid-item-size);
|
322
325
|
height: var(--grid-item-size);
|
323
326
|
overflow: hidden;
|
324
|
-
|
327
|
+
color: rgba(0,0,0,0%);
|
325
328
|
|
326
329
|
&:active, &:focus {
|
327
330
|
outline: none;
|
@@ -419,7 +422,7 @@
|
|
419
422
|
|
420
423
|
/* visual control */
|
421
424
|
.visual-control {
|
422
|
-
height:
|
425
|
+
height: 230px;
|
423
426
|
|
424
427
|
/* important for mobile devices */
|
425
428
|
touch-action: none;
|
@@ -427,7 +430,7 @@
|
|
427
430
|
}
|
428
431
|
|
429
432
|
.visual-control1 {
|
430
|
-
width:
|
433
|
+
width: 230px;
|
431
434
|
}
|
432
435
|
|
433
436
|
.visual-control2,
|
@@ -436,12 +439,7 @@
|
|
436
439
|
cursor: ns-resize;
|
437
440
|
}
|
438
441
|
|
439
|
-
@media (width >=
|
440
|
-
.visual-control { height: 230px; }
|
441
|
-
.visual-control1 { width: 230px; }
|
442
|
-
}
|
443
|
-
|
444
|
-
@media (width >= 1200px) {
|
442
|
+
@media (width >= 980px) {
|
445
443
|
.visual-control { height: 300px; }
|
446
444
|
.visual-control1 { width: 300px; }
|
447
445
|
}
|
package/src/ts/colorPalette.ts
CHANGED
File without changes
|
package/src/ts/index.ts
CHANGED
@@ -1,5 +1,3 @@
|
|
1
|
-
import { addListener, removeListener } from '@thednp/event-listener';
|
2
|
-
|
3
1
|
import {
|
4
2
|
ariaDescription,
|
5
3
|
ariaSelected,
|
@@ -37,6 +35,7 @@ import {
|
|
37
35
|
getDocumentElement,
|
38
36
|
getDocument,
|
39
37
|
ObjectAssign,
|
38
|
+
ObjectFromEntries,
|
40
39
|
Data,
|
41
40
|
getInstance,
|
42
41
|
setElementStyle,
|
@@ -52,6 +51,8 @@ import {
|
|
52
51
|
isArray,
|
53
52
|
isString,
|
54
53
|
getWindow,
|
54
|
+
on,
|
55
|
+
off,
|
55
56
|
} from '@thednp/shorty';
|
56
57
|
|
57
58
|
// ColorPicker Util
|
@@ -67,6 +68,7 @@ import setMarkup from './util/setMarkup';
|
|
67
68
|
|
68
69
|
import ColorPickerOptions from './interface/colorPickerOptions';
|
69
70
|
import ColorPickerLabels from './interface/colorPickerLabels';
|
71
|
+
import type ColorNames from './interface/ColorNames';
|
70
72
|
import { version } from '../../package.json';
|
71
73
|
|
72
74
|
// ColorPicker GC
|
@@ -95,7 +97,7 @@ const initColorPicker = (element: HTMLInputElement) => new ColorPicker(element);
|
|
95
97
|
* Add / remove `ColorPicker` main event listeners.
|
96
98
|
*/
|
97
99
|
const toggleEvents = (self: ColorPicker, action?: boolean) => {
|
98
|
-
const fn = action ?
|
100
|
+
const fn = action ? on : off;
|
99
101
|
const { input, pickerToggle, menuToggle } = self;
|
100
102
|
|
101
103
|
fn(input, focusinEvent, self.showPicker);
|
@@ -110,7 +112,7 @@ const toggleEvents = (self: ColorPicker, action?: boolean) => {
|
|
110
112
|
* Add / remove `ColorPicker` event listeners active only when open.
|
111
113
|
*/
|
112
114
|
const toggleEventsOnShown = (self: ColorPicker, action?: boolean) => {
|
113
|
-
const fn = action ?
|
115
|
+
const fn = action ? on : off;
|
114
116
|
const { input, colorMenu, parent } = self;
|
115
117
|
const doc = getDocument(input);
|
116
118
|
const win = getWindow(doc);
|
@@ -224,7 +226,7 @@ export default class ColorPicker {
|
|
224
226
|
c2y: number;
|
225
227
|
c3y: number;
|
226
228
|
};
|
227
|
-
colorLabels:
|
229
|
+
colorLabels: ColorNames = ObjectFromEntries(colorNames.map(c => [c, c])) as ColorNames;
|
228
230
|
colorKeywords: string[] | false;
|
229
231
|
colorPresets: ColorPalette | string[] | false;
|
230
232
|
componentLabels: ColorPickerLabels;
|
@@ -265,7 +267,7 @@ export default class ColorPicker {
|
|
265
267
|
c2y: 0,
|
266
268
|
c3y: 0,
|
267
269
|
};
|
268
|
-
this.colorLabels = {};
|
270
|
+
// this.colorLabels = {};
|
269
271
|
this.colorKeywords = false;
|
270
272
|
this.colorPresets = false;
|
271
273
|
|
@@ -285,9 +287,7 @@ export default class ColorPicker {
|
|
285
287
|
}
|
286
288
|
|
287
289
|
// expose colour labels to all methods
|
288
|
-
|
289
|
-
this.colorLabels[c] = translatedColorLabels[i].trim();
|
290
|
-
});
|
290
|
+
ObjectAssign(this.colorLabels, ObjectFromEntries(translatedColorLabels.map((c, i) => [colorNames[i], c])));
|
291
291
|
|
292
292
|
// update and expose component labels
|
293
293
|
const tempComponentLabels =
|
@@ -521,9 +521,8 @@ export default class ColorPicker {
|
|
521
521
|
* The `ColorPicker` *scroll* event listener when open.
|
522
522
|
*
|
523
523
|
* @param e
|
524
|
-
* @this {ColorPicker}
|
525
524
|
*/
|
526
|
-
handleScroll = (e: Event)
|
525
|
+
handleScroll = (e: Event) => {
|
527
526
|
const { activeElement } = getDocument(this.input);
|
528
527
|
|
529
528
|
this.updateDropdownPosition();
|
@@ -543,7 +542,7 @@ export default class ColorPicker {
|
|
543
542
|
*
|
544
543
|
* @param e
|
545
544
|
*/
|
546
|
-
menuKeyHandler = (e:
|
545
|
+
menuKeyHandler = (e: KeyboardEvent & { target: HTMLElement }) => {
|
547
546
|
const { target, code } = e;
|
548
547
|
const { previousElementSibling, nextElementSibling, parentElement } = target;
|
549
548
|
const isColorOptionsMenu = parentElement && hasClass(parentElement, 'color-options');
|
@@ -585,7 +584,7 @@ export default class ColorPicker {
|
|
585
584
|
* @param e
|
586
585
|
* @this {ColorPicker}
|
587
586
|
*/
|
588
|
-
menuClickHandler = (e: Event)
|
587
|
+
menuClickHandler = (e: Event) => {
|
589
588
|
const { target } = e;
|
590
589
|
const { colorMenu } = this;
|
591
590
|
const newOption = (getAttribute(target as HTMLElement, 'data-value') || '').trim();
|
@@ -630,7 +629,8 @@ export default class ColorPicker {
|
|
630
629
|
*
|
631
630
|
* @param e
|
632
631
|
*/
|
633
|
-
pointerDown = (e:
|
632
|
+
pointerDown = (e: PointerEvent & { target: HTMLElement }) => {
|
633
|
+
if (e.button !== 0) return;
|
634
634
|
const { target, pageX, pageY } = e;
|
635
635
|
const { colorMenu, visuals, controlKnobs } = this;
|
636
636
|
const [v1, v2, v3] = visuals;
|
@@ -687,7 +687,7 @@ export default class ColorPicker {
|
|
687
687
|
*
|
688
688
|
* @param {PointerEvent} e
|
689
689
|
*/
|
690
|
-
pointerMove = (e: PointerEvent)
|
690
|
+
pointerMove = (e: PointerEvent) => {
|
691
691
|
const { dragElement, visuals } = this;
|
692
692
|
const [v1, v2, v3] = visuals;
|
693
693
|
const { pageX, pageY } = e;
|
@@ -0,0 +1,20 @@
|
|
1
|
+
export default interface ColorNames {
|
2
|
+
white: string;
|
3
|
+
black: string;
|
4
|
+
grey: string;
|
5
|
+
red: string;
|
6
|
+
orange: string;
|
7
|
+
brown: string;
|
8
|
+
gold: string;
|
9
|
+
olive: string;
|
10
|
+
yellow: string;
|
11
|
+
lime: string;
|
12
|
+
green: string;
|
13
|
+
teal: string;
|
14
|
+
cyan: string;
|
15
|
+
blue: string;
|
16
|
+
violet: string;
|
17
|
+
magenta: string;
|
18
|
+
pink: string;
|
19
|
+
[key: string]: string;
|
20
|
+
}
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|
package/src/ts/util/setMarkup.ts
CHANGED
@@ -36,13 +36,14 @@ const setMarkup = (self: ColorPicker) => {
|
|
36
36
|
// set initial controls dimensions
|
37
37
|
const formatString = format === 'hex' ? hexLabel : toUpperCase(format);
|
38
38
|
|
39
|
-
const pickerBtn = createElement({
|
39
|
+
const pickerBtn = createElement<HTMLButtonElement>({
|
40
40
|
id: `picker-btn-${id}`,
|
41
41
|
tagName: 'button',
|
42
|
+
type: 'button',
|
42
43
|
className: 'picker-toggle btn-appearance',
|
43
44
|
ariaExpanded: 'false',
|
44
45
|
ariaHasPopup: 'true',
|
45
|
-
}) as
|
46
|
+
}) as HTMLButtonElement;
|
46
47
|
|
47
48
|
pickerBtn.append(
|
48
49
|
createElement({
|
@@ -84,13 +85,14 @@ const setMarkup = (self: ColorPicker) => {
|
|
84
85
|
presetsDropdown.append(getColorMenu(self, colorKeywords, 'color-defaults'));
|
85
86
|
}
|
86
87
|
|
87
|
-
const presetsBtn = createElement({
|
88
|
+
const presetsBtn = createElement<HTMLButtonElement>({
|
88
89
|
tagName: 'button',
|
90
|
+
type: 'button',
|
89
91
|
className: 'menu-toggle btn-appearance',
|
90
92
|
tabIndex: -1,
|
91
93
|
ariaExpanded: 'false',
|
92
94
|
ariaHasPopup: 'true',
|
93
|
-
}) as
|
95
|
+
}) as HTMLButtonElement;
|
94
96
|
|
95
97
|
const xmlns = encodeURI('http://www.w3.org/2000/svg');
|
96
98
|
const presetsIcon = createElementNS(xmlns, {
|
package/src/ts/util/vHidden.ts
CHANGED
File without changes
|
package/tsconfig.json
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
// https://janessagarrow.com/blog/typescript-and-esbuild/
|
3
3
|
"compilerOptions": {
|
4
4
|
"lib": ["DOM", "ESNext", "DOM.Iterable"],
|
5
|
-
|
5
|
+
// "types": ["vite", "vite/client", "@thednp/shorty", "@thednp/color"],
|
6
6
|
"rootDir": "./",
|
7
7
|
"baseUrl": "./",
|
8
8
|
"module": "ESNext",
|
package/vite.config.ts
CHANGED
File without changes
|
@@ -1,29 +0,0 @@
|
|
1
|
-
import ColorPickerElement from '../../src/js/color-picker-element';
|
2
|
-
|
3
|
-
import getRandomInt from './getRandomInt';
|
4
|
-
import testSample from './testSample';
|
5
|
-
import FORMAT from './format';
|
6
|
-
import colorNamesFrench from './colorNamesFrench';
|
7
|
-
import componentLabelsFrench from './componentLabelsFrench';
|
8
|
-
|
9
|
-
export default function getCEMarkup(body) {
|
10
|
-
const id = getRandomInt(0,9999);
|
11
|
-
const format = FORMAT[getRandomInt(0,3)];
|
12
|
-
const sample = testSample[getRandomInt(0,2)];
|
13
|
-
const value = sample[format];
|
14
|
-
|
15
|
-
// const cpe = document.createElement('color-picker');
|
16
|
-
const cpe = new ColorPickerElement();
|
17
|
-
cpe.setAttribute('data-id', `cpe-${format}-${id}`);
|
18
|
-
cpe.setAttribute('data-format', format);
|
19
|
-
cpe.setAttribute('data-value', value);
|
20
|
-
cpe.setAttribute('data-component-labels', JSON.stringify(componentLabelsFrench));
|
21
|
-
cpe.setAttribute('data-color-labels', colorNamesFrench);
|
22
|
-
cpe.setAttribute('data-color-keywords', 'red,gree,blue');
|
23
|
-
cpe.setAttribute('data-color-presets', '#330000,#990000,#ff0000,#ff6666,#ffcccc,#003333,#009999,#00ffff,#66ffff,#ccffff');
|
24
|
-
|
25
|
-
if (body) {
|
26
|
-
body.append(cpe);
|
27
|
-
}
|
28
|
-
return {value, id, format};
|
29
|
-
}
|