feat(form): 新增flex-layout组件

packages/form-schema/src/base.ts

@@ -761,6 +761,10 @@ export interface ComponentConfig extends FormItem {
   display: any;
 }
 
+export interface FlexLayoutConfig extends FormItem, ContainerCommonConfig {
+  type: 'flex-layout';
+}
+
 export type ChildConfig =
   | FormItem
   | TabConfig

packages/form/src/containers/FlexLayout.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="m-form-flex-layout" :style="{ display: 'flex', flexWrap: 'wrap', gap }">
+    <Container
+      v-for="(item, index) in config.items"
+      :key="(item as Record<string, any>)[mForm?.keyProp || '__key'] ?? index"
+      :config="item"
+      :model="name ? model[name] : model"
+      :lastValues="name ? lastValues[name] : lastValues"
+      :is-compare="isCompare"
+      :prop="prop"
+      :size="size"
+      :disabled="disabled"
+      :label-width="config.labelWidth || labelWidth"
+      @change="changeHandler"
+      @addDiffCount="onAddDiffCount()"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import type { FlexLayoutConfig } from '@tmagic/form-schema';
+
+import type { ContainerChangeEventData, FormState } from '../schema';
+
+import Container from './Container.vue';
+
+defineOptions({
+  name: 'MFormFlexLayout',
+});
+
+const props = defineProps<{
+  model: any;
+  lastValues?: any;
+  isCompare?: boolean;
+  config: FlexLayoutConfig;
+  name?: string;
+  labelWidth?: string;
+  prop?: string;
+  size?: string;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
+
+const mForm = inject<FormState | undefined>('mForm');
+
+const gap = computed(() => props.config.gap || '16px');
+
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
+};
+
+const onAddDiffCount = () => emit('addDiffCount');
+</script>

packages/form/src/index.ts

@@ -20,6 +20,7 @@ import type { App } from 'vue';
 
 import Container from './containers/Container.vue';
 import Fieldset from './containers/Fieldset.vue';
+import FlexLayout from './containers/FlexLayout.vue';
 import GroupList from './containers/GroupList.vue';
 import Panel from './containers/Panel.vue';
 import Row from './containers/Row.vue';
@@ -63,6 +64,7 @@ export { default as MFormDrawer } from './FormDrawer.vue';
 export { default as MFormBox } from './FormBox.vue';
 export { default as MContainer } from './containers/Container.vue';
 export { default as MFieldset } from './containers/Fieldset.vue';
+export { default as MFlexLayout } from './containers/FlexLayout.vue';
 export { default as MPanel } from './containers/Panel.vue';
 export { default as MRow } from './containers/Row.vue';
 export { default as MTabs } from './containers/Tabs.vue';
@@ -114,6 +116,7 @@ export default {
     app.component('m-form-step', MStep);
     app.component('m-form-table', Table);
     app.component('m-form-tab', Tabs);
+    app.component('m-form-flex-layout', FlexLayout);
     app.component('m-fields-text', Text);
     app.component('m-fields-img-upload', Text);
     app.component('m-fields-number', Number);