@thednp/color-picker 2.0.0 → 2.0.2

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@thednp/color-picker",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "author": "thednp",
   "license": "MIT",
   "description": "🎨 Modern Color Picker Component",
-  "homepage": "http://thednp.github.io/color-picker",
+  "homepage": "https://thednp.github.io/color-picker",
+  "type": "module",
   "source": "./src/ts/index.ts",
   "main": "./dist/js/color-picker.js",
   "module": "./dist/js/color-picker.mjs",
   "style": "./dist/css/color-picker.css",
   "sass": "./src/scss/color-picker.scss",
+  "sideEffects": false,
   "exports": {
     ".": {
       "require": "./dist/js/color-picker.cjs",
@@ -54,44 +56,39 @@
     "typescript"
   ],
   "dependencies": {
-    "@thednp/color": "^1.0.9",
-    "@thednp/shorty": "2.0.3"
+    "@thednp/color": "^1.0.11",
+    "@thednp/shorty": "^2.0.4"
   },
   "devDependencies": {
-    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.2",
-    "@cypress/code-coverage": "^3.12.44",
-    "@types/istanbul-lib-instrument": "^1.7.7",
-    "@types/node": "^22.2.0",
+    "@types/node": "^22.5.5",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "cypress": "^13.13.2",
+    "@vitest/browser": "^2.1.1",
+    "@vitest/coverage-istanbul": "^2.1.1",
+    "@vitest/ui": "^2.1.1",
     "dts-bundle-generator": "^9.5.1",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-plugin-jsdoc": "^46.10.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^5.2.1",
-    "istanbul-lib-coverage": "^3.2.2",
-    "istanbul-lib-instrument": "^6.0.3",
-    "ncp": "^2.0.0",
-    "npm-run-all": "^4.1.5",
-    "nyc": "^15.1.0",
+    "playwright": "^1.47.1",
     "prettier": "^3.3.3",
-    "rimraf": "^5.0.10",
-    "sass": "^1.77.8",
+    "sass": "^1.79.1",
     "stylelint": "^15.11.0",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-config-standard-scss": "^11.1.0",
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^5.3.2",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.0"
+    "typescript": "^5.6.2",
+    "vite": "^5.4.6",
+    "vitest": "^2.1.1"
   },
   "scripts": {
     "pre-test": "pnpm clean-coverage",
-    "test": "pnpm pre-test && cypress run",
-    "cypress": "pnpm pre-test && npx cypress open",
-    "badges": "npx -p dependency-version-badge update-badge typescript cypress eslint prettier vite",
-    "clean-coverage": "rimraf coverage .nyc_output",
+    "test": "pnpm pre-test && vitest --config vitest.config.ts",
+    "test-ui": "pnpm pre-test && vitest --config vitest.config-ui.ts --browser=chrome",
+    "badges": "npx -p dependency-version-badge update-badge typescript eslint prettier vitest vite",
+    "clean-coverage": "rm -rf coverage && rm -rf .nyc_output",
     "coverage:report": "nyc report --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",
     "format": "prettier --write \"src/**/*.ts\"",
     "lint": "pnpm lint:ts && pnpm check:ts && pnpm lint:css",
@@ -100,18 +97,18 @@
     "check:ts": "tsc --noEmit",
     "fix:css": "stylelint --config .stylelintrc.json --fix scss \"src/scss/*.scss\"",
     "lint:css": "stylelint --config .stylelintrc.json scss \"src/scss/*.scss\"",
-    "build": "pnpm lint && pnpm build-vite && pnpm dts",
-    "build-vite": "vite build && pnpm docs",
+    "build": "vite build && pnpm dts",
     "dev": "vite --open ./docs/dev.html --port 8577",
-    "dts": "dts-bundle-generator --config ./dts.config.ts",
-    "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",
-    "copy": "npm-run-all --parallel copy-*",
-    "copy-css-cp": "ncp dist/css/color-picker.css docs/css/color-picker.css",
-    "copy-css-rtl": "ncp dist/css/color-picker.rtl.css docs/css/color-picker.rtl.css",
-    "compile": "pnpm lint:css && npm-run-all --parallel compile-* && pnpm copy",
-    "compile-scss": "node compile.js",
-    "compile-scss-min": "node compile.js MIN:true",
-    "compile-scss-rtl": "node compile.js MIN:false,DIR:rtl",
-    "compile-scss-rtl-min": "node compile.js MIN:true,DIR:rtl"
+    "dts": "pnpm dts-bundle-generator --config ./dts.config.ts",
+    "copy": "pnpm copy-css-cp && pnpm copy-css-rtl && pnpm copy-js && pnpm copy-js-map",
+    "copy-js": "cp dist/js/color-picker.js docs/js/color-picker.js",
+    "copy-js-map": "cp dist/js/color-picker.js.map docs/js/color-picker.js.map",
+    "copy-css-cp": "cp dist/css/color-picker.css docs/css/color-picker.css",
+    "copy-css-rtl": "cp dist/css/color-picker.rtl.css docs/css/color-picker.rtl.css",
+    "compile": "pnpm lint:css && pnpm compile-scss && pnpm compile-scss-min && pnpm compile-scss-rtl && pnpm compile-scss-rtl-min && pnpm copy",
+    "compile-scss": "node compile.cjs",
+    "compile-scss-min": "node compile.cjs MIN:true",
+    "compile-scss-rtl": "node compile.cjs MIN:false,DIR:rtl",
+    "compile-scss-rtl-min": "node compile.cjs MIN:true,DIR:rtl"
   }
 }

