vue-color - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

 {
   "name": "vue-color",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Color of Vue Components",
@@ -9,14 +9,17 @@ "keywords": [
   ],
-  "main": "src/app.js",
+  "main": "dist/vue-color.min.js",
   "scripts": {
     "dev": "webpack-dev-server --port 3004 --inline --hot --quiet",
     "build": "NODE_ENV=production webpack --progress --hide-modules",
-    "dist": "webpack --progress --hide-modules --config  webpack.build.js && NODE_ENV=production webpack --progress --hide-modules --config  webpack.build.min.js"
+    "dist": "webpack --progress --hide-modules --config  webpack.build.js && NODE_ENV=production webpack --progress --hide-modules --config  webpack.build.min.js",
+    "lint": "eslint --ext .js,.vue src"
   },
   "repository": {
     "type": "git",
-    "url": ""
+    "url": "https://github.com/xiaokaike/vue-color"
   },
-  "author": "xiaokaike",
+  "author": "xiaokai <[e-mail]>",
   "dependencies": {
+    "vue": "^1.0.12",
+    "lodash.throttle": "^4.0.0",
     "material-colors": "^1.0.0",
@@ -26,3 +29,2 @@ "tinycolor2": "^1.1.2"
   "devDependencies": {
-    "vue": "^1.0.12",
     "babel-core": "^6.1.21",
@@ -32,4 +34,13 @@ "babel-loader": "^6.1.0",
     "babel-preset-es2015": "^6.1.18",
+    "babel-preset-stage-2": "^6.5.0",
     "babel-runtime": "^5.8.0",
     "css-loader": "^0.21.0",
+    "eslint": "^2.0.0",
+    "eslint-config-standard": "^5.1.0",
+    "eslint-friendly-formatter": "^1.2.2",
+    "eslint-loader": "^1.3.0",
+    "eslint-plugin-html": "^1.3.0",
+    "eslint-plugin-promise": "^1.0.8",
+    "eslint-plugin-standard": "^1.3.2",
+    "extract-text-webpack-plugin": "^0.8.2",
     "style-loader": "^0.13.0",
@@ -41,6 +52,5 @@ "stylus-loader": "^1.4.0",
     "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.12.0",
-    "extract-text-webpack-plugin": "^0.8.2"
+    "webpack-dev-server": "^1.12.0"
   },
   "license": "MIT"
 }

README.md

@@ -1,1 +0,4 @@
-# vue-color
+# vue-color
+
+
+still on develop

src/app.js

@@ -0,32 +1,12 @@
+import Vue from 'vue'
 import color from './Color.vue'
-import material from './components/Material.vue'
-import compact from './components/Compact.vue'
-import swatches from './components/Swatches.vue'
 
 Vue.config.debug = true
 
+/* eslint-disable no-new */
 new Vue({
-	el: '#app',
-	components: {
-    color,
-    material,
-    compact,
-    swatches
-  },
-  data: {
-    hex: '#333',
-    rgba: {
-      r: 51,
-      g: 51,
-      b: 51,
-      a: 1,
-    },
-    hsl: {
-      h: 0,
-      s: 0,
-      l: .20,
-      a: 1,
-    }
+  el: '#app',
+  components: {
+    color
   }
 })
-

src/index.js

@@ -1,5 +0,17 @@
-import Color from './Color.vue'
+import Compact from './components/Compact.vue'
+import Material from './components/Material.vue'
+import Slider from './components/Slider.vue'
+import Swatches from './components/Swatches.vue'
+import Photoshop from './components/Photoshop.vue'
+import Sketch from './components/Sketch.vue'
+import Chrome from './components/Chrome.vue'
 
 const VueColor = {
-  Color,
+  Compact,
+  Material,
+  Slider,
+  Swatches,
+  Photoshop,
+  Sketch,
+  Chrome
 }
@@ -6,0 +18,0 @@

src/mixin/color.js

 import tinycolor from 'tinycolor2'
 
-var rgbaRE = /r|g|b|a/i
-var hslRE = /h|s|l/i
-
 export default {
+  props: {
+    colors: Object
+  },
+  created () {
+    // console.log(this.colors)
+    this.colors.hex = this.colors.hex.toUpperCase()
+  },
   methods: {
-    colorChange (data, type) {
-      console.log(data, type)
-
-      if(type === 'hex'){
-        if(!this.isValidHex(data)){
-          return
-        }
-        var c = tinycolor(data)
-        this.hsl = c.toHsl()
-        this.rgba = c.toRgb()
+    colorChange (data, oldHue) {
+      if (data.a && data.a > 1) {
+        data.a = 1
       }
 
-      if(rgbaRE.test(type)){
-        if(!this.simpleCheckForValidColor(this.rgba)){
-          return
-        }
-        var c = tinycolor(this.rgba)
-        this.hex = c.toHexString()
-        this.hsl = c.toHsl()
+      var color = data.hex ? tinycolor(data.hex) : tinycolor(data)
+      var hsl = color.toHsl()
+      var hsv = color.toHsv()
+      if (hsl.s === 0) {
+        hsl.h = oldHue || 0
+        hsv.h = oldHue || 0
       }
-
-      if(hslRE.test(type)){
-        if(!this.simpleCheckForValidColor(this.hsl)){
-          return
-        }
-        var c = tinycolor(this.hsl)
-        this.hex = c.toHexString()
-        this.rgba = c.toRgb()
+      this.colors = {
+        hsl: hsl,
+        hex: color.toHexString().toUpperCase(),
+        rgba: color.toRgb(),
+        hsv: hsv,
+        oldHue: data.h || oldHue || hsl.h,
+        source: data.source,
+        a: data.a
       }
-
-      this.onChange && this.onChange();
     },
@@ -63,2 +57,2 @@ isValidHex (hex) {
   }
-}
+}

webpack.config.js

 var vue = require('vue-loader')
+var path = require('path')
 var webpack = require("webpack")
 var ExtractTextPlugin = require("extract-text-webpack-plugin")
+var projectRoot = path.resolve(__dirname, '../')
+var cssLoader = ExtractTextPlugin.extract('style-loader', 'css-loader')
 
-var cssLoader = ExtractTextPlugin.extract("style-loader", "css-loader")
-
 module.exports = {
@@ -17,2 +18,16 @@ entry: {
   module: {
+    preLoaders: [
+      {
+        test: /\.vue$/,
+        loader: 'eslint',
+        include: projectRoot,
+        exclude: /node_modules/
+      },
+      {
+        test: /\.js$/,
+        loader: 'eslint',
+        include: projectRoot,
+        exclude: /node_modules/
+      }
+    ],
     loaders: [
@@ -36,13 +51,10 @@ {
         test: /\.styl$/,
-        loader: ExtractTextPlugin.extract("style-loader","css-loader!stylus-loader")
+        loader: ExtractTextPlugin.extract('style-loader','css-loader!stylus-loader')
       }
     ]
   },
-  // vue: {
-  //   loaders: {
-  //     css: ExtractTextPlugin.extract("css"),
-  //     stylus: ExtractTextPlugin.extract("css!stylus")
-  //   }
-  // },
-  devtool: "#source-map",
+  eslint: {
+    formatter: require('eslint-friendly-formatter')
+  },
+  devtool: '#source-map',
   babel: {
@@ -69,9 +81,9 @@ presets: ['es2015'],
     new webpack.optimize.OccurenceOrderPlugin()
-    // new ExtractTextPlugin("build.css")
+    // new ExtractTextPlugin('build.css')
   ]
 } else {
   // module.exports.plugins = [
-  //   new ExtractTextPlugin("build.css")
+  //   new ExtractTextPlugin('build.css')
   // ]
   // module.exports.devtool = '#source-map'
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

749594

increased by4023.18%

Number of package files

32

increased by60%

Lines of code

4558

increased by1962.44%

Number of lines in readme file

4

increased by300%

Worsened metrics

Dependency count

4

increased by100%

Dev dependency count

22

increased by46.67%

Number of low supply chain risk alerts

19

increased by850%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlodash.throttle@^4.0.0

• + Addedvue@^1.0.12

• + Addedacorn@5.7.4(transitive)

• + Addedamdefine@1.0.1(transitive)

• + Addedast-types@0.9.6(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbase62@1.2.8(transitive)

• + Addedbrace-expansion@1.1.11(transitive)

• + Addedcommander@2.20.3(transitive)

• + Addedcommoner@0.10.8(transitive)

• + Addedconcat-map@0.0.1(transitive)

• + Addeddefined@1.0.1(transitive)

• + Addeddetective@4.7.1(transitive)

• + Addedenvify@3.4.1(transitive)

• + Addedesprima@3.1.3(transitive)

• + Addedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• + Addedglob@5.0.15(transitive)

• + Addedgraceful-fs@4.2.11(transitive)

• + Addediconv-lite@0.4.24(transitive)

• + Addedinflight@1.0.6(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedjstransform@11.0.3(transitive)

• + Addedlodash.throttle@4.1.1(transitive)

• + Addedminimatch@3.1.2(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedmkdirp@0.5.6(transitive)

• + Addedobject-assign@2.1.1(transitive)

• + Addedonce@1.4.0(transitive)

• + Addedpath-is-absolute@1.0.1(transitive)

• + Addedprivate@0.1.8(transitive)

• + Addedq@1.5.1(transitive)

• + Addedrecast@0.11.23(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsource-map@0.4.40.5.7(transitive)

• + Addedthrough@2.3.8(transitive)

• + Addedvue@1.0.28(transitive)

• + Addedwrappy@1.0.2(transitive)