plain-design 1.0.0-beta.71 → 1.0.0-beta.73

package/src/packages/components/TimePicker/panel/TimePanel.tsx

@@ -1,94 +1,94 @@
-import './time-range-panel.scss';
-import {TimePublicProps} from "./time-panel.utils";
-import {computed, designComponent, iMouseEvent, PropType, RenderNode, useModel} from "plain-design-composition";
-import TimeRangePanel, {TimeRangePanelType} from "./TimeRangePanel";
-import {delay} from "plain-utils/utils/delay";
-import TimeBasePanel, {TimePanelLayout} from "./TimeBasePanel";
-
-export const TimePanelProps = {
-  modelValue: { type: String as PropType<string | null | undefined> },
-  start: { type: String as PropType<string | null | undefined> },
-  end: { type: String as PropType<string | null | undefined> },
-  range: { type: Boolean },
-  separate: { type: Boolean },
-  ...TimePublicProps,
-};
-
-export const TimePanel = designComponent({
-  name: 'time-panel',
-  props: {
-    ...TimePanelProps,
-    foot: { type: Function as PropType<() => RenderNode> },
-  },
-  emits: {
-    onUpdateModelValue: (val: string | undefined, type: TimeRangePanelType) => true,
-    onUpdateStart: (val?: string | null | undefined) => true,
-    onUpdateEnd: (val?: string | null | undefined) => true,
-
-    onMousedownBasePanel: (e: iMouseEvent) => true,
-    onMousedownStartPanel: (e: MouseEvent) => true,
-    onMousedownEndPanel: (e: MouseEvent) => true,
-    onEnterColumn: (type: TimePanelLayout, range?: TimeRangePanelType) => true,
-  },
-  setup({ props, event: { emit } }) {
-
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue as any);
-    const start = useModel(() => props.start, emit.onUpdateStart);
-    const end = useModel(() => props.end, emit.onUpdateEnd);
-
-    const handler = {
-      onBaseChange: async (val?: string) => {
-        await delay();
-        model.value = val;
-      },
-      onRangeChange: async (val: string | undefined, type: TimeRangePanelType) => {
-        await delay();
-        if (type === TimeRangePanelType.start) {
-          start.value = val;
-        } else if (type === TimeRangePanelType.end) {
-          end.value = val;
-        }
-        emit.onUpdateModelValue(val, type);
-      },
-    };
-
-    const binding = computed(() => {
-
-      const publicProps = Object.keys(TimePublicProps).reduce((ret: any, key) => {
-        ret[key] = (props as any)[key];
-        return ret;
-      }, {});
-
-      return {
-        base: {
-          ...publicProps,
-          modelValue: model.value,
-          onChange: handler.onBaseChange,
-          onMouseDown: emit.onMousedownBasePanel,
-          onEnterColumn: emit.onEnterColumn,
-        },
-        range: {
-          ...publicProps,
-          start: start.value,
-          end: end.value,
-          onChange: handler.onRangeChange,
-          onMousedownStartPanel: emit.onMousedownStartPanel,
-          onMousedownEndPanel: emit.onMousedownEndPanel,
-          onEnterColumn: emit.onEnterColumn,
-        },
-      };
-    });
-
-    return {
-      render: () => <>
-        {!props.range ?
-          <TimeBasePanel className="time-panel" {...binding.value.base} key="base"/> :
-          <TimeRangePanel className="time-panel" {...binding.value.range} key="range"/>}
-        {!!props.foot && <div className="time-panel-foot" onMouseDown={emit.onMousedownBasePanel}>
-          {props.foot()}
-        </div>}
-      </>
-    };
-
-  },
-});
+import './time-range-panel.scss';
+import {TimePublicProps} from "./time-panel.utils";
+import {computed, designComponent, iMouseEvent, PropType, RenderNode, useModel} from "plain-design-composition";
+import TimeRangePanel, {TimeRangePanelType} from "./TimeRangePanel";
+import {delay} from "plain-utils/utils/delay";
+import TimeBasePanel, {TimePanelLayout} from "./TimeBasePanel";
+
+export const TimePanelProps = {
+  modelValue: { type: String as PropType<string | null | undefined> },
+  start: { type: String as PropType<string | null | undefined> },
+  end: { type: String as PropType<string | null | undefined> },
+  range: { type: Boolean },
+  separate: { type: Boolean },
+  ...TimePublicProps,
+};
+
+export const TimePanel = designComponent({
+  name: 'time-panel',
+  props: {
+    ...TimePanelProps,
+    foot: { type: Function as PropType<() => RenderNode> },
+  },
+  emits: {
+    onUpdateModelValue: (val: string | undefined, type: TimeRangePanelType) => true,
+    onUpdateStart: (val?: string | null | undefined) => true,
+    onUpdateEnd: (val?: string | null | undefined) => true,
+
+    onMousedownBasePanel: (e: iMouseEvent) => true,
+    onMousedownStartPanel: (e: MouseEvent) => true,
+    onMousedownEndPanel: (e: MouseEvent) => true,
+    onEnterColumn: (type: TimePanelLayout, range?: TimeRangePanelType) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue as any);
+    const start = useModel(() => props.start, emit.onUpdateStart);
+    const end = useModel(() => props.end, emit.onUpdateEnd);
+
+    const handler = {
+      onBaseChange: async (val?: string) => {
+        await delay();
+        model.value = val;
+      },
+      onRangeChange: async (val: string | undefined, type: TimeRangePanelType) => {
+        await delay();
+        if (type === TimeRangePanelType.start) {
+          start.value = val;
+        } else if (type === TimeRangePanelType.end) {
+          end.value = val;
+        }
+        emit.onUpdateModelValue(val, type);
+      },
+    };
+
+    const binding = computed(() => {
+
+      const publicProps = Object.keys(TimePublicProps).reduce((ret: any, key) => {
+        ret[key] = (props as any)[key];
+        return ret;
+      }, {});
+
+      return {
+        base: {
+          ...publicProps,
+          modelValue: model.value,
+          onChange: handler.onBaseChange,
+          onMouseDown: emit.onMousedownBasePanel,
+          onEnterColumn: emit.onEnterColumn,
+        },
+        range: {
+          ...publicProps,
+          start: start.value,
+          end: end.value,
+          onChange: handler.onRangeChange,
+          onMousedownStartPanel: emit.onMousedownStartPanel,
+          onMousedownEndPanel: emit.onMousedownEndPanel,
+          onEnterColumn: emit.onEnterColumn,
+        },
+      };
+    });
+
+    return {
+      render: () => <>
+        {!props.range ?
+          <TimeBasePanel className="time-panel" {...binding.value.base} key="base"/> :
+          <TimeRangePanel className="time-panel" {...binding.value.range} key="range"/>}
+        {!!props.foot && <div className="time-panel-foot" onMouseDown={emit.onMousedownBasePanel}>
+          {props.foot()}
+        </div>}
+      </>
+    };
+
+  },
+});

