@lambo-design/variant-form 2.2.9-beta.0

package/src/components/form-designer/setting-panel/property-editor/customClass-editor.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.customClass')">
+    <el-select v-model="optionModel.customClass" multiple filterable allow-create
+               default-first-option>
+      <el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+  import {deepClone} from "@/utils/util";
+
+  export default {
+    name: "customClass-editor",
+    componentName: 'PropertyEditor',
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        cssClassList: [],
+      }
+    },
+    created() {
+      this.cssClassList = deepClone(this.designer.getCssClassList())
+      //监听表单css代码改动事件并重新加载！
+      this.designer.handleEvent('form-css-updated', (cssClassList) => {
+        this.cssClassList = cssClassList
+      })
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/defaultValue-editor.vue

@@ -0,0 +1,25 @@
+<template>
+  <el-form-item v-if="!hasConfig('optionItems')" :label="i18nt('designer.setting.defaultValue')">
+    <el-input type="text" v-model="optionModel.defaultValue"
+              @change="emitDefaultValueChange"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "defaultValue-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/disabled-editor.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.disabled')">
+    <el-switch v-model="optionModel.disabled"></el-switch>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "disabled-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/displayStyle-editor.vue

@@ -0,0 +1,26 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.displayStyle')">
+    <el-radio-group v-model="optionModel.displayStyle">
+      <el-radio label="inline">{{i18nt('designer.setting.inlineLayout')}}</el-radio>
+      <el-radio label="block">{{i18nt('designer.setting.blockLayout')}}</el-radio>
+    </el-radio-group>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "displayStyle-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/editable-editor.vue

@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.editable')">
+    <el-switch v-model="optionModel.editable"></el-switch>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "editable-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/endPlaceholder-editor.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.endPlaceholder')">
+    <el-input type="text" v-model="optionModel.endPlaceholder"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "endPlaceholder-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js

@@ -0,0 +1,12 @@
+import emitter from '@/utils/emitter'
+
+export default {
+  mixins: [emitter],
+  created() {},
+  methods: {
+    editEventHandler(eventName, eventParams) {
+      this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]])
+    },
+
+  }
+}

package/src/components/form-designer/setting-panel/property-editor/event-handler/onAppendButtonClick-editor.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onAppendButtonClick" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onAppendButtonClick', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onAppendButtonClick-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: [],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/event-handler/onBeforeUpload-editor.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onBeforeUpload" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onBeforeUpload', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onBeforeUpload-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['file'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/event-handler/onBlur-editor.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onBlur" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onBlur', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onBlur-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['event'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/event-handler/onChange-editor.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onChange" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onChange', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onChange-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['value', 'oldValue', 'subFormData', 'rowId'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/event-handler/onClick-editor.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onClick" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onClick', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onClick-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: [],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/event-handler/onCreated-editor.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-form-item label="onCreated" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onCreated', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onCreated-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: [],
+      }
+    }
+
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/event-handler/onFileRemove.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onFileRemove" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onFileRemove', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onFileRemove-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['file', 'fileList'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/event-handler/onFocus-editor.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onFocus" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onFocus', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onFocus-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['event'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/event-handler/onInput-editor.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onInput" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onInput', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onInput-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['value'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/event-handler/onMounted-editor.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onMounted" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onMounted', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onMounted-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: [],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/event-handler/onRemoteQuery-editor.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onRemoteQuery" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onRemoteQuery', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onRemoteQuery-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['keyword'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowAdd-editor.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onSubFormRowAdd" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onSubFormRowAdd', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onSubFormRowAdd-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['subFormData', 'newRowId'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowChange-editor.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onSubFormRowChange" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onSubFormRowChange', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onSubFormRowChange-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['subFormData'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowDelete-editor.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onSubFormRowDelete" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onSubFormRowDelete', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onSubFormRowDelete-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['subFormData', 'deletedDataRow'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowInsert-editor.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onSubFormRowInsert" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onSubFormRowInsert', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onSubFormRowInsert-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['subFormData', 'newRowId'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/form-designer/setting-panel/property-editor/event-handler/onUploadError-editor.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onUploadError" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onUploadError', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onUploadError-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['error', 'file', 'fileList'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>