feat(add outline model): add otline model

add outline model

.gitignore

@@ -24,3 +24,4 @@ coverage
 package-lock.json
 .npmrc
 storybook-static
+example

.storybook/main.js

@@ -25,6 +25,11 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
 
 module.exports = {
   webpackFinal: async (config, {configType}) => {
+    const entry = config.entry;
+    delete config.entry;
+    config.entry = {};
+    config.entry.index = entry;
+    config.output.filename = '[name].js';
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
     // 'PRODUCTION' is used when building the static version of storybook.
@@ -42,10 +47,10 @@ module.exports = {
     // Make whatever fine-grained changes you need
     config.module.rules.push({
       test: /\.css$/,
-      use: process.env.NODE_ENV === 'prod' ?[
-         {
-           loader: MiniCssExtractPlugin.loader
-         },{
+      use: process.env.NODE_ENV === 'prod' ? [
+        {
+          loader: MiniCssExtractPlugin.loader
+        }, {
           loader: "css-loader",
           options: {
             importLoaders: 1,
@@ -73,7 +78,7 @@ module.exports = {
             }
           }
         },
-      ]:[
+      ] : [
         {
           loader: "postcss-loader",
           options: {
@@ -103,7 +108,9 @@ module.exports = {
       fs: 'empty'
     };
     process.env.NODE_ENV === 'prod' && config.plugins.push(
-      new MiniCssExtractPlugin()
+      new MiniCssExtractPlugin({
+        filename: '[name].css'
+      })
     );
     // Return the altered config
     return config;

.storybook/yourTheme.js

@@ -7,8 +7,8 @@ export default create({
   // colorSecondary: 'deepskyblue',
   //
   // // UI
-  // appBg: 'white',
-  // appContentBg: 'silver',
+  appBg: 'white',
+  appContentBg: 'rgba(221,221,221,0.16)',
   // appBorderColor: 'grey',
   // appBorderRadius: 4,
   //

karma.conf.js

@@ -18,7 +18,7 @@ module.exports = function (config) {
       // {pattern: 'src/components/*.vue', watched: false},
       {pattern: 'test/**/*.spec.js', watched: false},
       // {pattern: 'test/**/*.spec.js', watched: false},
-      // {pattern: 'test/index.js', watched: false},
+      // {pattern: 'test/main.js', watched: false},
       // {pattern: 'src/components/*.vue', watched: false},
     ],
 
@@ -33,7 +33,7 @@ module.exports = function (config) {
       // 'src/components/*.vue': ['webpack', 'sourcemap'],
       'test/**/*.spec.js': ['coverage', 'webpack', 'sourcemap']
       // '**/*.vue': ['webpack', 'sourcemap'],
-      // 'test/index.js': ['webpack', 'sourcemap'],
+      // 'test/main.js': ['webpack', 'sourcemap'],
     },
 
     // client: {

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0-development",
   "private": false,
   "license": "MIT",
+  "main": "src/index.js",
   "publishConfig": {
     "registry": "http://registry.npmjs.org/"
   },
@@ -14,7 +15,7 @@
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs",
     "start-storybook": "cross-env NODE_ENV=dev  start-storybook -s ./,./public",
-    "build-storybook": "cross-env NODE_ENV=prod  build-storybook -s ./public",
+    "build-storybook": "cross-env NODE_ENV=prod  build-storybook -s ./public -c .storybook -o ./dist",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
     "commitmsg": "validate-commit-msg",
     "release-major": "standard-version --release-as major",
@@ -82,6 +83,7 @@
     "chai": "^4.2.0",
     "chai-as-promised": "^7.1.1",
     "cheerio": "^1.0.0-rc.3",
+    "clipboard": "^2.0.6",
     "codecov": "^3.7.2",
     "commitizen": "^4.1.2",
     "cross-env": "^7.0.2",

src/button.stories.mdx

@@ -28,6 +28,15 @@ This is **HButton** component description
 <h-button type="success" icon="h-ico-bookmark-alt" size="small"/>   
 ```
 
+<Story name='outline' height='50px'>{{
+  components: { HButton },
+  template: '<h-button type="light" size="small" outline="true">Button</h-button>'
+}}</Story>
+
+```
+<h-button type="success" size="small" outline="true">Button</h-button>
+```
+
 
 
 ## Props

src/components/HButton.vue

@@ -35,11 +35,15 @@
         type: Boolean,
         default: false,
       },
+      outline:{
+        type:Boolean,
+        default: false,
+      }
     },
     computed: {
       classes() {
         const name = nameMap[this.type];
-        return oneOfCl(name, this.size)
+        return oneOfCl(name, this.size,this.outline)
       }
     },
     methods: {

src/utils/assist.js

@@ -11,7 +11,9 @@ export const nameMap = {
   success: 'green',
   warning: 'yellow',
   danger: 'red',
-  info: 'indigo'
+  info: 'indigo',
+  dark: 'black',
+  light: 'white'
 };
 
 export const sizeMap = {
@@ -36,16 +38,22 @@ export const sizeMap = {
 };
 
 export const fontSizeMap = {
-  small:`${prefixCls}-text-sm`,
-  middle:`${prefixCls}-text-lg`,
-  large:`${prefixCls}-text-xl`,
+  small: `${prefixCls}-text-sm`,
+  middle: `${prefixCls}-text-lg`,
+  large: `${prefixCls}-text-xl`,
 };
 
-export function oneOfCl(value, size) {
+export function oneOfCl(value, size, outline) {
   const paddingCls = getPaddingCls(size);
   if (value === 'default') {
+    if (outline) {
+      return `${prefixCls}-rounded ${prefixCls}-bg-white ${prefixCls}-border  ${prefixCls}-border-${value}  dark:${prefixCls}-bg-white ${prefixCls}-text-black dark:${prefixCls}-text-black ${prefixCls}-border-color focus:${prefixCls}-outline-none ${paddingCls}`;
+    }
     return `${prefixCls}-rounded ${prefixCls}-bg-white  dark:${prefixCls}-bg-white ${prefixCls}-text-black dark:${prefixCls}-text-black ${prefixCls}-border-color focus:${prefixCls}-outline-none ${paddingCls}`;
   }
+  if (outline) {
+    return `${prefixCls}-rounded ${prefixCls}-bg-${value}-${500} ${prefixCls}-border  ${prefixCls}-border-${value}  dark:${prefixCls}-bg-${value}-${500} hover:${prefixCls}-bg-${value}-${600} dark:hover:${prefixCls}-bg-${value}-${600} focus:${prefixCls}-bg-${value}-${600} dark:focus:${prefixCls}-bg-${value}-${600} ${prefixCls}-text-${value} dark:${prefixCls}-text-${value} ${prefixCls}-transition ${prefixCls}-duration-${100} ${prefixCls}-ease-in  focus:${prefixCls}-outline-none  ${paddingCls}`;
+  }
   return `${prefixCls}-rounded ${prefixCls}-bg-${value}-${500}  dark:${prefixCls}-bg-${value}-${500} hover:${prefixCls}-bg-${value}-${600} dark:hover:${prefixCls}-bg-${value}-${600} focus:${prefixCls}-bg-${value}-${600} dark:focus:${prefixCls}-bg-${value}-${600} ${prefixCls}-text-white dark:${prefixCls}-text-white ${prefixCls}-transition ${prefixCls}-duration-${100} ${prefixCls}-ease-in  focus:${prefixCls}-outline-none  ${paddingCls}`;
 }