vanilla-colorful - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

color-picker-hex.d.ts

@@ -1,3 +0,2 @@
-import type { ColorModel } from './lib/types';
-import { ColorPicker } from './lib/components/color-picker.js';
+import { HexBase } from './lib/entrypoints/hex.js';
 /**
@@ -17,4 +16,3 @@ * A color picker custom element that uses HEX format.
  */
-export declare class ColorPickerHex extends ColorPicker<string> {
-    protected get colorModel(): ColorModel<string>;
+export declare class ColorPickerHex extends HexBase {
 }
@@ -21,0 +19,0 @@ declare global {

color-picker-hex.js

@@ -1,11 +0,2 @@
-import { ColorPicker } from './lib/components/color-picker.js';
-import { hexToHsv, hsvToHex } from './lib/utils/convert.js';
-import { equalHex } from './lib/utils/compare.js';
-const colorModel = {
-    defaultColor: '#000',
-    toHsv: hexToHsv,
-    fromHsv: hsvToHex,
-    equal: equalHex,
-    fromAttr: (color) => color
-};
+import { HexBase } from './lib/entrypoints/hex.js';
 /**
@@ -25,8 +16,5 @@ * A color picker custom element that uses HEX format.
  */
-export class ColorPickerHex extends ColorPicker {
-    get colorModel() {
-        return colorModel;
-    }
+export class ColorPickerHex extends HexBase {
 }
 customElements.define('color-picker-hex', ColorPickerHex);
 //# sourceMappingURL=color-picker-hex.js.map

color-picker-hsl-string.d.ts

@@ -1,3 +0,2 @@
-import type { ColorModel } from './lib/types';
-import { ColorPicker } from './lib/components/color-picker.js';
+import { HslStringBase } from './lib/entrypoints/hsl-string.js';
 /**
@@ -17,4 +16,3 @@ * A color picker custom element that uses HSL string format.
  */
-export declare class ColorPickerHslString extends ColorPicker<string> {
-    protected get colorModel(): ColorModel<string>;
+export declare class ColorPickerHslString extends HslStringBase {
 }
@@ -21,0 +19,0 @@ declare global {

color-picker-hsl-string.js

@@ -1,11 +0,2 @@
-import { ColorPicker } from './lib/components/color-picker.js';
-import { hslStringToHsv, hsvToHslString } from './lib/utils/convert.js';
-import { equalColorString } from './lib/utils/compare.js';
-const colorModel = {
-    defaultColor: 'hsl(0, 0%, 0%)',
-    toHsv: hslStringToHsv,
-    fromHsv: hsvToHslString,
-    equal: equalColorString,
-    fromAttr: (color) => color
-};
+import { HslStringBase } from './lib/entrypoints/hsl-string.js';
 /**
@@ -25,8 +16,5 @@ * A color picker custom element that uses HSL string format.
  */
-export class ColorPickerHslString extends ColorPicker {
-    get colorModel() {
-        return colorModel;
-    }
+export class ColorPickerHslString extends HslStringBase {
 }
 customElements.define('color-picker-hsl-string', ColorPickerHslString);
 //# sourceMappingURL=color-picker-hsl-string.js.map

color-picker-hsl.d.ts

@@ -1,4 +0,3 @@
-import type { ColorModel, HSL } from './lib/types';
-import { ColorPicker } from './lib/components/color-picker.js';
-export { HSL };
+import { HslBase } from './lib/entrypoints/hsl.js';
+export type { HSL } from './lib/types';
 /**
@@ -18,4 +17,3 @@ * A color picker custom element that uses HSL object format.
  */
-export declare class ColorPickerHsl extends ColorPicker<HSL> {
-    protected get colorModel(): ColorModel<HSL>;
+export declare class ColorPickerHsl extends HslBase {
 }
@@ -22,0 +20,0 @@ declare global {

color-picker-hsl.js

@@ -1,11 +0,2 @@
-import { ColorPicker } from './lib/components/color-picker.js';
-import { hslToHsv, hsvToHsl } from './lib/utils/convert.js';
-import { equalColorObjects } from './lib/utils/compare.js';
-const colorModel = {
-    defaultColor: { h: 0, s: 0, l: 0 },
-    toHsv: hslToHsv,
-    fromHsv: hsvToHsl,
-    equal: equalColorObjects,
-    fromAttr: (color) => JSON.parse(color)
-};
+import { HslBase } from './lib/entrypoints/hsl.js';
 /**
@@ -25,8 +16,5 @@ * A color picker custom element that uses HSL object format.
  */
-export class ColorPickerHsl extends ColorPicker {
-    get colorModel() {
-        return colorModel;
-    }
+export class ColorPickerHsl extends HslBase {
 }
 customElements.define('color-picker-hsl', ColorPickerHsl);
 //# sourceMappingURL=color-picker-hsl.js.map

color-picker-hsv.d.ts

@@ -1,4 +0,3 @@
-import type { ColorModel, HSV } from './lib/types';
-import { ColorPicker } from './lib/components/color-picker.js';
-export { HSV };
+import { HsvBase } from './lib/entrypoints/hsv.js';
+export type { HSV } from './lib/types';
 /**
@@ -18,4 +17,3 @@ * A color picker custom element that uses HSV object format.
  */
-export declare class ColorPickerHsv extends ColorPicker<HSV> {
-    protected get colorModel(): ColorModel<HSV>;
+export declare class ColorPickerHsv extends HsvBase {
 }
@@ -22,0 +20,0 @@ declare global {

color-picker-hsv.js

@@ -1,10 +0,2 @@
-import { ColorPicker } from './lib/components/color-picker.js';
-import { equalColorObjects } from './lib/utils/compare.js';
-const colorModel = {
-    defaultColor: { h: 0, s: 0, v: 0 },
-    toHsv: (hsv) => hsv,
-    fromHsv: (hsv) => hsv,
-    equal: equalColorObjects,
-    fromAttr: (color) => JSON.parse(color)
-};
+import { HsvBase } from './lib/entrypoints/hsv.js';
 /**
@@ -24,8 +16,5 @@ * A color picker custom element that uses HSV object format.
  */
-export class ColorPickerHsv extends ColorPicker {
-    get colorModel() {
-        return colorModel;
-    }
+export class ColorPickerHsv extends HsvBase {
 }
 customElements.define('color-picker-hsv', ColorPickerHsv);
 //# sourceMappingURL=color-picker-hsv.js.map

color-picker-rgb-string.d.ts

@@ -1,3 +0,2 @@
-import type { ColorModel } from './lib/types';
-import { ColorPicker } from './lib/components/color-picker.js';
+import { RgbStringBase } from './lib/entrypoints/rgb-string.js';
 /**
@@ -17,4 +16,3 @@ * A color picker custom element that uses RGB string format.
  */
-export declare class ColorPickerRgbString extends ColorPicker<string> {
-    protected get colorModel(): ColorModel<string>;
+export declare class ColorPickerRgbString extends RgbStringBase {
 }
@@ -21,0 +19,0 @@ declare global {

color-picker-rgb-string.js

@@ -1,11 +0,2 @@
-import { ColorPicker } from './lib/components/color-picker.js';
-import { hsvToRgbString, rgbStringToHsv } from './lib/utils/convert.js';
-import { equalColorString } from './lib/utils/compare.js';
-const colorModel = {
-    defaultColor: 'rgb(0, 0, 0)',
-    toHsv: rgbStringToHsv,
-    fromHsv: hsvToRgbString,
-    equal: equalColorString,
-    fromAttr: (color) => color
-};
+import { RgbStringBase } from './lib/entrypoints/rgb-string.js';
 /**
@@ -25,8 +16,5 @@ * A color picker custom element that uses RGB string format.
  */
-export class ColorPickerRgbString extends ColorPicker {
-    get colorModel() {
-        return colorModel;
-    }
+export class ColorPickerRgbString extends RgbStringBase {
 }
 customElements.define('color-picker-rgb-string', ColorPickerRgbString);
 //# sourceMappingURL=color-picker-rgb-string.js.map

color-picker-rgb.d.ts

@@ -1,4 +0,3 @@
-import type { ColorModel, RGB } from './lib/types';
-import { ColorPicker } from './lib/components/color-picker.js';
-export { RGB };
+import { RgbBase } from './lib/entrypoints/rgb.js';
+export type { RGB } from './lib/types';
 /**
@@ -18,4 +17,3 @@ * A color picker custom element that uses RGB object format.
  */
-export declare class ColorPickerRgb extends ColorPicker<RGB> {
-    protected get colorModel(): ColorModel<RGB>;
+export declare class ColorPickerRgb extends RgbBase {
 }
@@ -22,0 +20,0 @@ declare global {

color-picker-rgb.js

@@ -1,11 +0,2 @@
-import { ColorPicker } from './lib/components/color-picker.js';
-import { hsvToRgb, rgbToHsv } from './lib/utils/convert.js';
-import { equalColorObjects } from './lib/utils/compare.js';
-const colorModel = {
-    defaultColor: { r: 0, g: 0, b: 0 },
-    toHsv: rgbToHsv,
-    fromHsv: hsvToRgb,
-    equal: equalColorObjects,
-    fromAttr: (color) => JSON.parse(color)
-};
+import { RgbBase } from './lib/entrypoints/rgb.js';
 /**
@@ -25,8 +16,5 @@ * A color picker custom element that uses RGB object format.
  */
-export class ColorPickerRgb extends ColorPicker {
-    get colorModel() {
-        return colorModel;
-    }
+export class ColorPickerRgb extends RgbBase {
 }
 customElements.define('color-picker-rgb', ColorPickerRgb);
 //# sourceMappingURL=color-picker-rgb.js.map

custom-elements.json

@@ -267,4 +267,30 @@ {
       ]
+    },
+    {
+      "name": "hex-input",
+      "path": "./src/hex-input.ts",
+      "description": "A color picker custom element that uses HEX format.",
+      "attributes": [
+        {
+          "name": "color",
+          "description": "Color in HEX format.",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "color",
+          "attribute": "color",
+          "description": "Color in HEX format.",
+          "type": "string"
+        }
+      ],
+      "events": [
+        {
+          "name": "color-changed",
+          "description": "Event fired when color is changed."
+        }
+      ]
     }
   ]
 }

hex-input.d.ts

@@ -0,1 +1,2 @@
+import { HexInputBase } from './lib/entrypoints/hex-input.js';
 /**
@@ -10,13 +11,3 @@ * A color picker custom element that uses HEX format.
  */
-export declare class HexInput extends HTMLElement {
-    static get observedAttributes(): string[];
-    private _color;
-    private _oldColor;
-    private _input;
-    get color(): string;
-    set color(hex: string);
-    constructor();
-    connectedCallback(): void;
-    handleEvent(event: Event): void;
-    attributeChangedCallback(_attr: string, _oldVal: string, newVal: string): void;
+export declare class HexInput extends HexInputBase {
 }
@@ -23,0 +14,0 @@ declare global {

hex-input.js

@@ -1,4 +0,2 @@
-import { validHex } from './lib/utils/validate.js';
-// Escapes all non-hexadecimal characters including "#"
-const escape = (hex) => hex.replace(/([^0-9A-F]+)/gi, '');
+import { HexInputBase } from './lib/entrypoints/hex-input.js';
 /**
@@ -13,64 +11,5 @@ * A color picker custom element that uses HEX format.
  */
-export class HexInput extends HTMLElement {
-    constructor() {
-        super();
-        let input = this.querySelector('input');
-        if (!input) {
-            input = document.createElement('input');
-            input.setAttribute('spellcheck', 'false');
-            input.setAttribute('maxlength', '6');
-            this.appendChild(input);
-        }
-        input.addEventListener('input', this);
-        input.addEventListener('blur', this);
-        this._input = input;
-    }
-    static get observedAttributes() {
-        return ['color'];
-    }
-    get color() {
-        return this._color;
-    }
-    set color(hex) {
-        this._color = hex;
-        this._input.value = hex == null || hex == '' ? '' : escape(hex);
-    }
-    connectedCallback() {
-        // A user may set a property on an _instance_ of an element,
-        // before its prototype has been connected to this class.
-        // If so, we need to run it through the proper class setter.
-        if (this.hasOwnProperty('color')) {
-            const value = this.color;
-            delete this['color'];
-            this.color = value;
-        }
-        else if (this.color == null) {
-            this.color = this.getAttribute('color') || '';
-        }
-    }
-    handleEvent(event) {
-        const target = event.target;
-        const { value } = target;
-        switch (event.type) {
-            case 'input':
-                const hex = escape(value);
-                this._oldColor = this.color;
-                if (validHex(hex)) {
-                    this.color = hex;
-                    this.dispatchEvent(new CustomEvent('color-changed', { detail: { value: '#' + hex } }));
-                }
-                break;
-            case 'blur':
-                if (!validHex(value)) {
-                    this.color = this._oldColor;
-                }
-        }
-    }
-    attributeChangedCallback(_attr, _oldVal, newVal) {
-        if (this.color !== newVal) {
-            this.color = newVal;
-        }
-    }
+export class HexInput extends HexInputBase {
 }
 customElements.define('hex-input', HexInput);
 //# sourceMappingURL=hex-input.js.map

lib/components/color-picker.d.ts

@@ -15,3 +15,2 @@ import type { AnyColor, ColorModel } from '../types';
     private [$color];
-    private _ready;
     get color(): C;
@@ -18,0 +17,0 @@ set color(color: C);

lib/components/color-picker.js

@@ -8,4 +8,4 @@ import { equalColorObjects } from '../utils/compare.js';
 <style>${styles}</style>
-<color-saturation part="saturation" exportparts="pointer: saturation-pointer"></color-saturation>
-<color-hue part="hue" exportparts="pointer: hue-pointer"></color-hue>
+<vc-saturation part="saturation" exportparts="pointer: saturation-pointer"></vc-saturation>
+<vc-hue part="hue" exportparts="pointer: hue-pointer"></vc-hue>
 `);
@@ -21,6 +21,2 @@ const $color = Symbol('color');
         root.addEventListener('move', this);
-        this._ready = Promise.all([
-            customElements.whenDefined('color-hue'),
-            customElements.whenDefined('color-saturation')
-        ]);
         this[$s] = root.children[1];
@@ -67,13 +63,10 @@ this[$h] = root.children[2];
     }
-    async _setProps(color, hsv) {
+    _setProps(color, hsv) {
         this[$hsv] = hsv;
         this[$color] = color;
-        this.dispatchEvent(new CustomEvent('color-changed', { detail: { value: color } }));
-        // Wait for custom elements to upgrade before setting properties.
-        // Otherwise these would shadow the accessors and break.
-        await this._ready;
         this[$s].hsv = hsv;
         this[$h].hue = hsv.h;
+        this.dispatchEvent(new CustomEvent('color-changed', { detail: { value: color } }));
     }
 }
 //# sourceMappingURL=color-picker.js.map

lib/components/hue.d.ts

 import { Interactive, Interaction } from './interactive.js';
-export declare class ColorHue extends Interactive {
+export declare class Hue extends Interactive {
     constructor();
+    connectedCallback(): void;
     set hue(h: number);
@@ -5,0 +6,0 @@ getMove(interaction: Interaction): Record<string, number>;

lib/components/hue.js

@@ -6,3 +6,3 @@ import { Interactive } from './interactive.js';
 const template = createTemplate(`<style>${styles}</style>`);
-export class ColorHue extends Interactive {
+export class Hue extends Interactive {
     constructor() {
@@ -12,2 +12,9 @@ super();
     }
+    connectedCallback() {
+        if (this.hasOwnProperty('hue')) {
+            const value = this.hue;
+            delete this['hue'];
+            this.hue = value;
+        }
+    }
     set hue(h) {
@@ -23,3 +30,3 @@ this.setStyles({
 }
-customElements.define('color-hue', ColorHue);
+customElements.define('vc-hue', Hue);
 //# sourceMappingURL=hue.js.map

lib/components/saturation.d.ts

 import { Interactive, Interaction } from './interactive.js';
 import type { HSV } from '../types';
-export declare class ColorSaturation extends Interactive {
+export declare class Saturation extends Interactive {
     constructor();
+    connectedCallback(): void;
     set hsv(hsv: HSV);
@@ -6,0 +7,0 @@ getMove(interaction: Interaction): Record<string, number>;

lib/components/saturation.js

@@ -6,3 +6,3 @@ import { Interactive } from './interactive.js';
 const template = createTemplate(`<style>${styles}</style>`);
-export class ColorSaturation extends Interactive {
+export class Saturation extends Interactive {
     constructor() {
@@ -12,2 +12,9 @@ super();
     }
+    connectedCallback() {
+        if (this.hasOwnProperty('hsv')) {
+            const value = this.hsv;
+            delete this['hsv'];
+            this.hsv = value;
+        }
+    }
     set hsv(hsv) {
@@ -25,3 +32,3 @@ this.style.backgroundColor = hsvToHslString({ h: hsv.h, s: 100, v: 100 });
 }
-customElements.define('color-saturation', ColorSaturation);
+customElements.define('vc-saturation', Saturation);
 //# sourceMappingURL=saturation.js.map

package.json

 {
   "name": "vanilla-colorful",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A tiny framework agnostic color picker element for modern web apps",
@@ -16,2 +16,3 @@ "author": "Serhii Kulykov <[e-mail]>",
   },
+  "homepage": "https://web-padawan.github.io/vanilla-colorful/",
   "files": [
@@ -33,3 +34,3 @@ "ACKNOWLEDGMENTS",
   "scripts": {
-    "analyze": "wca analyze src/color-*.ts --format json --outFile custom-elements.json",
+    "analyze": "wca analyze src/*.ts --format json --outFile custom-elements.json",
     "build": "npm run styles && tsc",
@@ -41,2 +42,3 @@ "deploy": "npm run dist && gh-pages -d dist",
     "prepublishOnly": "npm run build && npm run analyze",
+    "release": "standard-version",
     "serve": "web-dev-server --node-resolve --app-index demo/index.html --open",
@@ -119,2 +121,3 @@ "size": "npm run build && size-limit",
     "size-limit": "^4.5.7",
+    "standard-version": "^9.0.0",
     "throttle-debounce": "^2.3.0",
@@ -121,0 +124,0 @@ "tsc-watch": "^4.2.9",

README.md

@@ -8,2 +8,14 @@ <div align="center">
 <div align="center">
+  <a href="https://npmjs.org/package/vanilla-colorful">
+    <img alt="npm" src="https://img.shields.io/npm/v/vanilla-colorful.svg" />
+  </a>
+ <a href="https://npmjs.org/package/vanilla-colorful">
+    <img alt="no dependencies" src="https://img.shields.io/david/web-padawan/vanilla-colorful.svg" />
+  </a>
+  <a href="https://bundlephobia.com/result?p=vanilla-colorful">
+    <img alt="gzip size" src="https://badgen.net/bundlephobia/minzip/vanilla-colorful" />
+  </a>
+</div>
+
+<div align="center">
   <strong>vanilla-colorful</strong> is a port of <a href="https://github.com/omgovich/react-colorful">react colorful</a> to vanilla Custom Elements.
@@ -25,2 +37,7 @@ </div>
 - [Website](https://web-padawan.github.io/vanilla-colorful/)
+- [Angular example](https://components.studio/edit/MGLIUt626MIwrLZ1c2E8)
+- [LitElement example](https://components.studio/edit/5F8uPtFM41MCEQBsDbIF)
+- [React example](https://components.studio/edit/dXQXpT6ggwihpoxPqioI)
+- [Svelte example](https://components.studio/edit/CpWY9ofL287dfvJaQJIA)
+- [Vue example](https://components.studio/edit/xACXVNs47cgdWFSafS70)
 
@@ -33,2 +50,16 @@ ## Install
 
+Or use one of the following content delivery networks:
+
+[unpkg.com CDN](https://unpkg.com/vanilla-colorful?module):
+
+```html
+<script type="module" src="https://unpkg.com/vanilla-colorful?module"></script>
+```
+
+[Skypack CDN](https://cdn.skypack.dev/vanilla-colorful):
+
+```html
+<script type="module" src="https://cdn.skypack.dev/vanilla-colorful"></script>
+```
+
 ## Usage
@@ -42,3 +73,3 @@
   const picker = document.querySelector('color-picker-gex');
-  picker.addEventListener('color-changed', event => {
+  picker.addEventListener('color-changed', (event) => {
     const newColor = event.detail.value;
@@ -60,4 +91,4 @@ });
 | File to import                 | HTML element                | Value example                |
-| -------------------------------|-----------------------------| ---------------------------- |
-| `"color-picker-rgb.js"`        | `<color-picker-rgb>`        | `{ r: 255, g: 255, b: 255 }` |
+| ------------------------------ | --------------------------- | ---------------------------- |
+| `"color-picker-rgb.js"`        | `<color-picker-rgb>`        | `{ r: 255, g: 255, b: 255 }` |
 | `"color-picker-rgb-string.js"` | `<color-picker-rgb-string>` | `"rgb(255, 255, 255)"`       |
@@ -73,3 +104,3 @@ | `"color-picker-hsl.js"`        | `<color-picker-hsl>`        | `{ h: 0, s: 0, l: 100 }`     |
 <script type="module">
-  import 'vanilla-colorful/color-picker-rgb.js;
+  import 'vanilla-colorful/color-picker-rgb.js';
 
@@ -121,6 +152,6 @@ const picker = document.querySelector('color-picker-rgb');
 <script type="module">
-  import 'vanilla-colorful/hex-input.js;
+  import 'vanilla-colorful/hex-input.js';
 
   const input = document.querySelector('hex-input');
-  input.addEventListener('color-changed', event => {
+  input.addEventListener('color-changed', (event) => {
     const newColor = event.detail.value;
@@ -134,2 +165,13 @@ });
 
+## Base classes
+
+**vanilla-colorful** provides a set of base classes that can be imported without registering custom
+elements. This is useful if you want to create your own color picker with a different tag name.
+
+```js
+import { RgbBase } from 'vanilla-colorful/lib/entrypoints/rgb.js';
+
+customElements.define('custom-color-picker', class extends RgbBase {});
+```
+
 ## TypeScript support
@@ -147,3 +189,3 @@
 ```ts
-import type { HSL }  from 'vanilla-colorful/color-picker-hsl';
+import type { HSL } from 'vanilla-colorful/color-picker-hsl';
 
@@ -156,2 +198,3 @@ const myHslValue: HSL = { h: 0, s: 0, l: 0 };
 Studio Code, so you can benefit from type checking in lit-html templates.
+
 </details>
@@ -158,0 +201,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

114235

increased by10.2%

Number of package files

114

increased by34.12%

Lines of code

1199

increased by7.25%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

207

increased by26.22%

Worsened metrics

Dev dependency count

32

increased by3.23%

No dependency changes