@thednp/color-picker 1.0.1 → 2.0.0-alpha10

package/package.json

@@ -1,108 +1,116 @@
-{
-  "name": "@thednp/color-picker",
-  "version": "1.0.1",
-  "description": "Modern Color Picker Web Component",
-  "main": "dist/js/color-picker.min.js",
-  "module": "dist/js/color-picker.esm.js",
-  "types": "types/index.d.ts",
-  "style": "dist/css/color-picker.min.css",
-  "sass": "src/scss/color-picker.scss",
-  "jsnext": "src/js/color-picker.js",
-  "files": [
-    "types",
-    "dist",
-    "src"
-  ],
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "scripts": {
-    "test": "cypress run",
-    "cypress": "npx cypress open",
-    "coverage:report": "nyc report --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",
-    "fix:js": "eslint src/ --config .eslintrc --fix",
-    "lint:js": "eslint src/ --config .eslintrc",
-    "fix:css": "stylelint --config .stylelintrc.json -s --fix scss \"src/scss/*.scss\"",
-    "lint:css": "stylelint --config .stylelintrc.json -s scss \"src/scss/*.scss\"",
-    "bundle": "npm-run-all build compile",
-    "build": "npm run lint:js && npm-run-all --parallel build-* && npm-run-all --parallel copy-js-*",
-    "build:ts": "tsc -d",
-    "build-js": "rollup --environment FORMAT:umd,MIN:false -c",
-    "build-ce": "rollup --environment FORMAT:umd,MIN:false,NAME:ColorPickerElement,INPUTFILE:src/js/color-picker-element.js,OUTPUTFILE:dist/js/color-picker-element.js -c",
-    "build-ce-min": "rollup --environment FORMAT:umd,MIN:true,NAME:ColorPickerElement,INPUTFILE:src/js/color-picker-element.js,OUTPUTFILE:dist/js/color-picker-element.min.js -c",
-    "build-ce-esm": "rollup --environment FORMAT:esm,MIN:false,NAME:ColorPickerElement,INPUTFILE:src/js/color-picker-element.js,OUTPUTFILE:dist/js/color-picker-element-esm.js -c",
-    "build-ce-esm-min": "rollup --environment FORMAT:esm,MIN:true,NAME:ColorPickerElement,INPUTFILE:src/js/color-picker-element.js,OUTPUTFILE:dist/js/color-picker-element-esm.min.js -c",
-    "build-cl": "rollup --environment FORMAT:umd,MIN:false,NAME:Color,INPUTFILE:src/js/color.js,OUTPUTFILE:dist/js/color.js -c",
-    "build-cl-min": "rollup --environment FORMAT:umd,MIN:true,NAME:Color,INPUTFILE:src/js/color.js,OUTPUTFILE:dist/js/color.min.js -c",
-    "build-cl-esm": "rollup --environment FORMAT:esm,MIN:false,NAME:Color,INPUTFILE:src/js/color.js,OUTPUTFILE:dist/js/color-esm.js -c",
-    "build-cl-esm-min": "rollup --environment FORMAT:esm,MIN:true,NAME:Color,INPUTFILE:src/js/color.js,OUTPUTFILE:dist/js/color-esm.min.js -c",
-    "build-cpl": "rollup --environment FORMAT:umd,MIN:false,NAME:ColorPalette,INPUTFILE:src/js/color-palette.js,OUTPUTFILE:dist/js/color-palette.js -c",
-    "build-cpl-min": "rollup --environment FORMAT:umd,MIN:true,NAME:ColorPalette,INPUTFILE:src/js/color-palette.js,OUTPUTFILE:dist/js/color-palette.min.js -c",
-    "build-cpl-esm": "rollup --environment FORMAT:esm,MIN:false,NAME:ColorPalette,INPUTFILE:src/js/color-palette.js,OUTPUTFILE:dist/js/color-palette-esm.js -c",
-    "build-cpl-esm-min": "rollup --environment FORMAT:esm,MIN:true,NAME:ColorPalette,INPUTFILE:src/js/color-palette.js,OUTPUTFILE:dist/js/color-palette-esm.min.js -c",
-    "build-minjs": "rollup --environment FORMAT:umd,MIN:true -c",
-    "build-esm": "rollup --environment FORMAT:esm,MIN:false -c",
-    "build-esmjs": "rollup --environment FORMAT:esm,MIN:true -c",
-    "copy": "npm-run-all --parallel copy-*",
-    "copy-js-cp": "ncp dist/js/color-picker.js docs/js/color-picker.js",
-    "copy-js-ce": "ncp dist/js/color-picker-element.js docs/js/color-picker-element.js",
-    "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-all --parallel copy-css-*",
-    "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"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/thednp/color-picker.git"
-  },
-  "keywords": [
-    "color",
-    "picker",
-    "color-picker",
-    "colorpicker",
-    "palette",
-    "color-palette",
-    "javascript"
-  ],
-  "author": "thednp",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/thednp/color-picker/issues"
-  },
-  "homepage": "http://thednp.github.io/color-picker",
-  "dependencies": {
-    "@thednp/event-listener": "^1.0.4",
-    "shorter-js": "^0.3.4"
-  },
-  "devDependencies": {
-    "@bahmutov/cypress-esbuild-preprocessor": "^2.1.3",
-    "@cypress/code-coverage": "^3.9.12",
-    "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^21.0.3",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^7.1.3",
-    "cypress": "^9.7.0",
-    "esbuild": "^0.14.30",
-    "eslint": "^7.22.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-vue": "^7.7.0",
-    "istanbul-lib-coverage": "^3.2.0",
-    "istanbul-lib-instrument": "^5.2.0",
-    "ncp": "^2.0.0",
-    "npm-run-all": "^4.1.5",
-    "nyc": "^15.1.0",
-    "rollup": "^2.71.1",
-    "rollup-plugin-terser": "^5.3.1",
-    "sass": "^1.39.0",
-    "stylelint": "^13.12.0",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-order": "^4.1.0",
-    "stylelint-scss": "^3.19.0",
-    "typescript": "^4.5.2"
-  }
-}
+{
+  "name": "@thednp/color-picker",
+  "version": "2.0.0-alpha10",
+  "author": "thednp",
+  "license": "MIT",
+  "description": "🎨 Modern Color Picker Component",
+  "homepage": "http://thednp.github.io/color-picker",
+  "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",
+  "exports": {
+    ".": {
+      "require": "./dist/js/color-picker.cjs",
+      "import": "./dist/js/color-picker.mjs",
+      "types": "./dist/js/color-picker.d.ts"
+    },
+    "./dist/css/color-picker.css": {
+      "import": "./dist/css/color-picker.css",
+      "require": "./dist/css/color-picker.css"
+    },
+    "./dist/css/color-picker.rtl.css": {
+      "import": "./dist/css/color-picker.rtl.css",
+      "require": "./dist/css/color-picker.rtl.css"
+    },
+    "./src/scss/color-picker.scss": {
+      "import": "./src/scss/color-picker.scss",
+      "require": "./src/scss/color-picker.scss"
+    },
+    "./src/scss/color-picker.rtl.scss": {
+      "import": "./src/scss/color-picker.rtl.scss",
+      "require": "./src/scss/color-picker.rtl.scss"
+    }
+  },
+  "bugs": {
+    "url": "https://github.com/thednp/color-picker/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thednp/color-picker.git"
+  },
+  "keywords": [
+    "color",
+    "picker",
+    "color-picker",
+    "colorpicker",
+    "palette",
+    "color-palette",
+    "typescript"
+  ],
+  "dependencies": {
+    "@thednp/color": "^1.0.8",
+    "@thednp/shorty": "2.0.0-alpha22"
+  },
+  "devDependencies": {
+    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
+    "@cypress/code-coverage": "^3.12.0",
+    "@types/istanbul-lib-instrument": "^1.7.4",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
+    "cypress": "^13.1.0",
+    "dts-bundle-generator": "^8.0.1",
+    "eslint": "^8.49.0",
+    "eslint-plugin-jsdoc": "^46.5.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",
+    "ncp": "^2.0.0",
+    "npm-run-all": "^4.1.5",
+    "nyc": "^15.1.0",
+    "prettier": "^3.0.3",
+    "rimraf": "^5.0.1",
+    "sass": "^1.66.1",
+    "stylelint": "^15.10.3",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-scss": "^11.0.0",
+    "stylelint-order": "^6.0.3",
+    "stylelint-scss": "^5.1.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9"
+  },
+  "packageManager": "pnpm@8.6.12",
+  "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\"",
+    "lint": "npm run lint:ts && npm run check:ts && npm run 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": "npm run lint && 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"
+  }
+}

