@maxelms/create-plugin-cli 1.1.0

package/templates/vue-micro-button/src/App.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="app">
+    <!-- 集成在 apaas 中时会走该逻辑 -->
+    <span v-if="buttonName" @click="visible = true">{{buttonName}}</span>
+    <!-- 由于独立开发时没有 apaas 传递的上下文数据，会渲染一个按钮辅助开发 -->
+    <button v-if="!buttonName" @click="visible = true">自定义按钮</button>
+    <el-dialog
+      append-to-body
+      title="弹窗"
+      width="30%"
+      :visible.sync="visible"
+    >
+      <span>可以在此处编写弹出层 UI 逻辑</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="visible = false">取 消</el-button>
+        <el-button type="primary" @click="visible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'App',
+  data() {
+    return {
+      visible: false,
+      buttonName: this.$root?.masterProps?.originalButtonProps?.name,
+    }
+  },
+  components: {
+
+  },
+  methods: {
+    
+  },
+  created() {
+    
+  }
+}
+</script>
+
+<style>
+
+</style>

package/templates/vue-micro-button/src/main.js

@@ -0,0 +1,44 @@
+import Vue from 'vue'
+import ElementUI from 'element-ui';
+import { registerPlugin, poweredByMaxelms } from '@max-kit/max-api'
+import App from './App.vue'
+import 'element-ui/lib/theme-chalk/index.css';
+
+Vue.use(ElementUI);
+
+Vue.config.productionTip = false
+
+window.__SINGLETON_MODE__ = true
+
+const vms = {}
+
+const container = '#micro-button-root';
+
+const render = (props) => {
+  const { containerId } = props || {}
+  vms[containerId] = new Vue({
+    data: {
+      masterProps: props || {}
+    },
+    render: h => h(App),
+  }).$mount(containerId ? `#${containerId} ${container}` : container)
+}
+
+if (poweredByMaxelms) {
+  registerPlugin({
+    mount(props) {
+      render(props)
+    },
+    update(props) {
+      if (vms[props.containerId]) {
+        vms[props.containerId].masterProps = props
+      }
+    },
+    unmount(props) {
+      vms[props.containerId]?.$destroy?.()
+      vms[props.containerId] = null
+    }
+  });
+} else {
+  render()
+}

package/templates/vue-micro-button/vue.config.js.tpl

@@ -0,0 +1,51 @@
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+  pages: {
+    index: {
+      entry: "src/main.js",
+      template: "public/index.html",
+      filename: "index.html",
+      title: "Maxelms Plugin",
+    },
+    <% if (configurationType === 'html') {%>
+    configuration: {
+      entry: "configuration/main.js",
+      template: "public/configuration.html",
+      filename: "configuration.html",
+      title: "Maxelms Plugin Configurations",
+    },
+    <% } %>
+  },
+  publicPath: './',
+  css: {
+    extract: true,
+  },
+  productionSourceMap: false,
+  devServer: {
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+    port: 8080,
+    // open: ['/', '/playground.html'],
+    // contentBase: path.join(__dirname, 'examples/'),
+  },
+  chainWebpack: (config) => {
+    config.module
+      .rule('fonts')
+      .test(/.(ttf|otf|eot|woff|woff2)$/)
+      .use('url-loader')
+      .loader('url-loader')
+      .tap(() => ({ name: '/fonts/[name].[hash:8].[ext]' }))
+      .end()
+  },
+  configureWebpack: {
+    plugins: [
+      new CopyWebpackPlugin([
+        { from: 'README.md' },
+        { from: 'manifest.json' },
+      ]),
+    ]
+  },
+};

package/templates/vue-micro-field/.gitignore.tpl

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/dist
+
+# misc
+.DS_Store
+
+# umi
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/.env.local
+/dist.maxplugin
+/dist.zip
+/.vscode

package/templates/vue-micro-field/README.md

@@ -0,0 +1,5 @@
+# Maxelms Custom Field
+
+## 功能介绍
+
+## 使用说明

package/templates/vue-micro-field/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    '@babel/plugin-proposal-optional-chaining'
+  ]
+}

package/templates/vue-micro-field/configuration/App.vue