package/src/scss/color-picker.scss

@@ -1,14 +1,14 @@
 @import "variables";
 
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
 /* :host */
 .color-picker {
   position: relative;
   display: flex;
 
-  *, *::before, *::after {
-    box-sizing: border-box;
-  }
-
   @each $name in "white", "black" {
     @each $lvl in $transparency-levels {
       @if  type-of($name) == "string" and type-of($lvl) == "number" {
@@ -21,6 +21,8 @@
         $rgba: rgba($color, $lvl * 1%);
 
         --#{$name}-#{$lvl}: #{$rgba};
+
+        // --#{$name}-#{$lvl}: #{rgba($color, $lvl * 1%)};
       }
     }
   }

package/src/ts/colorPalette.ts

@@ -73,9 +73,9 @@ export default class ColorPalette {
 
     // feed `colors` Array
     for (let i = 0; i < hueSteps; i += 1) {
-      const currentHue = ((hue + i * hueStep) % 360) / 360;
+      const currentHue = (hue + i * hueStep) % 360;
       lightnessArray.forEach(l => {
-        const newColor = new Color({ h: currentHue, s: 1, l });
+        const newColor = new Color({ h: currentHue, s: 100, l: l * 100 });
         colors.push(saturation < 100 ? newColor.saturate(saturation - 100) : newColor);
       });
     }

package/src/ts/index.ts

@@ -117,8 +117,8 @@ const toggleEventsOnShown = (self: ColorPicker, action?: boolean) => {
   const doc = getDocument(input);
   const win = getWindow(doc);
 
-  fn(self.controls, pointerdownEvent, self.pointerDown as EventListener);
-  self.controlKnobs.forEach(x => fn(x, keydownEvent, self.handleKnobs as EventListener));
+  fn(self.controls, pointerdownEvent, self.pointerDown);
+  self.controlKnobs.forEach(x => fn(x, keydownEvent, self.handleKnobs));
 
   fn(win, scrollEvent, self.handleScroll);
   fn(win, resizeEvent, self.update);
@@ -127,13 +127,13 @@ const toggleEventsOnShown = (self: ColorPicker, action?: boolean) => {
 
   if (colorMenu) {
     fn(colorMenu, mouseclickEvent, self.menuClickHandler);
-    fn(colorMenu, keydownEvent, self.menuKeyHandler as EventListener);
+    fn(colorMenu, keydownEvent, self.menuKeyHandler);
   }
 
-  fn(doc, pointermoveEvent, self.pointerMove as EventListener);
-  fn(doc, pointerupEvent, self.pointerUp as EventListener);
-  fn(parent, focusoutEvent, self.handleFocusOut as EventListener);
-  fn(doc, keyupEvent, self.handleDismiss as EventListener);
+  fn(doc, pointermoveEvent, self.pointerMove);
+  fn(doc, pointerupEvent, self.pointerUp);
+  fn(parent, focusoutEvent, self.handleFocusOut);
+  fn(doc, keyupEvent, self.handleDismiss);
 };
 
 /**
@@ -465,15 +465,15 @@ export default class ColorPicker {
     const [v1, v2, v3] = visuals;
     const { offsetHeight } = v1;
     const hue = controlPositions.c2y / offsetHeight;
-    const { r, g, b } = new Color({ h: hue, s: 1, l: 0.5 }).toRgb();
+    const { r, g, b } = new Color({ h: hue * 360, s: 100, l: 50 }).toRgb();
     const whiteGrad = 'linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)';
     const alpha = 1 - controlPositions.c3y / offsetHeight;
     const roundA = roundPart(alpha * 100) / 100;
 
     const fill = new Color({
-      h: hue,
-      s: 1,
-      l: 0.5,
+      h: hue * 360,
+      s: 100,
+      l: 50,
       a: alpha,
     }).toRgbString();
     const hueGradient = `linear-gradient(
@@ -547,8 +547,9 @@ export default class ColorPicker {
     const { previousElementSibling, nextElementSibling, parentElement } = target;
     const isColorOptionsMenu = parentElement && hasClass(parentElement, 'color-options');
     const allSiblings = parentElement ? [...parentElement.children] : [];
-    const columnsCount =
-      isColorOptionsMenu && getElementStyle(parentElement, 'grid-template-columns').split(' ').length;
+    // const columnsCount =
+    //   isColorOptionsMenu && getElementStyle(parentElement, 'grid-template-columns').split(' ').length;
+    const columnsCount = isColorOptionsMenu && Number(getElementStyle(parentElement, '--grid-fit'));
     const currentIndex = allSiblings.indexOf(target);
     const previousElement = currentIndex > -1 && columnsCount && allSiblings[currentIndex - columnsCount];
     const nextElement = currentIndex > -1 && columnsCount && allSiblings[currentIndex + columnsCount];
@@ -861,9 +862,9 @@ export default class ColorPicker {
 
     // new color
     const { r, g, b, a } = new Color({
-      h: hue,
-      s: saturation,
-      v: lightness,
+      h: hue * 360,
+      s: saturation * 100,
+      v: lightness * 100,
       a: alpha,
     });
 
@@ -908,9 +909,9 @@ export default class ColorPicker {
 
     // new color
     const { r, g, b, a } = new Color({
-      h: hue,
-      s: saturation,
-      v: lightness,
+      h: hue * 360,
+      s: saturation * 100,
+      v: lightness * 100,
       a: alpha,
     });
 

package/test/color-palette.test.ts

@@ -0,0 +1,137 @@
+import { expect, it, describe } from 'vitest';
+import Color from "@thednp/color";
+import ColorPalette from "~/ts/colorPalette";
+
+describe("ColorPalette Class Test", () => {
+  it("Test init with no parameter, use all default values", () => {
+    const cpl = new ColorPalette();
+    expect(cpl).to.be.instanceOf(ColorPalette);
+    expect(cpl.hue).to.equal(0);
+    expect(cpl.hueSteps).to.equal(12);
+    expect(cpl.lightSteps).to.equal(10);
+    expect(cpl.colors.length).to.equal(120);
+  });
+
+  it("Test init with 1 parameter, throws error", () => {
+    try {
+      new ColorPalette(0, undefined);
+    } catch (error) {
+      expect(error).to.be.instanceOf(TypeError);
+      expect(error).to.have.property(
+        "message",
+        'ColorPalette: the two minimum arguments must be numbers higher than 0.'
+      );
+    }
+  });
+
+  it("Test init with 2 invalid parameters, throws error", () => {
+    try {
+      new ColorPalette(0, 5);
+    } catch (error) {
+      expect(error).to.be.instanceOf(TypeError);
+      expect(error).to.have.property(
+        "message",
+        'ColorPalette: the two minimum arguments must be numbers higher than 0.'
+      );
+    }
+  });
+
+  it("Test init with 2 valid parameters", () => {
+    // generated with new `ColorPalette(1, 5)`
+    const testSample = ["#330000", "#990000", "#ff0000", "#ff6666", "#ffcccc"];
+    const cpl = new ColorPalette(1, 5);
+
+    expect(cpl).to.be.instanceOf(ColorPalette);
+    expect(cpl.hue).to.equal(0);
+    expect(cpl.hueSteps).to.equal(1);
+    expect(cpl.lightSteps).to.equal(5);
+    expect(cpl.saturation).to.equal(100);
+    expect(cpl.colors.length).to.equal(5);
+
+    cpl.colors.forEach((color, i) => {
+      expect(color).to.be.instanceOf(Color);
+      expect(color.toHexString()).to.equal(testSample[i]);
+    })
+  });
+
+  it("Test init with 14 lightSteps", () => {
+    // generated with `new ColorPalette(1, 14)`
+    const testSample = [
+      "#330000", "#550000", "#770000", "#990000", "#bb0000",
+      "#dd0000", "#ff0000", "#ff2222", "#ff4444", "#ff6666",
+      "#ff8888", "#ffaaaa", "#ffcccc", "#ffeeee",
+    ];
+    const cpl = new ColorPalette(1, 14);
+
+    expect(cpl).to.be.instanceOf(ColorPalette);
+    expect(cpl.hue).to.equal(0);
+    expect(cpl.hueSteps).to.equal(1);
+    expect(cpl.lightSteps).to.equal(14);
+    expect(cpl.colors.length).to.equal(14);
+
+    cpl.colors.forEach((color, i) => {
+      expect(color).to.be.instanceOf(Color);
+      // expect(color.ok).to.be.true;
+      expect(color.toHexString()).to.equal(testSample[i]);
+    })
+  });
+
+  it("Test init with 15 lightSteps", () => {
+    // generated with `new ColorPalette(1, 15)`
+    const testSample = [
+      "#110000", "#330000", "#550000", "#770000",
+      "#990000", "#bb0000", "#dd0000", "#ff0000",
+      "#ff2222", "#ff4444", "#ff6666", "#ff8888",
+      "#ffaaaa", "#ffcccc", "#ffeeee",
+    ];
+    const cpl = new ColorPalette(1, 15);
+
+    expect(cpl).to.be.instanceOf(ColorPalette);
+    expect(cpl.hue).to.equal(0);
+    expect(cpl.hueSteps).to.equal(1);
+    expect(cpl.lightSteps).to.equal(15);
+    expect(cpl.colors.length).to.equal(15);
+
+    cpl.colors.forEach((color, i) => {
+      expect(color).to.be.instanceOf(Color);
+      // expect(color.ok).to.be.true;
+      expect(color.toHexString()).to.equal(testSample[i]);
+    })
+  });
+
+  it("Test init with 3 valid parameters", () => {
+    // generated with `new ColorPalette(270, 1, 10)`
+    const testSample = [
+      "#240047", "#3b0075", "#5200a3", "#6900d1",
+      "#7f00ff", "#962eff", "#ad5cff", "#c48aff",
+      "#dbb8ff", "#f2e5ff",
+    ];
+    const cpl = new ColorPalette(270, 1, 10);
+
+    expect(cpl).to.be.instanceOf(ColorPalette);
+    expect(cpl.hue).to.equal(270);
+    expect(cpl.hueSteps).to.equal(1);
+    expect(cpl.lightSteps).to.equal(10);
+    expect(cpl.saturation).to.equal(100);
+    expect(cpl.colors.length).to.equal(10);
+    expect(cpl.colors.map(c => c.toHexString())).to.deep.equal(testSample);
+  });
+
+  it("Test init with 4 valid parameters", () => {
+    // generated with `new ColorPalette(270, 1, 10)`
+    const testSample = [
+      "#240740", "#3b0c6a", "#521093", "#6915bc",
+      "#7f19e6", "#9643ea", "#ad6cef", "#c495f3",
+      "#dbbff8", "#f2e8fc",
+    ];
+    const cpl = new ColorPalette(270, 1, 10, 80);
+
+    expect(cpl).to.be.instanceOf(ColorPalette);
+    expect(cpl.hue).to.equal(270);
+    expect(cpl.hueSteps).to.equal(1);
+    expect(cpl.lightSteps).to.equal(10);
+    expect(cpl.saturation).to.equal(80);
+    expect(cpl.colors.length).to.equal(10);
+    expect(cpl.colors.map(c => c.toHexString())).to.deep.equal(testSample);
+  });
+});