cdui-js 1.0.22 → 1.0.23

package/css/datewidget.css

@@ -1,4 +1,5 @@
 .datewidget {
+  position: relative;
   max-width: 380px;
   height: 320px;
   border-radius: 12px;
@@ -7,6 +8,11 @@
   font-size: 16px;
 }
 
+.datewidget:has(.datewidget) > .datewidget-header,
+.datewidget:has(.datewidget) > .datewidget-body {
+  display: none;
+}
+
 .datewidget-header {
   display: flex;
   align-items: center;
@@ -66,6 +72,8 @@
   flex: auto;
   text-align: center;
   vertical-align: middle;
+  font-weight: 400;
+  font-size: 10px;
 }
 
 .canlendar-body {

package/demo/src/App.tsx

@@ -3,7 +3,6 @@ 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';
 
 export const App = () => {
   return (
@@ -11,7 +10,6 @@ export const App = () => {
       <CarouselPage></CarouselPage>
       <CanlendarPage></CanlendarPage>
       <DatePickerPage></DatePickerPage>
-      <MobileDatePickerPage></MobileDatePickerPage>
       <ComboBoxPage></ComboBoxPage>
       <FormPage></FormPage>
     </div>

package/demo/src/pages/Canlendar.tsx

@@ -7,12 +7,12 @@ export const CanlendarPage = () => {
     <div>
       <Canlendar
         value={new Date()}
-        onValueChange={(date) => {
-          console.log(date);
+        onchange={(event) => {
+          console.log(event.detail);
         }}
       ></Canlendar>
-      <MonthWidget></MonthWidget>
-      <YearWidget></YearWidget>
+      {/* <MonthWidget></MonthWidget>
+      <YearWidget></YearWidget> */}
     </div>
   );
 };

package/demo/src/pages/Form.tsx

@@ -49,11 +49,18 @@ export const FormPage = () => {
     ],
     a: 1,
     b: 2,
+
+    form: {
+      username: ''
+    }
   });
 
   let form: FormApi;
 
+  let form2: FormApi
+
   return (
+    <>
     <Form data={state} rules={{}} align={state.align} labelWidth={state.labelWidth} api={(api) => (form = api)}>
       <For each={state.items}>
         {(item) => (
@@ -92,5 +99,17 @@ export const FormPage = () => {
         clearErrors
       </button>
     </Form>
+
+    <Form data={state.form} rules={{}}  api={(api) => (form2 = api)}>
+      <FormItem label="username" required field='username'>
+        <input value={state.form.username} onchange={e => state.form.username = e.target.value} />
+      </FormItem>
+    </Form>
+
+    <button onclick={async() => {
+      const valid = await form2.validate()
+      console.log(valid)
+    }}>click</button>
+    </>
   );
 };

package/package.json

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

package/src/components/Canlendar.tsx

@@ -1,8 +1,29 @@
 import { JSX } from '../jsx';
-import { createSignal, combineClass, omitProps } from '../reactive';
-import { Canleandar as i18n } from '../i18n';
+import { createSignal, combineClass, omitProps, render } from '../reactive';
+import { Canlendar as i18n } from '../i18n';
 import { replaceTemplate } from '../template';
+
 import { For } from './For';
+import { MonthWidget } from './MonthWidget';
+
+export const parseDate = (value: Date | string | number) => {
+  if (value) {
+    switch (typeof value) {
+      case 'number':
+        return new Date(value);
+
+      case 'string':
+        return new Date(value.replace(/\//g, '-'));
+
+      default:
+        return value;
+    }
+  }
+};
+
+export const getYearMonth = (date: Date) => {
+  return [date.getFullYear(), date.getMonth() + 1] as const;
+};
 
 // 渲染日期项
 const renderDates = (
@@ -16,9 +37,9 @@ const renderDates = (
   selectedValue?: Date,
   disableFn?: (year: number, month: number, date: number) => boolean,
 ) => {
-  let today = todayValue.getFullYear() === year && todayValue.getMonth() === month ? todayValue.getDate() : -1;
+  let today = todayValue.getFullYear() === year && todayValue.getMonth() + 1 === month ? todayValue.getDate() : -1;
   let selected =
-    selectedValue && selectedValue.getFullYear() === year && selectedValue.getMonth() === month
+    selectedValue && selectedValue.getFullYear() === year && selectedValue.getMonth() + 1 === month
       ? selectedValue.getDate()
       : -1;
 
@@ -26,7 +47,7 @@ const renderDates = (
     items.push(
       `<span class="datewidget-item${className}${today === i ? ' today' : ''}${selected === i ? ' selected' : ''}${
         disableFn && disableFn(year, month, i) ? ' disabled' : ''
-      }" data-date="${year + '|' + month + '|' + i}">${i}</span>`,
+      }" data-day="${year + '|' + month + '|' + i}">${i}</span>`,
     );
   }
 };
@@ -74,14 +95,14 @@ const renderNextMonthItems = (
 };
 
 const renderItems = (
-  currentValue: Date,
+  currentValue: readonly [year: number, month: number],
   selectedValue?: Date,
   disableFn?: (year: number, month: number, date: number) => boolean,
 ) => {
   let today = new Date();
-  let year = currentValue.getFullYear();
-  let month = currentValue.getMonth();
-  let firstDate = new Date(year, month, 1); // 获取当前月的第一天
+  let year = currentValue[0];
+  let month = currentValue[1];
+  let firstDate = new Date(year, month - 1, 1); // 获取当前月的第一天
 
   let firstWeek = firstDate.getDay();
   let items = [];
@@ -95,55 +116,69 @@ const renderItems = (
   }
 
   // 获取当前月的天数
-  days = new Date(year, month + 1, 0).getDate();
+  days = new Date(year, month, 0).getDate();
+
   // 渲染本月日期
   renderDates(items, year, month, 1, days, '', today, selectedValue, disableFn);
 
   // 当前月最后一天没有占满，渲染下月数据
   if ((index += days) < 42) {
-    renderNextMonthItems(items, year, month, 42 - index, today, selectedValue, disableFn);
+    renderNextMonthItems(items, year, month + 1, 42 - index, today, selectedValue, disableFn);
   }
 
   return items.join('');
 };
 
-const switchMonth = (value: Date, offset: 1 | -1) => {
-  let date = new Date(value.getTime());
-  let month = value.getMonth();
+const switchMonth = (value: readonly [year: number, month: number], offset: 1 | -1) => {
+  let year = value[0];
+  let month = value[1] + offset;
 
-  date.setMonth(month + offset);
+  if (month > 12) {
+    year++;
+    month = 1;
+  } else if (!month) {
+    year--;
+    month = 12;
+  }
 
-  return date;
+  return [year, month] as const;
 };
 
-export const parseDate = (value: Date | string | number) => {
-  if (value) {
-    switch (typeof value) {
-      case 'number':
-        return new Date(value);
+const formatMonth = (month: number) => {
+  return month > 9 ? month : '0' + month;
+};
 
-      case 'string':
-        return new Date(value.replace(/\//g, '-'));
+const showMonthWidget = (dom: HTMLElement, setCurrentValue: (value) => void, selectedValue?: Date) => {
+  let value =
+    selectedValue && ([selectedValue.getFullYear(), selectedValue.getMonth() + 1] as [year: number, month: number]);
 
-      default:
-        return value;
-    }
-  }
-};
+  render(
+    () => (
+      <MonthWidget
+        value={value}
+        style={{ position: 'absolute', top: '0', left: '0', width: '100%', border: 'none' }}
+        onchange={(event) => {
+          let result = event.detail;
 
-const formatMonth = (value: Date) => {
-  let month = value.getMonth() + 1;
+          dom.removeChild(event.target as HTMLElement);
 
-  return month > 9 ? month : '0' + month;
+          if (!selectedValue || result[0] !== value[0] || result[1] !== value[1]) {
+            setCurrentValue(result);
+          }
+        }}
+      ></MonthWidget>
+    ),
+    dom,
+  );
 };
 
-const OMIT_PROPS = ['class', 'value', 'onValueChange', 'disableFn'] as const;
+const OMIT_PROPS = ['class', 'value', 'disableFn'] as const;
 
 /**
  * 日历组件
  */
 export const Canlendar = (
-  props: Omit<JSX.HTMLAttributes<never>, 'children'> & {
+  props: Omit<JSX.HTMLAttributes<never>, 'children' | 'onchange'> & {
     /**
      * 日期值
      */
@@ -151,24 +186,27 @@ export const Canlendar = (
     /**
      * 值变更事件
      */
-    onValueChange?: (value: Date) => void;
+    onchange?: (event: CustomEvent<Date>) => void;
     /**
      * 禁用函数
      */
     disableFn?: (year: number, month: number, date: number) => boolean;
   },
 ) => {
-  let domTitle: HTMLElement;
-  let domBody: HTMLElement;
+  let dom: HTMLElement;
 
   const [selectedValue, setSelectedValue] = createSignal(parseDate(props.value));
-  const [currentValue, setCurrentValue] = createSignal(selectedValue() || new Date());
+  const [currentValue, setCurrentValue] = createSignal(getYearMonth(selectedValue() || new Date()));
 
   return (
-    <div class={combineClass('canlendar datewidget', props.class)} {...omitProps(props, OMIT_PROPS)}>
+    <div
+      ref={dom as any}
+      class={combineClass('canlendar datewidget', props.class)}
+      {...(omitProps(props, OMIT_PROPS) as any)}
+    >
       <div class="datewidget-header canlendar-header">
-        <div ref={domTitle as any} class="datewidget-title">
-          {replaceTemplate(i18n.Title, currentValue().getFullYear(), formatMonth(currentValue()))}
+        <div class="datewidget-title" onclick={() => showMonthWidget(dom, setCurrentValue, selectedValue())}>
+          {replaceTemplate(i18n.Title, currentValue()[0], formatMonth(currentValue()[1]))}
         </div>
         <svg class="icon icon-s" aria-hidden={true} onclick={() => setCurrentValue(switchMonth(currentValue(), -1))}>
           <use href="#icon-backward"></use>
@@ -181,21 +219,26 @@ export const Canlendar = (
         <For each={i18n.Weeks}>{(item) => <span>{item}</span>}</For>
       </div>
       <div
-        ref={domBody as any}
         class="datewidget-body canlendar-body"
         onclick={(event) => {
           let target = event.target as HTMLElement;
-          let date;
+          let day;
 
-          while (target && target !== domBody) {
-            if ((date = target.dataset.date)) {
+          while (target && target !== dom) {
+            if ((day = target.dataset.day)) {
               // 没有选中
               if (!target.classList.contains('selected')) {
-                date = date.split('|');
-                date = new Date(date[0] | 0, date[1] | 0, date[2] | 0);
+                day = day.split('|');
+                day = new Date(day[0] | 0, (day[1] | 0) - 1, day[2] | 0);
+
+                setSelectedValue(day);
 
-                setSelectedValue(date);
-                props.onValueChange && props.onValueChange(date);
+                dom.dispatchEvent(
+                  new CustomEvent('change', {
+                    detail: day,
+                    bubbles: true, // 允许事件冒泡
+                  }),
+                );
               }
 
               break;

package/src/components/ComboBox.tsx

@@ -38,11 +38,6 @@ export const ComboBox = (
 ) => {
   let popup: PopupApi;
 
-  const initApi = (api) => {
-    popup = api;
-    props.api && props.api(popup);
-  };
-
   const formItem = useContext(FormItemContext);
 
   const initFormItem = (dom: HTMLInputElement) => {
@@ -69,7 +64,14 @@ export const ComboBox = (
           <use href="#icon-dropdown"></use>
         </svg>
       </div>
-      <Popup api={initApi} onPopup={props.onPopup} {...props.popup}>
+      <Popup
+        api={(api) => {
+          popup = api;
+          props.api && props.api(popup);
+        }}
+        onPopup={props.onPopup}
+        {...props.popup}
+      >
         {props.children}
       </Popup>
     </div>

package/src/components/DatePicker.tsx

@@ -1,58 +1,38 @@
 import { JSX } from '../jsx';
-import { combineClass, createSignal, omitProps } from '../reactive';
+import { combineClass, createSignal, omitProps, render } from '../reactive';
 import { disableAutoCloseEvent } from '../dom';
-import { For } from './For';
 import { Popup, PopupApi } from './Popup';
-import { parseDate } from './Canlendar';
+import { Canlendar, parseDate } from './Canlendar';
 
 const formatDate = (date: Date, format: string) => {
   return date ? date.toLocaleString() : '';
 };
 
-const showPopup = () => {};
+const showCanlendar = (dom: HTMLElement) => {
+  let popup: PopupApi;
 
-const MobileTouchScroll = (props: { items: (number | string)[] }) => {
-  return (
-    <div>
-      <For each={props.items}>{(item) => <div>{item}</div>}</For>
-    </div>
+  render(
+    () => (
+      <Popup
+        api={(api) => {
+          popup = api;
+          api.openPopup();
+        }}
+      >
+        <Canlendar></Canlendar>
+      </Popup>
+    ),
+    dom,
   );
 };
 
-const formatMonth = (value: Date) => {
-  let month = value.getMonth() + 1;
-
-  return month > 9 ? month : '0' + month;
-};
-
-// const computeMobileList = (value: Date) => {
-//   let year = value.getFullYear();
-//   let month = value.getMonth() + 1;
-//   let date = value.getDate();
-
-//   return [
-//     year > 5 ? [year - 2, year - 1, year, year + 1, year + 2]: [1,2,3,4,5],
-//     [formatMonth(month - 2), ]
-//   ];
-// };
-
-// const MobileDatePicker = (yearList: number[], monthList: string[], dateList: string[]) => {
-//   return (
-//     <div>
-//       <MobileTouchScroll items={yearList}></MobileTouchScroll>
-//       <MobileTouchScroll items={monthList}></MobileTouchScroll>
-//       <MobileTouchScroll items={dateList}></MobileTouchScroll>
-//     </div>
-//   );
-// };
-
-const OMIT_PROPS = ['class', 'value', 'readonly', 'format', 'children'] as const;
+const OMIT_PROPS = ['class', 'value', 'readonly', 'format'] as const;
 
 /**
  * 日期选择组件
  */
 export const DatePicker = (
-  props?: JSX.HTMLAttributes<never> & {
+  props?: Omit<JSX.HTMLAttributes<never>, 'children' | 'onchange'> & {
     /**
      * 值
      */
@@ -65,28 +45,33 @@ export const DatePicker = (
      * 是否只读
      */
     readonly?: boolean;
+    /**
+     * 值变更事件
+     */
+    onchange?: (event: CustomEvent<Date>) => void;
+    /**
+     * 禁用函数
+     */
+    disableFn?: (year: number, month: number, date: number) => boolean;
   },
 ) => {
-  let popup: PopupApi;
+  let dom: HTMLElement;
 
   const [value, setValue] = createSignal(props.value && parseDate(props.value));
 
   return (
-    <div class={combineClass('datepicker', props.class)} {...omitProps(props, OMIT_PROPS)}>
+    <div ref={dom as any} class={combineClass('datepicker', props.class)} {...(omitProps(props, OMIT_PROPS) as any)}>
       <div class="datepicker-host" {...disableAutoCloseEvent}>
         <input
           class="datepicker-input"
           value={formatDate(value(), props.format)}
           readonly={props.readonly}
-          onclick={() => props.readonly && popup.togglePopup()}
+          onclick={() => props.readonly && showCanlendar(dom)}
         ></input>
-        <svg class="icon icon-s" aria-hidden={true} onclick={() => popup.togglePopup()}>
+        <svg class="icon icon-s" aria-hidden={true} onclick={() => showCanlendar(dom)}>
           <use href="#icon-dropdown"></use>
         </svg>
       </div>
-      <Popup api={(api) => (popup = api)} onPopup={() => showPopup()}>
-        {props.children}
-      </Popup>
     </div>
   );
 };

package/src/components/Form.tsx

@@ -466,6 +466,7 @@ const validate = async (
 
       if (error) {
         showError(child, error);
+        result = false;
       } else {
         removeError(child);
       }

package/src/components/MonthPicker.tsx

@@ -11,7 +11,7 @@ export const MonthPicker = (
     /**
      * 值变更事件
      */
-    onValueChange?: (value: Date) => void;
+    onchange?: (event: CustomEvent) => void;
     /**
      * 禁用函数
      */