package/src/scss/_variables.scss

@@ -1,7 +1,6 @@
 $transparency-levels: (
   15, 25, 33, 50, 75, 90
 );
-
 $dropdown-transition: transform .33s ease, opacity .33s ease;
 $btn-transition: box-shadow .33s ease, border .33s ease;
 $options-transition: height .33s ease;

package/src/scss/color-picker.rtl.scss

@@ -7,16 +7,20 @@
     right: auto; left: 0;
     border-radius: .25rem 0 0 .25rem;
   }
+
   .color-dropdown.picker {
     right: 0; left: auto;
   }
+
   .color-dropdown.menu {
     right: auto; left: 0;
   }
+
   .color-control + .color-control {
     margin-right: .5rem;
     margin-left: 0;
   }
+
   .color-options.scrollable {
     margin: 0 0 0 -.5rem;
   }

package/src/scss/color-picker.scss

@@ -1,23 +1,30 @@
 @import "variables";
 
 /* :host */
-color-picker,
 .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") {
+      @if  type-of($name) == "string" and type-of($lvl) == "number" {
         $color: #fff;
+
         @if $name == "black" {
           $color: #000;
         }
-        $rgba: rgba($color, $lvl * .01);
+
+        $rgba: rgba($color, $lvl * 1%);
+
         --#{$name}-#{$lvl}: #{$rgba};
       }
     }
   }
