cdui-js 1.0.19 → 1.0.21

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,24 +1,20 @@
-.canlendar,
-.monthwidget {
+.datewidget {
   max-width: 380px;
   height: 320px;
   border-radius: 12px;
   padding: 16px;
-  font-size: 12px;
   user-select: none;
+  font-size: 16px;
 }
 
-.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,46 +30,56 @@
   cursor: pointer;
 }
 
-.canlendar-weeks > span {
-  flex: auto;
-  text-align: center;
-  vertical-align: middle;
+.datewidget-body {
+  height: calc(100% - 36px);
 }
 
-.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%;
+  width: 25%;
+  height: 25%;
   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: 60px;
+  height: 60px;
+  border-radius: 60px;
+  z-index: -1;
+}
+
+.canlendar-weeks > span {
+  flex: auto;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.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;
-  border-radius: 40px;
-  z-index: -1;
 }

package/demo/css/css.md

@@ -287,16 +287,17 @@
 .combobox:has(.combobox-input:focus) { border: 1px solid #1b212d; }
 
 
-# canlendar 日历
+# canlendar monthwidget yearwidget 日历 年月 年
+
+.datewidget { border: 1px solid #e4e4e4; }
+.datewidget-header > .icon { stroke: #1b212d; }
+.datewidget-item.disabled { color: #e4e4e4; }
+.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 { 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; }
 
 
 # datepicker 日期选择

package/demo/src/App.tsx

@@ -1,38 +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';
-import { TextBox } from '../../src/components/TextBox';
-
-const Test = (props: { text1: string; text2: string }) => {
-  let dom: HTMLElement;
-  return (
-    <div>
-      <div>{pickProps(props, ['text1']).text1}</div>
-      <div>{omitProps(props, ['text1']).text2}</div>
-      <TextBox ref={dom as any}></TextBox>
-    </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)} style={{ background: 'red' }}></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-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; }
-.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,18 @@
 import { Canlendar } from '../../../src/components/Canlendar';
+import { MonthWidget } from '../../../src/components/MonthWidget';
+import { YearWidget } from '../../../src/components/YearWidget';
 
 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>
+      <YearWidget></YearWidget>
+    </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/Form.tsx

@@ -59,10 +59,7 @@ export const FormPage = () => {
         {(item) => (
           <FormItem field={item.field} label={item.label} required={item.required}>
             <div>
-              <input type="text" value={state.b}></input>
-              {/* <item.Input></item.Input> */}
-              <TextBox></TextBox>
-              <TextBox></TextBox>
+              <item.Input></item.Input>
             </div>
           </FormItem>
         )}

package/package.json

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

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>`,
     );
@@ -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', props.class)} {...omitProps(props, OMIT_PROPS)}>
-      <div class="canlendar-header">
-        <div ref={domTitle as any} class="canlendar-title">
-          {replaceTemplate(i18n.Month, currentValue().getFullYear(), formatMonth(currentValue()))}
+    <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.Title, currentValue().getFullYear(), formatMonth(currentValue()))}
         </div>
         <svg class="icon icon-s" aria-hidden={true} onclick={() => setCurrentValue(switchMonth(currentValue(), -1))}>
           <use href="#icon-backward"></use>
@@ -174,25 +177,30 @@ 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;
-
-          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/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/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];
+  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>
-      <div class="monthwidget-header">
-        <div ref={domTitle as any} class="monthwidget-title">
-          {replaceTemplate(i18n.Month, currentValue()[0], formatMonth(currentValue()[1]))}
+    <div class={combineClass('monthwidget datewidget', props.class)}>
+      <div class="datewidget-header">
+        <div ref={domTitle as any} class="datewidget-title">
+          {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="monthwidget-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';