From fcef532584ebd01eb4ba65e3d3ea946ebeaa920c Mon Sep 17 00:00:00 2001
From: Snokier <me@snokier.com>
Date: Fri, 27 Jul 2018 01:58:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=9A=97=E8=89=B2?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=20(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

同时修复 webpack Uglify 配置
---
 examples/App.vue            | 42 ++++++++++++++++++++++++++++++++-----
 examples/webpack.config.js  | 22 ++++++++++++-------
 package-lock.json           |  2 +-
 package.json                |  3 ++-
 src/styles/contextmenu.styl |  4 ++++
 src/styles/index.styl       |  1 +
 6 files changed, 60 insertions(+), 14 deletions(-)

diff --git a/examples/App.vue b/examples/App.vue
index 1d21e4f..0e1e05c 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -23,7 +23,14 @@
     <nav>
       <h3>
         <span>示例</span>
-        <button type="button" @click="changeTheme">切换主题</button>
+        <div class="theme-select">
+          <input v-model="theme" type="radio" value="default" name="theme" id="theme-default" />
+          <label for="theme-default">默认</label>
+          <input v-model="theme" type="radio" value="bright" name="theme" id="theme-bright" />
+          <label for="theme-bright">亮色</label>
+          <input v-model="theme" type="radio" value="dark" name="theme" id="theme-dark" />
+          <label for="theme-dark">暗色</label>
+        </div>
       </h3>
       <ul :class="['nav-list', theme]">
         <li
@@ -106,7 +113,7 @@
   }]
 
   export default {
-    name: 'app',
+    name: 'App',
 
     components: {
       Simple,
@@ -149,9 +156,6 @@
         this.currentExample = value
         window.location.hash = value
       },
-      changeTheme () {
-        this.theme = this.theme === 'default' ? 'bright' : 'default'
-      },
     },
   }
 </script>
@@ -159,11 +163,25 @@
 <style scoped lang="stylus">
   main-color = #46a0fc
   main-color-bright = #ef5350
+  main-color-dark = #2d3035
 
   #app
     max-width: 1000px
     margin: 0 auto
 
+  .theme-select
+    display inline-block
+    font-size 14px
+    font-weight normal
+    cursor pointer
+
+    input,
+    label
+      cursor pointer
+
+    input
+      margin-left 10px
+
   .usage-link
     color: main-color
     border-bottom: 1px solid main-color
@@ -173,6 +191,10 @@
       color: main-color-bright
       border-bottom: 1px solid main-color-bright
 
+    &.dark
+      color: main-color-dark
+      border-bottom: 1px solid main-color-dark
+
     &:hover
       opacity: 0.8
 
@@ -199,6 +221,9 @@
     &.bright
       background-color: main-color-bright
 
+    &.dark
+      background-color: main-color-dark
+
   .nav-item
     position: relative
     display: inline-block
@@ -234,11 +259,15 @@
 
     &.bright
       background-color: main-color-bright
+
+    &.dark
+      background-color: main-color-dark
 </style>
 
 <style lang="stylus">
   main-color = #46a0fc
   main-color-bright = #ef5350
+  main-color-dark = #2d3035
 
   @font-face
     font-family: "feather"
@@ -273,6 +302,9 @@
     &.bright
       border-color: main-color-bright
 
+    &.dark
+      border-color: main-color-dark
+
     & + .box
       border-top: none
 
diff --git a/examples/webpack.config.js b/examples/webpack.config.js
index 8280095..f7a4b15 100644
--- a/examples/webpack.config.js
+++ b/examples/webpack.config.js
@@ -1,6 +1,7 @@
 const path = require('path')
 const webpack = require('webpack')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
 module.exports = {
   entry: './examples/main.js',
@@ -83,19 +84,26 @@ module.exports = {
 
 if (process.env.NODE_ENV === 'production') {
   module.exports.devtool = '#source-map'
-  // http://vue-loader.vuejs.org/en/workflow/production.html
+  module.exports.optimization = {
+    minimizer: [
+      new UglifyJsPlugin({
+        cache: true,
+        parallel: true,
+        uglifyOptions: {
+          compress: false,
+          ecma: 6,
+          mangle: true
+        },
+        sourceMap: true
+      })
+    ]
+  }
   module.exports.plugins = (module.exports.plugins || []).concat([
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: '"production"'
       }
     }),
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
-      compress: {
-        warnings: false
-      }
-    }),
     new webpack.LoaderOptionsPlugin({
       minimize: true
     })
diff --git a/package-lock.json b/package-lock.json
index 8eb5869..0fba5ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "v-contextmenu",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index a498adf..5870411 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "v-contextmenu",
   "description": "ContextMenu based on Vue 2.0",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "author": "snokier <me@snokier.com>",
   "main": "dist/index.common.js",
   "files": [
@@ -52,6 +52,7 @@
     "style-loader": "^0.21.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
+    "uglifyjs-webpack-plugin": "^1.2.5",
     "url-loader": "^1.0.0",
     "vue-loader": "^15.0.0",
     "vue-template-compiler": "^2.5.16",
diff --git a/src/styles/contextmenu.styl b/src/styles/contextmenu.styl
index 259f804..937a8ee 100644
--- a/src/styles/contextmenu.styl
+++ b/src/styles/contextmenu.styl
@@ -76,3 +76,7 @@
 .v-contextmenu--bright
   .v-contextmenu-item--hover
     background-color: active-color-bright
+
+.v-contextmenu--dark
+  .v-contextmenu-item--hover
+    background-color: active-color-dark
diff --git a/src/styles/index.styl b/src/styles/index.styl
index 962b997..eb3deda 100644
--- a/src/styles/index.styl
+++ b/src/styles/index.styl
@@ -5,6 +5,7 @@ padding-vertical = 5px
 contextmenu-item-padding-horizonal = 14px
 
 active-color-bright = #ef5350
+active-color-dark = #2d3035
 
 @import "./iconfont.styl"
 @import "./contextmenu.styl"