package/src/packages/components/TimePicker/panel/TimeRangePanel.tsx

@@ -1,141 +1,141 @@
-import {computed, designComponent, getComponentCls, useModel} from "plain-design-composition";
-import {TimePublicProps} from "./time-panel.utils";
-import {plainDate} from "../../../utils/plainDate";
-import {TimeBasePanel, TimePanelLayout} from "./TimeBasePanel";
-import {useTimeFormat} from "../time.utils";
-
-export enum TimeRangePanelType {
-  start = 'start',
-  end = 'end',
-}
-
-export const TimeRangePanel = designComponent({
-  name: 'time-range-panel',
-  props: {
-    start: { type: String },
-    end: { type: String },
-    ...TimePublicProps,
-  },
-  emits: {
-    onUpdateModelValue: (val: string | undefined, type: TimeRangePanelType) => true,
-    onUpdateStart: (val?: string) => true,
-    onUpdateEnd: (val?: string) => true,
-    onMousedownStartPanel: (e: MouseEvent) => true,
-    onMousedownEndPanel: (e: MouseEvent) => true,
-    onEnterColumn: (type: TimePanelLayout, range: TimeRangePanelType) => true,
-  },
-  setup({ props, event: { emit } }) {
-
-    const { formatString, layoutArray } = useTimeFormat(props);
-
-    const start = useModel(() => props.start, emit.onUpdateStart);
-    const end = useModel(() => props.end, emit.onUpdateEnd);
-
-    const formatData = computed(() => {
-      return {
-        start: !start.value ? null : plainDate(start.value, formatString.value),
-        end: !end.value ? null : plainDate(end.value, formatString.value),
-        max: !props.max ? null : plainDate(props.max, formatString.value),
-        min: !props.min ? null : plainDate(props.min, formatString.value),
-      };
-    });
-
-    const handler = {
-      onStartChange: (value?: string) => {
-        start.value = value;
-        emit.onUpdateModelValue(value, TimeRangePanelType.start);
-
-        let { end: endPd, start: startPd } = formatData.value;
-
-        /*判断在选择start value的时候，有没有end value*/
-        const hasEndPd = !!endPd;
-
-        /*没有end value的话，使用默认end value*/
-        if (!hasEndPd) {
-          endPd = startPd!.useValue(props.defaultEndTime);
-        }
-
-        /*如果此时start value大于end value，设置end value俄日 start value*/
-        if (startPd!.Hms! > endPd!.Hms) {
-          end.value = start.value;
-          emit.onUpdateModelValue(end.value, TimeRangePanelType.end);
-        } else {
-          /*start value正常小于end value，如果end value一开始的时候没有值才派发update事件*/
-          if (!hasEndPd) {
-            end.value = endPd?.getValue();
-            emit.onUpdateModelValue(end.value, TimeRangePanelType.end);
-          }
-        }
-      },
-      onEndChange: (value?: string) => {
-        end.value = value;
-        emit.onUpdateModelValue(value, TimeRangePanelType.end);
-        let { end: endPd, start: startPd } = formatData.value;
-
-        /*判断在选择end value的时候，有没有start value*/
-        const hasStartPd = !!startPd;
-
-        /*如果此时么有start value，则使用默认的start value*/
-        if (!hasStartPd) {
-          startPd = endPd!.useValue(props.defaultStartTime);
-        }
-
-        /*如果此时end value小于start value，则设置start value为end value*/
-        if (endPd!.Hms! < startPd!.Hms) {
-          start.value = end.value;
-          emit.onUpdateModelValue(start.value, TimeRangePanelType.start);
-        } else {
-          /*如果end value正常大于start value，则开始的时候如果没有start value的话，就派发一update start的事件*/
-          if (!hasStartPd) {
-            start.value = startPd?.getValue();
-            emit.onUpdateModelValue(start.value, TimeRangePanelType.start);
-          }
-        }
-      },
-    };
-
-    const binding = computed(() => {
-      const publicProps = Object.keys(TimePublicProps).reduce((ret: any, key) => {
-        ret[key] = (props as any)[key];
-        return ret;
-      }, {});
-      const { max, min } = props;
-      const publicBinding = {
-        ...publicProps,
-        max,
-        min,
-        layout: layoutArray.value,
-        disableChangeOnScroll: true,
-      };
-      return {
-        start: {
-          ...publicBinding,
-          defaultTime: publicBinding.defaultStartTime,
-          modelValue: start.value,
-          onChange: handler.onStartChange,
-          onMouseDown: emit.onMousedownStartPanel,
-          onEnterColumn: (type: TimePanelLayout) => emit.onEnterColumn(type, TimeRangePanelType.start),
-        },
-        end: {
-          ...publicBinding,
-          defaultTime: publicBinding.defaultEndTime,
-          modelValue: end.value,
-          onChange: handler.onEndChange,
-          onMouseDown: emit.onMousedownEndPanel,
-          onEnterColumn: (type: TimePanelLayout) => emit.onEnterColumn(type, TimeRangePanelType.end),
-        },
-      };
-    });
-
-    return {
-      render: () => (
-        <div className={getComponentCls("time-range-panel")}>
-          <TimeBasePanel {...binding.value.start}/>
-          <TimeBasePanel {...binding.value.end}/>
-        </div>
-      )
-    };
-  },
-});
-
-export default TimeRangePanel;
+import {computed, designComponent, getComponentCls, useModel} from "plain-design-composition";
+import {TimePublicProps} from "./time-panel.utils";
+import {plainDate} from "../../../utils/plainDate";
+import {TimeBasePanel, TimePanelLayout} from "./TimeBasePanel";
+import {useTimeFormat} from "../time.utils";
+
+export enum TimeRangePanelType {
+  start = 'start',
+  end = 'end',
+}
+
+export const TimeRangePanel = designComponent({
+  name: 'time-range-panel',
+  props: {
+    start: { type: String },
+    end: { type: String },
+    ...TimePublicProps,
+  },
+  emits: {
+    onUpdateModelValue: (val: string | undefined, type: TimeRangePanelType) => true,
+    onUpdateStart: (val?: string) => true,
+    onUpdateEnd: (val?: string) => true,
+    onMousedownStartPanel: (e: MouseEvent) => true,
+    onMousedownEndPanel: (e: MouseEvent) => true,
+    onEnterColumn: (type: TimePanelLayout, range: TimeRangePanelType) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const { formatString, layoutArray } = useTimeFormat(props);
+
+    const start = useModel(() => props.start, emit.onUpdateStart);
+    const end = useModel(() => props.end, emit.onUpdateEnd);
+
+    const formatData = computed(() => {
+      return {
+        start: !start.value ? null : plainDate(start.value, formatString.value),
+        end: !end.value ? null : plainDate(end.value, formatString.value),
+        max: !props.max ? null : plainDate(props.max, formatString.value),
+        min: !props.min ? null : plainDate(props.min, formatString.value),
+      };
+    });
+
+    const handler = {
+      onStartChange: (value?: string) => {
+        start.value = value;
+        emit.onUpdateModelValue(value, TimeRangePanelType.start);
+
+        let { end: endPd, start: startPd } = formatData.value;
+
+        /*判断在选择start value的时候，有没有end value*/
+        const hasEndPd = !!endPd;
+
+        /*没有end value的话，使用默认end value*/
+        if (!hasEndPd) {
+          endPd = startPd!.useValue(props.defaultEndTime);
+        }
+
+        /*如果此时start value大于end value，设置end value俄日 start value*/
+        if (startPd!.Hms! > endPd!.Hms) {
+          end.value = start.value;
+          emit.onUpdateModelValue(end.value, TimeRangePanelType.end);
+        } else {
+          /*start value正常小于end value，如果end value一开始的时候没有值才派发update事件*/
+          if (!hasEndPd) {
+            end.value = endPd?.getValue();
+            emit.onUpdateModelValue(end.value, TimeRangePanelType.end);
+          }
+        }
+      },
+      onEndChange: (value?: string) => {
+        end.value = value;
+        emit.onUpdateModelValue(value, TimeRangePanelType.end);
+        let { end: endPd, start: startPd } = formatData.value;
+
+        /*判断在选择end value的时候，有没有start value*/
+        const hasStartPd = !!startPd;
+
+        /*如果此时么有start value，则使用默认的start value*/
+        if (!hasStartPd) {
+          startPd = endPd!.useValue(props.defaultStartTime);
+        }
+
+        /*如果此时end value小于start value，则设置start value为end value*/
+        if (endPd!.Hms! < startPd!.Hms) {
+          start.value = end.value;
+          emit.onUpdateModelValue(start.value, TimeRangePanelType.start);
+        } else {
+          /*如果end value正常大于start value，则开始的时候如果没有start value的话，就派发一update start的事件*/
+          if (!hasStartPd) {
+            start.value = startPd?.getValue();
+            emit.onUpdateModelValue(start.value, TimeRangePanelType.start);
+          }
+        }
+      },
+    };
+
+    const binding = computed(() => {
+      const publicProps = Object.keys(TimePublicProps).reduce((ret: any, key) => {
+        ret[key] = (props as any)[key];
+        return ret;
+      }, {});
+      const { max, min } = props;
+      const publicBinding = {
+        ...publicProps,
+        max,
+        min,
+        layout: layoutArray.value,
+        disableChangeOnScroll: true,
+      };
+      return {
+        start: {
+          ...publicBinding,
+          defaultTime: publicBinding.defaultStartTime,
+          modelValue: start.value,
+          onChange: handler.onStartChange,
+          onMouseDown: emit.onMousedownStartPanel,
+          onEnterColumn: (type: TimePanelLayout) => emit.onEnterColumn(type, TimeRangePanelType.start),
+        },
+        end: {
+          ...publicBinding,
+          defaultTime: publicBinding.defaultEndTime,
+          modelValue: end.value,
+          onChange: handler.onEndChange,
+          onMouseDown: emit.onMousedownEndPanel,
+          onEnterColumn: (type: TimePanelLayout) => emit.onEnterColumn(type, TimeRangePanelType.end),
+        },
+      };
+    });
+
+    return {
+      render: () => (
+        <div className={getComponentCls("time-range-panel")}>
+          <TimeBasePanel {...binding.value.start}/>
+          <TimeBasePanel {...binding.value.end}/>
+        </div>
+      )
+    };
+  },
+});
+
+export default TimeRangePanel;

