finish source code and demo

Author: ustbhuangyi

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["env"],
+  "plugins": ["transform-object-rest-spread"]
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,3 @@
+build/*.js
+config/*.js
+example/modules/*.js

.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // add your custom rules here
+  'rules': {
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'space-before-function-paren': 0
+  }
+}

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+deploy/
+test/unit/coverage
+test/e2e/reports
+selenium-debug.log
+
+# Test publish files
+cube-ui-*.tgz
+package/
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

.idea/vcs.xml

@@ -0,0 +1,26 @@
+import 'babel-polyfill'
+import Vue from 'vue'
+import App from './components/App.vue'
+import Dialog from './components/dialog.vue'
+import CreateAPI from 'create-api'
+
+Vue.use(CreateAPI, {
+  componentPrefix: 'z-'
+})
+
+Vue.createAPI(Dialog, true)
+
+Vue.config.debug = true
+
+Dialog.$create({
+  $props: {
+    title: 'Hello',
+    content: 'I am from pure JS'
+  }
+}).show()
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})
+

examples/dialog/app.js

@@ -0,0 +1,38 @@
+<template>
+  <div id="app">
+    <h1>Dialog Demo</h1>
+    <button @click="show">Show Dialog</button>
+    <button @click="change">Change content</button>
+    <child></child>
+  </div>
+</template>
+
+<script>
+  import Child from './child.vue'
+
+  export default {
+    name: 'App',
+    data() {
+      return {
+        content: 'I am from App'
+      }
+    },
+    components: {Child},
+    methods: {
+      show() {
+        this.dialog = this.dialog || this.$createDialog({
+          $props: {
+            title: 'Hello',
+            content: 'content'
+          }
+        })
+        this.dialog.show()
+      },
+      change() {
+        this.content = 'I am from App and content changed!'
+      }
+    }
+  }
+</script>
+<style>
+</style>

examples/dialog/components/App.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <h1>I am child</h1>
+    <button @click="show">Show Dialog in child</button>
+    <button @click="showPure">Show pure JS Dialog in child</button>
+  </div>
+</template>
+
+<script>
+  import Dialog from './dialog.vue'
+
+  export default {
+    name: 'child',
+    methods: {
+      show() {
+        this.dialog = this.dialog || this.$createDialog({
+          $props: {
+            title: 'Hi',
+            content: 'I am from child'
+          }
+        })
+        this.dialog.show()
+      },
+      showPure() {
+        Dialog.$create({
+          $props: {
+            title: 'Hello',
+            content: 'I am from pure JS in Child'
+          }
+        }).show()
+      }
+    }
+  }
+</script>
+
+<style>
+
+</style>

examples/dialog/components/child.vue

@@ -0,0 +1,82 @@
+<template>
+  <div v-show="visible" class="mask">
+    <div class="dialog">
+      <h1 class="title">{{title}}</h1>
+      <div class="content">{{content}}</div>
+      <div @click="hide" class="btn">confirm</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'z-dialog',
+    props: {
+      content: {
+        type: String,
+        default: 'I am content'
+      },
+      title: {
+        type: String,
+        default: 'I am title'
+      }
+    },
+    data() {
+      return {
+        visible: false
+      }
+    },
+    methods: {
+      show() {
+        this.visible = true
+      },
+      hide() {
+        this.visible = false
+      }
+    }
+  }
+</script>
+<style>
+  .mask {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    background: rgba(0, 0, 0, 0.6);
+  }
+
+  .dialog {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    z-index: 200;
+    transform: translate(-50%, -50%);
+    width: 200px;
+    height: 120px;
+    text-align: center;
+    padding: 20px;
+    background: white;
+  }
+
+  .title {
+    line-height: 20px;
+    font-size: 16px;
+  }
+
+  .content {
+    line-height: 18px;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+
+  .btn {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    background: #fc8919;
+    text-align: center;
+    font-size: 16px;
+  }
+</style>

examples/dialog/components/dialog.vue

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Dialog example</title>
+    <link href="http://fonts.googleapis.com/css?family=Muli" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/__build__/shared.js"></script>
+    <script src="/__build__/dialog.js"></script>
+  </body>
+</html>

examples/dialog/index.html

@@ -0,0 +1,18 @@
+html, body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: #2c3e50;
+}
+
+ul {
+  line-height: 1.5em;
+  padding-left: 1.5em;
+}
+
+a {
+  color: #7f8c8d;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #4fc08d;
+}

examples/global.css

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>create-api examples</title>
+    <link rel="stylesheet" href="/global.css">
+  </head>
+  <body style="padding: 0 20px">
+    <h1>create-api examples</h1>
+    <ul>
+      <li><a href="dialog">Dialog</a></li>
+    </ul>
+  </body>
+</html>

examples/index.html

@@ -0,0 +1,25 @@
+const express = require('express')
+const webpack = require('webpack')
+const webpackDevMiddleware = require('webpack-dev-middleware')
+const webpackHotMiddleware = require('webpack-hot-middleware')
+const WebpackConfig = require('./webpack.config')
+
+const app = express()
+const compiler = webpack(WebpackConfig)
+
+app.use(webpackDevMiddleware(compiler, {
+  publicPath: '/__build__/',
+  stats: {
+    colors: true,
+    chunks: false
+  }
+}))
+
+app.use(webpackHotMiddleware(compiler))
+
+app.use(express.static(__dirname))
+
+const port = process.env.PORT || 8080
+module.exports = app.listen(port, () => {
+  console.log(`Server listening on http://localhost:${port}, Ctrl+C to stop`)
+})

examples/server.js

@@ -0,0 +1,57 @@
+const fs = require('fs')
+const path = require('path')
+const webpack = require('webpack')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
+module.exports = {
+  mode: 'development',
+
+  entry: fs.readdirSync(__dirname).reduce((entries, dir) => {
+    const fullDir = path.join(__dirname, dir)
+    const entry = path.join(fullDir, 'app.js')
+    if (fs.statSync(fullDir).isDirectory() && fs.existsSync(entry)) {
+      entries[dir] = ['webpack-hot-middleware/client', entry]
+    }
+
+    return entries
+  }, {}),
+
+  output: {
+    path: path.join(__dirname, '__build__'),
+    filename: '[name].js',
+    chunkFilename: '[id].chunk.js',
+    publicPath: '/__build__/'
+  },
+
+  module: {
+    rules: [
+      { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] },
+      { test: /\.vue$/, use: ['vue-loader'] },
+      { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] }
+    ]
+  },
+
+  resolve: {
+    alias: {
+      'create-api': path.resolve(__dirname, '../src/index.js')
+    }
+  },
+
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        vendors: {
+          name: 'shared',
+          filename: 'shared.js',
+          chunks: 'initial'
+        }
+      }
+    }
+  },
+
+  plugins: [
+    new VueLoaderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin()
+  ]
+}