feat&doc: Button available!

demo/components/ButtonDemo.vue

@@ -0,0 +1,76 @@
+<template>
+  <div
+    ref="doc"
+    class="doc"
+  >
+    <h1>按钮 / n-button</h1>
+    <hr>
+    <h2>基本用法</h2>
+    <n-button
+      round
+      icon="md-save"
+    >
+      Save as Template
+    </n-button>
+    <n-button round>
+      Cancel
+    </n-button>
+    <n-button type="primary">
+      Delete
+    </n-button>
+    <n-button
+      type="primary"
+      round
+      @click="handleClick"
+    >
+      New Service
+    </n-button>
+    <br><br>
+    <textarea rows="5">
+<n-button
+  round
+  icon="md-save"
+>
+  Save as Template
+</n-button>
+<n-button round>
+  Cancel
+</n-button>
+<n-button type="primary">
+  Delete
+</n-button>
+<n-button
+  type="primary"
+  round
+  @click="handleClick"
+>
+  New Service
+</n-button>
+</textarea>
+    <hr>
+  </div>
+</template>
+
+<script>
+import docCodeEditorMixin from './docCodeEditorMixin'
+export default {
+  mixins: [docCodeEditorMixin],
+  methods: {
+    handleClick () {
+      alert('handleClick')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.doc {
+  width: 900px;
+  margin: auto;
+  textarea {
+    width: 100%;
+    min-height: 3em;
+  }
+}
+
+</style>

demo/components/docCodeEditorMixin.js

@@ -0,0 +1,13 @@
+import CodeMirror from 'codemirror'
+import 'codemirror/mode/htmlmixed/htmlmixed'
+
+export default {
+  mounted () {
+    this.$refs.doc.querySelectorAll('textarea').forEach(ta => {
+      CodeMirror.fromTextArea(ta, {
+        lineNumbers: true,
+        mode: 'htmlmixed'
+      })
+    })
+  }
+}

demo/components/roundButtonDemo.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="doc">
-    <h1>圆按钮 / n-round-button</h1>
-    <hr>
-    <h2>基本用法</h2>
-    <n-round-button>Edit</n-round-button><n-round-button>Cancel</n-round-button><n-round-button>Delete</n-round-button><n-round-button>New Service</n-round-button>
-    <br><br>
-    <textarea rows="5"><n-round-button>Edit</n-round-button><n-round-button>Cancel</n-round-button><n-round-button>Delete</n-round-button><n-round-button>New Service</n-round-button></textarea>
-    <hr>
-  </div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style scoped lang="scss">
-.doc {
-  width: 900px;
-  margin: auto;
-  textarea {
-    width: 100%;
-    min-height: 3em;
-  }
-}
-
-</style>

demo/demo.vue

@@ -13,10 +13,6 @@
         渐变文字 / n-gradient-text
       </router-link>
       <br>
-      <router-link to="/n-gradient-button">
-        (不可用)渐变按钮 / n-gradient-button
-      </router-link>
-      <br>
       <router-link to="/n-icon">
         图标 / n-icon
       </router-link>
@@ -25,8 +21,8 @@
         多选框 / n-checkbox
       </router-link>
       <br>
-      <router-link to="/n-round-button">
-        圆按钮 / n-round-button
+      <router-link to="/n-button">
+        按钮 / n-button
       </router-link>
       <br>
       <router-link to="/n-switch">

demo/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue/dist/vue'
 import VueRouter from 'vue-router'
 import '../styles/index.scss'
+import 'codemirror/lib/codemirror.css'
 // import Demo from './demo.vue'
 import Card from 'packages/common/Card'
 import Icon from 'packages/common/Icon'
@@ -12,7 +13,7 @@ import WithMargin from 'packages/common/WithMargin'
 import MasonryGroup from 'packages/common/MasonryGroup'
 import Table from 'packages/common/Table'
 import Checkbox from 'packages/common/Checkbox'
-import RoundButton from 'packages/common/RoundButton'
+import RoundButton from 'packages/common/Button'
 import Switch from '../packages/common/Switch'
 import Input from '../packages/common/Input'
 import Select from '../packages/common/Select'
@@ -29,7 +30,7 @@ import homeDemo from './components/homeDemo'
 import gradientTextDemo from './components/gradientTextDemo'
 import iconDemo from './components/iconDemo'
 import checkboxDemo from './components/checkboxDemo'
-import roundButtonDemo from './components/roundButtonDemo'
+import ButtonDemo from './components/ButtonDemo'
 import switchDemo from './components/switchDemo'
 import tableDemo from './components/tableDemo'
 import inputDemo from './components/inputDemo'
@@ -68,7 +69,7 @@ const routes = [
   { path: '/n-gradient-text', component: gradientTextDemo },
   { path: '/n-icon', component: iconDemo },
   { path: '/n-checkbox', component: checkboxDemo },
-  { path: '/n-round-button', component: roundButtonDemo },
+  { path: '/n-button', component: ButtonDemo },
   { path: '/n-switch', component: switchDemo },
   { path: '/n-table', component: tableDemo },
   { path: '/n-input', component: inputDemo },

demo/index.tpl

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>2s design</title>
+    <title>naive-ui</title>
     <style></style>
   </head>
   <body>

index.js

@@ -8,7 +8,7 @@ import WithMargin from './packages/common/WithMargin'
 import MasonryGroup from './packages/common/MasonryGroup'
 import Table from './packages/common/Table'
 import CheckBox from './packages/common/Checkbox'
-import RoundButton from './packages/common/RoundButton'
+import RoundButton from './packages/common/Button'
 import Switch from './packages/common/Switch'
 import Select from './packages/common/Select'
 import Modal from './packages/common/Modal'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -25,6 +25,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-istanbul": "^5.1.4",
     "chai": "^4.2.0",
+    "codemirror": "^5.47.0",
     "copy-webpack-plugin": "^5.0.3",
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.1",

packages/common/Button/index.js

@@ -0,0 +1,7 @@
+import Round from './src/main.vue'
+
+Round.install = function (Vue) {
+  Vue.component(Round.name, Round)
+}
+
+export default Round

packages/common/Button/src/main.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="n-button"
+    :class="{
+      'is-round': round,
+      [`is-${type}`]: true
+    }"
+    v-on="$listeners"
+  >
+    <div
+      v-if="icon"
+      class="n-button__icon"
+    >
+      <n-icon :type="icon" />
+    </div>
+    <div class="n-button__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import NIcon from '../../Icon/index'
+
+export default {
+  name: 'NButton',
+  components: {
+    NIcon
+  },
+  props: {
+    size: {
+      type: String,
+      default: 'default'
+    },
+    round: {
+      type: Boolean,
+      default: false
+    },
+    gradient: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'default'
+    },
+    icon: {
+      type: String,
+      default: null
+    }
+  }
+}
+</script>

packages/common/RoundButton/index.js

@@ -1,7 +0,0 @@
-import RoundButton from './src/main.vue'
-
-RoundButton.install = function (Vue) {
-  Vue.component(RoundButton.name, RoundButton)
-}
-
-export default RoundButton

packages/common/RoundButton/src/main.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="n-round-button">
-    <div class="content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'NRoundButton'
-}
-</script>

styles/Button.scss

@@ -0,0 +1,52 @@
+@import './mixins/mixins.scss';
+@import './theme/default.scss';
+
+@include b(button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: inset 0 0 0 1.5px $default-button-border-color;
+  height: 28px;
+  border-radius: 4px;
+  padding-left: 18px;
+  padding-right: 18px;
+  box-sizing: border-box;
+  font-size: $regular-font-size;
+  cursor: pointer;
+  user-select: none;
+  font-weight: 700;
+  &.is-round {
+    border-radius: 14px
+  }
+  &.is-default {
+    color: $default-button-text-color;
+    &:hover {
+      background-color: #336F6FFF;
+    }
+    &:active {
+      background-color: #366165FF;
+    }
+  }
+  &.is-primary {
+    color: #1F263EFF;
+    background: #63E2B7FF;
+    box-shadow: none;
+    &:hover {
+      background-color: #6FF7C9FF;
+    }
+    &:active {
+      background-color: #4DB199FF;
+    }
+  }
+  .n-button__icon {
+    height: 18px;
+    margin-right: 6px;
+    & > i::before {
+      color: #63E2B7FF;
+      font-size: 18px;
+    }
+  }
+  .n-button__content, .n-button__icon {
+    margin-top: -1px;
+  }
+}

styles/RoundButton.scss

@@ -1,23 +0,0 @@
-@import './mixins/mixins.scss';
-@import './theme/default.scss';
-
-@include b(round-button) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: $default-button-text-color;
-  border: 1px solid $default-button-border-color;
-  height: 28px;
-  border-radius: 14px;
-  padding-left: 14px;
-  padding-right: 14px;
-  box-sizing: border-box;
-  font-size: $regular-font-size;
-  min-width: 72px;
-  cursor: pointer;
-  user-select: none;
-  &:hover {
-    background-color: $default-button-background-color;
-    color: $default-button-hover-text-color;
-  }
-}

styles/base.scss

@@ -1,4 +1,4 @@
-@import './fonts/OpenSans.scss';
+@import './fonts/Lato.scss';
 @import './theme/default.scss';
 
 body {

styles/fonts/Lato.scss

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'Lato';
+  src: url('./resources/fonts/Lato-Regular.ttf');
+}

styles/index.scss

@@ -9,7 +9,7 @@
 @import './Table.scss';
 @import './WithMargin.scss';
 @import './Checkbox.scss';
-@import './RoundButton.scss';
+@import './Button.scss';
 @import './Switch.scss';
 @import './Input.scss';
 @import './Select.scss';

styles/theme/default.scss

@@ -28,4 +28,4 @@ $default-button-background-color: #63E2B7;
 
 $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
 
-$default-font-family: 'Open Sans';
+$default-font-family: 'Lato';