+
   --dropdown-transition: #{$dropdown-transition};
   --btn-transition: #{$btn-transition};
   --options-transition: #{$options-transition};
@@ -40,7 +47,6 @@ color-picker,
   --visual-shadow: 0 0 0 1px var(--white-15) inset;
 }
 
-color-picker:focus,
 .color-picker:focus {
   outline: none;
 }
@@ -62,7 +68,11 @@ color-picker:focus,
 }
 
 .color-dropdown.picker { left: 0; }
-.color-dropdown.menu { right: 0; }
+
+.color-dropdown.menu {
+  right: 0;
+  max-height: 230px;
+}
 
 .open .color-dropdown.top {
   top: auto;
@@ -92,7 +102,8 @@ color-picker:focus,
 /* btn-appearance */
 .btn-appearance {
   width: 100%;
-  height: 1.5rem;
+
+  // height: 1.5rem;
   padding: .6rem 1rem;
   font-size: 1rem;
   line-height: 1.5;
@@ -100,10 +111,12 @@ color-picker:focus,
   border-radius: .25rem;
   outline: none;
   appearance: none;
+
   // transition-duration: .33s;
   // transition-property: box-shadow, border;
   transition: var(--btn-transition);
 }
+
 .btn-appearance:focus,
 .btn-appearance:hover {
   box-shadow: 0 0 0 3px var(--black-15);
@@ -111,26 +124,31 @@ color-picker:focus,
 
 /* color-preview */
 .color-preview {
-  box-shadow: 0 0 0 1px rgba(120,120,120,.33) inset;
+  box-shadow: 0 0 0 1px rgba(120,120,120,33%) inset;
   direction: ltr; /* color value can never be rtl */
 }
 
 .txt-dark .color-preview {
   color: var(--white-75);
 }
+
 .txt-dark .color-preview:focus {
   box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--black-15);
 }
+
 .txt-dark .color-preview::placeholder {
   color: var(--white-50);
 }
+
 .txt-light .color-preview {
   color: var(--black-75);
 }
+
 .txt-light .color-preview:focus {
   color: var(--black-75);
   box-shadow: 0 0 0 1px #000 inset, 0 0 0 3px var(--black-15);
 }
+
 .txt-light .color-preview::placeholder {
   color: var(--black-50);
 }
@@ -138,10 +156,10 @@ color-picker:focus,
 /* picker-toggle */
 .picker-toggle {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
+  cursor: pointer;
   background: transparent;
   border: 0;
 }
@@ -163,20 +181,23 @@ color-picker:focus,
   border: 0;
   border-radius: 0 .25rem .25rem 0;
 }
+
 .txt-light .menu-toggle {
   background: var(--black-50);
+
+  &:focus {
+    background: var(--black-75);
+  }
 }
-.txt-light .menu-toggle:focus,
-.txt-light .menu-toggle:focus {
-  background: var(--black-75);
-}
+
 .txt-dark .menu-toggle {
   background: var(--white-33);
+
+  &:focus {
+    background: var(--white-50);
+  }
 }
-.txt-dark .menu-toggle:focus,
-.txt-dark .menu-toggle:focus {
-  background: var(--white-50);
-}
+
 .menu-toggle svg {
   width: auto;
   height: 100%;
@@ -188,6 +209,7 @@ color-picker:focus,
   overflow-y: auto;
   scrollbar-width: thin;
 }
+
 .scrollable::-webkit-scrollbar {
   width: .5rem;
 }
@@ -214,8 +236,9 @@ color-picker:focus,
 /* color-defaults */
 .color-defaults {
   display: none;
-  flex-wrap: wrap;
-  flex-flow: column;
+
+  // flex-wrap: ;
+  flex-flow: column wrap;
   margin: 0;
   list-style: none;
   padding-inline: 0; // Firefox
@@ -226,9 +249,9 @@ color-picker:focus,
   display: flex;
 }
 
-.color-dropdown.menu {
-  max-height: 230px;
-}
+// .color-dropdown.menu {
+//   max-height: 230px;
+// }
 
 .color-defaults .color-option {
   padding: .25rem .5rem;
@@ -259,6 +282,7 @@ color-picker:focus,
   --grid-gap: .25rem; // grid vertical / horizontal spacing
   --grid-height: auto; // default height
   --grid-hover-height: auto; // height on hover
+
   display: grid;
   padding: 0;
   margin: 0;
@@ -267,44 +291,55 @@ color-picker:focus,
   grid-template-rows: repeat(auto-fill, var(--grid-item-size));
   gap: var(--grid-gap);
 }
