vanilla-colorful - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+### [0.2.1](https://github.com/web-padawan/vanilla-colorful/compare/v0.2.0...v0.2.1) (2020-09-11)
+
+
+### Bug Fixes
+
+* add hidden attribute styles ([0c490dd](https://github.com/web-padawan/vanilla-colorful/commit/0c490dd774279dd239544d5723a9ba5c5413331c))
+
 ## [0.2.0](https://github.com/web-padawan/vanilla-colorful/compare/v0.1.2...v0.2.0) (2020-09-08)
@@ -7,0 +14,0 @@

custom-elements.json

@@ -6,3 +6,3 @@ {
       "name": "hex-color-picker",
-      "path": "./src/hex-color-picker.ts",
+      "path": "./hex-color-picker.js",
       "description": "A color picker custom element that uses HEX format.",
@@ -51,3 +51,3 @@ "attributes": [
       "name": "hex-input",
-      "path": "./src/hex-input.ts",
+      "path": "./hex-input.js",
       "description": "A color picker custom element that uses HEX format.",
@@ -78,15 +78,7 @@ "attributes": [
       "name": "hsl-color-picker",
-      "path": "./src/hsl-color-picker.ts",
+      "path": "./hsl-color-picker.js",
       "description": "A color picker custom element that uses HSL object format.",
-      "attributes": [
-        {
-          "name": "color",
-          "description": "Selected color in HSL object format.",
-          "type": "HslColor"
-        }
-      ],
       "properties": [
         {
           "name": "color",
-          "attribute": "color",
           "description": "Selected color in HSL object format.",
@@ -123,3 +115,3 @@ "type": "HslColor"
       "name": "hsl-string-color-picker",
-      "path": "./src/hsl-string-color-picker.ts",
+      "path": "./hsl-string-color-picker.js",
       "description": "A color picker custom element that uses HSL string format.",
@@ -168,15 +160,7 @@ "attributes": [
       "name": "hsv-color-picker",
-      "path": "./src/hsv-color-picker.ts",
+      "path": "./hsv-color-picker.js",
       "description": "A color picker custom element that uses HSV object format.",
-      "attributes": [
-        {
-          "name": "color",
-          "description": "Selected color in HSV object format.",
-          "type": "HsvColor"
-        }
-      ],
       "properties": [
         {
           "name": "color",
-          "attribute": "color",
           "description": "Selected color in HSV object format.",
@@ -213,15 +197,7 @@ "type": "HsvColor"
       "name": "rgb-color-picker",
-      "path": "./src/rgb-color-picker.ts",
+      "path": "./rgb-color-picker.js",
       "description": "A color picker custom element that uses RGB object format.",
-      "attributes": [
-        {
-          "name": "color",
-          "description": "Selected color in RGB object format.",
-          "type": "RgbColor"
-        }
-      ],
       "properties": [
         {
           "name": "color",
-          "attribute": "color",
           "description": "Selected color in RGB object format.",
@@ -258,3 +234,3 @@ "type": "RgbColor"
       "name": "rgb-string-color-picker",
-      "path": "./src/rgb-string-color-picker.ts",
+      "path": "./rgb-string-color-picker.js",
       "description": "A color picker custom element that uses RGB string format.",
@@ -261,0 +237,0 @@ "attributes": [

hex-color-picker.d.ts

@@ -8,2 +8,3 @@ import { HexBase } from './lib/entrypoints/hex.js';
  * @prop {string} color - Selected color in HEX format.
+ * @attr {string} color - Selected color in HEX format.
  *
@@ -10,0 +11,0 @@ * @fires color-changed - Event fired when color property changes.

hex-color-picker.js

@@ -8,2 +8,3 @@ import { HexBase } from './lib/entrypoints/hex.js';
  * @prop {string} color - Selected color in HEX format.
+ * @attr {string} color - Selected color in HEX format.
  *
@@ -10,0 +11,0 @@ * @fires color-changed - Event fired when color property changes.

hex-input.d.ts

@@ -8,2 +8,3 @@ import { HexInputBase } from './lib/entrypoints/hex-input.js';
  * @prop {string} color - Color in HEX format.
+ * @attr {string} color - Selected color in HEX format.
  *
@@ -10,0 +11,0 @@ * @fires color-changed - Event fired when color is changed.

hex-input.js

@@ -8,2 +8,3 @@ import { HexInputBase } from './lib/entrypoints/hex-input.js';
  * @prop {string} color - Color in HEX format.
+ * @attr {string} color - Selected color in HEX format.
  *
@@ -10,0 +11,0 @@ * @fires color-changed - Event fired when color is changed.

hsl-string-color-picker.d.ts

@@ -8,2 +8,3 @@ import { HslStringBase } from './lib/entrypoints/hsl-string.js';
  * @prop {string} color - Selected color in HSL string format.
+ * @attr {string} color - Selected color in HSL string format.
  *
@@ -10,0 +11,0 @@ * @fires color-changed - Event fired when color property changes.

hsl-string-color-picker.js

@@ -8,2 +8,3 @@ import { HslStringBase } from './lib/entrypoints/hsl-string.js';
  * @prop {string} color - Selected color in HSL string format.
+ * @attr {string} color - Selected color in HSL string format.
  *
@@ -10,0 +11,0 @@ * @fires color-changed - Event fired when color property changes.

lib/styles/color-picker.d.ts

@@ -1,3 +0,3 @@
-declare const _default: ":host{display:block;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}";
+declare const _default: ":host{display:block;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none !important}";
 export default _default;
 //# sourceMappingURL=color-picker.d.ts.map

lib/styles/color-picker.js

@@ -1,2 +0,2 @@
-export default `:host{display:block;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}`;
+export default `:host{display:block;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none !important}`;
 //# sourceMappingURL=color-picker.js.map

package.json

 {
   "name": "vanilla-colorful",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A tiny framework agnostic color picker element for modern web apps",
@@ -41,3 +41,3 @@ "author": "Serhii Kulykov <[e-mail]>",
   "scripts": {
-    "analyze": "wca analyze src/*.ts --format json --outFile custom-elements.json",
+    "analyze": "wca analyze hex-*.js hsl-*.js hsv-*.js rgb-*.js --format json --outFile custom-elements.json",
     "build": "npm run styles && tsc",
@@ -91,3 +91,3 @@ "deploy": "npm run dist && gh-pages -d dist",
       "path": "rgb-string-color-picker.js",
-      "limit": "2.1 KB"
+      "limit": "2.2 KB"
     },
@@ -94,0 +94,0 @@ {

README.md

@@ -20,3 +20,3 @@ <div align="center">
 <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.
+  <strong>vanilla-colorful</strong> is a port of <a href="https://github.com/omgovich/react-colorful">react-colorful</a> to vanilla Custom Elements.
 </div>
@@ -179,4 +179,4 @@
 While not only typing its own class methods and variables, it can also help you type yours. Depending on
-the element you're using, you can also import the type that is associated with the element.
-For example, if you're using our HSL color picker component, you can also import the `HSL` type.
+the element you are using, you can also import the type that is associated with the element.
+For example, if you are using our `<hsl-color-picker>` element, you can also import the `HslColor` type.
 
@@ -183,0 +183,0 @@ ```ts

rgb-string-color-picker.d.ts

@@ -8,2 +8,3 @@ import { RgbStringBase } from './lib/entrypoints/rgb-string.js';
  * @prop {string} color - Selected color in RGB string format.
+ * @attr {string} color - Selected color in RGB string format.
  *
@@ -10,0 +11,0 @@ * @fires color-changed - Event fired when color property changes.

rgb-string-color-picker.js

@@ -8,2 +8,3 @@ import { RgbStringBase } from './lib/entrypoints/rgb-string.js';
  * @prop {string} color - Selected color in RGB string format.
+ * @attr {string} color - Selected color in RGB string format.
  *
@@ -10,0 +11,0 @@ * @fires color-changed - Event fired when color property changes.

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

116156

increased by0.43%

Worsened metrics

Lines of code

1185

decreased by-1.33%

No dependency changes