vue-color - npm Package Compare versions

Comparing version 0.0.10 to 2.0.0

build/dev-server.js

@@ -5,12 +5,8 @@ var path = require('path')
 var config = require('../config')
-var proxyMiddleware = require('http-proxy-middleware')
 var webpackConfig = process.env.NODE_ENV === 'testing'
-  ? require('./webpack.prod.conf')
-  : require('./webpack.dev.conf')
+  ? require('./webpack.dev.conf')
+  : require('./webpack.prod.conf')
 
 // default port where dev server listens for incoming traffic
 var port = process.env.PORT || config.dev.port
-// Define HTTP proxies to your custom API backend
-// https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable
 
@@ -37,14 +33,2 @@ var app = express()
 
-// proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-  var options = proxyTable[context]
-  if (typeof options === 'string') {
-    options = { target: options }
-  }
-  app.use(proxyMiddleware(context, options))
-})
-
-// handle fallback for HTML5 history API
-app.use(require('connect-history-api-fallback')())
-
 // serve webpack bundle output
@@ -57,6 +41,2 @@ app.use(devMiddleware)
 
-// serve pure static assets
-var staticPath = path.posix.join(config.build.assetsPublicPath, config.build.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
-
 module.exports = app.listen(port, function (err) {
@@ -63,0 +43,0 @@ if (err) {

build/webpack.dev.conf.js

@@ -30,3 +30,3 @@ var config = require('../config')
     new HtmlWebpackPlugin({
-      filename: 'example/index.html',
+      filename: 'index.html',
       template: 'example/index.html',
@@ -33,0 +33,0 @@ inject: true,

build/webpack.release.js

@@ -57,3 +57,2 @@ var vue = require('vue-loader')
   },
-  devtool: '#source-map',
   babel: {
@@ -82,7 +81,2 @@ presets: ['es2015'],
   ]
-} else {
-  // module.exports.plugins = [
-  //   new ExtractTextPlugin('build.css')
-  // ]
-  // module.exports.devtool = '#source-map'
 }

build/webpack.release.min.js

 var config = require('./webpack.release.js')
 var webpack = require('webpack')
 
-
 config.output.filename = config.output.filename.replace(/\.js$/, '.min.js')
@@ -13,3 +12,3 @@
     compress: {
-        warnings: false
+      warnings: false
     }
@@ -16,0 +15,0 @@ }),

config/index.js

@@ -15,5 +15,4 @@ // see http://vuejs-templates.github.io/webpack for documentation.
     env: require('./dev.env'),
-    port: 3004,
-    proxyTable: {}
+    port: 3004
   }
 }

example/main.js

@@ -5,6 +5,7 @@ import Vue from 'vue'
 /* eslint-disable */
-
+console.log(Vue.version)
 new Vue({
-  el: 'body',
-  components: { App }
-})
+  el: '#app-wrap',
+  render: h => h(App)
+  // components: { App }
+})