+
 .color-options.scrollable {
   height: var(--grid-height);
   margin: 0 -.5rem 0 0; // 0.5rem is the scrollbar width
   overflow-y: scroll;
   transition: var(--options-transition);
 }
-.color-options.scrollable:hover {
+
+// .color-options.scrollable:hover {
+.color-dropdown.menu:hover .scrollable {
   height: var(--grid-hover-height);
 }
+
 .color-options + .color-defaults {
   margin-top: .25rem;
 }
+
 .multiline + .color-defaults {
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
+
   .color-option {
     padding: .25rem .33rem; font-size: 12px;
   }
 }
+
 .color-options .color-option {
   // hide any text
   position: relative;
   width: var(--grid-item-size);
   height: var(--grid-item-size);
   overflow: hidden;
-  text-indent: 2.1rem;
-}
-.color-options .color-option:active,
-.color-options .color-option:focus {
-  outline: none;
+  color: rgba(0,0,0,0%);
+
+  &:active, &:focus {
+    outline: none;
+    box-shadow: 0 0 0 4px rgba(125,125,125,75%) inset;
+  }
 }
+
+// .color-options .color-option:active,
+// .color-options .color-option:focus {
+//   outline: none;
+// }
+
 .color-options .color-option::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 }
+
 .color-options .color-option:hover::before,
 .color-options .color-option:active::before,
 .color-options .color-option:focus::before {
@@ -313,13 +348,15 @@ color-picker:focus,
   mix-blend-mode: difference;
 }
 
-.color-options .color-option:active,
-.color-options .color-option:focus {
-  box-shadow: 0 0 0 4px rgba(125,125,125,.75) inset;
-}
+// .color-options .color-option {
+//   &:active, &:focus {
+//     outline: none;
+//     box-shadow: 0 0 0 4px rgba(125,125,125,75%) inset;
+//   }
+// }
 
 .color-options .color-option.active {
-  &:after {
+  &::after {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -330,18 +367,19 @@ color-picker:focus,
     border-radius: 4px;
   }
 }
-.txt-dark .color-options .color-option.active:after {
+
+.txt-dark .color-options .color-option.active::after {
   box-shadow: 0 0 0 4px var(--white-90);
 }
-.txt-light .color-options .color-option.active:after {
+
+.txt-light .color-options .color-option.active::after {
   box-shadow: 0 0 0 4px var(--black-90);
 }
 
 /* color-form */
 .color-form {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   align-items: center;
   padding: .25rem 0 0;
   font: 12px sans-serif;
@@ -382,27 +420,24 @@ color-picker:focus,
 
 /* visual control */
 .visual-control {
-  height: 150px;
+  height: 230px;
+
   /* important for mobile devices */
   touch-action: none;
   box-shadow: var(--visual-shadow);
 }
 
 .visual-control1 {
-  width: 150px;
+  width: 230px;
 }
+
 .visual-control2,
 .visual-control3 {
   width: 21px;
   cursor: ns-resize;
 }
 
-@media (min-width: 578px) {
-  .visual-control { height: 230px; }
-  .visual-control1 { width: 230px; }
-}
-
-@media (min-width: 1200px) {
+@media (width >= 980px) {
   .visual-control { height: 300px; }
   .visual-control1 { width: 300px; }
 }
@@ -427,7 +462,9 @@ color-picker:focus,
   position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
   height: 7px;
+
   /* important for mobile devices */
   touch-action: none;
   user-select: none;
@@ -437,9 +474,11 @@ color-picker:focus,
   outline: none;
   will-change: transform;
 }
+
 .knob:hover {
   box-shadow: var(--knob-shadow-hover);
 }
+
 .knob:focus,
 .knob:active {
   z-index: 1;
@@ -456,6 +495,7 @@ color-picker:focus,
 .txt-dark .color-pointer {
   box-shadow: 0 0 0 5px var(--white-50);
 }
+
 .txt-light .color-pointer {
   box-shadow: 0 0 0 5px var(--black-50);
 }
@@ -463,6 +503,7 @@ color-picker:focus,
 .txt-dark .color-pointer:hover {
   box-shadow: 0 0 0 5px var(--white-75);
 }
+
 .txt-light .color-pointer:hover {
   box-shadow: 0 0 0 5px var(--black-75);
 }
@@ -471,6 +512,7 @@ color-picker:focus,
 .txt-dark .color-pointer:active {
   box-shadow: 0 0 0 5px var(--white-90);
 }
+
 .txt-light .color-pointer:focus,
 .txt-light .color-pointer:active {
   box-shadow: 0 0 0 5px var(--black-90);