plain-design 1.0.0-beta.3 → 1.0.0-beta.5

package/src/packages/components/Tag/index.tsx

@@ -1,77 +1,77 @@
-import {computed, designComponent, getComponentCls, iHTMLElement, iMouseEvent, PropType, useClasses, useStyles} from "plain-design-composition";
-import {ThemeSize, ThemeStatus, useStyle} from "../../uses/useStyle";
-import {iTagColor, TagColor} from "./tag.utils";
-import Icon from "../Icon";
-import Loading from "../Loading";
-import './tag.scss';
-
-export const Tag = designComponent({
-  name: '-tag',
-  inheritPropsType: iHTMLElement,
-  props: {
-    label: {},                                // 标签文本
-    icon: { type: String },                   // 标签图标
-    loading: { type: Boolean },               // 开启加载状态
-    checked: { type: Boolean, default: null },// 标签的激活状态
-    color: { type: [String, Object] as PropType<string | iTagColor> },// 标签颜色
-    closeable: { type: Boolean },             // 是否可删除
-    size: { type: String as PropType<typeof ThemeSize.TYPE>, default: ThemeSize.small },// 'large', 'normal', 'small', 'mini'
-  },
-  slots: ['default'],
-  emits: {
-    onClose: (e: iMouseEvent) => true,
-    onClick: (e: iMouseEvent) => true,
-  },
-  setup({ props, event: { emit }, slots }) {
-
-    const status = Object.keys(ThemeStatus);
-
-    const colors = computed((): iTagColor => {
-      let color = props.color || 'primary';
-      if (typeof color === "string") {
-        if (color in TagColor) {
-          return TagColor[color];
-        }
-        if (status.indexOf(color) > -1) {
-          return { fill: `var(--${getComponentCls(`${color}-6`)})`, text: 'white', };
-        }
-        return { fill: color, text: 'white' };
-      } else {
-        return color;
-      }
-    });
-
-    const { styleComputed } = useStyle();
-
-    const classes = useClasses(() => [
-      getComponentCls('tag'),
-      `tag-size-${styleComputed.value.size}`,
-      {
-        'tag-uncheck': props.checked === false,
-      }
-    ]);
-
-    const styles = useStyles(styles => {
-      if (props.checked === false) {return;}
-      const { fill, text } = colors.value;
-      styles.backgroundColor = fill;
-      styles.color = text;
-    });
-
-    const handler = {
-      onClick: (e: iMouseEvent) => {
-        if (e.currentTarget === e.target) {emit.onClick(e);}
-      },
-      onClose: (e: iMouseEvent) => emit.onClose(e),
-    };
-
-    return () => (
-      <span style={styles.value} className={classes.value} onClick={handler.onClick}>
-        {!!props.icon && <Icon icon={props.icon}/>}
-        {!!props.loading && <Loading type="beta"/>}
-        <span>{slots.default(props.label as any)}</span>
-        {!!props.closeable && <Icon icon="pi-close" onClick={handler.onClose}/>}
-      </span>
-    );
-  },
-});
+import {computed, designComponent, getComponentCls, iHTMLElement, iMouseEvent, PropType, useClasses, useStyles} from "plain-design-composition";
+import {ThemeSize, ThemeStatus, useStyle} from "../../uses/useStyle";
+import {iTagColor, TagColor} from "./tag.utils";
+import Icon from "../Icon";
+import Loading from "../Loading";
+import './tag.scss';
+
+export const Tag = designComponent({
+  name: '-tag',
+  inheritPropsType: iHTMLElement,
+  props: {
+    label: {},                                // 标签文本
+    icon: { type: String },                   // 标签图标
+    loading: { type: Boolean },               // 开启加载状态
+    checked: { type: Boolean, default: null },// 标签的激活状态
+    color: { type: [String, Object] as PropType<string | iTagColor> },// 标签颜色
+    closeable: { type: Boolean },             // 是否可删除
+    size: { type: String as PropType<typeof ThemeSize.TYPE>, default: ThemeSize.small },// 'large', 'normal', 'small', 'mini'
+  },
+  slots: ['default'],
+  emits: {
+    onClose: (e: iMouseEvent) => true,
+    onClick: (e: iMouseEvent) => true,
+  },
+  setup({ props, event: { emit }, slots }) {
+
+    const status = Object.keys(ThemeStatus);
+
+    const colors = computed((): iTagColor => {
+      let color = props.color || 'primary';
+      if (typeof color === "string") {
+        if (color in TagColor) {
+          return TagColor[color];
+        }
+        if (status.indexOf(color) > -1) {
+          return { fill: `var(--${getComponentCls(`${color}-6`)})`, text: 'white', };
+        }
+        return { fill: color, text: 'white' };
+      } else {
+        return color;
+      }
+    });
+
+    const { styleComputed } = useStyle();
+
+    const classes = useClasses(() => [
+      getComponentCls('tag'),
+      `tag-size-${styleComputed.value.size}`,
+      {
+        'tag-uncheck': props.checked === false,
+      }
+    ]);
+
+    const styles = useStyles(styles => {
+      if (props.checked === false) {return;}
+      const { fill, text } = colors.value;
+      styles.backgroundColor = fill;
+      styles.color = text;
+    });
+
+    const handler = {
+      onClick: (e: iMouseEvent) => {
+        if (e.currentTarget === e.target) {emit.onClick(e);}
+      },
+      onClose: (e: iMouseEvent) => emit.onClose(e),
+    };
+
+    return () => (
+      <span style={styles.value} className={classes.value} onClick={handler.onClick}>
+        {!!props.icon && <Icon icon={props.icon}/>}
+        {!!props.loading && <Loading type="beta"/>}
+        <span>{slots.default(props.label as any)}</span>
+        {!!props.closeable && <Icon icon="pi-close" onClick={handler.onClose}/>}
+      </span>
+    );
+  },
+});