package.json

 {
   "name": "vue-color",
-  "version": "0.0.10",
+  "version": "2.0.0",
   "description": "Color of Vue Components",
@@ -11,6 +11,6 @@ "keywords": [
   "scripts": {
-    "build": "node build/build.js",
+    "example": "node build/build.js",
     "dev": "node build/dev-server.js",
     "e2e": "node test/e2e/runner.js",
-    "gh-pages": "npm run build && node build/deploy",
+    "gh": "npm run build && node build/deploy",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
@@ -27,3 +27,2 @@ "test": "npm run unit && npm run e2e",
   "dependencies": {
-    "vue": "^1.0.12",
     "lodash.throttle": "^4.0.0",
@@ -84,5 +83,7 @@ "material-colors": "^1.0.0",
     "url-loader": "^0.5.7",
+    "vue": "^2.0.3",
     "vue-hot-reload-api": "^1.3.x",
     "vue-html-loader": "^1.2.x",
-    "vue-loader": "^8.5.x",
+    "vue-loader": "9.5.1",
+    "vue-template-compiler": "^2.0.3",
     "vue-style-loader": "^1.0.0",
@@ -89,0 +90,0 @@ "webpack": "^1.12.2",

README.md

@@ -101,11 +101,20 @@ # vue-color
 ```html
-<material-picker :colors.sync="colors"></material-picker>
-<compact-picker :colors.sync="colors"></compact-picker>
-<swatches-picker :colors.sync="colors"></swatches-picker>
-<slider-picker :colors.sync="colors"></slider-picker>
-<sketch-picker :colors.sync="colors"></sketch-picker>
-<chrome-picker :colors.sync="colors"></chrome-picker>
-<photoshop-picker :colors.sync="colors"></photoshop-picker>
+<!-- suppose you have the data 'colors' in your component -->
+<material-picker v-model="colors" @change-color="onChange"></material-picker>
+<material-picker v-model="colors" @change-color="onChange"></material-picker>
+<compact-picker v-model="colors" @change-color="onChange"></compact-picker>
+<swatches-picker v-model="colors" @change-color="onChange"></swatches-picker>
+<slider-picker v-model="colors" @change-color="onChange"></slider-picker>
+<sketch-picker v-model="colors" @change-color="onChange"></sketch-picker>
+<chrome-picker v-model="colors" @change-color="onChange"></chrome-picker>
+<photoshop-picker v-model="colors" @change-color="onChange"></photoshop-picker>
 ```
 
+```javascript
+// onChange method called when the event 'change-color' is emitted
+onChange (val) {
+  this.colors = val
+}
+```
+
 ## TODO
@@ -112,0 +121,0 @@ -[] support Vue 2.0

src/mixin/color.js

@@ -12,4 +12,4 @@ import tinycolor from 'tinycolor2'
   if (hsl.s === 0) {
-    hsl.h = oldHue || 0
-    hsv.h = oldHue || 0
+    hsl.h = data.h || oldHue || 0
+    hsv.h = data.h || oldHue || 0
   }
@@ -28,5 +28,25 @@ return {
 export default {
-  props: {
-    colors: Object
+  props: ['value'],
+  data () {
+    return {
+      val: _colorChange(this.value)
+    }
   },
+  computed: {
+    colors: {
+      get () {
+        return this.val
+      },
+      set (newVal) {
+        this.val = newVal
+        this.$emit('change-color', newVal)
+      }
+    }
+  },
+  watch: {
+    value (newVal) {
+      this.val = _colorChange(newVal)
+      // this.$emit('change', newVal)
+    }
+  },
   created () {
@@ -40,7 +60,8 @@ // console.log(this.colors)
     */
-    this.colors = _colorChange(this.colors)
+    // this.colors = _colorChange(this.colors)
   },
   methods: {
     colorChange (data, oldHue) {
-      this.colors = _colorChange(data, oldHue)
+      this.colors = _colorChange(data, oldHue || this.oldHue)
+      this.oldHue = this.colors.hsl.h
     },
@@ -47,0 +68,0 @@ isValidHex (hex) {

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

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

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

Network access

Supply chain risk

This module accesses the network.

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

3

decreased by-25%

Lines of code

5598

increased by22.28%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

126

increased by7.69%

Number of low supply chain risk alerts

9

decreased by-64%

Worsened metrics

Total package byte prevSize

1028365

decreased by-1.72%

Dev dependency count

60

increased by3.45%

Dependency changes

• - Removedvue@^1.0.12

• - Removedacorn@5.7.4(transitive)

• - Removedamdefine@1.0.1(transitive)

• - Removedast-types@0.9.6(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedbase62@1.2.8(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedcommander@2.20.3(transitive)

• - Removedcommoner@0.10.8(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removeddefined@1.0.1(transitive)

• - Removeddetective@4.7.1(transitive)

• - Removedenvify@3.4.1(transitive)

• - Removedesprima@3.1.3(transitive)

• - Removedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• - Removedglob@5.0.15(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removediconv-lite@0.4.24(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedjstransform@11.0.3(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedobject-assign@2.1.1(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedprivate@0.1.8(transitive)

• - Removedq@1.5.1(transitive)

• - Removedrecast@0.11.23(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsource-map@0.4.40.5.7(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedvue@1.0.28(transitive)

• - Removedwrappy@1.0.2(transitive)