@thednp/color-picker 2.0.0 → 2.0.2
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/README.md +4 -4
- package/dist/css/color-picker.css +7 -7
- package/dist/css/color-picker.min.css +2 -2
- package/dist/css/color-picker.rtl.css +7 -7
- 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.js +2 -2
- package/dist/js/color-picker.js.map +1 -1
- package/dist/js/color-picker.mjs +243 -239
- package/dist/js/color-picker.mjs.map +1 -1
- package/package.json +32 -35
- package/src/scss/color-picker.scss +6 -4
- package/src/ts/colorPalette.ts +2 -2
- package/src/ts/index.ts +20 -19
- package/test/color-palette.test.ts +137 -0
- package/test/color-picker.test.ts +705 -0
- package/{cypress → test}/fixtures/getMarkup.js +8 -7
- package/test/fixtures/swipe.ts +33 -0
- package/test/fixtures/write.ts +37 -0
- package/tsconfig.json +45 -27
- package/{vite.config.ts → vite.config.mts} +5 -12
- package/vitest.config-ui.ts +26 -0
- package/vitest.config.ts +26 -0
- package/cypress/e2e/color-palette.cy.ts +0 -128
- package/cypress/e2e/color-picker.cy.ts +0 -909
- package/cypress/plugins/esbuild-istanbul.ts +0 -50
- package/cypress/plugins/tsCompile.ts +0 -34
- package/cypress/support/commands.ts +0 -0
- package/cypress/support/e2e.ts +0 -21
- package/cypress/test.html +0 -23
- package/cypress.config.ts +0 -29
- /package/{compile.js → compile.cjs} +0 -0
- /package/{cypress → test}/fixtures/colorNamesFrench.js +0 -0
- /package/{cypress → test}/fixtures/componentLabelsFrench.js +0 -0
- /package/{cypress → test}/fixtures/format.js +0 -0
- /package/{cypress → test}/fixtures/getRandomInt.js +0 -0
- /package/{cypress → test}/fixtures/sampleWebcolors.js +0 -0
- /package/{cypress → test}/fixtures/testSample.js +0 -0
@@ -1,10 +1,12 @@
|
|
1
1
|
import testSample from "./testSample";
|
2
2
|
import getRandomInt from "./getRandomInt";
|
3
3
|
|
4
|
-
export default function getMarkup(
|
4
|
+
export default function getMarkup(id, format) {
|
5
5
|
const set = testSample[getRandomInt(0,3)];
|
6
6
|
const value = set[format];
|
7
7
|
|
8
|
+
const container = document.createElement('div');
|
9
|
+
|
8
10
|
const label = document.createElement('label');
|
9
11
|
label.setAttribute('for', `color-picker-${id}`);
|
10
12
|
label.innerText = `Color Picker Test`;
|
@@ -25,11 +27,10 @@ export default function getMarkup(body, id, format) {
|
|
25
27
|
a.setAttribute('href', '#');
|
26
28
|
a.innerText = 'Some link';
|
27
29
|
a.className = 'my-link';
|
28
|
-
a.style = 'position: absolute; top:
|
29
|
-
|
30
|
+
a.style = 'position: absolute; top: 0px; right:0; opacity: 0.015';
|
31
|
+
|
30
32
|
cpWrapper.append(input);
|
31
|
-
|
32
|
-
|
33
|
-
}
|
34
|
-
return {set, value};
|
33
|
+
container.append(label, cpWrapper, a);
|
34
|
+
|
35
|
+
return { container, set, value};
|
35
36
|
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
/**
|
2
|
+
* Triggers a number of pointer events for a given target and
|
3
|
+
* an array of coordinates.
|
4
|
+
* @param target the element to dispatch the pointer event(s)
|
5
|
+
* @param points an array of [clientX, clientY] coordinates
|
6
|
+
* @param offset an optional offset object of { x, y } coordinates
|
7
|
+
*/
|
8
|
+
const swipe = <T extends HTMLElement = HTMLElement>(target: T, points: [number, number][], offset?: { x: number, y: number }) => {
|
9
|
+
const rect = target.getBoundingClientRect();
|
10
|
+
const offsetX = Number.isInteger(offset?.x) ? offset!.x : rect.left;
|
11
|
+
const offsetY = Number.isInteger(offset?.y) ? offset!.y : rect.top;
|
12
|
+
if (points.length === 1) points.push([0,0]);
|
13
|
+
|
14
|
+
points.forEach(([x,y], i) => {
|
15
|
+
// first is a pointerdown, last is a pointerup and all pointermove in between
|
16
|
+
const ev = i === 0 ? 'pointerdown' : i === points.length - 1 ? 'pointerup' : 'pointermove';
|
17
|
+
const point = new PointerEvent(ev, {
|
18
|
+
clientX: x + offsetX, clientY: y + offsetY,
|
19
|
+
pressure: 1,
|
20
|
+
bubbles: true, // Whether the event should bubble up the DOM
|
21
|
+
cancelable: true, // Whether the event can be canceled
|
22
|
+
pointerId: 0, // The ID of the pointer (e.g., a touch point)
|
23
|
+
pointerType: "touch", // The type of pointer (e.g., touch or mouse)
|
24
|
+
width: 1, // The width of the pointer (in pixels)
|
25
|
+
height: 1, // The height of the pointer (in pixels)
|
26
|
+
isPrimary: true, // Whether this is the primary pointer (true) or not (false)
|
27
|
+
});
|
28
|
+
target.dispatchEvent(point);
|
29
|
+
target.offsetWidth;
|
30
|
+
});
|
31
|
+
};
|
32
|
+
|
33
|
+
export default swipe;
|
@@ -0,0 +1,37 @@
|
|
1
|
+
/**
|
2
|
+
* A simple utility to type text into input elements.
|
3
|
+
* It will split the string provided and replace spaces with Space keyboard key
|
4
|
+
* and will trigger a dispatch for each keyboard key found in the string.
|
5
|
+
* @param target A button, input element or editable element
|
6
|
+
* @param value the text to type
|
7
|
+
*
|
8
|
+
* @example
|
9
|
+
* write(target, "hsl 150 0 0")
|
10
|
+
* write(target, "hslSpace150Space0Space0Enter")
|
11
|
+
*/
|
12
|
+
const write = <T extends HTMLElement = HTMLElement>(target: T, value: string) => {
|
13
|
+
const text = value.trim();
|
14
|
+
|
15
|
+
target.focus();
|
16
|
+
if (target instanceof HTMLInputElement) target.select();
|
17
|
+
if (['Space', 'Enter'].some(x => text === x) && target.tagName === 'BUTTON') {
|
18
|
+
target.dispatchEvent(new MouseEvent('click', { bubbles: true }));
|
19
|
+
// target.dispatchEvent(new KeyboardEvent('keyup', { key: text, code: text, bubbles: true }));
|
20
|
+
} else {
|
21
|
+
if (target instanceof HTMLInputElement) {
|
22
|
+
const newValue = text.replace(/Enter/g, '').replace(/Space/g, ' ');
|
23
|
+
target.setAttribute('value', newValue);
|
24
|
+
target.value = newValue;
|
25
|
+
target.offsetWidth;
|
26
|
+
// console.log(newValue)
|
27
|
+
// target.dispatchEvent(new KeyboardEvent('input', { bubbles: true }));
|
28
|
+
if (text.endsWith('Enter')) {
|
29
|
+
target.dispatchEvent(new Event('change', { bubbles: true }));
|
30
|
+
// target.dispatchEvent(new KeyboardEvent('keyup', { key: "Enter", code: "Enter", bubbles: true }));
|
31
|
+
}
|
32
|
+
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
36
|
+
|
37
|
+
export default write;
|
package/tsconfig.json
CHANGED
@@ -1,29 +1,47 @@
|
|
1
1
|
{
|
2
2
|
// https://janessagarrow.com/blog/typescript-and-esbuild/
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
3
|
+
"compilerOptions": {
|
4
|
+
"lib": [
|
5
|
+
"DOM",
|
6
|
+
"ESNext",
|
7
|
+
"DOM.Iterable"
|
8
|
+
],
|
9
|
+
// "types": ["vite", "vite/client", "@thednp/shorty", "@thednp/color"],
|
10
|
+
"rootDir": "./",
|
11
|
+
"baseUrl": "./",
|
12
|
+
"module": "ESNext",
|
13
|
+
"target": "ESNext",
|
14
|
+
"moduleResolution": "Bundler",
|
15
|
+
"allowJs": true,
|
16
|
+
"forceConsistentCasingInFileNames": true,
|
17
|
+
"useDefineForClassFields": true,
|
18
|
+
"strict": true,
|
19
|
+
"sourceMap": true,
|
20
|
+
"resolveJsonModule": true,
|
21
|
+
"esModuleInterop": true,
|
22
|
+
"isolatedModules": true,
|
23
|
+
"noUnusedLocals": true,
|
24
|
+
"noUnusedParameters": true,
|
25
|
+
"noImplicitReturns": true,
|
26
|
+
"removeComments": false,
|
27
|
+
"allowSyntheticDefaultImports": true,
|
28
|
+
"noEmit": true,
|
29
|
+
"skipLibCheck": true, // allows dts-bundle-generator to import from package.json
|
30
|
+
"paths": {
|
31
|
+
"~/*": [
|
32
|
+
"./src/*"
|
33
|
+
],
|
34
|
+
}
|
35
|
+
},
|
36
|
+
"include": [
|
37
|
+
"src/*",
|
38
|
+
"src/**/*",
|
39
|
+
"test/**/*"
|
40
|
+
],
|
41
|
+
"exclude": [
|
42
|
+
"node_modules",
|
43
|
+
"experiments",
|
44
|
+
"coverage",
|
45
|
+
"dist"
|
46
|
+
],
|
47
|
+
}
|
@@ -1,18 +1,12 @@
|
|
1
|
-
|
2
|
-
import { resolve } from 'path';
|
1
|
+
import { resolve } from 'node:path';
|
3
2
|
import { defineConfig } from 'vite';
|
4
|
-
import { name } from './package.json';
|
5
|
-
|
6
|
-
const getPackageName = () => {
|
7
|
-
return name.includes('@') ? name.split('/')[1] : name;
|
8
|
-
};
|
9
3
|
|
10
4
|
const NAME = 'ColorPicker';
|
11
5
|
|
12
6
|
const fileName = {
|
13
|
-
es:
|
14
|
-
cjs:
|
15
|
-
iife:
|
7
|
+
es: `color-picker.mjs`,
|
8
|
+
cjs: `color-picker.cjs`,
|
9
|
+
iife: `color-picker.js`,
|
16
10
|
};
|
17
11
|
|
18
12
|
export default defineConfig({
|
@@ -26,9 +20,8 @@ export default defineConfig({
|
|
26
20
|
formats: ['es', 'cjs', 'iife'],
|
27
21
|
fileName: (format: string) => fileName[format],
|
28
22
|
},
|
29
|
-
target: 'ESNext',
|
30
23
|
sourcemap: true,
|
31
|
-
|
24
|
+
target: "ESNext",
|
32
25
|
},
|
33
26
|
});
|
34
27
|
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import { defineConfig } from "vitest/config";
|
2
|
+
import { resolve } from 'node:path';
|
3
|
+
|
4
|
+
export default defineConfig({
|
5
|
+
resolve: {
|
6
|
+
alias: {
|
7
|
+
"~": resolve(__dirname, "src"),
|
8
|
+
},
|
9
|
+
},
|
10
|
+
test: {
|
11
|
+
css: true,
|
12
|
+
globals: true,
|
13
|
+
coverage: {
|
14
|
+
provider: "istanbul",
|
15
|
+
reporter: ["html", "text", "lcov"],
|
16
|
+
enabled: true,
|
17
|
+
include: ["src/**/*.{ts,tsx}"],
|
18
|
+
},
|
19
|
+
browser: {
|
20
|
+
// provider: 'webdriverio', // or 'webdriverio'
|
21
|
+
enabled: true,
|
22
|
+
headless: false,
|
23
|
+
name: 'chromium', // browser name is required
|
24
|
+
},
|
25
|
+
},
|
26
|
+
});
|
package/vitest.config.ts
ADDED
@@ -0,0 +1,26 @@
|
|
1
|
+
import { defineConfig } from "vitest/config";
|
2
|
+
import { resolve } from 'node:path';
|
3
|
+
|
4
|
+
export default defineConfig({
|
5
|
+
resolve: {
|
6
|
+
alias: {
|
7
|
+
"~": resolve(__dirname, "src"),
|
8
|
+
},
|
9
|
+
},
|
10
|
+
test: {
|
11
|
+
css: true,
|
12
|
+
globals: true,
|
13
|
+
coverage: {
|
14
|
+
provider: "istanbul",
|
15
|
+
reporter: ["html", "text", "lcov"],
|
16
|
+
enabled: true,
|
17
|
+
include: ["src/**/*.{ts,tsx}"],
|
18
|
+
},
|
19
|
+
browser: {
|
20
|
+
provider: 'playwright', // or 'webdriverio'
|
21
|
+
enabled: true,
|
22
|
+
headless: true,
|
23
|
+
name: 'chromium', // browser name is required
|
24
|
+
},
|
25
|
+
},
|
26
|
+
});
|
@@ -1,128 +0,0 @@
|
|
1
|
-
/// <reference types="cypress" />
|
2
|
-
|
3
|
-
import Color from "@thednp/color";
|
4
|
-
import ColorPalette from "../../src/ts/colorPalette";
|
5
|
-
|
6
|
-
describe("ColorPalette Class Test", () => {
|
7
|
-
it("Test init with no parameter, use all default values", () => {
|
8
|
-
cy.wrap(new ColorPalette()).as("cpl")
|
9
|
-
.get("@cpl").should("be.instanceOf", ColorPalette)
|
10
|
-
.get("@cpl").its("hue").should("equal", 0)
|
11
|
-
.get("@cpl").its("hueSteps").should("equal", 12)
|
12
|
-
.get("@cpl").its("lightSteps").should("equal", 10)
|
13
|
-
.get("@cpl").its("colors").its("length").should("equal", 120);
|
14
|
-
});
|
15
|
-
|
16
|
-
it("Test init with 1 parameter, throws error", () => {
|
17
|
-
try {
|
18
|
-
new ColorPalette(0, undefined);
|
19
|
-
} catch (error) {
|
20
|
-
expect(error).to.be.instanceOf(TypeError);
|
21
|
-
expect(error).to.have.property(
|
22
|
-
"message",
|
23
|
-
'ColorPalette: the two minimum arguments must be numbers higher than 0.'
|
24
|
-
);
|
25
|
-
}
|
26
|
-
});
|
27
|
-
|
28
|
-
// it("Test init with 1 parameter, throws error", () => {
|
29
|
-
// try {
|
30
|
-
// // @ts-ignore
|
31
|
-
// new ColorPalette(0, 'a');
|
32
|
-
// } catch (error) {
|
33
|
-
// expect(error).to.be.instanceOf(TypeError);
|
34
|
-
// expect(error).to.have.property(
|
35
|
-
// "message",
|
36
|
-
// 'ColorPalette only accepts numbers.'
|
37
|
-
// );
|
38
|
-
// }
|
39
|
-
// });
|
40
|
-
|
41
|
-
it("Test init with 2 invalid parameters, throws error", () => {
|
42
|
-
try {
|
43
|
-
new ColorPalette(0, 5);
|
44
|
-
} catch (error) {
|
45
|
-
expect(error).to.be.instanceOf(TypeError);
|
46
|
-
expect(error).to.have.property(
|
47
|
-
"message",
|
48
|
-
'ColorPalette: the two minimum arguments must be numbers higher than 0.'
|
49
|
-
);
|
50
|
-
}
|
51
|
-
});
|
52
|
-
|
53
|
-
it("Test init with 2 valid parameters", () => {
|
54
|
-
// generated with new `ColorPalette(1, 5)`
|
55
|
-
const testSample = ["#330000", "#990000", "#ff0000", "#ff6666", "#ffcccc"];
|
56
|
-
|
57
|
-
cy.wrap(new ColorPalette(1, 5)).as("cpl")
|
58
|
-
.get("@cpl").its("hue").should("equal", 0)
|
59
|
-
.get("@cpl").its("hueSteps").should("equal", 1)
|
60
|
-
.get("@cpl").its("lightSteps").should("equal", 5)
|
61
|
-
.get("@cpl").its("saturation").should("equal", 100)
|
62
|
-
.get("@cpl").its("colors").its("length").should("equal", 5)
|
63
|
-
.get("@cpl").its("colors").then((colors) => {
|
64
|
-
// really test every color in the palette
|
65
|
-
colors.forEach((color: Color, i: number) => {
|
66
|
-
cy.log(`${color.ok}`)
|
67
|
-
expect(color).to.be.instanceOf(Color);
|
68
|
-
// expect(color.ok).to.be.true;
|
69
|
-
expect(color.toHexString()).to.equal(testSample[i]);
|
70
|
-
});
|
71
|
-
});
|
72
|
-
});
|
73
|
-
|
74
|
-
it("Test init with 14 lightSteps", () => {
|
75
|
-
// generated with `new ColorPalette(1, 14)`
|
76
|
-
const testSample = [
|
77
|
-
"#330000", "#550000", "#770000", "#990000", "#bb0000",
|
78
|
-
"#dd0000", "#ff0000", "#ff2222", "#ff4444", "#ff6666",
|
79
|
-
"#ff8888", "#ffaaaa", "#ffcccc", "#ffeeee",
|
80
|
-
];
|
81
|
-
|
82
|
-
cy.wrap(new ColorPalette(1, 14)).as("cpl")
|
83
|
-
.get("@cpl").its("hue").should("equal", 0)
|
84
|
-
.get("@cpl").its("hueSteps").should("equal", 1)
|
85
|
-
.get("@cpl").its("lightSteps").should("equal", 14)
|
86
|
-
.get("@cpl").its("colors").its("length").should("equal", 14)
|
87
|
-
.get("@cpl").its("colors").then((colors) => {
|
88
|
-
expect(colors.map((c: Color) => c.toHexString())).to.deep.equal(testSample);
|
89
|
-
});
|
90
|
-
});
|
91
|
-
|
92
|
-
it("Test init with 15 lightSteps", () => {
|
93
|
-
// generated with `new ColorPalette(1, 15)`
|
94
|
-
const testSample = [
|
95
|
-
"#110000", "#330000", "#550000", "#770000",
|
96
|
-
"#990000", "#bb0000", "#dd0000", "#ff0000",
|
97
|
-
"#ff2222", "#ff4444", "#ff6666", "#ff8888",
|
98
|
-
"#ffaaaa", "#ffcccc", "#ffeeee",
|
99
|
-
];
|
100
|
-
|
101
|
-
cy.wrap(new ColorPalette(1, 15)).as("cpl")
|
102
|
-
.get("@cpl").its("hue").should("equal", 0)
|
103
|
-
.get("@cpl").its("hueSteps").should("equal", 1)
|
104
|
-
.get("@cpl").its("lightSteps").should("equal", 15)
|
105
|
-
.get("@cpl").its("colors").its("length").should("equal", 15)
|
106
|
-
.get("@cpl").its("colors").then((colors) => {
|
107
|
-
expect(colors.map((c: Color) => c.toHexString())).to.deep.equal(testSample);
|
108
|
-
});
|
109
|
-
});
|
110
|
-
|
111
|
-
it("Test init with 3 valid parameters", () => {
|
112
|
-
// generated with `new ColorPalette(270, 1, 10)`
|
113
|
-
const testSample = [
|
114
|
-
"#240047", "#3b0075", "#5200a3", "#6900d1",
|
115
|
-
"#8000ff", "#962eff", "#ad5cff", "#c48aff",
|
116
|
-
"#dbb8ff", "#f2e6ff",
|
117
|
-
];
|
118
|
-
|
119
|
-
cy.wrap(new ColorPalette(270, 1, 10)).as("cpl")
|
120
|
-
.get("@cpl").its("hue").should("equal", 270)
|
121
|
-
.get("@cpl").its("hueSteps").should("equal", 1)
|
122
|
-
.get("@cpl").its("lightSteps").should("equal", 10)
|
123
|
-
.get("@cpl").its("colors").its("length").should("equal", 10)
|
124
|
-
.get("@cpl").its("colors").then((colors) => {
|
125
|
-
expect(colors.map((c: Color) => c.toHexString())).to.deep.equal(testSample);
|
126
|
-
});
|
127
|
-
});
|
128
|
-
});
|