添加 LICENSE

添加默认主题 & 修改 style 结构修复菜单位置显示不正确的问题
CyberNika · Nov 5, 2017 · a48defa · a48defa
1 parent 289b76e
commit a48defa
Show file tree

Hide file tree

Showing 26 changed files with 264 additions and 157 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 XBT1
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -12,15 +12,15 @@ $ yarn add v-contextmenu # npm i -S v-contextmenu
 
 https://xbt1.github.io/v-contextmenu
 
-![演示](./docs/example.gif)
+![演示](./docs/images/example.gif)
 
 ## 使用
 
 一个简单的例子
 
 ```javascript
 import 'v-contextmenu'
-import 'v-contextmenu/dist/assets/styles/index.css'
+import 'v-contextmenu/dist/index.css'
 ```
 
 ```html
@@ -37,11 +37,23 @@ import 'v-contextmenu/dist/assets/styles/index.css'
 
 详细使用方法见 [文档](./docs/usage.md) & [例子](./examples)
 
+## 主题
+
+提供两种主题，使用方法见 [VContextmenu](./docs/usage.md#VContextmenu)
+
+**默认**
+
+![default](./docs/images/default.jpg)
+
+**亮色**
+
+![bright](./docs/images/bright.jpg)
+
 ## 开发
 
 ```bash
 $ yarn install
-$ yanr dev
+$ yarn dev
 ```
 
 ## 构建
@@ -51,3 +63,13 @@ $ yarn build:package # 构建 npm 包
 $ yarn build:example # 构建示例站点
 $ yarn build # build:package & build:example
 ```
+
+## 更新日志
+
+- 2017-11-06
+  - `feat`: 添加蓝色主题
+  - `fix`: 修复菜单位置显示不正确的问题
+  - `refactor`: 优化 `styles` 打包结构
+  - `doc`: 修复一处 typo（THX @iPixelOldC）
+- 2017-11-05
+  - `feat`: `Submenu` 添加 `disabled`
diff --git a/build/index.js b/build/index.js
@@ -6,5 +6,5 @@ const resolve = dir => path.resolve(__dirname, '..', dir)
 
 fs.emptyDirSync(resolve('dist'))
 fs.copySync(resolve('src'), resolve('dist'))
-fs.emptyDirSync(resolve('dist/assets/styles'))
-execSync('./node_modules/stylus/bin/stylus src/assets/styles --out dist/assets/styles')
+fs.removeSync(resolve('dist/styles'))
+execSync('./node_modules/stylus/bin/stylus src/styles/index.styl --out dist/')
diff --git a/docs/images/bright.jpg b/docs/images/bright.jpg
diff --git a/docs/images/default.jpg b/docs/images/default.jpg
diff --git a/docs/example.gif → docs/images/example.gif b/docs/example.gif → docs/images/example.gif
diff --git a/docs/usage.md b/docs/usage.md
@@ -37,6 +37,7 @@
 | 参数        | 说明              | 类型    | 可选值 | 默认值      |
 | ---------- | ----------------- | ------ | ----- | ---------- |
 | eventType  | 触发其显示的事件类型 | String | 事件名 | contextmenu |
+| theme      | 主题              | String | default / bright | default |
 
 **Methods**
 
@@ -88,13 +89,25 @@
 
 ## 主题
 
-可根据 `classname` 进行样式覆盖
+提供两种主题
+
+**默认**
+
+![default](./images/default.jpg)
+
+**亮色**
+
+![bright](./images/bright.jpg)
+
+另外可自行根据 `classname` 进行样式覆盖
 
 - `v-contextmenu`: 根元素
+- `v-contextmenu--default`: 根元素-默认主题
+- `v-contextmenu--bright`: 根元素-亮色主题
 - `v-contextmenu-item`: 单个菜单
 - `v-contextmenu-item--hover`: 单个菜单激活状态
 - `v-contextmenu-item--disabled`: 单个菜单禁用状态
 - `v-contextmenu-divider`: 分割线
 - `v-contextmenu-submenu`: 子菜单容器
 - `v-contextmenu-submenu__title`: 子菜单标题
-- `.v-contextmenu-submenu__icon`: 子菜单标题 icon
+- `v-contextmenu-submenu__icon`: 子菜单标题 icon
diff --git a/examples/App.vue b/examples/App.vue
@@ -17,12 +17,15 @@
 
     <div class="usage">
       <h3>用法</h3>
-      <a class="usage-link" href="https://github.com/XBT1/v-contextmenu/blob/master/README.md">安装 &amp; 使用 <i class="v-contextmenu-iconfont usage-icon"></i></a>
+      <a :class="['usage-link', theme]" href="https://github.com/XBT1/v-contextmenu/blob/master/README.md">安装 &amp 使用 <i class="v-contextmenu-iconfont usage-icon"></i></a>
     </div>
 
     <nav>
-      <h3>示例</h3>
-      <ul class="nav-list">
+      <h3>
+        <span>示例</span>
+        <button type="button" @click="changeTheme">切换主题</button>
+      </h3>
+      <ul :class="['nav-list', theme]">
         <li
           :key="item.id"
           :class="{
@@ -37,10 +40,10 @@
     </nav>
 
     <main class="showground">
