improve form style

packages/editor/src/components/ComponentWrapper.tsx

@@ -1,17 +1,19 @@
 import { css } from '@emotion/react';
+import { ComponentWrapperType } from '@meta-ui/runtime';
 import React from 'react';
 
-type ComponentWrapperProps = {
-  id: string;
-};
+// children of components in this list should render height as 100%
+const fullHeightList = ['core/v1/grid_layout'];
 
-export const genComponentWrapper = (
-  selectedComponentId: string,
-  hoverComponentId: string,
-  onClick: (id: string) => void,
-  onMouseEnter: (id: string) => void,
-  onMouseLeave: (id: string) => void
-): React.FC<ComponentWrapperProps> => {
+export const genComponentWrapper = (wrapperProps: {
+  selectedComponentId: string;
+  hoverComponentId: string;
+  onClick: (id: string) => void;
+  onMouseEnter: (id: string) => void;
+  onMouseLeave: (id: string) => void;
+}): ComponentWrapperType => {
+  const { selectedComponentId, hoverComponentId, onClick, onMouseEnter, onMouseLeave } =
+    wrapperProps;
   return props => {
     const isHover = hoverComponentId === props.id;
     const isSelected = selectedComponentId === props.id;
@@ -21,9 +23,9 @@ export const genComponentWrapper = (
     } else if (isHover) {
       borderColor = 'black';
     }
-
     const style = css`
-      height: 100%;
+      height: ${fullHeightList.includes(props.parentType) ? '100%' : 'auto'};
+      width: 100%;
       position: relative;
       &:after {
         content: '';

packages/editor/src/components/Editor.tsx

@@ -24,7 +24,7 @@ export const Editor = () => {
     const onClick = (id: string) => {
       setSelectedComponentId(() => id);
     };
-    const onMouseOver = (id: string) => {
+    const onMouseEnter = (id: string) => {
       setHoverComponentId(() => id);
     };
     const onMouseLeave = () => {
@@ -33,13 +33,13 @@ export const Editor = () => {
       //   setHoverComponentId(() => '');
       // }
     };
-    return genComponentWrapper(
+    return genComponentWrapper({
       selectedComponentId,
       hoverComponentId,
       onClick,
-      onMouseOver,
-      onMouseLeave
-    );
+      onMouseEnter,
+      onMouseLeave,
+    });
   }, [
     selectedComponentId,
     setSelectedComponentId,

packages/runtime/src/components/chakra-ui/Form/Form.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { css } from '@emotion/react';
 import { Type, Static } from '@sinclair/typebox';
 import { createComponent } from '@meta-ui/core';
-import { Button } from '@chakra-ui/react';
+import { Button, VStack } from '@chakra-ui/react';
 import { watch } from '@vue-reactivity/watch';
 import { ComponentImplementation } from '../../../services/registry';
 import Slot from '../../_internal/Slot';
@@ -111,14 +111,18 @@ const FormImpl: ComponentImplementation<Static<typeof PropsSchema>> = ({
   `;
 
   return (
-    <form css={style}>
+    <VStack css={style} spacing="5">
       <Slot slotsMap={slotsMap} slot="content" />
       {hideSubmit ? undefined : (
-        <Button marginLeft="auto" disabled={isFormInvalid} onClick={onSubmit}>
+        <Button
+          marginInlineStart="auto !important"
+          disabled={isFormInvalid}
+          onClick={onSubmit}
+        >
           提交
         </Button>
       )}
-    </form>
+    </VStack>
   );
 };
 

packages/runtime/src/components/chakra-ui/Form/FormCSS.ts

@@ -3,12 +3,7 @@ import { css } from '@emotion/react';
 export const FormControlCSS = css`
   display: flex;
   flex-direction: column;
-  margin-bottom: 20px;
   align-items: end;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
 `;
 
 export const FormControlContentCSS = css`

packages/runtime/src/services/ImplWrapper.tsx

@@ -170,37 +170,42 @@ export const ImplWrapper = React.forwardRef<HTMLDivElement, ImplWrapperProps>(
       </React.Fragment>
     );
 
+    let parentComponent;
+    if (targetSlot && app) {
+      parentComponent = app.spec.components.find(c => c.id === targetSlot.id);
+    }
     // wrap component, but grid_layout is root component and cannot be chosen, so don't wrap it
     if (
       ComponentWrapper &&
       c.parsedType.name !== 'dummy' &&
       c.parsedType.name !== 'grid_layout'
     ) {
-      result = <ComponentWrapper id={c.id}>{result}</ComponentWrapper>;
+      result = (
+        <ComponentWrapper id={c.id} parentType={parentComponent?.type || ''}>
+          {result}
+        </ComponentWrapper>
+      );
     }
 
-    if (targetSlot && app) {
-      const targetC = app.spec.components.find(c => c.id === targetSlot.id);
-      if (targetC?.parsedType.name === 'grid_layout') {
-        // prevent react componentWrapper
-        /* eslint-disable */
-        const {
-          component,
-          services,
-          targetSlot,
-          app,
-          slotsMap,
-          componentWrapper,
-          gridCallbacks,
-          ...restProps
-        } = props;
-        /* eslint-enable */
-        result = (
-          <div key={c.id} data-meta-ui-id={c.id} ref={ref} {...restProps}>
-            {result}
-          </div>
-        );
-      }
+    if (parentComponent?.parsedType.name === 'grid_layout') {
+      // prevent react componentWrapper
+      /* eslint-disable */
+      const {
+        component,
+        services,
+        targetSlot,
+        app,
+        slotsMap,
+        componentWrapper,
+        gridCallbacks,
+        ...restProps
+      } = props;
+      /* eslint-enable */
+      result = (
+        <div key={c.id} data-meta-ui-id={c.id} ref={ref} {...restProps}>
+          {result}
+        </div>
+      );
     }
 
     return result;

packages/runtime/src/types/RuntimeSchema.ts

@@ -14,7 +14,12 @@ export type MetaUIServices = {
   apiService: ApiService;
 };
 
-export type ComponentWrapperType = React.FC<{ id: string }>;
+export type ComponentWrapperProps = {
+  id: string;
+  parentType: string;
+};
+
+export type ComponentWrapperType = React.FC<ComponentWrapperProps>;
 
 export type GridCallbacks = {
   onDragStop?: (id: string, layout: RGL.Layout[]) => void;