cdui-js 1.0.16 → 1.0.17

package/css/canlendar.css

@@ -1,4 +1,5 @@
-.canlendar {
+.canlendar,
+.monthwidget {
   max-width: 380px;
   height: 320px;
   border-radius: 12px;
@@ -8,21 +9,25 @@
 }
 
 .canlendar-header,
-.canlendar-weeks {
+.canlendar-weeks,
+.monthwidget-header {
   display: flex;
   align-items: center;
   height: 36px;
   line-height: 36px;
 }
 
-.canlendar-month {
+.canlendar-title,
+.monthwidget-title {
   flex: auto;
   padding-left: 12px;
   font-weight: bold;
   font-size: 14px;
+  cursor: pointer;
 }
 
-.canlendar-header > .icon {
+.canlendar-header > .icon,
+.monthwidget-header > .icon {
   box-sizing: border-box;
   width: 40px;
   height: 100%;
@@ -40,7 +45,8 @@
   height: calc(100% - 72px);
 }
 
-.canlendar-date {
+.canlendar-date,
+.monthwidget-month {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -49,17 +55,22 @@
   cursor: pointer;
 }
 
-.canlendar-date.disabled {
+.canlendar-date.disabled,
+.monthwidget-month.disabled {
   cursor: not-allowed;
 }
 
 .canlendar-date.today,
-.canlendar-date.selected {
+.canlendar-date.selected,
+.monthwidget-month.today,
+.monthwidget-month.selected {
   position: relative;
 }
 
 .canlendar-date.today::before,
-.canlendar-date.selected::before {
+.canlendar-date.selected::before,
+.monthwidget-month.today::before,
+.monthwidget-month.selected::before {
   position: absolute;
   content: '';
   width: 40px;

package/demo/src/App.tsx

@@ -1,4 +1,5 @@
 import { batch, createEffect, omitProps, pickProps, reactive } from '../../src/reactive';
+import { Icon } from '../../src/components/Icon';
 import { CanlendarPage } from './pages/Canlendar';
 import { ComboBoxPage } from './pages/ComboBox';
 import { DatePickerPage } from './pages/DatePicker';
@@ -8,8 +9,8 @@ import { MobileDatePickerPage } from './pages/MobileDatePicker';
 const Test = (props: { text1: string; text2: string }) => {
   return (
     <div>
-      <div>{JSON.stringify({ ...pickProps(props, ['text1']) })}</div>
-      <div>{JSON.stringify({ ...omitProps(props, ['text1']) })}</div>
+      <div>{pickProps(props, ['text1']).text1}</div>
+      <div>{omitProps(props, ['text1']).text2}</div>
     </div>
   );
 };
@@ -26,8 +27,9 @@ export const App = () => {
 
   return (
     <div style={{ 'min-height': '100%' }}>
+      <Icon name="dropdown" class="test"></Icon>
       <Test {...state}></Test>
-      <button onclick={() => (state.text1 = state.text2 = '' + Math.random())}>click</button>
+      <button onclick={() => batch(() => (state.text1 = state.text2 = '' + Math.random()))}>click</button>
       <CanlendarPage></CanlendarPage>
       <DatePickerPage></DatePickerPage>
       <MobileDatePickerPage></MobileDatePickerPage>

package/package.json

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

package/src/components/Canlendar.tsx

@@ -12,14 +12,14 @@ const renderDates = (
   from: number,
   to: number,
   className: string,
-  todayDate: Date,
-  selectedDate?: Date,
+  todayValue: Date,
+  selectedValue?: Date,
   disableFn?: (year: number, month: number, date: number) => boolean,
 ) => {
-  let today = todayDate.getFullYear() === year && todayDate.getMonth() === month ? todayDate.getDate() : -1;
+  let today = todayValue.getFullYear() === year && todayValue.getMonth() === month ? todayValue.getDate() : -1;
   let selected =
-    selectedDate && selectedDate.getFullYear() === year && selectedDate.getMonth() === month
-      ? selectedDate.getDate()
+    selectedValue && selectedValue.getFullYear() === year && selectedValue.getMonth() === month
+      ? selectedValue.getDate()
       : -1;
 
   for (let i = from; i <= to; i++) {
@@ -37,8 +37,8 @@ const renderPrevMonthItems = (
   year: number,
   month: number,
   index: number,
-  todayDate: Date,
-  selectedDate?: Date,
+  todayValue: Date,
+  selectedValue?: Date,
   disableFn?: (year: number, month: number, date: number) => boolean,
 ) => {
   // 获取上月天数
@@ -51,7 +51,7 @@ const renderPrevMonthItems = (
     month = 11;
   }
 
-  renderDates(items, year, month, days - index + 1, days, ' prev-month', todayDate, selectedDate, disableFn);
+  renderDates(items, year, month, days - index + 1, days, ' prev-month', todayValue, selectedValue, disableFn);
 };
 
 const renderNextMonthItems = (
@@ -59,8 +59,8 @@ const renderNextMonthItems = (
   year: number,
   month: number,
   days: number,
-  todayDate: Date,
-  selectedDate?: Date,
+  todayValue: Date,
+  selectedValue?: Date,
   disableFn?: (year: number, month: number, date: number) => boolean,
 ) => {
   if (month < 11) {
@@ -70,17 +70,17 @@ const renderNextMonthItems = (
     month = 0;
   }
 
-  renderDates(items, year, month, 1, days, ' next-month', todayDate, selectedDate, disableFn);
+  renderDates(items, year, month, 1, days, ' next-month', todayValue, selectedValue, disableFn);
 };
 
 const renderItems = (
-  showDate: Date,
-  selectedDate?: Date,
+  currentValue: Date,
+  selectedValue?: Date,
   disableFn?: (year: number, month: number, date: number) => boolean,
 ) => {
   let today = new Date();
-  let year = showDate.getFullYear();
-  let month = showDate.getMonth();
+  let year = currentValue.getFullYear();
+  let month = currentValue.getMonth();
   let firstDate = new Date(year, month, 1); // 获取当前月的第一天
 
   let firstWeek = firstDate.getDay();
@@ -91,17 +91,17 @@ const renderItems = (
   // 当前月第一天不是周一，渲染上月数据
   if (firstWeek !== 1) {
     index = firstWeek > 0 ? firstWeek - 1 : 6;
-    renderPrevMonthItems(items, year, month, index, today, selectedDate, disableFn);
+    renderPrevMonthItems(items, year, month, index, today, selectedValue, disableFn);
   }
 
   // 获取当前月的天数
   days = new Date(year, month + 1, 0).getDate();
   // 渲染本月日期
-  renderDates(items, year, month, 1, days, '', today, selectedDate, disableFn);
+  renderDates(items, year, month, 1, days, '', today, selectedValue, disableFn);
 
   // 当前月最后一天没有占满，渲染下月数据
   if ((index += days) < 42) {
-    renderNextMonthItems(items, year, month, 42 - index, today, selectedDate, disableFn);
+    renderNextMonthItems(items, year, month, 42 - index, today, selectedValue, disableFn);
   }
 
   return items.join('');
@@ -155,22 +155,22 @@ export const Canlendar = (
     disableFn?: (year: number, month: number, date: number) => boolean;
   },
 ) => {
-  let domMonth: HTMLElement;
+  let domTitle: HTMLElement;
   let domBody: HTMLElement;
 
-  const [selectedDate, setSelectedDate] = createSignal(parseDate(props.value));
-  const [showDate, setShowDate] = createSignal(selectedDate() || new Date());
+  const [selectedValue, setSelectedDate] = 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={domMonth as any} class="canlendar-month">
-          {replaceTemplate(i18n.Month, showDate().getFullYear(), formatMonth(showDate()))}
+        <div ref={domTitle as any} class="canlendar-title">
+          {replaceTemplate(i18n.Month, currentValue().getFullYear(), formatMonth(currentValue()))}
         </div>
-        <svg class="icon icon-s" aria-hidden={true} onclick={() => setShowDate(switchMonth(showDate(), -1))}>
+        <svg class="icon icon-s" aria-hidden={true} onclick={() => setCurrentValue(switchMonth(currentValue(), -1))}>
           <use href="#icon-backward"></use>
         </svg>
-        <svg class="icon icon-s" aria-hidden={true} onclick={() => setShowDate(switchMonth(showDate(), 1))}>
+        <svg class="icon icon-s" aria-hidden={true} onclick={() => setCurrentValue(switchMonth(currentValue(), 1))}>
           <use href="#icon-forward"></use>
         </svg>
       </div>
@@ -196,7 +196,7 @@ export const Canlendar = (
             }
           }
         }}
-        innerHTML={renderItems(showDate(), selectedDate(), props.disableFn)}
+        innerHTML={renderItems(currentValue(), selectedValue(), props.disableFn)}
       ></div>
     </div>
   );

package/src/components/MonthWidget.tsx

@@ -5,12 +5,38 @@ import { Canleandar as i18n } from '../i18n';
 import { replaceTemplate } from '../template';
 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];
+};
+
+const switchMonth = (value: [year: number, month: number], offset: 1 | -1) => {
+  let year = value[0];
+  let month = value[1] + offset;
+
+  if (month === 0) {
+    month = 12;
+    year--;
+  } else if (month > 12) {
+    month = 1;
+    year++;
+  }
+
+  return [year, month];
+};
+
+const MONTH_LIST = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+
 export const MonthWidget = (
   props: Omit<JSX.HTMLAttributes<never>, 'children'> & {
     /**
-     * 日期值
+     * 年月值
      */
-    value?: Date | string | number;
+    value?: [year: number, month: number];
     /**
      * 值变更事件
      */
@@ -21,21 +47,46 @@ export const MonthWidget = (
     disableFn?: (year: number, month: number, date: number) => boolean;
   },
 ) => {
+  let domTitle: HTMLElement;
   let domBody: HTMLElement;
 
+  const [selectedValue, setSelectedDate] = createSignal(props.value);
+  const [currentValue, setCurrentValue] = createSignal(selectedValue() || getCurrentMonth());
+
   return (
     <div>
-      {/* <div class="canlendar-header">
-        <div ref={domBody as any} class="canlendar-month">
-          {replaceTemplate(i18n.Month, showDate().getFullYear(), formatMonth(showDate()))}
+      <div class="monthwidget-header">
+        <div ref={domTitle as any} class="monthwidget-title">
+          {replaceTemplate(i18n.Month, currentValue()[0], formatMonth(currentValue()[1]))}
         </div>
-        <svg class="icon icon-s" aria-hidden={true} onclick={() => setShowDate(switchMonth(showDate(), -1))}>
+        <svg class="icon icon-s" aria-hidden={true} onclick={() => setCurrentValue(switchMonth(selectedValue(), -1))}>
           <use href="#icon-backward"></use>
         </svg>
-        <svg class="icon icon-s" aria-hidden={true} onclick={() => setShowDate(switchMonth(showDate(), 1))}>
+        <svg class="icon icon-s" aria-hidden={true} onclick={() => setCurrentValue(switchMonth(selectedValue(), 1))}>
           <use href="#icon-forward"></use>
         </svg>
-      </div> */}
+      </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>
     </div>
   );
 };

package/src/reactive.ts

@@ -1,4 +1,4 @@
-import { Component, createEffect, createSignal, createUniqueId, lazy } from 'solid-js';
+import { Component, createEffect, createSignal, createUniqueId, lazy, splitProps } from 'solid-js';
 
 const getOwnPropertyNames = Object.getOwnPropertyNames;
 
@@ -91,31 +91,58 @@ export interface SSRRenderPage {
  * @param pickPropertyNames 要选择的组件属性名集合
  */
 export const pickProps = <T extends Record<any, any>, K extends readonly (keyof T)[]>(
-  properties: T,
+  props: T,
   pickPropertyNames: K,
 ): Pick<T, K[number]> => {
-  return new Proxy(properties, {
-    ownKeys(target) {
-      return getOwnPropertyNames(target).filter((key) => pickPropertyNames.indexOf(key) >= 0);
-    },
-  });
+  let result = {};
+
+  for (let i = 0, l = pickPropertyNames.length; i < l; i++) {
+    let name = pickPropertyNames[i];
+
+    defineProperty(result, name, {
+      get: () => props[name],
+    });
+  }
+
+  return result as Pick<T, K[number]>;
+  // return new Proxy(props, {
+  //   ownKeys(target) {
+  //     return getOwnPropertyNames(target).filter((key) => pickPropertyNames.indexOf(key) >= 0);
+  //   },
+  // });
 };
 
 /**
  * 排除部分组件属性
  *
- * @param properties 组件属性集合
+ * @param props 组件属性集合
  * @param omitPropertyNames 要排除的组件属性名集合
  */
 export const omitProps = <T extends Record<any, any>, K extends readonly (keyof T)[]>(
-  properties: T,
+  props: T,
   omitPropertyNames: K,
 ): Omit<T, K[number]> => {
-  return new Proxy(properties, {
-    ownKeys(target) {
-      return getOwnPropertyNames(target).filter((key) => omitPropertyNames.indexOf(key) < 0);
-    },
-  }) as unknown as Exclude<T, K[number]>;
+  let names = getOwnPropertyNames(props);
+  let result = {};
+
+  for (let i = 0, l = names.length; i < l; i++) {
+    let name = names[i];
+
+    if (omitPropertyNames.indexOf(name) < 0) {
+      defineProperty(result, name, {
+        get: () => props[name],
+      });
+    }
+  }
+
+  return result as Omit<T, K[number]>;
+
+  // return splitProps(props, omitPropertyNames)[1] as any;
+  // return new Proxy(props, {
+  //   ownKeys(target) {
+  //     return getOwnPropertyNames(target).filter((key) => omitPropertyNames.indexOf(key) < 0);
+  //   },
+  // }) as unknown as Omit<T, K[number]>;
 };
 
 /**