cdui-js 1.0.20 → 1.0.22

package/css/datewidget.css

@@ -3,8 +3,8 @@
   height: 320px;
   border-radius: 12px;
   padding: 16px;
-  font-size: 12px;
   user-select: none;
+  font-size: 16px;
 }
 
 .datewidget-header {
@@ -30,10 +30,16 @@
   cursor: pointer;
 }
 
+.datewidget-body {
+  height: calc(100% - 36px);
+}
+
 .datewidget-item {
   display: inline-flex;
   justify-content: center;
   align-items: center;
+  width: 25%;
+  height: 25%;
   cursor: pointer;
 }
 
@@ -50,9 +56,9 @@
 .datewidget-item.selected::before {
   position: absolute;
   content: '';
-  width: 40px;
-  height: 40px;
-  border-radius: 40px;
+  width: 60px;
+  height: 60px;
+  border-radius: 60px;
   z-index: -1;
 }
 
@@ -64,9 +70,16 @@
 
 .canlendar-body {
   height: calc(100% - 72px);
+  font-size: 12px;
 }
 
 .canlendar-body .datewidget-item {
   width: 14.28%;
   height: 16.66%;
 }
+
+.canlendar-body .datewidget-item.today::before,
+.canlendar-body .datewidget-item.selected::before {
+  width: 40px;
+  height: 40px;
+}

package/demo/css/css.md

