vanilla-colorful - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

CHANGELOG.md

@@ -5,2 +5,13 @@ # Changelog
 
+## [0.2.0](https://github.com/web-padawan/vanilla-colorful/compare/v0.1.2...v0.2.0) (2020-09-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* rename components and types (#5)
+
+### Internal Changes
+
+* rename components and types ([#5](https://github.com/web-padawan/vanilla-colorful/issues/5)) ([52652e9](https://github.com/web-padawan/vanilla-colorful/commit/52652e94b4c7fa5bf1a0ec85b727c6487b716122))
+
 ### [0.1.2](https://github.com/web-padawan/vanilla-colorful/compare/v0.1.1...v0.1.2) (2020-09-05)
@@ -7,0 +18,0 @@

custom-elements.json

@@ -5,4 +5,4 @@ {
     {
-      "name": "color-picker-hex",
-      "path": "./src/color-picker-hex.ts",
+      "name": "hex-color-picker",
+      "path": "./src/hex-color-picker.ts",
       "description": "A color picker custom element that uses HEX format.",
@@ -50,9 +50,9 @@ "attributes": [
     {
-      "name": "color-picker-hsl-string",
-      "path": "./src/color-picker-hsl-string.ts",
-      "description": "A color picker custom element that uses HSL string format.",
+      "name": "hex-input",
+      "path": "./src/hex-input.ts",
+      "description": "A color picker custom element that uses HEX format.",
       "attributes": [
         {
           "name": "color",
-          "description": "Selected color in HSL string format.",
+          "description": "Color in HEX format.",
           "type": "string"
@@ -65,3 +65,3 @@ }
           "attribute": "color",
-          "description": "Selected color in HSL string format.",
+          "description": "Color in HEX format.",
           "type": "string"
@@ -73,27 +73,9 @@ }
           "name": "color-changed",
-          "description": "Event fired when color property changes."
+          "description": "Event fired when color is changed."
         }
-      ],
-      "cssParts": [
-        {
-          "name": "hue",
-          "description": "A hue selector container."
-        },
-        {
-          "name": "saturation",
-          "description": "A saturation selector container"
-        },
-        {
-          "name": "hue-pointer",
-          "description": "A hue pointer element."
-        },
-        {
-          "name": "saturation-pointer",
-          "description": "A saturation pointer element."
-        }
       ]
     },
     {
-      "name": "color-picker-hsl",
-      "path": "./src/color-picker-hsl.ts",
+      "name": "hsl-color-picker",
+      "path": "./src/hsl-color-picker.ts",
       "description": "A color picker custom element that uses HSL object format.",
@@ -104,3 +86,3 @@ "attributes": [
           "description": "Selected color in HSL object format.",
-          "type": "HSL"
+          "type": "HslColor"
         }
@@ -113,3 +95,3 @@ ],
           "description": "Selected color in HSL object format.",
-          "type": "HSL"
+          "type": "HslColor"
         }
@@ -143,10 +125,10 @@ ],
     {
-      "name": "color-picker-hsv",
-      "path": "./src/color-picker-hsv.ts",
-      "description": "A color picker custom element that uses HSV object format.",
+      "name": "hsl-string-color-picker",
+      "path": "./src/hsl-string-color-picker.ts",
+      "description": "A color picker custom element that uses HSL string format.",
       "attributes": [
         {
           "name": "color",
-          "description": "Selected color in HSV object format.",
-          "type": "HSV"
+          "description": "Selected color in HSL string format.",
+          "type": "string"
         }
@@ -158,4 +140,4 @@ ],
           "attribute": "color",
-          "description": "Selected color in HSV object format.",
-          "type": "HSV"
+          "description": "Selected color in HSL string format.",
+          "type": "string"
         }
@@ -189,10 +171,10 @@ ],
     {
-      "name": "color-picker-rgb-string",
-      "path": "./src/color-picker-rgb-string.ts",
-      "description": "A color picker custom element that uses RGB string format.",
+      "name": "hsv-color-picker",
+      "path": "./src/hsv-color-picker.ts",
+      "description": "A color picker custom element that uses HSV object format.",
       "attributes": [
         {
           "name": "color",
-          "description": "Selected color in RGB string format.",
-          "type": "string"
+          "description": "Selected color in HSV object format.",
+          "type": "HsvColor"
         }
@@ -204,4 +186,4 @@ ],
           "attribute": "color",
-          "description": "Selected color in RGB string format.",
-          "type": "string"
+          "description": "Selected color in HSV object format.",
+          "type": "HsvColor"
         }