@@ -0,0 +1,78 @@
+<template>
+  <el-form label-position="top" :model="form">
+    <el-form-item label="是否禁用">
+      <el-switch v-model="form.disabled"></el-switch>
+    </el-form-item>
+    <el-form-item label="最大长度">
+      <el-input-number v-model="form.maxLength"></el-input-number>
+    </el-form-item>
+    <el-form-item label="控件大小">
+      <el-select v-model="form.size">
+        <el-option label="small" value="small"></el-option>
+        <el-option label="default" value="default"></el-option>
+        <el-option label="large" value="large"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="占位符">
+      <el-input v-model="form.placeholder"></el-input>
+    </el-form-item>
+    <el-form-item label="label">
+      <el-input v-model="form.label"></el-input>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { PluginChannel } from '@max-kit/max-api'
+
+export default {
+  name: 'App',
+  data() {
+    return {
+      form: {
+        size: 'default',
+        disabled: false,
+        placeholder: '',
+        maxLength: 1,
+        label: '',
+      },
+      pluginChannel: null
+    };
+  },
+  mounted() {
+    this.pluginChannel = new PluginChannel({
+      init: this.initConfigs
+    })
+  },
+  beforeDestroy() {
+    this.pluginChannel && this.pluginChannel.destroy()
+  },
+  methods: {
+    initConfigs (configs) {
+      if (!configs || typeof configs !== 'object') return
+      this.form = {
+        ...this.form,
+        ...configs
+      }
+    }
+  },
+  watch: {
+    // 表单变化是，提交配置信息
+    form: {
+      handler() {
+        const config = { ...this.form };
+        this.pluginChannel.update(config);
+      },
+      deep: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</style>

package/templates/vue-micro-field/configuration/main.js

@@ -0,0 +1,11 @@
+
+import Vue from 'vue'
+import App from './App.vue'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+Vue.use(ElementUI);
+
+new Vue({
+    render: h => h(App),
+}).$mount('#root')

package/templates/vue-micro-field/manifest.json.tpl

@@ -0,0 +1,7 @@
+{
+  "configurationType": "<%= configurationType %>",
+  "fieldTypes": ["TEXT"],
+  "deviceTypes": ["mobile", "pc"],
+  "bizTypes": ["standard-object", "cform", "approval"],
+  "slotTypes": ["table-cell", "form-item"]
+}

package/templates/vue-micro-field/package.json.tpl

@@ -0,0 +1,53 @@
+{
+  "name": "<%= pluginName %>",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "start": "vue-cli-service serve",
+    "build": "vue-cli-service build && maxelms-plugin-cli -c",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@max-kit/max-api": "1.0.1",
+    "core-js": "3.6.5",
+    "element-ui": "2.15.6",
+    "vue": "2.6.11"
+  },
+  "devDependencies": {
+    "@maxelms/create-plugin-cli": "<%= cliVersion %>",
+    "@vue/cli-plugin-babel": "4.5.0",
+    "@vue/cli-plugin-eslint": "4.5.0",
+    "@vue/cli-service": "4.5.0",
+    "archiver": "5.3.1",
+    "babel-eslint": "10.1.0",
+    "copy-webpack-plugin": "5.1.1",
+    "less": "4.1.3",
+    "less-loader": "5.0.0",
+    "eslint": "6.7.2",
+    "eslint-plugin-vue": "6.2.2",
+    "sass": "1.47.0",
+    "sass-loader": "8.0.2",
+    "url-loader": "2.2.0",
+    "vue-template-compiler": "2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/templates/vue-micro-field/public/basicConfiguration.json

@@ -0,0 +1,30 @@
+{
+  "propName1": {
+    "label": "配置项一",
+    "type": "string",
+    "defaultValue": "配置项内容"
+  },
+  "propName2": {
+    "label": "配置项二",
+    "type": "number",
+    "defaultValue": 350
+  },
+  "propName3": {
+    "label": "配置项三",
+    "type": "select",
+    "options": [
+      {
+        "label": "选项1",
+        "value": "option1"
+      },
+      {
+        "label": "选项2",
+        "value": "option2"
+      },
+      {
+        "label": "选项3",
+        "value": "option3"
+      }
+    ]
+  }
+}

package/templates/vue-micro-field/public/configuration.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Maxelms 字段组件</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/templates/vue-micro-field/public/configuration.json

@@ -0,0 +1,30 @@
+{
+  "propName1": {
+    "label": "配置项一",
+    "type": "string",
+    "defaultValue": "配置项内容"
+  },
+  "propName2": {
+    "label": "配置项二",
+    "type": "number",
+    "defaultValue": 350
+  },
+  "propName3": {
+    "label": "配置项三",
+    "type": "select",
+    "options": [
+      {
+        "label": "选项1",
+        "value": "option1"
+      },
+      {
+        "label": "选项2",
+        "value": "option2"
+      },
+      {
+        "label": "选项3",
+        "value": "option3"
+      }
+    ]
+  }
+}

package/templates/vue-micro-field/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Maxelms 字段组件</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/templates/vue-micro-field/scripts/compress.js

@@ -0,0 +1,32 @@
+const fs = require('fs');
+const archiver = require('archiver');
+
+const distDir = 'dist'
+if (fs.existsSync(distDir)) {
+  if (fs.existsSync('dist.maxplugin')) {
+    fs.unlinkSync('dist.maxplugin')
+  }
+
+  const output = fs.createWriteStream('dist.maxplugin');
+  const archive = archiver('zip', {
+    zlib: { level: 9 }
+  });
+
+  output.on('close', function() {
+    console.log('Compress completed!');
+  });
+
+  archive.on('error', function(err) {
+    console.log('Compress failed!');
+    throw err;
+  });
+
+  archive.pipe(output);
+
+
+  archive.directory('dist/', 'dist');
+
+  archive.finalize();
+} else {
+  console.log('No dist directory found!');
+}

package/templates/vue-micro-field/src/App.vue.tpl

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <div class="maxelms-customize-component-<%= timestamp %>">
+      <input
+        :style="{width: `${width}px`}"
+        :value="value"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        @input="change"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'App',
+  components: {
+  },
+  methods: {
+    change(e) {
+      this.onChange && this.onChange({
+        text: null,
+        value: e.target.value
+      })
+    }
+  },
+  computed: {
+    /** value、onChange 是字段组件作为表单受控组件的必要属性 */
+    value () {
+      return this.$root?.masterProps?.value?.value || "欢迎使用 Maxelms 字段组件"
+    },
+    onChange () {
+      return this.$root?.masterProps?.onChange
+    },
+    /** 是否禁用 */
+    disabled () {
+      return this.$root?.masterProps?.configurations?.propName3
+    },
+    /** 控件宽度 */
+    width () {
+      return this.$root?.masterProps?.configurations?.propName2 || 350
+    },
+    /** 提示文本 */
+    placeholder () {
+      return this.$root?.masterProps?.configurations?.propName1
+    },
+  },
+}
+</script>
+
+<style lang="less">
+@import "./style.less";
+</style>

package/templates/vue-micro-field/src/main.js

@@ -0,0 +1,38 @@
+import Vue from 'vue'
+import { registerPlugin, poweredByMaxelms } from '@max-kit/max-api'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+window.__SINGLETON_MODE__ = true
+
+const vms = {}
+
+const render = (props) => {
+  const { containerId } = props || {}
+  vms[containerId] = new Vue({
+    data: {
+      masterProps: props || {}
+    },
+    render: h => h(App),
+  }).$mount(containerId ? `#${containerId} #root` : '#root')
+}
+
+if (poweredByMaxelms) {
+  registerPlugin({
+    mount(props) {
+      render(props)
+    },
+    update(props) {
+      if (vms[props.containerId]) {
+        vms[props.containerId].masterProps = props
+      }
+    },
+    unmount(props) {
+      vms[props.containerId]?.$destroy?.()
+      vms[props.containerId] = null
+    }
+  });
+} else {
+  render()
+}

package/templates/vue-micro-field/src/style.less.tpl

@@ -0,0 +1,16 @@
+
+@prefixCls: maxelms-customize-component-<%= timestamp %>;
+
+.@{prefixCls} {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    input {
+      width: 300px;
+      text-align: center;
+    }
+    img {
+      width: 350px;
+    }
+}

package/templates/vue-micro-field/vue.config.js.tpl

@@ -0,0 +1,51 @@
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+  pages: {
+    index: {
+      entry: "src/main.js",
+      template: "public/index.html",
+      filename: "index.html",
+      title: "Maxelms Plugin",
+    },
+    <% if (configurationType === 'html') {%>
+    configuration: {
+      entry: "configuration/main.js",
+      template: "public/configuration.html",
+      filename: "configuration.html",
+      title: "Maxelms Plugin Configurations",
+    },
+    <% } %>
+  },
+  publicPath: './',
+  css: {
+    extract: true,
+  },
+  productionSourceMap: false,
+  devServer: {
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+    port: 8080,
+    open: ['/', '/playground.html'],
+    contentBase: path.join(__dirname, 'examples/'),
+  },
+  chainWebpack: (config) => {
+    config.module
+      .rule('fonts')
+      .test(/.(ttf|otf|eot|woff|woff2)$/)
+      .use('url-loader')
+      .loader('url-loader')
+      .tap(() => ({ name: '/fonts/[name].[hash:8].[ext]' }))
+      .end()
+  },
+  configureWebpack: {
+    plugins: [
+      new CopyWebpackPlugin([
+        { from: 'README.md' },
+        { from: 'manifest.json' },
+      ]),
+    ]
+  },
+};

package/templates/vue-micro-plugin/.gitignore.tpl

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/dist
+
+# misc
+.DS_Store
+
+# umi
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/.env.local
+/dist.maxplugin
+/dist.zip
+/.vscode

package/templates/vue-micro-plugin/README.md

@@ -0,0 +1,24 @@
+# vue-p2
+
+## Project setup
+```
+pnpm install
+```
+
+### Compiles and hot-reloads for development
+```
+pnpm run serve
+```
+
+### Compiles and minifies for production
+```
+pnpm run build
+```
+
+### Lints and fixes files
+```
+pnpm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

package/templates/vue-micro-plugin/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    '@babel/plugin-proposal-optional-chaining'
+  ]
+}