plain-design 1.0.0-beta.23 → 1.0.0-beta.25

package/src/packages/components/InputNumber/input-number.utils.tsx

@@ -1,94 +1,94 @@
-import {StyleProps} from "../../uses/useStyle";
-import {EditProps} from "../../uses/useEdit";
-import {ComponentEvent, createHooks, createRenderHook, createSyncHooks, ExtractPropTypes, iMouseEvent, PropType, tSlotsType} from "plain-design-composition";
-import {NumberButtonTypes} from "./number.utils";
-import {InputPropsOption} from "../Input/input.utils";
-
-export const InputNumberPropsOption = {
-  ...StyleProps,
-  ...EditProps,
-
-  modelValue: { type: [String, Number, Array] as PropType<string | number | string[]> },// 双向绑定值
-  min: { type: [String, Number] },                              // 最小值
-  max: { type: [String, Number] },                              // 最大值
-  step: { type: [String, Number], default: 1 },                 // 计数器步长
-  stepStrictly: { type: Boolean },                                    // 是否只能输入 step 的倍数
-  precision: { type: [Number, String] },                        // 数值精度
-  button: { type: [String, Boolean] as PropType<boolean | typeof NumberButtonTypes.TYPE | null>, default: NumberButtonTypes.right },// 按钮模式 false, 'none','button','right'
-  availableUnits: { type: Array as PropType<string[]> },              // 允许输入的数字单位
-  defaultUnit: { type: String },                                      // 默认的数字单位，当没有值的时候点击加减号默认给的单位
-  addIcon: { type: String },                                          // add按钮图标
-  subIcon: { type: String },                                          // sub按钮图标
-
-  /*---------------------------------------input-------------------------------------------*/
-  inputAttrs: { type: Object },                                       // input属性配置对象
-  suggestion: InputPropsOption['suggestion'],                         // 推荐输入配置
-};
-
-export type iInputNumberPropsType = ExtractPropTypes<typeof InputNumberPropsOption>
-
-export const InputNumberEmitsOption = {
-  onFocus: (e: FocusEvent) => true,
-  onBlur: (e: FocusEvent) => true,
-  onUpdateModelValue: (val: string | number | string[] | undefined) => true,
-};
-
-export type iInputNumberEventType = ComponentEvent<typeof InputNumberEmitsOption>
-
-export const InputNumberSlotsOption = ['prefix', 'suffix'] as const;
-
-export type iInputNumberSlotsType = tSlotsType<typeof InputNumberSlotsOption>
-
-export interface iInputNumberValueInfo {
-  val: undefined | number | 'NAN',
-  unit?: string,
-}
-
-export interface iInputNumberEffectiveValueInfo {
-  val: undefined | number,
-  unit?: string
-}
-
-export function createInputNumberHooks() {
-  return {
-    /*渲染input*/
-    onRender: createRenderHook({ single: true }),
-    /*输入值变化动作，注意单值输入的时候是Input的onUpdateModelValue，多值的时候是onUpdateMultipleText*/
-    onInput: createHooks<(val: any) => void>(),
-    /*获取Input的编辑绑定值属性，单值的时候是绑定modelValue，多值的时候是绑定multipleText，当然可以额外多多传一其他的一些属性*/
-    onGetInputEditAttrs: createSyncHooks<(attrs: any) => void>(),
-    /*添加值动作，不是点击加号动作*/
-    onAdd: createSyncHooks<(newVal: string | number | undefined) => void>(),
-    /*减少值动作，不是点击减号动作*/
-    onSub: createSyncHooks<(newVal: string | number | undefined) => void>(),
-    /*获取有效的输入值，在触发add以及sub的时候需要根据这个作为原始值做计算*/
-    onGetEffectiveInputValue: createSyncHooks<(valInfo: iInputNumberEffectiveValueInfo) => void>(),
-    /*获取焦点动作*/
-    onFocus: createHooks<(e: FocusEvent) => void>(),
-    /*失去焦点动作*/
-    onBlur: createHooks<(e: FocusEvent) => void>(),
-    /*点击resize按钮动作*/
-    onMousedownResize: createHooks<(e: iMouseEvent) => void>(),
-    /*resize值变化动作*/
-    onResize: createHooks<(val: number) => void>(),
-  };
-}
-
-export type iInputNumberHooks = ReturnType<typeof createInputNumberHooks>
-
-export type iInputNumberCompositionParam = {
-  props: iInputNumberPropsType,
-  event: iInputNumberEventType,
-  slots: iInputNumberSlotsType,
-  hooks: iInputNumberHooks,
-}
-
-export interface iInputNumberValueInfo {
-  val: undefined | number | 'NAN',
-  unit?: string
-}
-
-export interface iInputNumberEffectiveValueInfo {
-  val: undefined | number;
-  unit?: string,
-}
+import {StyleProps} from "../../uses/useStyle";
+import {EditProps} from "../../uses/useEdit";
+import {ComponentEvent, createHooks, createRenderHook, createSyncHooks, ExtractPropTypes, iMouseEvent, PropType, tSlotsType} from "plain-design-composition";
+import {NumberButtonTypes} from "./number.utils";
+import {InputPropsOption} from "../Input/input.utils";
+
+export const InputNumberPropsOption = {
+  ...StyleProps,
+  ...EditProps,
+
+  modelValue: { type: [String, Number, Array] as PropType<string | number | string[]> },// 双向绑定值
+  min: { type: [String, Number] },                              // 最小值
+  max: { type: [String, Number] },                              // 最大值
+  step: { type: [String, Number], default: 1 },                 // 计数器步长
+  stepStrictly: { type: Boolean },                                    // 是否只能输入 step 的倍数
+  precision: { type: [Number, String] },                        // 数值精度
+  button: { type: [String, Boolean] as PropType<boolean | typeof NumberButtonTypes.TYPE | null>, default: NumberButtonTypes.right },// 按钮模式 false, 'none','button','right'
+  availableUnits: { type: Array as PropType<string[]> },              // 允许输入的数字单位
+  defaultUnit: { type: String },                                      // 默认的数字单位，当没有值的时候点击加减号默认给的单位
+  addIcon: { type: String },                                          // add按钮图标
+  subIcon: { type: String },                                          // sub按钮图标
+
+  /*---------------------------------------input-------------------------------------------*/
+  inputAttrs: { type: Object },                                       // input属性配置对象
+  suggestion: InputPropsOption['suggestion'],                         // 推荐输入配置
+};
+
+export type iInputNumberPropsType = ExtractPropTypes<typeof InputNumberPropsOption>
+
+export const InputNumberEmitsOption = {
+  onFocus: (e: FocusEvent) => true,
+  onBlur: (e: FocusEvent) => true,
+  onUpdateModelValue: (val: string | number | string[] | undefined) => true,
+};
+
+export type iInputNumberEventType = ComponentEvent<typeof InputNumberEmitsOption>
+
+export const InputNumberSlotsOption = ['prefix', 'suffix'] as const;
+
+export type iInputNumberSlotsType = tSlotsType<typeof InputNumberSlotsOption>
+
+export interface iInputNumberValueInfo {
+  val: undefined | number | 'NAN',
+  unit?: string,
+}
+
+export interface iInputNumberEffectiveValueInfo {
+  val: undefined | number,
+  unit?: string
+}
+
+export function createInputNumberHooks() {
+  return {
+    /*渲染input*/
+    onRender: createRenderHook({ single: true }),
+    /*输入值变化动作，注意单值输入的时候是Input的onUpdateModelValue，多值的时候是onUpdateMultipleText*/
+    onInput: createHooks<(val: any) => void>(),
+    /*获取Input的编辑绑定值属性，单值的时候是绑定modelValue，多值的时候是绑定multipleText，当然可以额外多多传一其他的一些属性*/
+    onGetInputEditAttrs: createSyncHooks<(attrs: any) => void>(),
+    /*添加值动作，不是点击加号动作*/
+    onAdd: createSyncHooks<(newVal: string | number | undefined) => void>(),
+    /*减少值动作，不是点击减号动作*/
+    onSub: createSyncHooks<(newVal: string | number | undefined) => void>(),
+    /*获取有效的输入值，在触发add以及sub的时候需要根据这个作为原始值做计算*/
+    onGetEffectiveInputValue: createSyncHooks<(valInfo: iInputNumberEffectiveValueInfo) => void>(),
+    /*获取焦点动作*/
+    onFocus: createHooks<(e: FocusEvent) => void>(),
+    /*失去焦点动作*/
+    onBlur: createHooks<(e: FocusEvent) => void>(),
+    /*点击resize按钮动作*/
+    onMousedownResize: createHooks<(e: iMouseEvent) => void>(),
+    /*resize值变化动作*/
+    onResize: createHooks<(val: number) => void>(),
+  };
+}
+
+export type iInputNumberHooks = ReturnType<typeof createInputNumberHooks>
+
+export type iInputNumberCompositionParam = {
+  props: iInputNumberPropsType,
+  event: iInputNumberEventType,
+  slots: iInputNumberSlotsType,
+  hooks: iInputNumberHooks,
+}
+
+export interface iInputNumberValueInfo {
+  val: undefined | number | 'NAN',
+  unit?: string
+}
+
+export interface iInputNumberEffectiveValueInfo {
+  val: undefined | number;
+  unit?: string,
+}

