cdui-js 1.0.22 → 1.0.24

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

@@ -1,48 +1,49 @@
 import { JSX } from '../jsx';
 import { combineClass, omitProps, useContext, watch } from '../reactive';
 import { disableAutoCloseEvent } from '../dom';
-import { Popup, PopupApi, PopupProps } from './Popup';
+import { PopupApi, initDropdown } from '../popup';
+
 import { FormItemContext } from './provider';
 
-const OMIT_PROPS = ['class', 'value', 'readonly', 'popupOnFocus', 'popup', 'onPopup', 'api', 'children'] as const;
+const OMIT_PROPS = ['class', 'value', 'format', /*'readonly', */ 'popup', 'popupOnFocus', 'api'] as const;
 
 /**
  * 下拉框组件
  */
 export const ComboBox = (
-  props?: JSX.HTMLAttributes<never> &
-    PopupProps & {
-      /**
-       * 值
-       */
-      value?: any;
-      /**
-       * 值样式
-       *
-       * @param value 当前值
-       */
-      format?(value: any): string;
-      /**
-       * 是否只读
-       */
-      readonly?: boolean;
-      /**
-       * 获取焦点时是否自动弹出
-       */
-      popupOnFocus?: boolean;
-      /**
-       * 弹出层属性
-       */
-      popup?: Omit<JSX.HTMLAttributes<never>, 'children'>;
-    },
+  props?: Omit<JSX.HTMLAttributes<never>, 'children'> & {
+    /**
+     * 弹出层
+     */
+    popup: () => JSX.Element;
+    /**
+     * 值
+     */
+    value?: any;
+    /**
+     * 值样式
+     *
+     * @param value 当前值
+     */
+    format?(value: any): string;
+    // /**
+    //  * 是否只读
+    //  */
+    // readonly?: boolean;
+    /**
+     * 获取焦点时是否自动弹出
+     */
+    popupOnFocus?: boolean;
+    /**
+     * 值变更事件
+     */
+    onchange?: (event: CustomEvent<Date>) => void;
+    /**
+     * 外部调用接口
+     */
+    api: (api: PopupApi) => void;
+  },
 ) => {
-  let popup: PopupApi;
-
-  const initApi = (api) => {
-    popup = api;
-    props.api && props.api(popup);
-  };
-
   const formItem = useContext(FormItemContext);
 
   const initFormItem = (dom: HTMLInputElement) => {
@@ -54,24 +55,29 @@ export const ComboBox = (
     formItem.init(dom);
   };
 
+  let api: PopupApi;
+
   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.format ? props.format(props.value) : '' + (props.value || '')}
-          readonly={props.readonly}
-          onfocus={() => props.popupOnFocus && popup.openPopup()}
-          onclick={() => props.readonly && !props.popupOnFocus && popup.togglePopup()}
-        ></input>
-        <svg class="icon icon-s" aria-hidden={true} onclick={() => popup.togglePopup()}>
-          <use href="#icon-dropdown"></use>
-        </svg>
-      </div>
-      <Popup api={initApi} onPopup={props.onPopup} {...props.popup}>
-        {props.children}
-      </Popup>
+    <div
+      ref={(dom) => {
+        api = initDropdown(dom, () => <div class="combobox-popup">{props.popup()}</div>);
+        props.api && props.api(api);
+      }}
+      class={combineClass('combobox', props.class)}
+      {...disableAutoCloseEvent}
+      {...omitProps(props, OMIT_PROPS)}
+    >
+      <input
+        ref={formItem && initFormItem}
+        class="combobox-input"
+        value={props.format ? props.format(props.value) : '' + (props.value || '')}
+        readonly={true}
+        onfocus={() => props.popupOnFocus && api.openPopup()}
+        onclick={() => !props.popupOnFocus && api.togglePopup()}
+      ></input>
+      <svg class="combobox-icon icon icon-s" aria-hidden={true} onclick={() => api.togglePopup()}>
+        <use href="#icon-dropdown"></use>
+      </svg>
     </div>
   );
 };

package/src/components/DatePicker.tsx

@@ -1,58 +1,94 @@
 import { JSX } from '../jsx';
-import { combineClass, createSignal, omitProps } from '../reactive';
+import { combineClass, createSignal, omitProps, render, useContext, watch } from '../reactive';
 import { disableAutoCloseEvent } from '../dom';
-import { For } from './For';
-import { Popup, PopupApi } from './Popup';
-import { parseDate } from './Canlendar';
+import { initDropdown, PopupApi } from '../popup';
 
-const formatDate = (date: Date, format: string) => {
-  return date ? date.toLocaleString() : '';
-};
+import { Canlendar, parseDate } from './Canlendar';
+import { FormItemContext } from './provider';
 
-const showPopup = () => {};
+const Date_regex = /[YyMDdHhmsSQq]+/g;
+const Date_zeros = ['', '0', '00', '000', '0000'];
 
