support v-model config by user

packages/okam-build/example/base/scripts/ant.config.js

@@ -17,7 +17,18 @@ module.exports = merge({}, require('./base.config'), {
     ],
 
     framework: ['filter'],
-
+    component: {
+        template: {
+            modelMap: {
+                'sp-model-component': {
+                    eventType: 'spchange',
+                    eventName: 'onSpchange',
+                    attrName: 'spvalue',
+                    detailName: 'value'
+                }
+            }
+        }
+    },
     processors: {
         babel7: {
             extnames: 'js',

packages/okam-build/example/base/scripts/base.config.js

@@ -22,6 +22,14 @@ module.exports = {
         extname: 'vue',
         template: {
             useVuePrefix: true,
+            modelMap: {
+                'sp-model-component': {
+                    eventType: 'spchange',
+                    eventName: 'bindspchange',
+                    attrName: 'spvalue',
+                    detailName: 'value'
+                }
+            },
             transformTags: {
                 div: 'view',
                 p: 'view',

packages/okam-build/example/base/src/components/SpModelComponent.vue

@@ -0,0 +1,41 @@
+<template>
+    <view class="model-component-wrap">
+        <view>
+            特殊的自定义组件prop: {{spvalue}}
+        </view>
+        <view>
+            特殊的自定义组件内部data: {{valueInner}}
+        </view>
+        <input v-model="valueInner" @input="change"/>
+    </view>
+</template>
+<script>
+
+export default {
+    data: {
+        valueInner: ''
+    },
+    props: {
+        spvalue: String
+    },
+    mounted() {
+        this.valueInner = this.spvalue;
+    },
+    methods: {
+        change(event) {
+            this.$emit('spchange', event.detail);
+        }
+    }
+}
+</script>
+<style lang="stylus">
+.model-component-wrap
+    padding: 20px
+    margin: 20px
+    border: 1px solid #000
+
+    input
+        word-break: break-all
+        width: 100%
+        border: 1px solid #000
+</style>

packages/okam-build/example/base/src/pages/data/model.vue

@@ -109,7 +109,10 @@
             <view>自定义组件: {{componentVal}}</view>
             <model-component v-model="componentVal" />
         </view>
-
+        <view class="example-item">
+            <view>特殊model的自定义组件: {{spComponentVal}}</view>
+            <sp-model-component v-model="spComponentVal" />
+        </view>
         <swan-env>
         <view class="example-item">
             <view class="sub-title">事件测试</view>
@@ -140,13 +143,15 @@
 
 <script>
 import ModelComponent from '../../components/ModelComponent';
+import SpModelComponent from '../../components/SpModelComponent';
 
 export default {
     config: {
         title: 'v-model支持'
     },
     components: {
-        ModelComponent
+        ModelComponent,
+        SpModelComponent
     },
     data: {
         input1: '',
@@ -159,6 +164,7 @@ export default {
         switchVal: true,
         textareaVal: 'default value',
         componentVal: 'components',
+        spComponentVal: 'sp',
         modelData: {
             input: 'default value',
             arr: [],

packages/okam-build/lib/build/BuildManager.js

@@ -248,7 +248,8 @@ class BuildManager extends EventEmitter {
      */
     getAppBaseClassInitOptions(file, config, opts) {
         // do nothing, subclass should provide implementation if needed
-        if (this.isEnableModelSupport()) {
+        // for model framework
+        if (!opts.isApp && this.isEnableModelSupport()) {
             return {
                 isSupportObserve: this.isEnableFrameworkExtension('data')
             };

packages/okam-build/lib/processor/index.js

@@ -326,9 +326,14 @@ function compileComponent(component, file, buildManager) {
         // 在事件处理之后处理
         let enableModel = buildManager.isEnableModelSupport();
         if (enableModel) {
+            let {componentConf} = buildManager;
+            let templateConf = (componentConf && componentConf.template) || {};
             tplPlugins.push([
                 getModelSyntaxPlugin(buildManager.appType),
-                {customComponentTags}
+                {
+                    customComponentTags,
+                    modelMap: templateConf.modelMap
+                }
             ]);
         }
 

packages/okam-build/lib/processor/template/plugins/model/ant-model-plugin.js

@@ -8,54 +8,64 @@
 const {createSyntaxPlugin} = require('../helper');
 const {modelTransformer} = require('./model-helper');
 
-const MODEL_MAP = {
+const DEFAULT_MODEL_MAP = {
     // 自定义默认的规则
-    '__default': {
+    'default': {
         eventType: 'change',
         eventName: 'onChange',
-        attrName: 'value'
+        attrName: 'value',
+        detailName: 'value'
     },
     'input': {
         eventType: 'input',
         eventName: 'onInput',
-        attrName: 'value'
+        attrName: 'value',
+        detailName: 'value'
     },
     'textarea': {
         eventType: 'input',
         eventName: 'onInput',
-        attrName: 'value'
+        attrName: 'value',
+        detailName: 'value'
     },
     'picker': {
         eventType: 'change',
         eventName: 'onChange',
-        attrName: 'value'
+        attrName: 'value',
+        detailName: 'value'
     },
     'switch': {
         eventType: 'change',
         eventName: 'onChange',
-        attrName: 'checked'
+        attrName: 'checked',
+        detailName: 'value'
     },
     'checkbox-group': {
         eventType: 'change',
-        eventName: 'onChange'
+        eventName: 'onChange',
+        detailName: 'value'
         // 没有 attrName
     },
     'radio-group': {
         eventType: 'change',
-        eventName: 'onChange'
+        eventName: 'onChange',
+        detailName: 'value'
         // 没有 attrName
     }
 };
 
 
-
 module.exports = createSyntaxPlugin({
     attribute: {
         model: {
             match: 'v-model',
-            transform(attrs, name, tplOpts, opts, element) {
+            transform(attrs, name, tplOpts, opts = {}, element) {
+                opts.modelMap = Object.assign(
+                    {},
+                    DEFAULT_MODEL_MAP,
+                    opts.modelMap || {}
+                );
                 modelTransformer(
-                    MODEL_MAP,
                     attrs,
                     name,
                     tplOpts,

packages/okam-build/lib/processor/template/plugins/model/model-helper.js

@@ -4,8 +4,6 @@
  */
 
 const EVENT_FN_NAME = '__handlerProxy';
-const COMPONENT_PROP = '__default';
-const DETAIL_NAME = 'value';
 
 /**
  * 是否已声明某属性
@@ -30,12 +28,13 @@ function hasAttr(name, attrs) {
 //      Xinput="__handlerProxy"
 //      data-input-proxy="self"
 //      value="{{inputVal}}" />
-exports.modelTransformer = function (modelMap, attrs, name, tplOpts, opts, element) {
+exports.modelTransformer = function (attrs, name, tplOpts, opts, element) {
     const {logger, file} = tplOpts;
-    const customTags = (opts || {}).customComponentTags;
+    const {customComponentTags: customTags, modelMap} = opts;
     let isCustomTag = customTags && customTags.includes(element.name);
-    let attrMap = isCustomTag ? modelMap[COMPONENT_PROP] : modelMap[element.name];
-
+    let attrMap = isCustomTag
+        ? (modelMap[element.name] || modelMap.default)
+        : modelMap[element.name];
     if (!attrMap) {
         return;
     }
@@ -67,12 +66,9 @@ exports.modelTransformer = function (modelMap, attrs, name, tplOpts, opts, eleme
         attrs[attrName] = '{{' + attrs[name] + '}}';
     }
 
-    // 数据表达式
-    attrs['data-model-expr'] = attrs[name];
-
-    // 事件值，如果是 value 就不加了
-    if (detailName && detailName !== DETAIL_NAME) {
-        attrs['data-model-detail'] = detailName;
-    }
+    // '数据表达式,事件值'
+    let modelVal = attrs[name];
+    detailName && (modelVal += `,${detailName}`);
+    attrs['data-model-args'] = modelVal;
     delete attrs[name];
 };

packages/okam-build/lib/processor/template/plugins/model/swan-model-plugin.js

@@ -8,27 +8,38 @@
 const {createSyntaxPlugin} = require('../helper');
 const {modelTransformer} = require('./model-helper');
 
-const MODEL_MAP = {
-     // 自定义默认的规则
-    '__default': {
+
+/**
+ * 内置 model 规则
+ *
+ * @type {Object}
+ * @const
+ */
+const DEFAULT_MODEL_MAP = {
+    // 自定义默认的规则
+    'default': {
         eventType: 'change',
         eventName: 'bindchange',
-        attrName: 'value'
+        attrName: 'value',
+        detailName: 'value'
     },
     'input': {
         eventType: 'input',
         eventName: 'bindinput',
-        attrName: 'value'
+        attrName: 'value',
+        detailName: 'value'
     },
     'textarea': {
         eventType: 'input',
         eventName: 'bindinput',
-        attrName: 'value'
+        attrName: 'value',
+        detailName: 'value'
     },
     'picker': {
         eventType: 'change',
         eventName: 'bindchange',
-        attrName: 'value'
+        attrName: 'value',
+        detailName: 'value'
     },
     'switch': {
         eventType: 'change',
@@ -38,12 +49,14 @@ const MODEL_MAP = {
     },
     'checkbox-group': {
         eventType: 'change',
-        eventName: 'bindchange'
+        eventName: 'bindchange',
+        detailName: 'value'
         // 没有 attrName
     },
     'radio-group': {
         eventType: 'change',
-        eventName: 'bindchange'
+        eventName: 'bindchange',
+        detailName: 'value'
         // 没有 attrName
     }
 };
@@ -52,9 +65,14 @@ module.exports = createSyntaxPlugin({
     attribute: {
         model: {
             match: 'v-model',
-            transform(attrs, name, tplOpts, opts, element) {
+            transform(attrs, name, tplOpts, opts = {}, element) {
+                opts.modelMap = Object.assign(
+                    {},
+                    DEFAULT_MODEL_MAP,
+                    opts.modelMap || {}
+                );
+
                 modelTransformer(
-                    MODEL_MAP,
                     attrs,
                     name,
                     tplOpts,