package/src/packages/components/Tag/tag.scss

@@ -1,27 +1,27 @@
-@include prefix(tag) {
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-  cursor: pointer;
-  transition: all ease 300ms;
-
-  & + & {
-    margin-left: 8px;
-  }
-
-  @include sizeMixin(tag, (font-size, border-radius)) {
-    height: plv(tag-size-#{$name}-height);
-    padding: 0 4px;
-  }
-
-  .#{componentName(loading)}, .#{componentName(icon)} {
-    &:last-child {
-      cursor: pointer;
-      margin-left: 4px;
-    }
-
-    &:not(:last-child) {
-      margin-right: 4px !important;
-    }
-  }
-}
+@include prefix(tag) {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: all ease 300ms;
+
+  & + & {
+    margin-left: 8px;
+  }
+
+  @include sizeMixin(tag, (font-size, border-radius)) {
+    height: plv(tag-size-#{$name}-height);
+    padding: 0 4px;
+  }
+
+  .#{componentName(loading)}, .#{componentName(icon)} {
+    &:last-child {
+      cursor: pointer;
+      margin-left: 4px;
+    }
+
+    &:not(:last-child) {
+      margin-right: 4px !important;
+    }
+  }
+}

package/src/packages/components/Tag/tag.utils.ts

@@ -1,20 +1,20 @@
-export interface iTagColor {
-  fill: string,// 背景色
-  text: string,// 文字色
-}
-
-export const TagColor: Record<string, iTagColor> = {
-  red: { fill: 'rgb(255,236,232)', text: 'rgb(245,63,63)', },
-  orangered: { fill: 'rgb(255,243,232)', text: 'rgb(247,114,52)' },
-  orange: { fill: 'rgb(255,247,232)', text: 'rgb(255,125,0)' },
-  gold: { fill: 'rgb(255,252,232)', text: 'rgb(247,186,30)' },
-  yellow: { fill: 'rgb(254,255,232)', text: 'rgb(250,220,25)' },
-  lime: { fill: 'rgb(252,255,232)', text: 'rgb(159,219,29)' },
-  green: { fill: 'rgb(232,255,234)', text: 'rgb(0,180,42)' },
-  cyan: { fill: 'rgb(232,255,251)', text: 'rgb(20,201,201)' },
-  blue: { fill: 'rgb(232,247,255)', text: 'rgb(52,145,250)' },
-  purple: { fill: 'rgb(245,232,255)', text: 'rgb(114,46,209)' },
-  pinkpurple: { fill: 'rgb(255,232,251)', text: 'rgb(217,26,217)' },
-  magenta: { fill: 'rgb(255,232,241)', text: 'rgb(245,49,157)' },
-  gray: { fill: 'rgb(247,248,250)', text: 'rgb(134,144,156)' },
-};
+export interface iTagColor {
+  fill: string,// 背景色
+  text: string,// 文字色
+}
+
+export const TagColor: Record<string, iTagColor> = {
+  red: { fill: 'rgb(255,236,232)', text: 'rgb(245,63,63)', },
+  orangered: { fill: 'rgb(255,243,232)', text: 'rgb(247,114,52)' },
+  orange: { fill: 'rgb(255,247,232)', text: 'rgb(255,125,0)' },
+  gold: { fill: 'rgb(255,252,232)', text: 'rgb(247,186,30)' },
+  yellow: { fill: 'rgb(254,255,232)', text: 'rgb(250,220,25)' },
+  lime: { fill: 'rgb(252,255,232)', text: 'rgb(159,219,29)' },
+  green: { fill: 'rgb(232,255,234)', text: 'rgb(0,180,42)' },
+  cyan: { fill: 'rgb(232,255,251)', text: 'rgb(20,201,201)' },
+  blue: { fill: 'rgb(232,247,255)', text: 'rgb(52,145,250)' },
+  purple: { fill: 'rgb(245,232,255)', text: 'rgb(114,46,209)' },
+  pinkpurple: { fill: 'rgb(255,232,251)', text: 'rgb(217,26,217)' },
+  magenta: { fill: 'rgb(255,232,241)', text: 'rgb(245,49,157)' },
+  gray: { fill: 'rgb(247,248,250)', text: 'rgb(134,144,156)' },
+};

