cdui-js 1.0.21 → 1.0.23

package/src/components/MonthWidget.tsx

@@ -1,20 +1,16 @@
 import { JSX } from '../jsx';
 import { MonthWidget as i18n } from '../i18n';
 import { replaceTemplate } from '../template';
-import { createSignal, combineClass } from '../reactive';
+import { createSignal, combineClass, omitProps, render } from '../reactive';
 import { For } from './For';
-
-const getCurrentMonth = () => {
-  let date = new Date();
-  return [date.getFullYear(), date.getMonth() + 1] as [year: number, month: number];
-};
+import { YearWidget } from './YearWidget';
 
 const MONTH_LIST = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
 
 const MonthItem = (props: {
   value: number;
   selectedValue: [year: number, month: number];
-  currentValue: [year: number, month: number];
+  currentValue: number;
   onclick: (event: Event) => void;
   disableFn?: (year: number, month: number) => boolean;
 }) => {
@@ -28,23 +24,21 @@ const MonthItem = (props: {
 
   const checkCurrent = () => {
     const today = new Date();
-    const currentValue = props.currentValue;
 
-    return today.getFullYear() === currentValue[0] + year && today.getMonth() + 1 === month;
+    return today.getFullYear() === props.currentValue + year && today.getMonth() + 1 === month;
   };
 
   const checkSelected = () => {
     let selectedValue = props.selectedValue;
-    const currentValue = props.currentValue;
 
-    return selectedValue && selectedValue[0] === currentValue[0] + year && selectedValue[1] === month;
+    return selectedValue && selectedValue[0] === props.currentValue + year && selectedValue[1] === month;
   };
 
   return (
     <span
       class={`datewidget-item${year ? ' next-block' : ''}${checkCurrent() ? ' today' : ''}${
         checkSelected() ? ' selected' : ''
-      }${props.disableFn && props.disableFn(props.currentValue[0] + year, month) ? ' disabled' : ''}`}
+      }${props.disableFn && props.disableFn(props.currentValue + year, month) ? ' disabled' : ''}`}
       data-month={`${year}|${month}`}
       onclick={props.onclick}
     >
@@ -53,11 +47,38 @@ const MonthItem = (props: {
   );
 };
 
+const showYearWidget = (
+  dom: HTMLElement,
+  setCurrentValue: (value) => void,
+  selectedValue?: [year: number, month: number],
+) => {
+  render(
+    () => (
+      <YearWidget
+        value={selectedValue && selectedValue[0]}
+        style={{ position: 'absolute', top: '0', left: '0', width: '100%', border: 'none' }}
+        onchange={(event) => {
+          let result = event.detail;
+
+          dom.removeChild(event.target as HTMLElement);
+
+          if (!selectedValue || result !== selectedValue[0]) {
+            setCurrentValue(result);
+          }
+        }}
+      ></YearWidget>
+    ),
+    dom,
+  );
+};
+
+const OMIT_PROPS = ['class', 'value', 'disableFn'] as const;
+
 /**
  * 月份组件
  */
 export const MonthWidget = (
-  props: Omit<JSX.HTMLAttributes<never>, 'children'> & {
+  props: Omit<JSX.HTMLAttributes<never>, 'children' | 'onchange'> & {
     /**
      * 年月值
      */
@@ -65,55 +86,63 @@ export const MonthWidget = (
     /**
      * 值变更事件
      */
-    onValueChange?: (value: Date) => void;
+    onchange?: (value: CustomEvent<[year: number, month: number]>) => void;
     /**
      * 禁用函数
      */
     disableFn?: (year: number, month: number) => boolean;
   },
 ) => {
-  let domTitle: HTMLElement;
-  let domBody: HTMLElement;
+  let dom: HTMLElement;
 
   const [selectedValue, setSelectedValue] = createSignal(props.value);
-  const [currentValue, setCurrentValue] = createSignal(selectedValue() || getCurrentMonth());
+  const [currentValue, setCurrentValue] = createSignal(selectedValue() ? selectedValue()[0] : new Date().getFullYear());
 
   const onclick = (event: Event) => {
     let target = event.currentTarget as HTMLElement;
     let month = target.dataset.month as any;
 
     // 没有选中
-    if (month && !target.classList.contains('selected')) {
-      month = month.split('|');
-      month = [currentValue()[0] + (month[0] | 0), month[1] | 0];
+    if (month) {
+      // 父节点
+      let parent = dom.parentNode as HTMLElement;
+      // 是否嵌入到日历组件中
+      let inline = parent.classList.contains('datewidget');
 
-      setSelectedValue(month);
-      props.onValueChange && props.onValueChange(month);
+      if (inline || !target.classList.contains('selected')) {
+        month = month.split('|');
+        month = [currentValue() + (month[0] | 0), month[1] | 0];
+
+        setSelectedValue(month);
+
+        dom.dispatchEvent(
+          new CustomEvent('change', {
+            detail: month,
+            bubbles: !inline, // 允许事件冒泡
+          }),
+        );
+      }
     }
   };
 
   return (
-    <div class={combineClass('monthwidget datewidget', props.class)}>
+    <div
+      ref={dom as any}
+      class={combineClass('monthwidget datewidget', props.class)}
+      {...(omitProps(props, OMIT_PROPS) as any)}
+    >
       <div class="datewidget-header">
-        <div ref={domTitle as any} class="datewidget-title">
-          {replaceTemplate(i18n.Title, currentValue()[0])}
+        <div class="datewidget-title" onclick={() => showYearWidget(dom, setCurrentValue, selectedValue())}>
+          {replaceTemplate(i18n.Title, currentValue())}
         </div>
-        <svg
-          class="icon icon-s"
-          aria-hidden={true}
-          onclick={() => setCurrentValue([currentValue()[0] - 1, currentValue()[1]])}
-        >
+        <svg class="icon icon-s" aria-hidden={true} onclick={() => setCurrentValue(currentValue() - 1)}>
           <use href="#icon-backward"></use>
         </svg>
-        <svg
-          class="icon icon-s"
-          aria-hidden={true}
-          onclick={() => setCurrentValue([currentValue()[0] + 1, currentValue()[1]])}
-        >
+        <svg class="icon icon-s" aria-hidden={true} onclick={() => setCurrentValue(currentValue() + 1)}>
           <use href="#icon-forward"></use>
         </svg>
       </div>
-      <div ref={domBody as any} class="datewidget-body">
+      <div class="datewidget-body">
         <For each={MONTH_LIST}>
           {(item) => (
             <MonthItem

package/src/components/Popup.tsx

@@ -1,7 +1,8 @@
 import { JSX } from '../jsx';
 import { layout } from '../layout';
-import { omitProps } from '../reactive';
+import { omitProps, onMount } from '../reactive';
 import { disableAutoCloseEvent, hideMaskLayer, registerAutoClose, showMaskLayer } from '../dom';
+import { createRoot } from 'solid-js';
 
 const POPUP_TOP_CLASS = 'popup-top';
 const POPUP_RIGHT_CLASS = 'popup-right';
@@ -75,7 +76,7 @@ const showPopup = (dom: HTMLElement, onPopup?: (dom: HTMLElement) => void | fals
   let host = dom.parentNode as HTMLElement;
 
   // 先显示
-  style.width = host.offsetWidth + 'px';
+  // style.width = host.offsetWidth + 'px';
   style.height = 'auto';
   style.display = 'block';
 
@@ -85,7 +86,7 @@ const showPopup = (dom: HTMLElement, onPopup?: (dom: HTMLElement) => void | fals
   let rect = host.getBoundingClientRect();
 
   // 同步子组件宽度
-  style.width = width + 'px';
+  // style.width = width + 'px';
 
   if (windowHeight - rect.top - rect.height < height + 4 && rect.top >= height) {
     classList.add(POPUP_TOP_CLASS);
@@ -195,13 +196,15 @@ export const Popup = (props?: JSX.HTMLAttributes<never> & PopupProps) => {
 
   // 初始化外部调用接口
   props.api &&
-    props.api({
-      get popup() {
-        return currentPopup.dom === popup;
-      },
-      openPopup: () => showPopup(popup, props.onPopup),
-      closePopup: () => currentPopup.dom === popup && hidePopup(),
-      togglePopup: () => togglePopup(popup, props.onPopup),
+    onMount(() => {
+      props.api({
+        get popup() {
+          return currentPopup.dom === popup;
+        },
+        openPopup: () => showPopup(popup, props.onPopup),
+        closePopup: () => currentPopup.dom === popup && hidePopup(),
+        togglePopup: () => togglePopup(popup, props.onPopup),
+      });
     });
 
   return (
@@ -226,3 +229,33 @@ export const closePopup = () => {
 
 // 注册点击关闭弹出层的方法
 registerAutoClose(closePopup);
+
+/**
+ * 弹出层
+ */
+export type Popup = HTMLElement & {
+  /**
+   * 关闭对话框方法
+   */
+  close(): void;
+};
+
+export const showPopup1 = (component: () => JSX.Element): Popup => {
+  return createRoot((dispose) => {
+    let body = document.body;
+    let popup = component() as Popup;
+    let style = popup.style;
+
+    style.position = 'fixed';
+    style.zIndex = '9';
+
+    body.appendChild(popup);
+
+    popup.close = () => {
+      body.removeChild(popup);
+      dispose();
+    };
+
+    return popup;
+  });
+};

package/src/components/YearPicker.tsx

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

package/src/components/YearWidget.tsx

@@ -1,188 +1,112 @@
 import { JSX } from '../jsx';
 import { YearWidget as i18n } from '../i18n';
 import { replaceTemplate } from '../template';
-import { createSignal, combineClass } from '../reactive';
-import { For } from './For';
+import { createSignal, combineClass, omitProps } from '../reactive';
 
-// 渲染日期项
-const renderDates = (
+// 渲染年项
+const renderYears = (
   items: string[],
-  year: number,
-  month: number,
   from: number,
   to: number,
   className: string,
-  todayValue: Date,
-  selectedValue?: Date,
-  disableFn?: (year: number, month: number, date: number) => boolean,
+  todayValue: number,
+  selectedValue?: number,
+  disableFn?: (year: number) => boolean,
 ) => {
-  let today = todayValue.getFullYear() === year && todayValue.getMonth() === month ? todayValue.getDate() : -1;
-  let selected =
-    selectedValue && selectedValue.getFullYear() === year && selectedValue.getMonth() === month
-      ? selectedValue.getDate()
-      : -1;
-
-  for (let i = from; i <= to; i++) {
+  for (let i = from; i < to; i++) {
     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>`,
+      `<span class="datewidget-item${className}${todayValue === i ? ' today' : ''}${selectedValue === i ? ' selected' : ''}${
+        disableFn && disableFn(i) ? ' disabled' : ''
+      }" data-year="${i}">${i}</span>`,
     );
   }
 };
 
