cdui-js 1.0.18 → 1.0.20

package/css/all.css

@@ -8,7 +8,7 @@
 @import url(textbox.css);
 @import url(popup.css);
 @import url(combobox.css);
-@import url(canlendar.css);
+@import url(datewidget.css);
 @import url(datepicker.css);
 @import url(mobile-datepicker.css);
 @import url(form.css);

package/css/{canlendar.css → datewidget.css}

@@ -1,5 +1,4 @@
-.canlendar,
-.monthwidget {
+.datewidget {
   max-width: 380px;
   height: 320px;
   border-radius: 12px;
@@ -8,17 +7,14 @@
   user-select: none;
 }
 
-.canlendar-header,
-.canlendar-weeks,
-.monthwidget-header {
+.datewidget-header {
   display: flex;
   align-items: center;
   height: 36px;
   line-height: 36px;
 }
 
-.canlendar-title,
-.monthwidget-title {
+.datewidget-title {
   flex: auto;
   padding-left: 12px;
   font-weight: bold;
@@ -26,8 +22,7 @@
   cursor: pointer;
 }
 
-.canlendar-header > .icon,
-.monthwidget-header > .icon {
+.datewidget-header > .icon {
   box-sizing: border-box;
   width: 40px;
   height: 100%;
@@ -35,42 +30,24 @@
   cursor: pointer;
 }
 
-.canlendar-weeks > span {
-  flex: auto;
-  text-align: center;
-  vertical-align: middle;
-}
-
-.canlendar-body {
-  height: calc(100% - 72px);
-}
-
-.canlendar-date,
-.monthwidget-month {
+.datewidget-item {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  width: 14.28%;
-  height: 16.66%;
   cursor: pointer;
 }
 
-.canlendar-date.disabled,
-.monthwidget-month.disabled {
+.datewidget-item.disabled {
   cursor: not-allowed;
 }
 
-.canlendar-date.today,
-.canlendar-date.selected,
-.monthwidget-month.today,
-.monthwidget-month.selected {
+.datewidget-item.today,
+.datewidget-item.selected {
   position: relative;
 }
 
-.canlendar-date.today::before,
-.canlendar-date.selected::before,
-.monthwidget-month.today::before,
-.monthwidget-month.selected::before {
+.datewidget-item.today::before,
+.datewidget-item.selected::before {
   position: absolute;
   content: '';
   width: 40px;
@@ -78,3 +55,18 @@
   border-radius: 40px;
   z-index: -1;
 }
+
+.canlendar-weeks > span {
+  flex: auto;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.canlendar-body {
+  height: calc(100% - 72px);
+}
+
+.canlendar-body .datewidget-item {
+  width: 14.28%;
+  height: 16.66%;
+}

package/css/form.css

@@ -1,11 +1,11 @@
 .form-align-left,
 .form-align-right {
   display: flex;
-  align-items: center;
 }
 
 .form-align-left > label,
 .form-align-right > label {
+  margin-top: 4px;
   width: 100px;
 }
 
@@ -17,3 +17,9 @@
 .form-align-right > label {
   padding-left: 8px;
 }
+
+.form-error {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #ff295a;
+}

package/demo/css/css.md

@@ -287,17 +287,17 @@
 .combobox:has(.combobox-input:focus) { border: 1px solid #1b212d; }
 
 
-# canlendar 日历
+# canlendar monthwidget yearwidget 日历 年月 年
 
-.canlendar { border: 1px solid #e4e4e4; }
-.canlendar-header > .icon { stroke: #1b212d; }
-.canlendar-weeks > span { color: #888f97; }
-.canlendar-date.disabled { color: #e4e4e4; }
-.canlendar-date.prev-month, .canlendar-date.next-month { color: #888f97; }
-.canlendar-date.today::before { background: #f5f5f5; }
-.canlendar-date.selected { color: white; }
-.canlendar-date.selected::before { background: #ff4000; }
+.datewidget { border: 1px solid #e4e4e4; }
+.datewidget-header > .icon { stroke: #1b212d; }
+.datewidget-item.disabled { color: #e4e4e4; }
+.datewidget-item.prev-month, .datewidget-item.next-month { color: #888f97; }
+.datewidget-item.today::before { background: #f5f5f5; }
+.datewidget-item.selected { color: white; }
+.datewidget-item.selected::before { background: #ff4000; }
 
+.canlendar-weeks > span { color: #888f97; }
 
 # datepicker 日期选择
 

package/demo/src/App.tsx

@@ -1,35 +1,14 @@
-import { batch, createEffect, omitProps, pickProps, reactive } from '../../src/reactive';
-import { Icon } from '../../src/components/Icon';
 import { CanlendarPage } from './pages/Canlendar';
+import { CarouselPage } from './pages/Carousel';
 import { ComboBoxPage } from './pages/ComboBox';
 import { DatePickerPage } from './pages/DatePicker';
 import { FormPage } from './pages/Form';
 import { MobileDatePickerPage } from './pages/MobileDatePicker';
 
-const Test = (props: { text1: string; text2: string }) => {
-  return (
-    <div>
-      <div>{pickProps(props, ['text1']).text1}</div>
-      <div>{omitProps(props, ['text1']).text2}</div>
-    </div>
-  );
-};
-
 export const App = () => {
-  let state = reactive({
-    text1: '111',
-    text2: '222',
-  });
-
-  createEffect(() => {
-    console.log(state.text1, state.text2);
-  });
-
   return (
     <div style={{ 'min-height': '100%' }}>
-      <Icon name="dropdown" class="test" onclick={() => alert(1111)}></Icon>
-      <Test text1={state.text1} text2={state.text2}></Test>
-      <button onclick={() => batch(() => (state.text1 = state.text2 = '' + Math.random()))}>click</button>
+      <CarouselPage></CarouselPage>
       <CanlendarPage></CanlendarPage>
       <DatePickerPage></DatePickerPage>
       <MobileDatePickerPage></MobileDatePickerPage>

package/demo/src/css/atomic.css

@@ -913,14 +913,14 @@ body { stroke: #A2A7AD; fill: #A2A7AD; }
 .combobox:has(.combobox-input:focus) { border: 1px solid #1b212d; }
 
 
-.canlendar { border: 1px solid #e4e4e4; }
-.canlendar-header > .icon { stroke: #1b212d; }
+.datewidget { border: 1px solid #e4e4e4; }
+.datewidget-header > .icon { stroke: #1b212d; }
+.datewidget-item.disabled { color: #e4e4e4; }
+.datewidget-item.prev-month, .datewidget-item.next-month { color: #888f97; }
+.datewidget-item.today::before { background: #f5f5f5; }
+.datewidget-item.selected { color: white; }
+.datewidget-item.selected::before { background: #ff4000; }
 .canlendar-weeks > span { color: #888f97; }
-.canlendar-date.disabled { color: #e4e4e4; }
-.canlendar-date.prev-month, .canlendar-date.next-month { color: #888f97; }
-.canlendar-date.today::before { background: #f5f5f5; }
-.canlendar-date.selected { color: white; }
-.canlendar-date.selected::before { background: #ff4000; }
 
 
 .datepicker { border: 1px solid #e4e4e4; background: white; }

package/demo/src/pages/Canlendar.tsx

@@ -1,12 +1,16 @@
 import { Canlendar } from '../../../src/components/Canlendar';
+import { MonthWidget } from '../../../src/components/MonthWidget';
 
 export const CanlendarPage = () => {
   return (
-    <Canlendar
-      value={new Date()}
-      onValueChange={(date) => {
-        console.log(date);
-      }}
-    ></Canlendar>
+    <div>
+      <Canlendar
+        value={new Date()}
+        onValueChange={(date) => {
+          console.log(date);
+        }}
+      ></Canlendar>
+      <MonthWidget></MonthWidget>
+    </div>
   );
 };

package/demo/src/pages/Carousel.tsx

@@ -0,0 +1,40 @@
+import { Carousel, CarouselApi, CarouselButtons } from '../../../src/components/Carousel';
+
+const carousels = [
+  {
+    text: '页面1',
+  },
+  {
+    text: '页面2',
+  },
+  {
+    text: '页面3',
+  },
+  {
+    text: '页面4',
+  },
+];
+
+export const CarouselPage = () => {
+  let carousel: CarouselApi;
+
+  return (
+    <div class="relative">
+      <Carousel
+        class="row-gap"
+        api={(api) => (carousel = api)}
+        each={carousels}
+        disabledScroll={true}
+        autoplay={false}
+        style={{ width: '100%', height: '200px' }}
+      >
+        {(item) => (
+          <div class="border round" style={{ flex: 'none', width: '100%', height: '100%', 'margin-right': '4px' }}>
+            {item.text}
+          </div>
+        )}
+      </Carousel>
+      <CarouselButtons carousel={carousel}></CarouselButtons>
+    </div>
+  );
+};

package/demo/src/pages/ComboBox.tsx

@@ -1,8 +1,25 @@
+import { reactive } from '../../../src';
 import { ComboBox } from '../../../src/components/ComboBox';
 
 export const ComboBoxPage = () => {
+  let combobox;
+
+  const state = reactive({
+    value: '111',
+  });
+
   return (
-    <ComboBox popup={{ style: { width: '200px', padding: '8px 0' } }}>
+    <ComboBox
+      api={(api) => (combobox = api)}
+      value={state.value}
+      popup={{
+        style: { width: '200px', padding: '8px 0' },
+        onclick: (event) => {
+          state.value = event.target.textContent;
+          combobox.closePopup();
+        },
+      }}
+    >
       <div>111</div>
       <div>222</div>
     </ComboBox>

package/demo/src/pages/Form.tsx

@@ -1,6 +1,7 @@
 import { reactive } from '../../../src/reactive';
 import { For } from '../../../src/components/For';
 import { TextBox } from '../../../src/components/TextBox';
+import { ComboBox } from '../../../src/components/ComboBox';
 import { Form, FormApi, FormItem, ValidateRules } from '../../../src/components/Form';
 
 const rules: ValidateRules = {
@@ -18,27 +19,52 @@ export const FormPage = () => {
         field: 'a',
         label: '111',
         required: true,
+        Input: () => <TextBox></TextBox>,
       },
       {
         field: 'b',
         label: '222',
         required: true,
         labelWidth: '100px',
+        Input: () => {
+          let combobox;
+
+          return (
+            <ComboBox
+              api={(api) => (combobox = api)}
+              value={state.b}
+              popup={{
+                onclick: (event) => {
+                  state.b = +event.target.textContent;
+                  combobox.closePopup();
+                },
+              }}
+            >
+              <div>1</div>
+              <div>2</div>
+            </ComboBox>
+          );
+        },
       },
     ],
+    a: 1,
+    b: 2,
   });
 
   let form: FormApi;
 
   return (
-    <Form data={{}} rules={{}} align={state.align} labelWidth={state.labelWidth} api={(api) => (form = api)}>
+    <Form data={state} rules={{}} align={state.align} labelWidth={state.labelWidth} api={(api) => (form = api)}>
       <For each={state.items}>
         {(item) => (
           <FormItem field={item.field} label={item.label} required={item.required}>
-            <TextBox></TextBox>
+            <div>
+              <item.Input></item.Input>
+            </div>
           </FormItem>
         )}
       </For>
+      <div>{`a: ${state.a}  b: ${state.b}`}</div>
       <button
         type="button"
         onclick={() =>
@@ -47,6 +73,7 @@ export const FormPage = () => {
             label: '???',
             required: false,
             labelWidth: '100px',
+            Input: () => <TextBox></TextBox>,
           })
         }
       >
@@ -61,6 +88,9 @@ export const FormPage = () => {
       <button type="button" onclick={() => form.validate()}>
         validate
       </button>
+      <button type="button" onclick={() => form.clearErrors()}>
+        clearErrors
+      </button>
     </Form>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdui-js",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "type": "module",
   "main": "src/index.ts",
   "bin": {

package/src/components/Button.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '../jsx';
 
-export const Button = (props?: JSX.SvgSVGAttributes<never>) => {
+export const Button = (props?: JSX.HTMLAttributes<never>) => {
   return <button type="button" {...props}></button>;
 };

package/src/components/Canlendar.tsx

@@ -24,7 +24,7 @@ const renderDates = (
 
   for (let i = from; i <= to; i++) {
     items.push(
-      `<span class="canlendar-date${className}${today === i ? ' today' : ''}${selected === i ? ' selected' : ''}${
+      `<span class="datewidget-item${className}${today === i ? ' today' : ''}${selected === i ? ' selected' : ''}${
         disableFn && disableFn(year, month, i) ? ' disabled' : ''
       }" data-date="${year + '|' + month + '|' + i}">${i}</span>`,
     );
@@ -162,9 +162,9 @@ export const Canlendar = (
   const [currentValue, setCurrentValue] = createSignal(selectedValue() || new Date());
 
   return (
-    <div class={combineClass('canlendar', props.class)} {...omitProps(props, OMIT_PROPS)}>
-      <div class="canlendar-header">
-        <div ref={domTitle as any} class="canlendar-title">
+    <div class={combineClass('canlendar datewidget', props.class)} {...omitProps(props, OMIT_PROPS)}>
+      <div class="datewidget-header canlendar-header">
+        <div ref={domTitle as any} class="datewidget-title">
           {replaceTemplate(i18n.Month, currentValue().getFullYear(), formatMonth(currentValue()))}
         </div>
         <svg class="icon icon-s" aria-hidden={true} onclick={() => setCurrentValue(switchMonth(currentValue(), -1))}>
@@ -174,12 +174,12 @@ export const Canlendar = (
           <use href="#icon-forward"></use>
         </svg>
       </div>
-      <div class="canlendar-weeks">
+      <div class="datewidget-header canlendar-weeks">
         <For each={i18n.Weeks}>{(item) => <span>{item}</span>}</For>
       </div>
       <div
         ref={domBody as any}
-        class="canlendar-body"
+        class="datewidget-body canlendar-body"
         onclick={(event) => {
           let target = event.target as HTMLElement;
           let date, onValueChange;

package/src/components/Carousel.tsx

@@ -15,9 +15,7 @@ import {
 import { For } from './For';
 import { Icon } from './Icon';
 
-const CLASS_NAME = 'carousel-vertical';
-
-const EVENT_OPTIONS = { passive: true, capture: true };
+const EVENT_OPTIONS = { passive: false, capture: true };
 
 const DOTS = new Array(100).join('0').split('');
 
@@ -48,7 +46,7 @@ if (isBrowser) {
   );
 }
 
-const OMIT_PROPS = ['class', 'each', 'children', 'autoplay', 'interval', 'vertical', 'api'] as const;
+const OMIT_PROPS = ['class', 'each', 'children', 'autoplay', 'interval', 'disabledScroll', 'api'] as const;
 
 /**
  * 轮播组件外部调用接口
@@ -94,9 +92,9 @@ export const Carousel = <T, U extends JSX.Element>(
      */
     interval?: number;
     /**
-     * 是否竖直滚动
+     * 是否禁止滚动（触控时不允许上下滚动）
      */
-    vertical?: boolean;
+    disabledScroll?: boolean;
     /**
      * 外部调用接口
      */
@@ -113,11 +111,6 @@ export const Carousel = <T, U extends JSX.Element>(
   // 自动滚动计时器
   let autoplayTimer: any;
 
-  // 获取滚动方向
-  const scrollType = createMemo(() => (props.vertical ? 'scrollTop' : 'scrollLeft'));
-  const offsetType = createMemo(() => (props.vertical ? 'offsetTop' : 'offsetLeft'));
-  const screenType = createMemo(() => (props.vertical ? 'screenY' : 'screenX'));
-
   // 滚动到指定索引
   const scrollTo = (index: number) => {
     let children = ref.children;
@@ -135,7 +128,7 @@ export const Carousel = <T, U extends JSX.Element>(
     animateScrollIntoView(ref, children[index % length] as HTMLElement).then(() => {
       if (index >= count) {
         // 滚动到对应节点
-        ref[scrollType()] = (children[index - count] as HTMLElement)[offsetType()];
+        ref.scrollLeft = (children[index - count] as HTMLElement).offsetLeft;
         // 调整到指定节点
         index -= count;
       }
@@ -152,7 +145,7 @@ export const Carousel = <T, U extends JSX.Element>(
       let count = props.each.length;
 
       // 先滚动到对应节点的填充节点
-      ref[scrollType()] = (ref.children[index + count] as HTMLElement)[offsetType()];
+      ref.scrollLeft = (ref.children[index + count] as HTMLElement).offsetLeft;
       // 调整到指定节点
       index += count;
     }
@@ -174,21 +167,31 @@ export const Carousel = <T, U extends JSX.Element>(
     checkFirstIndex();
 
     // 记录按下时状态
-    pressdown = (event.changedTouches[0] || event.touches[0])[screenType()];
-    pressdownScroll = ref[scrollType()];
+    pressdown = (event.changedTouches[0] || event.touches[0]).screenX;
+    pressdownScroll = ref.scrollLeft;
 
     // 取消自动播放
     clearTimeout(autoplayTimer);
+
+    if (props.disabledScroll) {
+      event.preventDefault();
+      return false;
+    }
   };
 
   const ontouchmove = (event: TouchEvent) => {
     if (pressdown >= 0) {
-      ref[scrollType()] = pressdownScroll - ((event.changedTouches[0] || event.touches[0])[screenType()] - pressdown);
+      ref.scrollLeft = pressdownScroll - ((event.changedTouches[0] || event.touches[0]).screenX - pressdown);
+    }
+
+    if (props.disabledScroll) {
+      event.preventDefault();
+      return false;
     }
   };
 
   const ontouchend = (event: TouchEvent) => {
-    let distance = (event.changedTouches[0] || event.touches[0])[screenType()] - pressdown;
+    let distance = (event.changedTouches[0] || event.touches[0]).screenX - pressdown;
     let index = currentIndex();
 
     // 清除按下状态
@@ -200,13 +203,18 @@ export const Carousel = <T, U extends JSX.Element>(
     } else if (distance < -20) {
       // 如果是第一个位置,则恢复滚动位置
       if (index === 0) {
-        ref[scrollType()] = ref.children[offsetType()];
+        ref.scrollLeft = (ref.children[0] as HTMLElement).offsetLeft;
       }
 
       scrollTo(index + 1);
     } else {
       animateScrollIntoView(ref, ref.children[index % ref.children.length] as HTMLElement);
     }
+
+    if (props.disabledScroll) {
+      event.preventDefault();
+      return false;
+    }
   };
 
   const autoplay = () => {
@@ -244,18 +252,6 @@ export const Carousel = <T, U extends JSX.Element>(
       ) as CarouselApi,
     );
 
-  createEffect(() => {
-    let classList = ref.classList;
-
-    if (props.vertical) {
-      if (!classList.contains(CLASS_NAME)) {
-        classList.add();
-      }
-    } else {
-      classList.remove(CLASS_NAME);
-    }
-  });
-
   createEffect(autoplay);
 
   onMount(() => {

package/src/components/ComboBox.tsx

@@ -1,7 +1,8 @@
 import { JSX } from '../jsx';
-import { combineClass, omitProps } from '../reactive';
+import { combineClass, omitProps, useContext, watch } from '../reactive';
 import { disableAutoCloseEvent } from '../dom';
 import { Popup, PopupApi, PopupProps } from './Popup';
+import { FormItemContext } from './provider';
 
 const OMIT_PROPS = ['class', 'value', 'readonly', 'popupOnFocus', 'popup', 'onPopup', 'api', 'children'] as const;
 
@@ -14,7 +15,13 @@ export const ComboBox = (
       /**
        * 值
        */
-      value?: string;
+      value?: any;
+      /**
+       * 值样式
+       *
+       * @param value 当前值
+       */
+      format?(value: any): string;
       /**
        * 是否只读
        */
@@ -36,12 +43,24 @@ export const ComboBox = (
     props.api && props.api(popup);
   };
 
+  const formItem = useContext(FormItemContext);
+
+  const initFormItem = (dom: HTMLInputElement) => {
+    watch(
+      () => props.value,
+      (value) => formItem.setValue(value),
+    );
+
+    formItem.init(dom);
+  };
+
   return (
     <div class={combineClass('combobox', props.class)} {...omitProps(props, OMIT_PROPS)}>
       <div class="combobox-host" {...disableAutoCloseEvent}>
         <input
+          ref={formItem && initFormItem}
           class="combobox-input"
-          value={props.value || ''}
+          value={props.format ? props.format(props.value) : '' + (props.value || '')}
           readonly={props.readonly}
           onfocus={() => props.popupOnFocus && popup.openPopup()}
           onclick={() => props.readonly && !props.popupOnFocus && popup.togglePopup()}

package/src/components/Form.tsx

@@ -33,10 +33,6 @@ export interface FormItemProps {
    * 是否隐藏
    */
   hidden?: boolean;
-  /**
-   * 点击 label 自动获取焦点的组件（选择器）
-   */
-  for?: string;
   /**
    * 错误信息
    */
@@ -47,6 +43,55 @@ export interface FormItemProps {
   requiredError?: string;
 }
 
+/**
+ * 表单外部调用接口
+ */
+export interface FormApi {
+  /**
+   * 校验表单
+   *
+   * @param filter 过滤器（校验部分字段）
+   */
+  validate(filter?: (target: ValidateTarget) => void | boolean): Promise<boolean>;
+
+  /**
+   * 滚动到第一个错误位置
+   */
+  scrollToError(): void;
+
+  /**
+   * 清除所有错误信息
+   */
+  clearErrors(): void;
+}
+
+export interface FormProps {
+  /**
+   * 表单数据
+   */
+  data: object;
+
+  /**
+   * 表单校验规则
+   */
+  rules: ValidateRules;
+
+  /**
+   * label 对齐方式
+   */
+  align?: 'left' | 'top' | 'right';
+
+  /**
+   * 标签宽度
+   */
+  labelWidth?: string;
+
+  /**
+   * 外部调用接口
+   */
+  api?: (api: FormApi) => void;
+}
+
 /**
  * 校验目标
  */
@@ -198,11 +243,6 @@ export interface ValidateRules {
   [key: string]: ValidateRule;
 }
 
-/**
- * 表单上下文
- */
-const FormContext = createContext<Pick<FormItemProps, 'align' | 'labelWidth'>>();
-
 const replaceError = (item: FormItemProps, error: string, value?: unknown) => {
   let label = item.label;
 
@@ -393,18 +433,20 @@ const validate = async (
       let error;
 
       // 有设置了字段且未隐藏
-      if (!item.hidden && (field = child.dataset.field)) {
+      if (!item.hidden && (field = item.field)) {
+        let fields = field.split('.');
+
         // 必填
         if (item.required) {
           // 当前值
-          let value = findValue(data, field);
+          let value = findValue(data, fields);
 
           if (value == null || value === '') {
             error = replaceError(item, item.requiredError || i18n.Required, value);
           }
-        } else if ((rule = findRule(rules, (field = field.split('.'))))) {
+        } else if ((rule = findRule(rules, fields))) {
           // 当前值
-          let value = findValue(data, field);
+          let value = findValue(data, fields);
           // 校验目标
           let target = {
             data,
@@ -443,6 +485,41 @@ const validate = async (
   return result;
 };
 
+function scrollToError(this: HTMLFormElement) {
+  let error = this.querySelector('.form-error') as HTMLElement;
+
+  if (error) {
+    (error.parentNode as HTMLElement).scrollIntoView();
+  }
+}
+
+function clearErrors(this: HTMLFormElement) {
+  let errors = this.querySelectorAll('.form-error');
+
+  for (let i = errors.length; i--; ) {
+    errors[i].parentNode.removeChild(errors[i]);
+  }
+}
+
+const setValue = (data: object, field: string, value: any) => {
+  let fields = field.split('.');
+  let last = fields.length - 1;
+
+  for (let i = 0; i < last; i++) {
+    if ((data = data[fields[i]])) {
+    } else {
+      return;
+    }
+  }
+
+  data[fields[last]] = value;
+};
+
+/**
+ * 表单上下文
+ */
+const FormContext = createContext<FormProps>();
+
 const OMIT_ITEM_PROPS = [
   'class',
   'field',
@@ -451,7 +528,6 @@ const OMIT_ITEM_PROPS = [
   'align',
   'required',
   'hidden',
-  'for',
   'error',
   'requiredError',
   'children',
@@ -461,17 +537,27 @@ const OMIT_ITEM_PROPS = [
  * 表单项
  */
 export const FormItem = (props?: JSX.HTMLAttributes<never> & FormItemProps) => {
-  const form = useContext(FormContext) as any;
-
-  let item: HTMLElement;
-
-  onMount(() => {
-    (item as any).FORM_ITEM = props;
-  });
+  let domItem: HTMLElement;
+  let domInput: HTMLElement;
+
+  const form = useContext(FormContext);
+  const provider = {
+    getValue: () => findValue(form.data, props.field.split('.')),
+    setValue: (value: any) => setValue(form.data, props.field, value),
+    init: (input: HTMLElement) => {
+      if (!domInput) {
+        domInput = input;
+        return true;
+      }
+    },
+  };
 
   return (
     <div
-      ref={item as any}
+      ref={(dom) => {
+        domItem = dom;
+        (domItem as any).FORM_ITEM = props;
+      }}
       class={combineClass(
         'form-item',
         'form-align-' + (props.align || form.align || 'left'),
@@ -481,104 +567,38 @@ export const FormItem = (props?: JSX.HTMLAttributes<never> & FormItemProps) => {
       )}
       {...omitProps(props, OMIT_ITEM_PROPS)}
     >
-      <label for={props.for} style={{ width: props.labelWidth || form.labelWidth }}>
+      <label style={{ width: props.labelWidth || form.labelWidth }} onclick={() => domInput && domInput.focus()}>
         {props.label}
       </label>
       <div class="form-body">
-        <FormItemContext.Provider value={1}>{props.children}</FormItemContext.Provider>
+        <FormItemContext.Provider value={provider}>{props.children}</FormItemContext.Provider>
       </div>
     </div>
   );
 };
 
-function scrollToError(this: HTMLFormElement) {
-  let error = this.querySelector('.form-error') as HTMLElement;
-
-  if (error) {
-    (error.parentNode as HTMLElement).scrollIntoView();
-  }
-}
-
-function clearErrors(this: HTMLFormElement) {
-  let errors = this.querySelectorAll('.form-error');
-
-  for (let i = errors.length; i--; ) {
-    errors[i].parentNode.removeChild(errors[i]);
-  }
-}
-
 const OMIT_FORM_PROPS = ['data', 'rules', 'align', 'labelWidth', 'api', 'children'] as const;
 
-/**
- * 表单外部调用接口
- */
-export interface FormApi {
-  /**
-   * 校验表单
-   *
-   * @param filter 过滤器（校验部分字段）
-   */
-  validate(filter?: (target: ValidateTarget) => void | boolean): Promise<boolean>;
-
-  /**
-   * 滚动到第一个错误位置
-   */
-  scrollToError(): void;
-
-  /**
-   * 清除所有错误信息
-   */
-  clearErrors(): void;
-}
-
 /**
  * 表单组件
  */
-export const Form = (
-  props?: JSX.HTMLAttributes<never> & {
-    /**
-     * 表单数据
-     */
-    data: object;
-
-    /**
-     * 表单校验规则
-     */
-    rules: ValidateRules;
-
-    /**
-     * label 对齐方式
-     */
-    align?: 'left' | 'top' | 'right';
-
-    /**
-     * 标签宽度
-     */
-    labelWidth?: string;
-
-    /**
-     * 外部调用接口
-     */
-    api?: (api: FormApi) => void;
-  },
-) => {
-  let form: HTMLFormElement;
-
-  onMount(() => {
-    // 初始化外部调用接口
-    props.api &&
-      props.api(
-        (form.api = {
-          validate: (filter?: (target: ValidateTarget) => void | boolean) =>
-            validate(form, props.rules, props.data, filter),
-          scrollToError: scrollToError.bind(form),
-          clearErrors: clearErrors.bind(form),
-        }),
-      );
-  });
-
+export const Form = (props?: JSX.HTMLAttributes<never> & FormProps) => {
   return (
-    <form ref={form as any} {...omitProps(props, OMIT_FORM_PROPS)}>
+    <form
+      ref={(dom) => {
+        // 初始化外部调用接口
+        props.api &&
+          props.api(
+            (dom.api = {
+              validate: (filter?: (target: ValidateTarget) => void | boolean) =>
+                validate(dom, props.rules, props.data, filter),
+              scrollToError: scrollToError.bind(dom),
+              clearErrors: clearErrors.bind(dom),
+            }),
+          );
+      }}
+      {...omitProps(props, OMIT_FORM_PROPS)}
+    >
       <FormContext.Provider value={props}>{props.children}</FormContext.Provider>
     </form>
   );

package/src/components/MonthWidget.tsx

@@ -29,7 +29,7 @@ const switchMonth = (value: [year: number, month: number], offset: 1 | -1) => {
   return [year, month];
 };
 
-const MONTH_LIST = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const MONTH_LIST = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2, 3, 4];
 
 export const MonthWidget = (
   props: Omit<JSX.HTMLAttributes<never>, 'children'> & {
@@ -54,9 +54,9 @@ export const MonthWidget = (
   const [currentValue, setCurrentValue] = createSignal(selectedValue() || getCurrentMonth());
 
   return (
-    <div>
-      <div class="monthwidget-header">
-        <div ref={domTitle as any} class="monthwidget-title">
+    <div class={combineClass('monthwidget datewidget', props.class)}>
+      <div class="datewidget-header">
+        <div ref={domTitle as any} class="datewidget-title">
           {replaceTemplate(i18n.Month, currentValue()[0], formatMonth(currentValue()[1]))}
         </div>
         <svg class="icon icon-s" aria-hidden={true} onclick={() => setCurrentValue(switchMonth(selectedValue(), -1))}>
@@ -68,7 +68,7 @@ export const MonthWidget = (
       </div>
       <div
         ref={domBody as any}
-        class="monthwidget-body"
+        class="datewidget-body"
         onclick={(event) => {
           let target = event.target as HTMLElement;
           let value, onValueChange;

package/src/components/Popup.tsx

@@ -155,6 +155,10 @@ const OMIT_PROPS = ['onPopup', 'api', 'children'] as const;
  * 弹出层外部访问接口
  */
 export interface PopupApi {
+  /**
+   * 是否已经弹出
+   */
+  popup: boolean;
   /**
    * 打开弹出框
    */
@@ -162,7 +166,7 @@ export interface PopupApi {
   /**
    * 关闭弹出框
    */
-  closePupup(): void;
+  closePopup(): void;
   /**
    * 显示或关闭弹出层
    */
@@ -192,8 +196,11 @@ export const Popup = (props?: JSX.HTMLAttributes<never> & PopupProps) => {
   // 初始化外部调用接口
   props.api &&
     props.api({
+      get popup() {
+        return currentPopup.dom === popup;
+      },
       openPopup: () => showPopup(popup, props.onPopup),
-      closePupup: () => currentPopup.dom === popup && hidePopup(),
+      closePopup: () => currentPopup.dom === popup && hidePopup(),
       togglePopup: () => togglePopup(popup, props.onPopup),
     });
 

package/src/components/TextBox.tsx

@@ -1,8 +1,24 @@
 import { JSX } from '../jsx';
-import { combineClass, omitProps } from '../reactive';
+import { combineClass, omitProps, useContext } from '../reactive';
+import { FormItemContext } from './provider';
 
-const OMIT_PROPS = ['class'] as const;
+const OMIT_PROPS = ['class', 'value', 'onchange'] as const;
 
-export const TextBox = (props?: JSX.SvgSVGAttributes<never>) => {
-  return <input type="text" class={combineClass('textbox', props.class)} {...omitProps(props, OMIT_PROPS)}></input>;
+export const TextBox = (props?: JSX.InputHTMLAttributes<never>) => {
+  const formItem = useContext(FormItemContext);
+
+  const initFormItem = (dom: HTMLInputElement) => {
+    dom.addEventListener('change', () => formItem.setValue(dom.value));
+    formItem.init(dom);
+  };
+
+  return (
+    <input
+      ref={formItem && initFormItem}
+      type="text"
+      class={combineClass('textbox', props.class)}
+      value={formItem ? formItem.getValue() : props.value}
+      {...omitProps(props, OMIT_PROPS)}
+    ></input>
+  );
 };

package/src/components/provider.ts

@@ -2,7 +2,31 @@
 
 import { createContext } from '../reactive';
 
+/**
+ * 表单项提供者值类型
+ */
+export interface FormItemProviderValue {
+  /**
+   * 获取绑定值
+   */
+  getValue(): any;
+
+  /**
+   * 设置绑定值
+   * 
+   * @param value 绑定值
+   */
+  setValue(value: any): void;
+
+  /**
+   * 初始化表单输入组件
+   *
+   * @param input 表单输入组件
+   */
+  init(input: HTMLElement): boolean;
+}
+
 /**
  * 表单项上下文
  */
-export const FormItemContext = createContext<any>();
+export const FormItemContext = createContext<FormItemProviderValue>();