From 2cdf6cb8e756e6135512ed29e986cb4fe8ad7b25 Mon Sep 17 00:00:00 2001
From: Liberty <zhuizhuidea@gmail.com>
Date: Thu, 18 Jan 2024 10:42:50 +0800
Subject: [PATCH 1/4] feat: update package version to "1.3.0-beta.1" and
 enhance form editor layout

---
 package.json                                           | 2 +-
 packages/formEditor/components/Panels/Canves/index.jsx | 5 ++---
 packages/formEditor/index.vue                          | 5 ++++-
 packages/formEditor/preview.vue                        | 7 +++++--
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 7d5db5f..909dbba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "everright-formeditor",
-  "version": "1.2.3",
+  "version": "1.3.0-beta.1",
   "description": "🦮 Powerful lowcode|vue form editor,generator,designer,builder library. It provides an easy way to create custom forms. The project is extensible, easy to use and configure, and provides many commonly used form components and functions(vue可视化低代码表单设计器、表单编辑器、element-plus vant表单设计)",
   "files": [
     "dist",
diff --git a/packages/formEditor/components/Panels/Canves/index.jsx b/packages/formEditor/components/Panels/Canves/index.jsx
index 0b5929a..97bb07e 100644
--- a/packages/formEditor/components/Panels/Canves/index.jsx
+++ b/packages/formEditor/components/Panels/Canves/index.jsx
@@ -17,7 +17,6 @@ export default defineComponent({
       isEditModel,
       isPc
     } = hooks.useTarget()
-    const form = ref('')
     const handleClick = (e) => {
       setSelection('root')
     }
@@ -27,12 +26,12 @@ export default defineComponent({
       const Layout = (<LayoutDragGable data-layout-type={'root'} class={[unref(isEditModel) && ns.e('wrap')]} data={state.store} parent={state.store} isRoot></LayoutDragGable>)
       return (
         <div>
-          <TagComponent ref={form} onClick={unref(isEditModel) && handleClick} {...typeProps.value}>
+          <TagComponent ref={ER.form} onClick={unref(isEditModel) && handleClick} {...typeProps.value}>
             {
               unref(isEditModel) ? Layout : Layout
             }
           </TagComponent>
-          {!unref(isEditModel) && !_.isEmpty(state.config) && ER.props.isShowCompleteButton && <CompleteButton handle={form}/>}
+          {!unref(isEditModel) && !_.isEmpty(state.config) && ER.props.isShowCompleteButton && <CompleteButton handle={ER.form}/>}
         </div>
       )
     }
diff --git a/packages/formEditor/index.vue b/packages/formEditor/index.vue
index 0bcafb8..9f3ebee 100644
--- a/packages/formEditor/index.vue
+++ b/packages/formEditor/index.vue
@@ -61,6 +61,7 @@ const layout = {
   pc: [],
   mobile: []
 }
+const form = ref('')
 const previewPlatform = ref('pc')
 const previewLoading = ref(true)
 const state = reactive({
@@ -391,6 +392,7 @@ const getData = () => {
 }
 const setData = props.layoutType === 1 ? setData1 : setData2
 defineExpose({
+  form,
   switchPlatform (platform) {
     switchPlatform(platform)
   },
@@ -461,7 +463,8 @@ provide('Everright', {
   addFieldData,
   canvesScrollRef,
   fireEvent,
-  getData
+  getData,
+  form
 })
 </script>
 <template>
diff --git a/packages/formEditor/preview.vue b/packages/formEditor/preview.vue
index fe0ce25..63abb03 100644
--- a/packages/formEditor/preview.vue
+++ b/packages/formEditor/preview.vue
@@ -18,6 +18,7 @@ const layout = {
   pc: [],
   mobile: []
 }
+const form = ref('')
 const state = reactive({
   store: [],
   selection: {},
@@ -67,7 +68,8 @@ provide('Everright', {
   getData,
   props,
   fireEvent,
-  setValue
+  setValue,
+  form
 })
 const setData2 = (data, value) => {
   const newData = _.cloneDeep(data)
@@ -129,7 +131,8 @@ defineExpose({
     state.platform = platform
   },
   setData,
-  getData
+  getData,
+  form
 })
 </script>
 <template>

From 319920b854e24a6fb6fbb76c1214980e18da7dda Mon Sep 17 00:00:00 2001
From: Liberty <zhuizhuidea@gmail.com>
Date: Fri, 19 Jan 2024 14:45:52 +0800
Subject: [PATCH 2/4] feat: set default value for TabsLayout and handle
 checkbox change in ConfigData3

---
 .../components/Layout/TabsLayout.jsx          |  6 +-
 .../Config/components/DataComponent3.vue      | 85 ++++++++++++++-----
 .../Panels/Config/components/PropsPanel.vue   | 11 +++
 3 files changed, 79 insertions(+), 23 deletions(-)

diff --git a/packages/formEditor/components/Layout/TabsLayout.jsx b/packages/formEditor/components/Layout/TabsLayout.jsx
index 2a4efcc..033aab1 100644
--- a/packages/formEditor/components/Layout/TabsLayout.jsx
+++ b/packages/formEditor/components/Layout/TabsLayout.jsx
@@ -12,6 +12,10 @@ export default defineComponent({
   },
   setup (props) {
     const ns = hooks.useNamespace('TabsLayout')
+    if (!props.data.options.defaultValue) {
+      // eslint-disable-next-line vue/no-setup-props-destructure
+      props.data.options.defaultValue = props.data.columns[0].id
+    }
     return () => {
       return (
         <Selection {...useAttrs()} data={props.data} parent={props.parent} hasCopy hasDel hasDrag hasWidthScale>
@@ -21,7 +25,7 @@ export default defineComponent({
                 return (
                   <Selection
                     class={[ns.e('area')]}
-                    tag='el-tab-pane' label={element.label} name={element.value} data={element} parent={props.data}
+                    tag='el-tab-pane' label={element.label} name={element.id} data={element} parent={props.data}
                   >
                     <LayoutDragGable
                       data-layout-type={'tabs-col'}
diff --git a/packages/formEditor/components/Panels/Config/components/DataComponent3.vue b/packages/formEditor/components/Panels/Config/components/DataComponent3.vue
index b491692..6460db4 100644
--- a/packages/formEditor/components/Panels/Config/components/DataComponent3.vue
+++ b/packages/formEditor/components/Panels/Config/components/DataComponent3.vue
@@ -1,9 +1,10 @@
 <script>
 import utils from '@ER/utils'
 import hooks from '@ER/hooks'
-import { computed, defineComponent, resolveComponent, ref, unref } from 'vue'
+import { computed, defineComponent, resolveComponent, ref, unref, watch } from 'vue'
 import { dragGableWrap } from '@ER/formEditor/components/Layout/DragGable.jsx'
 import Icon from '@ER/icon'
+import _ from 'lodash-es'
 export default {
   name: 'ConfigData3'
 }
@@ -13,17 +14,54 @@ const {
   checkTypeBySelected,
   target
 } = hooks.useTarget()
+const checkList = ref([])
 const {
   t
 } = hooks.useI18n()
 const ns = hooks.useNamespace('ConfigData3')
+if (checkTypeBySelected(['collapse'])) {
+  watch(() => target.value.options.accordion, (newVal) => {
+    if (newVal) {
+      target.value.options.defaultValue = target.value.columns[0].id
+    } else {
+      target.value.options.defaultValue = [target.value.columns[0].id]
+    }
+    checkList.value = [target.value.columns[0].id]
+  })
+  checkList.value = target.value.options.accordion ? [target.value.options.defaultValue] : _.cloneDeep(target.value.options.defaultValue)
+} else if (checkTypeBySelected(['tabs'])) {
+  checkList.value = [target.value.columns[0].id]
+}
 const addTab = (type) => {
   const data = utils.renderFieldData(`${target.value.type}Col`)
   data.label = `Tab ${unref(target).columns.length + 1}`
-  // console.log(unref(target))
   unref(target).columns.push(data)
   utils.addContext(data, target.value)
 }
+const handleChange = (value, item) => {
+  if (checkTypeBySelected(['collapse'])) {
+    if (target.value.options.accordion) {
+      if (!value) {
+        checkList.value.push(item.id)
+        return false
+      }
+      checkList.value.filter(e => e !== item.id).forEach((e) => {
+        checkList.value.splice(checkList.value.indexOf(e), 1)
+      })
+      target.value.options.defaultValue = _.head(checkList.value)
+    } else {
+      target.value.options.defaultValue = _.cloneDeep(checkList.value)
+    }
+  } else if (checkTypeBySelected(['tabs'])) {
+    if (!value) {
+      return false
+    }
+    checkList.value.filter(e => e !== item.id).forEach((e) => {
+      checkList.value.splice(checkList.value.indexOf(e), 1)
+    })
+    target.value.options.defaultValue = _.head(checkList.value)
+  }
+}
 </script>
 <template>
   <el-form-item>
@@ -34,26 +72,29 @@ const addTab = (type) => {
       </div>
     </template>
     <div style="width: 100%;">
-      <dragGableWrap
-        :list="target.columns"
-        item-key="id"
-        tag="ul"
-        handle=".handle"
-        :class="[ns.e('content')]"
-      >
-        <template v-slot:item="{ element, index }">
-          <li>
-            <el-input
-              size="default"
-              clearable
-              v-model="element.label"/>
-            <div :class="ns.e('operate')">
-              <Icon :class="[ns.e('icon')]" @click="target.columns.splice(index, 1)" icon="delete"></Icon>
-              <Icon :class="[ns.e('icon'), 'handle']" icon="Rank"></Icon>
-            </div>
-          </li>
-        </template>
-      </dragGableWrap>
+      <el-checkbox-group v-model="checkList">
+        <dragGableWrap
+          :list="target.columns"
+          item-key="id"
+          tag="ul"
+          handle=".handle"
+          :class="[ns.e('content')]"
+        >
+          <template v-slot:item="{ element, index }">
+            <li>
+              <el-checkbox @change="(e) => handleChange(e, element)" :label="element.id"><br/></el-checkbox>
+              <el-input
+                size="default"
+                clearable
+                v-model="element.label"/>
+              <div :class="ns.e('operate')">
+                <Icon :class="[ns.e('icon')]" @click="target.columns.splice(index, 1)" icon="delete"></Icon>
+                <Icon :class="[ns.e('icon'), 'handle']" icon="Rank"></Icon>
+              </div>
+            </li>
+          </template>
+        </dragGableWrap>
+      </el-checkbox-group>
     </div>
   </el-form-item>
 </template>
diff --git a/packages/formEditor/components/Panels/Config/components/PropsPanel.vue b/packages/formEditor/components/Panels/Config/components/PropsPanel.vue
index c36c7b2..9c1c016 100644
--- a/packages/formEditor/components/Panels/Config/components/PropsPanel.vue
+++ b/packages/formEditor/components/Panels/Config/components/PropsPanel.vue
@@ -333,6 +333,16 @@ const handleMultipleChange = (value) => {
     target.value.options.defaultValue = ''
   }
 }
+const handleAccordionChange = (value) => {
+  // if (value) {
+  //   target.value.options.defaultValue = []
+  //   if (target.value.columns.length) {
+  //     target.value.options.defaultValue.push(target.value.columns[0].id)
+  //   }
+  // } else {
+  //   target.value.options.defaultValue = ''
+  // }
+}
 const handleAction = (type, value) => {
   switch (type) {
     case 1:
@@ -970,6 +980,7 @@ onMounted(() => {
     </PanelsConfigComponentsCollapseComponent>
     <PanelsConfigComponentsCheckboxComponent
       v-if="isSelectCollapse" :label="t('er.config.propsPanel.accordion')"
+      @change="handleAccordionChange"
       field="accordion"
       v-bind="utils.addTestId('configPanel:accordion')"
     >

From d156c7a5268210b29fbfb18fdac80663bccddd1f Mon Sep 17 00:00:00 2001
From: Liberty <zhuizhuidea@gmail.com>
Date: Fri, 19 Jan 2024 17:51:39 +0800
Subject: [PATCH 3/4] feat: refactor Checkbox, Radio, and Select components to
 include Other component

---
 .../components/FormTypes/Checkbox/mobile.vue  | 22 ++++----
 .../components/FormTypes/Checkbox/pc.vue      |  2 +
 .../components/FormTypes/Other/mobile.vue     | 53 +++++++++++++++++++
 .../components/FormTypes/Other/pc.vue         | 42 +++++++++++++++
 .../components/FormTypes/Radio/mobile.vue     | 22 ++++----
 .../components/FormTypes/Radio/pc.vue         |  2 +
 .../components/FormTypes/Select/mobile.vue    | 28 +++++-----
 .../components/FormTypes/Select/pc.vue        |  2 +
 .../Config/components/DataComponent1.jsx      |  8 ++-
 .../Panels/Config/components/PropsPanel.vue   | 29 ++++++++++
 packages/formEditor/generatorData.js          |  3 ++
 packages/formEditor/index.vue                 |  3 +-
 packages/formEditor/locale/en.js              |  8 ++-
 packages/formEditor/locale/zh-cn.js           |  8 ++-
 packages/formEditor/preview.vue               | 12 ++++-
 packages/hooks/use-props/index.js             |  9 ++++
 .../formEditor/ConfigCheckboxComponent.scss   |  8 +++
 packages/theme/formEditor/ConfigData1.scss    |  4 ++
 .../theme/formEditor/FormTypes/Other.scss     | 11 ++++
 .../theme/formEditor/FormTypes/Select.scss    |  3 ++
 packages/theme/formEditor/index.scss          |  1 +
 21 files changed, 242 insertions(+), 38 deletions(-)
 create mode 100644 packages/formEditor/components/FormTypes/Other/mobile.vue
 create mode 100644 packages/formEditor/components/FormTypes/Other/pc.vue
 create mode 100644 packages/theme/formEditor/FormTypes/Other.scss

diff --git a/packages/formEditor/components/FormTypes/Checkbox/mobile.vue b/packages/formEditor/components/FormTypes/Checkbox/mobile.vue
index de9b921..27ed9e6 100644
--- a/packages/formEditor/components/FormTypes/Checkbox/mobile.vue
+++ b/packages/formEditor/components/FormTypes/Checkbox/mobile.vue
@@ -1,6 +1,7 @@
 <script>
 import hooks from '@ER/hooks'
 import { ref } from 'vue'
+import Other from '../Other/mobile.vue'
 export default {
   name: 'er-checkbox',
   inheritAttrs: false,
@@ -19,15 +20,18 @@ const element = ref()
     ref="element"
   >
     <template #input>
-      <el-checkbox-group
-        @change="element.resetValidation()"
-        :class="[ns.e('radioGroup'), data.options.displayStyle === 'block' && ns.e('blockLayout')]"
-        v-model="data.options.defaultValue"
-        v-bind="params">
-        <el-checkbox v-for="item in params.options" :key="item.value" :label="item.value">
-          {{ item.label }}
-        </el-checkbox>
-      </el-checkbox-group>
+      <div style="width: 100%;">
+        <el-checkbox-group
+          @change="element.resetValidation()"
+          :class="[ns.e('radioGroup'), data.options.displayStyle === 'block' && ns.e('blockLayout')]"
+          v-model="data.options.defaultValue"
+          v-bind="params">
+          <el-checkbox v-for="item in params.options" :key="item.value" :label="item.value">
+            {{ item.label }}
+          </el-checkbox>
+        </el-checkbox-group>
+        <Other :data="data" :params="params"/>
+      </div>
     </template>
   </van-field>
 </template>
diff --git a/packages/formEditor/components/FormTypes/Checkbox/pc.vue b/packages/formEditor/components/FormTypes/Checkbox/pc.vue
index 6217b81..e087413 100644
--- a/packages/formEditor/components/FormTypes/Checkbox/pc.vue
+++ b/packages/formEditor/components/FormTypes/Checkbox/pc.vue
@@ -1,5 +1,6 @@
 <script>
 import hooks from '@ER/hooks'
+import Other from '../Other/pc.vue'
 export default {
   name: 'er-checkbox',
   inheritAttrs: false,
@@ -19,6 +20,7 @@ const ns = hooks.useNamespace('FormTypesCheckbox')
       {{ item.label }}
     </el-checkbox>
   </el-checkbox-group>
+  <Other :data="data" :params="params"/>
 </template>
 
 <style scoped>
diff --git a/packages/formEditor/components/FormTypes/Other/mobile.vue b/packages/formEditor/components/FormTypes/Other/mobile.vue
new file mode 100644
index 0000000..54c15ec
--- /dev/null
+++ b/packages/formEditor/components/FormTypes/Other/mobile.vue
@@ -0,0 +1,53 @@
+<script>
+import hooks from '@ER/hooks'
+import { ref, watch, inject, computed } from 'vue'
+import _ from 'lodash-es'
+export default {
+  name: 'er-other',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const ER = inject('Everright')
+const ns = hooks.useNamespace('FormTypesOther_mobile')
+const props = defineProps(['data', 'params'])
+const isShow = ref(false)
+const key = props.data.key + '_other'
+const value = computed({
+  set (newVal) {
+    ER.state.othersFiles[key] = newVal
+  },
+  get () {
+    return ER.state.othersFiles[key] || ''
+  }
+})
+watch(() => props.data.options.defaultValue, (newVal) => {
+  isShow.value = (_.isArray(newVal) ? newVal : [newVal]).includes('other')
+}, {
+  immediate: true
+})
+</script>
+
+<template>
+  <div
+    v-if="isShow"
+    :class="[ns.b()]">
+    <van-field
+      v-model="value"
+      :clearable="true"
+      type="textarea"
+      :placeholder="data.options.otherPlaceholder"
+    />
+  </div>
+<!--<div-->
+<!--  v-if="isShow"-->
+<!--  :class="[ns.b()]">-->
+<!--  <el-input-->
+<!--    v-model="data.options.defaultValue"-->
+<!--    type="textarea"-->
+<!--    placeholder="Please input"-->
+<!--    :rows="2"-->
+<!--    v-bind="params"/>-->
+<!--</div>-->
+</template>
diff --git a/packages/formEditor/components/FormTypes/Other/pc.vue b/packages/formEditor/components/FormTypes/Other/pc.vue
new file mode 100644
index 0000000..ff31efc
--- /dev/null
+++ b/packages/formEditor/components/FormTypes/Other/pc.vue
@@ -0,0 +1,42 @@
+<script>
+import hooks from '@ER/hooks'
+import { ref, watch, inject, computed } from 'vue'
+import _ from 'lodash-es'
+export default {
+  name: 'er-other',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script setup>
+const ER = inject('Everright')
+const ns = hooks.useNamespace('FormTypesOther_pc')
+const props = defineProps(['data', 'params'])
+const key = props.data.key + '_other'
+const value = computed({
+  set (newVal) {
+    ER.state.othersFiles[key] = newVal
+  },
+  get () {
+    return ER.state.othersFiles[key] || ''
+  }
+})
+const isShow = ref(false)
+watch(() => props.data.options.defaultValue, (newVal) => {
+  isShow.value = (_.isArray(newVal) ? newVal : [newVal]).includes('other')
+}, {
+  immediate: true
+})
+</script>
+
+<template>
+<div
+  v-if="isShow"
+  :class="[ns.b()]">
+  <el-input
+    v-model="value"
+    type="textarea"
+    :placeholder="data.options.otherPlaceholder"
+    :rows="2"/>
+</div>
+</template>
diff --git a/packages/formEditor/components/FormTypes/Radio/mobile.vue b/packages/formEditor/components/FormTypes/Radio/mobile.vue
index 8dc0e77..479fdb4 100644
--- a/packages/formEditor/components/FormTypes/Radio/mobile.vue
+++ b/packages/formEditor/components/FormTypes/Radio/mobile.vue
@@ -1,6 +1,7 @@
 <script>
 import hooks from '@ER/hooks'
 import { ref } from 'vue'
+import Other from '../Other/mobile.vue'
 export default {
   name: 'er-radio',
   inheritAttrs: false,
@@ -19,15 +20,18 @@ const element = ref()
     ref="element"
   >
     <template #input>
-      <el-radio-group
-        @change="element.resetValidation()"
-        v-model="data.options.defaultValue"
-        :class="[ns.e('radioGroup'), data.options.displayStyle === 'block' && ns.e('blockLayout')]"
-        v-bind="params">
-        <el-radio v-for="item in params.options" :key="item.value" :label="item.value">
-          {{ item.label }}
-        </el-radio>
-      </el-radio-group>
+      <div style="width: 100%;">
+        <el-radio-group
+          @change="element.resetValidation()"
+          v-model="data.options.defaultValue"
+          :class="[ns.e('radioGroup'), data.options.displayStyle === 'block' && ns.e('blockLayout')]"
+          v-bind="params">
+          <el-radio v-for="item in params.options" :key="item.value" :label="item.value">
+            {{ item.label }}
+          </el-radio>
+        </el-radio-group>
+        <Other :data="data" :params="params"/>
+      </div>
     </template>
   </van-field>
 </template>
diff --git a/packages/formEditor/components/FormTypes/Radio/pc.vue b/packages/formEditor/components/FormTypes/Radio/pc.vue
index c2345ec..6a46845 100644
--- a/packages/formEditor/components/FormTypes/Radio/pc.vue
+++ b/packages/formEditor/components/FormTypes/Radio/pc.vue
@@ -1,5 +1,6 @@
 <script>
 import hooks from '@ER/hooks'
+import Other from '../Other/pc.vue'
 export default {
   name: 'er-radio',
   inheritAttrs: false,
@@ -23,6 +24,7 @@ const {
       {{ item.label }}
     </el-radio>
   </el-radio-group>
+  <Other :data="data" :params="params"/>
 </template>
 
 <style scoped>
diff --git a/packages/formEditor/components/FormTypes/Select/mobile.vue b/packages/formEditor/components/FormTypes/Select/mobile.vue
index 72fd7ae..6524503 100644
--- a/packages/formEditor/components/FormTypes/Select/mobile.vue
+++ b/packages/formEditor/components/FormTypes/Select/mobile.vue
@@ -1,6 +1,7 @@
 <script>
 import { ref } from 'vue'
 import hooks from '@ER/hooks'
+import Other from '../Other/mobile.vue'
 export default {
   name: 'er-select',
   inheritAttrs: false,
@@ -23,18 +24,21 @@ const onClear = () => {
     ref="element"
   >
     <template #input>
-      <el-select
-        @change="element.resetValidation()"
-        v-model="data.options.defaultValue"
-        v-bind="params"
-      >
-        <el-option
-          v-for="item in params.options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
-      </el-select>
+      <div style="width: 100%;">
+        <el-select
+          @change="element.resetValidation()"
+          v-model="data.options.defaultValue"
+          v-bind="params"
+        >
+          <el-option
+            v-for="item in params.options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <Other :data="data" :params="params"/>
+      </div>
     </template>
     <template v-if="data.options.defaultValue.length && params.clearable" #button>
       <van-icon @click.stop="onClear" name="clear" />
diff --git a/packages/formEditor/components/FormTypes/Select/pc.vue b/packages/formEditor/components/FormTypes/Select/pc.vue
index df1cc86..0307dab 100644
--- a/packages/formEditor/components/FormTypes/Select/pc.vue
+++ b/packages/formEditor/components/FormTypes/Select/pc.vue
@@ -1,5 +1,6 @@
 <script>
 import hooks from '@ER/hooks'
+import Other from '../Other/pc.vue'
 export default {
   name: 'er-select',
   inheritAttrs: false,
@@ -26,6 +27,7 @@ const ns = hooks.useNamespace('FormTypesSelect_pc')
       :value="item.value"
     />
   </el-select>
+  <Other :data="data" :params="params"/>
 </template>
 
 <style scoped>
diff --git a/packages/formEditor/components/Panels/Config/components/DataComponent1.jsx b/packages/formEditor/components/Panels/Config/components/DataComponent1.jsx
index 8c8ef26..be8274c 100644
--- a/packages/formEditor/components/Panels/Config/components/DataComponent1.jsx
+++ b/packages/formEditor/components/Panels/Config/components/DataComponent1.jsx
@@ -120,7 +120,7 @@ export default defineComponent({
             </td>
             <td>
               <el-form-item prop={`${index}.value`} rules={{ validator }}>
-                <el-input clearable vModel={element.value}></el-input>
+                <el-input disabled={element.value === 'other'} clearable vModel={element.value}></el-input>
               </el-form-item>
             </td>
             <td>
@@ -147,6 +147,11 @@ export default defineComponent({
           })
           break
         case 2:
+          this.data.push({
+            label: 'Other',
+            value: 'other'
+          })
+          // utils.generateOptions(1)
           // target.value.options.defaultValue = isMultiple.value ? [] : ''
           break
       }
@@ -200,6 +205,7 @@ export default defineComponent({
           </el-form>
         </el-scrollbar>
         <div class={ns.e('button')}>
+          <el-button disabled={_.findIndex(this.data, { value: 'other' }) !== -1} onClick={() => handleAction(2)}>{t('er.config.dataComponent1.addOther')}</el-button>
           <el-button onClick={() => handleAction(1)}>{t('er.config.dataComponent1.add')}</el-button>
         </div>
       </div>
diff --git a/packages/formEditor/components/Panels/Config/components/PropsPanel.vue b/packages/formEditor/components/Panels/Config/components/PropsPanel.vue
index 9c1c016..faf748f 100644
--- a/packages/formEditor/components/Panels/Config/components/PropsPanel.vue
+++ b/packages/formEditor/components/Panels/Config/components/PropsPanel.vue
@@ -361,6 +361,7 @@ const handleAction = (type, value) => {
         unref(dataRef).getData().then(({ data, defaultValue }) => {
           state.data[target.value.options.dataKey].list = data
           target.value.options.defaultValue = defaultValue
+          target.value.options.otherRequired = _.findIndex(data, { value: 'other' }) !== -1
           dialogVisible.value = false
         })
       }
@@ -401,6 +402,13 @@ const handleTypeListener = ({ property, data }) => {
       break
   }
 }
+const isShowotherRequired = computed(() => {
+  let result = false
+  result = isSelectField.value && checkTypeBySelected(['select', 'checkbox', 'radio'], 'otherRequired')
+  const datalist = _.get(state.data[target.value.options.dataKey], 'list', [])
+  result = _.findIndex(datalist, { value: 'other' }) !== -1
+  return result
+})
 onMounted(() => {
   titleRef.value && titleRef.value.focus()
 })
@@ -595,6 +603,21 @@ onMounted(() => {
         v-bind="utils.addTestId('configPanel:placeholder')"
       />
     </PanelsConfigComponentsTypeComponent>
+    <PanelsConfigComponentsTypeComponent
+      :layoutType="0"
+      :label="t('er.config.propsPanel.otherPlaceholder')"
+      v-if="checkTypeBySelected([
+      'checkbox',
+      'radio',
+      'select',
+    ], 'placeholder') && target.options.otherRequired">
+      <el-input
+        type="textarea"
+        v-model="target.options.otherPlaceholder"
+        clearable
+        v-bind="utils.addTestId('configPanel:otherPlaceholder')"
+      />
+    </PanelsConfigComponentsTypeComponent>
     <PanelsConfigComponentsTypeComponent
       :layoutType="0"
       v-if="checkTypeBySelected(['signature'], 'brushColor')"
@@ -846,6 +869,12 @@ onMounted(() => {
       field="required"
       v-bind="utils.addTestId('configPanel:required')"
     />
+    <PanelsConfigComponentsCheckboxComponent
+      v-if="isShowotherRequired"
+      :label="t('er.config.propsPanel.otherRequired')"
+      field="otherRequired"
+      v-bind="utils.addTestId('configPanel:otherRequired')"
+    />
     <PanelsConfigComponentsTypeComponent
       v-if="isSelectGrid"
       @listener="handleTypeListener"
diff --git a/packages/formEditor/generatorData.js b/packages/formEditor/generatorData.js
index 086f3b3..60c4541 100644
--- a/packages/formEditor/generatorData.js
+++ b/packages/formEditor/generatorData.js
@@ -16,6 +16,9 @@ export default function (node, isWrap = true, lang = 'zh-cn', isCreateLabel = tr
     if (/^(select|cascader|region|date|time)$/.test(node.type)) {
       node.options.placeholder = utils.transferData(lang, 'er.validateMsg.placeholder2', locale)
     }
+    if (/^(select|checkbox|radio)$/.test(node.type)) {
+      node.options.otherPlaceholder = utils.transferData(lang, 'er.validateMsg.placeholder3', locale)
+    }
     if (/^(input|textarea|html)$/.test(node.type)) {
       node.options.placeholder = utils.transferData(lang, 'er.validateMsg.placeholder1', locale)
     }
diff --git a/packages/formEditor/index.vue b/packages/formEditor/index.vue
index 9f3ebee..e3b148f 100644
--- a/packages/formEditor/index.vue
+++ b/packages/formEditor/index.vue
@@ -77,7 +77,8 @@ const state = reactive({
   validateStates: [],
   fields: [],
   Namespace: 'formEditor',
-  logic: {}
+  logic: {},
+  othersFiles: {}
 })
 const isFoldFields = ref(true)
 const isFoldConfig = ref(true)
diff --git a/packages/formEditor/locale/en.js b/packages/formEditor/locale/en.js
index 04f9905..ade7c42 100644
--- a/packages/formEditor/locale/en.js
+++ b/packages/formEditor/locale/en.js
@@ -101,7 +101,8 @@ export default {
         unique: 'Unique id',
         name: 'Name',
         operate: 'Operate',
-        add: 'Add'
+        add: 'Add',
+        addOther: 'Add other'
       },
       dataComponent2: {
         level: 'Level',
@@ -112,11 +113,13 @@ export default {
         add: 'Add'
       },
       propsPanel: {
+        otherRequired: 'When selecting "Other", supplementary information is required',
         title: 'Title',
         titleWidth: 'Title width',
         id: 'Id',
         defaultContent: 'Default content',
         placeholder: 'Placeholder',
+        otherPlaceholder: 'Guide text for supplementary information',
         brushColor: 'Brush color',
         format: 'Format',
         dateType: 'Date type',
@@ -214,7 +217,8 @@ export default {
       fileSize: 'File size cannot exceed <%= size %> MB',
       idUnique: 'ID must be unique',
       placeholder1: 'Please enter',
-      placeholder2: 'Please select'
+      placeholder2: 'Please select',
+      placeholder3: 'Please enter additional information'
     },
     form: {
       selectDate: 'Select date',
diff --git a/packages/formEditor/locale/zh-cn.js b/packages/formEditor/locale/zh-cn.js
index 1a09423..72b2a62 100644
--- a/packages/formEditor/locale/zh-cn.js
+++ b/packages/formEditor/locale/zh-cn.js
@@ -101,7 +101,8 @@ export default {
         unique: '选项唯一标识',
         name: '选项名称',
         operate: '操作',
-        add: '添加选项'
+        add: '添加选项',
+        addOther: '添加其它'
       },
       dataComponent2: {
         level: '级选项',
@@ -112,11 +113,13 @@ export default {
         add: '添加面板'
       },
       propsPanel: {
+        otherRequired: '选择“其他”时，补充信息必填',
         title: '标题',
         titleWidth: '宽度',
         id: '字段标识',
         defaultContent: '默认内容',
         placeholder: '提示文字',
+        otherPlaceholder: '补充信息的引导文字',
         brushColor: '画笔颜色',
         format: '显示格式',
         dateType: '日期类型',
@@ -214,7 +217,8 @@ export default {
       fileSize: '文件大小不能超过 <%= size %> MB',
       idUnique: '字段标识重复',
       placeholder1: '请输入',
-      placeholder2: '请选择'
+      placeholder2: '请选择',
+      placeholder3: '请输入补充信息'
     },
     form: {
       selectDate: '选择日期',
diff --git a/packages/formEditor/preview.vue b/packages/formEditor/preview.vue
index 63abb03..4f4c22b 100644
--- a/packages/formEditor/preview.vue
+++ b/packages/formEditor/preview.vue
@@ -31,7 +31,8 @@ const state = reactive({
   fields: [],
   logic: {},
   fieldsLogicState: new Map(),
-  remoteValues: new Map()
+  remoteValues: new Map(),
+  othersFiles: {}
 })
 const ns = hooks.useNamespace('Main', state.Namespace)
 hooks.useLogic(state)
@@ -49,7 +50,7 @@ const getData = () => {
       }
     }
   })
-  return _.cloneDeep(result)
+  return _.cloneDeep(_.merge(result, state.othersFiles))
 }
 const fireEvent = (type, data) => {
   emit('listener', {
@@ -71,6 +72,11 @@ provide('Everright', {
   setValue,
   form
 })
+const setOhters = (value) => {
+  _.toPairs(value).filter(([key]) => key.indexOf('_other') !== -1).forEach(([key, val]) => {
+    state.othersFiles[key] = val
+  })
+}
 const setData2 = (data, value) => {
   const newData = _.cloneDeep(data)
   layout.pc = newData.layout.pc
@@ -87,6 +93,7 @@ const setData2 = (data, value) => {
     utils.addContext(e, state.store, false)
   })
   if (!_.isEmpty(value)) {
+    setOhters(value)
     state.fields.forEach((e) => {
       if (e.type === 'time' && !e.options.valueFormat) {
         e.options.valueFormat = 'HH:mm:ss'
@@ -110,6 +117,7 @@ const setData1 = async (data, value) => {
   })
   const subforms = _.cloneDeep(state.fields.filter(e => e.type === 'subform'))
   if (!_.isEmpty(value)) {
+    setOhters(value)
     for (const key in value) {
       state.remoteValues.set(key, value[key])
     }
diff --git a/packages/hooks/use-props/index.js b/packages/hooks/use-props/index.js
index 4067d79..db51749 100644
--- a/packages/hooks/use-props/index.js
+++ b/packages/hooks/use-props/index.js
@@ -102,6 +102,15 @@ const addValidate = (result, node, isPc, t, state, ExtraParams) => {
         reject(t('er.validateMsg.required'))
         return
       }
+      if (/^(select|checkbox|radio)$/.test(node.type)) {
+        if ((_.isArray(node.options.defaultValue) ? node.options.defaultValue : [node.options.defaultValue]).includes('other')) {
+          const key = node.key + '_other'
+          if (!state.othersFiles[key]) {
+            reject(t('er.validateMsg.placeholder3'))
+            return false
+          }
+        }
+      }
     }
     switch (node.type) {
       case 'input':
diff --git a/packages/theme/formEditor/ConfigCheckboxComponent.scss b/packages/theme/formEditor/ConfigCheckboxComponent.scss
index 2609dd3..23b9197 100644
--- a/packages/theme/formEditor/ConfigCheckboxComponent.scss
+++ b/packages/theme/formEditor/ConfigCheckboxComponent.scss
@@ -12,4 +12,12 @@
   @include e(slot) {
     padding-top: 10px;
   }
+  .el-checkbox{
+    height: auto;
+    padding: 10px 0;
+  }
+  .el-checkbox__label {
+    text-wrap: wrap;
+    line-height: 20px;
+  }
 }
diff --git a/packages/theme/formEditor/ConfigData1.scss b/packages/theme/formEditor/ConfigData1.scss
index e0657ea..0b32b4e 100644
--- a/packages/theme/formEditor/ConfigData1.scss
+++ b/packages/theme/formEditor/ConfigData1.scss
@@ -61,6 +61,10 @@
   }
   @include e(button) {
     width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 0;
     button {
       border: 1px dashed #409EFF;
       width: 100%;
diff --git a/packages/theme/formEditor/FormTypes/Other.scss b/packages/theme/formEditor/FormTypes/Other.scss
new file mode 100644
index 0000000..3ff1a92
--- /dev/null
+++ b/packages/theme/formEditor/FormTypes/Other.scss
@@ -0,0 +1,11 @@
+@include b(FormTypesOther_pc) {
+  width: 100% !important;
+  margin-top: 10px;
+}
+@include b(FormTypesOther_mobile) {
+  width: 100% !important;
+  .van-cell {
+    box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 16px;
+  }
+}
diff --git a/packages/theme/formEditor/FormTypes/Select.scss b/packages/theme/formEditor/FormTypes/Select.scss
index dbdf220..f181046 100644
--- a/packages/theme/formEditor/FormTypes/Select.scss
+++ b/packages/theme/formEditor/FormTypes/Select.scss
@@ -8,6 +8,9 @@
       box-shadow: none !important;
     }
   }
+  .van-field__body {
+    align-items: flex-start;
+  }
 }
 @include b(FormTypesSelect_pc) {
   width: 100%;
diff --git a/packages/theme/formEditor/index.scss b/packages/theme/formEditor/index.scss
index c400a9d..f25216c 100644
--- a/packages/theme/formEditor/index.scss
+++ b/packages/theme/formEditor/index.scss
@@ -30,6 +30,7 @@ $namespace: 'Everright-formEditor';
 @import './FormTypes/Region';
 @import './FormTypes/Number';
 @import './FormTypes/Divider';
+@import './FormTypes/Other';
 @import './ConfigBackground';
 @import './ConfigBorder';
 @import './ConfigAllsides';

From cdc670215927a4b1b16cdf771cc3d3ad7344453c Mon Sep 17 00:00:00 2001
From: Liberty <zhuizhuidea@gmail.com>
Date: Fri, 19 Jan 2024 18:41:05 +0800
Subject: [PATCH 4/4] fix: update package version to "1.3.0-beta.2" and fix
 CollapseLayout class issue

---
 package.json                                                 | 2 +-
 packages/formEditor/components/Layout/CollapseLayout.jsx     | 5 +++--
 .../components/Panels/Config/components/DataComponent3.vue   | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 909dbba..3eef2db 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "everright-formeditor",
-  "version": "1.3.0-beta.1",
+  "version": "1.3.0-beta.2",
   "description": "🦮 Powerful lowcode|vue form editor,generator,designer,builder library. It provides an easy way to create custom forms. The project is extensible, easy to use and configure, and provides many commonly used form components and functions(vue可视化低代码表单设计器、表单编辑器、element-plus vant表单设计)",
   "files": [
     "dist",
diff --git a/packages/formEditor/components/Layout/CollapseLayout.jsx b/packages/formEditor/components/Layout/CollapseLayout.jsx
index 2ebbc51..32b353c 100644
--- a/packages/formEditor/components/Layout/CollapseLayout.jsx
+++ b/packages/formEditor/components/Layout/CollapseLayout.jsx
@@ -1,4 +1,4 @@
-import { defineComponent, resolveComponent, watch, useAttrs, defineAsyncComponent } from 'vue'
+import { defineComponent, resolveComponent, watch, useAttrs, defineAsyncComponent, inject } from 'vue'
 import Selection from '@ER/formEditor/components/Selection/selectElement.jsx'
 import LayoutDragGable from './DragGable.jsx'
 import hooks from '@ER/hooks'
@@ -11,6 +11,7 @@ export default defineComponent({
     parent: Array
   },
   setup (props) {
+    const ER = inject('Everright')
     const ns = hooks.useNamespace('CollapseLayout')
     if (!props.data.options.defaultValue.length) {
       props.data.options.defaultValue.push(props.data.columns[0].id)
@@ -24,7 +25,7 @@ export default defineComponent({
                 return (
                   <el-collapse-item title={element.label} name={element.id}>
                     <Selection
-                      class={[ns.e('area')]}
+                      class={[ER.state.mode === 'edit' ? ns.e('area') : '']}
                       data={element} parent={props.data}
                     >
                       <LayoutDragGable
diff --git a/packages/formEditor/components/Panels/Config/components/DataComponent3.vue b/packages/formEditor/components/Panels/Config/components/DataComponent3.vue
index 6460db4..f5ae9df 100644
--- a/packages/formEditor/components/Panels/Config/components/DataComponent3.vue
+++ b/packages/formEditor/components/Panels/Config/components/DataComponent3.vue
@@ -27,7 +27,7 @@ if (checkTypeBySelected(['collapse'])) {
       target.value.options.defaultValue = [target.value.columns[0].id]
     }
     checkList.value = [target.value.columns[0].id]
-  })
+  }, { flush: 'post' })
   checkList.value = target.value.options.accordion ? [target.value.options.defaultValue] : _.cloneDeep(target.value.options.defaultValue)
 } else if (checkTypeBySelected(['tabs'])) {
   checkList.value = [target.value.columns[0].id]