feat: add form component

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

components/form-item/index.tsx

@@ -1,4 +1,4 @@
-import { h, SignalProps, PropTypes, useLogic, ConvertToLayoutTreeDraft } from '@polymita/renderer';
+import { h, SignalProps, PropTypes, useLogic, ConvertToLayoutTreeDraft, VirtualLayoutJSON } from '@polymita/renderer';
 import { after, Signal, signal } from '@polymita/signal'
 
 export const name = 'FormItem' as const
@@ -10,6 +10,10 @@ export let meta: {
 
 export interface FormItemProps {
   labelWidth?: number
+  contentWidth?: number
+  name?: string
+  label?: string
+  children?: VirtualLayoutJSON | VirtualLayoutJSON[]
 }
 
 export const propTypes = {
@@ -27,10 +31,16 @@ export type FormItemLayout = {
   ]
 }
 export const layout = (props: FormItemProps) => {
-  const logic = useLogic<LogicReturn>()
+  const { name, label } = props;
   return (
-    <formItemContainer>
-
+    <formItemContainer className="flex items-center mb-4">
+      <formItemLabel className="flex-none text-right mr-2" style={{ width: props.labelWidth }} >
+        {label}
+        {label ? <formItemLabelColon className="m-1" >:</formItemLabelColon> : null}
+      </formItemLabel>
+      <formItemContent className="flex-1" style={{ width: props.contentWidth }}>
+        {props.children}
+      </formItemContent>
     </formItemContainer>
   )
 }

components/form/demo.mdx

@@ -1,35 +1,27 @@
-import * as Module from './index.tsx'
+import * as TestModule from './index-test.tsx'
 import { RenderToReactWithWrap } from '../../shared/render'
 import { useState } from 'react'
-export const Component = RenderToReactWithWrap(Module)
-export function InputBox () {
+export const Component = RenderToReactWithWrap(TestModule)
+export function TestCase () {
   const [val, setVal] = useState('v0')
   return (
-    <div style={{ margin: '10px', color: '#999' }}>
-
+    <div style={{ margin: '10px' }}>
+      <Component />
     </div>
   )
 }
 
 
-export function InputBox2 () {
+export function TestCase2 () {
   const [val, setVal] = useState('v0')
   return (
-    <div style={{ margin: '10px', color: '#999' }}>
+    <div style={{ margin: '10px'  }}>
     </div>
   )
 }
 
-# Input 输入
+# Form 表单
 
-<InputBox />
+普通 Form Input 表单
 
-接收用户输入
-
-<InputBox2 />
-
-数字框 type=number
-
-<Component disabled value="disabled" />
-
-不可以的输入框
+<TestCase />

components/form/index-test.tsx

@@ -0,0 +1,75 @@
+import { h, SignalProps, PropTypes, useLogic, ConvertToLayoutTreeDraft, createComposeComponent, createFunctionComponent } from '@polymita/renderer';
+import { after, Signal, signal } from '@polymita/signal'
+import * as Form from '../form'
+import * as FormItem from '../form-item'
+import * as Input from '../input'
+
+export const name = 'FormTest' as const
+export let meta: {
+  props: FormTestProps,
+  layoutStruct: FormTestLayout
+  patchCommands: []
+}
+
+export interface FormTestProps {
+}
+
+export const propTypes = {
+}
+
+export const logic = (props: SignalProps<FormTestProps>) => {
+  const name = signal('');
+  const password = signal('');
+
+  return {
+    name,
+    password,
+  }
+}
+type LogicReturn = ReturnType<typeof logic>
+
+export type FormTestLayout = {
+  type: 'formTestContainer',
+  children: [
+  ]
+}
+
+const FormCpt = createFunctionComponent(Form)
+const FormItemCpt = createComposeComponent(FormItem)
+const InputCpt = createFunctionComponent(Input)
+export const layout = (props: FormTestProps) => {
+  const logic = useLogic<LogicReturn>()
+  return (
+    <formTestContainer>
+      <formResult>
+        name: {logic.name()} <br/>
+        password: {logic.password()}
+      </formResult>
+      <br/>
+      <br/>
+      <FormCpt
+        layout={{ labelWidth: '6em' }} 
+        form={
+          <div>
+            <FormItemCpt label="name" >
+              <InputCpt value={logic.name} />
+            </FormItemCpt>
+            <FormItemCpt label="password" >
+              <InputCpt value={logic.password} />
+            </FormItemCpt>
+          </div>
+        }
+      />
+    </formTestContainer>
+  )
+}
+
+export const styleRules = (props: FormTestProps, layout: ConvertToLayoutTreeDraft<FormTestLayout>) => {
+  return [
+  ]
+}
+
+export const designPattern = (props: FormTestProps, layout: ConvertToLayoutTreeDraft<FormTestLayout>) => {
+  const logic = useLogic<LogicReturn>()
+  return {}
+}

components/form/index.tsx

@@ -1,5 +1,7 @@
 import { h, SignalProps, PropTypes, useLogic, ConvertToLayoutTreeDraft, VirtualLayoutJSON } from '@polymita/renderer';
 import { after, Signal, signal } from '@polymita/signal'
+import { traverseNode } from '../../shared/nodes';
+import * as FormItem from '../form-item'
 
 export const name = 'Form' as const
 export let meta: {
@@ -10,10 +12,10 @@ export let meta: {
 
 export interface FormProps {
   layout?: {
-    labelWidth?: number
-    contentWidth?: number
+    labelWidth?: number | string
+    contentWidth?: number | string
   }
-  children?: VirtualLayoutJSON[]
+  form?: VirtualLayoutJSON | VirtualLayoutJSON[]
 }
 
 export const propTypes = {
@@ -31,11 +33,19 @@ export type FormLayout = {
   ]
 }
 export const layout = (props: FormProps) => {
-  const logic = useLogic<LogicReturn>()
+  const { form } = props
+
+  console.log('form: ', form);
+  traverseNode(form, (node: any) => {
+    if (typeof node.type === 'function' && node.type.name === FormItem.name) {
+      node.props.labelWidth = props.layout?.labelWidth
+      node.props.contentWidth = props.layout?.contentWidth
+    }
+  })
 
   return (
-    <formContainer>
-       
+    <formContainer className="block">
+      {form}
     </formContainer>
   )
 }

demo-site/components/form-item.js

@@ -26,8 +26,8 @@ var logic = (props) => {
   return {};
 };
 var layout = (props) => {
-  const logic2 = useLogic();
-  return /* @__PURE__ */ h("formItemContainer", null);
+  const { name: name2, label } = props;
+  return /* @__PURE__ */ h("formItemContainer", { className: "flex items-center mb-4" }, /* @__PURE__ */ h("formItemLabel", { className: "flex-none text-right mr-2", style: { width: props.labelWidth } }, label, label ? /* @__PURE__ */ h("formItemLabelColon", { className: "m-1" }, ":") : null), /* @__PURE__ */ h("formItemContent", { className: "flex-1", style: { width: props.contentWidth } }, props.children));
 };
 var styleRules = (props, layout2) => {
   return [];