plain-design 1.0.0-beta.70 → 1.0.0-beta.72

package/src/packages/components/DatePicker/panel/DatePanelRange.tsx

@@ -1,146 +1,146 @@
-import {computed, designComponent, getComponentCls, PropType} from "plain-design-composition";
-import {DatePublicEmits, DatePublicProps, DefaultDateFormatString, eDateEmitRangeType, eDateView} from "../date.utils";
-import {UseDateJudgementView, useDatePanel} from "./useDatePanel";
-import {PDate, plainDate} from "../../../utils/plainDate";
-import {DatePanelDate} from "./DatePanelDate";
-
-const DefaultTime = {
-  start: '00:00:00',
-  end: '23:59:59'
-};
-
-/**
- * 日期范围选择面板
- * @author  韦胜健
- * @date    2022/12/12 10:59
- */
-export const DatePanelRange = designComponent({
-  name: 'date-panel-range',
-  props: {
-    ...DatePublicProps,
-    range: { type: Boolean, default: true },
-    view: { type: String as PropType<eDateView>, default: eDateView.date }
-  },
-  emits: {
-    ...DatePublicEmits,
-    mousedown: (e: MouseEvent, type: eDateEmitRangeType) => true,
-  },
-  setup({ props, event: { emit } }) {
-
-    const {
-      state,
-      displayFormat,
-      valueFormat,
-      startModel,
-      endModel,
-      handler,
-      setSelectDate,
-      today,
-    } = useDatePanel({
-      props,
-      emit,
-      jdView: UseDateJudgementView.YMD,
-      processPd: {
-        range: (spd, epd) => {
-          spd = spd.useHms(state.pd.spd || defaultTimePd.value.start);
-          epd = epd.useHms(state.pd.epd || defaultTimePd.value.end);
-          return utils.processPd(spd, epd);
-        }
-      },
-    });
-
-    const defaultTimePd = computed(() => {
-      const config = { displayFormat: DefaultDateFormatString.Hms, valueFormat: DefaultDateFormatString.Hms };
-      return {
-        start: plainDate(props.defaultStartTime || DefaultTime.start, config),
-        end: plainDate(props.defaultEndTime || DefaultTime.end, config),
-      };
-    });
-
-    const utils = {
-      processPd: (argSpd: PDate | null, argEpd: PDate | null) => {
-        let spd = argSpd || argEpd!;
-        let epd = argEpd || argSpd!;
-        const { max, min } = state.topState;
-        const jdView = props.datetime ? 'YMDHms' : 'YMD';
-        if (!!max) {
-          if (max[jdView] < spd[jdView]) spd = max;
-          if (max[jdView] < epd[jdView]) epd = max;
-        }
-        if (!!min) {
-          if (min[jdView] > spd[jdView]) spd = min;
-          if (min[jdView] > epd[jdView]) epd = min;
-        }
-        return spd[jdView] > epd[jdView] ? {
-          spd: epd,
-          epd: spd,
-        } : {
-          spd, epd
-        };
-      },
-    };
-
-    const externalHandler = {
-      onSelectTime: (val: string, type: eDateEmitRangeType) => {
-        let pd = (type === eDateEmitRangeType.start ? state.pd.spd : state.pd.epd) || today;
-        pd = pd.useHms(defaultTimePd.value.start.useValue(val));
-        const { spd, epd } = utils.processPd(type === eDateEmitRangeType.start ? pd : state.pd.spd, type === eDateEmitRangeType.end ? pd : state.pd.epd);
-        startModel.value = spd.getDisplay();
-        endModel.value = epd.getDisplay();
-        state.range = {
-          hover: null,
-          value: [spd, epd],
-        };
-        emit.onUpdateModelValue(startModel.value, eDateEmitRangeType.start);
-        emit.onUpdateModelValue(endModel.value, eDateEmitRangeType.end);
-      }
-    };
-
-    const binding = computed(() => {
-      const startSelectDate = state.selectDate;
-      const publicProps = Object.keys(DatePublicProps).reduce((ret, key) => {
-        (ret as any)[key] = (props as any)[key];
-        return ret;
-      }, {});
-      Object.assign(publicProps, {
-        displayFormat: displayFormat,
-        valueFormat: valueFormat,
-      });
-      const start = {
-        ...publicProps,
-        selectDate: startSelectDate,
-        modelValue: startModel.value,
-        defaultTime: props.defaultStartTime || DefaultTime.start,
-
-        onSelectDateChange: setSelectDate,
-        onMouseenter: handler.onMouseenter,
-        onClick: handler.onClick,
-        onSelectTime: (val: string) => externalHandler.onSelectTime(val, eDateEmitRangeType.start),
-        onMouseDown: (e: MouseEvent) => emit.mousedown(e, eDateEmitRangeType.start),
-      };
-      const endSelectDate = startSelectDate.useMonthDate(startSelectDate.month + 1, 1);
-      const end = {
-        ...publicProps,
-        selectDate: endSelectDate,
-        modelValue: endModel.value,
-        defaultTime: props.defaultEndTime || DefaultTime.end,
-
-        onSelectDateChange: (val: PDate) => setSelectDate(val.useMonthDate(val.month - 1, 1)),
-        onMouseenter: handler.onMouseenter,
-        onClick: handler.onClick,
-        onSelectTime: (val: string) => externalHandler.onSelectTime(val, eDateEmitRangeType.end),
-        onMouseDown: (e: MouseEvent) => emit.mousedown(e, eDateEmitRangeType.end),
-      };
-      return { start, end };
-    });
-
-    return {
-      render: () => (
-        <div className={`${getComponentCls("date-base-panel")} ${getComponentCls("date-panel-date-range")}`}>
-          <DatePanelDate {...binding.value.start}/>
-          <DatePanelDate {...binding.value.end}/>
-        </div>
-      )
-    };
-  },
-});
+import {computed, designComponent, getComponentCls, PropType} from "plain-design-composition";
+import {DatePublicEmits, DatePublicProps, DefaultDateFormatString, eDateEmitRangeType, eDateView} from "../date.utils";
+import {UseDateJudgementView, useDatePanel} from "./useDatePanel";
+import {PDate, plainDate} from "../../../utils/plainDate";
+import {DatePanelDate} from "./DatePanelDate";
+
+const DefaultTime = {
+  start: '00:00:00',
+  end: '23:59:59'
+};
+
+/**
+ * 日期范围选择面板
+ * @author  韦胜健
+ * @date    2022/12/12 10:59
+ */
+export const DatePanelRange = designComponent({
+  name: 'date-panel-range',
+  props: {
+    ...DatePublicProps,
+    range: { type: Boolean, default: true },
+    view: { type: String as PropType<eDateView>, default: eDateView.date }
+  },
+  emits: {
+    ...DatePublicEmits,
+    mousedown: (e: MouseEvent, type: eDateEmitRangeType) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const {
+      state,
+      displayFormat,
+      valueFormat,
+      startModel,
+      endModel,
+      handler,
+      setSelectDate,
+      today,
+    } = useDatePanel({
+      props,
+      emit,
+      jdView: UseDateJudgementView.YMD,
+      processPd: {
+        range: (spd, epd) => {
+          spd = spd.useHms(state.pd.spd || defaultTimePd.value.start);
+          epd = epd.useHms(state.pd.epd || defaultTimePd.value.end);
+          return utils.processPd(spd, epd);
+        }
+      },
+    });
+
+    const defaultTimePd = computed(() => {
+      const config = { displayFormat: DefaultDateFormatString.Hms, valueFormat: DefaultDateFormatString.Hms };
+      return {
+        start: plainDate(props.defaultStartTime || DefaultTime.start, config),
+        end: plainDate(props.defaultEndTime || DefaultTime.end, config),
+      };
+    });
+
+    const utils = {
+      processPd: (argSpd: PDate | null, argEpd: PDate | null) => {
+        let spd = argSpd || argEpd!;
+        let epd = argEpd || argSpd!;
+        const { max, min } = state.topState;
+        const jdView = props.datetime ? 'YMDHms' : 'YMD';
+        if (!!max) {
+          if (max[jdView] < spd[jdView]) spd = max;
+          if (max[jdView] < epd[jdView]) epd = max;
+        }
+        if (!!min) {
+          if (min[jdView] > spd[jdView]) spd = min;
+          if (min[jdView] > epd[jdView]) epd = min;
+        }
+        return spd[jdView] > epd[jdView] ? {
+          spd: epd,
+          epd: spd,
+        } : {
+          spd, epd
+        };
+      },
+    };
+
+    const externalHandler = {
+      onSelectTime: (val: string, type: eDateEmitRangeType) => {
+        let pd = (type === eDateEmitRangeType.start ? state.pd.spd : state.pd.epd) || today;
+        pd = pd.useHms(defaultTimePd.value.start.useValue(val));
+        const { spd, epd } = utils.processPd(type === eDateEmitRangeType.start ? pd : state.pd.spd, type === eDateEmitRangeType.end ? pd : state.pd.epd);
+        startModel.value = spd.getDisplay();
+        endModel.value = epd.getDisplay();
+        state.range = {
+          hover: null,
+          value: [spd, epd],
+        };
+        emit.onUpdateModelValue(startModel.value, eDateEmitRangeType.start);
+        emit.onUpdateModelValue(endModel.value, eDateEmitRangeType.end);
+      }
+    };
+
+    const binding = computed(() => {
+      const startSelectDate = state.selectDate;
+      const publicProps = Object.keys(DatePublicProps).reduce((ret, key) => {
+        (ret as any)[key] = (props as any)[key];
+        return ret;
+      }, {});
+      Object.assign(publicProps, {
+        displayFormat: displayFormat,
+        valueFormat: valueFormat,
+      });
+      const start = {
+        ...publicProps,
+        selectDate: startSelectDate,
+        modelValue: startModel.value,
+        defaultTime: props.defaultStartTime || DefaultTime.start,
+
+        onSelectDateChange: setSelectDate,
+        onMouseenter: handler.onMouseenter,
+        onClick: handler.onClick,
+        onSelectTime: (val: string) => externalHandler.onSelectTime(val, eDateEmitRangeType.start),
+        onMouseDown: (e: MouseEvent) => emit.mousedown(e, eDateEmitRangeType.start),
+      };
+      const endSelectDate = startSelectDate.useMonthDate(startSelectDate.month + 1, 1);
+      const end = {
+        ...publicProps,
+        selectDate: endSelectDate,
+        modelValue: endModel.value,
+        defaultTime: props.defaultEndTime || DefaultTime.end,
+
+        onSelectDateChange: (val: PDate) => setSelectDate(val.useMonthDate(val.month - 1, 1)),
+        onMouseenter: handler.onMouseenter,
+        onClick: handler.onClick,
+        onSelectTime: (val: string) => externalHandler.onSelectTime(val, eDateEmitRangeType.end),
+        onMouseDown: (e: MouseEvent) => emit.mousedown(e, eDateEmitRangeType.end),
+      };
+      return { start, end };
+    });
+
+    return {
+      render: () => (
+        <div className={`${getComponentCls("date-base-panel")} ${getComponentCls("date-panel-date-range")}`}>
+          <DatePanelDate {...binding.value.start}/>
+          <DatePanelDate {...binding.value.end}/>
+        </div>
+      )
+    };
+  },
+});