@@ -235,4 +217,4 @@ ],
     {
-      "name": "color-picker-rgb",
-      "path": "./src/color-picker-rgb.ts",
+      "name": "rgb-color-picker",
+      "path": "./src/rgb-color-picker.ts",
       "description": "A color picker custom element that uses RGB object format.",
@@ -243,3 +225,3 @@ "attributes": [
           "description": "Selected color in RGB object format.",
-          "type": "RGB"
+          "type": "RgbColor"
         }
@@ -252,3 +234,3 @@ ],
           "description": "Selected color in RGB object format.",
-          "type": "RGB"
+          "type": "RgbColor"
         }
@@ -282,9 +264,9 @@ ],
     {
-      "name": "hex-input",
-      "path": "./src/hex-input.ts",
-      "description": "A color picker custom element that uses HEX format.",
+      "name": "rgb-string-color-picker",
+      "path": "./src/rgb-string-color-picker.ts",
+      "description": "A color picker custom element that uses RGB string format.",
       "attributes": [
         {
           "name": "color",
-          "description": "Color in HEX format.",
+          "description": "Selected color in RGB string format.",
           "type": "string"
@@ -297,3 +279,3 @@ }
           "attribute": "color",
-          "description": "Color in HEX format.",
+          "description": "Selected color in RGB string format.",
           "type": "string"
@@ -305,4 +287,22 @@ }
           "name": "color-changed",
-          "description": "Event fired when color is changed."
+          "description": "Event fired when color property changes."
         }
+      ],
+      "cssParts": [
+        {
+          "name": "hue",
+          "description": "A hue selector container."
+        },
+        {
+          "name": "saturation",
+          "description": "A saturation selector container"
+        },
+        {
+          "name": "hue-pointer",
+          "description": "A hue pointer element."
+        },
+        {
+          "name": "saturation-pointer",
+          "description": "A saturation pointer element."
+        }
       ]
@@ -309,0 +309,0 @@ }

lib/components/saturation.d.ts

 import { Interactive, Interaction } from './interactive.js';
-import type { HSV } from '../types';
+import type { HsvColor } from '../types';
 export declare class Saturation extends Interactive {
     constructor();
     connectedCallback(): void;
-    set hsv(hsv: HSV);
+    set hsv(hsv: HsvColor);
     getMove(interaction: Interaction): Record<string, number>;
 }
 //# sourceMappingURL=saturation.d.ts.map

lib/entrypoints/hsl.d.ts

@@ -1,6 +0,6 @@
-import type { ColorModel, HSL } from '../types';
+import type { ColorModel, HslColor } from '../types';
 import { ColorPicker } from '../components/color-picker.js';
