releases 4.2.0

README.md

@@ -46,7 +46,7 @@
 * [ ] flow-view 流程设计器-视图渲染
 * [x] form 表单
 * [x] form-design 表单设计器
-* [x] form-gather 表单-容器
+* [x] form-group 表单-分组
 * [x] form-item 表单-项
 * [x] form-view 表单设计器-视图渲染
 * [x] icon 图标

examples/views/date-picker/DatePickerTest.vue

@@ -72,12 +72,12 @@
 
 <script lang="ts" setup>
 import { reactive } from 'vue'
-import { VxeInputPropTypes, VxeInputDefines } from '../../../types'
+import { VxeDatePickerPropTypes, VxeInputDefines } from '../../../types'
 import XEUtils from 'xe-utils'
 
 const demo1 = reactive({
   value100: '',
-  value101: '',
+  value101: 1726885614375,
   value102: '',
   value103: '',
   value200: '',
@@ -131,7 +131,7 @@ const demo1 = reactive({
   value900: '2017-12-18'
 })
 
-const disabledDateMethod: VxeInputPropTypes.DisabledMethod = (params) => {
+const disabledDateMethod: VxeDatePickerPropTypes.DisabledMethod = (params) => {
   const { date } = params
   const dd = date.getDate()
   return dd > 15
@@ -158,7 +158,7 @@ const noticeMaps: Record<string, VxeInputDefines.DateFestivalInfo> = {
     label: '游泳'
   }
 }
-const festivalNoticeMethod: VxeInputPropTypes.FestivalMethod = (params) => {
+const festivalNoticeMethod: VxeDatePickerPropTypes.FestivalMethod = (params) => {
   const { date, viewType } = params
   if (viewType === 'day') {
     const ymd = XEUtils.toDateString(date, 'yyyyMMdd')
@@ -216,7 +216,7 @@ const calendarMaps: Record<string, VxeInputDefines.DateFestivalInfo> = {
     }
   }
 }
-const festivalCalendarMethod: VxeInputPropTypes.FestivalMethod = (params) => {
+const festivalCalendarMethod: VxeDatePickerPropTypes.FestivalMethod = (params) => {
   const { date, viewType } = params
   if (viewType === 'day') {
     const ymd = XEUtils.toDateString(date, 'yyyyMMdd')

examples/views/form/FormTest.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <vxe-form vertical title-colon :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent">
+    <vxe-form vertical border title-background title-colon :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent">
       <vxe-form-item title="名称" field="name" :item-render="{}" titleBold>
         <template #default="{ data }">
           <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
@@ -26,7 +26,7 @@
       </vxe-form-item>
     </vxe-form>
 
-    <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent" size="medium">
+    <vxe-form border title-background :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent" size="medium">
       <vxe-form-item title="名称" field="name" :item-render="{}">
         <template #default="{ data }">
           <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
@@ -107,7 +107,7 @@
     <p class="tip">表单校验</p>
 
     <vxe-form
-    readonly
+    readonly border title-background
       title-colon
       ref="xForm"
       title-align="right"
@@ -117,7 +117,7 @@
       :loading="demo2.loading2"
       @submit="submitEvent2"
       @reset="resetEvent">
-      <vxe-form-gather span="12">
+      <vxe-form-group span="12" title="分组1" vertical>
         <vxe-form-item title="名称" field="name" span="24"></vxe-form-item>
         <vxe-form-item title="昵称" span="24">
           <template #title>
@@ -145,14 +145,14 @@
             <vxe-input v-model="data.date" type="date" placeholder="请选择日期" clearable></vxe-input>
           </template>
         </vxe-form-item>
-      </vxe-form-gather>
-      <vxe-form-gather span="12">
+      </vxe-form-group>
+      <vxe-form-group span="12" title="分组2">
         <vxe-form-item title="标题貌似有点长呢标题貌似有点长呢" field="address" span="24" :item-render="{}">
           <template #default="{ data }">
             <vxe-textarea v-model="data.address" placeholder="请输入地址" :autosize="{minRows: 6, maxRows: 10}" clearable></vxe-textarea>
           </template>
         </vxe-form-item>
-      </vxe-form-gather>
+      </vxe-form-group>
       <vxe-form-item align="center" span="24">
         <template #default>
           <vxe-button type="submit" status="primary" content="基本表单"></vxe-button>
@@ -250,7 +250,7 @@
 
     <p class="tip">配置式表单</p>
 
-    <vxe-form :data="demo4.formData4" :items="demo4.formItems4">
+    <vxe-form :data="demo4.formData4" :items="demo4.formItems4" :rules="demo4.rules">
       <template #myaddress="{ data }">
         <vxe-input v-model="data.address" placeholder="自定义插槽模板"></vxe-input>
       </template>
@@ -376,6 +376,14 @@ const demo4 = reactive({
     flag: false,
     address: ''
   },
+  rules: {
+    name: [
+      { required: true, message: '请输入名称' }
+    ],
+    role: [
+      { required: true, message: '请输入名称' }
+    ]
+  },
   formItems4: [
     {
       title: '左侧',

gulpfile.js

@@ -54,6 +54,7 @@ const componentList = [
   'form',
   'form-design',
   'form-gather',
+  'form-group',
   'form-item',
   'form-view',
   'icon',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.1.30",
+  "version": "4.2.0",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -57,7 +57,7 @@
     "gulp-typescript": "^5.0.1",
     "gulp-uglify": "^3.0.2",
     "postcss": "^8.4.38",
-    "sass": "^1.77.8",
+    "sass": "^1.79.3",
     "sass-loader": "^14.2.1",
     "typescript": "~4.9.5",
     "vue": "3.5.5",

packages/components.ts

@@ -25,6 +25,7 @@ import VxeDrawer, { DrawerController } from './drawer'
 import VxeForm from './form'
 import VxeFormDesign from './form-design'
 import VxeFormGather from './form-gather'
+import VxeFormGroup from './form-group'
 import VxeFormItem from './form-item'
 import VxeFormView from './form-view'
 import VxeIcon from './icon'
@@ -96,6 +97,7 @@ const components = [
   VxeForm,
   VxeFormDesign,
   VxeFormGather,
+  VxeFormGroup,
   VxeFormItem,
   VxeFormView,
   VxeIcon,
@@ -187,6 +189,7 @@ export * from './drawer'
 export * from './form'
 export * from './form-design'
 export * from './form-gather'
+export * from './form-group'
 export * from './form-item'
 export * from './form-view'
 export * from './icon'

packages/date-picker/src/date-picker.ts

@@ -137,7 +137,7 @@ export default defineComponent({
       panelStyle: {},
       panelPlacement: '',
       isActivated: false,
-      inputValue: props.modelValue,
+      inputValue: '',
       datetimePanelValue: null,
       datePanelValue: null,
       datePanelLabel: '',
@@ -622,6 +622,18 @@ export default defineComponent({
       return immediate
     })
 
+    const updateModelValue = (modelValue: VxeDatePickerPropTypes.ModelValue | undefined) => {
+      let val: any = ''
+      if (modelValue) {
+        if (XEUtils.isNumber(modelValue) && /^[0-9]{11,15}$/.test(`${modelValue}`)) {
+          val = new Date(modelValue)
+        } else {
+          val = modelValue
+        }
+      }
+      reactData.inputValue = val
+    }
+
     const parseDate = (value: VxeDatePickerPropTypes.ModelValue, format: string) => {
       const { type } = props
       if (type === 'time') {
@@ -762,6 +774,7 @@ export default defineComponent({
      */
     const initValue = () => {
       const isDatePickerType = computeIsDatePickerType.value
+      updateModelValue(props.modelValue)
       if (isDatePickerType) {
         changeValue()
       }
@@ -2143,14 +2156,14 @@ export default defineComponent({
     }
 
     watch(() => props.modelValue, (val) => {
-      reactData.inputValue = val
+      updateModelValue(val)
       changeValue()
     })
 
     watch(() => props.type, () => {
       // 切换类型是重置内置变量
       Object.assign(reactData, {
-        inputValue: props.modelValue,
+        inputValue: '',
         datetimePanelValue: null,
         datePanelValue: null,
         datePanelLabel: '',

packages/form-design/src/form-view.ts

@@ -4,7 +4,7 @@ import { getConfig, renderer, useSize, createEvent } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createDefaultFormViewPCFormConfig } from './default-setting-data'
 import VxeFormComponent from '../../form/src/form'
-import VxeFormGatherComponent from '../../form/src/form-gather'
+import VxeFormGroupComponent from '../../form/src/form-group'
 import VxeFormItemComponent from '../../form/src/form-item'
 import { configToWidget } from './widget-info'
 import { warnLog } from '../../ui/src/log'
@@ -19,6 +19,7 @@ export default defineComponent({
     readonly: Boolean as PropType<VxeFormViewPropTypes.Readonly>,
     disabled: Boolean as PropType<VxeFormViewPropTypes.Disabled>,
     viewRender: Object as PropType<VxeFormViewPropTypes.ViewRender>,
+    formOptions: Object as PropType<VxeFormViewPropTypes.FormOptions>,
     createFormConfig: Function as PropType<VxeFormViewPropTypes.CreateFormConfig>,
     size: {
       type: String as PropType<VxeFormViewPropTypes.Size>,
@@ -93,15 +94,15 @@ export default defineComponent({
     }
 
     const parseFormConfig = (formConfig: VxeFormProps) => {
-      const { viewRender, createFormConfig } = props
+      const { viewRender, createFormConfig, formOptions } = props
       const params: VxeFormViewDefines.CreateFormConfigParams = { viewRender, formConfig }
       if (createFormConfig) {
         return createFormConfig(params)
       }
       const { name } = viewRender || {}
       const compConf = renderer.get(name) || {}
       const createPCFormConfig = compConf ? compConf.createFormViewFormConfig : null
-      return Object.assign({}, createPCFormConfig ? createPCFormConfig(params) : createDefaultFormViewPCFormConfig(params))
+      return Object.assign({}, createPCFormConfig ? createPCFormConfig(params) : createDefaultFormViewPCFormConfig(params), formOptions)
     }
 
     const loadFormConfig = (formConfig: VxeFormProps) => {
@@ -289,16 +290,12 @@ export default defineComponent({
           : createCommentVNode(),
         h(VxeFormComponent, {
           ref: formRef,
+          ...formConfig,
           data: modelValue,
           customLayout: true,
           readonly,
           disabled,
           span: 24,
-          vertical: formConfig.vertical,
-          titleBold: formConfig.titleBold,
-          titleColon: formConfig.titleColon,
-          titleAlign: formConfig.titleAlign,
-          titleWidth: formConfig.titleWidth,
           rules: formRules,
           onSubmit: handleSubmit,
           onReset: handleReset
@@ -322,7 +319,7 @@ export default defineComponent({
                 const isEditMode = !!$xeFormDesignLayoutStyle
                 const renderOpts: VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions = widget
                 const params: VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams = { widget, readonly: !!readonly, disabled: !!disabled, isEditMode, isViewMode: !isEditMode, $formDesign: null, $formView: $xeFormView }
-                return h(VxeFormGatherComponent, {
+                return h(VxeFormGroupComponent, {
                   key: widget.id
                 }, {
                   default () {
@@ -343,7 +340,7 @@ export default defineComponent({
                 })
               }),
               footerSlot
-                ? h(VxeFormGatherComponent, {
+                ? h(VxeFormGroupComponent, {
                   span: 24
                 }, {
                   default () {

packages/form-design/widget-row/row-form.ts

@@ -96,7 +96,6 @@ export const WidgetRowFormComponent = defineComponent({
       const { widgetObjList } = formDesignReactData
       const oldChildList = widget.children.filter(item => item.name)
       const overList = oldChildList.slice(options.colSize)
-      console.log(overList)
       if (overList.length) {
         const rest = XEUtils.findTree(widgetObjList, obj => obj.id === widget.id, { children: 'children' })
         if (rest) {

packages/form-design/widget-row/row-view.ts

@@ -4,7 +4,7 @@ import { renderer, getIcon } from '@vxe-ui/core'
 import { getSlotVNs } from '../../ui/src/vn'
 import XEUtils from 'xe-utils'
 import { WidgetRowFormObjVO } from './row-data'
-import VxeFormGatherComponent from '../../form/src/form-gather'
+import VxeFormGroupComponent from '../../form/src/form-group'
 import VxeFormItemComponent from '../../form/src/form-item'
 import VxeRowComponent from '../../row/src/row'
 import VxeColComponent from '../../row/src/col'
@@ -13,6 +13,7 @@ import VxeButtonComponent from '../../button/src/button'
 import type { VxeGlobalRendererHandles, VxeFormDesignDefines, VxeFormDesignConstructor, VxeFormDesignPrivateMethods, VxeFormViewConstructor, VxeFormViewPrivateMethods } from '../../../types'
 
 const ViewColItemComponent = defineComponent({
+  name: 'ViewColItem',
   props: {
     parentWidget: {
       type: Object as PropType<VxeFormDesignDefines.WidgetObjItem<WidgetRowFormObjVO>>,
@@ -103,7 +104,6 @@ const ViewColItemComponent = defineComponent({
           const params: VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams = { widget, readonly: false, disabled: false, isEditMode: true, isViewMode: false, $formDesign: $xeFormDesign, $formView: null }
           const isActive = activeWidget && widget && activeWidget.id === widget.id
           const isEmptyWidget = !renderWidgetDesignView
-
           return h('div', {
             class: 'vxe-form-design--widget-row-view',
             'data-widget-id': widget.id,
@@ -168,6 +168,7 @@ const ViewColItemComponent = defineComponent({
 })
 
 export const WidgetRowEditComponent = defineComponent({
+  name: 'WidgetRowEdit',
   props: {
     renderOpts: {
       type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetEditOptions>,
@@ -193,7 +194,9 @@ export const WidgetRowEditComponent = defineComponent({
     return () => {
       const { renderParams } = props
       const { widget } = renderParams
-      return h(VxeFormGatherComponent, {}, {
+      return h(VxeFormGroupComponent, {
+        field: widget.field
+      }, {
         default () {
           const colObjList = computedColObjList.value
           return colObjList.map((span, colItemIndex) => {
@@ -212,6 +215,7 @@ export const WidgetRowEditComponent = defineComponent({
 })
 
 export const WidgetRowViewComponent = defineComponent({
+  name: 'WidgetRowView',
   props: {
     renderOpts: {
       type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions>,

packages/form-gather/index.ts

@@ -1,8 +1,14 @@
 import { App } from 'vue'
 import { VxeUI } from '@vxe-ui/core'
-import VxeFormGatherComponent from '../form/src/form-gather'
+import VxeFormGroupComponent from '../form/src/form-group'
 import { dynamicApp } from '../dynamics'
 
+const VxeFormGatherComponent = Object.assign({}, VxeFormGroupComponent, { name: 'VxeFormGather' })
+
+/**
+ * 已废弃，被 VxeFormGather 替换
+ * @deprecated
+ */
 export const VxeFormGather = Object.assign(VxeFormGatherComponent, {
   install (app: App) {
     app.component(VxeFormGatherComponent.name as string, VxeFormGatherComponent)
@@ -12,5 +18,9 @@ export const VxeFormGather = Object.assign(VxeFormGatherComponent, {
 dynamicApp.use(VxeFormGather)
 VxeUI.component(VxeFormGatherComponent)
 
+/**
+ * 已废弃，被 FormGroup 替换
+ * @deprecated
+ */
 export const FormGather = VxeFormGather
 export default VxeFormGather