custom-variant-form 2.3.1 → 2.3.2

package/src/components/form-designer/setting-panel/index.vue

@@ -1,367 +0,0 @@
-<template>
-  <el-container class="panel-container">
-    <el-tabs :active-name="activeTab" style="height: 100%; overflow: hidden">
-      <el-tab-pane :label="i18nt('designer.hint.widgetSetting')" name="1">
-        <el-scrollbar class="setting-scrollbar" :style="{height: scrollerHeight}">
-
-          <template v-if="!!designer.selectedWidget && !designer.selectedWidget.category">
-            <el-form :model="optionModel" size="mini" label-position="left" label-width="120px" class="setting-form"
-                     @submit.native.prevent>
-              <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
-                <el-collapse-item name="1" v-if="showCollapse(commonProps)" :title="i18nt('designer.setting.commonSetting')">
-                  <template v-for="(editorName, propName) in commonProps">
-                    <component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
-                               :designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
-                  </template>
-                </el-collapse-item>
-
-                <el-collapse-item name="2" v-if="showCollapse(advProps)" :title="i18nt('designer.setting.advancedSetting')">
-                  <template v-for="(editorName, propName) in advProps">
-                    <component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
-                               :designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
-                  </template>
-                </el-collapse-item>
-
-                <el-collapse-item name="3" v-if="showEventCollapse() && showCollapse(eventProps)" :title="i18nt('designer.setting.eventSetting')">
-                  <template v-for="(editorName, propName) in eventProps">
-                    <component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
-                               :designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
-                  </template>
-                </el-collapse-item>
-              </el-collapse>
-
-            </el-form>
-          </template>
-
-          <template v-if="(!!designer.selectedWidget && !!designer.selectedWidget.category)">
-            <el-form :model="optionModel" size="mini" label-position="left" label-width="120px" class="setting-form"
-                     @submit.native.prevent>
-              <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
-                <el-collapse-item name="1" v-if="showCollapse(commonProps)" :title="i18nt('designer.setting.commonSetting')">
-                  <template v-for="(editorName, propName) in commonProps">
-                    <component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
-                               :designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
-                  </template>
-                </el-collapse-item>
-
-                <el-collapse-item name="2" v-if="showCollapse(advProps)" :title="i18nt('designer.setting.advancedSetting')">
-                  <template v-for="(editorName, propName) in advProps">
-                    <component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
-                               :designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
-                  </template>
-                </el-collapse-item>
-
-                <el-collapse-item name="3" v-if="showEventCollapse() && showCollapse(eventProps)" :title="i18nt('designer.setting.eventSetting')">
-                  <template v-for="(editorName, propName) in eventProps">
-                    <component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
-                               :designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
-                  </template>
-                </el-collapse-item>
-              </el-collapse>
-            </el-form>
-          </template>
-
-        </el-scrollbar>
-      </el-tab-pane>
-
-      <el-tab-pane v-if="!!designer" :label="i18nt('designer.hint.formSetting')" name="2">
-        <el-scrollbar class="setting-scrollbar" :style="{height: scrollerHeight}">
-          <form-setting :designer="designer" :form-config="formConfig"></form-setting>
-        </el-scrollbar>
-      </el-tab-pane>
-    </el-tabs>
-
-    <el-dialog :title="i18nt('designer.setting.editWidgetEventHandler')" :visible.sync="showWidgetEventDialogFlag"
-               v-if="showWidgetEventDialogFlag" :show-close="true" class="small-padding-dialog" append-to-body v-dialog-drag
-               :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
-      <el-alert type="info" :closable="false" :title="eventHeader"></el-alert>
-      <code-editor :mode="'javascript'" :readonly="false" v-model="eventHandlerCode" ref="ecEditor"></code-editor>
-      <el-alert type="info" :closable="false" title="}"></el-alert>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="showWidgetEventDialogFlag = false">
-          {{i18nt('designer.hint.cancel')}}</el-button>
-        <el-button type="primary" @click="saveEventHandler">
-          {{i18nt('designer.hint.confirm')}}</el-button>
-      </div>
-    </el-dialog>
-
-  </el-container>
-</template>
-
-<script>
-  import CodeEditor from '@/components/code-editor/index'
-  import PropertyEditors from './property-editor/index'
-  import FormSetting from './form-setting'
-  import WidgetProperties from './propertyRegister'
-  import {
-    addWindowResizeHandler,
-  } from "@/utils/util";
-  import i18n from "@/utils/i18n";
-  import { propertyRegistered } from "@/components/form-designer/setting-panel/propertyRegister";
-
-  const {COMMON_PROPERTIES, ADVANCED_PROPERTIES, EVENT_PROPERTIES} = WidgetProperties
-
-  export default {
-    name: "SettingPanel",
-    componentName: "SettingPanel",
-    mixins: [i18n],
-    components: {
-      CodeEditor,
-      FormSetting,
-      ...PropertyEditors,
-    },
-    props: {
-      designer: Object,
-      selectedWidget: Object,
-      formConfig: Object,
-      globalDsv: {
-        type: Object,
-        default: () => ({})
-      },
-    },
-    provide() {
-      return {
-        isSubFormChildWidget: () => this.subFormChildWidgetFlag,
-      }
-    },
-    inject: ['getDesignerConfig'],
-    data() {
-      return {
-        designerConfig: this.getDesignerConfig(),
-
-        scrollerHeight: 0,
-
-        activeTab: "2",
-        widgetActiveCollapseNames: ['1', '3'], //['1', '2', '3'],
-        formActiveCollapseNames: ['1', '2'],
-
-        commonProps: COMMON_PROPERTIES,
-        advProps: ADVANCED_PROPERTIES,
-        eventProps: EVENT_PROPERTIES,
-
-        showWidgetEventDialogFlag: false,
-        eventHandlerCode: '',
-        curEventName: '',
-        eventHeader: '',
-
-        subFormChildWidgetFlag: false,
-      }
-    },
-    computed: {
-      optionModel: {
-        get() {
-          return this.selectedWidget.options
-        },
-
-        set(newValue) {
-          this.selectedWidget.options = newValue
-        }
-      },
-
-    },
-    watch: {
-      'designer.selectedWidget': {
-        handler(val) {
-          if (!!val) {
-            this.activeTab = "1"
-          }
-        }
-      },
-
-      'selectedWidget.options': {  //组件属性变动后，立即保存表单JSON！！
-        deep: true,
-        handler() {
-          this.designer.saveCurrentHistoryStep()
-        }
-      },
-
-      formConfig: {
-        deep: true,
-        handler() {
-          this.designer.saveCurrentHistoryStep()
-        }
-      },
-
-    },
-    created() {
-      this.$on('editEventHandler', function (eventName, eventParams) {
-        this.editEventHandler(eventName, eventParams)
-      })
-
-      this.designer.handleEvent('form-css-updated', (cssClassList) => {
-        this.designer.setCssClassList(cssClassList)
-      })
-
-      //监听字段组件选中事件
-      this.designer.handleEvent('field-selected', (parentWidget) => {
-        this.subFormChildWidgetFlag = !!parentWidget && (parentWidget.type === 'sub-form');
-        //console.log('subFormChildWidgetFlag', this.subFormChildWidgetFlag)
-      })
-    },
-    mounted() {
-      if (!this.designer.selectedWidget) {
-        this.activeTab = "2"
-      } else {
-        this.activeTab = "1"
-      }
-
-      this.scrollerHeight = window.innerHeight - 56 - 48 + 'px'
-      addWindowResizeHandler(() => {
-        this.$nextTick(() => {
-          this.scrollerHeight = window.innerHeight - 56 - 48 + 'px'
-          //console.log(this.scrollerHeight)
-        })
-      })
-    },
-    methods: {
-      showEventCollapse() {
-        if (this.designerConfig['eventCollapse'] === undefined) {
-          return true
-        }
-
-        return !!this.designerConfig['eventCollapse']
-      },
-
-      hasPropEditor(propName, editorName) {
-        if (!editorName) {
-          return false
-        }
-
-        /* alert组件注册了两个type属性编辑器，跳过第一个type属性编辑器，只显示第二个alert-type属性编辑器！！ */
-        if (propName.indexOf('-') <= -1) {
-          let uniquePropName = this.selectedWidget.type + '-' + propName
-          if (propertyRegistered(uniquePropName)) {
-            return false
-          }
-        }
-
-        let originalPropName = propName.replace(this.selectedWidget.type + '-', '')  //去掉组件名称前缀-，如果有的话！！
-        return this.designer.hasConfig(this.selectedWidget, originalPropName)
-      },
-
-      getPropEditor(propName, editorName) {
-        let originalPropName = propName.replace(this.selectedWidget.type + '-', '')  //去掉组件名称前缀-，如果有的话！！
-        let ownPropEditorName = `${this.selectedWidget.type}-${originalPropName}-editor`
-        //console.log(ownPropEditorName, this.$options.components[ownPropEditorName])
-        if (!!this.$options.components[ownPropEditorName]) {  //局部注册的属性编辑器组件
-          return ownPropEditorName
-        }
-
-        return !!this.$root.$options.components[ownPropEditorName] ? ownPropEditorName : editorName  //全局注册的属性编辑器组件
-      },
-
-      showCollapse(propsObj) {
-        let result = false
-
-        for (let propName in propsObj) {
-          if (!propsObj.hasOwnProperty(propName)) {
-            continue
-          }
-
-          if (this.hasPropEditor(propName, propsObj[propName])) {
-            result = true
-            break
-          }
-        }
-
-        return result
-      },
-
-      editEventHandler(eventName, eventParams) {
-        this.curEventName = eventName
-        this.eventHeader = `${this.optionModel.name}.${eventName}(${eventParams.join(', ')}) {`
-        this.eventHandlerCode = this.selectedWidget.options[eventName] || ''
-
-        // 设置字段校验函数示例代码
-        if ((eventName === 'onValidate') && (!this.optionModel['onValidate'])) {
-          this.eventHandlerCode = "  /* sample code */\n  /*\n  if ((value > 100) || (value < 0)) {\n    callback(new Error('error message'))  //fail\n  } else {\n    callback();  //pass\n  }\n  */"
-        }
-
-        this.showWidgetEventDialogFlag = true
-      },
-
-      saveEventHandler() {
-        const codeHints = this.$refs.ecEditor.getEditorAnnotations()
-        let syntaxErrorFlag = false
-        if (!!codeHints && (codeHints.length > 0)) {
-          codeHints.forEach((chItem) => {
-            if (chItem.type === 'error') {
-              syntaxErrorFlag = true
-            }
-          })
-
-          if (syntaxErrorFlag) {
-            this.$message.error(this.i18nt('designer.setting.syntaxCheckWarning'))
-            return
-          }
-        }
-
-        this.selectedWidget.options[this.curEventName] = this.eventHandlerCode
-        this.showWidgetEventDialogFlag = false
-      },
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .panel-container {
-    padding: 0 8px;
-  }
-
-  .setting-scrollbar {
-    ::v-deep .el-scrollbar__wrap {
-      overflow-x: hidden; /* IE浏览器隐藏水平滚动条箭头！！ */
-    }
-  }
-
-  .setting-collapse {
-    ::v-deep .el-collapse-item__content {
-      padding-bottom: 6px;
-    }
-
-    ::v-deep .el-collapse-item__header {
-      font-style: italic;
-      font-weight: bold;
-    }
-  }
-
-  .setting-form {
-    ::v-deep .el-form-item__label {
-      font-size: 13px;
-      //text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    ::v-deep .el-form-item--mini.el-form-item {
-      margin-bottom: 6px;
-    }
-  }
-
-  /* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
-  ::v-deep .hide-spin-button input::-webkit-outer-spin-button,
-  ::v-deep .hide-spin-button input::-webkit-inner-spin-button {
-    -webkit-appearance: none !important;
-  }
-
-  /* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
-  ::v-deep .hide-spin-button input[type="number"] {
-    -moz-appearance: textfield;
-  }
-
-  ::v-deep .custom-divider.el-divider--horizontal {
-    margin: 10px 0;
-  }
-
-  ::v-deep .custom-divider-margin-top.el-divider--horizontal {
-    margin: 20px 0;
-  }
-
-  .small-padding-dialog {
-    ::v-deep .el-dialog__body {
-      padding: 6px 15px 12px 15px;
-    }
-  }
-
-</style>

package/src/components/form-designer/setting-panel/option-items-setting.vue

@@ -1,234 +0,0 @@
-<template>
-  <div class="option-items-pane">
-    <el-radio-group v-if="(selectedWidget.type === 'radio') || ((selectedWidget.type === 'select') && !selectedWidget.options.multiple)"
-                    v-model="optionModel.defaultValue" @change="emitDefaultValueChange">
-      <draggable tag="ul" :list="optionModel.optionItems"
-                 v-bind="{group:'optionsGroup', ghostClass: 'ghost', handle: '.drag-option'}">
-        <li v-for="(option, idx) in optionModel.optionItems" :key="idx">
-          <el-radio :label="option.value">
-            <el-input v-model="option.value" size="mini" style="width: 100px"></el-input>
-            <el-input v-model="option.label" size="mini" style="width: 100px"></el-input>
-            <i class="iconfont icon-drag drag-option"></i>
-            <el-button circle plain size="mini" type="danger" @click="deleteOption(option, idx)"
-                       icon="el-icon-minus" class="col-delete-button"></el-button>
-          </el-radio>
-        </li>
-      </draggable>
-    </el-radio-group>
-    <el-checkbox-group v-else-if="(selectedWidget.type === 'checkbox') || ((selectedWidget.type === 'select') && selectedWidget.options.multiple)"
-                    v-model="optionModel.defaultValue" @change="emitDefaultValueChange">
-      <draggable tag="ul" :list="optionModel.optionItems"
-                 v-bind="{group:'optionsGroup', ghostClass: 'ghost', handle: '.drag-option'}">
-        <li v-for="(option, idx) in optionModel.optionItems" :key="idx">
-          <el-checkbox :label="option.value">
-            <el-input v-model="option.value" size="mini" style="width: 100px"></el-input>
-            <el-input v-model="option.label" size="mini" style="width: 100px"></el-input>
-            <i class="iconfont icon-drag drag-option"></i>
-            <el-button circle plain size="mini" type="danger" @click="deleteOption(option, idx)"
-                       icon="el-icon-minus" class="col-delete-button"></el-button>
-          </el-checkbox>
-        </li>
-      </draggable>
-    </el-checkbox-group>
-    <el-cascader v-else-if="(selectedWidget.type === 'cascader')"
-                 v-model="optionModel.defaultValue" :options="optionModel.optionItems"
-                 @change="emitDefaultValueChange"
-                :placeholder="i18nt('render.hint.selectPlaceholder')" style="width: 100%">
-    </el-cascader>
-    <div v-if="(selectedWidget.type === 'cascader')">
-      <el-button type="text" @click="importCascaderOptions">{{i18nt('designer.setting.importOptions')}}</el-button>
-      <el-button type="text" @click="resetDefault">{{i18nt('designer.setting.resetDefault')}}</el-button>
-    </div>
-
-    <div v-if="(selectedWidget.type === 'radio') || (selectedWidget.type === 'checkbox') || (selectedWidget.type === 'select')">
-      <el-button type="text" @click="addOption">{{i18nt('designer.setting.addOption')}}</el-button>
-      <el-button type="text" @click="importOptions">{{i18nt('designer.setting.importOptions')}}</el-button>
-      <el-button type="text" @click="resetDefault">{{i18nt('designer.setting.resetDefault')}}</el-button>
-    </div>
-
-    <el-dialog :title="i18nt('designer.setting.importOptions')" :visible.sync="showImportDialogFlag"
-               v-if="showImportDialogFlag" :show-close="true" class="small-padding-dialog" append-to-body
-               :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
-      <el-form-item>
-        <el-input type="textarea" rows="10" v-model="optionLines"></el-input>
-      </el-form-item>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="large" type="primary" @click="saveOptions">{{i18nt('designer.hint.confirm')}}</el-button>
-        <el-button size="large" type="" @click="showImportDialogFlag = false">{{i18nt('designer.hint.cancel')}}</el-button>
-      </div>
-    </el-dialog>
-
-    <el-dialog :title="i18nt('designer.setting.importOptions')" :visible.sync="showImportCascaderDialogFlag"
-               v-if="showImportCascaderDialogFlag" :show-close="true" class="small-padding-dialog" append-to-body
-               :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
-      <code-editor v-model="cascaderOptions" mode="json" :readonly="false"></code-editor>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="large" type="primary" @click="saveCascaderOptions">{{i18nt('designer.hint.confirm')}}</el-button>
-        <el-button size="large" type="" @click="showImportCascaderDialogFlag = false">{{i18nt('designer.hint.cancel')}}</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-  import Draggable from 'vuedraggable'
-  import CodeEditor from '@/components/code-editor/index'
-  import i18n from "@/utils/i18n";
-
-  export default {
-    name: "OptionItemsSetting",
-    mixins: [i18n],
-    components: {
-      Draggable,
-      //CodeEditor: () => import('@/components/code-editor/index'),
-      CodeEditor,
-    },
-    props: {
-      designer: Object,
-      selectedWidget: Object,
-    },
-    data() {
-      return {
-        showImportDialogFlag: false,
-        optionLines: '',
-
-        cascaderOptions: '',
-        showImportCascaderDialogFlag: false,
-
-        //separator: '||',
-        separator: ',',
-      }
-    },
-    computed: {
-      optionModel() {
-        return this.selectedWidget.options
-      },
-
-    },
-    watch: {
-      'selectedWidget.options': {
-        deep: true,
-        handler(val) {
-          //console.log('888888', 'Options change!')
-        }
-      },
-    },
-    methods: {
-      emitDefaultValueChange() {
-        if (!!this.designer && !!this.designer.formWidget) {
-          let fieldWidget = this.designer.formWidget.getWidgetRef(this.selectedWidget.options.name)
-          if (!!fieldWidget && !!fieldWidget.refreshDefaultValue) {
-            fieldWidget.refreshDefaultValue()
-          }
-        }
-      },
-
-      deleteOption(option, index) {
-        this.optionModel.optionItems.splice(index, 1)
-      },
-
-      addOption() {
-        let newValue = this.optionModel.optionItems.length + 1
-        this.optionModel.optionItems.push({
-          value: newValue,
-          label: 'new option'
-        })
-      },
-
-      importOptions() {
-        this.optionLines = ''
-        if (this.optionModel.optionItems.length > 0) {
-          this.optionModel.optionItems.forEach((opt) => {
-            if (opt.value === opt.label) {
-              this.optionLines += opt.value + '\n'
-            } else {
-              this.optionLines += opt.value + this.separator + opt.label + '\n'
-            }
-          })
-        }
-
-        this.showImportDialogFlag = true
-      },
-
-      saveOptions() {
-        let lineArray = this.optionLines.split('\n')
-        //console.log('test', lineArray)
-        if (lineArray.length > 0) {
-          this.optionModel.optionItems = []
-          lineArray.forEach((optLine) => {
-            if (!!optLine && !!optLine.trim()) {
-              if (optLine.indexOf(this.separator) !== -1) {
-                this.optionModel.optionItems.push({
-                  value: optLine.split(this.separator)[0],
-                  label: optLine.split(this.separator)[1]
-                })
-              } else {
-                this.optionModel.optionItems.push({
-                  value: optLine,
-                  label: optLine
-                })
-              }
-            }
-          })
-        } else {
-          this.optionModel.optionItems = []
-        }
-
-        this.showImportDialogFlag = false
-      },
-
-      resetDefault() {
-        if ((this.selectedWidget.type === 'checkbox') ||
-            ((this.selectedWidget.type === 'select') && this.selectedWidget.options.multiple)) {
-          this.optionModel.defaultValue = []
-        } else {
-          this.optionModel.defaultValue = ''
-        }
-
-        this.emitDefaultValueChange()
-      },
-
-      importCascaderOptions() {
-        this.cascaderOptions = JSON.stringify(this.optionModel.optionItems, null, '  ')
-        this.showImportCascaderDialogFlag = true
-      },
-
-      saveCascaderOptions() {
-        try {
-          let newOptions = JSON.parse(this.cascaderOptions)
-          this.optionModel.optionItems = newOptions
-          //TODO: 是否需要重置选项默认值？？
-
-          this.showImportCascaderDialogFlag = false
-        } catch (ex) {
-          this.$message.error(this.i18nt('designer.hint.invalidOptionsData') + ex.message)
-        }
-      },
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .option-items-pane ul {
-    padding-inline-start: 6px;
-    padding-left: 6px;  /* 重置IE11默认样式 */
-  }
-
-  li.ghost{
-    background: #fff;
-    border: 2px dotted $--color-primary;
-  }
-
-  .drag-option {
-    cursor: move;
-  }
-
-  .small-padding-dialog ::v-deep .el-dialog__body {
-    padding: 10px 15px;
-  }
-
-  .dialog-footer .el-button {
-    width: 100px;
-  }
-</style>

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

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

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

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

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

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