-export declare class HslBase extends ColorPicker<HSL> {
-    protected get colorModel(): ColorModel<HSL>;
+export declare class HslBase extends ColorPicker<HslColor> {
+    protected get colorModel(): ColorModel<HslColor>;
 }
 //# sourceMappingURL=hsl.d.ts.map

lib/entrypoints/hsv.d.ts

@@ -1,6 +0,6 @@
-import type { ColorModel, HSV } from '../types';
+import type { ColorModel, HsvColor } from '../types';
 import { ColorPicker } from '../components/color-picker.js';
-export declare class HsvBase extends ColorPicker<HSV> {
-    protected get colorModel(): ColorModel<HSV>;
+export declare class HsvBase extends ColorPicker<HsvColor> {
+    protected get colorModel(): ColorModel<HsvColor>;
 }
 //# sourceMappingURL=hsv.d.ts.map

lib/entrypoints/rgb.d.ts

@@ -1,6 +0,6 @@
-import type { ColorModel, RGB } from '../types';
+import type { ColorModel, RgbColor } from '../types';
 import { ColorPicker } from '../components/color-picker.js';
-export declare class RgbBase extends ColorPicker<RGB> {
-    protected get colorModel(): ColorModel<RGB>;
+export declare class RgbBase extends ColorPicker<RgbColor> {
+    protected get colorModel(): ColorModel<RgbColor>;
 }
 //# sourceMappingURL=rgb.d.ts.map

lib/types.d.ts

@@ -1,2 +0,2 @@
-export interface RGB {
+export interface RgbColor {
     r: number;
@@ -6,3 +6,3 @@ g: number;
 }
-export interface HSL {
+export interface HslColor {
     h: number;
@@ -12,3 +12,3 @@ s: number;
 }
-export interface HSV {
+export interface HsvColor {
     h: number;
@@ -18,7 +18,7 @@ s: number;
 }
-export declare type AnyColor = string | HSL | HSV | RGB;
+export declare type AnyColor = string | HslColor | HsvColor | RgbColor;
 export interface ColorModel<T extends AnyColor> {
     defaultColor: T;
-    toHsv: (color: T) => HSV;
-    fromHsv: (hsv: HSV) => T;
+    toHsv: (color: T) => HsvColor;
+    fromHsv: (hsv: HsvColor) => T;
     equal: (first: T, second: T) => boolean;
@@ -25,0 +25,0 @@ fromAttr: (attr: string) => T;

lib/utils/compare.d.ts

@@ -1,5 +0,5 @@
-import type { HSL, HSV, RGB } from '../types';
-export declare const equalColorObjects: (first: HSL | HSV | RGB, second: HSL | HSV | RGB) => boolean;
+import type { HslColor, HsvColor, RgbColor } from '../types';
+export declare const equalColorObjects: (first: HslColor | HsvColor | RgbColor, second: HslColor | HsvColor | RgbColor) => boolean;
 export declare const equalColorString: (first: string, second: string) => boolean;
 export declare const equalHex: (first: string, second: string) => boolean;
 //# sourceMappingURL=compare.d.ts.map

lib/utils/convert.d.ts

@@ -1,14 +0,14 @@
-import type { HSL, HSV, RGB } from '../types';
-export declare const hexToHsv: (hex: string) => HSV;
-export declare const hexToRgb: (hex: string) => RGB;
-export declare const hslStringToHsv: (hslString: string) => HSV;
-export declare const hslToHsv: ({ h, s, l }: HSL) => HSV;
-export declare const hsvToHex: (hsv: HSV) => string;
-export declare const hsvToHsl: ({ h, s, v }: HSV) => HSL;
-export declare const hsvToHslString: (hsv: HSV) => string;
-export declare const hsvToRgb: ({ h, s, v }: HSV) => RGB;
-export declare const hsvToRgbString: (hsv: HSV) => string;
-export declare const rgbStringToHsv: (rgbString: string) => HSV;
-export declare const rgbToHex: ({ r, g, b }: RGB) => string;
-export declare const rgbToHsv: ({ r, g, b }: RGB) => HSV;
+import type { HslColor, HsvColor, RgbColor } from '../types';
+export declare const hexToHsv: (hex: string) => HsvColor;
+export declare const hexToRgb: (hex: string) => RgbColor;
+export declare const hslStringToHsv: (hslString: string) => HsvColor;
+export declare const hslToHsv: ({ h, s, l }: HslColor) => HsvColor;
+export declare const hsvToHex: (hsv: HsvColor) => string;
+export declare const hsvToHsl: ({ h, s, v }: HsvColor) => HslColor;
+export declare const hsvToHslString: (hsv: HsvColor) => string;
+export declare const hsvToRgb: ({ h, s, v }: HsvColor) => RgbColor;
+export declare const hsvToRgbString: (hsv: HsvColor) => string;
+export declare const rgbStringToHsv: (rgbString: string) => HsvColor;
+export declare const rgbToHex: ({ r, g, b }: RgbColor) => string;
+export declare const rgbToHsv: ({ r, g, b }: RgbColor) => HsvColor;
 //# sourceMappingURL=convert.d.ts.map

package.json

 {
   "name": "vanilla-colorful",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "A tiny framework agnostic color picker element for modern web apps",
   "author": "Serhii Kulykov <[e-mail]>",
   "license": "MIT",
-  "main": "color-picker-hex.js",
-  "module": "color-picker-hex.js",
+  "main": "hex-color-picker.js",
+  "module": "hex-color-picker.js",
   "repository": {
@@ -22,10 +22,18 @@ "type": "git",
     "/lib",
-    "/color-*.d.ts",
-    "/color-*.d.ts.map",
-    "/color-*.js",
-    "/color-*.js.map",
-    "/hex-input.d.ts",
-    "/hex-input.d.ts.map",
-    "/hex-input.js",
-    "/hex-input.js.map",
+    "/hex-*.d.ts",
+    "/hex-*.d.ts.map",
+    "/hex-*.js",
+    "/hex-*.js.map",
+    "/hsl-*.d.ts",
+    "/hsl-*.d.ts.map",
+    "/hsl-*.js",
+    "/hsl-*.js.map",
+    "/hsv-*.d.ts",
+    "/hsv-*.d.ts.map",
+    "/hsv-*.js",
+    "/hsv-*.js.map",
+    "/rgb-*.d.ts",
+    "/rgb-*.d.ts.map",
+    "/rgb-*.js",
+    "/rgb-*.js.map",
     "custom-elements.json"
@@ -62,23 +70,23 @@ ],
     {
-      "path": "color-picker-hex.js",
+      "path": "hex-color-picker.js",
       "limit": "2.2 KB"
     },
     {
-      "path": "color-picker-hsl.js",
+      "path": "hsl-color-picker.js",
       "limit": "2 KB"
     },
     {
-      "path": "color-picker-hsl-string.js",
+      "path": "hsl-string-color-picker.js",
       "limit": "2 KB"
     },
     {
-      "path": "color-picker-hsv.js",
+      "path": "hsv-color-picker.js",
       "limit": "2 KB"
     },
     {
-      "path": "color-picker-rgb.js",
+      "path": "rgb-color-picker.js",
       "limit": "2.1 KB"
     },
     {
-      "path": "color-picker-rgb-string.js",
+      "path": "rgb-string-color-picker.js",
       "limit": "2.1 KB"
@@ -85,0 +93,0 @@ },

README.md

@@ -65,7 +65,7 @@ <div align="center">
 ```html
-<color-picker-hex color="#1e88e5"></color-picker-hex>
+<hex-color-picker color="#1e88e5"></hex-color-picker>
 <script type="module">
   import 'vanilla-colorful';
 
-  const picker = document.querySelector('color-picker-gex');
+  const picker = document.querySelector('hex-color-picker');
   picker.addEventListener('color-changed', (event) => {
@@ -89,7 +89,8 @@ const newColor = event.detail.value;
 | ------------------------------ | --------------------------- | ---------------------------- |
-| `"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)"`       |
-| `"color-picker-hsl.js"`        | `<color-picker-hsl>`        | `{ h: 0, s: 0, l: 100 }`     |
-| `"color-picker-hsl-string.js"` | `<color-picker-hsl-string>` | `"hsl(0, 0%, 100%)"`         |
-| `"color-picker-hsv.js"`        | `<color-picker-hsv>`        | `{ h: 0, s: 0, v: 100 }`     |
+| `"hex-color-picker.js"`        | `<hex-color-picker>`        | `"#ffffff"`                  |
+| `"hsl-color-picker.js"`        | `<hsl-color-picker>`        | `{ h: 0, s: 0, l: 100 }`     |
+| `"hsl-string-color-picker.js"` | `<hsl-string-color-picker>` | `"hsl(0, 0%, 100%)"`         |
+| `"hsv-color-picker.js"`        | `<hsv-color-picker>`        | `{ h: 0, s: 0, v: 100 }`     |
+| `"rgb-color-picker.js"`        | `<rgb-color-picker>`        | `{ r: 255, g: 255, b: 255 }` |
+| `"rgb-string-color-picker.js"` | `<rgb-string-color-picker>` | `"rgb(255, 255, 255)"`       |
 
@@ -99,7 +100,7 @@ #### Code example
 ```html
-<color-picker-rgb></color-picker-rgb>
+<rgb-color-picker></rgb-color-picker>
 <script type="module">
-  import 'vanilla-colorful/color-picker-rgb.js';
+  import 'vanilla-colorful/rgb-color-picker.js';
 
-  const picker = document.querySelector('color-picker-rgb');
+  const picker = document.querySelector('rgb-color-picker');
   picker.color = { r: 50, g: 100, b: 150 };
@@ -117,7 +118,7 @@ </script>
 ```css
-color-picker-hex {
+hex-color-picker {
   height: 250px;
 }
 
-color-picker-hex::part(saturation) {
+hex-color-picker::part(saturation) {
   bottom: 30px;
@@ -127,3 +128,3 @@ border-radius: 3px 3px 0 0;
 
-color-picker-hex::part(hue) {
+hex-color-picker::part(hue) {
   height: 30px;
@@ -133,7 +134,7 @@ border-radius: 0 0 3px 3px;
 
-color-picker-hex::part(saturation-pointer) {
+hex-color-picker::part(saturation-pointer) {
   border-radius: 5px;
 }
 
-color-picker-hex::part(hue-pointer) {
+hex-color-picker::part(hue-pointer) {
   border-radius: 2px;
@@ -187,5 +188,5 @@ width: 15px;
 ```ts
-import type { HSL } from 'vanilla-colorful/color-picker-hsl';
+import type { HslColor } from 'vanilla-colorful/hsl-color-picker';
 
-const myHslValue: HSL = { h: 0, s: 0, l: 0 };
+const myHslValue: HslColor = { h: 0, s: 0, l: 0 };
 ```
@@ -192,0 +193,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

Improved metrics

Total package byte prevSize

115659

increased by1.1%

Number of lines in readme file

208

increased by0.48%

No dependency changes