Merge pull request #15 from oleksandr-belovol/widgets-preview

Added base logic

src/components/form-designer/toolbar-panel/index.vue

@@ -50,7 +50,7 @@
                  :fullscreen="(layoutType === 'H5') || (layoutType === 'Pad')">
         <div>
           <div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : (layoutType === 'Pad' ? 'pad-layout' : '')]">
-            <VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
+            <VFormRender ref="preForm" :form-json="previewFormJson" :form-data="testFormData" :preview-state="true"
                          :option-data="testOptionData"  @myEmitTest="onMyEmitTest"
                          @appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
                          @formChange="handleFormChange">
@@ -201,7 +201,8 @@
   import loadBeautifier from "@/utils/beautifierLoader"
   import { saveAs } from 'file-saver'
   import axios from 'axios'
-  import SvgIcon from "@/components/svg-icon/index";
+  import SvgIcon from "@/components/svg-icon/index"
+  import { fillUnfilledWidgetPropsForPreview, unfilledWidgetPropsDefaultData } from "@/utils/widgets-preview"
 
   export default {
     name: "ToolbarPanel",
@@ -273,6 +274,12 @@
       }
     },
     computed: {
+      previewFormJson() {
+        return {
+          widgetList: fillUnfilledWidgetPropsForPreview(this.designer.widgetList, unfilledWidgetPropsDefaultData),
+          formConfig: deepClone(this.designer.formConfig)
+        }
+      },
       formJson() {
         return {
           // widgetList: this.designer.widgetList,

src/utils/widgets-preview.js

@@ -0,0 +1,47 @@
+import { deepClone } from "@/utils/util"
+
+const widgetPropsForDetectChanges = {
+  input: { defaultValue: '' },
+  textarea: { defaultValue: '' },
+  number: { defaultValue: 0 },
+  radio: { defaultValue: null },
+  checkbox: { defaultValue: [] },
+  select: { defaultValue: '' },
+  time: { defaultValue: null },
+  'time-range': { defaultValue: null },
+  date: { defaultValue: null },
+  'date-range': { defaultValue: null },
+  switch: { defaultValue: null },
+  rate: { defaultValue: null },
+  color: { defaultValue: null },
+  slider: {},
+  'static-text': { textContent: 'static text' },
+  'html-text': { htmlContent: '<b>html text</b>' },
+  button: { label: 'button', type: '' },
+  divider: { label: '' },
+  'picture-upload': { uploadURL: '' },
+  'file-upload': { uploadURL: '' },
+  'rich-editor': {},
+  'cascader': { defaultValue: '' }
+}
+export const unfilledWidgetPropsDefaultData = {
+  input: { defaultValue: 'test text' },
+  checkbox: { defaultValue: [1] },
+  button: { label: 'custom label', type: 'success' },
+  time: { defaultValue: '16:04:48' },
+}
+export function fillUnfilledWidgetPropsForPreview(widgets, unfilledWidgetPropsData) {
+  return deepClone(widgets).map((widget) => {
+    const widgetPropsForDetect = widgetPropsForDetectChanges[widget.type]
+    Object.keys(widgetPropsForDetect).forEach((widgetProp) => {
+      if(
+        unfilledWidgetPropsData[widget.type]
+        &&
+        JSON.stringify(widget.options[widgetProp]) === JSON.stringify(widgetPropsForDetect[widgetProp])
+      ) {
+        widget.options[widgetProp] = unfilledWidgetPropsData[widget.type][widgetProp]
+      }
+    })
+    return widget
+  });
+}