custom-variant-form 2.3.0 → 2.3.2

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/form-designer/setting-panel/property-editor/container-grid/colHeight-editor.vue

@@ -1,28 +0,0 @@
-<template>
-  <div>
-    <el-form-item :label="i18nt('designer.setting.gridColHeight')">
-      <el-input type="number" v-model="optionModel.colHeight" @input.native="inputNumberHandler"
-                min="0" class="hide-spin-button"></el-input>
-    </el-form-item>
-  </div>
-</template>
-
-<script>
-  import i18n from "@/utils/i18n"
-  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
-
-  export default {
-    name: "colHeight-editor",
-    mixins: [i18n, propertyMixin],
-    props: {
-      designer: Object,
-      selectedWidget: Object,
-      optionModel: Object,
-    },
-
-  }
-</script>
-
-<style scoped>
-
-</style>

package/src/components/form-designer/setting-panel/property-editor/container-grid/gutter-editor.vue

@@ -1,81 +0,0 @@
-<template>
-  <div>
-    <el-form-item label-width="0">
-      <el-divider class="custom-divider">{{i18nt('designer.setting.columnSetting')}}</el-divider>
-    </el-form-item>
-    <el-form-item :label="i18nt('designer.setting.gutter')">
-      <el-input-number v-model="optionModel.gutter" style="width: 100%"></el-input-number>
-    </el-form-item>
-    <el-form-item :label="i18nt('designer.setting.colsOfGrid')"></el-form-item>
-    <el-form-item label-width="0">
-      <li v-for="(colItem, colIdx) in selectedWidget.cols" :key="colIdx" class="col-item">
-        <span class="col-span-title">{{i18nt('designer.setting.colSpanTitle')}}{{colIdx + 1}}</span>
-        <el-input-number v-model.number="colItem.options.span" :min="1" :max="24"
-                         @change="(newValue, oldValue) => spanChanged(selectedWidget, colItem, colIdx, newValue, oldValue)"
-                         class="cell-span-input"></el-input-number>
-        <el-button circle plain size="mini" type="danger" @click="deleteCol(selectedWidget, colIdx)"
-                   icon="el-icon-minus" class="col-delete-button"></el-button>
-      </li>
-      <div>
-        <el-button type="text" @click="addNewCol(selectedWidget)">{{i18nt('designer.setting.addColumn')}}</el-button>
-      </div>
-    </el-form-item>
-  </div>
-</template>
-
-<script>
-  import i18n from "@/utils/i18n"
-
-  export default {
-    name: "gutter-editor",
-    mixins: [i18n],
-    props: {
-      designer: Object,
-      selectedWidget: Object,
-      optionModel: Object,
-    },
-    methods: {
-      spanChanged(curGrid) {
-        let spanSum = 0
-        curGrid.cols.forEach((colItem) => {
-          spanSum += colItem.options.span
-        })
-        if (spanSum > 24) {
-          //this.$message.info('列栅格之和超出24')
-          console.log('列栅格之和超出24')
-          //TODO: 语言字符串资源化
-        }
-
-        this.designer.saveCurrentHistoryStep()
-      },
-
-      deleteCol(curGrid, colIdx) {
-        this.designer.deleteColOfGrid(curGrid, colIdx)
-        this.designer.emitHistoryChange()
-      },
-
-      addNewCol(curGrid) {
-        this.designer.addNewColOfGrid(curGrid)
-        this.designer.emitHistoryChange()
-      },
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  li.col-item {
-    list-style: none;
-
-    span.col-span-title {
-      display: inline-block;
-      font-size: 13px;
-      width: 120px;
-    }
-
-    .col-delete-button {
-      margin-left: 6px;
-    }
-  }
-
-</style>

package/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-offset-editor.vue

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

package/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-pull-editor.vue

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

package/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-push-editor.vue

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

package/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-responsive-editor.vue

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

package/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-span-editor.vue

@@ -1,48 +0,0 @@
-<template>
-  <div>
-    <el-form-item :label="i18nt('designer.setting.colSpanTitle')" v-if="!optionModel.responsive">
-      <el-input-number v-model.number="optionModel.span" :min="1" :max="24"
-                       style="width: 100%"></el-input-number>
-    </el-form-item>
-    <el-form-item :label="i18nt('designer.setting.colSpanTitle') + '(PC)'"
-                  v-if="!!optionModel.responsive && (formConfig.layoutType === 'PC')">
-      <el-input-number v-model.number="optionModel.md" :min="1" :max="24"
-                       style="width: 100%"></el-input-number>
-    </el-form-item>
-    <el-form-item :label="i18nt('designer.setting.colSpanTitle') + '(Pad)'"
-                  v-if="!!optionModel.responsive && (formConfig.layoutType === 'Pad')">
-      <el-input-number v-model.number="optionModel.sm" :min="1" :max="24"
-                       style="width: 100%"></el-input-number>
-    </el-form-item>
-    <el-form-item :label="i18nt('designer.setting.colSpanTitle') + '(H5)'"
-                  v-if="!!optionModel.responsive && (formConfig.layoutType === 'H5')">
-      <el-input-number v-model.number="optionModel.xs" :min="1" :max="24"
-                       style="width: 100%"></el-input-number>
-    </el-form-item>
-  </div>
-</template>
-
-<script>
-  import i18n from "@/utils/i18n";
-
-  export default {
-    name: "grid-col-span-editor",
-    mixins: [i18n],
-    props: {
-      designer: Object,
-      selectedWidget: Object,
-      optionModel: Object,
-    },
-    computed: {
-      formConfig() {
-        return this.designer.formConfig
-      },
-
-
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>

package/src/components/form-designer/setting-panel/property-editor/container-sub-form/showBlankRow-editor.vue

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

package/src/components/form-designer/setting-panel/property-editor/container-sub-form/showRowNumber-editor.vue

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

package/src/components/form-designer/setting-panel/property-editor/container-sub-form/sub-form-labelAlign-editor.vue

@@ -1,36 +0,0 @@
-<template>
-  <el-form-item :label="i18nt('designer.setting.labelAlign')">
-    <el-radio-group v-model="optionModel.labelAlign" class="radio-group-custom">
-      <el-radio-button label="label-left-align">
-        {{i18nt('designer.setting.leftAlign')}}</el-radio-button>
-      <el-radio-button label="label-center-align">
-        {{i18nt('designer.setting.centerAlign')}}</el-radio-button>
-      <el-radio-button label="label-right-align">
-        {{i18nt('designer.setting.rightAlign')}}</el-radio-button>
-    </el-radio-group>
-  </el-form-item>
-</template>
-
-<script>
-  import i18n from "@/utils/i18n";
-
-  export default {
-    name: "sub-form-labelAlign-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/container-tab/tab-customClass-editor.vue

@@ -1,119 +0,0 @@
-<!--
-  因tabs属性并不包含于options属性之中，故只能跟其他options属性之内的属性值合并设置，此处选择与customClass合并！！
--->
-
-<template>
-  <div>
-    <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>
-    <el-form-item :label="i18nt('designer.setting.tabPaneSetting')"></el-form-item>
-    <el-form-item label-width="0" class="panes-setting">
-      <draggable tag="ul" :list="selectedWidget.tabs"
-                 v-bind="{group:'panesGroup', ghostClass: 'ghost', handle: '.drag-option'}">
-        <li v-for="(tpItem, tpIdx) in selectedWidget.tabs" :key="tpIdx" class="col-item">
-          <!-- span style="margin-right: 12px">{{tpIdx + 1}}</span -->
-          <el-checkbox v-model="tpItem.options.active" disabled @change="(evt) => onTabPaneActiveChange(evt, tpItem)"
-                       style="margin-right: 8px">{{i18nt('designer.setting.paneActive')}}</el-checkbox>
-          <el-input type="text" v-model="tpItem.options.label" style="width: 155px"></el-input>
-          <i class="iconfont icon-drag drag-option"></i>
-          <el-button circle plain size="mini" type="danger" @click="deleteTabPane(selectedWidget, tpIdx)"
-                     icon="el-icon-minus" class="col-delete-button"></el-button>
-        </li>
-        <div>
-          <el-button type="text" @click="addTabPane(selectedWidget)">{{i18nt('designer.setting.addTabPane')}}</el-button>
-        </div>
-      </draggable>
-    </el-form-item>
-  </div>
-</template>
-
-<script>
-  import i18n from "@/utils/i18n"
-  import Draggable from 'vuedraggable'
-  import {deepClone} from "@/utils/util";
-
-  export default {
-    name: "tab-customClass-editor",
-    componentName: 'PropertyEditor',
-    mixins: [i18n],
-    components: {
-      Draggable,
-    },
-    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
-      })
-    },
-    methods: {
-      onTabPaneActiveChange(evt, tpItem) {
-        //TODO: !!!
-      },
-
-      addTabPane(curTabs) {
-        this.designer.addTabPaneOfTabs(curTabs)
-        this.designer.emitHistoryChange()
-      },
-
-      deleteTabPane(curTabs, tpIdx) {
-        if (curTabs.tabs.length === 1) {
-          this.$message.info(this.i18nt('designer.hint.lastPaneCannotBeDeleted'))
-          return
-        }
-
-        this.designer.deleteTabPaneOfTabs(curTabs, tpIdx)
-        this.designer.emitHistoryChange()
-      },
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  li.col-item {
-    list-style: none;
-
-    span.col-span-title {
-      display: inline-block;
-      font-size: 13px;
-      width: 120px;
-    }
-
-    .col-delete-button {
-      margin-left: 6px;
-    }
-  }
-
-  .panes-setting {
-    ul {
-      padding-inline-start: 0;
-      padding-left: 0; /* 重置IE11默认样式 */
-      margin: 0;
-    }
-
-    .drag-option {
-      cursor: move;
-    }
-
-    li.ghost {
-      background: #fff;
-      border: 2px dotted $--color-primary;
-    }
-  }
-
-</style>

package/src/components/form-designer/setting-panel/property-editor/container-table-cell/cellHeight-editor.vue

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

package/src/components/form-designer/setting-panel/property-editor/container-table-cell/cellWidth-editor.vue

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

package/src/components/form-designer/setting-panel/property-editor/container-table-cell/wordBreak-editor.vue

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