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

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

@@ -0,0 +1,28 @@
+<template>
+  <el-form-item label-width="0">
+    <el-divider class="custom-divider-margin-top">{{i18nt('designer.setting.optionsSetting')}}</el-divider>
+    <option-items-setting :designer="designer" :selected-widget="selectedWidget"></option-items-setting>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import OptionItemsSetting from "@/components/form-designer/setting-panel/option-items-setting"
+
+  export default {
+    name: "optionItems-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    components: {
+      OptionItemsSetting,
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.placeholder')">
+    <el-input type="text" v-model="optionModel.placeholder"></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: "placeholder-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.precision')">
+    <el-input-number v-model="optionModel.precision" :min="0" class="hide-spin-button" style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "precision-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

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

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

package/src/components/form-designer/setting-panel/property-editor/propertyMixin.js

@@ -0,0 +1,55 @@
+export default {
+  methods: {
+    hasConfig(configName) {
+      if (!this.designer || !this.designer.selectedWidget) {
+        return false
+      }
+
+      return this.designer.hasConfig(this.selectedWidget, configName)
+    },
+
+    emitDefaultValueChange() {
+      if (!!this.designer) {
+        if (!!this.designer.formWidget) {
+          let fieldWidget = this.designer.formWidget.getWidgetRef(this.designer.selectedWidget.options.name)
+          if (!!fieldWidget && !!fieldWidget.refreshDefaultValue) {
+            fieldWidget.refreshDefaultValue()
+          }
+        }
+      }
+    },
+
+    inputNumberHandler({target}) {
+      target.value = target.value.replace(/[^0-9]/gi, '')
+    },
+
+    onRemoteChange(val) {
+      if (!!val) {
+        this.optionModel.filterable = true
+        this.optionModel.allowCreate = false
+      }
+    },
+
+    onMultipleSelected(val) {
+      if (val) {
+        //debugger
+
+        // 清空已选项，否则console会报错！！
+        let foundRef = this.designer.formWidget.getWidgetRef(this.optionModel.name)
+        if (!!foundRef && !!foundRef.clearSelectedOptions) {
+          foundRef.clearSelectedOptions()
+        }
+
+        this.optionModel.defaultValue = []  //清空原默认值!!
+      } else {
+        if (!!this.optionModel.defaultValue && (this.optionModel.defaultValue.length > 0)) {
+          this.optionModel.defaultValue = this.optionModel.defaultValue[0]
+        } else {
+          this.optionModel.defaultValue = ''
+        }
+      }
+    },
+
+
+  }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.requiredHint')">
+    <el-input type="text" v-model="optionModel.requiredHint"></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: "requiredHint-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.widgetSize')">
+    <el-select v-model="optionModel.size">
+      <el-option v-for="item in widgetSizes" :key="item.value" :label="item.label"
+                 :value="item.value">
+      </el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "size-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        widgetSizes: [
+          {label: 'default', value: ''},
+          {label: 'large', value: 'large'},
+          {label: 'medium', value: 'medium'},
+          {label: 'small', value: 'small'},
+          {label: 'mini', value: 'mini'},
+        ],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.textAlign')" v-if="(selectedWidget.type === 'static-text')">
+    <el-radio-group v-model="optionModel.textAlign" class="radio-group-custom">
+      <el-radio-button label="left">
+        {{i18nt('designer.setting.leftAlign')}}</el-radio-button>
+      <el-radio-button label="center">
+        {{i18nt('designer.setting.centerAlign')}}</el-radio-button>
+      <el-radio-button label="right">
+        {{i18nt('designer.setting.rightAlign')}}</el-radio-button>
+    </el-radio-group>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "textAlign-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .radio-group-custom {
+    ::v-deep .el-radio-button__inner {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+  }
+</style>

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

@@ -0,0 +1,33 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.displayType')" v-if="selectedWidget.type === 'input'">
+    <el-select v-model="optionModel.type">
+      <el-option label="text" value="text"></el-option>
+      <!-- 当input的type设置为number时，如果输入非数字字符，则v-model拿到的值为空字符串，无法实现输入校验！故屏蔽之！！ -->
+      <!--
+      <el-option label="number" value="number"></el-option>
+      -->
+      <el-option label="password" value="password"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "type-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    computed: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

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

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

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

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

@@ -0,0 +1,48 @@
+<template>
+  <el-form-item>
+    <span slot="label">{{i18nt('designer.setting.validation')}}
+      <el-tooltip effect="light" :content="i18nt('designer.setting.validationHelp')">
+        <i class="el-icon-info"></i></el-tooltip>
+    </span>
+    <el-select v-model="optionModel.validation" filterable clearable allow-create default-first-option>
+      <el-option v-for="(fv, fvIdx) in fieldValidators"
+                 :key="fvIdx"
+                 :label="fv.label"
+                 :value="fv.value">
+      </el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "validation-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        fieldValidators: [
+          {value: 'number', label: this.i18nt('designer.hint.numberValidator')},
+          {value: 'letter', label: this.i18nt('designer.hint.letterValidator')},
+          {value: 'letterAndNumber', label: this.i18nt('designer.hint.letterAndNumberValidator')},
+          {value: 'mobilePhone', label: this.i18nt('designer.hint.mobilePhoneValidator')},
+          {value: 'email', label: this.i18nt('designer.hint.emailValidator')},
+          {value: 'url', label: this.i18nt('designer.hint.urlValidator')},
+          {value: 'noChinese', label: this.i18nt('designer.hint.noChineseValidator')},
+          {value: 'chinese', label: this.i18nt('designer.hint.chineseValidator')},
+        ],
+      }
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>

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

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