package/src/packages/components/TimePicker/createRangeTimeRender.tsx

@@ -1,72 +1,72 @@
-import Input from "../Input";
-import {TimePanel} from "./panel/TimePanel";
-import {tTimeCompositionParams} from "./time.utils";
-import {handleKeyboard} from "../KeyboardService";
-import {useRangeTimeRender} from "./useRangeTimeRender";
-import {createPopupEditor} from "../usePopupEditor";
-import {FixInput} from "../../utils/FixInput";
-import {iKeyboardEvent} from "plain-design-composition";
-
-export function createRangeTimeRender(params: tTimeCompositionParams,) {
-
-  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicTimeAttrs, slots } = params;
-
-  const { effects, refs, onRef, state, startModel, endModel, renderPickerFoot, getInputAttrs, handler, reference } = useRangeTimeRender({
-    ...params,
-    onBlur: () => {popper.methods.hide();},
-  });
-
-  const popper = createPopupEditor({
-    option: {
-      alwaysShowOnClickReference: () => true,
-      popperAttrs: getPublicPopperAttrs,
-      reference: () => !editComputed.value.editable ? null : (reference.getReference() || refs.input?.refs.el),
-      popper: () => <>
-        <TimePanel
-          {...{
-            ...getInheritPublicTimeAttrs(),
-            range: true,
-            start: startModel.value,
-            end: endModel.value,
-            onUpdateStart: handler.onPickerUpdateStart,
-            onUpdateEnd: handler.onPickerUpdateEnd,
-            onMousedownStartPanel: handler.onMousedownStartPanel,
-            onMousedownEndPanel: handler.onMousedownEndPanel,
-            onEnterColumn: handler.onEnterColumn,
-          }}
-        />
-        {renderPickerFoot()}
-      </>
-    },
-  });
-
-  const customHandler = {
-    /**
-     * Input enter按键，打开或者关闭picker
-     * Input Esc按键，关闭picker
-     * @author  韦胜健
-     * @date    2022.7.3 19:29
-     */
-    onKeyboardInput: (e: iKeyboardEvent) => handleKeyboard({
-      enter: () => popper.methods.toggle(),
-      esc: () => popper.methods.hide(),
-    })(e),
-  };
-
-  effects.push(hooks.onRenderInput.use(() => (
-    reference.renderReference({
-      slotExist: slots.default.isExist,
-      slotRender: slots.default,
-      defaultRender: () => (
-        <Input{...getInputAttrs()}>
-          <FixInput ref={onRef.start} type="text" placeholder={props.startPlaceholder} className="input-box input-fill" value={state.input.start} onInput={handler.onStartInputChange} onKeyDown={customHandler.onKeyboardInput} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
-          <FixInput ref={onRef.end} type="text" placeholder={props.endPlaceholder} className="input-box input-fill" value={state.input.end} onInput={handler.onEndInputChange} onKeyDown={customHandler.onKeyboardInput} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
-        </Input>
-      )
-    })
-  )));
-
-  effects.push(() => {popper.methods.dispose();});
-
-  return effects.clear;
-}
+import Input from "../Input";
+import {TimePanel} from "./panel/TimePanel";
+import {tTimeCompositionParams} from "./time.utils";
+import {handleKeyboard} from "../KeyboardService";
+import {useRangeTimeRender} from "./useRangeTimeRender";
+import {createPopupEditor} from "../usePopupEditor";
+import {FixInput} from "../../utils/FixInput";
+import {iKeyboardEvent} from "plain-design-composition";
+
+export function createRangeTimeRender(params: tTimeCompositionParams,) {
+
+  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicTimeAttrs, slots } = params;
+
+  const { effects, refs, onRef, state, startModel, endModel, renderPickerFoot, getInputAttrs, handler, reference } = useRangeTimeRender({
+    ...params,
+    onBlur: () => {popper.methods.hide();},
+  });
+
+  const popper = createPopupEditor({
+    option: {
+      alwaysShowOnClickReference: () => true,
+      popperAttrs: getPublicPopperAttrs,
+      reference: () => !editComputed.value.editable ? null : (reference.getReference() || refs.input?.refs.el),
+      popper: () => <>
+        <TimePanel
+          {...{
+            ...getInheritPublicTimeAttrs(),
+            range: true,
+            start: startModel.value,
+            end: endModel.value,
+            onUpdateStart: handler.onPickerUpdateStart,
+            onUpdateEnd: handler.onPickerUpdateEnd,
+            onMousedownStartPanel: handler.onMousedownStartPanel,
+            onMousedownEndPanel: handler.onMousedownEndPanel,
+            onEnterColumn: handler.onEnterColumn,
+          }}
+        />
+        {renderPickerFoot()}
+      </>
+    },
+  });
+
+  const customHandler = {
+    /**
+     * Input enter按键，打开或者关闭picker
+     * Input Esc按键，关闭picker
+     * @author  韦胜健
+     * @date    2022.7.3 19:29
+     */
+    onKeyboardInput: (e: iKeyboardEvent) => handleKeyboard({
+      enter: () => popper.methods.toggle(),
+      esc: () => popper.methods.hide(),
+    })(e),
+  };
+
+  effects.push(hooks.onRenderInput.use(() => (
+    reference.renderReference({
+      slotExist: slots.default.isExist,
+      slotRender: slots.default,
+      defaultRender: () => (
+        <Input{...getInputAttrs()}>
+          <FixInput ref={onRef.start} type="text" placeholder={props.startPlaceholder} className="input-box input-fill" value={state.input.start} onInput={handler.onStartInputChange} onKeyDown={customHandler.onKeyboardInput} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+          <FixInput ref={onRef.end} type="text" placeholder={props.endPlaceholder} className="input-box input-fill" value={state.input.end} onInput={handler.onEndInputChange} onKeyDown={customHandler.onKeyboardInput} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+        </Input>
+      )
+    })
+  )));
+
+  effects.push(() => {popper.methods.dispose();});
+
+  return effects.clear;
+}

