feat: 添加暗色主题 (#45)

同时修复 webpack Uglify 配置

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,21 +156,32 @@
         this.currentExample = value
         window.location.hash = value
       },
-      changeTheme () {
-        this.theme = this.theme === 'default' ? 'bright' : 'default'
-      },
     },
   }
 </script>
 
 <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
 

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
     })

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",

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

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"