package/src/packages/components/DatePicker/panel/DatePanelWeek.tsx

@@ -1,52 +1,52 @@
-import {computed, designComponent, getComponentCls} from "plain-design-composition";
-import {DatePublicEmits, DatePublicProps} from "../date.utils";
-import {useDateWeek} from "./useDateWeek";
-import {UseDateJudgementView} from "./useDatePanel";
-import {PDate} from "../../../utils/plainDate";
-import {DatePanelDate} from "./DatePanelDate";
-
-/**
- * 星期选择面板
- * @author  韦胜健
- * @date    2022/12/12 10:59
- */
-export const DatePanelWeek = designComponent({
-  name: 'date-panel-week',
-  props: {
-    ...DatePublicProps,
-  },
-  emits: {
-    ...DatePublicEmits,
-  },
-  setup({ props, event: { emit } }) {
-
-    const { useDateData, externalHandler } = useDateWeek({
-      props,
-      emit,
-      jdView: UseDateJudgementView.YMD,
-      getDateData: (pd: PDate) => {
-        let day = pd.day;
-        let firstWeekDay = props.firstWeekDay;
-        const weekDayDuration = day - firstWeekDay;
-        let offsetDay = weekDayDuration === 0 ? 0 : weekDayDuration > 0 ? weekDayDuration : 7 + weekDayDuration;
-        const spd = pd.useMonthDate(pd.month, pd.date - offsetDay);
-        const epd = spd.useMonthDate(spd.month, spd.date + 6);
-        return [spd, epd];
-      },
-    });
-
-    const dateAttrs = computed(() => ({
-      className: getComponentCls("date-panel-week"),
-      firstWeekDay: props.firstWeekDay,
-      selectDate: useDateData.state.selectDate,
-      onMouseenter: externalHandler.onMouseenter,
-      onClick: externalHandler.onClick,
-      onMouseleaveDateList: externalHandler.onMouseleaveDateList,
-      onSelectDateChange: useDateData.setSelectDate,
-    }));
-
-    return {
-      render: () => <DatePanelDate {...dateAttrs.value}/>
-    };
-  },
-});
+import {computed, designComponent, getComponentCls} from "plain-design-composition";
+import {DatePublicEmits, DatePublicProps} from "../date.utils";
+import {useDateWeek} from "./useDateWeek";
+import {UseDateJudgementView} from "./useDatePanel";
+import {PDate} from "../../../utils/plainDate";
+import {DatePanelDate} from "./DatePanelDate";
+
+/**
+ * 星期选择面板
+ * @author  韦胜健
+ * @date    2022/12/12 10:59
+ */
+export const DatePanelWeek = designComponent({
+  name: 'date-panel-week',
+  props: {
+    ...DatePublicProps,
+  },
+  emits: {
+    ...DatePublicEmits,
+  },
+  setup({ props, event: { emit } }) {
+
+    const { useDateData, externalHandler } = useDateWeek({
+      props,
+      emit,
+      jdView: UseDateJudgementView.YMD,
+      getDateData: (pd: PDate) => {
+        let day = pd.day;
+        let firstWeekDay = props.firstWeekDay;
+        const weekDayDuration = day - firstWeekDay;
+        let offsetDay = weekDayDuration === 0 ? 0 : weekDayDuration > 0 ? weekDayDuration : 7 + weekDayDuration;
+        const spd = pd.useMonthDate(pd.month, pd.date - offsetDay);
+        const epd = spd.useMonthDate(spd.month, spd.date + 6);
+        return [spd, epd];
+      },
+    });
+
+    const dateAttrs = computed(() => ({
+      className: getComponentCls("date-panel-week"),
+      firstWeekDay: props.firstWeekDay,
+      selectDate: useDateData.state.selectDate,
+      onMouseenter: externalHandler.onMouseenter,
+      onClick: externalHandler.onClick,
+      onMouseleaveDateList: externalHandler.onMouseleaveDateList,
+      onSelectDateChange: useDateData.setSelectDate,
+    }));
+
+    return {
+      render: () => <DatePanelDate {...dateAttrs.value}/>
+    };
+  },
+});

