@maxelms/create-plugin-cli 1.1.18 → 1.1.19

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

@@ -0,0 +1,46 @@
+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",
+    },
+
+  },
+  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/vue3-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 '@maxelms/create-pulgin-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/vue3-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/vue3-micro-field/public/basicConfiguration.json

@@ -0,0 +1,34 @@
+{
+  "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"
+      }
+    ]
+  },
+  "externalParams": {
+    "label": "外部参数",
+    "type": "string"
+  }
+}

package/templates/vue3-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/vue3-micro-field/public/configuration.json

@@ -26,5 +26,9 @@
         "value": "option3"
       }
     ]
+  },
+  "externalParams": {
+    "label": "外部参数",
+    "type": "string"
   }
 }

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

@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>Maxelms 页面组件</title>
+    <title>Maxelms 字段组件</title>
   </head>
   <body>
     <div id="root"></div>

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

@@ -3,9 +3,10 @@
     <div class="maxelms-customize-component-<%= timestamp %>">
       <input
         :style="{width: `${width}px`}"
+        :value="value"
         :disabled="disabled"
         :placeholder="placeholder"
-        value="欢迎使用 Maxelms 页面组件"
+        @input="change"
       />
     </div>
   </div>
@@ -13,14 +14,31 @@
 
 <script>
 
+if (process.env.NODE_ENV === 'development') {
+  const runtime = require('./vue.runtime.global.js')
+  console.log(12341234123412, runtime)
+}
+
 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