package/src/packages/components/TimePicker/panel/time-base-column.scss

@@ -1,51 +1,51 @@
-@import "./time.public";
-
-@include prefix(time-base-column) {
-  display: inline-block;
-  height: 7*$time-size;
-  width: 40px;
-  border-radius: 2px;
-
-  .time-base-column-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    position: relative;
-
-    .time-base-column-item {
-      font-size: 12px;
-      height: $time-size;
-      line-height: $time-size;
-      transition: all 300ms ease;
-      text-align: center;
-
-      &.time-base-column-option-item {
-        cursor: pointer;
-
-        &:hover {
-          background-color: plv(background-hover);
-          color: plv(text-1);
-        }
-      }
-
-      &.time-base-column-item-disabled {
-        color: plv(text-3);
-        cursor: not-allowed;
-
-        &:hover {
-          color: plv(text-3);
-          background-color: transparent;
-        }
-      }
-
-      &.time-base-column-item-current {
-        background-color: plv(primary-light-1);
-        color: plv(primary-6);
-
-        &:hover {
-          color: plv(primary-6);
-        }
-      }
-    }
-  }
-}
+@import "./time.public";
+
+@include prefix(time-base-column) {
+  display: inline-block;
+  height: 7*$time-size;
+  width: 40px;
+  border-radius: 2px;
+
+  .time-base-column-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    position: relative;
+
+    .time-base-column-item {
+      font-size: 12px;
+      height: $time-size;
+      line-height: $time-size;
+      transition: all 300ms ease;
+      text-align: center;
+
+      &.time-base-column-option-item {
+        cursor: pointer;
+
+        &:hover {
+          background-color: plv(background-hover);
+          color: plv(text-1);
+        }
+      }
+
+      &.time-base-column-item-disabled {
+        color: plv(text-3);
+        cursor: not-allowed;
+
+        &:hover {
+          color: plv(text-3);
+          background-color: transparent;
+        }
+      }
+
+      &.time-base-column-item-current {
+        background-color: plv(primary-light-1);
+        color: plv(primary-6);
+
+        &:hover {
+          color: plv(primary-6);
+        }
+      }
+    }
+  }
+}

package/src/packages/components/TimePicker/panel/time-base-panel.scss

@@ -1,39 +1,39 @@
-@import "./time.public";
-
-@include prefix(time-base-panel) {
-  display: inline-block;
-  position: relative;
-  color: plv(text-2);
-
-  &:before {
-    position: absolute;
-    top: $time-size*3;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background-color: plv(border-color);
-    content: '';
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  &:after {
-    position: absolute;
-    top: $time-size*4;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background-color: plv(border-color);
-    content: '';
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  .#{componentName(time-base-column)} {
-    border: none;
-
-    & + .#{componentName(time-base-column)} {
-      border-left: dashed 1px plv(border-color);
-    }
-  }
-}
+@import "./time.public";
+
+@include prefix(time-base-panel) {
+  display: inline-block;
+  position: relative;
+  color: plv(text-2);
+
+  &:before {
+    position: absolute;
+    top: $time-size*3;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: plv(border-color);
+    content: '';
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  &:after {
+    position: absolute;
+    top: $time-size*4;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: plv(border-color);
+    content: '';
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .#{componentName(time-base-column)} {
+    border: none;
+
+    & + .#{componentName(time-base-column)} {
+      border-left: dashed 1px plv(border-color);
+    }
+  }
+}