@@ -292,13 +292,14 @@
 .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.prev-block, .datewidget-item.next-block { 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 日期选择
 
 .datepicker { border: 1px solid #e4e4e4; background: white; }

package/demo/src/css/atomic.css

@@ -916,7 +916,7 @@ body { stroke: #A2A7AD; fill: #A2A7AD; }
 .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.prev-block, .datewidget-item.next-block { color: #888f97; }
 .datewidget-item.today::before { background: #f5f5f5; }
 .datewidget-item.selected { color: white; }
 .datewidget-item.selected::before { background: #ff4000; }

package/demo/src/pages/Canlendar.tsx

@@ -1,5 +1,6 @@
 import { Canlendar } from '../../../src/components/Canlendar';
 import { MonthWidget } from '../../../src/components/MonthWidget';
+import { YearWidget } from '../../../src/components/YearWidget';
 
 export const CanlendarPage = () => {
   return (
@@ -11,6 +12,7 @@ export const CanlendarPage = () => {
         }}
       ></Canlendar>
       <MonthWidget></MonthWidget>
+      <YearWidget></YearWidget>
     </div>
   );
 };

package/package.json

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

package/src/components/Canlendar.tsx

@@ -51,7 +51,7 @@ const renderPrevMonthItems = (
     month = 11;
   }
 
-  renderDates(items, year, month, days - index + 1, days, ' prev-month', todayValue, selectedValue, disableFn);
+  renderDates(items, year, month, days - index + 1, days, ' prev-block', todayValue, selectedValue, disableFn);
 };
 
 const renderNextMonthItems = (
@@ -70,7 +70,7 @@ const renderNextMonthItems = (
     month = 0;
   }
 
-  renderDates(items, year, month, 1, days, ' next-month', todayValue, selectedValue, disableFn);
+  renderDates(items, year, month, 1, days, ' next-block', todayValue, selectedValue, disableFn);
 };
 
 const renderItems = (
@@ -139,6 +139,9 @@ const formatMonth = (value: Date) => {
 
 const OMIT_PROPS = ['class', 'value', 'onValueChange', 'disableFn'] as const;
 
+/**
+ * 日历组件
+ */
 export const Canlendar = (
   props: Omit<JSX.HTMLAttributes<never>, 'children'> & {
     /**
@@ -158,14 +161,14 @@ export const Canlendar = (
   let domTitle: HTMLElement;
   let domBody: HTMLElement;
 
-  const [selectedValue, setSelectedDate] = createSignal(parseDate(props.value));
+  const [selectedValue, setSelectedValue] = createSignal(parseDate(props.value));
   const [currentValue, setCurrentValue] = createSignal(selectedValue() || new Date());
 
   return (
     <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()))}
+          {replaceTemplate(i18n.Title, currentValue().getFullYear(), formatMonth(currentValue()))}
         </div>
         <svg class="icon icon-s" aria-hidden={true} onclick={() => setCurrentValue(switchMonth(currentValue(), -1))}>
           <use href="#icon-backward"></use>
@@ -182,17 +185,22 @@ export const Canlendar = (
         class="datewidget-body canlendar-body"
         onclick={(event) => {
           let target = event.target as HTMLElement;
-          let date, onValueChange;
-
-          if (target && (date = target.dataset.date) && (onValueChange = props.onValueChange)) {
-            let dom = domBody.querySelector('.selected') as HTMLElement;
-
-            if (dom !== target) {
-              date = date.split('|');
-              date = new Date(date[0] | 0, date[1] | 0, date[2] | 0);
-
-              setSelectedDate(date);
-              onValueChange(date);
+          let date;
+
+          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);
+
+                setSelectedValue(date);
+                props.onValueChange && props.onValueChange(date);
+              }
+
+              break;
+            } else {
+              target = target.parentNode as HTMLElement;
             }
           }
         }}

package/src/components/MonthWidget.tsx

@@ -1,36 +1,61 @@
-import { createSignal, combineClass } from '../reactive';
-
 import { JSX } from '../jsx';
-import { Canleandar as i18n } from '../i18n';
+import { MonthWidget as i18n } from '../i18n';
 import { replaceTemplate } from '../template';
+import { createSignal, combineClass } from '../reactive';
 import { For } from './For';
 
-const formatMonth = (month: number) => {
-  return month > 9 ? month : '0' + month;
-};
-
 const getCurrentMonth = () => {
   let date = new Date();
-  return [date.getFullYear(), date.getMonth() + 1];
+  return [date.getFullYear(), date.getMonth() + 1] as [year: number, month: number];
 };
 
-const switchMonth = (value: [year: number, month: number], offset: 1 | -1) => {
-  let year = value[0];
-  let month = value[1] + offset;
+const MONTH_LIST = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
 
-  if (month === 0) {
-    month = 12;
-    year--;
-  } else if (month > 12) {
-    month = 1;
-    year++;
+const MonthItem = (props: {
+  value: number;
+  selectedValue: [year: number, month: number];
+  currentValue: [year: number, month: number];
+  onclick: (event: Event) => void;
+  disableFn?: (year: number, month: number) => boolean;
+}) => {
+  let year = 0;
+  let month = props.value;
+
+  if (month > 12) {
+    year = 1;
+    month -= 12;
   }
 
-  return [year, month];
-};
+  const checkCurrent = () => {
+    const today = new Date();
+    const currentValue = props.currentValue;
+
+    return today.getFullYear() === currentValue[0] + year && today.getMonth() + 1 === month;
+  };
 
-const MONTH_LIST = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2, 3, 4];
+  const checkSelected = () => {
+    let selectedValue = props.selectedValue;
+    const currentValue = props.currentValue;
 
+    return selectedValue && selectedValue[0] === currentValue[0] + 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' : ''}`}
+      data-month={`${year}|${month}`}
+      onclick={props.onclick}
+    >
+      {replaceTemplate(i18n.Format, month)}
+    </span>
+  );
+};
+
+/**
+ * 月份组件
+ */
 export const MonthWidget = (
   props: Omit<JSX.HTMLAttributes<never>, 'children'> & {
     /**
@@ -44,48 +69,61 @@ export const MonthWidget = (
     /**
      * 禁用函数
      */
-    disableFn?: (year: number, month: number, date: number) => boolean;
+    disableFn?: (year: number, month: number) => boolean;
   },
 ) => {
   let domTitle: HTMLElement;
   let domBody: HTMLElement;
 
-  const [selectedValue, setSelectedDate] = createSignal(props.value);
+  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;
+
+    // 没有选中
+    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);
+    }
+  };
+
   return (
     <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]))}
+          {replaceTemplate(i18n.Title, currentValue()[0])}
         </div>
-        <svg class="icon icon-s" aria-hidden={true} onclick={() => setCurrentValue(switchMonth(selectedValue(), -1))}>
+        <svg
+          class="icon icon-s"
+          aria-hidden={true}
+          onclick={() => setCurrentValue([currentValue()[0] - 1, currentValue()[1]])}
+        >
           <use href="#icon-backward"></use>
         </svg>
-        <svg class="icon icon-s" aria-hidden={true} onclick={() => setCurrentValue(switchMonth(selectedValue(), 1))}>
+        <svg
+          class="icon icon-s"
+          aria-hidden={true}
+          onclick={() => setCurrentValue([currentValue()[0] + 1, currentValue()[1]])}
+        >
           <use href="#icon-forward"></use>
         </svg>
       </div>
-      <div
-        ref={domBody as any}
-        class="datewidget-body"
-        onclick={(event) => {
-          let target = event.target as HTMLElement;
-          let value, onValueChange;
-
-          if (target && (onValueChange = props.onValueChange)) {
-            let dom = domBody.querySelector('.selected') as HTMLElement;
-
-            if (dom !== target) {
-              value = [currentValue()[0], +target.textContent];
-
-              setSelectedDate(value);
-              onValueChange(value);
-            }
-          }
-        }}
-      >
-        <For each={MONTH_LIST}>{(item) => <span>{item}</span>}</For>
+      <div ref={domBody as any} class="datewidget-body">
+        <For each={MONTH_LIST}>
+          {(item) => (
+            <MonthItem
+              value={item}
+              selectedValue={selectedValue()}
+              currentValue={currentValue()}
+              onclick={onclick}
+            ></MonthItem>
+          )}
+        </For>
       </div>
     </div>
   );

package/src/components/YearWidget.tsx

@@ -1,13 +1,121 @@
+import { JSX } from '../jsx';
+import { YearWidget as i18n } from '../i18n';
+import { replaceTemplate } from '../template';
 import { createSignal, combineClass } from '../reactive';
+import { For } from './For';
 
-import { JSX } from '../jsx';
+// 渲染日期项
+const renderDates = (
+  items: string[],
+  year: number,
+  month: number,
+  from: number,
+  to: number,
+  className: string,
+  todayValue: Date,
+  selectedValue?: Date,
+  disableFn?: (year: number, month: number, date: 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++) {
+    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>`,
+    );
+  }
+};
+
+// 渲染上月日期项
+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,
+) => {
+  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);
+  }
+
+  return items.join('');
+};
+
+/**
+ * 年份组件
+ */
 export const YearWidget = (
   props: Omit<JSX.HTMLAttributes<never>, 'children'> & {
     /**
-     * 日期值
+     * 年月值
      */
-    value?: Date | string | number;
+    value?: [year: number, month: number];
     /**
      * 值变更事件
      */
@@ -15,8 +123,76 @@ export const YearWidget = (
     /**
      * 禁用函数
      */
-    disableFn?: (year: number, month: number, date: number) => boolean;
+    disableFn?: (year: number, month: number) => boolean;
   },
 ) => {
-  return <div></div>;
+  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;
+
+  //   // 没有选中
+  //   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);
+  //   }
+  // };
+
+  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]])}
+        >
+          <use href="#icon-backward"></use>
+        </svg>
+        <svg
+          class="icon icon-s"
+          aria-hidden={true}
+          onclick={() => setCurrentValue([currentValue()[0] + 1, currentValue()[1]])}
+        >
+          <use href="#icon-forward"></use>
+        </svg>
+      </div>
+      <div
+        ref={domBody as any}
+        class="datewidget-body canlendar-body"
+        onclick={(event) => {
+          let target = event.target as HTMLElement;
+          let date;
+
+          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);
+
+                setSelectedValue(date);
+                props.onValueChange && props.onValueChange(date);
+              }
+
+              break;
+            } else {
+              target = target.parentNode as HTMLElement;
+            }
+          }
+        }}
+        innerHTML={renderItems(currentValue(), selectedValue(), props.disableFn)}
+      ></div> */}
+    </div>
+  );
 };

package/src/i18n/index.ts

@@ -1,5 +1,15 @@
 import i18n from './languages/en.json';
 
+/**
+ * 年份面板
+ */
+export let YearWidget = i18n.YearWidget;
+
+/**
+ * 月份面板
+ */
+export let MonthWidget = i18n.MonthWidget;
+
 /**
  * 日历
  */
@@ -16,6 +26,8 @@ export let Form = i18n.Form;
  * @param data 当前语言数据
  */
 export const switchLanguage = (data: typeof i18n) => {
+  YearWidget = i18n.YearWidget;
+  MonthWidget = i18n.MonthWidget;
   Canleandar = i18n.Canlendar;
   Form = i18n.Form;
 };

package/src/i18n/languages/en.json

@@ -1,6 +1,6 @@
 {
   "Canlendar": {
-    "Month": "${0}年${1}月",
+    "Title": "${0}年${1}月",
     "Weeks": [
       "一",
       "二",
@@ -11,6 +11,13 @@
       "日"
     ]
   },
+  "MonthWidget": {
+    "Title": "${0}年",
+    "Format": "${0}月"
+  },
+  "YearWidget": {
+    "Title": "${0} - ${1}"
+  },
   "Form": {
     "Required": "不能为空",
     "NotLessThan": "不能小于 ${value}",

package/src/i18n/languages/zh-CN.json

@@ -1,6 +1,6 @@
 {
   "Canlendar": {
-    "Month": "${0}年${1}月",
+    "Title": "${0}年${1}月",
     "Weeks": [
       "一",
       "二",
@@ -10,5 +10,19 @@
       "六",
       "日"
     ]
+  },
+  "MonthWidget": {
+    "Title": "${0}年",
+    "Format": "${0}月"
+  },
+  "YearWidget": {
+    "Title": "${0} - ${1}"
+  },
+  "Form": {
+    "Required": "不能为空",
+    "NotLessThan": "不能小于 ${value}",
+    "NotGreaterThan": "不能大于 ${value}",
+    "Between": "必须在 ${min} -> ${max} 之间",
+    "NotDate": "\"${value}\" 不是一个有效的日期值"
   }
 }

package/src/i18n/languages/zh-TW.json

@@ -1,6 +1,6 @@
 {
   "Canlendar": {
-    "Month": "${0}年${1}月",
+    "Title": "${0}年${1}月",
     "Weeks": [
       "一",
       "二",
@@ -10,5 +10,19 @@
       "六",
       "日"
     ]
+  },
+  "MonthWidget": {
+    "Title": "${0}年",
+    "Format": "${0}月"
+  },
+  "YearWidget": {
+    "Title": "${0} - ${1}"
+  },
+  "Form": {
+    "Required": "不能为空",
+    "NotLessThan": "不能小于 ${value}",
+    "NotGreaterThan": "不能大于 ${value}",
+    "Between": "必须在 ${min} -> ${max} 之间",
+    "NotDate": "\"${value}\" 不是一个有效的日期值"
   }
 }

package/src/index.ts

@@ -26,6 +26,7 @@ export * from './components/Form';
 export * from './components/CollapsiblePanel';
 export * from './components/Carousel';
 export * from './components/KeepAlive';
+export * from './components/Popup';
 export * from './components/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) : {};
+    });
   }
 };