feat: checkbox & round button

build/webpack.release.js

@@ -0,0 +1,79 @@
+const path = require('path')
+const webpack = require('webpack')
+const config = require('./config')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
+const webpackConfig = {
+  mode: 'development',
+  entry: './index.js',
+  output: {
+    path: path.resolve(process.cwd()),
+    publicPath: '',
+    filename: '[name].[hash:7].js',
+    chunkFilename: '[name].[hash:7].js'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: config.alias,
+    modules: ['node_modules']
+  },
+  devServer: {
+    host: '0.0.0.0',
+    port: 8086,
+    publicPath: '/',
+    hot: true
+  },
+  performance: {
+    hints: false
+  },
+  stats: {
+    children: false
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            preserveWhitespace: false
+          }
+        }
+      },
+      {
+        test: /\.(scss|css)$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      },
+      {
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      template: './demo/index.tpl',
+      filename: './index.html'
+    }),
+    new VueLoaderPlugin(),
+    new webpack.LoaderOptionsPlugin({
+      vue: {
+        compilerOptions: {
+          preserveWhitespace: false
+        }
+      }
+    })
+  ]
+}
+
+module.exports = webpackConfig

demo/components/checkboxDemo.vue

@@ -7,7 +7,9 @@
       Nimbus
     </n-checkbox><br>{{ String(checked) }}
     <br>
-    <textarea rows="5">scaffold</textarea>
+    <textarea rows="5"><n-checkbox v-model="checked">
+  Nimbus
+</n-checkbox></textarea>
     <hr>
   </div>
 </template>

demo/components/roundButtonDemo.vue

@@ -0,0 +1,29 @@
+<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

@@ -24,6 +24,10 @@
       <router-link to="/n-checkbox">
         多选框 / n-checkbox
       </router-link>
+      <br>
+      <router-link to="/n-round-button">
+        圆按钮 / n-round-button
+      </router-link>
     </div>
   </div>
 </template>

demo/index.js

@@ -12,6 +12,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 ServiceCard from 'packages/nimbus/ServiceCard'
 import HomeLayout from 'packages/nimbus/HomeLayout'
@@ -23,6 +24,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 demo from './demo'
 
 Vue.use(VueRouter)
@@ -41,6 +43,7 @@ MasonryGroup.install(Vue)
 Table.install(Vue)
 WithMargin.install(Vue)
 Checkbox.install(Vue)
+RoundButton.install(Vue)
 
 const routes = [
   { path: '/', component: demo },
@@ -48,7 +51,8 @@ const routes = [
   { path: '/n-nimbus-home-layout', component: homeDemo },
   { path: '/n-gradient-text', component: gradientTextDemo },
   { path: '/n-icon', component: iconDemo },
-  { path: '/n-checkbox', component: checkboxDemo }
+  { path: '/n-checkbox', component: checkboxDemo },
+  { path: '/n-round-button', component: roundButtonDemo }
 ]
 
 const router = new VueRouter({

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>2s design</title>
+    <style></style>
+  </head>
+  <body>
+      <div id="app">
+         <router-view></router-view>
+      </div>
+  <script type="text/javascript" src="main.e2bb885.js"></script></body>
+</html>

index.js

@@ -7,6 +7,8 @@ import WithPadding from './packages/common/WithPadding'
 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 ServiceCard from './packages/nimbus/ServiceCard'
 import HomeLayout from './packages/nimbus/HomeLayout'
@@ -27,6 +29,8 @@ function installUiToVue (Vue) {
   MasonryGroup.install(Vue)
   Table.install(Vue)
   WithMargin.install(Vue)
+  CheckBox.install(Vue)
+  RoundButton.install(Vue)
 }
 
 export default installUiToVue

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -8,7 +8,8 @@
     "demo": "cross-env NODE_ENV=development & gulp --gulpfile build/gulpfile.js build & webpack-dev-server --config build/webpack.demo.js",
     "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.js",
     "serve": "npm run dev",
-    "test": "cross-env NODE_ENV=development BABEL_ENV=test karma start test/unit/karma.conf.js"
+    "test": "cross-env NODE_ENV=development BABEL_ENV=test karma start test/unit/karma.conf.js",
+    "test-release": "cross-env NODE_ENV=production webpack-dev-server --config build/webpack.release.js"
   },
   "author": "",
   "license": "ISC",

packages/common/RoundButton/index.js

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

packages/common/RoundButton/src/main.vue

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

packages/common/Scaffold/src/main.vue

@@ -7,7 +7,3 @@ export default {
   name: 'NScaffold'
 }
 </script>
-
-<style lang="scss" scoped>
-
-</style>

styles/RoundButton.scss

@@ -0,0 +1,23 @@
+@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/index.scss

@@ -9,5 +9,6 @@
 @import './Table.scss';
 @import './WithMargin.scss';
 @import './Checkbox.scss';
+@import './RoundButton.scss';
 
 @import './NimbusServiceLayout.scss';

styles/theme/default.scss

@@ -17,4 +17,8 @@ $table-body-background-color: #1f263e;
 $table-box-shadow: 0 3px 20px 6px rgba(0, 0, 0, .2);
 
 $default-button-gradient: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
-$default-header-gradient: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
+$default-header-gradient: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
+$default-button-border-color: #63E2B7;
+$default-button-text-color: #63E2B7;
+$default-button-hover-text-color: #1F263E;
+$default-button-background-color: #63E2B7;