-      <div class="example-title">
+      <div :class="['example-title', theme]">
         「{{ exampleTitle }}」示例
       </div>
-      <component :is="currentExample"></component>
+      <component :is="currentExample" :theme="theme"></component>
     </main>
   </div>
 </template>
@@ -74,6 +77,7 @@
     data () {
       return {
         currentExample: window.location.hash.slice(1) || 'simple',
+        theme: 'default',
 
         examples: [{
           id: 'simple',
@@ -102,119 +106,123 @@
         this.currentExample = value
         window.location.hash = value
       },
+      changeTheme () {
+        this.theme = this.theme === 'default' ? 'bright' : 'default'
+      },
     },
   }
 </script>
 
-<style scoped>
-  #app {
-    max-width: 1000px;
-    margin: 0 auto;
-  }
+<style scoped lang="stylus">
+  main-color = #46a0fc
+  main-color-bright = #ef5350
 
-  .usage-link {
-    color: #ef5350;
-    border-bottom: 1px solid #ef5350;
-    text-decoration: none;
-  }
+  #app
+    max-width: 1000px
+    margin: 0 auto
 
-  .usage-link:hover {
-    opacity: 0.8;
-  }
-
-  .usage-icon::before {
-    content: "\e622"
-  }
+  .usage-link
+    color: main-color
+    border-bottom: 1px solid main-color
+    text-decoration: none
 
-  .description {
-    line-height: 20px;
-    vertical-align: middle;
-  }
+    &.bright
+      color: main-color-bright
+      border-bottom: 1px solid main-color-bright
 
-  .gh-star {
-    margin-left: 8px;
-    vertical-align: middle;
-  }
+    &:hover
+      opacity: 0.8
 
-  .nav-list {
-    padding: 0 8px;
-    margin: 0;
-    border-radius: 2px;
-    background-color: #ef5350;
-    white-space: nowrap;
-    overflow-x: auto;
-    list-style: none;
-  }
+  .usage-icon::before
+    content: "\e622"
 
-  .nav-item {
-    position: relative;
-    display: inline-block;
-    padding: 8px;
-    color: rgba(255, 255, 255, 0.55);
-    cursor: pointer;
-  }
+  .description
+    line-height: 20px
+    vertical-align: middle
+
+  .gh-star
+    margin-left: 8px
+    vertical-align: middle
+
+  .nav-list
+    padding: 0 8px
+    margin: 0
+    border-radius: 2px
+    background-color: main-color
+    white-space: nowrap
+    overflow-x: auto
+    list-style: none
+
+    &.bright
+      background-color: main-color-bright
+
+  .nav-item
+    position: relative
+    display: inline-block
+    padding: 8px
+    color: rgba(255, 255, 255, 0.55)
+    cursor: pointer
 
   .nav-item:hover,
-  .nav-item.active {
-    font-weight: normal;
-    color: #fff;
-  }
-
-  .nav-item + .nav-item::before {
-    content: "";
-    position: absolute;
-    top: 12px;
-    left: 0;
-    width: 0;
-    height: 18px;
-    border-left: 1px solid rgba(222, 222, 222, 0.5);
-  }
-
-  .showground {
-    margin-top: 20px;
-    border-radius: 2px;
-    overflow: hidden;
-  }
-
-  .example-title {
-    height: 36px;
-    /*border-bottom: 1px solid #eee;*/
-    background-color: #ef5350;
-    line-height: 36px;
-    text-align: center;
-    color: #fff;
-  }
+  .nav-item.active
+    font-weight: normal
+    color: #fff
+
+  .nav-item + .nav-item::before
+    content: ""
+    position: absolute
+    top: 12px
+    left: 0
+    width: 0
+    height: 18px
+    border-left: 1px solid rgba(222, 222, 222, 0.5)
+
+  .showground
+    margin-top: 20px
+    border-radius: 2px
+    overflow: hidden
+
+  .example-title
+    height: 36px
+    background-color: main-color
+    line-height: 36px
+    text-align: center
+    color: #fff
+
+    &.bright
+      background-color: main-color-bright
 </style>
 
-<style>
-  html {
-    height: 100%;
-  }
-
-  body {
-    height: 100%;
-    color: #333;
-    /*font-weight: lighter;*/
-    font-size: 16px;
-    line-height: 1.5;
-  }
-
-  ::selection {
-    color: #fff;
-    background-color: #ef5350;
-  }
-
-  .box {
-    height: 80px;
-    border: 1px solid #ef5350;
-    background-color: #fff;
-    line-height: 80px;
-    color: #666;
-    text-align: center;
-    box-sizing: border-box;
-  }
-
-  .box + .box {
-    border-top: none;
-  }
+<style lang="stylus">
+  main-color = #46a0fc
+  main-color-bright = #ef5350
+
+  html
+    height: 100%
+
+  body
+    height: 100%
+    color: #333
+    /*font-weight: lighter*/
+    font-size: 16px
+    line-height: 1.5
+
+  ::selection
+    color: #fff
+    background-color: main-color
+
+  .box
+    height: 80px
+    border: 1px solid main-color
+    background-color: #fff
+    line-height: 80px
+    color: #666
+    text-align: center
+    box-sizing: border-box
+
+    &.bright
+      border-color: main-color-bright
+
+    & + .box
+      border-top: none
 </style>