package/src/packages/components/DatePicker/panel/DatePanelYear.tsx

@@ -1,100 +1,100 @@
-import {DateItemData, DatePanelItemWrapper, DatePanelWrapper, DatePublicEmits, DatePublicProps, eSlideTransitionDirection} from "../date.utils";
-import {computed, designComponent, getComponentCls} from "plain-design-composition";
-import Button from "../../Button";
-import {UseDateJudgementView, useDatePanel} from "./useDatePanel";
-import {ThemeSize} from "../../../uses/useStyle";
-
-/**
- * 年份选择面板
- * @author  韦胜健
- * @date    2022/12/12 10:59
- */
-export const DatePanelYear = designComponent({
-  name: 'date-panel-year',
-  props: {
-    ...DatePublicProps,
-  },
-  emits: {
-    ...DatePublicEmits,
-  },
-  setup({ props, event: { emit } }) {
-
-    const {
-      state,
-      setSelectDate,
-      today,
-      getStatus,
-      handler,
-    } = useDatePanel({
-      props,
-      emit,
-      jdView: UseDateJudgementView.Y,
-      getSlide: (pd) => pd.year > data.value.selectYear + 19 ? eSlideTransitionDirection.next : eSlideTransitionDirection.prev,
-    });
-
-    const data = computed(() => {
-      const { selectDate } = state;
-      let selectYear = selectDate.year!;
-      selectYear = selectYear - selectYear % 20;
-      let list: DateItemData[] = [];
-      for (let i = selectYear; i < selectYear + 20; i++) {
-        const pd = today.useYear(i);
-        let item: DateItemData = { label: i, pd, ...getStatus(pd), };
-        list.push(item);
-      }
-      return {
-        list,
-        /*年份面板标题，展示列表中年份的范围*/
-        title: `${selectYear}-${selectYear + 19}`,
-        /*当前选择的年份*/
-        selectYear,
-      };
-    });
-
-    const methods = {
-      /**
-       * 切换上一个年份列表
-       * @author  韦胜健
-       * @date    2020/4/15 11:17
-       */
-      prevYearList() {
-        state.slide = eSlideTransitionDirection.prev;
-        setSelectDate(today.useYear(data.value.selectYear - 20));
-      },
-      /**
-       *
-       * @author  切换下一个年份列表
-       * @date    2020/4/15 11:18
-       */
-      nextYearList() {
-        state.slide = eSlideTransitionDirection.next;
-        setSelectDate(today.useYear(data.value.selectYear + 20));
-      },
-    };
-
-    return {
-      render: () => {
-        return DatePanelWrapper({
-          className: getComponentCls("date-base-panel-year"),
-          left: <Button icon="pi-double-left" mode="text" size={ThemeSize.mini} onClick={methods.prevYearList}/>,
-          center: <span className="date-base-panel-header-static-label">{data.value.title}</span>,
-          right: <Button icon="pi-double-right" mode="text" size={ThemeSize.mini} onClick={methods.nextYearList}/>,
-          content: (
-            <ul{...{
-              className: 'date-base-panel-year-list',
-              key: data.value.selectYear,
-              direction: "vertical"
-            }}>
-              {data.value.list.map(item => DatePanelItemWrapper({
-                item,
-                Node: (<li key={item.label} className="date-base-panel-year-item"/>),
-                onClick: handler.onClick,
-                onMouseEnter: handler.onMouseenter,
-              }))}
-            </ul>
-          )
-        });
-      }
-    };
-  },
-});
+import {DateItemData, DatePanelItemWrapper, DatePanelWrapper, DatePublicEmits, DatePublicProps, eSlideTransitionDirection} from "../date.utils";
+import {computed, designComponent, getComponentCls} from "plain-design-composition";
+import Button from "../../Button";
+import {UseDateJudgementView, useDatePanel} from "./useDatePanel";
+import {ThemeSize} from "../../../uses/useStyle";
+
+/**
+ * 年份选择面板
+ * @author  韦胜健
+ * @date    2022/12/12 10:59
+ */
+export const DatePanelYear = designComponent({
+  name: 'date-panel-year',
+  props: {
+    ...DatePublicProps,
+  },
+  emits: {
+    ...DatePublicEmits,
+  },
+  setup({ props, event: { emit } }) {
+
+    const {
+      state,
+      setSelectDate,
+      today,
+      getStatus,
+      handler,
+    } = useDatePanel({
+      props,
+      emit,
+      jdView: UseDateJudgementView.Y,
+      getSlide: (pd) => pd.year > data.value.selectYear + 19 ? eSlideTransitionDirection.next : eSlideTransitionDirection.prev,
+    });
+
+    const data = computed(() => {
+      const { selectDate } = state;
+      let selectYear = selectDate.year!;
+      selectYear = selectYear - selectYear % 20;
+      let list: DateItemData[] = [];
+      for (let i = selectYear; i < selectYear + 20; i++) {
+        const pd = today.useYear(i);
+        let item: DateItemData = { label: i, pd, ...getStatus(pd), };
+        list.push(item);
+      }
+      return {
+        list,
+        /*年份面板标题，展示列表中年份的范围*/
+        title: `${selectYear}-${selectYear + 19}`,
+        /*当前选择的年份*/
+        selectYear,
+      };
+    });
+
+    const methods = {
+      /**
+       * 切换上一个年份列表
+       * @author  韦胜健
+       * @date    2020/4/15 11:17
+       */
+      prevYearList() {
+        state.slide = eSlideTransitionDirection.prev;
+        setSelectDate(today.useYear(data.value.selectYear - 20));
+      },
+      /**
+       *
+       * @author  切换下一个年份列表
+       * @date    2020/4/15 11:18
+       */
+      nextYearList() {
+        state.slide = eSlideTransitionDirection.next;
+        setSelectDate(today.useYear(data.value.selectYear + 20));
+      },
+    };
+
+    return {
+      render: () => {
+        return DatePanelWrapper({
+          className: getComponentCls("date-base-panel-year"),
+          left: <Button icon="pi-double-left" mode="text" size={ThemeSize.mini} onClick={methods.prevYearList}/>,
+          center: <span className="date-base-panel-header-static-label">{data.value.title}</span>,
+          right: <Button icon="pi-double-right" mode="text" size={ThemeSize.mini} onClick={methods.nextYearList}/>,
+          content: (
+            <ul{...{
+              className: 'date-base-panel-year-list',
+              key: data.value.selectYear,
+              direction: "vertical"
+            }}>
+              {data.value.list.map(item => DatePanelItemWrapper({
+                item,
+                Node: (<li key={item.label} className="date-base-panel-year-item"/>),
+                onClick: handler.onClick,
+                onMouseEnter: handler.onMouseenter,
+              }))}
+            </ul>
+          )
+        });
+      }
+    };
+  },
+});