-const MobileTouchScroll = (props: { items: (number | string)[] }) => {
-  return (
-    <div>
-      <For each={props.items}>{(item) => <div>{item}</div>}</For>
-    </div>
-  );
-};
+const DATE_GET_YEAR = 'getFullYear';
+const DATE_GET_MONTH = 'getMonth';
+const DATE_GET_DATE = 'getDate';
+const DATE_GET_HOUR = 'getHours';
+const DATE_GET_MINUTE = 'getMinutes';
+const DATE_GET_SECOND = 'getSeconds';
+
+export const formatDate = (date: Date, format: string) => {
+  if (date) {
+    switch (format || (format = 'yyyy-MM-dd')) {
+      case 'GMT':
+      case 'ISO':
+      case 'UTC':
+      case 'Date':
+      case 'Time':
+      case 'Locale':
+      case 'LocaleDate':
+      case 'LocaleTime':
+        return (date as unknown as { [key: string]: Function })['to' + format + 'String']();
+
+      default:
+        return format.replace(Date_regex, (text) => {
+          let length = text.length;
+          let value;
+
+          switch (text[0]) {
+            case 'y':
+            case 'Y':
+              value = date[DATE_GET_YEAR]();
+              break;
+
+            case 'M':
+              value = date[DATE_GET_MONTH]() + 1;
+              break;
+
+            case 'd':
+              value = date[DATE_GET_DATE]();
+              break;
+
+            case 'H':
+            case 'h':
+              value = date[DATE_GET_HOUR]();
+              break;
+
+            case 'm':
+              value = date[DATE_GET_MINUTE]();
+              break;
+
+            case 's':
+              value = date[DATE_GET_SECOND]();
+              break;
 
-const formatMonth = (value: Date) => {
-  let month = value.getMonth() + 1;
+            case 'S':
+              value = date.getMilliseconds();
+              break;
 
-  return month > 9 ? month : '0' + month;
+            case 'Q':
+            case 'q':
+              value = ((date[DATE_GET_MONTH]() + 3) / 3) | 0;
+              break;
+          }
+
+          text = '' + value;
+          length -= text.length;
+
+          return length <= 0 ? text : Date_zeros[length] + text;
+        });
+    }
+  }
+
+  return '';
 };
 
-// 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', 'format', /*'readonly',*/ 'popupOnFocus', 'disableFn', 'api'] as const;
 
 /**
  * 日期选择组件
  */
 export const DatePicker = (
-  props?: JSX.HTMLAttributes<never> & {
+  props?: Omit<JSX.HTMLAttributes<never>, 'children' | 'onchange'> & {
     /**
      * 值
      */
@@ -61,32 +97,82 @@ export const DatePicker = (
      * 日期格式
      */
     format?: string;
+    // /**
+    //  * 是否只读
+    //  */
+    // readonly?: boolean;
+    /**
+     * 获取焦点时是否自动弹出
+     */
+    popupOnFocus?: boolean;
+    /**
+     * 值变更事件
+     */
+    onchange?: (event: CustomEvent<Date>) => void;
     /**
-     * 是否只读
+     * 禁用函数
      */
-    readonly?: boolean;
+    disableFn?: (year: number, month: number, date: number) => boolean;
+    /**
+     * 外部调用接口
+     */
+    api?: (api: PopupApi) => void;
   },
 ) => {
-  let popup: PopupApi;
+  let api: PopupApi;
+
+  const formItem = useContext(FormItemContext);
 
-  const [value, setValue] = createSignal(props.value && parseDate(props.value));
+  const initFormItem = (dom: HTMLElement) => {
+    watch(
+      () => props.value,
+      (value) => formItem.setValue(value),
+    );
+
+    formItem.init(dom);
+  };
 
   return (
-    <div class={combineClass('datepicker', props.class)} {...omitProps(props, OMIT_PROPS)}>
-      <div class="datepicker-host" {...disableAutoCloseEvent}>
-        <input
-          class="datepicker-input"
-          value={formatDate(value(), props.format)}
-          readonly={props.readonly}
-          onclick={() => props.readonly && popup.togglePopup()}
-        ></input>
-        <svg class="icon icon-s" aria-hidden={true} onclick={() => popup.togglePopup()}>
-          <use href="#icon-dropdown"></use>
-        </svg>
-      </div>
-      <Popup api={(api) => (popup = api)} onPopup={() => showPopup()}>
-        {props.children}
-      </Popup>
+    <div
+      ref={(dom: HTMLElement) => {
+        api = initDropdown(
+          dom,
+          () => (
+            <Canlendar
+              value={props.value}
+              onchange={(event) => {
+                dom.dispatchEvent(
+                  new CustomEvent('change', {
+                    detail: event.detail,
+                    bubbles: true, // 允许事件冒泡
+                  }),
+                );
+
+                api.closePopup();
+              }}
+              disableFn={props.disableFn}
+            ></Canlendar>
+          ),
+          { alignWidth: false },
+        );
+
+        formItem && initFormItem(dom);
+        props.api && props.api(api);
+      }}
+      class={combineClass('datepicker', props.class)}
+      {...disableAutoCloseEvent}
+      {...(omitProps(props, OMIT_PROPS) as any)}
+    >
+      <input
+        class="datepicker-input"
+        value={formatDate(parseDate(props.value), props.format)}
+        readonly={true}
+        onfocus={() => props.popupOnFocus && api.openPopup()}
+        onclick={() => !props.popupOnFocus && api.togglePopup()}
+      ></input>
+      <svg class="datepicker-icon icon icon-s" aria-hidden={true} onclick={() => api.togglePopup()}>
+        <use href="#icon-dropdown"></use>
+      </svg>
     </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;
     /**
      * 禁用函数
      */