package/src/packages/components/InputNumber/number.scss

@@ -1,77 +1,77 @@
-@include prefix(number) {
-  display: inline-block;
-  .number-prepend-button, .number-append-button {
-    display: inline-flex;
-    padding: 0;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    cursor: pointer;
-    user-select: none;
-    transition: background-color ease 300ms;
-
-    &:hover {
-      background-color: plv(secondary-light-1);
-    }
-  }
-  &.number-button-type-button {
-    .number-prepend-button, .number-append-button {
-      &[plain-click-node-waving] {
-        border-left: initial;
-      }
-    }
-
-    @include sizeMixin(input, ()) {
-      .number-prepend-button, .number-append-button {
-        width: $height,
-      }
-    }
-  }
-  &.number-button-type-right {
-    .number-button-container {
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
-      justify-content: center;
-      padding: 0;
-      position: relative;
-
-      &:after {
-        position: absolute;
-        top: calc(50% - 0.5px);
-        left: 0;
-        right: 0;
-        content: '';
-        background-color: plv(border-color);
-        height: 1px;
-      }
-    }
-
-    @include sizeMixin(input, ()) {
-      .number-button-container {
-        width: $height,
-      }
-    }
-  }
-}
-
-@include prefix(number-resize) {
-  padding-left: 100%;
-  position: relative;
-  & > div {
-    position: absolute;
-    @include inset;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: row-resize;
-    user-select: none;
-  }
-  &:hover {
-    background-color: plv(secondary-light-2);
-  }
-  &.number-resize-dragging {
-    background-color: plv(background-color);
-    box-shadow: plv(message-box-shadow);
-  }
-}
+@include prefix(number) {
+  display: inline-block;
+  .number-prepend-button, .number-append-button {
+    display: inline-flex;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+    transition: background-color ease 300ms;
+
+    &:hover {
+      background-color: plv(secondary-light-1);
+    }
+  }
+  &.number-button-type-button {
+    .number-prepend-button, .number-append-button {
+      &[plain-click-node-waving] {
+        border-left: initial;
+      }
+    }
+
+    @include sizeMixin(input, ()) {
+      .number-prepend-button, .number-append-button {
+        width: $height,
+      }
+    }
+  }
+  &.number-button-type-right {
+    .number-button-container {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: center;
+      padding: 0;
+      position: relative;
+
+      &:after {
+        position: absolute;
+        top: calc(50% - 0.5px);
+        left: 0;
+        right: 0;
+        content: '';
+        background-color: plv(border-color);
+        height: 1px;
+      }
+    }
+
+    @include sizeMixin(input, ()) {
+      .number-button-container {
+        width: $height,
+      }
+    }
+  }
+}
+
+@include prefix(number-resize) {
+  padding-left: 100%;
+  position: relative;
+  & > div {
+    position: absolute;
+    @include inset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: row-resize;
+    user-select: none;
+  }
+  &:hover {
+    background-color: plv(secondary-light-2);
+  }
+  &.number-resize-dragging {
+    background-color: plv(background-color);
+    box-shadow: plv(message-box-shadow);
+  }
+}