package/src/packages/components/TimePicker/createSeparateRangeTimeRender.tsx

@@ -1,96 +1,96 @@
-import {tTimeCompositionParams} from "./time.utils";
-import Input from "../Input";
-import {TimeRangePanelType} from "./panel/TimeRangePanel";
-import {TimePanel} from "./panel/TimePanel";
-import {handleKeyboard} from "../KeyboardService";
-import {useRangeTimeRender} from "./useRangeTimeRender";
-import {createPopupEditor} from "../usePopupEditor";
-import {FixInput} from "../../utils/FixInput";
-import {iKeyboardEvent} from "plain-design-composition";
-
-export function createSeparateRangeTimeRender(params: tTimeCompositionParams) {
-
-  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicTimeAttrs } = params;
-
-  const { effects, refs, onRef, startModel, endModel, state, getInputAttrs, renderPickerFoot, utils, handler } = useRangeTimeRender({
-    ...params,
-    onBlur: () => {
-      startPopper.methods.hide();
-      endPopper.methods.hide();
-    },
-    onInputClear: (range) => {
-      utils.handleRangeType({ range, start: () => startModel.value = null, end: () => endModel.value = null });
-    },
-  });
-
-  const startPopper = createPopupEditor({
-    option: {
-      popperAttrs: getPublicPopperAttrs,
-      reference: () => !editComputed.value.editable ? null : refs.start,
-      popper: () => <>
-        <TimePanel
-          {...{
-            ...getInheritPublicTimeAttrs(),
-            modelValue: startModel.value,
-            defaultTime: props.defaultStartTime,
-            onChange: handler.onPickerUpdateStart,
-            onMousedownBasePanel: handler.onMousedownStartPanel,
-            onEnterColumn: type => handler.onEnterColumn(type, TimeRangePanelType.start),
-          }}
-        />
-        {renderPickerFoot()}
-      </>
-    },
-  });
-
-  const endPopper = createPopupEditor({
-    option: {
-      popperAttrs: getPublicPopperAttrs,
-      reference: () => !editComputed.value.editable ? null : refs.end,
-      popper: () => <>
-        <TimePanel
-          {...{
-            ...getInheritPublicTimeAttrs(),
-            modelValue: endModel.value,
-            defaultTime: props.defaultEndTime,
-            onChange: handler.onPickerUpdateEnd,
-            onMousedownBasePanel: handler.onMousedownEndPanel,
-            onEnterColumn: type => handler.onEnterColumn(type, TimeRangePanelType.end),
-          }}
-        />
-        {renderPickerFoot()}
-      </>
-    },
-  });
-
-  const customHandler = {
-    /**
-     * Input enter按键，打开或者关闭picker
-     * Input Esc按键，关闭picker
-     * @author  韦胜健
-     * @date    2022.7.3 19:29
-     */
-    onKeyboardInput: (e: iKeyboardEvent, range: TimeRangePanelType) => handleKeyboard({
-      enter: () => {
-        utils.handleRangeType({ range, start: () => startPopper.methods.toggle(), end: () => endPopper.methods.toggle() });
-      },
-      esc: () => {
-        utils.handleRangeType({ range, start: () => startPopper.methods.hide(), end: () => endPopper.methods.hide() });
-      },
-    })(e),
-  };
-
-  effects.push(hooks.onRenderInput.use(() => (
-    <Input{...getInputAttrs()}>
-      <FixInput ref={onRef.start} type="text" placeholder={props.startPlaceholder} className="input-box input-fill" value={state.input.start} onInput={handler.onStartInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.start)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
-      <FixInput ref={onRef.end} type="text" placeholder={props.endPlaceholder} className="input-box input-fill" value={state.input.end} onInput={handler.onEndInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.end)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
-    </Input>
-  )));
-
-  effects.push(() => {
-    startPopper.methods.dispose();
-    endPopper.methods.dispose();
-  });
-
-  return effects.clear;
-}
+import {tTimeCompositionParams} from "./time.utils";
+import Input from "../Input";
+import {TimeRangePanelType} from "./panel/TimeRangePanel";
+import {TimePanel} from "./panel/TimePanel";
+import {handleKeyboard} from "../KeyboardService";
+import {useRangeTimeRender} from "./useRangeTimeRender";
+import {createPopupEditor} from "../usePopupEditor";
+import {FixInput} from "../../utils/FixInput";
+import {iKeyboardEvent} from "plain-design-composition";
+
+export function createSeparateRangeTimeRender(params: tTimeCompositionParams) {
+
+  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicTimeAttrs } = params;
+
+  const { effects, refs, onRef, startModel, endModel, state, getInputAttrs, renderPickerFoot, utils, handler } = useRangeTimeRender({
+    ...params,
+    onBlur: () => {
+      startPopper.methods.hide();
+      endPopper.methods.hide();
+    },
+    onInputClear: (range) => {
+      utils.handleRangeType({ range, start: () => startModel.value = null, end: () => endModel.value = null });
+    },
+  });
+
+  const startPopper = createPopupEditor({
+    option: {
+      popperAttrs: getPublicPopperAttrs,
+      reference: () => !editComputed.value.editable ? null : refs.start,
+      popper: () => <>
+        <TimePanel
+          {...{
+            ...getInheritPublicTimeAttrs(),
+            modelValue: startModel.value,
+            defaultTime: props.defaultStartTime,
+            onChange: handler.onPickerUpdateStart,
+            onMousedownBasePanel: handler.onMousedownStartPanel,
+            onEnterColumn: type => handler.onEnterColumn(type, TimeRangePanelType.start),
+          }}
+        />
+        {renderPickerFoot()}
+      </>
+    },
+  });
+
+  const endPopper = createPopupEditor({
+    option: {
+      popperAttrs: getPublicPopperAttrs,
+      reference: () => !editComputed.value.editable ? null : refs.end,
+      popper: () => <>
+        <TimePanel
+          {...{
+            ...getInheritPublicTimeAttrs(),
+            modelValue: endModel.value,
+            defaultTime: props.defaultEndTime,
+            onChange: handler.onPickerUpdateEnd,
+            onMousedownBasePanel: handler.onMousedownEndPanel,
+            onEnterColumn: type => handler.onEnterColumn(type, TimeRangePanelType.end),
+          }}
+        />
+        {renderPickerFoot()}
+      </>
+    },
+  });
+
+  const customHandler = {
+    /**
+     * Input enter按键，打开或者关闭picker
+     * Input Esc按键，关闭picker
+     * @author  韦胜健
+     * @date    2022.7.3 19:29
+     */
+    onKeyboardInput: (e: iKeyboardEvent, range: TimeRangePanelType) => handleKeyboard({
+      enter: () => {
+        utils.handleRangeType({ range, start: () => startPopper.methods.toggle(), end: () => endPopper.methods.toggle() });
+      },
+      esc: () => {
+        utils.handleRangeType({ range, start: () => startPopper.methods.hide(), end: () => endPopper.methods.hide() });
+      },
+    })(e),
+  };
+
+  effects.push(hooks.onRenderInput.use(() => (
+    <Input{...getInputAttrs()}>
+      <FixInput ref={onRef.start} type="text" placeholder={props.startPlaceholder} className="input-box input-fill" value={state.input.start} onInput={handler.onStartInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.start)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+      <FixInput ref={onRef.end} type="text" placeholder={props.endPlaceholder} className="input-box input-fill" value={state.input.end} onInput={handler.onEndInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.end)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+    </Input>
+  )));
+
+  effects.push(() => {
+    startPopper.methods.dispose();
+    endPopper.methods.dispose();
+  });
+
+  return effects.clear;
+}