@thednp/color-picker 2.0.0-alpha9 → 2.0.1

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@thednp/color-picker",
-  "version": "2.0.0-alpha9",
+  "version": "2.0.1",
   "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",
@@ -33,31 +35,6 @@
       "require": "./src/scss/color-picker.rtl.scss"
     }
   },
-  "scripts": {
-    "pre-test": "npm run clean-coverage",
-    "test": "npm run pre-test && cypress run",
-    "cypress": "npm run pre-test && npx cypress open",
-    "clean-coverage": "rimraf coverage .nyc_output",
-    "coverage:report": "nyc report --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",
-    "format": "prettier --write \"src/**/*.ts\"",
-    "fix:ts": "eslint src --config .eslintrc.cjs --fix",
-    "lint:ts": "eslint src --config .eslintrc.cjs",
-    "fix:css": "stylelint --config .stylelintrc.json --fix scss \"src/scss/*.scss\"",
-    "lint:css": "stylelint --config .stylelintrc.json scss \"src/scss/*.scss\"",
-    "build": "npm run lint:ts && npm run build-vite && npm run dts",
-    "build-vite": "vite build && npm run docs",
-    "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": "npm run lint:css && npm-run-all --parallel compile-* && npm run 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"
-  },
   "bugs": {
     "url": "https://github.com/thednp/color-picker/issues"
   },
@@ -79,37 +56,62 @@
     "typescript"
   ],
   "dependencies": {
-    "@thednp/color": "^1.0.8",
-    "@thednp/event-listener": "^2.0.2",
-    "@thednp/shorty": "2.0.0-alpha17"
+    "@thednp/color": "^1.0.9",
+    "@thednp/shorty": "2.0.3"
   },
   "devDependencies": {
-    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
-    "@cypress/code-coverage": "^3.11.0",
-    "@types/istanbul-lib-instrument": "^1.7.4",
-    "@typescript-eslint/eslint-plugin": "^6.4.0",
-    "@typescript-eslint/parser": "^6.4.0",
-    "cypress": "^12.17.4",
-    "dts-bundle-generator": "^8.0.1",
-    "eslint": "^8.47.0",
-    "eslint-plugin-jsdoc": "^46.4.6",
+    "@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",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "cypress": "^13.13.2",
+    "dts-bundle-generator": "^9.5.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-jsdoc": "^46.10.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-prettier": "^5.0.0",
-    "istanbul-lib-coverage": "^3.2.0",
-    "istanbul-lib-instrument": "^6.0.0",
+    "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",
-    "prettier": "^3.0.2",
-    "rimraf": "^5.0.1",
-    "sass": "^1.66.1",
-    "stylelint": "^15.10.3",
+    "prettier": "^3.3.3",
+    "sass": "^1.77.8",
+    "stylelint": "^15.11.0",
     "stylelint-config-standard": "^34.0.0",
-    "stylelint-config-standard-scss": "^10.0.0",
-    "stylelint-order": "^6.0.3",
-    "stylelint-scss": "^5.1.0",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.9"
+    "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"
   },
-  "packageManager": "pnpm@8.6.12"
-}
+  "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": "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",
+    "fix:ts": "eslint src --config .eslintrc.cjs --fix",
+    "lint:ts": "eslint src --config .eslintrc.cjs",
+    "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 && pnpm docs",
+    "build-vite": "vite build",
+    "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": "pnpm copy-css-cp && pnpm copy-css-rtl",
+    "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 && 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%)};
       }
     }
   }
@@ -205,8 +207,10 @@
 
 /* scrollable */
 .scrollable {
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
+
+  // overflow-x: hidden;
+  // overflow-y: auto;
   scrollbar-width: thin;
 }
 

package/src/ts/index.ts

@@ -1,5 +1,3 @@
-import { addListener, removeListener } from '@thednp/event-listener';
-
 import {
   ariaDescription,
   ariaSelected,
@@ -53,6 +51,8 @@ import {
   isArray,
   isString,
   getWindow,
+  on,
+  off,
 } from '@thednp/shorty';
 
 // ColorPicker Util
@@ -97,7 +97,7 @@ const initColorPicker = (element: HTMLInputElement) => new ColorPicker(element);
  * Add / remove `ColorPicker` main event listeners.
  */
 const toggleEvents = (self: ColorPicker, action?: boolean) => {
-  const fn = action ? addListener : removeListener;
+  const fn = action ? on : off;
   const { input, pickerToggle, menuToggle } = self;
 
   fn(input, focusinEvent, self.showPicker);
@@ -112,7 +112,7 @@ const toggleEvents = (self: ColorPicker, action?: boolean) => {
  * Add / remove `ColorPicker` event listeners active only when open.
  */
 const toggleEventsOnShown = (self: ColorPicker, action?: boolean) => {
-  const fn = action ? addListener : removeListener;
+  const fn = action ? on : off;
   const { input, colorMenu, parent } = self;
   const doc = getDocument(input);
   const win = getWindow(doc);

package/src/ts/util/setMarkup.ts

@@ -36,13 +36,14 @@ const setMarkup = (self: ColorPicker) => {
   // set initial controls dimensions
   const formatString = format === 'hex' ? hexLabel : toUpperCase(format);
 
-  const pickerBtn = createElement({
+  const pickerBtn = createElement<HTMLButtonElement>({
     id: `picker-btn-${id}`,
     tagName: 'button',
+    type: 'button',
     className: 'picker-toggle btn-appearance',
     ariaExpanded: 'false',
     ariaHasPopup: 'true',
-  }) as HTMLElement;
+  }) as HTMLButtonElement;
 
   pickerBtn.append(
     createElement({
@@ -84,13 +85,14 @@ const setMarkup = (self: ColorPicker) => {
       presetsDropdown.append(getColorMenu(self, colorKeywords, 'color-defaults'));
     }
 
-    const presetsBtn = createElement({
+    const presetsBtn = createElement<HTMLButtonElement>({
       tagName: 'button',
+      type: 'button',
       className: 'menu-toggle btn-appearance',
       tabIndex: -1,
       ariaExpanded: 'false',
       ariaHasPopup: 'true',
-    }) as HTMLElement;
+    }) as HTMLButtonElement;
 
     const xmlns = encodeURI('http://www.w3.org/2000/svg');
     const presetsIcon = createElementNS(xmlns, {

package/tsconfig.json

@@ -2,8 +2,8 @@
   // https://janessagarrow.com/blog/typescript-and-esbuild/
  "compilerOptions": {
    "lib": ["DOM", "ESNext", "DOM.Iterable"],
-   "types": ["vite", "vite/client", "@thednp/shorty", "@thednp/event-listener", "@thednp/color"],
-   "rootDir": "./",
+  //  "types": ["vite", "vite/client", "@thednp/shorty", "@thednp/color"],
+   "rootDir": "./src",
    "baseUrl": "./",
    "module": "ESNext",
    "target": "ESNext",

package/{vite.config.ts → vite.config.mts}

@@ -1,3 +1,4 @@
+/// <reference types="vite/client" />
 "use strict";
 import { resolve } from 'path';
 import { defineConfig } from 'vite';