package/src/packages/components/InputNumber/number.utils.ts

@@ -1,3 +1,3 @@
-import {createEnum} from "plain-utils/utils/createEnum";
-
-export const NumberButtonTypes = createEnum(['button', 'right', 'resize'] as const);
+import {createEnum} from "plain-utils/utils/createEnum";
+
+export const NumberButtonTypes = createEnum(['button', 'right', 'resize'] as const);

package/src/packages/components/InputNumber/useInputNumber.multiple.tsx

@@ -1,121 +1,121 @@
-import {iInputNumberPublic} from "./useInputNumber.public";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {useMultipleModel} from "../../uses/useMultipleModel";
-import {reactive} from "plain-design-composition";
-
-export function useInputNumberMultiple(
-  { props, hooks, event, utils, effectiveInputValue }: iInputNumberPublic
-) {
-
-  const { effects } = createEffects();
-
-  const model = useMultipleModel(() => props.modelValue as (string | number)[] | undefined, event.emit.onUpdateModelValue as any, props);
-
-  const state = reactive({
-    /*文本框绑定值*/
-    inputValue: null as string | null | undefined | number
-  });
-
-  const handler = {
-    onUpdateModelValue: (vals: any) => {
-      model.value = vals;
-    },
-    onUpdateMultipleText: (val: string | undefined) => {
-      state.inputValue = val;
-    },
-    handleAddTag: () => {
-      const { val, unit } = effectiveInputValue.value;
-      if (val == null) {
-        return false;
-      }
-      const checkValue = utils.checkValue({ val, unit });
-      if (checkValue == state.inputValue && checkValue != null) {
-        const modelValue = [...model.value || []];
-        modelValue.push(checkValue);
-        model.value = modelValue;
-        state.inputValue = undefined;
-      }
-      return false;
-    },
-  };
-
-  /**
-   * 计算当前有效的输入值
-   * @author  韦胜健
-   * @date    2023/2/10 11:31
-   */
-  effects.push(
-    hooks.onGetEffectiveInputValue.use(() => {
-      return utils.getEffectiveValue(state.inputValue, undefined);
-    })
-  );
-
-  /**
-   * 绑定输入文本的属性
-   * @author  韦胜健
-   * @date    2023/2/10 11:31
-   */
-  effects.push(
-    hooks.onGetInputEditAttrs.use(() => ({
-      handleAddTag: handler.handleAddTag,
-      multiple: true,
-      multipleText: state.inputValue,
-      modelValue: model.value,
-      onUpdateModelValue: handler.onUpdateModelValue,
-      onUpdateMultipleText: handler.onUpdateMultipleText,
-      suggestionDisabledOpenOnEnter: true,
-    }))
-  );
-
-  /**
-   * 失去焦点的时候重置输入的本文
-   * @author  韦胜健
-   * @date    2023/2/10 11:34
-   */
-  effects.push(
-    hooks.onBlur.use(() => {
-      state.inputValue = undefined;
-    })
-  );
-
-  /**
-   * 处理点击加号动作
-   * @author  韦胜健
-   * @date    2023/2/10 11:34
-   */
-  effects.push(
-    hooks.onAdd.use(val => {
-      state.inputValue = val;
-    })
-  );
-
-  /**
-   * 处理点击减号动作
-   * @author  韦胜健
-   * @date    2023/2/10 11:34
-   */
-  effects.push(
-    hooks.onSub.use(val => {
-      state.inputValue = val;
-    })
-  );
-
-  /**
-   * 处理拖拽值变化动作
-   * @author  韦胜健
-   * @date    2023/2/10 11:35
-   */
-  effects.push(
-    hooks.onResize.use(val => {
-      if (!props.availableUnits || !props.availableUnits.length) {
-        state.inputValue = undefined;
-      }
-      const { unit: _unit } = utils.getValueInfo(state.inputValue);
-      const unit = _unit || (state.inputValue == null || !String(state.inputValue).trim().length ? props.defaultUnit : undefined);
-      let inputValue = !unit ? val : `${val}${unit}`;
-      handler.onUpdateMultipleText(typeof inputValue === "number" ? String(inputValue) : inputValue);
-    })
-  );
-
-  return effects.clear;
-}
+import {iInputNumberPublic} from "./useInputNumber.public";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {useMultipleModel} from "../../uses/useMultipleModel";
+import {reactive} from "plain-design-composition";
+
+export function useInputNumberMultiple(
+  { props, hooks, event, utils, effectiveInputValue }: iInputNumberPublic
+) {
+
+  const { effects } = createEffects();
+
+  const model = useMultipleModel(() => props.modelValue as (string | number)[] | undefined, event.emit.onUpdateModelValue as any, props);
+
+  const state = reactive({
+    /*文本框绑定值*/
+    inputValue: null as string | null | undefined | number
+  });
+
+  const handler = {
+    onUpdateModelValue: (vals: any) => {
+      model.value = vals;
+    },
+    onUpdateMultipleText: (val: string | undefined) => {
+      state.inputValue = val;
+    },
+    handleAddTag: () => {
+      const { val, unit } = effectiveInputValue.value;
+      if (val == null) {
+        return false;
+      }
+      const checkValue = utils.checkValue({ val, unit });
+      if (checkValue == state.inputValue && checkValue != null) {
+        const modelValue = [...model.value || []];
+        modelValue.push(checkValue);
+        model.value = modelValue;
+        state.inputValue = undefined;
+      }
+      return false;
+    },
+  };
+
+  /**
+   * 计算当前有效的输入值
+   * @author  韦胜健
+   * @date    2023/2/10 11:31
+   */
+  effects.push(
+    hooks.onGetEffectiveInputValue.use(() => {
+      return utils.getEffectiveValue(state.inputValue, undefined);
+    })
+  );
+
+  /**
+   * 绑定输入文本的属性
+   * @author  韦胜健
+   * @date    2023/2/10 11:31
+   */
+  effects.push(
+    hooks.onGetInputEditAttrs.use(() => ({
+      handleAddTag: handler.handleAddTag,
+      multiple: true,
+      multipleText: state.inputValue,
+      modelValue: model.value,
+      onUpdateModelValue: handler.onUpdateModelValue,
+      onUpdateMultipleText: handler.onUpdateMultipleText,
+      suggestionDisabledOpenOnEnter: true,
+    }))
+  );
+
+  /**
+   * 失去焦点的时候重置输入的本文
+   * @author  韦胜健
+   * @date    2023/2/10 11:34
+   */
+  effects.push(
+    hooks.onBlur.use(() => {
+      state.inputValue = undefined;
+    })
+  );
+
+  /**
+   * 处理点击加号动作
+   * @author  韦胜健
+   * @date    2023/2/10 11:34
+   */
+  effects.push(
+    hooks.onAdd.use(val => {
+      state.inputValue = val;
+    })
+  );
+
+  /**
+   * 处理点击减号动作
+   * @author  韦胜健
+   * @date    2023/2/10 11:34
+   */
+  effects.push(
+    hooks.onSub.use(val => {
+      state.inputValue = val;
+    })
+  );
+
+  /**
+   * 处理拖拽值变化动作
+   * @author  韦胜健
+   * @date    2023/2/10 11:35
+   */
+  effects.push(
+    hooks.onResize.use(val => {
+      if (!props.availableUnits || !props.availableUnits.length) {
+        state.inputValue = undefined;
+      }
+      const { unit: _unit } = utils.getValueInfo(state.inputValue);
+      const unit = _unit || (state.inputValue == null || !String(state.inputValue).trim().length ? props.defaultUnit : undefined);
+      let inputValue = !unit ? val : `${val}${unit}`;
+      handler.onUpdateMultipleText(typeof inputValue === "number" ? String(inputValue) : inputValue);
+    })
+  );
+
+  return effects.clear;
+}