-// 渲染上月日期项
-const renderPrevMonthItems = (
-  items: string[],
-  year: number,
-  month: number,
-  index: number,
-  todayValue: Date,
-  selectedValue?: Date,
-  disableFn?: (year: number, month: number, date: number) => boolean,
-) => {
-  // 获取上月天数
-  let days = new Date(year, month, 0).getDate();
-
-  if (month > 0) {
-    month--;
-  } else {
-    year--;
-    month = 11;
-  }
-
-  renderDates(items, year, month, days - index + 1, days, ' prev-block', todayValue, selectedValue, disableFn);
-};
-
-const renderNextMonthItems = (
-  items: string[],
-  year: number,
-  month: number,
-  days: number,
-  todayValue: Date,
-  selectedValue?: Date,
-  disableFn?: (year: number, month: number, date: number) => boolean,
-) => {
-  if (month < 11) {
-    month++;
-  } else {
-    year++;
-    month = 0;
-  }
-
-  renderDates(items, year, month, 1, days, ' next-block', todayValue, selectedValue, disableFn);
-};
-
-const renderItems = (
-  currentValue: Date,
-  selectedValue?: Date,
-  disableFn?: (year: number, month: number, date: number) => boolean,
-) => {
+const renderItems = (currentValue: number, selectedValue?: number, disableFn?: (year: number) => boolean) => {
   let today = new Date();
-  let year = currentValue.getFullYear();
-  let month = currentValue.getMonth();
-  let firstDate = new Date(year, month, 1); // 获取当前月的第一天
-
-  let firstWeek = firstDate.getDay();
   let items = [];
-  let index = 0;
-  let days;
-
-  // 当前月第一天不是周一，渲染上月数据
-  if (firstWeek !== 1) {
-    index = firstWeek > 0 ? firstWeek - 1 : 6;
-    renderPrevMonthItems(items, year, month, index, today, selectedValue, disableFn);
-  }
 
-  // 获取当前月的天数
-  days = new Date(year, month + 1, 0).getDate();
-  // 渲染本月日期
-  renderDates(items, year, month, 1, days, '', today, selectedValue, disableFn);
-
-  // 当前月最后一天没有占满，渲染下月数据
-  if ((index += days) < 42) {
-    renderNextMonthItems(items, year, month, 42 - index, today, selectedValue, disableFn);
-  }
+  // 渲染前面 10 年
+  renderYears(items, currentValue, currentValue + 10, '', today.getFullYear(), selectedValue, disableFn);
+
+  // 渲染后面 6 年
+  renderYears(
+    items,
+    currentValue + 10,
+    currentValue + 16,
+    ' next-block',
+    today.getFullYear(),
+    selectedValue,
+    disableFn,
+  );
 
   return items.join('');
 };
 
+const OMIT_PROPS = ['class', 'value', 'disableFn'] as const;
+
 /**
  * 年份组件
  */
 export const YearWidget = (
-  props: Omit<JSX.HTMLAttributes<never>, 'children'> & {
+  props: Omit<JSX.HTMLAttributes<never>, 'children' | 'onchange'> & {
     /**
-     * 年月值
+     * 年值
      */
-    value?: [year: number, month: number];
+    value?: number;
     /**
      * 值变更事件
      */
-    onValueChange?: (value: Date) => void;
+    onchange?: (event: CustomEvent<number>) => void;
     /**
      * 禁用函数
      */
-    disableFn?: (year: number, month: number) => boolean;
+    disableFn?: (year: number) => boolean;
   },
 ) => {
-  let domTitle: HTMLElement;
-  let domBody: HTMLElement;
-
-  // const [selectedValue, setSelectedValue] = createSignal(props.value);
-  // const [currentValue, setCurrentValue] = createSignal(selectedValue() || getCurrentMonth());
-
-  // const onclick = (event: Event) => {
-  //   let target = event.currentTarget as HTMLElement;
-  //   let month = target.dataset.month as any;
+  let dom: HTMLElement;
 
-  //   // 没有选中
-  //   if (month && !target.classList.contains('selected')) {
-  //     month = month.split('|');
-  //     month = [currentValue()[0] + (month[0] | 0), month[1] | 0];
-
-  //     setSelectedValue(month);
-  //     props.onValueChange && props.onValueChange(month);
-  //   }
-  // };
+  const [selectedValue, setSelectedValue] = createSignal(props.value);
+  const [currentValue, setCurrentValue] = createSignal((((selectedValue() || new Date().getFullYear()) / 10) | 0) * 10);
 
   return (
-    <div class={combineClass('monthwidget datewidget', props.class)}>
-      {/* <div class="datewidget-header">
-        <div ref={domTitle as any} class="datewidget-title">
-          {replaceTemplate(i18n.Title, currentValue()[0], formatMonth(currentValue()[1]))}
-        </div>
-        <svg
-          class="icon icon-s"
-          aria-hidden={true}
-          onclick={() => setCurrentValue([currentValue()[0] - 1, currentValue()[1]])}
-        >
+    <div
+      ref={dom as any}
+      class={combineClass('yearwidget datewidget', props.class)}
+      {...(omitProps(props, OMIT_PROPS) as any)}
+    >
+      <div class="datewidget-header">
+        <div class="datewidget-title">{replaceTemplate(i18n.Title, currentValue(), currentValue() + 9)}</div>
+        <svg class="icon icon-s" aria-hidden={true} onclick={() => setCurrentValue(currentValue() - 10)}>
           <use href="#icon-backward"></use>
         </svg>
-        <svg
-          class="icon icon-s"
-          aria-hidden={true}
-          onclick={() => setCurrentValue([currentValue()[0] + 1, currentValue()[1]])}
-        >
+        <svg class="icon icon-s" aria-hidden={true} onclick={() => setCurrentValue(currentValue() + 10)}>
           <use href="#icon-forward"></use>
         </svg>
       </div>
       <div
-        ref={domBody as any}
-        class="datewidget-body canlendar-body"
+        class="datewidget-body yearwidget-body"
         onclick={(event) => {
           let target = event.target as HTMLElement;
-          let date;
+          let year;
 
-          while (target && target !== domBody) {
-            if ((date = target.dataset.date)) {
-              // 没有选中
-              if (!target.classList.contains('selected')) {
-                date = date.split('|');
-                date = new Date(date[0] | 0, date[1] | 0, date[2] | 0);
+          while (target && target !== dom) {
+            if ((year = +target.dataset.year)) {
+              // 父节点
+              let parent = dom.parentNode as HTMLElement;
+              // 是否嵌入到年月组件中
+              let inline = parent.classList.contains('datewidget');
 
-                setSelectedValue(date);
-                props.onValueChange && props.onValueChange(date);
+              // 没有选中
+              if (inline || !target.classList.contains('selected')) {
+                setSelectedValue(year);
+
+                dom.dispatchEvent(
+                  new CustomEvent('change', {
+                    detail: year,
+                    bubbles: !inline, // 允许事件冒泡
+                  }),
+                );
               }
 
               break;
@@ -192,7 +116,7 @@ export const YearWidget = (
           }
         }}
         innerHTML={renderItems(currentValue(), selectedValue(), props.disableFn)}
-      ></div> */}
+      ></div>
     </div>
   );
 };

package/src/{components/Dialog.ts → dialog.ts}

@@ -1,6 +1,6 @@
 import { createRoot } from 'solid-js';
 
-import { JSX } from '../jsx';
+import { JSX } from './jsx';
 
 /**
  * 对话框
@@ -22,8 +22,11 @@ export const showDialog = (component: () => JSX.Element): Dialog => {
   return createRoot((dispose) => {
     let body = document.body;
     let dialog = component() as Dialog;
+    let style= dialog.style;
+
+    style.position = 'fixed';
+    style.zIndex = '9';
 
-    dialog.style.cssText = 'position:fixed;z-index:9';
     body.appendChild(dialog);
 
     dialog.close = () => {

package/src/i18n/index.ts

@@ -13,7 +13,7 @@ export let MonthWidget = i18n.MonthWidget;
 /**
  * 日历
  */
-export let Canleandar = i18n.Canlendar;
+export let Canlendar = i18n.Canlendar;
 
 /**
  * 表单
@@ -28,6 +28,6 @@ export let Form = i18n.Form;
 export const switchLanguage = (data: typeof i18n) => {
   YearWidget = i18n.YearWidget;
   MonthWidget = i18n.MonthWidget;
-  Canleandar = i18n.Canlendar;
+  Canlendar = i18n.Canlendar;
   Form = i18n.Form;
 };

package/src/index.ts

@@ -27,6 +27,7 @@ export * from './components/CollapsiblePanel';
 export * from './components/Carousel';
 export * from './components/KeepAlive';
 export * from './components/Popup';
-export * from './components/Dialog';
+
+export * from './dialog';
 
 export * from './ssr/render';

package/src/location.ts

@@ -1,5 +1,5 @@
 import { isBrowser } from './dom';
-import { reactive } from './reactive';
+import { batch, reactive } from './reactive';
 
 export interface Location {
   /**
@@ -98,10 +98,12 @@ export const updateURL = (path: string, search?: string, hash?: string) => {
   location.hash = hash || '';
 
   if (location.path !== path || location.search !== search) {
-    location.path = path;
-    location.paths = path.match(/\/[^/]*/g) || [];
-    location.search = search || '';
-    location.query = search ? parseQuery(search) : {};
+    batch(() => {
+      location.path = path;
+      location.paths = path.match(/\/[^/]*/g) || [];
+      location.search = search || '';
+      location.query = search ? parseQuery(search) : {};
+    });
   }
 };
 

package/src/popup.ts

@@ -0,0 +1,33 @@
+import { createRoot } from 'solid-js';
+
+import { JSX } from './jsx';
+
+/**
+ * 弹出层
+ */
+export type Popup = HTMLElement & {
+  /**
+   * 关闭对话框方法
+   */
+  close(): void;
+};
+
+export const showPopup1 = (component: () => JSX.Element): Popup => {
+  return createRoot((dispose) => {
+    let body = document.body;
+    let popup = component() as Popup;
+    let style = popup.style;
+
+    style.position = 'fixed';
+    style.zIndex = '9';
+
+    body.appendChild(popup);
+
+    popup.close = () => {
+      body.removeChild(popup);
+      dispose();
+    };
+
+    return popup;
+  });
+};

package/src/reactive.ts

@@ -190,6 +190,9 @@ function arrayProxyGetHandler(target: any, property: any, receiver) {
 
   // 拦截索引访问
   if (index >= 0) {
+    // 收集依赖
+    this.signal[0]();
+
     // 简单值
     if (typeof value !== 'object' || !value) {
       return value;